Awesome! Let’s dive into Lesson 4 of your frontend course:
LESSON 4: Learn HTML – The Structure of Webpages
Learning Goals:
- Understand what HTML is and why it’s important
- Learn basic HTML tags and how to use them
- Create your first real webpage structure
- Practice with simple hands-on exercises
Lesson Content (Text for Website)
What is HTML?
HTML stands for HyperText Markup Language.
It’s the foundation of every webpage. It tells the browser what to display and in what order — like headlines, paragraphs, images, links, buttons, and more.
Think of HTML like a skeleton:
- It gives shape and structure to your website
- Without it, your page wouldn’t know what to show
You’ll soon be writing tags like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<a href="#">This is a link</a>
Basic HTML Tags You Must Know
| Tag | What It Does |
|---|---|
<html> | Wraps the entire document |
<head> | Contains metadata like title |
<title> | Title in the browser tab |
<body> | Visible content on the page |
<h1>–<h6> | Headings (largest to smallest) |
<p> | Paragraph |
<a> | Hyperlink |
<img> | Image |
<ul>/<li> | Unordered list and list items |
<strong> | Bold text |
<em> | Italic text |
Try This: Your First Webpage
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my very first webpage built with HTML.</p>
<a href="https://example.com">Visit Example</a>
</body>
</html>
Save this as lesson4.html and open it in your browser.
Tag Structure Explained
Most tags come in pairs:
<tagname>Content</tagname>
Example:
<p>This is a paragraph.</p>
Some are self-closing, like images:
<img src="cat.jpg" alt="A cute cat" />
Adding Images
<img src="https://placekitten.com/300/200" alt="Cute kitten" />
The alt attribute is important for accessibility and SEO.
Nesting Tags
You can nest tags to organize content.
<p>This is <strong>bold</strong> and <em>italic</em> text.</p>
Practice Challenge
Create a webpage that includes:
- A heading
- Two paragraphs
- A link to Google
- An image of your choice
- A list of your favorite things
Save as practice1.html
Quick Summary
- HTML is the backbone of every webpage
- Tags give structure to your content
- You’ve learned headings, paragraphs, links, images, and lists
- Practice makes perfect — try building your own small webpage!
Next Lesson:
Lesson 5: Learn CSS – Make It Look Beautiful
Join Our Telegram Channel
One Response