KEMBAR78
Web Lab Manual Part A | PDF | World Wide Web | Internet & Web
Scribd
Upload
81 views18 pages

Web Lab Manual Part A

The document is a lab manual for web technologies, detailing various tasks and coding exercises related to HTML, CSS, and JavaScript. It includes instructions for designing web pages, creating forms, implementing multimedia, and writing JavaScript programs. Each section provides sample code and expected outputs for practical application in web development.

Uploaded by

angelsonu2026
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
81 views18 pages

Web Lab Manual Part A

The document is a lab manual for web technologies, detailing various tasks and coding exercises related to HTML, CSS, and JavaScript. It includes instructions for designing web pages, creating forms, implementing multimedia, and writing JavaScript programs. Each section provides sample code and expected outputs for practical application in web development.

Uploaded by

angelsonu2026
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/ 18

WEB TECHNOLOGIES LAB MANUAL

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 server side SERVLET program for accept number from HTML file
and Display.
8. Write a program to Creating the Life-Cycle Servlet Application

DEPT OF BCA Page 1


WEB TECHNOLOGIES LAB MANUAL

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>GOVT FIRST GRADE WOMEN'S COLLEGE HASSAN</h1>
<img src="C:\Users\veere\OneDrive\Pictures\Saved Pictures\logo.jpg"
width="100" height="100">
</header>
<h3><a href="course.html">Departments</a></h3>
<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

<h3>contact details</h3>
Reach us at:<a href="Email">GFGCW.off@gmail.com</a><br>
Contact number:<a href="contact number">9100365659</a>
</body>
</html>

(save another file with course.html)


<html>
<body>
<header><h2>Departments<h2></header>
BA<br>BCom<br>BSc<br>BCA<br>
BBA
</body>
</html>

DEPT OF BCA Page 3


WEB TECHNOLOGIES LAB MANUAL

OUTPUT:

DEPT OF BCA Page 4


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
DEPT OF BCA Page 5
WEB TECHNOLOGIES LAB MANUAL

<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
<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
DEPT OF BCA Page 6
WEB TECHNOLOGIES LAB MANUAL

<td align="center">-----
<td align="center">----
</tr>
</body>
</html>

OUTPUT:

DEPT OF BCA Page 7


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" required>
<option value=" ">None</option>
<option value="BCA">BCA</option>
<option value="BCom">BCom</option>
<option value="BSc">BSc</option>
</select>
<br><br>
<button type="reset">RESET</button>
DEPT OF BCA Page 8
WEB TECHNOLOGIES LAB MANUAL

<button type="submit" > SUBMIT </button>


</form>
</body>
</html>

OUTPUT:

DEPT OF BCA Page 9


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.mp3" type="audio/mp3">
</audio>
<br> <br>
<image control>
<img src="C:\Users\veere\OneDrive\Pictures\Saved Pictures\cat.jpg"
width="300" height="300">
</image control>
</body>
</html>

DEPT OF BCA Page 10


WEB TECHNOLOGIES LAB MANUAL

OUTPUT:

DEPT OF BCA Page 11


WEB TECHNOLOGIES LAB MANUAL

5. Create a web page using frame


<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>
DEPT OF BCA Page 12
WEB TECHNOLOGIES LAB MANUAL

<a href =”www.example.com”>www.example.com</a>


</body>
</html>

OUTPUT:

DEPT OF BCA Page 13


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.
<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>
DEPT OF BCA Page 14
WEB TECHNOLOGIES LAB MANUAL

</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>

OUTPUT:

DEPT OF BCA Page 15


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="C:\Users\veere\OneDrive\Pictures\Saved Pictures\photo.webp"
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: Mysur</li>
<li style="margin-bottom: 5px;">Phone: 98xxxxxx23</li>
<li>Email: your.email@example.com</li>
</ul>
</div>
</body>
</html>

OUTPUT:

DEPT OF BCA Page 16


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\veere\OneDrive\Pictures\Saved Pictures\india.png"
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%);
DEPT OF BCA Page 17
WEB TECHNOLOGIES LAB MANUAL

background-color: black;
color: White;
padding: 10px 20px;
font-size: 50px;
text-align: center;
}

OUTPUT:

DEPT OF BCA Page 18

You might also like