Scribd
Upload
27 views15 pages

HTML Lab Manual

html-lab-manual

Uploaded by

Mohammed irfan m Mansoor ali t a
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
27 views15 pages

HTML Lab Manual

html-lab-manual

Uploaded by

Mohammed irfan m Mansoor ali t a
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
You are on page 1/ 15

lOMoARcPSD|39289093

HTml lab manual

Industrial Engineering (Universidad UNIVER)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university


Downloaded by Mohammed irfan m Mansoor ali t a (mohammedirfan_22csb08@kgkite.ac.in)
lOMoARcPSD|39289093

Ex. No:1 IMAGE MAPPING IN HTML

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.

Downloaded by Mohammed irfan m Mansoor ali t a (mohammedirfan_22csb08@kgkite.ac.in)


lOMoARcPSD|39289093

Imagemap.html

<HTML>
<HEAD>
<TITLE>Image Map</TITLE> </HEAD>
<BODY>
<img src="./img/india_map.jpg" width="700" height="600" alt="IndiaMap" usemap="#indiamap">
<map id="indiamap" name="indiamap">
<area href="tamilNadu.html" shape="circle"
coords="308,506,40" title="TamilNadu"/>
<area href="karnataka.html" shape="rect" coords = "215,410,225,485" title ="Karnataka" />
<area href="kerala.html" shape="poly" coords =
"587,390,438,411,430,536,248,535,202,503" title ="Kerala" />
<area href="andhra.html" shape="rect" coords = "285,410,335,485" title ="Andhra Pradesh" />
</map>
</BODY>
</HTML>

Tamilnadu.html
<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='ImageMap.html'>India Map</a>
</BODY>
</HTML>

Kerala.html
<HTML>
<HEAD>
<TITLE>About Kerala</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Kerala</H1></CENTER>

Downloaded by Mohammed irfan m Mansoor ali t a (mohammedirfan_22csb08@kgkite.ac.in)


lOMoARcPSD|39289093

<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='ImageMap.html'>India Map</a>
</BODY>
</HTML>

Andhra.html
<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='ImageMap.html'>India Map</a>
</BODY>
</HTML>

Karnata.html
<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>

Downloaded by Mohammed irfan m Mansoor ali t a (mohammedirfan_22csb08@kgkite.ac.in)


lOMoARcPSD|39289093

<hr>
<a href='ImageMap.html'>India Map</a>
</BODY>
</HTML>

Downloaded by Mohammed irfan m Mansoor ali t a (mohammedirfan_22csb08@kgkite.ac.in)


lOMoARcPSD|39289093

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.

Downloaded by Mohammed irfan m Mansoor ali t a (mohammedirfan_22csb08@kgkite.ac.in)


lOMoARcPSD|39289093

Ex. No: 2 STYLE SHEETS


Date :
AIM:
To create a web page that displays college information using various style sheet
PROCEDURE:
1. Create a web page with frame sets consisting two frames
2. In the first frame include the links
3. In the second frame set display the web page of the link
4. Create a external style sheets
5. Create a embedded style sheets
6. Create a inline and internal style sheets and make it link to the external style sheets

PROGRAM:
XYZ.CSS:
h3
{
font-family:arial;
font-size:20;
color:cyan
}
table{
border-color:green
}
td
{
font-size:20pt;
color:magenta
}

Downloaded by Mohammed irfan m Mansoor ali t a (mohammedirfan_22csb08@kgkite.ac.in)


lOMoARcPSD|39289093

Ex.No:3 VALIDATION USING JAVASCRIPT


Date:
AIM:
To Validate the Registration, user login, user profile and payment by credit card pages using
JavaScript.
PROCEDURE:
1. Static web pages of an online Book store is developed with following pages.
 Home page
 Registration and user Login
 User profile page
 Payment by credit card
2. Each input box in webpage is validated using java script code using <script> tag in html file.
3. Designed output is displayed.

PROGRAM :
<html>l
<head>
<title> ONLINE BOOK STORES</title>
</head>
<body bgcolor="lemonchiffon">
<marquee><h1 align=”center”><b><u><font color="darkolivegreen">
ONLINE BOOK STORAGE</u></font>
</b></h1></marquee>
<H2 ALIGN="CENTER">
<b><p><U><FONT COLOR="PURPLE">Welcome to online book storage.
Press login if you are having id otherwise press
registration.</U></FONT></p></b></H2>
<H2> <FONT COLOR="darkolivegreen"></FONT></H2>
<H3 ALIGN="CENTER">
<BR><BR><A HREF="login.html"><FONT COLOR="black"><ITALIC>USER
LOGIN</FONT></ITALIC><BR>
<A HREF="reg.html"><BR><BR><FONT
COLOR="black"><ITALIC>REGISTRATION
FORM</FONT></ITALIC><BR><BR>
<BR><BR><A HREF="payment.html"><FONT
COLOR="black"><ITALIC>PAYMENT</FONT></ITALIC><BR>
</body>
</html

Login.html
<html>
<head>

Downloaded by Mohammed irfan m Mansoor ali t a (mohammedirfan_22csb08@kgkite.ac.in)


lOMoARcPSD|39289093

<title>Login</title>
<script>
function validate() {
if(document.getElementById('uname').value==""
||document.getElementById('pwd').value=="")
{
alert("LoginId and Password must be filled")
}
}
</script>
</head>
<body bgcolor="lavender"><br><br><br>
<form name=”myform”>
<div align=”center”><pre>
USER NAME:<input type='text' id="uname" name='uname'><br>
PASSWORD:<input type='password' id="pwd" name='pwd'>
<br><br>
</pre>
<button onclick="validate()">Login</button>
<input type='reset' value='clear' />
</div>
</form>
</body>
</html>

Registration form:

<Html>>
<head>
<title>
Registration Page
</title>
</head>
<body bgcolor="Lightskyblue">
<br>
<div align="CENTER"> <h1>REGISTRATION FORM</h1></div>
<br>
<form>
<div align=”center”>
<table align="center">

Downloaded by Mohammed irfan m Mansoor ali t a (mohammedirfan_22csb08@kgkite.ac.in)


lOMoARcPSD|39289093

<tr><td><label> Firstname </label></td>


<td><input type="text" name="firstname" size="15"/></td>
</tr>
<tr><td><label> Middlename: </label> </td>
<td><input type="text" name="middlename" size="15"/></td>
</tr>
<tr><td><label> Lastname: </label></td>
<td><input type="text" name="lastname" size="15"/></td>
</tr>
<tr><td><label>Course : </label></td>
<td> <select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="BE">BE</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select>
</td>
</tr>
<tr><td><label>Gender : </label></td>
<td><input type="radio" name="gender" id="male"/> Male
<input type="radio" name="gender" id="female"/> Female
<input type="radio" name="gender" id="other"/> Other
</td>
</tr>
<tr><td><label>Phone : </label></td>
<td><input type="text" name="country code" value="+91" size="2"/>
<input type="text" name="phone" size="10"/>
</td>
</tr>
<tr><td><label>Address : </label></td>
<td><textarea cols="50" rows="5" value="address"></textarea> </td>
</tr>
<tr><td><label>Email : </label></td>
<td><input type="email" id="email" name="email"/></td>
</tr>
<tr><td><label>Password : </label></td>
<td><input type="Password" id="pass" name="pass"></td>
</tr>

Downloaded by Mohammed irfan m Mansoor ali t a (mohammedirfan_22csb08@kgkite.ac.in)


lOMoARcPSD|39289093

<tr><td><label>Re-type password : </label></td>


<td><input type="Password" id="repass" name="repass"></td>
</tr>
</table>
<br>
<div align="CENTER"> <button onclick="validate()">SUBMIT</button>
</div>
</form>
</body>
</html>

Payment.html:
<html>
<head>
<title>Payment</title>
<script>
function validate() {
if(document.getElementById('uname').value==""
||document.getElementById('pwd').value=="")
{
alert("LoginId and Password must be filled");
document.getElementById('uname').focus();
return;
}
if(document.getElementById('amount').value=="")
{
alert("Amount should not be empty");
document.getElementById('amount').focus();
return;
}
if(document.getElementById('cardnum').value=="")
{
alert("Card number should not be empty");
document.getElementById('cardnum').focus();
return;
}
var flag=1;
var amnt=document.getElementById('amount').value;
if(isNaN(amnt)){
alert("Amount should be numeric");
return;

Downloaded by Mohammed irfan m Mansoor ali t a (mohammedirfan_22csb08@kgkite.ac.in)


lOMoARcPSD|39289093

}
var cardnum=document.getElementById('cardnum').value;
if(isNaN(cardnum)){
alert("Card number should be numeric");
return;
}
if(cardnum.length < 10){
alert("Card number should be 10 digit");
return;
}
}
</script>
</head>
<body bgcolor="darkseagreen"><br><br><br>
<form name=”paymentform”>
<div align="CENTER"> <h1>PAYMENT</h1></div>
<div align=”center”><pre>
<table align="CENTER">
<tr><td>USER NAME:</td><td><input type='text' id="uname"
name='uname'></td></tr>
<tr><td>PASSWORD:</td><td><input type='password' id="pwd"
name='pwd'></td></tr>
<tr><td>AMOUNT:</td><td><input type="text" name="amount"
id="amount"></td></tr>
<tr><td>CREDITCARDNUMBER:</td><td><input type="PASSWORD"
name="cardnum" id="cardnum"></td></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
</div>
<div align="CENTER"> <button onclick="validate()">PAY</button>
<input type='reset' value='CANCEL' /></div>
</form>
</body>
</html>

Ouput:

Downloaded by Mohammed irfan m Mansoor ali t a (mohammedirfan_22csb08@kgkite.ac.in)


lOMoARcPSD|39289093

Downloaded by Mohammed irfan m Mansoor ali t a (mohammedirfan_22csb08@kgkite.ac.in)


lOMoARcPSD|39289093

Downloaded by Mohammed irfan m Mansoor ali t a (mohammedirfan_22csb08@kgkite.ac.in)


lOMoARcPSD|39289093

RESULT:
Thus the web page for online book store is created and its WebPages are
validated using JavaScript.

Downloaded by Mohammed irfan m Mansoor ali t a (mohammedirfan_22csb08@kgkite.ac.in)

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy