Scribd
Upload
481 views

Web Manual (NEP) Part A

Uploaded by

Nishath Ashraf
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
481 views

Web Manual (NEP) Part A

Uploaded by

Nishath Ashraf
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/ 15

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>

Reach us at:<a href="[email protected]">[email protected]</a><br>

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

You might also like