Scribd
Upload
23 views

Web Technology Program1,2

The document describes an experiment to create web pages with embedded maps and hotspots linked to additional information. It includes the code to create a main page with an India map image containing hotspot areas linked to pages about Delhi, Calcutta and Tamil Nadu. It also describes another experiment to create a web page using different Cascading Style Sheets methods.

Uploaded by

Monika R.T
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
23 views

Web Technology Program1,2

The document describes an experiment to create web pages with embedded maps and hotspots linked to additional information. It includes the code to create a main page with an India map image containing hotspot areas linked to pages about Delhi, Calcutta and Tamil Nadu. It also describes another experiment to create a web page using different Cascading Style Sheets methods.

Uploaded by

Monika R.T
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

EXP NO: 1

DATE:

Create a web page with the following using HTML,

a. To embed a map in a web page,

b. To fix the hot spots in that map,

c. Show all the related information when the hot spots are

clicked.

AIM:
To create a web page with the following using HTML
a.To embed a map in a web page
b. To fix the hot spots in that map
c. Show all the related information when the hot spots are clicked.

ALGORITHM:

Step 1: Start the program.


Step 2: Get the india map image and link it to the package.
Step 3: Fix the hotspots in that image.
Step 4: Map the reference of the hotspots in the image.
Step 5: Mention the derived link.
Step 6: Click the link to get the desired image.
Step 7: Stop the program.

PROGRAM:

Indiamap.html

<!DOCTYPE html>
<html>
<body>
<h1>The map area elements</h1>
<p>Click on the hotspots go to a new page and read more about the places:</p>
<img src="/home/student/Downloads/Link to india-map.jpg" alt="Workspace"
usemap="#Workmap" width="209" height="242">
<map name="Workmap">
<area shape="rect" coords="83,41,57,63" alt="delhi" href="delhi.html">
<area shape="rect" coords="149,129,124,83" alt="calcutta" href="calcutta.html">
<area shape="rect" coords="89,184,56,226" alt="tamilnadu" href="tamilnadu.html">
</map>
</body>
</html>

calcutta.html

<html>
<body bgcolor="SKYBLUE">
<font face="Times New Roman" size="10" color="RED">
<centre><br><i>Calcutta is the wealthy city in West Bengal<br>and<br>It has famous
"Sunderbans Forests"</i></b></center>
<a href="Indiamap.html">Homepage</a>
</font>
</body>
</html>

delhi.html

<html>
<body bgcolor="SKYBLUE">
<font face="Arial" size="10" color="RED">
<centre><br><i><tt>Delhi is the capital of our INDIA<br>More IT companies are
camped at Delhi</tt></i></b></center>
<a href="Indiamap.html">Homepage</a>
</font>
</body>
</html>

tamilnadu.html

<html>
<body bgcolor="CYAN">
<font face="Times New Roman" size="10" color="ORANGE">
<centre>Chennai is the capital of TamilNadu<br>and<br>More IT companies are
located at Chennai</center>
<a href="Indiamap.html">Homepage</a>
</font>
</body>
</html>
Result:

Thus the web page is created and the image is embedded with hotspot and the
linkingages successfully ,and the output is verified.
EXP NO:2

DATE:

Create a web page with the following.


a. Cascading style sheets.
b. Embedded style sheets.
c. Inline style sheets.
Use our college information for the web pages.

AIM:
To Create a web page with the following

a.Cascading style sheets.


b.Embedded style sheets.
c. Inline style sheets.
Use our college information for the web pages.

ALGORITHM:

Step 1: Start the program.


Step 2: Create a web page with framesets consisting two frames.
Step 3: In the first frame include the links
Step 4: In the second frameset display the webpage of the link.
Step 5: Create a external style sheets
Step 6: Create a inline and internal style and make a link to the external style sheet .
Step 7: Stop the program.

PROGRAM:

inline.html

<html>
<head>
<title>inline sheet</title>
</head>
<body>
<h1><center>INLINE STYLE SHEETS</h1>
<p style="font-family:Showcard Gothic">Welcome user.</p>
<p style="font-size:24pt;font-family:Microsof snas serif">Gmail</p>
<p style="font-size:20pt;color:red;font-family:arial">The world's largest spam free Email
provider</p>
<p style="font-size:15pt;color:blue;font-family:Kristen ITC">Login here..</p>
<h4 style="font-family:Lucida Handwriting">
Username:<input type="text" value="">
password:<input type="passsword" value="">
</h4>
<input type="submit" value="login">
<input type="reset value="cancel"><br><br>
</body>
</html>

Embedded style sheet


embedded.html

<html>
<head>
<title>Embedded style sheets</title>
<style type="text/css">
h1
{
font-family:times new roman;
color:green;
}
h2
{
font-family:arial;
color:red;
left:20px;
}
h3
{font-family:agency fb;
color:blue;
}
p
{
font-size:14pt;
font-family:consolas;
text-align:center;
}
</style>
</head>
<body>
<h1><center>EMBEDDED STYLE SHEET </h1>
<h2>CSE</h2>
<h3>Computer Science and Engineering</h3>
<p>
Computer Science and Engineering (CSE) is an academic program at many universities
which comprises scientific and engineering aspects of computing.
</p>
</body>
</html>

External style sheets


external.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="ex.css"/>
</head>
<body><center>
<h1>EXTERNAL STYLE SHEETS</h1>
<h2><center>ANNA UNIVERSITY</center>
</h2>
<h3>Our Institution consist of various departments:<br>
1.CSE<br>
2.ECE<br>
3.MECH<br>
4.EEE<br>
5.MECHT<br>
6.CIVIL<br>
7.IT<br></h3>
</body>
</html>

ex.css

h1
{
font-family:times new roman;
color:red;
}
h2
{
font-family:consolas;
color:blueviolet;
font-size:35;
}
h3
{
font-family:agency fb;
font-size:30;
color:violetred;
text-align:center;
}

Result:
Thus the web page is created using all types of cascading style sheets
successfully and the output is verified.

You might also like