Q1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Basic HTML Tags</title>
<style>
body {
font-family: Arial, sans-serif;
}
header {
background-color: lightblue;
padding: 20px;
text-align: center;
}
footer {
background-color: lightgray;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
article {
margin: 20px;
}
</style>
</head>
<body>
<!-- Header section -->
<header>
<h1>Welcome to My Basic HTML Page</h1>
<p>This page demonstrates basic HTML tags</p>
</header>
<!-- Navigation section -->
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<!-- Main content area -->
<article>
<section id="home">
<h2>Home</h2>
<p>This is a <strong>home</strong> section with some <em>emphasized</em> text.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</section>
<section id="about">
<h2>About</h2>
<p>Here is an <a href="https://example.com">external link</a> to another page.</p>
<p>The image below is an example of an image tag:</p>
<img src="https://via.placeholder.com/150" alt="Placeholder Image" />
</section>
<section id="contact">
<h2>Contact</h2>
<p>To contact us, please fill in the form below:</p>
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<textarea name="message" id="message" rows="4" cols="50" placeholder="Enter your
message"></textarea><br><br>
<button type="submit">Submit</button>
</form>
</section>
</article>
<!-- Footer section -->
<footer>
<p>© 2024 My Website. All rights reserved.</p>
</footer>
</body>
</html>
Q2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML Lists</title>
<style>
body { font-family: Arial, sans-ser}
section {margin: 20px;}
ol, ul, dl {margin-left: 20px;}
</style>
</head>
<body>
<h1>HTML Lists Examples</h1>
<!-- Unordered List -->
<section>
<h2>Unordered List</h2>
<p>An unordered list uses bullet points for each item:</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Grapes</li>
</ul>
</section>
<!-- Ordered List
<section>
<h2>Ordered List</h2>
<p>An ordered list uses numbers to order the items:</p>
<ol>
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
<li>Fourth step</li>
</ol>
</section>
<!-- Definition List -->
<section>
<h2>Definition List</h2>
<p>A definition list is used to define terms:</p>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>JavaScript</dt>
<dd>A programming language used for web development</dd>
</dl>
</section>
</body>
</html>
Q3)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Image Tag</title>
</head>
<body>
<h1>HTML Image Tag Examples</h1>
<!-- Basic Image -->
<img src="https://via.placeholder.com/300" alt="Placeholder" width="300" height="200"
title="Placeholder Image">
<!-- Responsive Image -->
<img src="https://via.placeholder.com/600x400" alt="Responsive" width="100%" height="auto">
<!-- Lazy Loaded Image -->
<img src="https://via.placeholder.com/500x300" alt="Lazy Loaded" width="500" height="300"
loading="lazy">
<!-- Image Map Example -->
<img src="https://via.placeholder.com/500x300" alt="Image Map" usemap="#map" width="500"
height="300">
<map name="map">
<area shape="rect" coords="34,44,270,350" alt="Rectangle" href="https://example.com/rectangle">
<area shape="circle" coords="200,200,40" alt="Circle" href="https://example.com/circle">
</map>
</body>
</html>
Q4)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linking Example</title>
</head>
<body>
<h1>Linking Example</h1>
<p>Visit <a href="https://www.example.com" target="_blank">Example Website</a>.</p>
<p><a href="#section1">Go to Section 1</a></p>
<section id="section1">
<h2>Section 1</h2>
<p>This is an internal link example.</p>
<p><a href="#top">Back to top</a></p>
</section>
<p id="top"></p>
</body>
</html>
Q5)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio and Video Tags</title>
</head>
<body>
<h1>HTML Audio and Video Tags Example</h1>
<!-- Audio Tag Example -->
<section>
<h2>Audio Example</h2>
<p>Click the play button to listen to the audio:</p>
<audio controls>
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
type="audio/mp3">
Your browser does not support the audio element.
</audio>
</section>
<!-- Video Tag Example -->
<section>
<h2>Video Example</h2>
<p>Click the play button to watch the video:</p>
<video width="600" controls>
<source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
</section>
</body>
</html>
Q6)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Member Info</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #e0e0e0;
}
</style>
</head>
<body>
<h1>Member Info</h1>
<table>
<caption>Contact Details</caption>
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>DOB</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>John Doe</td><td>1990-05-14</td><td>[email protected]</td><td>123-
456-7890</td></tr>
<tr><td>2</td><td>Jane Smith</td><td>1985-08-
22</td><td>[email protected]</td><td>987-654-3210</td></tr>
<tr><td>3</td><td>Emily Johnson</td><td>1992-03-
30</td><td>[email protected]</td><td>555-123-4567</td></tr>
<tr><td>4</td><td>Michael Brown</td><td>1988-11-
10</td><td>[email protected]</td><td>777-888-9999</td></tr>
<tr><td>5</td><td>Linda White</td><td>1995-06-
19</td><td>[email protected]</td><td>333-444-5555</td></tr>
</tbody>
</table>
</body>
</html>
Q7)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rowspan & Colspan</title>
<style>
table {
width: 50%;
border-collapse: collapse;
margin: auto;
text-align: center;
}
th, td {
border: 1px solid black;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<tr>
<th rowspan="2">Category</th>
<th colspan="3">Details</th>
</tr>
<tr>
<th>Name</th><th>Age</th><th>Location</th>
</tr>
<tr>
<td rowspan="2">Team A</td>
<td>John</td><td>28</td><td>NY</td>
</tr>
<tr>
<td>Jane</td><td>34</td><td>Chicago</td>
</tr>
<tr>
<td rowspan="2">Team B</td>
<td>Emily</td><td>22</td><td>LA</td>
</tr>
<tr>
<td>Michael</td><td>30</td><td>Houston</td>
</tr>
</table>
</body>
</html>
Q8)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Example</title>
</head>
<body>
<form>
<h2>Application Form</h2>
<label>Name: <input type="text" name="name"></label><br><br>
<label>Gender:</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br><br>
<label>Hobbies:</label>
<input type="checkbox" name="hobby" value="reading"> Reading
<input type="checkbox" name="hobby" value="sports"> Sports<br><br>
<label>Country:</label>
<select name="country">
<option value="us">USA</option>
<option value="uk">UK</option>
<option value="india">India</option>
</select><br><br>
<label>Comments:</label><br>
<textarea name="comments" rows="4" cols="30"></textarea><br><br>
<button type="submit">Submit</button>
</form>
</body>
</html>
Q9)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Demo</title>
<style>
table, th, td { border: 1px solid black; border-collapse: collapse; padding: 5px; }
iframe { margin-top: 20px; }
</style>
</head>
<body>
<h1>HTML Elements</h1>
<p>Welcome to the <strong>HTML demo page</strong>. Visit <a href="https://example.com"
target="_blank">Example</a>.</p>
<img src="https://via.placeholder.com/150" alt="Image">
<h2>Table</h2>
<table>
<tr><th>#</th><th>Name</th><th>Age</th></tr>
<tr><td>1</td><td>John</td><td>30</td></tr>
<tr><td>2</td><td>Jane</td><td>25</td></tr>
</table>
<h2>Form</h2>
<form>
<label>Name: <input type="text" name="name"></label><br>
<label>Gender: <input type="radio" name="gender"> Male <input type="radio" name="gender">
Female</label><br>
<label>Hobbies: <input type="checkbox"> Reading <input type="checkbox"> Sports</label><br>
<label>Country: <select><option>USA</option><option>India</option></select></label><br>
<label>Comments:<br><textarea></textarea></label><br>
<button type="submit">Submit</button>
</form>
<h2>Frame</h2>
<iframe src="https://wikipedia.org" width="100%" height="200"></iframe>
</body>
</html>
Q10)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Types</title>
<link rel="stylesheet" href="styles.css"> <!-- External CSS -->
<style> /* Internal CSS */
h1 { color: blue; }
p { font-size: 14px; }
</style>
</head>
<body>
<h1 style="text-align: center;">CSS Demo</h1> <!-- Inline CSS -->
<p>This demonstrates inline, internal, and external CSS.</p>
</body>
</html>
