Class 3-4: Diving Deeper into HTML
Class 3-4: Diving Deeper into HTML and Introduction to CSS
Objectives:
- Learn advanced HTML elements like forms, tables, and semantic tags.
- Understand the basics of CSS and its application in web design.
- Apply CSS styling to HTML pages to enhance visual appeal and layout.
Detailed Breakdown:
Session 3: Advanced HTML Features
- 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
andmethod
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.
- Teach how to create tables using
- Semantic Elements
- Introduce semantic tags like
<header>
,<footer>
,<article>
,<section>
, and<nav>
.
- Explain how they provide meaningful structure to web content and improve accessibility.
- Introduce semantic tags like
- Forms
- 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.
- Exercise Overview
Session 4: Introduction to CSS
- 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.
- Definition and Role
- Types of CSS
- Inline CSS
- Demonstrate adding styles directly within HTML tags using the
style
attribute.
- Demonstrate adding styles directly within HTML tags using the
- Internal CSS
- Discuss how to include CSS within the
<head>
section of an HTML document using<style>
tags.
- Discuss how to include CSS within the
- External CSS
- Explain linking external CSS files using the
<link>
tag and the benefits of this approach for larger projects.
- Explain linking external CSS files using the
- Inline CSS
- 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
, andwidth
.
- Introduce basic layout properties like
- Colors and Fonts
- 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.
- Exercise Overview
Additional Resources:
- CSS Documentation
- Provide links to online resources like MDN Web Docs for CSS references and guides.
- Interactive CSS Tools
- Recommend online tools like CSS-Tricks' Almanac or interactive tutorials for practical learning.
Class Interaction:
- Discussion and Feedback
- Encourage students to experiment with different CSS properties and discuss the impact on the layout and design.
- Demonstrations
- Show real-time examples of CSS styling and how different properties affect the web page’s appearance.
Assessment:
- Practical Application
- Review and provide feedback on the students' work on enhancing their HTML pages with CSS.
- Quiz or Review
- At the beginning of the next session, assess understanding through a quiz or discussion.