Demo 1: HTML Structure with Tags
<html>
<head>
<title>HTML Structure with Tags</title>
</head>
<body>
<!-- Headings -->
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
<!-- Horizontal Line -->
<hr>
<!-- Paragraph with Line Break -->
<p>This is a paragraph of text.<br>This is the next line after a line break.</p>
<!-- Paragraph with Big and Small Text -->
<p>This is <big>big text</big> and this is <small>small text</small>.</p>
<!-- Another horizontal line -->
<hr>
</body>
</html>
Output:-
Demo 2: UL and LI Tag Example
<html>
<head>
<title>UL and LI Tag Example</title>
</head>
<body>
<h2 align="center" >Shopping List</h2>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Eggs</li>
<li>Butter</li>
</ul>
</body>
</html>
Output:-
Demo 3: Simple User Form
<html>
<head>
<title>html Form</title>
</head>
<body>
<h2>Simple User Form</h2>
<label>First Name</label><br>
<input type="text" placeholder="Enter your first name"><br><br>
<label>Last Name</label><br>
<input type="text" placeholder="Enter your last name"><br><br>
<label>Email</label><br>
<input type="email" placeholder="Enter your email"><br><br>
<label>Password</label><br>
<input type="password" placeholder="Enter your password"><br><br>
<label>Age</label><br>
<input type="number" placeholder="Enter your age"><br><br>
<label>Date of Birth</label><br>
<input type="date"><br><br>
<label>Gender</label><br>
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female<br><br>
<label>Hobbies</label><br>
<input type="checkbox"> Reading
<input type="checkbox"> Music
<input type="checkbox"> Sports<br><br>
<label>address</label><br>
<textarea placeholder="Write something about yourself" rows="4"
cols="30"></textarea><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</body>
</html>
Output:-
Demo 4: Color and Styling Example
<!DOCTYPE html>
<html>
<head>
<title>Color and Styling Example</title>
</head>
<!-- Set background color for the entire page -->
<body bgcolor="#f0f8ff">
<!-- Heading with custom text color -->
<h1 style="color: blue;"> Welcome to My Professional Page </h1>
<!-- Heading with custom background color -->
<h2 style="background-color: yellow;"> This Heading Has a Background Color </h2>
<!-- A simple paragraph without any custom styling -->
<p> This is a regular paragraph for demonstration purposes. </p>
</body>
</html>
Output:-
Demo 4: Image using profile Example
<html>
<head>
<title>Profile</title>
</head>
<body bgcolor="#f5f5f5"> <!-- Light background for better readability -->
<!-- Centered Elon Musk Image -->
<div style="text-align: center; margin-top: 50px;">
<img src="[Link]"
alt="Elon Musk"
width="250"
style="border-radius: 10px;">
</div>
<!-- Paragraph below the image describing Elon Musk -->
<p style="font-size: 18px; width: 60%; margin: 0 auto;">
Elon Musk is a visionary entrepreneur and engineer known for
founding and leading companies like SpaceX,
Tesla, Neuralink, and The Boring Company. He is known for
revolutionizing electric vehicles, space travel,
and pushing the boundaries of technology and innovation.
</p>
</body>
</html>
Output:-
Demo 5: Create Table using html
<!DOCTYPE html>
<html>
<head>
<title>Exam Time Table - S.V.M School</title>
</head>
<body>
<h2>S.V.M School</h2>
<h3>Exam Time Table</h3>
<table border="1">
<tr>
<th>Subject</th>
<th>Date</th>
<th>Time</th>
<th>Signature</th>
</tr>
<tr>
<td>Math</td>
<td>15 July 2025</td>
<td>10:00 AM - 12:00 PM</td>
<td></td>
</tr>
<tr>
<td>Science</td>
<td>16 July 2025</td>
<td>10:00 AM - 12:00 PM</td>
<td></td>
</tr>
<tr>
<td>English</td>
<td>17 July 2025</td>
<td>10:00 AM - 12:00 PM</td>
<td></td>
</tr>
<tr>
<td>Hindi</td>
<td>18 July 2025</td>
<td>10:00 AM - 12:00 PM</td>
<td></td>
</tr>
</table>
</body>
</html>
Output:-