Module 1: Welcome to the Web

📖 What is HTML?

HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the World Wide Web.

Think of HTML as the skeleton of a website. Just like a skeleton gives structure to a body, HTML gives structure to web content. It tells the browser what each piece of content is — whether it's a heading, a paragraph, an image, or a link.

Key Terms Explained

HyperText: Text that contains links to other texts or resources. Clicking a link "hyper jumps" you to another page.
Markup: A way of annotating text using special codes (tags) that tell the browser how to display the content.
Language: HTML has its own rules, syntax, and vocabulary (tags and attributes) that browsers understand.

💡 Remember: HTML is not a programming language like Python or JavaScript. It is a markup language — it describes structure, not logic or behavior.

🛠️ How Websites Work

When you visit a website, here's what happens behind the scenes:

You type a web address (URL) into your browser, like https://ethioweb.net
Your browser sends a request to a web server (a powerful computer that stores website files)
The server sends back HTML, CSS, and JavaScript files
Your browser reads the HTML and displays the structured content
CSS makes it look beautiful, and JavaScript adds interactivity

The Web Technology Stack

Technology	Role	Analogy
HTML	Structure & Content	Skeleton / Frame of a house
CSS	Presentation & Style	Paint, decoration, furniture
JavaScript	Behavior & Interactivity	Electricity, appliances, doors

💡 Focus: In this course, we focus entirely on HTML. You'll learn CSS and JavaScript in future courses!

💻 Setting Up Your Tools

To write HTML, you only need two things: a text editor and a web browser.

Recommended Text Editors

VS Code (Visual Studio Code) — Free, powerful, and the most popular choice. Download here
Sublime Text — Fast and lightweight
Notepad++ — Great for Windows users
Atom — GitHub's free editor (discontinued but still usable)

VS Code Extensions for HTML

Once you install VS Code, add these helpful extensions:

Live Server — Opens your HTML in browser and auto-refreshes when you save
Auto Rename Tag — Automatically renames closing tags when you edit opening tags
HTML Snippets — Provides shortcuts for common HTML patterns
Prettier — Formats your code automatically for readability

Using Browser Developer Tools

Every modern browser has built-in tools to inspect HTML:

Open any website
Right-click anywhere and select "Inspect" or press F12
The Elements tab shows you the live HTML structure
You can even edit HTML temporarily to see changes!

✏️ Exercise 1.1: Install Your Tools

Download and install VS Code
Install the "Live Server" extension in VS Code
Open your browser and visit any website
Press F12 to open Developer Tools
Click the Elements tab and explore the HTML structure

🚀 Your First HTML File

Let's create your very first web page! Every HTML file ends with the .html extension.

Step-by-Step Instructions

Open VS Code
Create a new folder on your computer called html-course
Open that folder in VS Code (File → Open Folder)
Create a new file named index.html
Type the following code exactly:

<!-- This is your first HTML file -->
<html>
    <head>
        <title>My First Web Page</title>
    </head>
    <body>
        <h1>Hello, World!</h1>
        <p>I am learning HTML with Ethioweb.net.</p>
    </body>
</html>
            

How to View Your Page

Method 1: Right-click the file and select "Open with Browser"
Method 2: In VS Code, right-click the editor and select "Open with Live Server"
Method 3: Double-click the file in your file explorer

⚠️ Important: Always name your main homepage index.html. Web servers automatically look for this file when someone visits your website folder.

Understanding What You Wrote

Code	What It Means
`<html>`	The root element that wraps all HTML content
`<head>`	Contains hidden information about the page (title, metadata)
`<title>`	The text that appears in the browser tab
`<body>`	Contains all visible content on the page
`<h1>`	A top-level heading (biggest and most important)
`<p>`	A paragraph of text

✏️ Exercise 1.2: Personalize Your Page

Change the <title> to include your name
Change the <h1> to say "Hello, [Your Name]!"
Add a second paragraph <p> that says what you hope to learn
Save the file and refresh your browser to see changes

📝 Module 1 Quiz

🎯 Module Summary

✅ HTML is the structure language of the web
✅ You need a text editor (VS Code) and a browser
✅ Every HTML file needs <html>, <head>, and <body>
✅ The index.html file is the default homepage
✅ Browser DevTools let you inspect any website's HTML

Next: Module 2 →