Lab_4, VP Maliha Ayub
1. Basic HTML Structure Question: Write a basic HTML page structure with a title and
a heading.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Basic HTML Structure</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple HTML page.</p>
</body>
</html>
2. Text Formatting and Lists Question: Demonstrate different text formatting and
create ordered and unordered lists.
<h2>Text Formatting</h2>
<p><b>Bold Text</b></p>
<p><i>Italic Text</i></p>
<p><u>Underlined Text</u></p>
<p><mark>Highlighted Text</mark></p>
<h2>Lists</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol>
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ol>
3. Links and Navigation Question: Create a link to an external website and a
navigation menu.
<h2>Links</h2>
<a href="[Link] target="_blank">Go to Google</a>
<h2>Navigation Menu</h2>
<nav>
<a href="#home">Home</a> |
<a href="#about">About</a> |
<a href="#contact">Contact</a>
</nav>
4. Images and Multimedia Question: Add an image, audio, and video to a webpage.
<h2>Image</h2>
<img src="[Link] alt="Placeholder Image">
<h2>Audio</h2>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio>
<h2>Video</h2>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support video.
</video>
5. Forms and Input Elements Question: Create a form with text, email, radio,
checkbox, and dropdown inputs.
<h2>Simple Form</h2>
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="gender">Gender:</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br><br>
<label for="hobbies">Hobbies:</label>
<input type="checkbox" name="hobbies" value="reading"> Reading
<input type="checkbox" name="hobbies" value="sports"> Sports<br><br>
<label for="country">Country:</label>
<select name="country" id="country">
<option>USA</option>
<option>Canada</option>
<option>UK</option>
</select><br><br>
<input type="submit" value="Submit">
</form>
6. Tables Question: Create a table showing names, ages, and cities.
<h2>Sample Table</h2>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
<td>London</td>
</tr>
</table>
7. Semantic HTML Question: Use semantic tags like header, nav, main, section, article,
and footer.
<header>
<h1>Website Header</h1>
</header>
<nav>
<a href="#home">Home</a> |
<a href="#about">About</a>
</nav>
<main>
<section>
<h2>About Us</h2>
<p>This is the about section.</p>
</section>
<article>
<h2>Blog Post</h2>
<p>This is an article.</p>
</article>
</main>
<footer>
<p>© 2025 My Website</p>
</footer>
9. Introduction to CSS Question: Style a heading and paragraph using CSS.
<style>
h1 {
color: green;
text-align: center;
}
p {
font-size: 18px;
color: gray;
}
</style>
<h1>CSS Example</h1>
<p>This paragraph is styled using CSS.</p>
10. Box Model and Layout Question: Demonstrate CSS box model with width, height,
padding, border, and margin.
<style>
[Link] {
width: 200px;
height: 100px;
padding: 10px;
border: 5px solid blue;
margin: 20px;
background-color: lightyellow;
}
</style>
<div class="box">
The system is facing the Readers–Writers Problem.
Students act as readers (checking book availability), while the librarian acts as a writer
(updating records).
</div>
11. Typography and Fonts Question: Apply different fonts, sizes, and line spacing.
<style>
h1 {
font-family: 'Arial', sans-serif;
font-size: 36px;
font-weight: bold;
}
p {
font-family: 'Georgia', serif;
font-size: 18px;
line-height: 1.5;
}
</style>
<h1>Typography Example</h1>
<p>This paragraph uses a different font and line spacing.</p>
12. Colors and Backgrounds Question: Use background colors and text colors in
CSS.
<style>
body {
background-color: #f0f0f0;
color: #333333;
}
h1 {
color: #ff6600;
}
[Link]-box {
background-color: #00ccff;
width: 200px;
height: 100px;
padding: 10px;
color: white;
}
</style>
<h1>Colors Example</h1>
<div class="color-box">Background Color Box</div>
