Scribd
Upload
420 views15 pages

Web Technologies Lab Manual

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
420 views15 pages

Web Technologies Lab Manual

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

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 [Link] 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="[Link]" 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="[Link]@[Link]">[Link]@[Link]</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="[Link]">[Link]</option>
<option value="[Link]">[Link]</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="[Link]" 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


[Link]
<html>
<FRAMESET Cols = "40%,*">
<Frame Src="[Link]" >
<FRAMESET rows="60%,*">
<Frame Src="[Link]" >
<Frame src="[Link]"
</FRAMESET>
</FRAMESET>
</html>
[Link]
<html>
<body style="background-color:pink">
<h1>Contents</h1>
<ul>
<li>Chapter1 </li>
<li>Chapter2 </li>
<li>Chapter3 </li>
<li>Chapter4 </li>
</body>
</html>

[Link]
<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>
[Link]
<html>
<body style="background-color:grey">
<h3>For More info visit</h3>
<a href =”[Link]”>[Link]</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.

[Link]
<html>
<head>
<title>Two Frames Web Page</title>
</head>
<frameset rows="50%, 50%">
<frame src="[Link]" name="frame1" scrolling="no">
<frame src="[Link]" name="frame2" scrolling="no">
</frameset>
</html>
[Link]
<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>
[Link]
<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="[Link]" 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: [Link]@[Link]</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="[Link]">
</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 [Link]

.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

Common questions

Powered by AI

A student registration form should include all relevant input fields like text inputs for names, radio buttons for gender, text areas for address, and drop-downs for course selection. Ensure 'required' fields are marked in HTML to enforce validation, use 'input' attributes responsibly to facilitate browser autofill and screen reader accessibility, and provide consistent labeling .

Challenges in styling an inline ID card with CSS include maintaining responsive design and ensuring consistent appearance across different devices. Best practices include using relative units for dimensions, ensuring inclusive alt text for images, and applying CSS properties for font size and color that enhance readability .

Servlets operate on the server side, handling requests and returning responses efficiently by maintaining the state over multiple requests and reducing response time. Understanding servlets can optimize web application performance by enabling complex processing, such as database access and business logic execution, directly on the server .

A college timetable can be constructed using HTML <table> elements. Each day is a <tr> (row), and each time slot is a <td> (cell) within the row. For example, organize time slots horizontally, label each slot, and use CSS with attributes like 'border', 'align', and 'background-color' to ensure clarity and accessibility .

Email validation in JavaScript involves using regular expressions to check the input's syntax against patterns that define valid email formats. The significance lies in preventing malformed input from reaching the server, thus enhancing data quality, user experience by providing immediate feedback, and security by mitigating some forms of injection attacks .

JavaScript's role in handling HTML events involves listening to user interactions like clicks and key presses to trigger functions, such as arithmetic calculations. JavaScript interacts with the DOM, allowing dynamic updates to webpage content without needing to reload the page, thus providing a smoother user experience .

To design a comprehensive college web page, essential elements include: the college name and logo, department list with hyperlinks, provided facilities list, and contact information—utilizing HTML tags like <header>, <ul>, <li>, <a>, and CSS for styling. An example HTML design includes a sidebar with a department list and sections for facilities and contact details, as illustrated in the manual .

CSS enhances HTML frames by providing styling options for consistency in background colors and layout within framed content. Frames allow for the division of a webpage into segments, which can help in organizing content separately, for instance, separating navigation and content areas. However, frames may introduce accessibility issues and are less responsive, which CSS can address by tailoring frame contents .

Incorporating multimedia elements such as audio and video enhances user engagement by providing interactive and dynamic content. HTML supports multimedia through <audio> and <video> tags with attributes like 'controls' and 'source', enabling cross-browser media playback with user-friendly controls .

Ensuring cross-browser compatibility with HTML frames involves using valid HTML structures, avoiding outdated attributes, and replacing deprecated elements with modern HTML5 and CSS3 alternatives. Testing across different browsers ensures functionality and appearance are consistent, while using external CSS can enhance frame layout adaptations .

You might also like