Web Technology Lab: Assignment 1 [Each Q- 20 Marks]
1.Program Statement: Create a HTML page that includes an image
gallery (3 images in one row) which acts as a link. Also, images should be
with caption & scales responsively to the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Gallery</title>
<style>
.gallery {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.gallery-item {
text-align: center;
margin: 10px;
}
.gallery-item img {
width: 100%;
max-width: 300px;
height: auto;
border-radius: 8px;
}
.caption {
margin-top: 8px;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Responsive Image Gallery</h2>
<div class="gallery">
<div class="gallery-item">
<a href="https://example.com/image1">
<img src=""E:\MCA LAB\nature image 3.jpg" " alt="nature image 3">
</a>
<div class="caption">Caption 1</div>
</div>
<div class="gallery-item">
<a href="https://example.com/image2">
<img src="https://via.placeholder.com/300" alt="Image 2">
</a>
<div class="caption">Caption 2</div>
</div>
<div class="gallery-item">
<a href="https://example.com/image3">
<img src="https://via.placeholder.com/300" alt="Image 3">
</a>
<div class="caption">Caption 3</div>
</div>
</div>
</body>
</html>
Output:
2.Program Statement: Create a Simple HTML Form to collect personal
data including the following form elements: Text field for name,
Password field, Email field, List of hobbies, Radio buttons for gender,
Checkboxes for interests, Submit button.
<!DOCTYPE html>
<html>
<head>
<title>Personal Data Form</title>
</head>
<body>
<h2>Personal Information Form</h2>
<form>
<!-- Text field for name -->
Name: <input type="text" name="name"><br><br>
<!-- Password field -->
Password: <input type="password" name="password"><br><br>
<!-- Email field -->
Email: <input type="email" name="email"><br><br>
<!-- List of hobbies (dropdown) -->
Hobbies:
<select name="hobbies">
<option value="reading">Reading</option>
<option value="sports">Sports</option>
<option value="music">Music</option>
<option value="traveling">Traveling</option>
</select><br><br>
<!-- Radio buttons for gender -->
Gender:
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other"> Other
<br><br>
<!-- Checkboxes for interests -->
Interests:<br>
<input type="checkbox" name="interest" value="tech">
Technology<br>
<input type="checkbox" name="interest" value="sports"> Sports<br>
<input type="checkbox" name="interest" value="art"> Art<br>
<input type="checkbox" name="interest" value="science">
Science<br><br>
<!-- Submit button -->
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:
3.Program Statement: Create an HTML List with nested items with the
following structure: Beverages: Coffee Tea o Black Tea o Green Tea
Milk.
<!DOCTYPE html>
<html>
<head>
<title>Nested List</title>
</head>
<body>
<h2>Beverages:</h2>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black Tea</li>
<li>Green Tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Output:
4. Program Statement: Create a college Web Page with specified
elements. Title of the page as "My College". College name at the top
in large text. Address in smaller text. List of courses offered in
different colours and styles. Scrolling text with a custom message.
College image at the bottom.
<!DOCTYPE html>
<html>
<head>
<title>My College</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
.college-name {
font-size: 36px;
font-weight: bold;
margin-top: 20px;
}
.address {
font-size: 12px;
color: gray;
}
.courses {
list-style-type: none;
padding: 0;
}
.course1 {
color: blue;
font-style: italic;
}
.course2 {
color: green;
font-weight: bold;
}
.course3 {
color: red;
text-decoration: underline;
}
.scroll-text {
margin: 20px 0;
color: darkorange;
font-weight: bold;
}
.college-image {
margin-top: 30px;
}
</style>
</head>
<body>
<div class="college-name">ABC College of Engineering</div>
<p class="address">123, Main Road, Your City, Your State - 123456</p>
<h3>Courses Offered</h3>
<ul class="courses">
<li class="course1">Computer Science</li>
<li class="course2">Mechanical Engineering</li>
<li class="course3">Electrical Engineering</li>
</ul>
<div class="scroll-text">
<marquee behavior="scroll" direction="left">Welcome to ABC
College – Admissions Open for 2025!</marquee>
</div>
<div class="college-image">
<img src="college.jpg" alt="College Image" width="300">
</div>
</body>
</html>
Output:
5.Program Statement: Style a Table with CSS styling. Design a table with
three columns: City, Country, Population. Add CSS to style borders,
header background colour and alternate row colours.
(A)
<!DOCTYPE html>
<html>
<head>
<title>City Table</title>
<style>
table {
width: 60%;
border-collapse: collapse;
margin: 20px auto;
font-family: Arial, sans-serif;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: center;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:nth-child(odd) {
background-color: #ffffff;
}
</style>
</head>
<body>
<h2 style="text-align: center;">City Information</h2>
<table>
<tr>
<th>City</th>
<th>Country</th>
<th>Population</th>
</tr>
<tr>
<td>New York</td>
<td>USA</td>
<td>8,336,817</td>
</tr>
<tr>
<td>Tokyo</td>
<td>Japan</td>
<td>13,960,236</td>
</tr>
<tr>
<td>Paris</td>
<td>France</td>
<td>2,165,423</td>
</tr>
<tr>
<td>Delhi</td>
<td>India</td>
<td>31,181,000</td>
</tr>
</table>
</body>
</html>
Output:
