Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
15 views3 pages

Comprehensive HTML Course Outline

The document outlines a four-week course on HTML, covering foundational topics such as HTML structure, text elements, lists, links, media, forms, and advanced elements like multimedia and APIs. It includes practical applications like a mini project and a final project showcase, along with optional advanced topics on SEO and responsive design. The course emphasizes best practices and accessibility throughout.

Uploaded by

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

Comprehensive HTML Course Outline

The document outlines a four-week course on HTML, covering foundational topics such as HTML structure, text elements, lists, links, media, forms, and advanced elements like multimedia and APIs. It includes practical applications like a mini project and a final project showcase, along with optional advanced topics on SEO and responsive design. The course emphasizes best practices and accessibility throughout.

Uploaded by

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

Week 1: Foundations of HTML

Day 1: Introduction to the Web & HTML


 • What is a website?
 • Role of HTML, CSS, JavaScript
 • Browsers and text editors
 • HTML syntax, tags, elements, attributes
 • Writing a basic HTML5 document

Day 2: Structure of an HTML Page


 • <!DOCTYPE html>, <html>, <head>, <body>
 • Metadata: <title>, <meta>, <link>, <style>
 • Best practices in file structure

Day 3: Text Elements


 • Headings (<h1> to <h6>)
 • Paragraphs (<p>), line breaks (<br>), horizontal rules (<hr>)
 • Phrase elements: <b>, <i>, <u>, <strong>, <em>, <mark>, <sup>, <sub>, <small>,
<code>

Day 4: Lists
 • Unordered lists (<ul>)
 • Ordered lists (<ol>)
 • Description lists (<dl>, <dt>, <dd>)
 • Nesting lists

Day 5: Links and Navigation


 • Anchor tag (<a>)
 • href, target, title, download
 • Internal, external, and email links
 • Creating a navigation bar (basic)

Week 2: Media and Layout Basics

Day 6: Images
 • <img> tag, src, alt, width, height
 • Image formats and accessibility
 • Linking images

Day 7: Tables
 • <table>, <tr>, <td>, <th>
 • colspan, rowspan
 • Table captions and accessibility (<caption>, <thead>, <tbody>, <tfoot>)
Day 8: Forms – Part 1
 • <form>, action, method
 • Input types: text, password, email, number, url
 • Labels (<label>), placeholder, required, readonly

Day 9: Forms – Part 2


 • Checkboxes (<input type='checkbox'>)
 • Radio buttons
 • Dropdowns (<select>, <option>)
 • Text area (<textarea>)
 • Submit/reset buttons

Day 10: Grouping & Semantic Tags


 • <div> and <span>
 • HTML5 Semantic Elements: <header>, <nav>, <main>, <section>, <article>, <aside>,
<footer>

Week 3: Advanced Elements & Embedding

Day 11: Multimedia


 • Embedding audio (<audio>) and video (<video>)
 • controls, autoplay, loop, muted, poster
 • File formats (MP3, MP4, etc.)

Day 12: Iframes and Embeds


 • <iframe> to embed websites/maps/videos
 • <embed>, <object>
 • Security and limitations

Day 13: HTML5 APIs (Intro)


 • Introduction to features like:
 • Geolocation
 • Drag and Drop (overview only)
 • Offline storage: localStorage, sessionStorage (overview)

Day 14: Accessibility and Best Practices


 • alt, title, aria- attributes
 • Using proper semantic tags
 • Keyboard navigation

Day 15: Mini Project Day


 • Students create a full webpage:
 • Header, nav, content, image, table, form, footer
Week 4 (Optional Advanced Topics & Review)

Day 16: Meta Tags and SEO Basics


 • <meta charset>, description, keywords, viewport
 • Introduction to SEO

Day 17: Responsive Design Basics


 • Viewport settings
 • Mobile-first layout
 • Using <picture> and srcset for responsive images

Day 18: Validation and Debugging


 • W3C Validator
 • Common errors and fixing them

Day 19: Review and Q&A


 • Recap of all key concepts
 • Solve practice tasks and mini tests

Day 20: Final Project Showcase


 • Students present their projects
 • Peer feedback and improvement

You might also like