TD!

Posted on Oct 2 • Updated on Oct 10

HTML/CSS Class - Lesson 1 for 5th grade

#html #css

This is a 5th grade lesson note

HTML/CSS Class - Lesson 1 Breakdown

Lesson 1: Review of Basic HTML & Introduction to Advanced HTML Elements

Objective:

Refresh foundational HTML tags.
Introduce intermediate-level HTML elements to build more functional webpages.

1. Introduction to HTML Structure

Start with a brief explanation of how HTML organizes webpage content using tags. Emphasize that HTML (HyperText Markup Language) is used to structure web pages, while CSS is used for styling.

Key Concepts to Review:

<html>, <head>, <body>: Explain that every HTML document has a defined structure:
- <html>: Root element that encompasses the entire webpage.
- <head>: Contains meta-information like the title, links to CSS, scripts, etc.
- <body>: Contains all visible content, such as text, images, and elements that users interact with.

2. Basic HTML Tags Recap

Headings (<h1> to <h6>): Explain that headings structure the content hierarchically, from the largest (<h1>) to the smallest (<h6>).

Example:


    <h1>Main Heading</h1>
    <h2>Sub Heading</h2>

Paragraphs (<p>): Used to define blocks of text or paragraphs.

Example:


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

Anchors (<a>): Used to create hyperlinks. Highlight attributes like href for linking.

Example:


    <a href="https://example.com">Click here</a>

Images (<img>): Used to display images. Explain the src attribute for linking to the image file and alt for accessibility.

Example:


    <img src="image.jpg" alt="A descriptive text">

3. Introduction to Intermediate HTML Elements

3.1. Forms (<form>, <input>, <label>)

Forms are used to collect user input.
Basic form structure:
- <form>: A container for form elements. Can include attributes like action (where the form data is sent) and method (GET/POST).
- <label>: Defines a label for input elements and improves accessibility.
- <input>: Defines various types of input fields like text, password, checkbox, radio, etc.

Example of a simple form with text input:


    <form action="/submit" method="POST">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name">

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

3.2. Lists (<ul>, <ol>, <li>)

Unordered Lists (<ul>) and Ordered Lists (<ol>) help in organizing data in bullet points or numbered lists.
List Items (<li>) define each item in the list.

Example of an unordered and ordered list:


    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>

    <ol>
      <li>Step 1</li>
      <li>Step 2</li>
    </ol>

3.3. Tables (<table>, <tr>, <td>, <th>)

Tables allow for structured data to be displayed in rows and columns.
- <table>: The container for the table.
- <tr>: Defines a row in the table.
- <td>: Defines a cell in the table.
- <th>: Defines a header cell in the table (optional).

Example of a simple table:


    <table>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>John</td>
        <td>25</td>
      </tr>
    </table>

4. Class Activities

4.1. Recap Activity:

Task students with creating a basic webpage that includes:
- A heading (<h1>)
- A paragraph (<p>)
- An image (<img>)

Example:


    <h1>Welcome to My Website</h1>
    <p>This is my first webpage.</p>
    <img src="myimage.jpg" alt="An example image">

4.2. Guided Exercise:

Create a Simple Form: Walk students through creating a simple form to collect user input (name and email).
- Include <label>, <input type="text">, and <input type="email">.

4.3. Lists and Tables:

Task students with creating an unordered list (<ul>) of their favorite things and a simple table with a few rows of data (name, age, favorite color).

Example:


    <ul>
      <li>Reading</li>
      <li>Coding</li>
      <li>Traveling</li>
    </ul>

    <table>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Alice</td>
        <td>30</td>
      </tr>
    </table>

5. Homework

Students should extend their webpage by:

Adding form elements like checkboxes, radio buttons, and a submit button.
Customizing the form to collect additional user info (e.g., gender, hobbies).

Example:


      <form action="/submit" method="POST">
        <label for="gender">Gender:</label>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">Male</label>

        <input type="radio" id="female" name="gender" value="female">
        <label for="female">Female</label>

        <input type="submit" value="Submit">
      </form>

6. Additional Tips

Encourage students to validate their HTML using tools like the W3C Markup Validation Service.
Explain the importance of semantic HTML and why using the correct tags matters for accessibility and SEO.

Summary

Students will review basic HTML tags like headings, paragraphs, images, and links.
They will be introduced to intermediate-level HTML elements: forms, lists, and tables.
Practical exercises and homework will give them hands-on experience in creating a more structured webpage.