Day 1: Introduction to HTML & Basic Structure
1. What is HTML?
HTML (HyperText Markup Language) is the foundation of web pages.
It structures content using tags (e.g., <h1>, <p>, <img>).
Browsers read HTML and display it as formatted text, images, and interactive elements.
2. Basic HTML Document Structure
A complete HTML5 document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Welcome to HTML Bootcamp</h1>
<p>This is my first webpage.</p>
</body>
</html>
Explanation:
<!DOCTYPE html> → Defines the document as HTML5.
<html lang="en"> → Specifies the document language.
<meta charset="UTF-8"> → Supports special characters (e.g., emojis, other languages).
<meta name="viewport" content="width=device-width, initial-scale=1.0"> → Responsive
design for mobile screens.
<title> → Sets the browser tab title.
3. Headings and Paragraphs
<h1> to <h6> → Headings (largest to smallest).
<p> → Paragraphs.
Example:
<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>This is a paragraph of text.</p>
4. Line Breaks & Horizontal Rules
<br> → Inserts a new line.
<hr> → Adds a horizontal divider.
Example:
<p>Line one.<br>Line two.</p>
<hr>
<p>Content after the horizontal rule.</p>
5. HTML Comments
Comments are not displayed in the browser, used for notes.
<!-- This is a comment -->
Hands-on Exercise:
Create a basic webpage with headings, paragraphs, and a title.
Day 2: Text Formatting & Lists
1. Text Formatting Tags
<b> → Bold
<i> → Italic
<u> → Underlined
<strong> → Important (Bold)
<em> → Emphasized (Italic)
<mark> → ==Highlighted==
<small> → Small text
<del> → Strikethrough
<ins> → Inserted (underlined)
<sup> → Superscript (e.g., 2²)
<sub> → Subscript (e.g., H₂O)
Example:
<p>This is <b>bold</b> and <i>italic</i> text.</p>
<p>Water formula: H<sub>2</sub>O</p>
2. Lists in HTML
Ordered List (Numbered)
<ol>
<li>Step 1</li>
<li>Step 2</li>
</ol>
Unordered List (Bulleted)
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
3. Preformatted Text & Code Blocks
<pre> → Maintains spaces and line breaks.
<code> → Displays programming code.
Example:
<pre>
Line one
Indented line
</pre>
<p>Example of code: <code>print("Hello, World!")</code></p>
Hands-on Exercise:
Format a paragraph with different styles and create an ordered & unordered list.
Day 3: Links, Images, and Multimedia
1. Hyperlinks (<a>)
<a href="[Link] Example</a>
Open in new tab:
<a href="[Link] target="_blank">Open in new tab</a>
Internal Links:
<a href="[Link]">Go to About Page</a>
2. Adding Images (<img>)
<img src="[Link]" alt="Description" width="300">
alt → Alternative text for accessibility.
width and height → Adjust image size.
3. Embedding Video & Audio
Video:
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
Audio:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
Hands-on Exercise:
Create a webpage with links, images, and embedded media.
Day 4: Tables & Forms (All Input Types)
1. Creating a Table
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
</table>
2. Form Elements & All Input Types
<form>
<label>Name: <input type="text" name="name"></label><br>
<label>Email: <input type="email" name="email"></label><br>
<label>Password: <input type="password" name="password"></label><br>
<label>Date of Birth: <input type="date" name="dob"></label><br>
<label>Number: <input type="number" name="age"></label><br>
<label>Range: <input type="range" min="1" max="10"></label><br>
<label>Color: <input type="color" name="color"></label><br>
<label>Gender:
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
</label><br>
<label>Hobbies:
<input type="checkbox" name="hobby" value="reading"> Reading
<input type="checkbox" name="hobby" value="sports"> Sports
</label><br>
<button type="submit">Submit</button>
</form>
Hands-on Exercise:
Build a contact form with all input types.
Day 5: Semantic Elements & Final Project
1. Semantic HTML
<header>, <nav>, <section>, <article>, <aside>, <footer>.
4. Understanding the <div> Element
The <div> tag is a container used to group elements together for styling or layout purposes.
It does not have any semantic meaning but is useful for organizing content.
Example: Using <div> for Layout
<div style="background-color: lightgray; padding: 10px;">
<h2>About Me</h2>
<p>This is a brief introduction.</p>
</div>
Example: Multiple Sections with <div>
<div class="section">
<h2>Education</h2>
<p>Details about my education...</p>
</div>
<div class="section">
<h2>Work Experience</h2>
<p>Details about my job...</p>
</div>
2. Final Hands-on Project: Personal Webpage
Requirements:
Header, navigation, sections.
Use links, images, tables, and a form.
Example Layout:
<header>
<h1>My Portfolio</h1>
</header>
<nav>
<a href="#">Home</a> | <a href="#">About</a>
</nav>
<section>
<h2>About Me</h2>
<p>Brief introduction...</p>
</section>
<footer>
<p>© 2025 My Portfolio</p>
</footer>
