Module IV HTML5 Lecture Notes
Uploaded by
derejeModule IV HTML5 Lecture Notes
Uploaded by
derejeLecture Notes: Build Web Pages
Using HTML5
Module IV – Chapter 1 & Chapter 2
Grade 11 Web Design and
Development
Chapter 1: Introduction to HTML5
– Objectives
• - Understand markup languages and HTML
• - Set up a development environment
• - Create and structure basic HTML5 pages
What is HTML?
• - HTML: HyperText Markup Language
• - Structures content on the web
• - Uses tags and elements to define content
Key Elements of HTML
• <!DOCTYPE html>
• <html>, <head>, <title>, <body>
• - Defines structure and metadata of the
document
Common HTML Tags
• <h1> - <h6>: Headings
• <p>: Paragraph
• <a>: Link
• <img>: Image
• <ul>, <ol>, <li>: Lists
• <table>: Tables
• <form>: User Input
HTML Development Environment
• - Use editors like Notepad++, VS Code
• - Save files with .html extension
• - Open in a browser to preview
Practical Activity – Chapter 1
• - Create a basic HTML page:
• - Title
• - Headings
• - Paragraph & Image
• - External Link
Chapter 2: Structuring HTML –
Objectives
• - Understand semantic elements
• - Build structured HTML pages
Semantic HTML Elements
• <header>, <nav>, <main>, <section>,
<article>, <footer>
• - Describe content meaning
• - Improve accessibility & SEO
HTML Page Layout – Example
• <!DOCTYPE html>
• <html>
• <body>
• <header>...</header>
• <main>...
• </main>
• <footer>...</footer>
• </body>
• </html>
Best Practices & Activity
• - Use semantic tags
• - Maintain clean structure
• - Activity: Create a school website layout with
header, section, and footer
