Scribd
Upload
44 views8 pages

SA HTML Training Plan

SA HTML Training Plan

Uploaded by

joyonah069
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
44 views8 pages

SA HTML Training Plan

SA HTML Training Plan

Uploaded by

joyonah069
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Lesson Plan: HTML

Class 1-2: Introduction to HTML (4 hours)


- What is HTML and its role in web development?
- Understanding HTML elements, tags, and attributes.
- Creating your first HTML document and viewing it in a
browser.
- Basic text formatting: headings, paragraphs, line breaks.

Task: Create an HTML page with a simple paragraph and a


heading.

Class 3-4: Document Structure (4 hours)


- Understanding the structure of an HTML document:
<!DOCTYPE>, <html>, <head>, <title>, <body>.
- Adding metadata to the <head>: <meta> tags.
- Including external resources: linking to stylesheets and scripts.

Task: Expand your HTML page by adding a title, linking to an


external stylesheet, and including an image.

Class 5-6: Text and Semantic Elements (4 hours)


- Text formatting: <strong>, <em>, <u>.
- Semantic elements: <h1> to <h6>, <p>, <blockquote>.
- Creating lists: <ul>, <ol>, <li>.
- Creating links: <a> element and attributes.

Task: Create a webpage that includes a list of your favorite


books and links to their Amazon pages.

Class 7-8: Images and Multimedia (4 hours)


- Adding images: <img> element and attributes.
- Including alternative text for accessibility: alt attribute.
- Embedding multimedia: <audio> and <video> elements.
- Adding captions and controls to multimedia.

Task: Enhance your book list page by adding cover images and
audio/video clips related to the books.

Class 9-10: Links and Navigation (4 hours)


- Creating internal links: linking to sections within the same
page.
- Navigating links: <nav> and <ul>.
- Creating anchor links and named anchors.
- Opening links in new windows or tabs: target attribute.
Task: Add a navigation bar to your webpage with links to
different sections on the same page.

Class 11-12: Forms and Input Elements (4 hours)


- Creating forms: <form> element and attributes.
- Text input fields: <input> element and attributes.
- Radio buttons and checkboxes.
- Drop-down lists: <select> and <option> elements.

Task: Design a simple contact form with fields for name, email,
subject, and message.

Class 13-14: Working with HTML Tables (4 hours)

• Introduction to HTML tables: <table>, <tr>,


<th>, and <td> elements.
• Creating a basic table structure.
• Adding headers and data cells to the table.
• Merging and spanning cells.
• Styling tables using CSS.

Task: Incorporate a table into your personal portfolio website to


display information such as project timelines, skills, or
achievements in a structured format.
Class 15-16: Semantic Markup and HTML5 Elements (4
hours)
- Semantic elements for structure: <header>, <main>, <article>,
<footer>.
- HTML5 elements: <section>, <aside>, <figure>, <figcaption>.
- Addressing elements: <address> and <abbr>.

Task: Revise your contact form page using semantic elements


and add a section for displaying testimonials.

Class 17-18: Embedding Media and External Content (4


hours)
- Including iframes to embed external content.
- Embedding Google Maps.
- Adding social media widgets.
- Embedding YouTube videos.

Task: Enhance your webpage by embedding a Google Map


displaying the location of your favorite bookstore.

Class 19-20: Accessibility and Best Practices (4 hours)


- Importance of web accessibility.
- Using semantic HTML for improved accessibility.
- Adding alt text to images.
- Testing accessibility using tools like WAVE.

Task: Review your webpage and ensure it follows accessibility


guidelines, adding appropriate alt text and semantic elements.

Class 21-22: Project and Review (4 hours)


- Apply HTML knowledge to create a multi-page personal
portfolio website.
- Reviewing key concepts from previous classes.
- Q&A session for clarification.
- Sharing tips for continued learning and improvement.

Task: Develop a personal portfolio website consisting of


multiple pages showcasing your projects, resume, and contact
information.
Creating an HTML task for students to build a 5-page website
with specific features can be an excellent way to teach web
development and HTML skills. Here's a detailed description of
the task:

*Task Title:* Building a 5-Page Website

*Task Description:*
*Objective:* The objective of this task is to create a 5-page
website with an index (home) page and four additional topic
pages, each with a topic description. The home page should
include links to all five pages, and each topic snippet on the
home page should have a "Read More" link that takes you to the
respective topic page.

*Instructions:*

1. *Project Structure:*
- Create a folder for your project. Inside this folder, create the
following files:
- index.html (for the home page)
- topic1.html (for the first topic page)
- topic2.html (for the second topic page)
- topic3.html (for the third topic page)
- topic4.html (for the fourth topic page)

2. *HTML Pages:*

a. **Home Page (index.html):**


- Create an HTML document that serves as the home page.
- Add a title to your webpage (e.g., "My Educational
Website").
- Create an unordered list (<ul>) with five list items (<li>).
- Each list item should be a link (<a>) to one of the five
pages, including the home page itself.
- For each topic, add a snippet with a brief description and a
"Read More" link. The "Read More" link should link to the
respective topic page.

b. **Topic Pages (topic1.html, topic2.html, topic3.html,


topic4.html):**
- Create a separate HTML document for each topic page.
- Add a title for each topic page (e.g., "Topic 1: History of
Science").
- Write a detailed description of the topic on each page.
- Include a "Back to Home" link on each topic page to
navigate back to the home page.

3. *Styling (Optional):*
- You can include CSS for styling if you'd like to make your
website visually appealing. Use an external stylesheet or include
it within the HTML documents.

4. *Testing:*
- Ensure that all links and navigation work correctly. Test your
website in different browsers to ensure cross-browser
compatibility.
5. *Submission:*
- Zip your project folder and submit it as your assignment.

*Grading Rubric:*

Your project will be evaluated based on the following criteria:

1. Correct implementation of the HTML structure.


2. Accurate and informative content on each topic page.
3. Proper navigation between pages.
4. Appropriate use of "Read More" links on the home page.
5. Optional: Creativity and visual appeal if you choose to style
your website.

This task will not only teach students HTML but also reinforce
the importance of effective navigation and content organization
on a website.

You might also like