Ex. No:1. Create a web page with the following using HTML.
• To embed an image map in a web page.
• To fix the hot spots.
AIM:
To create a web page which includes a map and display the related information when a hot spot is
clicked in the map.
PROCEDURE:
1. Create a html file with map tag.
2. Set the source attribute of the img tag to the location of the image and also set the use map
attribute.
3. Specify an area with name, shape and href set to the appropriate values.
4. Repeat step 3 as many hot spots you want to put in the map.
5. Create html files for each and every hot spot the user will select.
PROGRAM:
[Link]
<HTML>
<HEAD>
<TITLE>Image Map</TITLE> </HEAD>
<BODY>
<img src="india_map.jpg" usemap="#metroid" ismap="ismap" > <map name="metroid"
id="metroid">
<area href="[Link]" shape="circle" coords="208,606,50" title="TamilNadu"/>
<area href="[Link]" shape="rect" coords = "130,531,164,535" title ="Karnataka" />
<area href="[Link]" shape="poly" coords =
"227,490,238,511,230,536,198,535,202,503" title ="Andhra Pradesh" />
<area href="[Link]" shape="rect" coords = "154,606,166,621" title ="Kerala" /> </map>
</BODY>
</HTML>
[Link]
<HTML><HEAD>
<TITLE>About Tamil Nadu</TITLE>
</HEAD>
<BODY>
<CENTER><H1>Tamil Nadu</H1></CENTER> <HR>
<UL>
<LI>Area : 1,30,058 Sq. Kms.</LI>
<LI>Capital : Chennai</LI>
<LI>Language : Tamil</LI>
<LI>Population : 6,21,10,839</LI> </UL><hr>
<a href='[Link]'>India Map</a>
</BODY>
</HTML>
[Link]
<HTML>
<HEAD>
<TITLE>About Karnataka</TITLE> </HEAD>
<BODY>
<CENTER><H1>Karnataka</H1></CENTER>
<HR>
<UL>
<LI>Area : 1,91,791 Sq. Kms</LI>
<LI>Capital : Bangalore</LI>
<LI>Language : Kannada</LI>
<LI>Population : 5,27,33,958</LI>
</UL>
<hr>
<a href='[Link]'>India Map</a>
</BODY>
</HTML>
[Link]
<HTML>
<HEAD>
<TITLE>About Andhra Pradesh</TITLE> </HEAD>
<BODY>
<CENTER><H1>Andhra Pradesh</H1></CENTER> <HR>
<UL>
<LI>Area : 2,75,068 Sq. Kms</LI>
<LI>Capital : Hyderabad</LI>
<LI>Language : Telugu</LI>
<LI>Population : 7,57,27,541</LI>
</UL>
<hr>
<a href='[Link]'>India Map</a>
</BODY>
</HTML>
[Link]
<HTML>
<HEAD>
<TITLE>About Kerala</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Kerala</H1></CENTER>
<HR>
<UL>
<LI>Area : 38,863 Sq. Kms.</LI>
<LI>Capital : Thiruvananthapuram</LI>
<LI>Language : Malayalam</LI>
<LI>Population : 3,18,38,619</LI>
</UL>
<hr>
<a href='[Link]'>India Map</a>
</BODY>
</HTML>
OUTPUT:
RESULT:
Thus the creation of a web page which includes a map and display the related in-formation when a
hot spot is clicked in the map was executed successfully.
Ex no: 2. Create a web page with all types of Cascading style sheets.
AIM:
To create a webpage with the following using html to embedded the style sheet
ALGORITHM:
Step1: Create html file with the style tag, inside head tag.
Step2: Set the style such as font-family, font-size, color, left etc, for the heading
h1,h2,…h6 and respectively.
Step3: Close the head tag.
Step4: Specify the heading and information required inside the body tag.
Step5: Close the opened tag.
PROGRAM:
<! DOCTYPE html PUBLIC"-////W3C//DTD XHTML 1.0
TRANSTION//EN"[Link] [Link]>
<html xmlns="[Link]
<head>
<title>Embedded style sheet</title>
<style type="text/css">
h1
{
font-family:arial;
color:green;
}
h2
{
font-family:arial;
color:red;
left:20px
}
h3
{
font-family:arial;
color:blue;
}
p
{
font-sise:14pt;
font-family:verdana
}
</style>
</head>
<body>
<h1>
<center>This is created using embedded style sheet
</center>
</h1>
<h2>This line is allingned left and red colored;
</h2>
<p>
The embedded style sheet is the most commonly used style sheet
This paragragh is return in verdana font with font size of 14.
</p>
<h3>
This is a blue <a href="[Link]">colored</a> line
</h3>
</body>
</html>
OUTPUT:
RESULT: Thus creation of a webpage using cascading style sheet has been
developed successfully.
Ex No: 3. Client Side Scripts for Validating Web Form Controls using DHTML.
AIM:
To develop a program for validating web form control using DHTML.
ALGORITHM:
Step1:Start the program.
Step2: Define the title within the tag.
Step3: Give the script type within the script tag.
Step4: Validate each and every column as the box with the if condition.
Step5: If empty value are given or the block term are next then it is verified with certain
condition.
Step6:If values is empty then a message is been displayed.
Step7: Form is designed with GUI tool is description.
Step8: All buttons are processed accordingly.
Step9: Stop the program.
PROGRAM:
//[Link]
<html>
<head>
<script type='text/javascript'>
function formValidator()
{
var firstname=[Link]('firstname');
var lastname=[Link]('lastname');
var addr=[Link]('addr');
var zip=[Link]('zip');
var Countries=[Link]('Countries');
var username=[Link]('username');
var email=[Link]('email');
var dd=[Link]('dd');
var mm=[Link]('mm');
var yyyy=[Link]('yyyy');
var comment=[Link]('comment');
var password=[Link]('password');
if(isAlphabet(firstname,"Please enter only letters for your First name"))
{
if(isAlphabet(lastname,"Please enter only letters for your Last name"))
{
if(isNumeric(dd,"Please enter a date"))
{
if(madeSelection(mm,"Please Choose"))
{
if(isNumeric(yyyy,"Please enter a year"))
{
if(isAlphanumeric(addr,"Enter Numbers and letters only for address"))
{
if(isNumeric(zip,"please enter a valid zip code"))
{
if(madeSelection(Countries,"Please Choose"))
{
if(lengthRestriction(username,6,8))
{
if(isAlphanumeric(password,"Enter Numbers and letters only for password"))
{
if(emailValidator(email,"Please enter a valid email address"))
{
if(notEmpty(comment,"Please fill the comment"))
{
[Link]("<b><i>Thank's for submitting your details</i></b>");
alert("Successful Entry!!");
return true;
}}}}}}}}}}}}
return false;
}
function notEmpty(elem,helperMsg)
{
if([Link]==0)
{
alert(helperMsg);
[Link]();
return false;
}
return true;
}
function isNumeric(elem,helperMsg)
{
var numericExpression=/^[0-9]+$/;
if([Link](numericExpression))
{
return true;
}
else
{
alert(helperMsg);
[Link]();
return false;
}
}
function isAlphabet(elem,helperMsg)
{
var alphaExp=/^[a-zA-Z]+$/;
if([Link](alphaExp))
{
return true;
}
else
{
alert(helperMsg);
[Link]();
return false;
}
}
function isAlphanumeric(elem,helperMsg)
{
var alphaExp=/^[0-9, a-z a-z, 0-9, A-Z A-Z, - 0-9 . ]+$/;
if([Link](alphaExp))
{
return true;
}
else
{
alert(helperMsg);
[Link]();
return false;
}
}
function lengthRestriction(elem,min,max)
{
var unput=[Link];
if([Link]>=min&&[Link]<=max)
{
return true;
}
else
{
alert("Please enter between "+min+" and "+max+" charactters");
[Link]();
return false;
}
}
function madeSelection(elem,helperMsg)
{
if([Link]=="Please Choose")
{
alert(helperMsg);
[Link]();
return false;
}
else
{
return true;
}
}
function emailValidator(elem,helperMsg)
{
var emailExp=/^[0-9 a-z . a-z 0-9]+\@[a-z]+\.[a-z]{2,4}$/;
if([Link](emailExp))
{
return true;
}
else
{
alert(helperMsg);
[Link]();
return false;
}
}
</script>
<h1><center><b><font color="#347235">Please Enter Your
Details</font></b></center></h1>
</head>
<body bgcolor="LIGHTGREEN">
<hr>
<form onsubmit='return formValidator()' height="50%">
<table height="50%" border="3pt" align="center">
<tr><td><b><font color="#347235">First Name:</font></b></td><td><input
type='text' id='firstname'/></td></tr><br />
<tr><td><b><font color="#347235">Last Name:</font></b></td><td><input
type='text' id='lastname'/></td></tr><br />
<tr><td><b><font color="347235">Date of
Birth(dd/mm/yyyy):</font></b></td><td><input type='text' id='dd' />
<select id='mm'>
<option>Please Choose</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<input type='text' id='yyyy' /></td></tr><br />
<tr><td><b><font color="#347235">Address:</font></b></td><td><input
type='text' id='addr'/></td></tr><br />
<tr><td><b><font color="#347235">Zip code:</font></b></td><td><input
type='text' id='zip'/></td></tr><br />
<tr><td><b><font color="#347235">Countries:</font></b></td><td><select
id='Countries'>
<option>Please Choose</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="America">America</option>
<option value="India">India</option>
<option value="Tanzania">Tanzania</option>
<option value="Zimbabwe">Zimbabwe</option>
<option value="Switzerland">Switzerland</option>
</select></td></tr><br />
<tr><td><b><font color="#347235">Username(6-8
characters):</font></b></td><td><input type='text' id='username' /></td></tr><br />
<tr><td><b><font color="#347235">Password:</font></b></td><td><input
type='password' id='password' /></td></tr><br />
<tr><td><b><font color="#347235">Email:</font></b></td><td><input
type='text' id='email' /></td></tr><br />
<tr><td><b><font
color="#347235">Comment:</font></b></td><td><textarea id='comment'cols="20"
rows="5" name="Address"></textarea></td></tr><br />
<tr><td><input type='submit' value='Check Form' /></td></tr>
</table>
</form>
</body>
</html>
Output:
RESULT:Thus developing client side scripts for validating web from controls using
DHTML has been verified.