WEB TECHNOLOGIES LAB MANUAL
Web Technologies Lab
Part A
1. Design web pages for your college containing college name and Logo, departments list using
href, list tags.
2. Create a class timetable using table tag.
3. Write a HTML code to design Student registrations form for your college Admission
4. Design Web Pages with includes Multimedia data (Image, Audio, Video, GIFs etc)
5. Create a web page using frame.
6. Write code in HTML to develop a webpage having two frames that divide the webpage into
two equal rows and then divide the row into equal columns fill each frame with a different
background color.
7. Write CSS code to Use Inline CSS to format your ID Card.
8. Using HTML, CSS create display a text called ―Hello India! ‖ On top of an image of
India- Map using an overlay.
Part B
1. Write a JavaScript Program to perform Basic Arithmetic operations
2. JavaScript Program to Check Prime Number
3. JavaScript Program to implement JavaScript Object Concept
4. JavaScript Program to Create Array and inserting Data into Array
5. JavaScript Program to Validate an Email Address
6. Write a Program for printing System Date & Time using SERVLET
7. Write a serverside SERVLET program for accept number from HTML file and Display.
8. Write a program to Creating the Life-Cycle Servlet Application
Steps
Start the program.
Go to the start menu and select accessories for notepad.
Type the source code in notepad and save it in the form of filename.html format
To run the program, we must follow the following steps
Open Browser then the webpage will be displayed.
DEPT OF BCA Page 1
WEB TECHNOLOGIES LAB MANUAL
PART - A
1. Design web pages for your college containing college name and Logo, departments list using
href, list tags.
<html>
<head>
<title>College Website</title>
</head>
<style>
body {
font-size:25px;
margin: 0;
padding: 0;
background-color:skyblue;
}
header {
background-color:grey;
color: White;
padding: 10px;
text-align: center;
}
</style>
<body>
<header>
<h1><marquee>BGS FIRST GRADE COLLEGE</marquee></h1>
<img src="logo.jpg" width="100" height="100">
</header>
<h2>Departments</h2>
<ul>
<li><a href="#department1">BCA</a></li>
<li><a href="#department2">BCOM</a></li>
<li><a href="#department3">BSC</a></li>
</ul>
<h3>Provided Facilites</h3>
<ul>
<li>Hostel</li>
<li>Library</li>
<li>Transport Facility</li>
</ul>
DEPT OF BCA Page 2
WEB TECHNOLOGIES LAB MANUAL
Phone:<a href="09831264444">09831264444</a>
</body>
</html>
OUTPUT
DEPT OF BCA Page 3
WEB TECHNOLOGIES LAB MANUAL
2. Create a class timetable using table tag.
<html>
<head>
<title>time table</title>
</head>
<body bgcolor="skyblue">
<H1><CENTER>COLLEGE TIME TABLE</H1>
<table border="2" cellspacing="3" align="center">
<tr>
<td align="center">
<td>8:30-9:30
<td>9:30-10:30
<td>10:30-11:30
<td>11:30-12:30
<td>12:30-2:00
<td>2:00-3:00
<td>3:00-4:00
</tr>
<tr>
<td align="center">MONDAY
<td align="center">English
<td align="center">Lab
<td align="center">Maths
<td rowspan="6"align="center">L<br>U<br>N<br>C<br>H
<td align="center">Physics
<td align="center">CS
<td align="center">---
</tr>
<tr>
<td align="center">TUESDAY
<td align="center">Physics
<td align="center">Maths
<td align="center">English
<td align="center">---
<td align="center">Kannada
<td align="center">CS
</tr>
<tr>
<td align="center">WEDNESDAY
<td align="center">CS
<td align="center">Maths
DEPT OF BCA Page 4
WEB TECHNOLOGIES LAB MANUAL
<td align="center">Kannada
<td align="center">English
<td align="center">Physics
<td align="center">Sports
</tr>
<tr>
<td align="center">THURSDAY
<td align="center">Lab
<td align="center">CS
<td align="center">Maths
<td align="center">English
<td align="center">Lab
<td align="center">Library
<tr>
<td align="center">FRIDAY
<td align="center">English
<td align="center">kannada
<td align="center">CS
<td align="center">Lab
<td align="center">Maths
<td align="center">Sports
</tr>
<tr>
<td align="center">SATURDAY
<td colspan="4" align="center">Seminar
<td align="center">-----
<td align="center">----
</tr>
</body>
</html>
OUTPUT
DEPT OF BCA Page 5
WEB TECHNOLOGIES LAB MANUAL
3. Write a HTML code to design Student registrations form for your college Admission
<html>
<head>
<title> Student Registration Form</title>
<head>
<body style="background-color:skyblue">
<h3> STUDENT REGISTRATION FORM</h3>
<form>
<div>
Firstname: <input type="text" name="firstname" required size="15"/><br> <br>
Lastname: <input type="text" name="lastname" required size="15"/><br>
<br>
Gender:
<input type="radio" name="gender" value="Male" require/> Male
<input type="radio" name="gender" value="Female" required/> Female
<br> <br>
Address:
<br>
<textarea rows="4" cols="30" name="comment" required>
</textarea>
<br> <br>
Select Course:
<select name="Course" id="Course" required>
<option value=" ">None</option>
<option value="BCA">BCA</option>
<option value="B.com">B.Com</option>
<option value="B.Sc">B.Sc</option>
</select>
<br>
<button type="submit" VALUE="SUBMIT"> SUBMIT </button>
</form>
</body>
</html>
DEPT OF BCA Page 6
WEB TECHNOLOGIES LAB MANUAL
OUTPUT
DEPT OF BCA Page 7
WEB TECHNOLOGIES LAB MANUAL
4. Design Web Pages with includes Multimedia data (Image, Audio, Video, GIFs etc)
<html>
<head>
<title> Display Multimedia </title>
</head>
<body>
<video width="400" controls>
<source src="video.mp4" type="video/mp4">
</video>
<br> <br>
<audio controls>
<source src=”audio.mp4" type="audio/mp4">
</audio>
<br> <br>
<image control>
<img src="image.jpg" width="300" height="300">
</image control>
</body>
</html>
OUTPUT
DEPT OF BCA Page 8
WEB TECHNOLOGIES LAB MANUAL
5. Create a web page using frame
frame.html
<html>
<FRAMESET Cols = "40%,*">
<Frame Src="left.html" >
<FRAMESET rows="60%,*">
<Frame Src="right.html" >
<Frame src="bottom.html"
</FRAMESET>
</FRAMESET>
</html>
left.html
<html>
<body style="background-color:pink">
<h1>Contents</h1>
<ul>
<li>Chapter1 </li>
<li>Chapter2 </li>
<li>Chapter3 </li>
<li>Chapter4 </li>
</body>
</html>
right.html
<html>
<body style="background-color:grey">
<p><marquee>Web technology refers to the means by which computers communicate with each other
using markup languages and multimedia packages.</marquee> </p>
</body>
</html>
bottom.html
<html>
<body style="background-color:grey">
<h3>For More info visit</h3>
<a href =”www.example.com”>www.example.com</a>
</body>
</html>
DEPT OF BCA Page 9
WEB TECHNOLOGIES LAB MANUAL
OUTPUT
DEPT OF BCA Page 10
WEB TECHNOLOGIES LAB MANUAL
6. Write code in HTML to develop a webpage having two frames that divide the webpage into
two equal rows and then divide the row into equal columns fill each frame with a different
background color.
frame.html
<html>
<head>
<title>Two Frames Web Page</title>
</head>
<frameset rows="50%, 50%">
<frame src="frame1.html" name="frame1" scrolling="no">
<frame src="frame2.html" name="frame2" scrolling="no">
</frameset>
</html>
frame1.html
<html>
<head>
<title>Frame 1</title>
</head>
<body>
<div style="width: 50%; height: 100%; float: left; background-color: lightblue;">
<h1>Frame 1 Column 1</h1>
</div>
<div style="width: 50%; height: 100%; float: left; background-color: lightgreen;">
<h1>Frame 1 Column 2</h1>
</div>
</body>
</html>
frame2.html
<html>
<head>
<title>Frame 2</title>
</head>
<body>
<div style="width: 50%; height: 100%; float: left; background-color: lightcoral;">
<h1>Frame 2 Column 1</h1>
</div>
<div style="width: 50%; height: 100%; float: left; background-color: lightsalmon;">
<h1>Frame 2 Column 2</h1>
</div>
</body>
</html>
DEPT OF BCA Page 11
WEB TECHNOLOGIES LAB MANUAL
OUTPUT
DEPT OF BCA Page 12
WEB TECHNOLOGIES LAB MANUAL
7. Write CSS code to Use Inline CSS to format your ID Card.
<html>
<head>
<title>ID Card</title>
</head>
<body>
<div id="idCard" style="width: 300px; border: 1px solid #f; padding: 20px; text-align: center;">
<img src="id.jpg" style="width: 100px; height: 100px; border-radius: 50%;">
<h2 style="margin: 10px 0;">Aishwarya</h2>
<p style="font-size: 16px; color: black ;">Course: BSC</p>
<ul style="list-style: none; padding : 0;">
<li style="margin-bottom: 5px;">Address: Mysuru</li>
<li style="margin-bottom: 5px;">Phone: 98xxxxxx23</li>
<li>Email:
[email protected]</li>
</ul>
</div>
</body>
</html>
OUTPUT
DEPT OF BCA Page 13
WEB TECHNOLOGIES LAB MANUAL
8. Using HTML, CSS create display a text called ―Hello India! ‖ On top of an image of
India- Map using an overlay.
<html>
<head>
<title>Image Overlay with Text</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="image-container">
<img src="C:\Users\afree\Pictures\india-6487315_1280.webp" alt="image">
<div class="overlay-text">
Hello India!
</div>
</div>
</body>
</html>
Save the below code as style.css
.image-container {
position:relative;
display: inline-block;
}
.image-container img {
display: block;
width: 100%;
height: 100%;
}
.overlay-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: black;
color: White;
padding: 10px 20px;
font-size: 50px;
text-align: center;
}
DEPT OF BCA Page 14
WEB TECHNOLOGIES LAB MANUAL
OUTPUT
DEPT OF BCA Page 15
