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:

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

2. Basic HTML Tags Recap

• Headings (

  to

  ):

  Explain that headings structure the content hierarchically, from the largest (

  ) to the smallest (

  ).

Example:

    
Main Heading
    
Sub Heading

• Paragraphs (

  ):

  Used to define blocks of text or paragraphs.

Example:

    
This is a paragraph.

• Anchors (Click here
  • Images (): Used to display images. Explain the src attribute for linking to the image file and alt for accessibility.

  Example:
  

  3. Introduction to Intermediate HTML Elements

  3.1. Forms (

  , , )

  • Forms are used to collect user input.

  • Basic form structure:

    • :
      A container for form elements. Can include attributes like action (where the form data is sent) and method (GET/POST).
    • : Defines a label for input elements and improves accessibility.
    • : Defines various types of input fields like text, password, checkbox, radio, etc.

  Example of a simple form with text input:
  

  Name: Email:

  3.2. Lists (

  ,
  ,
  1. )
  • Unordered Lists (
    )
    and Ordered Lists (
    )
    help in organizing data in bullet points or numbered lists.
  • List Items (
  • )
  define each item in the list.

  Example of an unordered and ordered list:
  

  • Item 1
  • Item 2
  1. Step 1
  2. Step 2

  3.3. Tables (

  , ,

  ,

  ) Tables allow for structured data to be displayed in rows and columns. : The container for the table. : Defines a row in the table. : Defines a cell in the table. : Defines a header cell in the table (optional). Example of a simple table: Name Age John 25 4. Class Activities 4.1. Recap Activity: Task students with creating a basic webpage that includes: A heading ( ) A paragraph ( ) An image () Example: Welcome to My Website This is my first webpage. 4.2. Guided Exercise: Create a Simple Form: Walk students through creating a simple form to collect user input (name and email). Include , , and . 4.3. Lists and Tables: Task students with creating an unordered list ( ) of their favorite things and a simple table with a few rows of data (name, age, favorite color). Example: Reading Coding Traveling Name Age Alice 30 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: Gender: Male Female 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.