Lesson 1: Introduction to HTML - Your First Web Page

What You'll Learn

What HTML is and why it's important
The basic structure of every HTML document
Essential HTML tags and elements
How to create a simple web page
How web browsers read HTML

Why This Matters

HTML (HyperText Markup Language) is the foundation of every website on the internet. Learning HTML is like learning the alphabet before writing - it's the first step to becoming a web developer.

Part 1: What is HTML?

HTML is Not a Programming Language

HTML is a markup language - it describes the structure and content of web pages. Think of it like the skeleton and organs of a website:

The bones (structure)
The organs (content)
But not the skin or clothes (that's CSS, which we'll learn later)

What HTML Does

HTML tells the browser:

"This is a heading"
"This is a paragraph"
"This is a link"
"This is an image"

The browser then knows how to display each piece of content.

A Simple Analogy

Think of HTML like a document outline:

Website (Document)
├── Header
│   ├── Logo
│   └── Navigation Menu
├── Main Content
│   ├── Heading
│   ├── Paragraph
│   └── Image
└── Footer
    └── Copyright Info

Part 2: HTML Tags and Elements

What is a Tag?

Tags are the building blocks of HTML. They're words surrounded by angle brackets:

<tagname>Content goes here</tagname>

Anatomy of an HTML Element

<p>This is a paragraph.</p>

Breaking it down:

<p> - Opening tag (starts the element)
This is a paragraph. - Content (what's displayed)
</p> - Closing tag (ends the element, note the /)

Together, these make an element.

Self-Closing Tags

Some tags don't need content or a closing tag:

<br>  <!-- Line break -->
<img src="photo.jpg">  <!-- Image -->
<hr>  <!-- Horizontal rule/line -->

Part 3: Basic HTML Document Structure

Every HTML page follows this basic structure:

Create a new file: lesson-01/basic-page.html

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
</body>
</html>

Understanding Each Part

1. `<!DOCTYPE html>`

<!DOCTYPE html>

Tells the browser: "This is an HTML5 document"
Always the very first line
Not case-sensitive, but we write it in uppercase by convention

2. `<html>`

<html>
  <!-- All your content goes here -->
</html>

The root element - wraps everything else
All other HTML goes inside this

3. `<head>`

<head>
    <title>Page Title</title>
</head>

Contains meta-information about the page
Not displayed on the page itself
Includes:

- Page title (shown in browser tab)

- Links to CSS files

- Meta tags for search engines

- Character encoding

4. `<title>`

<title>My Awesome Website</title>

Shows in the browser tab
Shows in search results
Shows in bookmarks
Required in every HTML document

5. `<body>`

<body>
    <!-- All visible content goes here -->
</body>

Contains everything visible on the page
Text, images, links, videos, etc.
This is where most of your work happens

Part 4: Your First Complete Web Page

Let's create a real web page!

Create a new file: lesson-01/about-me.html

<!DOCTYPE html>
<html>
<head>
    <title>About Me</title>
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>Hello! My name is Alex.</p>
    <p>I am learning web development.</p>
    <p>This is my first website!</p>
</body>
</html>

What each part does:

<!DOCTYPE html> - Declares HTML5
<html> - Starts the document
<head> - Starts the invisible metadata section
<title> - Sets the browser tab title
</head> - Ends the head section
<body> - Starts the visible content
<h1> - Creates a main heading
<p> - Creates paragraphs
</body> - Ends the visible content
</html> - Ends the document

View Your Page

Save the file (Cmd+S)
Right-click and select "Open with Live Server"
OR double-click the file in Finder to open in browser

You should see your heading and paragraphs!

Part 5: Common HTML Elements

Headings (6 Levels)

<h1>Main Heading - Largest</h1>
<h2>Sub Heading</h2>
<h3>Sub-Sub Heading</h3>
<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h6>Level 6 Heading - Smallest</h6>

Important rules:

Only use ONE <h1> per page (usually the page title)
Use headings in order - don't skip levels
Think of them like a document outline

Paragraphs

<p>This is a paragraph. It can contain lots of text.</p>
<p>This is another paragraph.</p>

Browsers automatically add space between paragraphs
Each <p> starts on a new line

Line Breaks

<p>First line<br>Second line<br>Third line</p>

<br> creates a line break without starting a new paragraph
No closing tag needed
Use sparingly - CSS is usually better for spacing

Horizontal Rule (Line)

<p>Content above the line</p>
<hr>
<p>Content below the line</p>

Creates a horizontal line across the page
Good for separating sections
No closing tag needed

Part 6: HTML Comments

Comments are notes in your code that browsers ignore:

<!-- This is a comment -->
<!-- Comments can span
     multiple lines -->

<h1>Visible Heading</h1>
<!-- <p>This paragraph is hidden/commented out</p> -->

Use comments to:

Explain what your code does
Temporarily hide code while testing
Leave notes for yourself or others

Keyboard shortcut in VS Code:

Cmd+/ (toggles comment on/off)

Part 7: Proper Indentation and Formatting

Good formatting makes code readable:

Bad formatting:

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello</h1>
<p>Text here</p>
</body>
</html>

Good formatting:

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <h1>Hello</h1>
    <p>Text here</p>
</body>
</html>

Rules:

Indent child elements (2 or 4 spaces)
Each tag on its own line (except small inline content)
Use consistent spacing

Tip: In VS Code, press Shift+Option+F to auto-format!

Part 8: Practice Example - Personal Introduction

Create a new file: lesson-01/intro.html

<!DOCTYPE html>
<html>
<head>
    <title>Introduction</title>
</head>
<body>
    <h1>Hello, World!</h1>
    
    <h2>About Me</h2>
    <p>My name is Sarah.</p>
    <p>I live in San Francisco.</p>
    
    <h2>My Interests</h2>
    <p>I love hiking and photography.</p>
    <p>I'm learning web development!</p>
    
    <hr>
    
    <p>Thanks for visiting my page!</p>
</body>
</html>

What this demonstrates:

Proper document structure
Multiple heading levels
Several paragraphs
A horizontal rule for separation
Good indentation

Practice Exercises

Exercise 1: Create Your Bio

Create a file called bio.html with:

A main heading with your name
At least 3 paragraphs about yourself
At least one subheading

Exercise 2: Favorite Things

Create a file called favorites.html with:

A main heading "My Favorite Things"
Three level-2 headings for different categories (Food, Movies, Hobbies)
Paragraphs under each heading

Exercise 3: Daily Schedule

Create a file called schedule.html showing your daily schedule:

Main heading "My Day"
Multiple level-2 headings for times of day
Descriptions of what you do
Use <hr> to separate morning, afternoon, evening

Common Mistakes to Avoid

Mistake 1: Forgetting Closing Tags

<p>This paragraph never closes
<p>This causes problems

Fix:

<p>This paragraph closes properly</p>
<p>This works correctly</p>

Mistake 2: Wrong Nesting Order

<p>This is <strong>bold text</p></strong>  <!-- Wrong! -->

Fix:

<p>This is <strong>bold text</strong></p>  <!-- Correct! -->

Tags must close in the reverse order they opened.

Mistake 3: Missing DOCTYPE

<html>  <!-- No DOCTYPE! -->
<head>

Fix:

<!DOCTYPE html>  <!-- Always start with this! -->
<html>
<head>

Mistake 4: Content Outside Body

<html>
<head>
    <title>Title</title>
</head>
<p>This paragraph is in the wrong place!</p>  <!-- Wrong! -->
<body>

Fix:

<html>
<head>
    <title>Title</title>
</head>
<body>
    <p>This paragraph is correctly placed!</p>  <!-- Correct! -->
</body>

Key Concepts Summary

Term	Definition
HTML	HyperText Markup Language - the structure of web pages
Tag	Instructions enclosed in angle brackets: `<tag>`
Element	Complete tag with opening, content, closing: `<p>Content</p>`
Attribute	Extra information in a tag: `<tag attribute="value">`
Nesting	Placing elements inside other elements
DOCTYPE	Declaration at top of document defining HTML version

HTML Document Checklist

Every HTML document should have:

✅ <!DOCTYPE html> at the very top
✅ <html> wrapping everything
✅ <head> with page metadata
✅ <title> inside the head
✅ <body> with all visible content
✅ Proper indentation
✅ All tags closed correctly

What You Learned

✅ What HTML is and how it works
✅ The basic structure of an HTML document
✅ Essential HTML tags: <html>, <head>, <title>, <body>
✅ Content tags: <h1>-<h6>, <p>, <br>, <hr>
✅ How to write HTML comments
✅ Proper indentation and formatting
✅ How to create and view a complete web page

What's Next?

In the next lesson, you'll learn about text formatting and semantic HTML elements - how to make text bold, italic, emphasized, and more meaningful!

Lesson 1: Introduction to HTML - Your First Web Page

What You'll Learn

Why This Matters

Part 1: What is HTML?

HTML is Not a Programming Language

What HTML Does

A Simple Analogy

Part 2: HTML Tags and Elements

What is a Tag?

Anatomy of an HTML Element

Self-Closing Tags

Part 3: Basic HTML Document Structure

Understanding Each Part

1. <!DOCTYPE html>

2. <html>

3. <head>

4. <title>

5. <body>

Part 4: Your First Complete Web Page

View Your Page

Part 5: Common HTML Elements

Headings (6 Levels)

Paragraphs

Line Breaks

Horizontal Rule (Line)

Part 6: HTML Comments

Part 7: Proper Indentation and Formatting

Part 8: Practice Example - Personal Introduction

Practice Exercises

Exercise 1: Create Your Bio

Exercise 2: Favorite Things

Exercise 3: Daily Schedule

Common Mistakes to Avoid

Mistake 1: Forgetting Closing Tags

Mistake 2: Wrong Nesting Order

Mistake 3: Missing DOCTYPE

Mistake 4: Content Outside Body

Key Concepts Summary

HTML Document Checklist

What You Learned

What's Next?

1. `<!DOCTYPE html>`

2. `<html>`

3. `<head>`

4. `<title>`

5. `<body>`