Scribd
Upload
11 views8 pages

First 3 Web Lab Set

The document contains HTML code for three web pages: a college homepage featuring the college name, logo, and a list of departments; a class timetable displaying daily subjects; and a student registration form for college admissions. Each section is structured using appropriate HTML elements such as headings, lists, tables, and forms. The code includes styling for better presentation and user experience.

Uploaded by

Tharun Tharun
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views8 pages

First 3 Web Lab Set

The document contains HTML code for three web pages: a college homepage featuring the college name, logo, and a list of departments; a class timetable displaying daily subjects; and a student registration form for college admissions. Each section is structured using appropriate HTML elements such as headings, lists, tables, and forms. The code includes styling for better presentation and user experience.

Uploaded by

Tharun Tharun
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

1 Design web Pages for your college contining college name and Logo,

department list using href ,list tags.

<!DOCTYPE html>

<html>

<head>

<title>My College</title>

</head>

<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">

<!-- College Name and Logo -->

<h1>My College Name</h1>

<img src="college-logo.png" alt="College Logo" width="150" height="150"><br><br>

<!-- Department List -->

<h2>Departments</h2>

<ul style="list-style-type: none; padding: 0;">

<li><a href="cse.html">Computer Science and Engineering</a></li>

<li><a href="ece.html">Electronics and Communication Engineering</a></li>

<li><a href="mech.html">Mechanical Engineering</a></li>

<li><a href="civil.html">Civil Engineering</a></li>

<li><a href="eee.html">Electrical and Electronics Engineering</a></li>

</ul>

</body>

</html>

2 Create a Class time table using table tag


<!DOCTYPE html>
<html>

<head>

<title>Class Timetable</title>

<style>

table {

width: 80%;

border-collapse: collapse;

margin: 20px auto;

th, td {

border: 1px solid #555;

padding: 10px;

text-align: center;

th {

background-color: #4CAF50;

color: white;

td {

background-color: #f9f9f9;

caption {

font-size: 24px;

font-weight: bold;

margin-bottom: 10px;

</style>

</head>

<body>

<table>
<caption>Class Timetable</caption>

<tr>

<th>Day / Time</th>

<th>9:00 - 10:00</th>

<th>10:00 - 11:00</th>

<th>11:00 - 12:00</th>

<th>12:00 - 1:00</th>

<th>1:00 - 2:00</th>

<th>2:00 - 3:00</th>

<th>3:00 - 4:00</th>

</tr>

<tr>

<td>Monday</td>

<td>Math</td>

<td>Physics</td>

<td>English</td>

<td rowspan="5">Lunch Break</td>

<td>Chemistry</td>

<td>Computer</td>

<td>Library</td>

</tr>

<tr>

<td>Tuesday</td>

<td>English</td>

<td>Math</td>

<td>Computer</td>

<td>Physics</td>

<td>Workshop</td>

<td>Games</td>

</tr>

<tr>
<td>Wednesday</td>

<td>Physics</td>

<td>Chemistry</td>

<td>Math</td>

<td>English</td>

<td>Lab</td>

<td>Lab</td>

</tr>

<tr>

<td>Thursday</td>

<td>Computer</td>

<td>Math</td>

<td>English</td>

<td>Physics</td>

<td>Chemistry</td>

<td>Workshop</td>

</tr>

<tr>

<td>Friday</td>

<td>Chemistry</td>

<td>English</td>

<td>Computer</td>

<td>Math</td>

<td>Library</td>

<td>Games</td>

</tr>

</table>

</body>

</html>
3 Write a HTML code to design student registration forms for your College
admissiom
<!DOCTYPE html>

<html>

<head>

<title>College Admission Form</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f2f2f2;

padding: 30px;

h2 {

text-align: center;

form {

background-color: white;

padding: 25px;

max-width: 600px;

margin: auto;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0,0,0,0.2);

label {

display: block;

margin-top: 15px;

input, select, textarea {

width: 100%;

padding: 8px;
margin-top: 5px;

border-radius: 5px;

border: 1px solid #ccc;

.gender-options {

display: flex;

gap: 10px;

margin-top: 5px;

.form-buttons {

text-align: center;

margin-top: 20px;

.form-buttons input {

width: 120px;

margin: 0 10px;

background-color: #4CAF50;

color: white;

border: none;

padding: 10px;

cursor: pointer;

.form-buttons input:hover {

background-color: #45a049;

</style>

</head>

<body>

<h2>Student Registration Form</h2>


<form action="#" method="post" enctype="multipart/form-data">

<label for="name">Full Name:</label>

<input type="text" id="name" name="name" required>

<label>Gender:</label>

<div class="gender-options">

<label><input type="radio" name="gender" value="Male" required> Male</label>

<label><input type="radio" name="gender" value="Female"> Female</label>

<label><input type="radio" name="gender" value="Other"> Other</label>

</div>

<label for="dob">Date of Birth:</label>

<input type="date" id="dob" name="dob" required>

<label for="email">Email ID:</label>

<input type="email" id="email" name="email" required>

<label for="phone">Phone Number:</label>

<input type="tel" id="phone" name="phone" pattern="[0-9]{10}" required>

<label for="address">Address:</label>

<textarea id="address" name="address" rows="3" required></textarea>

<label for="department">Department:</label>

<select id="department" name="department" required>

<option value="">--Select Department--</option>

<option value="CSE">Computer Science and Engineering</option>

<option value="ECE">Electronics and Communication Engineering</option>

<option value="EEE">Electrical and Electronics Engineering</option>

<option value="MECH">Mechanical Engineering</option>

<option value="CIVIL">Civil Engineering</option>


</select>

<label for="photo">Upload Photo:</label>

<input type="file" id="photo" name="photo" accept="image/*" required>

<div class="form-buttons">

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

<input type="reset" value="Reset">

</div>

</form>

</body>

</html>

You might also like