Scribd
Upload
51 views

WEB TECH-LAB MANUAL

The document is a lab manual for Web Technologies, divided into two parts. Part A covers HTML and CSS tasks such as designing web pages, creating forms, and incorporating multimedia, while Part B focuses on JavaScript programming tasks including arithmetic operations, prime number checking, and email validation. Each task includes example code and instructions for implementation.

Uploaded by

mohanreddy5772
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
51 views

WEB TECH-LAB MANUAL

The document is a lab manual for Web Technologies, divided into two parts. Part A covers HTML and CSS tasks such as designing web pages, creating forms, and incorporating multimedia, while Part B focuses on JavaScript programming tasks including arithmetic operations, prime number checking, and email validation. Each task includes example code and instructions for implementation.

Uploaded by

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

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.

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>JSS COLLEGE FOR WOMEN CHAMARAJANAGAR </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>

Page 2
WEB TECHNOLOGIES LAB MANUAL

Phone:<a href="09831264444">09831264444</a>
</body>
</html>

OUTPUT

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

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>

Page 6
WEB TECHNOLOGIES LAB MANUAL
OUTPUT

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

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>

Page 9
WEB TECHNOLOGIES LAB MANUAL

OUTPUT

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>

Page 11
WEB TECHNOLOGIES LAB MANUAL

OUTPUT

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

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;
}

Page 14
WEB TECHNOLOGIES LAB MANUAL
OUTPUT

Page 15
PART-B

1. Write a JavaScript Program to perform Basic Arithmetic operation

<html>
<head>
<title>Arithmetic operators in Javascript</title></head> <body>
<script type="text/javascript">
var a=parseInt(prompt("enter first number"));
var b=parseInt(prompt("enter second number"));
var sum;
var difference;
var product;
var quotient;
sum=a+b;
difference=a-b;
product=a*b;
quotient=a/b;
document.write("Sum= ");
document.write(sum);
document.write("<br>");
document.write("Difference =");
document.write(difference);
document.write("<br>");
document.write("Product=");
document.write(product);
document.write("<br>");
document.write("Quotient=");
document.write(quotient);
</script>
</body>
</html>
2. JavaScript Program to Check Prime Number

<html>
<head>
<script>
function Prime()
{
var i,flag=0,number;
for(i=2; i <= number/2; i++)
{
if(number%i == 0)
{
flag = 1;
break;
}
}
if(flag == 0)
{
window.alert("prime number");
}
else
{
window.alert("not a Prime number");
}
}
</script>
</head>
<body>
<br>
Enter Number :<input type="text" name="n" id = "N"/>
<button onClick="Prime()">submit</button>
</body>
</html>
3. JavaScript Program to implement JavaScript Object Concept

<html>
<body>

<script>
// JavaScript code to implement the object concept
document.addEventListener("DOMContentLoaded", function () {
// Define an object
var person = {
firstName: "John",
lastName: "Doe",
age: 30,

greet: function () {
return "Hello, I'm " + this.firstName + " " + this.lastName + ".";
}
};

// Display object properties in the HTML document


var outputElement = document.getElementById("output");
outputElement.innerHTML = "<p>First Name: " + person.firstName + "</p>" +
"<p>Last Name: " + person.lastName + "</p>" +
"<p>Age: " + person.age + "</p>" +
"<p>Greeting: " + person.greet() + "</p>";
});
</script>

<div id="output"></div>

</body>
</html>
4. JavaScript Program to Create Array and inserting Data into Array

<html >
<body>
<script>
var myArray = [];

myArray.push("apple");
myArray.push("grapes");
myArray.push("cherry");
myArray.push("guava");
myArray.push("mango");

document.write("<p>Array Contents: " + myArray.join(', ') + "</p>");


</script>

</body>
</html>
5. JavaScript Program to Validate an Email Address

<html>
<body>
<script>

function validateEmail() {
var emailInput = document.getElementById("email");
var resultElement = document.getElementById("validationResult");

if (emailInput.checkValidity()) {
resultElement.textContent = "Email is valid!";
resultElement.style.color = "green";
}
else
{
resultElement.textContent = "Invalid email address";
resultElement.style.color = "red";
}
}
</script>
Enter your email: <input type="email" id="email" placeholder="Enter your email"
oninput="validateEmail()" required>
<div id="validationResult"></div>

</body>
</html>

You might also like