Scribd
Upload
29 views

Web Technology Lab Assignment 1

Uploaded by

animrt.kumar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
29 views

Web Technology Lab Assignment 1

Uploaded by

animrt.kumar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 14

Web Technology Lab: Assignment 1

Qns No.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 capƟon &
scales responsively to the page.

Ans:-
To create an HTML page that includes an image gallery with the specified requirements, we can use
HTML and CSS. The gallery will display three images in one row, each image will act as a link,
and each will have a caption. Additionally, the images will scale responsively to fit the screen size.

Here’s the HTML and CSS code to achieve this:

HTML (index.html):
html
Copy 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">
<!-- Image 1 -->
<a href="https://example.com/link1" class="gallery-item">
<img src="https://via.placeholder.com/300" alt="Image 1">
<div class="caption">Image 1</div>
</a>
<!-- Image 2 -->
<a href="https://example.com/link2" class="gallery-item">
<img src="https://via.placeholder.com/300" alt="Image 2">
<div class="caption">Image 2</div>
</a>
<!-- Image 3 -->
<a href="https://example.com/link3" class="gallery-item">
<img src="https://via.placeholder.com/300" alt="Image 3">
<div class="caption">Image 3</div>
</a>
</div>

</body>
</html>

CSS (styles.css):
css
Copy code
/* Basic reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Set up the gallery container */


.gallery {
display: flex;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap; /* Allow images to wrap on smaller screens */
margin: 20px;
}

/* Style each gallery item (link + image) */


.gallery-item {
display: block;
width: 100%;
text-align: center;
text-decoration: none; /* Remove underline from links */
}

.gallery-item img {
width: 100%; /* Make the image responsive */
height: auto;
max-width: 300px; /* Limit maximum width */
display: block;
margin: 0 auto;
}

.caption {
margin-top: 10px;
font-size: 16px;
color: #333;
font-weight: bold;
}

/* Responsive styling for smaller screens */


@media (max-width: 768px) {
.gallery {
flex-direction: column;
gap: 10px;
}

.gallery-item {
width: 100%;
}
}

Explanation:

 HTML Structure:
o We have a div with the class gallery to hold the image links.
o Inside the gallery, each image is wrapped in an anchor (<a>) tag, which acts as a
link. Each link contains an image (<img>) and a caption (<div class="caption">).
 CSS Styling:
o The gallery class uses display: flex to arrange the items in a row. It also uses
gap: 20px to space the images evenly.
o The gallery-item class ensures that the links are block-level elements, so they
stack vertically on smaller screens.
o The images are made responsive with width: 100% and height: auto.
Additionally, max-width: 300px ensures the images do not stretch beyond a certain
size.
o A @media query is added to adjust the layout for screens smaller than 768px. In this
case, the layout switches to a column format where each image is stacked vertically.
How it works:

1. The images will display in a row on large screens.


2. Each image is a link that can navigate to a specified URL.
3. On smaller screens (like mobile devices), the images will stack vertically, making the
gallery responsive.
4. Each image has a caption below it, styled to appear below the image.

Notes:

 Replace the src in the <img> tags with the actual URLs of your images.
 Update the href in the anchor tags (<a href="...">) with the desired links.
Qns No.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 buƩons for gender, Checkboxes for
interests, Submit button.

Ans:-
To create a simple HTML form that collects personal data, including text fields for name, a
password field, an email field, a list of hobbies, radio buttons for gender, checkboxes for interests,
and a submit button, you can use the following HTML code:

HTML (index.html):
html
Copy 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>
</head>
<body>

<h2>Personal Information Form</h2>

<form action="#" method="POST">

<!-- Text field for Name -->


<label for="name">Full Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name"
required><br><br>

<!-- Password field -->


<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter
your password" required><br><br>

<!-- Email field -->


<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your
email" required><br><br>

<!-- List of hobbies (multiple selection) -->


<label for="hobbies">Hobbies:</label><br>
<select id="hobbies" name="hobbies[]" multiple size="4" required>
<option value="Reading">Reading</option>
<option value="Traveling">Traveling</option>
<option value="Sports">Sports</option>
<option value="Music">Music</option>
</select><br><br>

<!-- Radio buttons for Gender -->


<label>Gender:</label><br>
<input type="radio" id="male" name="gender" value="Male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="Female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="Other">
<label for="other">Other</label><br><br>

<!-- Checkboxes for Interests -->


<label>Interests:</label><br>
<input type="checkbox" id="coding" name="interests[]" value="Coding">
<label for="coding">Coding</label><br>
<input type="checkbox" id="gaming" name="interests[]" value="Gaming">
<label for="gaming">Gaming</label><br>
<input type="checkbox" id="fitness" name="interests[]" value="Fitness">
<label for="fitness">Fitness</label><br>
<input type="checkbox" id="music" name="interests[]" value="Music">
<label for="music">Music</label><br><br>

<!-- Submit button -->


<input type="submit" value="Submit">

</form>

</body>
</html>

Explanation of the Form Elements:

1. Text Field for Name:


o The <input type="text"> element allows the user to input their full name. It has a
required attribute, making it mandatory to fill out.
2. Password Field:
o The <input type="password"> element allows the user to input a password, and the
characters will be obscured. It is also marked as required.
3. Email Field:
o The <input type="email"> element ensures that the input must follow the correct
email format. It is also required.
4. List of Hobbies (Multiple Selection):
o The <select> element with the multiple attribute allows the user to select more than
one option for hobbies. The size="4" attribute makes the dropdown list display up to 4
options at a time.
5. Radio Buttons for Gender:
o The <input type="radio"> elements allow the user to choose their gender (Male,
Female, or Other). Only one option can be selected at a time, and each radio button has
the same name ("gender") to group them together.
6. Checkboxes for Interests:
o The <input type="checkbox"> elements allow the user to select multiple interests
from the options provided (Coding, Gaming, Fitness, Music). The name="interests[]" is
used to store multiple selected values in an array.
7. Submit Button:
o The <input type="submit"> element creates a button that submits the form data to
the server.

How the form works:

 When the user fills out the form and clicks the "Submit" button, the form data will be sent to the
server (in this case, to the action URL "#", which means the form data is not actually sent
anywhere).
 The required attribute ensures that the user cannot submit the form without filling out the
required fields.
 The multiple attribute for the hobbies field and [] in the checkbox name attribute allows
multiple selections.
Customizations:

 The action attribute of the <form> tag should be updated with a URL to which the form data
should be sent.
 The method="POST" ensures that form data is sent securely.

This form can be further enhanced by adding CSS for styling and JavaScript for form validation if
needed.
Qns No.3
Program Statement: Create an HTML List with nested items with
the following structure:-
Beverages:-
 Coffee
 Tea
Black Tea
Green Tea
 Milk

Ans:-
To create an HTML list with nested items based on the structure you provided (Beverages with
Coffee, Tea, Milk, and nested Tea types like Black Tea and Green Tea), you can use an unordered
list (<ul>) with nested <ul> tags for the sub-items.

Here is the HTML code to create the required list:

HTML (index.html):
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nested HTML List</title>
</head>
<body>

<h2>Beverages</h2>

<ul>
<!-- Coffee -->
<li>Coffee</li>

<!-- Tea with nested items -->


<li>Tea
<ul>
<!-- Nested items for Tea -->
<li>Black Tea</li>
<li>Green Tea</li>
</ul>
</li>
<!-- Milk -->
<li>Milk</li>
</ul>

</body>
</html>

Explanation:

1. Unordered List (<ul>):


o The <ul> tag is used to create an unordered (bulleted) list.
2. List Items (<li>):
o Each list item is represented by the <li> tag. For example, "Coffee", "Tea", and "Milk" are
the top-level items, while "Black Tea" and "Green Tea" are nested inside the "Tea" list item.
3. Nested Unordered List:
o The nested unordered list for "Tea" is created by adding another <ul> inside the <li> tag
for "Tea". This creates a sublist for the nested items (Black Tea and Green Tea).

Output Structure:

 Beverages
o Coffee
o Tea
 Black Tea
 Green Tea
o Milk

This will display a bulleted list with the nested structure for Tea.

Customization:

 You can further style this list using CSS to customize the appearance (e.g., changing bullet styles,
adding indentation, etc.).
 If you'd like to use numbered lists instead of bulleted ones, you can replace <ul> with <ol>
(ordered list).
Qns No.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.

Ans:-
Here's the complete HTML and CSS code:

HTML (index.html):
html
Copy code
<!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="styles.css">
</head>
<body>

<!-- College Name -->


<h1 class="college-name">My College</h1>

<!-- College Address -->


<p class="college-address">123 College Street, College Town, Education City,
Country</p>

<!-- List of Courses Offered -->


<h2>Courses Offered</h2>
<ul class="course-list">
<li class="course-item course1">Computer Science</li>
<li class="course-item course2">Business Administration</li>
<li class="course-item course3">Mechanical Engineering</li>
<li class="course-item course4">Electrical Engineering</li>
<li class="course-item course5">Psychology</li>
</ul>

<!-- Scrolling Text -->


<div class="scrolling-text">
<marquee behavior="scroll" direction="left">Welcome to My College -
Empowering the future!</marquee>
</div>

<!-- College Image at the Bottom -->


<div class="college-image">
<img src="https://via.placeholder.com/800x400" alt="College Image" />
</div>

</body>
</html>

CSS (styles.css):
css
Copy code
/* Basic reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* College Name Style */


.college-name {
font-size: 48px;
text-align: center;
color: #2C3E50;
margin-top: 20px;
}

/* College Address Style */


.college-address {
font-size: 16px;
text-align: center;
color: #7F8C8D;
margin-top: 10px;
}

/* Course List Styling */


.course-list {
list-style-type: none;
padding: 0;
text-align: center;
margin-top: 30px;
}

.course-item {
font-size: 20px;
padding: 10px;
margin: 5px;
}

.course1 {
color: #3498DB; /* Blue */
font-style: italic;
}

.course2 {
color: #E74C3C; /* Red */
font-weight: bold;
}

.course3 {
color: #2ECC71; /* Green */
text-decoration: underline;
}

.course4 {
color: #F39C12; /* Orange */
text-transform: uppercase;
}

.course5 {
color: #9B59B6; /* Purple */
font-size: 22px;
}

/* Scrolling Text Styling */


.scrolling-text {
margin-top: 20px;
text-align: center;
}

marquee {
font-size: 20px;
color: #16A085;
}

/* College Image Styling */


.college-image {
text-align: center;
margin-top: 40px;
}

.college-image img {
width: 80%;
max-width: 800px;
height: auto;
border: 5px solid #34495E;
}

Explanation:

1. Title of the Page:


o The <title> tag in the <head> section sets the title of the page as "My College".

2. College Name:
o The <h1> tag with the class college-name is used to display the college name in large
text at the top of the page. The text is styled with a large font size and centered.

3. College Address:
o The address is placed inside a <p> tag with the class college-address. It's styled with a
smaller font size and a gray color, centered on the page.

4. List of Courses:
o The list of courses is created with an unordered list (<ul>). Each course item is a list item
(<li>) with its own class. Each course is styled differently using CSS, with colors, font
styles, and text decorations applied.

5. Scrolling Text:
o The scrolling text is implemented using the <marquee> tag, which scrolls the message
from right to left. The text is styled with a larger font size and a custom color.

6. College Image at the Bottom:


o The image is placed inside a <div> with the class college-image. The image is
responsive, with a maximum width of 800px, and is centered on the page. A border is
added for styling.

How to use:
 Courses List: Each course has different styles applied. For example, "Computer Science" is blue and
italicized, "Business Administration" is red and bold, and so on.
 Scrolling Text: The <marquee> tag is used for scrolling text, and you can modify the message inside
it to reflect your own message.
 College Image: The src attribute of the <img> tag is set to a placeholder image URL. Replace this
with the actual URL of your college image.

Qns No.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.

Ans:-
Here's the complete HTML and CSS code:

HTML (index.html):
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Table</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h2>City Population Table</h2>

<!-- Table for City, Country, Population -->


<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>37,833,000</td>
</tr>
<tr>
<td>Paris</td>
<td>France</td>
<td>2,165,000</td>
</tr>
<tr>
<td>London</td>
<td>United Kingdom</td>
<td>8,982,000</td>
</tr>
<tr>
<td>Sydney</td>
<td>Australia</td>
<td>5,312,000</td>
</tr>
</tbody>
</table>

</body>
</html>

CSS (styles.css):
css
Copy code
/* Reset default margins and padding */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Basic styling for the page */


body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px;
color: #333;
}

/* Table styling */
table {
width: 80%;
margin: 20px auto;
border-collapse: collapse; /* Merge table borders */
}

/* Table header styling */


th {
background-color: #4CAF50; /* Green background */
color: white; /* White text */
padding: 12px;
text-align: left;
}

/* Table cell styling */


td {
border: 1px solid #ddd; /* Light gray borders */
padding: 10px;
text-align: left;
}

/* Alternate row colors */


tbody tr:nth-child(odd) {
background-color: #f2f2f2; /* Light gray for odd rows */
}

tbody tr:nth-child(even) {
background-color: #ffffff; /* White for even rows */
}

/* Hover effect for rows */


tbody tr:hover {
background-color: #ddd; /* Darker gray on hover */
}

Explanation:

1. HTML Table Structure:


o The table is created using the <table> element, with three columns: City, Country, and
Population. These columns are defined using <th> in the <thead> section (for the
header).
o The rows of data are added inside the <tbody> section with <tr> tags, each row
containing three <td> elements for the City, Country, and Population.

2. CSS Styling:
o Table Styling: The border-collapse: collapse; property removes the space between
borders, making the table look cleaner.
o Header Styling: The table header (<th>) has a green background (#4CAF50) and white
text. The text is aligned to the left with text-align: left;.
o Table Cell Styling: Each cell (<td>) has a light gray border (border: 1px solid #ddd)
and padding for spacing.
o Alternate Row Colors: The nth-child() selector is used to create alternate row colors:
 Odd rows (nth-child(odd)) have a light gray background (#f2f2f2).
 Even rows (nth-child(even)) have a white background.
o Hover Effect: When a user hovers over a row, the background color changes to a darker
gray (#ddd) for better user interaction.

How it works:

 The table will display with alternating row colors for better readability.
 The header will have a distinct background color to separate it from the data.
 When you hover over a row, its background color will change slightly to indicate focus.

Customization:

 You can easily adjust the colors, padding, and font styles by modifying the CSS properties.
 The table width is set to 80% of the page width, but you can adjust this if needed to fit your layout
better.

You might also like