Class 11: Web Technology Lab
1. Create a simple HTML form to accept user details such as Name, Email, Password, and Gender. Include Submit and Reset buttons.
<!DOCTYPE html>
<html>
<head>
<title>User Details Form</title>
</head>
<body>
<h2>User Details Form</h2>
<form>
Name: <input type="text" name="name"><br><br>
Email: <input type="email" name="email"><br><br>
Password: <input type="password" name="password"><br><br>
Gender:
<input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female
<br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
Output:
User Details Form
Name: [ ]
Email: [ ]
Password: [ ]
Gender: ( ) Male ( ) Female
[Submit] [Reset]
2. Create an HTML form for a feedback page that includes Name, Email, Rating (1-5), and Comments. Include a Submit button.
<!DOCTYPE html>
<html>
<head>
<title>Feedback Form</title>
</head>
<body>
<h2>Feedback Form</h2>
<form>
Name: <input type="text" name="name"><br><br>
Email: <input type="email" name="email"><br><br>
Rating:
<select name="rating">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br><br>
Comments:<br>
<textarea name="comments" rows="5" cols="30"></textarea><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:
Feedback Form
Name: [ ]
Email: [ ]
Rating: [1 v]
Comments:
[ ]
[ ]
[ ]
[ ]
[ ]
[Submit]
3. Create an HTML table to display the details of 5 students with columns: Roll No, Name, Age, and Marks.
<!DOCTYPE html>
<html>
<head>
<title>Student Table</title>
</head>
<body>
<h2>Student Details</h2>
<table border="1" cellpadding="10">
<tr>
<th>Roll No</th>
<th>Name</th>
<th>Age</th>
<th>Marks</th>
</tr>
<tr>
<td>1</td>
<td>Ram</td>
<td>16</td>
<td>85</td>
</tr>
<tr>
<td>2</td>
<td>Sita</td>
<td>17</td>
<td>90</td>
</tr>
<tr>
<td>3</td>
<td>Hari</td>
<td>16</td>
<td>78</td>
</tr>
<tr>
<td>4</td>
<td>Gita</td>
<td>17</td>
<td>88</td>
</tr>
<tr>
<td>5</td>
<td>Shyam</td>
<td>16</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Output:
Student Details
+---------+-------+-----+-------+
| Roll No | Name | Age | Marks |
+---------+-------+-----+-------+
| 1 | Ram | 16 | 85 |
| 2 | Sita | 17 | 90 |
| 3 | Hari | 16 | 78 |
| 4 | Gita | 17 | 88 |
| 5 | Shyam | 16 | 80 |
+---------+-------+-----+-------+
4. Create a webpage that displays an ordered list of your 5 favorite subjects and an unordered list of your 5 favorite hobbies.
<!DOCTYPE html>
<html>
<head>
<title>Subjects and Hobbies</title>
</head>
<body>
<h2>My Favorite Subjects</h2>
<ol>
<li>Computer Science</li>
<li>Mathematics</li>
<li>English</li>
<li>Science</li>
<li>Social Studies</li>
</ol>
<h2>My Favorite Hobbies</h2>
<ul>
<li>Reading</li>
<li>Coding</li>
<li>Traveling</li>
<li>Listening to Music</li>
<li>Playing Football</li>
</ul>
</body>
</html>
Output:
My Favorite Subjects
1. Computer Science
2. Mathematics
3. English
4. Science
5. Social Studies
My Favorite Hobbies
• Reading
• Coding
• Traveling
• Listening to Music
• Playing Football
5. Create a webpage and apply basic CSS to change the background color, text color, and font size of a heading and paragraph.
<!DOCTYPE html>
<html>
<head>
<title>Basic CSS Example</title>
<style>
body {
background-color: lightyellow;
}
h1 {
color: blue;
font-size: 36px;
}
p {
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is a paragraph with basic CSS styling.</p>
</body>
</html>
Output:
(Background color of full page: light yellow)
WELCOME TO MY WEBPAGE ← blue color, larger size
This is a paragraph with basic CSS styling.
↑ green color, medium size
6. Create a webpage with multiple paragraphs and apply CSS to set different text alignments (left, center, right) for each paragraph.
<!DOCTYPE html>
<html>
<head>
<title>Text Alignment Example</title>
<style>
.left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
</style>
</head>
<body>
<p class="left">This paragraph is aligned to the left.</p>
<p class="center">This paragraph is aligned to the center.</p>
<p class="right">This paragraph is aligned to the right.</p>
</body>
</html>
Output:
This paragraph is aligned to the left.
This paragraph is aligned to the center.
This paragraph is aligned to the right.
7. Create a webpage with links, images, and a navigation menu. Style the links with different colors for normal, hover, and visited states using CSS.
<!DOCTYPE html>
<html>
<head>
<title>Links, Images and Navigation Menu</title>
<style>
nav a {
text-decoration: none;
margin-right: 15px;
}
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: red;
}
</style>
</head>
<body>
<h2>Navigation Menu</h2>
<nav>
<a href="home.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
<h2>Useful Link</h2>
<a href="https://www.google.com">Visit Google</a>
<h2>Image</h2>
<img src="https://via.placeholder.com/200" alt="Sample Image">
</body>
</html>
Output:
Navigation Menu
Home About Contact
Useful Link
Visit Google
Image
+----------------------+
| |
| Sample Image |
| |
+----------------------+
Link colors:
- Normal link: blue
- Hover on mouse: red
- Visited link: purple
