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.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image Gallery</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="gallery">
<div class="gallery-item">
<a href="link1.html">
<img src="image1.jpg" alt="Image 1">
<div class="caption">Caption 1</div>
</a>
</div>
<div class="gallery-item">
<a href="link2.html">
<img src="image2.jpg" alt="Image 2">
<div class="caption">Caption 2</div>
</a>
</div>
<div class="gallery-item">
<a href="link3.html">
<img src="image3.jpg" alt="Image 3">
<div class="caption">Caption 3</div>
</a>
</div>
</div>
</body>
</html>
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.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Data Form</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
form {
background: #fff;
padding: 20px;
border: 1px solid #ddd;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
width: 300px;
box-sizing: border-box;
}
label {
display: block;
margin-bottom: 8px;
}
input[type="text"],
input[type="password"],
input[type="email"],
select {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
.gender,
.interests {
margin-bottom: 10px;
}
.gender label,
.interests label {
display: inline-block;
margin-right: 10px;
}
input[type="submit"] {
width: 100%;
padding: 10px;
background-color: #007BFF;
border: none;
color: white;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<form action="#" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="hobbies">Hobbies:</label>
<select id="hobbies" name="hobbies" required>
<option value="">Select a hobby</option>
<option value="reading">Reading</option>
<option value="traveling">Traveling</option>
<option value="sports">Sports</option>
<option value="music">Music</option>
</select>
<label>Gender:</label>
<div class="gender">
<label for="male">
<input type="radio" id="male" name="gender" value="male" required> Male
</label>
<label for="female">
<input type="radio" id="female" name="gender" value="female" required> Female
</label>
</div>
<label>Interests:</label>
<div class="interests">
<label for="coding">
<input type="checkbox" id="coding" name="interests" value="coding"> Coding
</label>
<label for="gaming">
<input type="checkbox" id="gaming" name="interests" value="gaming"> Gaming
</label>
<label for="cooking">
<input type="checkbox" id="cooking" name="interests" value="cooking"> Cooking
</label>
</div>
<input type="submit" value="Submit">
</form>
</body>
</html>
3. Program Statement: Create an HTML List with nested items with the following structure:
Beverages:
• Coffee
• Tea
▪ Black Tea
▪ Green Tea
• Milk
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nested List Example</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
ul {
padding: 0;
list-style-type: disc;
.nested-list {
list-style-type: circle;
margin-left: 20px;
</style>
</head>
<body>
<ul>
<li>Beverages:
<ul class="nested-list">
<li>Coffee</li>
<li>Tea
<ul class="nested-list">
<li>Black Tea</li>
<li>Green Tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</li>
</ul>
</body>
</html>
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.
Code:
college.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My College</title>
<link rel="stylesheet" href="collegestyles.css">
</head>
<body>
<header>
<h1>My College</h1>
<p class="address">Andhra University, Visakhapatnam, AP</p>
</header>
<main>
<section class="courses">
<h2>Courses Offered</h2>
<ul>
<li class="course-1">Computer Science</li>
<li class="course-2">Business Administration</li>
<li class="course-3">Psychology</li>
<li class="course-4">Engineering</li>
<li class="course-5">Mathematics</li>
</ul>
</section>
<marquee behavior="scroll" direction="left" class="scrolling-message">Welcome to My College - Empowering
Students for a Brighter Future!</marquee>
</main>
<footer>
<img src="AU-image.jpg" alt="College Image" class="college-image">
</footer>
</body>
</html>
collegestyles.css:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
display: flex;
flex-direction: column;
min-height: 100vh;
header {
text-align: center;
background-color: #0044cc;
color: white;
padding: 20px;
.address {
font-size: 1rem;
main {
flex: 1;
padding: 20px;
.courses {
margin-bottom: 20px;
.courses h2 {
color: #0044cc;
.courses ul {
list-style-type: none;
padding: 0;
.courses li {
font-size: 1.2rem;
margin: 10px 0;
.course-1 { color: #ff5733; font-style: italic; }
.course-2 { color: #33ff57; font-weight: bold; }
.course-3 { color: #3357ff; text-decoration: underline; }
.course-4 { color: #ff33a6; font-style: oblique; }
.course-5 { color: #ff8c33; font-variant: small-caps; }
.scrolling-message {
background-color: #0044cc;
color: white;
padding: 10px;
font-size: 1.2rem;
footer {
text-align: center;
padding: 20px;
background-color: #0044cc;
.college-image {
max-width: 100%;
height: auto;
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.
Code:
table.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Table Example</title>
<link rel="stylesheet" href="tablestyle.css">
</head>
<body>
<table>
<thead>
<tr>
<th>City</th>
<th>Country</th>
<th>Population</th>
</tr>
</thead>
<tbody>
<tr>
<td>New York</td>
<td>USA</td>
<td>8,336,817</td>
</tr>
<tr>
<td>Tokyo</td>
<td>Japan</td>
<td>13,515,271</td>
</tr>
<tr>
<td>London</td>
<td>UK</td>
<td>8,982,000</td>
</tr>
<tr>
<td>Paris</td>
<td>France</td>
<td>2,148,271</td>
</tr>
<tr>
<td>Berlin</td>
<td>Germany</td>
<td>3,769,495</td>
</tr>
</tbody>
</table>
</body>
</html>
tablestyle.html:
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
table {
width: 80%;
border-collapse: collapse;
margin: 20px 0;
font-size: 1em;
min-width: 400px;
border: 1px solid #ddd;
}
table thead tr {
background-color: #009879;
color: #ffffff;
text-align: left;
font-weight: bold;
}
table th,
table td {
padding: 12px 15px;
border: 1px solid #ddd;
}
table tbody tr:nth-child(even) {
background-color: #f3f3f3;
}
table tbody tr:hover {
background-color: #f1f1f1;
}
