Web Technology Lab Manual
Web Technology Lab Manual
Table of Contents
Expt. No. Experiment Name Signature
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 Multi-Media 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 JavaScript Program to perform Basic Arithmetic operations.
2 JavaScript Program to implement all string operations.
3 JavaScript Program to Check Prime Number.
4 JavaScript Program to implement Java script Object Concept
5 JavaScript Program to Create Array and insert Data into Array
6 JavaScript Program to Validate an Email Address.
7 Create a form for Student information. Write JavaScript code to find
Total, Average, Result and Grade.
8 Write a program for implementing XML document for Employee Details
PART A
Expt. No. 1.
Design web pages for your college containing college name and Logo, departments list using href, list
tags.
college.html
bsc.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>BSc Department</title>
</head>
<body>
<h1>BSc Department</h1>
<p>The BSc program offers a strong foundation in science and research.</p>
<p>Students can specialize in various scientific fields like Physics, Chemistry, and
Biology.</p>
<a href=" college.html">Back to Home</a>
</body>
</html>
bcom.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>BCom Department</title>
</head>
<body>
Dept. of Computer Science, GFGC Hukkeri 2
Web Technology Lab 2024-25
<h1>BCom Department</h1>
<p>The BCom program focuses on commerce, finance, and business management.</p>
<p>It prepares students for careers in accounting, banking, and corporate sectors.</p>
<a href="college.html">Back to Home</a>
</body>
</html>
ba.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>BA Department</title>
</head>
<body>
<h1>BA Department</h1>
<p>The BA program covers arts, humanities, and social sciences.</p>
<p>It helps students develop critical thinking and analytical skills.</p>
<a href="collge.html">Back to Home</a>
</body>
</html>
Output:
Expt. No. 2.
Create a class timetable using table tag.
classtimetable.html
<td>Friday</td>
<td>Maths 1</td>
<td>Maths 2</td>
<td>Physics 2</td>
<td>Break</td>
<td>Maths Lab</td>
</tr>
</table>
</body>
</html>
Output:
Expt. No. 3.
Write a HTML code to design Student registrations form for your college Admission.
Studentsregpage.html
<label >Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label >Address:</label><br>
<textarea id="address" name="address" rows="4" cols="40" required></textarea><br><br>
<label >Gender:</label>
<input type="radio" id="male" name="gender" value="male" required> Male
<input type="radio" id="female" name="gender" value="female" required> Female
<br> <br>
<label >Hobbies:</label><br>
<input type="checkbox" id="reading" name="hobbies" value="reading"> Reading
<input type="checkbox" id="sports" name="hobbies" value="sports"> Sports
<input type="checkbox" id="music" name="hobbies" value="music"> Music
Expt. No. 4.
Design Web Pages include multi-Media data (Image, Audio, Video, GIFs etc).
<h2>College Image</h2>
<img src="college.jpg" alt="College Image" width="600">
<h2>Promotional Video</h2>
<video width="600" controls>
<source src="video.mp4" type="video/mp4">
</video>
Output:
multimediapage.html
Expt. No. 5.
Create a web page using frame.
frame.html
menu.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html>
<head>
<title>Menu</title>
</head>
<body>
<h2>Departments</h2>
<ul>
<li><a href="content.html#bsc" target="contentFrame">BSc</a></li>
<li><a href="content.html#bcom" target="contentFrame">BCom</a></li>
<li><a href="content.html#ba" target="contentFrame">BA</a></li>
<li><a href="content.html#bba" target="contentFrame">BBA</a></li>
</ul>
</body>
</html>
content.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html>
<head>
<title>Menu</title>
</head>
<body>
<h2>Departments</h2>
<ul>
<li><a href="content.html#bsc" target="contentFrame">BSc</a></li>
<li><a href="content.html#bcom" target="contentFrame">BCom</a></li>
<li><a href="content.html#ba" target="contentFrame">BA</a></li>
<li><a href="content.html#bba" target="contentFrame">BBA</a></li>
</ul>
</body>
</html>
Output:
Dept. of Computer Science, GFGC Hukkeri 10
Web Technology Lab 2024-25
Expt. No. 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.
farme.html
farme1.html
<!DOCTYPE html>
<html>
<head>
<title>Frame 1</title>
</head>
<body style="background-color: lightblue;">
<h2>Frame 1 Content</h2>
</body>
</html>
farme2.html
<!DOCTYPE html>
<html>
<head>
<title>Frame 2</title>
</head>
<body style="background-color: lightgreen;">
<h2>Frame 2 Content</h2>
</body>
</html>
farme3.html
<!DOCTYPE html>
<html>
<head>
Dept. of Computer Science, GFGC Hukkeri 12
Web Technology Lab 2024-25
<title>Frame 3</title>
</head>
<body style="background-color: lightcoral;">
<h2>Frame 3 Content</h2>
</body>
</html>
farme4.html
<!DOCTYPE html>
<html>
<head>
<title>Frame 4</title>
</head>
<body style="background-color: lightgoldenrodyellow;">
<h2>Frame 4 Content</h2>
</body>
</html>
Output:
Expt. No. 7.
Output:
Expt. No. 8.
Using HTML, CSS create display a text called ―Hello India ! on top of an image of India - Map using
an overlay.
<!DOCTYPE html>
<html>
<head>
<title>Text Overlay on India Map</title>
<style>
.container {
position: absolute;
width: 500px;
}
.text {
position: absolute;
top: 30px;
left: 50%;
color: white;
background: rgba(0, 0, 0, 0.5);
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<img src="india-map.jpg" alt="India Map" width="100%">
<h1 class="text">Hello India!</h1>
</div>
</body>
</html>
Output:
PART B
Expt. No. 1.
JavaScript Program to perform Basic Arithmetic operations.
Basicarithmetic.html
<!DOCTYPE html>
<html>
<head>
<title>Arithmetic Operations</title>
<script>
function calculate(operation) {
let num1 = parseFloat(document.getElementById("num1").value);
let num2 = parseFloat(document.getElementById("num2").value);
let result;
switch (operation) {
case 'add': result = num1 + num2; break;
case 'subtract': result = num1 - num2; break;
case 'multiply': result = num1 * num2; break;
case 'divide': result = num2 !== 0 ? num1 / num2 : "Cannot divide by zero"; break;
}
document.getElementById("result").innerText = "Result: " + result;
}
</script>
</head>
<body>
<h2>Basic Arithmetic Operations</h2>
<input type="number" id="num1" placeholder="Enter first number">
<input type="number" id="num2" placeholder="Enter second number">
<br><br>
<button onclick="calculate('add')">Add</button>
<button onclick="calculate('subtract')">Subtract</button>
<button onclick="calculate('multiply')">Multiply</button>
<button onclick="calculate('divide')">Divide</button>
<h3 id="result">Result: </h3>
</body>
</html>
Output:
Expt. No. 2.
JavaScript Program to implement all string operations.
stringoperations.html
<!DOCTYPE html>
<html>
<head>
<title>String Operations</title>
<script>
function performStringOperation(operation) {
let str1 = document.getElementById("str1").value;
let str2 = document.getElementById("str2").value;
let result;
switch (operation) {
case 'concatenate': result = str1 + str2; break;
case 'uppercase': result = str1.toUpperCase(); break;
case 'lowercase': result = str1.toLowerCase(); break;
case 'length': result = "Length of first string: " + str1.length; break;
case 'reverse': result = str1.split('').reverse().join(''); break;
}
document.getElementById("result").innerText = "Result: " + result;
}
</script>
</head>
<body>
<h2>String Operations</h2>
<input type="text" id="str1" placeholder="Enter first string">
<input type="text" id="str2" placeholder="Enter second string (optional)">
<br><br>
<button onclick="performStringOperation('concatenate')">Concatenate</button>
<button onclick="performStringOperation('uppercase')">To Uppercase</button>
<button onclick="performStringOperation('lowercase')">To Lowercase</button>
<button onclick="performStringOperation('length')">String Length</button>
<button onclick="performStringOperation('reverse')">Reverse String</button>
<h3 id="result">Result: </h3>
</body>
</html>
Output:
Expt. No. 3.
JavaScript Program to Check Prime Number.
prime.html
<!DOCTYPE html>
<html>
<head>
<title>Prime Number Check</title>
<script>
function isPrime() {
let num = parseInt(document.getElementById("num").value);
if (num < 2) {
document.getElementById("result").innerText = num + " is not a prime number";
return;
}
for (let i = 2; i <= Math.sqrt(num); i++) {
if (num % i === 0) {
document.getElementById("result").innerText = num + " is not a prime number";
return;
}
}
document.getElementById("result").innerText = num + " is a prime number";
}
</script>
</head>
<body>
<h2>Check Prime Number</h2>
<input type="number" id="num" placeholder="Enter a number">
<button onclick="isPrime()">Check</button>
<h3 id="result">Result: </h3>
</body>
</html>
Output:
Expt. No. 4.
Dept. of Computer Science, GFGC Hukkeri 19
Web Technology Lab 2024-25
object.html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Object Concept</title>
<script>
class Student {
constructor(name, age, course) {
this.name = name;
this.age = age;
this.course = course;
}
getDetails() {
return `Name: ${this.name}, Age: ${this.age}, Course: ${this.course}`;
}
}
function displayStudent() {
let name = document.getElementById("name").value;
let age = document.getElementById("age").value;
let course = document.getElementById("course").value;
Output:
Expt. No. 5.
JavaScript Program to Create Array and insert Data into Array.
array.html
<!DOCTYPE html>
<html>
<head>
<title>Simple Name List</title>
<script>
let names = [];
function addName() {
let name = document.getElementById("name").value;
if (name) {
names.push(name);
document.getElementById("name").value = "";
showNames();
}
}
function showNames() {
let list = "";
for (let i = 0; i < names.length; i++) {
list += (i + 1) + ". " + names[i] + "\n";
}
document.getElementById("output").innerText = “Array is:\n” + list;
}
</script>
</head>
<body>
<h3>Add Name</h3>
<input type="text" id="name">
<button onclick="addName()">Add</button>
<pre id="output">Array is:</pre>
</body>
</html>
Output:
Expt. No. 6.
JavaScript Program to Validate an Email Address.
email.html
<!DOCTYPE html>
<html>
<head>
<title>Email Validation</title>
<script>
function validateEmail() {
let email = document.getElementById("email").value;
let pattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (pattern.test(email)) {
document.getElementById("result").innerText = "Valid Email Address";
} else {
document.getElementById("result").innerText = "Invalid Email Address";
}
}
</script>
</head>
<body>
<h2>Email Validation</h2>
<label>Email:</label>
<input type="text" id="email" placeholder="Enter email">
<br><br>
<button onclick="validateEmail()">Validate</button>
<h3 id="result">Result: </h3>
</body>
</html>
Output:
Expt. No. 7.
Create a form for Student information. Write JavaScript code to find Total, Average, Result and Grade.
student.html
<!DOCTYPE html>
<html>
<head>
<title>Student Information</title>
<script>
function calculateResults() {
let name = document.getElementById("name").value;
let rollNo = document.getElementById("rollNo").value;
let marks = [];
let total = 0;
<br>
<label>Subject 3 Marks:</label>
<input type="number" id="subject3" placeholder="Enter Marks">
<br><br>
<button onclick="calculateResults()">Calculate</button>
<h3 id="total">Total: </h3>
<h3 id="average">Average: </h3>
<h3 id="grade">Grade: </h3>
<h3 id="result">Result: </h3>
</body>
</html>
Output:
Expt. No. 8.
Write a program for implementing XML document for Employee Details.
employee.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE employees SYSTEM "employees.dtd">
<employees>
<employee>
<id>101</id>
<name>John Doe</name>
<department>IT</department>
<designation>Software Engineer</designation>
<salary>60000</salary>
</employee>
<employee>
<id>102</id>
<name>Jane Smith</name>
<department>HR</department>
<designation>HR Manager</designation>
<salary>75000</salary>
</employee>
<employee>
<id>103</id>
<name>Mike Johnson</name>
<department>Finance</department>
<designation>Accountant</designation>
<salary>50000</salary>
</employee>
</employees>
Output: