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!
Join Our Telegram Channel
One Response