HTML – 8 Week Syllabus
Week 1: Getting Started with HTML
- Introduction to Web & HTML
- Structure of an HTML Document (
<!DOCTYPE html>,<html>,<head>,<body>) - Basic Tags: Headings, Paragraphs, Line Breaks, Horizontal Rules
- Formatting Text (bold, italic, underline, strong, em)
- Creating Lists (ordered, unordered, definition lists)
- Lab: Create a simple “About Me” webpage
Week 2: Working with Links & Media
- Anchor Tags (
<a>) – internal, external, email, download links - Adding Images (
<img>) with alt text & attributes - Embedding Audio & Video (
<audio>,<video>) - Iframes for embedding maps & videos
- Lab: Create a “Travel Blog Page” with images & links
Week 3: Understanding Structure & Semantic HTML
- Div vs Span
- Semantic Elements (
<header>,<nav>,<main>,<section>,<article>,<aside>,<footer>) - Inline vs Block-level elements
- Meta Tags & Page Information
- Lab: Create a multi-section homepage using semantic tags
Week 4: Tables & Data Representation
- Creating Tables (
<table>,<tr>,<td>,<th>) - Table Attributes (border, cellpadding, colspan, rowspan)
- Caption & Summary
- Styling tables (basic inline CSS)
- Lab: Student Report Card / Product Pricing Table
Week 5: Forms & User Input
- Form Basics (
<form>,action,method) - Input Types (text, password, email, number, date, radio, checkbox, file, etc.)
<select>,<option>,<textarea>- Buttons (
<button>, input type=submit/reset/button) - Labels, Fieldsets, Legends
- Lab: Create a “Registration Form”
Week 6: Advanced HTML Concepts
- HTML5 Input Enhancements (placeholder, required, pattern, autofocus)
- Form Validation (basic HTML5 validations)
- Multimedia:
<canvas>,<svg>basics - Data Attributes (
data-*) - Lab: Create a “Feedback Form with Validation”
Week 7: Accessibility & SEO Essentials
- Alt text & ARIA roles
- Semantic tags for screen readers
- Importance of heading structure (H1–H6 hierarchy)
- Best practices for SEO-friendly HTML
- Lab: Optimize a simple webpage for accessibility & SEO
Week 8: Final Project & Best Practices
- Combining everything into a mini-website
- Homepage, About, Services, Contact
- Navigation Menu, Multimedia Integration, Forms
- Responsive structure ready for CSS/Bootstrap styling
- HTML Coding Standards & Clean Code
- Final Review & Feedback
