🧑‍💻 SAVAGE SCHOOL — HTML BEGINNER CLASS

🔥 LESSON 01: YOUR FIRST STEP INTO WEB DEVELOPMENT

Level: Absolute Beginner
Topic: Introduction to HTML
Duration: 45–60 minutes

---

🎯 TODAY'S GOAL

By the end of this lesson, you should understand:

- What HTML means
- What HTML is used for
- What an HTML tag is
- What an HTML element is
- Basic HTML structure
- How to create your first webpage
- How to open your webpage in a browser

No rushing. If you understand today's lesson properly, you're already on the road.

---

🧠 1. WHAT IS HTML?

HTML = HyperText Markup Language

HTML is the language we use to structure content on a webpage.

Think of a website like a house:

🏠 HTML → The structure
🎨 CSS → The design
⚙️ JavaScript → The behaviour/functionality

HTML tells the browser:

«"This is a heading."
"This is a paragraph."
"This is an image."
"This is a button."
"This is a link."»

HTML isn't mainly about making a website beautiful.

HTML gives the webpage its structure.

---

🧩 2. WHAT IS AN HTML TAG?

HTML uses tags to tell the browser what different pieces of content are.

Example:

<h1>Hello World</h1>

Here:

"<h1>" = opening tag

"Hello World" = content

"</h1>" = closing tag

Together, they form an HTML element.

Another example:

<p>I am learning HTML.</p>

"<p>" means paragraph.

---

🔥 3. YOUR FIRST HTML DOCUMENT

Every normal HTML webpage starts with a basic structure.

Create a file called:

index.html

Then write:

<!DOCTYPE html>

<html>
<head>
<title>My First Website</title>
</head>

<body>

<h1>Hello World!</h1>

<p>I am learning HTML with Savage School.</p>

</body>
</html>

Save the file.

Open it with your browser.

Congratulations. 🎉

You just created a webpage.

It doesn't need to look fancy yet.

We're building the foundation first.

---

🧠 4. UNDERSTANDING THE STRUCTURE

Let's break it down.

"<!DOCTYPE html>"

This tells the browser that we're using modern HTML.

"<html>"

This contains the entire HTML document.

"<head>"

Contains information about the webpage that isn't normally displayed as the main page content.

"<title>"

Controls the title shown in the browser tab.

Example:

<title>Savage School</title>

"<body>"

This is where the actual visible webpage content goes.

For example:

<body>

<h1>Welcome</h1>

<p>Welcome to my website.</p>

</body>

---

📝 5. HEADINGS

HTML has six heading levels:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

"<h1>" is the main heading.

"<h6>" is the smallest heading level.

Example:

<h1>My Portfolio</h1>

<h2>About Me</h2>

<h3>My Skills</h3>

💡 Tip: Don't choose headings just because they look bigger. Use them according to their meaning and structure.

---

📖 6. PARAGRAPHS

Use "<p>" for normal paragraphs.

<p>
My name is Savage.
I am learning how to build websites.
</p>

You can have multiple paragraphs:

<p>HTML gives a website structure.</p>

<p>CSS controls its appearance.</p>

<p>JavaScript adds behaviour.</p>

---

💬 7. COMMENTS

Sometimes you want to leave notes inside your code without displaying them on the webpage.

Use:

<!-- This is a comment -->

Example:

<!-- Main heading -->
<h1>Welcome to my website</h1>

The browser won't display the comment.

---

🔗 8. LINKS

To create a clickable link, use "<a>".

<a href="https://example.com">Visit Website</a>

The important part is:

href=""

It tells the browser where the link should go.

Example:

<a href="https://google.com">Google</a>

---

🖼️ 9. IMAGES

Images use the "<img>" element.

<img src="image.jpg" alt="My picture">

"src" = location of the image.

"alt" = description of the image.

Example:

<img src="profile.jpg" alt="Profile photo">

⚠️ Keep your image files in the correct location, otherwise the browser won't find them.

---

📋 10. LISTS

Unordered list

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

This creates a bullet list.

Ordered list

<ol>
<li>Open VS Code</li>
<li>Create index.html</li>
<li>Write HTML</li>
</ol>

This creates a numbered list.

---

🧪 TODAY'S PRACTICAL

Don't just read this lesson.

CODE.

Create:

"index.html"

Build a small webpage containing:

✅ Your name
✅ A main heading
✅ A short introduction
✅ Three things you're learning
✅ An image
✅ A link
✅ An ordered or unordered list

Example structure:

<!DOCTYPE html>

<html>
<head>
<title>My Profile</title>
</head>

<body>

<h1>My Name</h1>

<p>
Hello! I am learning web development.
</p>

<h2>What I'm Learning</h2>

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

<img src="profile.jpg" alt="My profile picture">

<p>
<a href="https://example.com">
Visit my favourite website
</a>
</p>

</body>
</html>

---

🧠 SAVAGE CHALLENGE 🔥

Without copying the practical example, create your own:

"ABOUT ME" PAGE

It must contain:

- "<title>"
- "<h1>"
- At least two "<p>" elements
- "<h2>"
- An "<img>"
- An "<a>"
- A list
- At least one HTML comment

Bonus: Add another heading and another section.

---

❓ QUICK TEST

Answer these before leaving today's class:

1. What does HTML stand for?

2. What is HTML mainly used for?

3. What does "<h1>" do?

4. What does "<p>" represent?

5. What is the purpose of "<title>"?

6. What does "href" do?

7. What does "src" do?

8. What is the difference between "<ul>" and "<ol>"?

9. What is an HTML comment?

10. Where does the visible webpage content normally go?

---

🏁 HOMEWORK

Build your own personal profile webpage from scratch.

Don't copy someone else's complete code.

Use what you learned today.

Tomorrow, we'll build on this foundation and start working with more HTML elements, attributes, links, images and page structure.

🔥 SAVAGE RULE:

Don't fear errors.

If your code breaks, don't immediately ask someone to fix it.

Read the code.

Find the mistake.

Fix it.

That's how you actually become a developer. 🧑‍💻🔥

All
Go and download this

Enter ur app

<h1>Hello</h1>

A basic hello html line

What did you just do?
<h1> means heading.
The browser sees:
HTML
<h1>
and understands:
"Start a big heading."
Then:
HTML
Hello
is the text.
And:
HTML
</h1>
means:
"End the heading."
So:
HTML
<h1>Hello</h1>
basically means:
Start heading → Hello → End heading

So we are good with the header command

Note any command

Ends with a slash

<command/>