Sagar Institute of Research & Technology Bhopal
DEPARTMENT OF
AIML
LAB MANUAL
WEB TECHNOLOGIES
VII SEM [Link]
RGM-R-2015
Detailed Syllabus 2
Lab Exercises
1. Write a HTML program for the demonstration of Lists.
a. Unordered List
b. Ordered List
c. Definition List
d. Nested List
2. Write a HTML program for demonstrating Hyperlinks.
a. Navigation from one page to another.
b. Navigation within the page.
3. Write a HTML program for time-table using tables.
4. Write a HTML program to develop a static Home Page using frames.
5. Write a HTML program to develop a static Registration Form.
6. Write a HTML program to develop a static Login Page.
7. Write a HTML program to develop a static Web Page for Catalog.
8. Write a HTML program to develop a static Web Page for Shopping Cart.
9. Write HTML for demonstration of cascading stylesheets.
a. Embedded stylesheets.
b. External stylesheets.
c. Inline styles.
10. Write a javascript program to validate USER LOGIN page.
2
3
Experiment 1
1. Write a HTML program for the demonstration of Lists.
Unordered List
Ordered List
Definition List
Nested List
Unordered
List:
<html>
<head>
<title> Creating Unorder List </title>
</head>
<body bgcolor=”pink”>
<h1 align=”center”> Creating Unorder List</h1>
<h1 align=”center”>List of Colleges in Kurnool</h1>
<ul type=”square”>
<li>GPREC</li>
<li>RGMCET</li>
<li>GPCET</li>
</ul>
</body>
</html>
4
Output:
5
Ordered List:
<html>
<head>
<title> Creating Order List </title>
</head>
<body bgcolor=”pink”>
<h1 align=”center”> Creating Order List</h1>
<h1 align=”center”>List of branches in RGMCET</h1>
<ol type=”A”>
<li>CSE</li>
<li>IT</li>
<li>ECE</li>
<li>EEE</li>
<li>CIVIL</li>
<li>ME</li>
</ol>
</body>
</html>
6
Output:
7
Definition List:
<html>
<head>
<title>Creating Definition List</title>
</head>
<body bgcolor=”pink”>
<h1 align=”center”>Definition List</h1>
<dl>
<dt>CSE<dd>Computer Science & Engineering
<dt>ECE<dd>Electronics & Communication Engineering
<dt>IT<dd>Information Technology
<dt>EEE<dd>Electrical & Electronics Engineering
<dt>CE<dd>Civil Engineering
</dl>
</body>
</html>
8
Output
9
Nested List:
<html>
<head>
<title>Nested Lists</title>
</head>
<body bgcolor=”pink”>
<h1 align=”center”>List of Colleges in Kurnool</h1>
<ol>
<li>Kurnool</li>
<ul>
<li>GPREC</li>
<li>BITS</li>
<li>GPCET</li>
</ul>
<li>Nandyala</li>
<ul>
<li>RGMCET</li>
<li>SREC</li>
</ul>
</ol>
</body>
</html>
10
Output:
11
Experiment 2
AIM- Write a HTML program for demonstrating Hyperlinks.
Navigation from one page to another.
Navigation within the page.
Navigation from one page to
another:
<html>
<head>
<title>Setting Hyperlink colors</title>
</head>
<body bgcolor="pink" link=”green” vlink=”blue” alink=”red”>
<center><h1>Setting Hyperlink colors</h1>
<a href=”[Link]”>Click here</a>to goto login page
</body>
</html>
12
Output:
13
Navigation within the page:
<html>
<head>
<title>Nested Lists</title>
</head>
<body bgcolor="pink">
<center><h1>Linking to a section in a page</h1>
<a name=”top”>This is the top of the page</a>
Click here to goto the <a target=”#bottom”>bottom</a>of the page
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br>
<a name=”bottom”>This is the bottom of the page</a> Click
here to goto <a target=”#top”>top</a>of the page
</center>
</body>
</html>
14
Output:
15
16
Experiment 3
AIM- Write a HTML program for time-table using tables.
<html>
<head>
<title>Timetable</title>
</head>
<body>
<h1 align="center"><font color="Salmon">Timetable of III
CSE</font></h1><br>
<table align="center" border="2" cellspacing="0" cellpadding="15">
<tr align="center" valign=="middle">
<th>DAY</th>
<th>I</th>
<th>II</th>
<th
rowspan="7"><b>T<br>E<br>A<br><br>B<br>R<br>E<br>A<br>K</b></th>
<th>III</th>
<th>IV</th>
<th
rowspan="7"><b>L<br>U<br>N<br>C<br>H<br><br>B<br>R<br>E<br>A<br>K</
b></th>
<th>V</th>
<th>VI</th>
<th>VII</th>
</tr>
<tr align="center">
<th>MON</th>
<td>IS</td>
17
<td>WT</td>
<td>SEM</td>
<td>OOAD</td>
18
<td>SCI</td>
<td>C#</td>
<td>COMP</td>
</tr>
<tr align="center">
<th>TUE</th>
<td>AP</td>
<td>AP Lab</td>
<td colspan="2">AP Lab</td>
<td>WT</td>
<td>IS</td>
<td>OOAD</td>
</tr>
<tr align="center">
<th>WED</th>
<td>WT</td>
<td>IS</td>
<td>C#</td>
<td>SCI</td>
<td colspan="3">MOOC'S</td>
</tr>
<tr align="center">
<th>THU</th>
<td>IS</td>
<td>LIB</td>
<td>OOAD</td>
<td>WT</td>
<td colspan="3">WT Lab</td>
</tr>
<tr align="center">
19
<th>FRI</th>
<td>AP</td>
<td>AP</td>
<td>C#</td>
<td>OOAD</td>
<td colspan="3">C# Lab</td>
</tr>
20
<tr align="center">
<th>SAT</th>
<td>OOAD</td>
<td>SCI</td>
<td>WT</td>
<td>SEM</td>
<td>AP</td>
<td>AP</td>
<td>C#</td>
</tr>
</table>
</body>
</html>
21
Output:
22
23
Experiment 4
AIM- Write a HTML program to develop a static Home Page using frames.
<html>
<head>
<title>RGM ENGINEERING COLLEGE</title>
</head>
<frameset cols="30%,70%">
<frameset rows="25%,25%,50%">
<frame src="e:\cse546\[Link]">
<frame src="e:\cse546\[Link]">
<frame src="e:\cse546\[Link]">
</frameset>
<frameset rows="25%,25%,50%">
<frame src="e:\cse546\[Link]">
<frame src="e:\cse546\[Link]">
<frame src="e:\cse546\[Link]" name="display">
</frameset>
</frameset>
</html>
Output:
24
25
Experiment 5
Write a HTML program to develop a static Registration Form.
<html>
<head>
<title>Registration</title>
</head>
<body bgcolor=lightblue>
<h1 align=center><u>Registration Form</u></h1>
<br><br><br>
<div>
<strong>
First Name   <input type=text value=" " name="txt1"><br><br>
Last Name   <input type=text value=" " name="txt2"><br><br>
UserName   <input type=text value="" name="txt3"><br><br>
Password   <input type=password value="" name="pwd1"><br>
Confirm Password   <input type=password value="" name="pwd2"><br><br>
Address   <textarea rows=3 cols=60></textarea><br><br>
Date of Birth  
dd<select name="sel1">
<option>--</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
26
</select>
27
mm<select name="sel2">
<option>--</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
yyyy<select name="sel3">
<option> --- </option>
<option>1987</option>
<option>1988</option>
<option>1989</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
28
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
<option>2009</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
</select><br><br>
Sex  
<input name="rb1" type="radio" value="radiobutton">Male
<input name="rb1" type="radio" value="radiobutton">Female
<br><br>
Martial Status  
<input name="rb2" type="radio" value="radiobutton">Single
<input name="rb2" type="radio" value="radiobutton">Married
<br><br>
Mobile Number   <input type=text name="txt4"><br><br>
Branch  
<input name="rb3" type="radio" value="radiobutton">CSE
29
<input name="rb3" type="radio" value="radiobutton">IT
<input name="rb3" type="radio" value="radiobutton">ECE
<input name="rb3" type="radio" value="radiobutton">EEE
<input name="rb3" type="radio" value="radiobutton">MECH
<br><br>
Languages Known  
<input name="cb1" type="checkbox" value="checkbox">English
<input name="cb1" type="checkbox" value="checkbox">Telugu
<input name="cb1" type="checkbox" value="checkbox">Hindi
<input name="cb1" type="checkbox" value="checkbox">Kannada
<input name="cb1" type="checkbox" value="checkbox">Tamil
<br><br>
<center>
<input type=submit value="SUBMIT" name="btn1"> 
<input type=reset value="CANCEL" name="btn1">
</center>
</strong>
</body>
</html>
30
Output:
31
32
Experiment 6
Write a HTML program to develop a static Login Page.
<html>
<head>
<title>login</title>
</head>
<body>
<br><br><br><br>
<h1 align=center><u>LOGIN</u></h1>
<br><br><br>
<h4>
<center>
username  <input type=text><br>
password  <input type=password><br><br><br>
</h4>
<input type=submit value=submit>
  
<input type=reset value=cancel>
</center>
</body>
</html>
33
34
Output:
35
Experiment 7
AIml- Write a HTML program to develop a static Web Page for Catalog.
<html>
<head>
<title>catalouge</title>
</head>
<body>
<center>
<table border=2 cellpadding=10 cellspacing=10>
<tr>
<td> <img src="D:\cse546\[Link]"height=100 width=100></td>
<td>Book:XML Bible<br>
Author:Wingston<br>
Publication:wiely</td>
<td>$40.5</td>
<td><input type="button"value="add to cart"></td>
</tr>
<tr>
<td> <img src="D:\cse546\[Link]"height=100 width=100></td>
<td>Book:A1<br>
Author:[Link]<br>
Publication:Princeton hall</td>
<td>$63</td>
<td><input type="button"value="add to cart"></td>
</tr>
<tr>
<td> <img src="D:\cse546\[Link]"height=100 width=100></td>
<td>Book:JAVA 2<br>
Author:Watson<br>
Publication:BPB</td>
36
37
<td>$35.5</td>
<td><input type="button"value="add to cart"></td>
</tr>
<tr>
<td> <img src="D:\cse546\[Link]"height=100 width=100></td>
<td>Book:Html in 24 hrs<br>
Author:Sam Peter<br>
Publication:SAM</td>
<td>$50</td>
<td><input type="button"value="add to cart"></td>
</tr>
</table>
</center>
</body>
</html>
Output:
38
Experiment 8
AIM -Write a HTML program to develop a static Web Page for Shopping Cart.
<html>
<head>
<title>Cart</title>
</head>
<body>
<center>
<table border=0 width=50 height=10 cellpadding=10 cellspacing=10>
<tr>
<th>Book name</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
<tr>
<td>JAVA 2</td>
<td>$35.5</td>
<td>2</td>
<td>$70</td>
</tr>
<tr>
<td>XML Bible</td>
<td>$40.5</td>
<td>1</td>
<td>$40.5</td>
</tr>
</table>
<h3>total amount-130.5</h3>
</center>
39
</body>
</html>
Output:
40
41
Experiment 9
AIM- Write HTML for demonstration of cascading stylesheets.
d. Embedded stylesheets.
e. External stylesheets.
f. Inline styles.
Embedded stylesheets:
<html>
<head>
<title>Embedded Style sheets</title>
<style type=”text/css”>
body{backgroun
d-color: pink;}
h1
{color:orange;
text-align:
center;
}
p{
font-family: "Times
New Roman";
font-size: 20px;
}
</style>
</head>
<body>
<h1>Embedded Style Sheets</h1><br>
<p>This is a paragraph
</body>
</html>
42
43
Output:
External Stylesheets:
[Link]:
body {background-color: #d0e4fe;}
h1 {
color: orange; text-align: center;
}
p{
font-family: "Times New Roman"; font-size: 20px;
}
[Link]:
<html>
<head>
<title>External Style Sheets</title>
<link rel=”stylesheet” type=”text/css” href=”[Link]”>
</head>
<body>
<h1>External Style Sheets</h1><br>
<p>This is a paragraph
</body>
</html>
44
45
Output:
Inline styles:
<html>
<head>
<title>HTML Tables</table>
</head>
<body bgcolor=‟pink‟>
<center>
<h1>Creating HTML Tables</h1><br>
<table border=”2” cellpadding=”4” cellspacing=”4”>
<tr>
<th colspan=”2” style=”background-color:red”>
WebSites</th>
</tr>
<tr>
<th style=”background-
color:blue”>MailSites</th>
<th style=”background-
color:green”>JobSites</th>
46
</tr>
<tr>
<td style=”background-color:grey”>Gmail</td>
<td style=”background-color:aqua”>Naukri</td>
</tr>
<tr>
<td style=”background-
color:yellow”>Yahoo</td>
<td style=”background-
color:purple”>JobStreet</td>
</tr>
</table>
</center>
</body>
</html>
Output:
47
Experiment 10
Write a javascript program to validate USER LOGIN page.
<html>
<head>
<title>Login Validation</title>
<script language="javascript">
function formValidator()
{
var username=[Link]('uname');
var password=[Link]('pwd');
if(isEmpty(username)&&isEmpty(password))
{
alert("enter something");
[Link]();
}
if(!isEmpty(username)&&isEmpty(password)&&isAlphabet(username))
{
alert("Please enter password");
[Link]();
}
if(!isEmpty(username)&&!isEmpty(password)&&isAlphabet(username))
{
return true;
}
else
{
if(!isEmpty(username)&&!isEmpty(password)&&!isAlphabet(username))
{
alert("Please Enter only alphabets for username");
[Link]();
48
}
49
}
return false;
}
function isEmpty(elem)
{
if([Link]==0)
{
return true;
}
return false;
}
function isAlphabet(elem)
{
var alphaExp=/^[a-z A-Z]+$/;
if([Link](alphaExp))
{
return true;
}
}
</script>
</head>
<body bgColor=megastar>
<h1 align=center>USER LOGIN VALIDATION</h1>
<br><br>
<form name="form1" onSubmit="return formValidator()">
<center>
<table border=0 colsSpacing=4>
<tr>
<td>Username:</td>
<td><input type=text value="" name="uname"></td>
50
</tr>
<tr>
<td>Password:</td>
<td><input type=password value="" name="pwd"></td>
</tr>
<tr>
<td><input type=submit value="SUBMIT" name="btn1"></td>
<td><input type=reset value="CANCEL" name="btn2"></td>
</tr>
</table>
</center>
</form>
</body>
</html>
Output:
51
RAJEEV GANDHI MEMORIAL COLLEGE OF ENGINEERING & TECHNOLOGY
(AUTONOMOUS)
DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING