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 likehreffor linking.
Example:
<a href="https://example.com">Click here</a>
-
Images (
<img>): Used to display images. Explain thesrcattribute for linking to the image file andaltfor 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 likeaction(where the form data is sent) andmethod(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>)
- A heading (
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">.
- Include
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.
Top comments (0)