Web Technology lab Program 1-5
Web Technology lab Program 1-5
1.Design web pages for your college containing college name and Logo, departments list
using href, list tags.
<!DOCTYPE html>
<html>
<head>
</head>
<body bgcolor="silver">
<h2>Department List</h2>
<ul>
<li>Physics</li>
<li>Chemistry</li>
<li>Mathematics</li>
<li>Biology</li>
<li>Computer Science</li>
</ul>
<h2>Steps to Apply for Admission</h2>
<ol>
</ol>
<dl>
<dt>Semester</dt>
<dd>An academic term that divides the year into two parts.</dd>
<dt>Credit Hours</dt>
<dt>GPA</dt>
</dl>
</body>
</html>
2.Create a class timetable using table tag.
<html>
<head>
<title>Class Timetable</title>
<style>
</style>
</head>
<body>
<h2>Class Timetable</h2>
<table>
<tr>
<th>Day</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>3.00-4.00</th>
</tr>
<tr>
<td>Monday</td>
<td>Math</td>
<td>Physics</td>
<td>Chemistry</td>
<td>Lunch</td>
<td>Computer Science</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Physics</td>
<td>Maths</td>
<td>Computer Science</td>
<td>Lunch</td>
<td>Chemistry</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Physics</td>
<td>Chemistry</td>
<td>Computer Science</td>
<td>Lunch</td>
<td>Maths</td>
</tr>
<tr>
<td>Thursday</td>
<td>Maths</td>
<td>Computer Science</td>
<td>Physics</td>
<td>Lunch</td>
<td>Chemistry</td>
</tr>
<tr>
<td>Friday</td>
<td>Chemistry</td>
<td>Computer Science</td>
<td>Maths</td>
<td>Lunch</td>
<td>Physics</td>
</tr>
<tr>
<td>Saturday</td>
<td>Maths</td>
<td>Computer Science</td>
<td>Physics</td>
<td>Lunch</td>
<td>Chemistry</td>
</tr>
</table>
</body>
</html>
3.Write a HTML code to design Student registrations form for your college Admission.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: Lightskyblue;
text-align: center;
#confirmation
font-size: 20px;
font-weight: bold;
color: green;
margin-top: 20px;
</style>
</head>
<body>
<form id="registrationForm">
<fieldset>
<legend><b>Personal Details</b></legend>
<label>Firstname:</label>
<label>Middlename:</label>
<label>Lastname:</label>
<label>Course:</label>
<option value="BCA">BCA</option>
<option value="BSc">B.Sc</option>
<option value="BBA">BBA</option>
<option value="BCom">B.Com</option>
</select><br><br>
<label>Gender:</label><br>
<input type="radio" name="gender" value="Male" required> Male <br>
<label>Phone:</label>
<label>Address:</label><br>
<label>Email:</label>
<label>Password:</label>
<label>Re-type Password:</label>
</fieldset>
</form>
<!-- Confirmation Message -->
<!--<div id="confirmation">
</div>
<script>
document.getElementById("registrationForm").onsubmit = function(event) {
};
</script>
</body>
</html>
4.Design Web Pages with includes Multi-Media data (Image, Audio, Video, GIFs etc).
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Audio Example</h2>
<audio controls>
</audio>
<h2>Video Example</h2>
<video controls>
<source src="C:\Users\vijay\OneDrive\Desktop\file_example_MP4_480_1_5MG.mp4"
type="video/mp4">
</video>
<h2>GIF Example</h2>
</body>
</html>
5.Create a web page using frame.
#main.html
<!DOCTYPE html>
<html>
<head>
</head>
<frame src="program5frame1.html">
<frame src="program5frame2.html">
<frame src="program5frame3.html">
</frameset>
</html>
# program5frame1
<!DOCTYPE html>
<html>
<body bgcolor="red"
<h3>frame 2</h3>
</body>
</html>
# program5frame2
<!DOCTYPE html>
<html>
<body bgcolor="red"
<h3>frame 2</h3>
</body>
</html>
# program5frame3
<!DOCTYPE html>
<html>
<body bgcolor="skyblue"
<h3>frame 3</h3>
</body>
</html>