<!
-- Demonstration of Various HTML Concepts -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML and CSS Demonstrations</title>
<style>
/* CSS for styling */
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.gallery img {
width: 200px;
margin: 10px;
border: 2px solid #ccc;
border-radius: 5px;
}
.navbar {
background-color: #333;
overflow: hidden;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
text-align: left;
}
</style>
</head>
<body>
<!-- i) Heading Tags -->
<h1>Welcome to the HTML Demonstration Page</h1>
<h2>This is a Subheading</h2>
<h3>Understanding the Importance of Headings</h3>
<h4>Smaller Subsections Are Defined Here</h4>
<h5>Headings Can Help Organize Content</h5>
<h6>Use Headings Wisely for SEO</h6>
<!-- ii) Font Tags -->
<p style="font-family: Courier;">This paragraph uses the Courier font to demonstrate font-family.</p>
<p style="font-size: 20px;">This text is displayed with a font size of 20 pixels.</p>
<p style="color: red;">This text is styled with red color to highlight its importance.</p>
<!-- iii) Formatting Text -->
<p><b>This text is bold to emphasize its content.</b></p>
<p><i>Italicized text can be used for quotes or special emphasis.</i></p>
<p><u>Underlined text can help draw attention to specific words or phrases.</u></p>
<p><strike>Strikethrough text is useful for showing edits or obsolete information.</strike></p>
<p>This is an example of <sup>superscript</sup> and <sub>subscript</sub> used for mathematical or
scientific notations.</p>
<!-- iv) Different Types of Lists -->
<h3>Unordered List Example</h3>
<ul>
<li>HTML is easy to learn.</li>
<li>CSS adds styling to web pages.</li>
<li>JavaScript makes web pages interactive.</li>
</ul>
<h3>Ordered List Example</h3>
<ol>
<li>Start by learning HTML.</li>
<li>Next, understand the basics of CSS.</li>
<li>Finally, practice JavaScript for dynamic content.</li>
</ol>
<h3>Definition List Example</h3>
<dl>
<dt>HTML</dt>
<dd>A markup language used to create the structure of web pages.</dd>
<dt>CSS</dt>
<dd>A language used for styling the layout and design of web pages.</dd>
</dl>
<!-- v) Truth Table for Logic Gates -->
<h3>Truth Table for AND Gate</h3>
<table>
<thead>
<tr>
<th>Input A</th>
<th>Input B</th>
<th>Output (A AND B)</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>0</td>
</tr>
<tr>
<td>1</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
<!-- vi) Simple Bill -->
<h3>Shopping Bill</h3>
<table>
<thead>
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Total Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Notebook</td>
<td>2</td>
<td>$5</td>
<td>$10</td>
</tr>
<tr>
<td>Pen</td>
<td>3</td>
<td>$2</td>
<td>$6</td>
</tr>
<tr>
<td>Eraser</td>
<td>1</td>
<td>$1</td>
<td>$1</td>
</tr>
</tbody>
</table>
<!-- vii) Login Form -->
<h3>Login to Your Account</h3>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<button type="submit">Login</button>
</form>
<!-- viii) Registration Form -->
<h3>Create a New Account</h3>
<form>
<label for="name">Full Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email Address:</label>
<input type="email" id="email" name="email"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<button type="submit">Register</button>
</form>
<!-- ix) Image Gallery -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gallery</title>
<style>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
color: #333;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
padding: 20px;
}
h3 {
margin-bottom: 20px;
font-size: 1.5rem;
color: #444;
}
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
max-width: 1000px;
margin: 0 auto;
}
.gallery a {
display: block;
overflow: hidden;
position: relative;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease-in-out;
}
.gallery a:hover {
transform: scale(1.05);
}
.gallery img {
width: 100%;
height: 200px; /* Set a fixed height for consistency */
object-fit: cover; /* Ensures the image covers the area without distortion */
border-radius: 10px;
transition: transform 0.3s ease-in-out;
}
.gallery img:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<h3>Our Image Gallery</h3>
<div class="gallery">
<a href="https://www.google.com" target="_blank">
<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcQtr3JwlzQFRT84UebCo5yAZDhc9cUOiFA11w&s" alt="Nature Scene">
</a>
<a href="https://www.google.com" target="_blank">
<img src="https://rukminim3.flixcart.com/image/850/1000/jjbqufk0/poster/r/h/h/large-
vlnature00091a-natural-scene-of-mountain-near-lake-vinyl-original-imaeh9vdnj9xxfau.jpeg?
q=90&crop=false" alt="City View">
</a>
<a href="https://www.google.com" target="_blank">
<img src="https://images.unsplash.com/photo-1494548162494-384bba4ab999?
w=900&auto=format&fit=crop&q=60&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8c3Vuc2V0fGVufDB8fDB8fHww" alt="Sunset
Landscape">
</a>
</div>
</body>
</html>
<!-- x) Embed Audio and Video -->
<h3>Multimedia Content</h3>
<p>Listen to this audio clip:</p>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>Watch this video:</p>
<video controls width="320">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<!-- xi) Types of CSS -->
<h3>CSS Demonstration</h3>
<p style="color: blue;">This is an example of inline CSS.</p>
<p class="external-css">This text uses internal CSS styling.</p>
<!-- xii) Navigation Bar -->
<h3>Website Navigation</h3>
<div class="navbar">
<a href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Our Services</a>
<a href="#">Contact</a>
</div>
<!-- xiii) Web Page About College -->
<h3>About XYZ College</h3>
<p>XYZ College is committed to academic excellence and nurturing talent.</p>
<img src="college.jpg" alt="XYZ College Building" width="300">
<h3>Student Information</h3>
<table>
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>Roll Number</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>10th</td>
<td>101</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>10th</td>
<td>102</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Jim Brown</td>
<td>10th</td>
<td>103</td>
<td>Chicago</td>
</tr>
</tbody>
</table>
</body>
</html>
