Module 4: HTML

Teaching Principle: Generate HTML with AI, then read it line by line and open it in a browser to verify it looks right.

---

Lesson 4.1 — HTML Tags and Structure

Duration: 50 minutes

Learning Objectives

• Explain what HTML is and its basic structure.
• Use common tags: <h1>, <p>, <a>, <img>, <ul>.
• Understand the <!DOCTYPE>, <html>, <head>, <body> skeleton.
• Open an HTML file in a browser to verify.

Instructor Notes

HTML describes the structure and content of a page. Show the skeleton first. Emphasize tags come in pairs. Have students open files in a browser every time.

Presentation Outline

1. What is HTML? (5 min).
2. The page skeleton (10 min).
3. Headings, paragraphs, links, images (15 min).
4. Lists (5 min).
5. Live build + browser check (15 min).

Demonstration

1. Create index.html with the skeleton.
2. Add a heading, paragraph, link, and image.
3. Add an unordered list of hobbies.
4. Open the file in a browser and verify rendering.

AI Prompts

• "Act as a web teacher. Generate a basic HTML page with a title, one heading, a paragraph, a link, and an image. Add comments explaining each tag."
• "Explain the difference between <head> and <body> in HTML for a beginner."

Starter Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Page</title>
</head>
<body>
  <!-- TODO: add an h1, a paragraph, a link, and a list -->
</body>
</html>

Final Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Page</title>
</head>
<body>
  <h1>Welcome to My Page</h1>
  <p>This is my first HTML page built with AI help.</p>
  <a href="https://example.com">Visit Example</a>
  <ul>
    <li>Coding</li>
    <li>Music</li>
    <li>Sports</li>
  </ul>
</body>
</html>

Exercises

• Exercise 1: Add an <img> tag pointing to an online image and verify it loads.
• Exercise 2: Change the heading text and reload the page.
• Exercise 3: Add an ordered list (<ol>) of your top 3 goals.

Homework

• Assignment 1: Build a 1-page "About Me" site with heading, paragraph, image, and list.
• Assignment 2: Ask AI to explain 5 HTML tags you used and paste the notes.

Quiz

1. HTML stands for:
   • a) Hyper Text Markup Language ✅
   • b) Home Tool Markup Language
   • c) Hyperlinks Text Management
   • d) High Tech Modern Language
2. Which tag shows the biggest heading?
   • a) <p>
   • b) <h1> ✅
   • c) <a>
   • d) <img>
3. The <head> section contains:
   • a) Visible page content
   • b) Metadata like title and charset ✅
   • c) Images only
   • d) Footer text
4. To show a clickable link you use:
   • a) <p>
   • b) <a href="..."> ✅
   • c) <img>
   • d) <ul>
5. You verify HTML by:
   • a) Guessing
   • b) Opening the file in a browser ✅
   • c) Printing it
   • d) Emailing it

---

Lesson 4.2 — Attributes and Images

Duration: 45 minutes

Learning Objectives

• Explain what an HTML attribute is.
• Use href, src, alt, width, and height.
• Write accessible images with alt text.
• Validate attributes by viewing the page.

Instructor Notes

Attributes give extra information to tags. Stress alt text for accessibility and SEO. Show broken src to teach verification.

Presentation Outline

1. What are attributes? (10 min).
2. Link attributes (href, target) (10 min).
3. Image attributes (src, alt, size) (10 min).
4. Accessibility with alt (5 min).
5. Live demo + check (10 min).

Demonstration

1. Show <a href="..." target="_blank"> opening in a new tab.
2. Add an image with src, alt, width, height.
3. Break the src on purpose; show the broken image icon.
4. Fix it and verify.

AI Prompts

• "Generate an HTML snippet with an image that has src, alt, width, and height attributes, and explain why alt matters."
• "Show how to make a link open in a new tab using the target attribute."

Starter Code

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Attributes</title></head>
<body>
  <!-- TODO: add a link with target=_blank and an image with alt -->
</body>
</html>

Final Code

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Attributes</title></head>
<body>
  <a href="https://example.com" target="_blank">Open in new tab</a>
  <img src="https://via.placeholder.com/150" alt="A placeholder image" width="150" height="150">
</body>
</html>

Exercises

• Exercise 1: Add an image with meaningful alt text describing it.
• Exercise 2: Create a link that opens in a new tab and verify behavior.
• Exercise 3: Intentionally break a src and describe what the browser shows.

Homework

• Assignment 1: Build a small page with 2 links and 2 images using proper attributes.
• Assignment 2: Write one sentence explaining why alt text is important.

Quiz

1. An attribute gives a tag:
   • a) A color
   • b) Extra information/settings ✅
   • c) A new name
   • d) Nothing
2. The href attribute is used for:
   • a) Images
   • b) Links ✅
   • c) Paragraphs
   • d) Headings
3. The alt attribute:
   • a) Changes font size
   • b) Describes an image for accessibility ✅
   • c) Makes text bold
   • d) Opens a link
4. target="_blank" makes a link:
   • a) Close the page
   • b) Open in a new tab ✅
   • c) Turn red
   • d) Delete itself
5. A broken image src shows:
   • a) Nothing ever
   • b) A broken image icon ✅
   • c) The alt text only always
   • d) A video

---

Lesson 4.3 — Forms and Inputs

Duration: 50 minutes

Learning Objectives

• Build a basic HTML form with inputs.
• Use <form>, <input>, <label>, <textarea>, <button>.
• Understand the action and method attributes (intro).
• Verify the form displays and labels are connected.

Instructor Notes

Forms collect user data. Teach <label for> linked to input id for accessibility. We won't process data yet (that's later modules), but show structure. Verify the form renders and is usable.

Presentation Outline

1. What is a form? (5 min).
2. Input types: text, email, password (15 min).
3. Labels and accessibility (10 min).
4. Textarea and button (10 min).
5. Live build + check (10 min).

Demonstration

1. Create a contact form with name, email, message.
2. Link each label to its input with for/id.
3. Add a submit button.
4. Open in browser and test typing in fields.

AI Prompts

• "Generate an HTML contact form with name, email, and message fields, each with a linked label. Add comments."
• "Explain the difference between text, email, and password input types."

Starter Code

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Form</title></head>
<body>
  <!-- TODO: build a form with name, email, message, and a submit button -->
</body>
</html>

Final Code

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Form</title></head>
<body>
  <form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br>

    <label for="msg">Message:</label>
    <textarea id="msg" name="msg"></textarea><br>

    <button type="submit">Send</button>
  </form>
</body>
</html>

Exercises

• Exercise 1: Add a password input to the form.
• Exercise 2: Add a number input for age and link its label.
• Exercise 3: Change the button text and verify.

Homework

• Assignment 1: Build a "Sign Up" form with at least 4 fields and proper labels.
• Assignment 2: Ask AI to explain action and method and summarize in your notes.

Quiz

1. A form is used to:
   • a) Show images
   • b) Collect user input ✅
   • c) Play music
   • d) Hide text
2. To link a label to an input you use:
   • a) for and id ✅
   • b) src and alt
   • c) href and name
   • d) class and style
3. <input type="email"> is useful because it:
   • a) Changes color
   • b) Validates email format in browsers ✅
   • c) Sends email
   • d) Deletes text
4. The <textarea> tag is for:
   • a) Single-line text
   • b) Multi-line text ✅
   • c) Images
   • d) Links
5. A submit button uses:
   • a) <button type="submit"> ✅
   • b) <img>
   • c) <label>
   • d) <br>

---

Lesson 4.4 — Tables and Semantic HTML

Duration: 50 minutes

Learning Objectives

• Build a table with <table>, <tr>, <th>, <td>.
• Use semantic tags: <header>, <nav>, <main>, <footer>, <article>.
• Explain why semantics help accessibility and SEO.
• Combine tables and semantic layout in one page.

Instructor Notes

Tables are for tabular data, not layout. Semantic tags describe meaning, helping screen readers and search engines. Show a page with a header, nav, main, and footer.

Presentation Outline

1. Tables: rows, headers, cells (15 min).
2. Semantic tags overview (10 min).
3. Why semantics matter (10 min).
4. Live page with semantic layout + table (10 min).
5. Verify structure (5 min).

Demonstration

1. Build a "Course Schedule" table with headers.
2. Wrap the page in <header>, <nav>, <main>, <footer>.
3. Open in browser; inspect with dev tools to show semantics.
4. Discuss screen-reader benefits.

AI Prompts

• "Generate an HTML page using semantic tags (header, nav, main, footer) with a table of 3 students and their grades."
• "Explain why semantic HTML is better than using only divs."

Starter Code

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Semantic</title></head>
<body>
  <!-- TODO: add header, nav, main with a table, and footer -->
</body>
</html>

Final Code

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Semantic</title></head>
<body>
  <header><h1>School Portal</h1></header>
  <nav><a href="#">Home</a> | <a href="#">Grades</a></nav>
  <main>
    <table border="1">
      <tr><th>Name</th><th>Grade</th></tr>
      <tr><td>Alex</td><td>A</td></tr>
      <tr><td>Sam</td><td>B</td></tr>
    </table>
  </main>
  <footer><p>&copy; 2026 School Portal</p></footer>
</body>
</html>

Exercises

• Exercise 1: Add a <thead> and <tbody> to the table.
• Exercise 2: Add an <article> inside <main> with a paragraph.
• Exercise 3: Replace a <div> with a semantic tag in your own page.

Homework

• Assignment 1: Build a "Product List" page using semantic tags and a table of 4 products.
• Assignment 2: Write 3 reasons semantic HTML matters.

Quiz

1. Table row tag is:
   • a) <td>
   • b) <tr> ✅
   • c) <th>
   • d) <table>
2. Table header cell uses:
   • a) <td>
   • b) <th> ✅
   • c) <tr>
   • d) <row>
3. Semantic HTML helps:
   • a) Only styling
   • b) Accessibility and SEO ✅
   • c) Making files larger
   • d) Hiding content
4. Which is a semantic tag?
   • a) <div>
   • b) <header> ✅
   • c) <span>
   • d) <br>
5. Tables should be used for:
   • a) Page layout
   • b) Tabular data ✅
   • c) Images
   • d) Videos

← Back to Module README

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Page</title>
</head>
<body>
  <!-- TODO: add an h1, a paragraph, a link, and a list -->
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Page</title>
</head>
<body>
  <h1>Welcome to My Page</h1>
  <p>This is my first HTML page built with AI help.</p>
  <a href="https://example.com">Visit Example</a>
  <ul>
    <li>Coding</li>
    <li>Music</li>
    &li>Sports</li>
  </ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Attributes</title></head>
<body>
  <!-- TODO: add a link with target=_blank and an image with alt -->
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Attributes</title></head>
<body>
  <a href="https://example.com" target="_blank">Open in new tab</a>
  <img src="https://via.placeholder.com/150" alt="A placeholder image" width="150" height="150">
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Form</title></head>
<body>
  <!-- TODO: build a form with name, email, message, and a submit button -->
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Form</title></head>
<body>
  <form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br>

    <label for="msg">Message:</label>
    <textarea id="msg" name="msg"></textarea><br>

    <button type="submit">Send</button>
  </form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Semantic</title></head>
<body>
  <!-- TODO: add header, nav, main with a table, and footer -->
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Semantic</title></head>
<body>
  <header><h1>School Portal</h1></header>
  <nav><a href="#">Home</a> | <a href="#">Grades</a></nav>
  <main>
    <table border="1">
      <tr><th>Name</th><th>Grade</th></tr>
      <tr><td>Alex</td><td>A</td></tr>
      <tr><td>Sam</td><td>B</td></tr>
    </table>
  </main>
  <footer><p>&copy; 2026 School Portal</p></footer>
</body>
</html>