Kurssisisältö

HTML Essentials

1. Understanding the Web and HTML

Course Introduction Introduction to the Web The History and Evolution of the Web Why HTML Matters in Web Development Basic Structure of an HTML Document Understanding Tags, Elements, and Attributes

2. HTML Fundamentals

HTML Document Structure Explained Challenge: Structuring an HTML Document Using Headings and Paragraphs in HTML Challenge: Mastering Text Markup Enhancing Text and Interactivity in HTML Challenge: Applying Special Text Markup Creating and Using Lists in HTML Challenge: Structuring Content with Lists

3. Images and Media

Working with Images in HTML Challenge: Inserting Images Embedding Audio Files in HTML Challenge: Using Audio Elements Integrating Video into Web Pages Challenge: Using Video Elements

4. Tables and Forms

Creating and Structuring HTML Tables Challenge: Working with Tables Building HTML Forms Challenge: Building a Web Form Using Form Inputs and Labels Effectively Challenge: Applying Form Inputs and Labels HTML Input Attributes for Enhanced Functionality

5. Advanced HTML

Understanding and Using Semantic HTML Exploring Semantic Elements in HTML Challenge: Implementing Semantic Elements Building a Complete Website with HTML Course Conclusion and Final Thoughts

Building a Complete Website with HTML

We have covered all the essential HTML topics and are now ready to build a complete website from scratch. Let's create a one-page portfolio website to showcase your projects and skills.

You can either work on it independently or follow the guide below, where we will provide you with step-by-step instructions and code related to each step.

Step-by-Step Guide

1. Website structure plan

Our website will comprise several key sections:

Header: This section will prominently display the portfolio owner's name and facilitate navigation throughout the website;
About: Here, visitors will find relevant information about the website owner, providing insights into their background and expertise;
Portfolio: This section will showcase various projects, each featuring project images, titles, descriptions, and the technologies utilized;
Contact: We will incorporate a form to gather visitor information;
Footer: The footer will be the concluding section, featuring copyright information and links to social media profiles, phone contact, and email address.

2. Structure content with semantic HTML

Let's create a new index.html file and set up the basic HTML document structure.

index.html

3. Header section

Let's build the header with the website owner name and navigation links.

index.html

4. About section

Section devoted to the brief introduction and information about owner.

index.html

5. Portfolio section

In the portfolio section we focus on the projects with descriptions and images.

index.html

6. Contact section

Let's build the contact form to get in touch with the owner.

index.html

7. Footer section

Finally, let's add copyright information and links to social media.

index.html

Bonus

Let's enhance the appearance of our website not only for search engines but also for users. We can achieve this with the help of CSS, which stands for Cascading Style Sheets. Although we didn't cover CSS in this course, it's an important aspect of website design.

CSS is a style sheet language that allows us to specify the presentation and styling of a document written in a markup language like HTML. It can be the next step after learning HTML — more on this in the next chapter. For now, let's observe how CSS improves HTML.

index.html

index.css

Video Tutorial

Here is the link to the complete website that was built in this chapter: Julia's Website

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 5. Luku 4

Kysy tekoälyä

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Kurssisisältö

HTML Essentials

1. Understanding the Web and HTML

Course Introduction Introduction to the Web The History and Evolution of the Web Why HTML Matters in Web Development Basic Structure of an HTML Document Understanding Tags, Elements, and Attributes

2. HTML Fundamentals

3. Images and Media

Working with Images in HTML Challenge: Inserting Images Embedding Audio Files in HTML Challenge: Using Audio Elements Integrating Video into Web Pages Challenge: Using Video Elements

4. Tables and Forms

5. Advanced HTML

Understanding and Using Semantic HTML Exploring Semantic Elements in HTML Challenge: Implementing Semantic Elements Building a Complete Website with HTML Course Conclusion and Final Thoughts

Building a Complete Website with HTML

We have covered all the essential HTML topics and are now ready to build a complete website from scratch. Let's create a one-page portfolio website to showcase your projects and skills.

You can either work on it independently or follow the guide below, where we will provide you with step-by-step instructions and code related to each step.

Step-by-Step Guide

1. Website structure plan

Our website will comprise several key sections:

Header: This section will prominently display the portfolio owner's name and facilitate navigation throughout the website;
About: Here, visitors will find relevant information about the website owner, providing insights into their background and expertise;
Portfolio: This section will showcase various projects, each featuring project images, titles, descriptions, and the technologies utilized;
Contact: We will incorporate a form to gather visitor information;
Footer: The footer will be the concluding section, featuring copyright information and links to social media profiles, phone contact, and email address.

2. Structure content with semantic HTML

Let's create a new index.html file and set up the basic HTML document structure.

index.html

3. Header section

Let's build the header with the website owner name and navigation links.

index.html

4. About section

Section devoted to the brief introduction and information about owner.

index.html

5. Portfolio section

In the portfolio section we focus on the projects with descriptions and images.

index.html

6. Contact section

Let's build the contact form to get in touch with the owner.

index.html

7. Footer section

Finally, let's add copyright information and links to social media.

index.html

Bonus

index.html

index.css

Video Tutorial

Here is the link to the complete website that was built in this chapter: Julia's Website

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 5. Luku 4