Module 1: HTML (60 mins)
Goal: Learn the basics of HTML and understand how to structure a web page.
1. Introduction to HTML (10 mins)
What is HTML?HTML (HyperText Markup Language) is the standard language used to create and structure web pages. It consists of elements (or tags) that define different parts of a webpage, such as headings, paragraphs, images, and links.
Why is HTML Important?
It provides the structure of web pages.
Works alongside CSS (for styling) and JavaScript (for interactivity).
Browsers read HTML to render web pages.
Basic HTML Document Structure
Every HTML document follows a standard structure.
Example: Simple HTML Page
Explanation:
<!DOCTYPE html> → Declares the document as an HTML5 document.
<html> → Root element that contains the entire webpage.
<head> → Holds metadata (information about the page, like title and encoding)
<title> → Sets the title of the webpage (seen in the browser tab).
<body> → Contains all visible content (headings, paragraphs, images, etc.).
2. HTML Tags & Elements (15 mins)
What are HTML Elements?
An HTML element consists of:
Opening tag (e.g., <h1>)
Content (e.g., "Hello World")
Closing tag (e.g., </h1>)
Common HTML Elements
Headings & Paragraphs
Used to structure text content.
📌 Note:
<h1> to <h6> define headings (largest to smallest).
<p> defines a paragraph.
Lists (Ordered & Unordered)
Lists organize items in a structured way.
📌 Note:
<ul> creates unordered lists (bullets).
<ol> creates ordered lists (numbers).
<li> defines each list item.
Links & Anchor Tags
📌 Note:
<a> creates a hyperlink.
href specifies the destination URL.
target="_blank" opens the link in a new tab.
3. Forms & Input Elements (15 mins)
Forms collect user input.
Basic Form Example
📌 Explanation:
<form> → Creates a form.
action → Defines where form data is sent (server-side script).
method="post" → Sends data securely (not visible in the URL).
<input> → Creates input fields.
type="text" → Defines a text field.
required → Makes a field mandatory.
<button> → Submits the form.
Different Input Types
4. Tables & Multimedia (10 mins)
Creating a Table
📌 Explanation:
<table> → Defines a table.
<tr> → Defines a row.
<th> → Defines a table header.
<td> → Defines a table cell.
Adding Images & Videos
📌 Explanation:
<img> → Used to add an image.
<video> → Embeds a video.
controls → Enables play/pause buttons.
5. Semantic HTML & Best Practices (10 mins)
📌 Explanation:
<header> → Contains the website title/logo.
<nav> → Holds navigation links.
<section> → Groups related content.
<footer> → Contains footer information.
Why Use Semantic HTML?
Final Activity: Build a Complete Web Page
💡 Task: Create a webpage using headings, lists, forms, tables, and media elements.
.svg)
