Scribd
Upload
8 views

Bootcamp

Uploaded by

munnaraj1205
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
8 views

Bootcamp

Uploaded by

munnaraj1205
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/ 6

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="https://www.example.com">Visit Example</a>

 Open in new tab:

<a href="https://www.example.com" target="_blank">Open in new tab</a>

 Internal Links:

<a href="about.html">Go to About Page</a>


2. Adding Images (<img>)

<img src="image.jpg" 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>

You might also like