0% found this document useful (0 votes)

101 views22 pages

Epcet 21csl481

The document provides instructions for 9 programming exercises involving HTML, CSS, and JavaScript: 1. Write basic HTML code with formatting tags 2. Write HTML code using ordered and unordered lists 3. Write HTML code to create a sample time table 4. Implement HTML code using different CSS selectors 5. Create a registration form using HTML elements 6. Design a basic calculator using JavaScript 7. Use JavaScript to output numbers 0-10 as squares and cubes in an HTML table 8. Use JavaScript to change font size and color of text 9. Develop an HTML5 file using JavaScript functions to analyze strings and numbers

Uploaded by

Nandish S

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

0% found this document useful (0 votes)

101 views22 pages

Epcet 21csl481

Uploaded by

Nandish S

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

EAST POINT COLLEGE OF ENGINEERING &

TECHNOLOGY

DEPARTMENT OF ARTIFICIAL INTELLIGENCE AND

DATA SCIENCE

LAB MANUAL
WEB TECHNOLOGY LABORATORY
WEB TECHNOLOGY LABORATORY
Subject Code 21CSL481

1. Write a basic HTML code with Bold,title,body,font,break,italics,underlined tags.

2. Write a basic HTML code with ordered and unordered tags.

3. Write a necessary HTML code for Time Table. This should look similar to the one below

4. Implement a simple HTML code with the use of different CSS selectors.
5. Create a Registration form using HTML code. This should look similar to the one below
6. Write a JavaScript to design a simple calculator to perform the following operations:
sum, product, difference and quotient.

7. Write a JavaScript that calculates the squares and cubes of the numbers from 0 to
10and outputs HTML text that displays the resulting values in an HTML table format.

8. Write a JavaScript code that displays text “TEXT-GROWING” with increasing font size in
the interval of 100ms in RED COLOR, when the font size reaches 50pt it displays “TEXT-
SHRINKING” in BLUE color. Then the font size decreases to 5pt.

9. Develop and demonstrate a HTML5 file that includes JavaScript script that uses
functions for the following problems:

a. Parameter: A string

b. Output: The position in the string of the left-most vowel

c. Parameter: A number

d. Output: The number with its digits in the reverse order

Prog1: Basic Html

<html>
<head>
<title>
Welcome to HTML classes
</title>
<body>
<h1> Hello,World!</h1>
<p>This is a paragraph</p>
<p>
<font color="blue">How are you?</font>
</p>
<p>
<b> This is a bold text </b><br>
<i> This is a italic text </i><br>
<u> This is a underlined text </u><br>

</p>
</body>

</head>

</html>

Output

Prog 2:Ordered and Unordered List

<html>
<head>
<title>
Hello,World!
</title>
<body>
<h1>Subjects for fourth semester </h1>
<h2>Mathematics</h2>
<ul>
<li>Statistics</li>
<li>Probability</li>
<li>Integration</li>
</ul>
<h2>Operating Systems</h2>
<ul>
<li>Process</li>
<li>Threads</li>
</ul>
<h2>Other Subjects are</h2>
<ol>
<li>DAA</li>
<li>MCES</li>
<li>UHV</li>
</ol>
<img src="hai.jpg" alt="Rabbit" alt="Hello">

</body>

</head>

</html>

Output
Prog3 : Tables
<!DOCTYPE html>
<html>

<body>
<h1>TIME TABLE</h1>
<table border="5" cellspacing="0" align="center">

<tr>
<td align="center" height="50"
width="100"><br>
<b>Day/Period</b></br>
</td>
<td align="center" height="50"
width="100">
<b>I<br>9:30-10:20</b>
</td>
<td align="center" height="50"
width="100">
<b>II<br>10:20-11:10</b>
</td>
<td align="center" height="50"
width="100">
<b>III<br>11:10-12:00</b>
</td>
<td align="center" height="50"
width="100">
<b>12:00-12:40</b>
</td>
<td align="center" height="50"
width="100">
<b>IV<br>12:40-1:30</b>
</td>
<td align="center" height="50"
width="100">
<b>V<br>1:30-2:20</b>
</td>
<td align="center" height="50"
width="100">
<b>VI<br>2:20-3:10</b>
</td>
<td align="center" height="50"
width="100">
<b>VII<br>3:10-4:00</b>
</td>
</tr>
<tr>
<td align="center" height="50">
<b>Monday</b></td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Mat</td>
<td align="center" height="50">Che</td>
<td rowspan="6" align="center" height="50">
<h2>L<br>U<br>N<br>C<br>H</h2>
</td>
<td colspan="3" align="center"
height="50">LAB</td>
<td align="center" height="50">Phy</td>
</tr>
<tr>
<td align="center" height="50">
<b>Tuesday</b>
</td>
<td colspan="3" align="center"
height="50">LAB
</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Che</td>
<td align="center" height="50">Mat</td>
<td align="center" height="50">SPORTS</td>
</tr>
<tr>
<td align="center" height="50">
<b>Wednesday</b>
</td>
<td align="center" height="50">Mat</td>
<td align="center" height="50">phy</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Che</td>
<td colspan="3" align="center"
height="50">LIBRARY
</td>
</tr>
<tr>
<td align="center" height="50">
<b>Thursday</b>
</td>
<td align="center" height="50">Phy</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Che</td>
<td colspan="3" align="center"
height="50">LAB
</td>
<td align="center" height="50">Mat</td>
</tr>
<tr>
<td align="center" height="50">
<b>Friday</b>
</td>
<td colspan="3" align="center"
height="50">LAB
</td>
<td align="center" height="50">Mat</td>
<td align="center" height="50">Che</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Phy</td>
</tr>
<tr>
<td align="center" height="50">
<b>Saturday</b>
</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Che</td>
<td align="center" height="50">Mat</td>
<td colspan="3" align="center"
height="50">SEMINAR
</td>
<td align="center" height="50">SPORTS</td>
</tr>
</table>
</body>

</html>

Output
Prog 4 :Use of CSS with selectors

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS: Selecting by class</title>
<style>

h2 {
color: rgb(0, 232, 15);
}

#rabbits-info-heading {
background-color: purple;
}

p{
color: rgb(191, 0, 255);
}

#rabbits-song {
background-color: yellow;
}
.hai {
background-color: #34495e;
}

</style>
</head>
<body>

<h1>All about rabbits!</h1>

<h2 id="rabbits-info-heading">Basic info</h2>

<p>Rabbits are little creatures with long ears and puffy tails, and they move
their nose up and down in an adorable way. They eat the most orange vegetables
in <em>our</em> world, and <strong>they reproduce more than any human
<em>ever</em> has</strong>.</p>

<h2>Songs</h2>

<p id="rabbits-song">Little Bunny Foo Foo, <br>

I don't want to see you <br>
scooping up the field mice <br>
and bopping them on the head!</p>

<p class="hai">And down came the Good Fairy <br>

And she said <br>
"Little bunny Foo Foo <br>
I don't like you're attitude <br>
Scooping up the field mice <br>
And bopping 'em on the head" <br>
</p>

<p>I'll give you 3 chances. <br>

Then I'll turn you into a goon! <br>
The next day…</p>

<img src="rabbit.jpg" alt="Rabbit" width="203">

</body>
</html>

Output
Prog 5 : Form Elements

<!doctype html>
<html>
<head>
<title> HTML Form</title>
<style>
th{
font-size:30px;
background-color:#FFA;
color:red;
}
td{
padding: 2px 15px;
background-color:#0CF;
}
*{
font-size:16px;
}
</style>
</head>

<body>
<form>
<table border="3" cellspacing="5px">
<tr> <th colspan="2"> Registration Form </th> </tr>
<tr> <td>Enter Name</td>
<td> <input class="" type="text" /> </td>
</tr>
<tr> <td>Enter Password</td>
<td><input type="password" /></td></tr>
<tr> <td>Enter Address</td>
<td><textarea rows="3"></textarea></td></tr>

<tr> <td>Select Game</td><td>

<input type="checkbox"/>Hockey <br />
<input type="checkbox"/>Football<br />
<input type="checkbox"/>Badminton<br />
<input type="checkbox"/>Cricket<br />
<input type="checkbox"/>volleyball
</td></tr>

<tr> <td>Gender</td><td>
<input type="radio" name ="s1" checked="true" /> Male
<input type="radio" name ="s1"/> Female
</td></tr>

<tr> <td>Select ur age</td><td>

<select class="">
<option>Select </option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>More than 22</option>
</select>
</td></tr>

<tr> <td>Select Photo</td>

Output

Prog 6 Calculator
<html>
<head>
<title>Calculator</title>
<style>
body
{
margin:150px;
}
input{
width:100%;
height:100%;
}
</style>
<script>
function display(x){

document.getElementById("text1").value+=x;
}
function compute(){
var x =
document.getElementById("text1").value;
document.getElementById("text1").value =
eval(x);
}
</script>
</head>
<body>
<center>
<form>
<table border="1" bgcolor="lime">
<tr>
<th colspan=4><h1>Calculator</h1></th>
</tr>
<tr >
<td colspan=4><input type="text"
id="text1" placeholder="0" style="text-align:right;"/></td>

</tr>
<tr>

<td><input type="reset" value="C"

/></td>
<td><input type="button" value="/"
onClick="display(this.value)"/></td>
<td><input type="button" value="*"
onClick="display(this.value)"/></td>
<td><input type="button" value="-"
onClick="display(this.value)"></td>
</tr>
<tr>
<td><input type="button" value="7"
onClick="display(this.value)"></td>
<td><input type="button" value="8"
onClick="display(this.value)"></td>
<td><input type="button" value="9"
onClick="display(this.value)"></td>
<td rowspan=2><input type="button"
value="+" style="height:50px;" onClick="display(this.value)"></td>
</tr>
<tr>
<td><input type="button" value="4"
onClick="display(this.value)"></td>
<td><input type="button" value="5"
onClick="display(this.value)"></td>
<td><input type="button" value="6"
onClick="display(this.value)"></td>
</tr>
<tr>
<td><input type="button" value="1"
onClick="display(this.value)"></td>
<td><input type="button" value="2"
onClick="display(this.value)"></td>
<td><input type="button" value="3"
onClick="display(this.value)"></td>
<td rowspan=2><input type="button"
value="=" style="height:48px;" onClick="compute()" ></td>
</tr>
<tr>
<td colspan=2><input type="button"
value="0" onClick="display(this.value)" style="width:100%"></td>
<td><input type="button" value="."
onClick="display(this.value)"></td>
</tr>
</table>
</form>
</center>
</body>
</html>

Output
Prog 7.Squares and Cubes

<html>

<head>

border: solid black;

width: 33%;

text-align: center;

border-collapse: collapse; background-color:lightblue;

table { margin: auto; }

</style>

document.write( "<table><tr><thcolspan='3'> NUMBERS FROM 0 TO 10 WITH

THEIR SQUARES AND CUBES </th></tr>" );

document.write( "<tr><td>Number</td><td>Square</td><td>Cube</td></tr>"
);

for(var n=0; n<=10; n++)

document.write( "<tr><td>" + n + "</td><td>" + nn + "</td><td>" + nn*n +

"</td></tr>" ) ;

document.write( "</table>" ) ;
</script>

</head>

</html>

Output

Prog8:Text Growing and Shrinking

<html>

<head>

<style>

position: absolute;

top: 50%;
left: 50%;

transform: translate(-50%, -50%);

</style>

</head>

<body>

var var1 = setInterval(inTimer, 1000);

var fs = 5;

var ids = document.getElementById("demo");

function inTimer() {
ids.innerHTML = 'TEXT GROWING'; ids.setAttribute('style', "font-size: " + fs + "px;
color: red"); fs += 5;

if(fs >= 50 ){

clearInterval(var1);

var2 = setInterval(deTimer, 1000);

function deTimer() {

fs -= 5;

ids.innerHTML = 'TEXT SHRINKING'; ids.setAttribute('style', "font-size: " + fs +

"px; color: blue"); if(fs === 5 ){

clearInterval(var2);

}
</script>

</body>

</html>

Output

Prog 9: Javascript Functions

<html>

<body>

var str = prompt("Enter the Input","");

if(!(isNaN(str)))

var num,rev=0,remainder;

num = parseInt(str);
while(num!=0) {

remainder = num%10;

num = parseInt(num/10);

rev = rev * 10 + remainder;

alert("Reverse of "+str+" is "+rev);

else

str = str.toUpperCase();

for(var i = 0; i < str.length; i++) {

var chr = str.charAt(i);

if(chr == 'A' || chr == 'E' || chr == 'I' || chr == 'O' || chr == 'U')break;
}

if( i < str.length )

alert("The position of the left most vowel is "+(i+1));

else

alert("No vowel found in the entered string");

</script>

</body>

</html>

Output

HTML Programs
No ratings yet
HTML Programs
7 pages
Web Technology Lab Manual
No ratings yet
Web Technology Lab Manual
7 pages
Web Lab Manual
No ratings yet
Web Lab Manual
42 pages
Web Technology Lab Program 1-5
No ratings yet
Web Technology Lab Program 1-5
12 pages
Full Stack
No ratings yet
Full Stack
46 pages
HTML Programs Unit 2
No ratings yet
HTML Programs Unit 2
9 pages
WAD Module 1
No ratings yet
WAD Module 1
39 pages
HTML Basics for Beginners
No ratings yet
HTML Basics for Beginners
59 pages
Wtlab Manual Ankitha
No ratings yet
Wtlab Manual Ankitha
35 pages
Web Technology Journal Part A-2
No ratings yet
Web Technology Journal Part A-2
23 pages
Web Lab Study Material
No ratings yet
Web Lab Study Material
29 pages
Lab Manual
No ratings yet
Lab Manual
80 pages
Al Rouman (Lab Report 1)
No ratings yet
Al Rouman (Lab Report 1)
6 pages
Web Technology Manual - Lab-BCSL504-HKBK
No ratings yet
Web Technology Manual - Lab-BCSL504-HKBK
44 pages
HTML Programming Examples
No ratings yet
HTML Programming Examples
46 pages
PROGRAMS Lab Ada
No ratings yet
PROGRAMS Lab Ada
51 pages
Screenshot 2025-02-14 at 12.51.18 PM
No ratings yet
Screenshot 2025-02-14 at 12.51.18 PM
29 pages
Web Lab Manual
No ratings yet
Web Lab Manual
61 pages
FSD Lab Programs
No ratings yet
FSD Lab Programs
37 pages
Week-2 FSD c6
No ratings yet
Week-2 FSD c6
13 pages
SSRWD Practical
No ratings yet
SSRWD Practical
21 pages
WDT LabPrograms
No ratings yet
WDT LabPrograms
37 pages
Web Technology Laboratory Manual
No ratings yet
Web Technology Laboratory Manual
83 pages
Webtechnology Lab Manual5th Sem
No ratings yet
Webtechnology Lab Manual5th Sem
43 pages
Web Lab Programs - 2024
No ratings yet
Web Lab Programs - 2024
83 pages
Reference WD Practical
No ratings yet
Reference WD Practical
17 pages
FSD Lab Programs
No ratings yet
FSD Lab Programs
37 pages
Edg File
No ratings yet
Edg File
31 pages
FYBSC - CS Sem 1 Web Programming Journal
No ratings yet
FYBSC - CS Sem 1 Web Programming Journal
38 pages
SDC Rec
No ratings yet
SDC Rec
45 pages
Lab Webd Kritika
No ratings yet
Lab Webd Kritika
57 pages
WT Lab Manual
No ratings yet
WT Lab Manual
66 pages
Lab Adp 01
No ratings yet
Lab Adp 01
31 pages
HTML (B4 7)
No ratings yet
HTML (B4 7)
8 pages
HTML Introduction and Basics
No ratings yet
HTML Introduction and Basics
14 pages
Wa0012.
No ratings yet
Wa0012.
31 pages
Internet and Web Technology
No ratings yet
Internet and Web Technology
10 pages
User Interface Design LAB MANUAL (23CSE113) CSE-1 YEAR II SEMESTER (2023-2024) Dontha Madhusudhana Rao
No ratings yet
User Interface Design LAB MANUAL (23CSE113) CSE-1 YEAR II SEMESTER (2023-2024) Dontha Madhusudhana Rao
53 pages
Lab Programs
No ratings yet
Lab Programs
34 pages
FSD - Aiml
No ratings yet
FSD - Aiml
97 pages
Record
No ratings yet
Record
64 pages
Programes 2
No ratings yet
Programes 2
10 pages
Anshu 1
No ratings yet
Anshu 1
58 pages
Lab Webd Shubam
No ratings yet
Lab Webd Shubam
57 pages
Lab Webd Rachna
No ratings yet
Lab Webd Rachna
57 pages
Web-Programs (1 To 10)
No ratings yet
Web-Programs (1 To 10)
13 pages
Class X Computer Project Report
0% (3)
Class X Computer Project Report
30 pages
Jitendra WD
No ratings yet
Jitendra WD
18 pages
Practical File ON HTML: Maharshi Dayanand University Rohtak
No ratings yet
Practical File ON HTML: Maharshi Dayanand University Rohtak
26 pages
Web Programming Lab Manual-009
No ratings yet
Web Programming Lab Manual-009
76 pages
Web Technologies Practical
No ratings yet
Web Technologies Practical
20 pages
HTML Assignment
No ratings yet
HTML Assignment
27 pages
WT Lab Programs (Prog.1 - Prog.40)
No ratings yet
WT Lab Programs (Prog.1 - Prog.40)
40 pages
HTML & Web Development Experiments
0% (1)
HTML & Web Development Experiments
95 pages
Web Technology Lab Manual (BCSL504)
No ratings yet
Web Technology Lab Manual (BCSL504)
82 pages
Assignment 1722497576078 HTML - PROGRAMS
No ratings yet
Assignment 1722497576078 HTML - PROGRAMS
13 pages
Web Technologies Lab Manual Working
No ratings yet
Web Technologies Lab Manual Working
5 pages
1 - Introduction To The MicroBit
No ratings yet
1 - Introduction To The MicroBit
2 pages
Engrid OpenFOAM Stammtisch Stuttgart2009
No ratings yet
Engrid OpenFOAM Stammtisch Stuttgart2009
47 pages
Proposed Design of A Learning Center
No ratings yet
Proposed Design of A Learning Center
11 pages
ICT Sales Client List Template
No ratings yet
ICT Sales Client List Template
3 pages
Mayur Gurikar CV2
No ratings yet
Mayur Gurikar CV2
2 pages
Gasmonitor+ User Manual
No ratings yet
Gasmonitor+ User Manual
155 pages
"Clone Our $2,079/Week Profit System"
No ratings yet
"Clone Our $2,079/Week Profit System"
41 pages
Woolworths Group - JD 2024 - Cloud SRE - Engineer - Contractor-1
No ratings yet
Woolworths Group - JD 2024 - Cloud SRE - Engineer - Contractor-1
2 pages
Module 1 (Lesson1)
No ratings yet
Module 1 (Lesson1)
13 pages
Windows 8 Install Without Key
No ratings yet
Windows 8 Install Without Key
3 pages
What Is An 8086 Microprocessor?: R in A 40 Pin, Dual Inline Packaged IC
No ratings yet
What Is An 8086 Microprocessor?: R in A 40 Pin, Dual Inline Packaged IC
11 pages
2850 L2u201 Handout 21
No ratings yet
2850 L2u201 Handout 21
2 pages
High-End Mammography System Tender
No ratings yet
High-End Mammography System Tender
3 pages
Engineering Leadership Program
No ratings yet
Engineering Leadership Program
7 pages
Hyper Text
No ratings yet
Hyper Text
20 pages
Aditi Shrivastav Resume
No ratings yet
Aditi Shrivastav Resume
1 page
8 Types of Cost Estimates in Construction
No ratings yet
8 Types of Cost Estimates in Construction
5 pages
CL111 QN4
No ratings yet
CL111 QN4
7 pages
RTS Question Bank
67% (3)
RTS Question Bank
8 pages
Types and History of Robots
No ratings yet
Types and History of Robots
6 pages
Fortinet FortiWeb Cloud WAF Guide
No ratings yet
Fortinet FortiWeb Cloud WAF Guide
12 pages
Diagrama HDTV Samsung+Hch551wx
No ratings yet
Diagrama HDTV Samsung+Hch551wx
73 pages
VLSI Project Report
No ratings yet
VLSI Project Report
17 pages
2024-25 Autumn Tentative Class Schedule
No ratings yet
2024-25 Autumn Tentative Class Schedule
12 pages
Ais Jawaban 2
No ratings yet
Ais Jawaban 2
6 pages
MidTermReading Jessops
No ratings yet
MidTermReading Jessops
4 pages
Comptia Data Da0 001 Exam Objectives (2 0)
100% (1)
Comptia Data Da0 001 Exam Objectives (2 0)
11 pages
Sematech APC
100% (1)
Sematech APC
20 pages
Indian Institute of Management Kozhikode: Assignment Questions
No ratings yet
Indian Institute of Management Kozhikode: Assignment Questions
4 pages
OpenManage Enterprise Scale and Performance - White Paper
No ratings yet
OpenManage Enterprise Scale and Performance - White Paper
31 pages

Epcet 21csl481

Uploaded by

Epcet 21csl481

Uploaded by

EAST POINT COLLEGE OF ENGINEERING &

DEPARTMENT OF ARTIFICIAL INTELLIGENCE AND

1. Write a basic HTML code with Bold,title,body,font,break,italics,underlined tags.

2. Write a basic HTML code with ordered and unordered tags.

b. Output: The position in the string of the left-most vowel

d. Output: The number with its digits in the reverse order

Prog 2:Ordered and Unordered List

<h1>All about rabbits!</h1>

<h2 id="rabbits-info-heading">Basic info</h2>

<p id="rabbits-song">Little Bunny Foo Foo, <br>

<p class="hai">And down came the Good Fairy <br>

<p>I'll give you 3 chances. <br>

<img src="rabbit.jpg" alt="Rabbit" width="203">

<tr> <td>Select Game</td><td>

<tr> <td>Select ur age</td><td>

<tr> <td>Select Photo</td>

<td><input type="reset" value="C"

border: solid black;

border-collapse: collapse; background-color:lightblue;

table { margin: auto; }

document.write( "<table><tr><thcolspan='3'> NUMBERS FROM 0 TO 10 WITH

for(var n=0; n<=10; n++)

document.write( "<tr><td>" + n + "</td><td>" + n*n + "</td><td>" + n*n*n +

Prog8:Text Growing and Shrinking

transform: translate(-50%, -50%);

var var1 = setInterval(inTimer, 1000);

var ids = document.getElementById("demo");

var2 = setInterval(deTimer, 1000);

ids.innerHTML = 'TEXT SHRINKING'; ids.setAttribute('style', "font-size: " + fs +

Prog 9: Javascript Functions

var str = prompt("Enter the Input","");

rev = rev * 10 + remainder;

alert("Reverse of "+str+" is "+rev);

for(var i = 0; i < str.length; i++) {

var chr = str.charAt(i);

if( i < str.length )

alert("The position of the left most vowel is "+(i+1));

alert("No vowel found in the entered string");

You might also like

document.write( "<tr><td>" + n + "</td><td>" + nn + "</td><td>" + nn*n +