Class 3-4: Diving Deeper into HTML

Class 3-4: Diving Deeper into HTML and Introduction to CSS

Objectives:

Detailed Breakdown:

Session 3: Advanced HTML Features

  1. Advanced HTML
    • Forms
      • Introduce HTML forms as a method to collect user input.
      • Cover basic form elements: text fields (<input type="text">), buttons (<button>), checkboxes (<input type="checkbox">), radio buttons (<input type="radio">), and drop-down lists (<select>).
      • Discuss the action and method attributes of the <form> tag.
    • Tables
      • Teach how to create tables using <table>, <tr> (table row), <th> (table header), and <td> (table data).
      • Explain the purpose of tables in displaying tabular data.
    • Semantic Elements
      • Introduce semantic tags like <header>, <footer>, <article>, <section>, and <nav>.
      • Explain how they provide meaningful structure to web content and improve accessibility.
  1. Hands-On Exercise: Creating a Form and a Table
    • Exercise Overview
      • Guide students to create a simple HTML form for user feedback and a table displaying some data.
    • Tools Required
      • Continue using a basic text editor and a web browser.
    • Step-by-Step Guidance
      • Walk through the process of creating and structuring a form and a table in HTML.

Session 4: Introduction to CSS

  1. What is CSS?
    • Definition and Role
      • Define CSS (Cascading Style Sheets) as the language used to style and layout web pages.
      • Explain how CSS enhances the visual appearance of HTML by controlling the design and layout.
    • CSS Syntax
      • Introduce basic CSS syntax: selectors, properties, and values.
  1. Types of CSS
    • Inline CSS
      • Demonstrate adding styles directly within HTML tags using the style attribute.
    • Internal CSS
      • Discuss how to include CSS within the <head> section of an HTML document using <style> tags.
    • External CSS
      • Explain linking external CSS files using the <link> tag and the benefits of this approach for larger projects.
  1. Basic CSS Properties
    • Colors and Fonts
      • Teach how to apply colors (using color names, hex codes, RGB) and change font properties (typeface, size).
    • Layout Properties
      • Introduce basic layout properties like margin, padding, border, and width.
  1. Hands-On Exercise: Styling the HTML Page
    • Exercise Overview
      • Students will apply CSS to style the form and table created in the previous session.
    • Tools Required
      • Use the same text editor and web browser.
    • Step-by-Step Guidance
      • Guide students through adding CSS styles to enhance the appearance of their HTML forms and tables.

Additional Resources:

Class Interaction:

Assessment: