Scribd
Upload
10 views12 pages

Demonstration of Various HTML Concepts

The document is an HTML demonstration showcasing various web development concepts, including headings, text formatting, lists, tables, forms, and multimedia content. It features a navigation bar, an image gallery, and examples of CSS styling. The content is structured to illustrate how to create a simple web page with different elements and functionalities.

Uploaded by

threase9000
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
10 views12 pages

Demonstration of Various HTML Concepts

The document is an HTML demonstration showcasing various web development concepts, including headings, text formatting, lists, tables, forms, and multimedia content. It features a navigation bar, an image gallery, and examples of CSS styling. The content is structured to illustrate how to create a simple web page with different elements and functionalities.

Uploaded by

threase9000
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/ 12

<!

-- 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>

You might also like