JUSTIN VARGHESE 7107231040437
[Link]: 1
Date:
CREATING A WEBPAGE USING IMAGE MAP
AIM:
To create a web page with image and hot spots using HTML
i. To embed an image map in a web page.
ii. To fix the hotspots.
iii. Show all the related information when the hotspots are clicked.
ALGORITHM:
Step 1: Open a Notepad.
Step 2: Write the code for [Link]
Step 3: Enter a program that includes tag for <map> and other tags.
Step 4: Insert hyperlink using <a href>.
Step 5: Save the file with .html extension.
Step 6: Run the program in web browser.
Step 7: Display the results.
HTML CODE:
I. [Link]:-
<html>
<head>
<title>Home - Cities of England</title>
</head>
<body bgcolor="lightyellow">
<h1><u><center>England - United Kingdom</center></u></h1>
<p>
England, part of the United Kingdom, is a country steeped in history and culture.
It is home to some of the world’s most iconic landmarks, diverse cities, and a strong industrial
legacy.
</p>
<center>
<!-- Use your mapped image -->
<img src="England_map.png" usemap="#image-map" alt="Map of England" height="auto"
width="auto">
1
22UIT503 – WEB PROGRAMMING LABORATORY
JUSTIN VARGHESE 7107231040437
<!-- Hotspots generated from [Link] -->
<map name="image-map">
<area target="" alt="London" title="London" href="[Link]" coords="652,684,751,809"
shape="rect">
<area target="" alt="Birmingham" title="Birmingham" href="[Link]"
coords="484,596,120" shape="circle">
<area target="" alt="Manchester" title="Manchester" href="[Link]"
coords="320,118,499,419" shape="rect">
</map>
</center>
<h2>Features</h2>
<ul>
<li><b>Capital</b> - London</li>
<li><b>Language</b> - English</li>
<li><b>Currency</b> - Pound Sterling (£)</li>
<li><b>Time Zone</b> - GMT / BST (Summer)</li>
<li><b>Famous Landmarks</b> - Big Ben, Stonehenge, Buckingham Palace</li>
</ul>
<h2><b>Click on the map to explore major cities of England!</b></h2>
</body>
</html>
II. [Link]:-
<html>
<head><title>London - England</title></head>
<body bgcolor="lightcyan">
<h1><center>London</center></h1>
<h3>
London is the capital and largest city of England. It is known for its cultural diversity, finance
industry, and historic landmarks.
</h3>
<ul>
<li>Population - 9 million+</li>
<li>Famous Landmarks - Big Ben, London Eye, Tower Bridge</li>
<li>Known for - Finance, Tourism, Royal Family, Theatres</li>
</ul> 2
22UIT503 – WEB PROGRAMMING LABORATORY
JUSTIN VARGHESE 7107231040437
<a href="[Link]">Back</a>
</body>
</html>
III. [Link]:-
<html>
<head><title>Birmingham - England</title></head>
<body bgcolor="lavender">
<h1><center>Birmingham</center></h1>
<h3>
Birmingham is a large city in central England, known for its network of canals, industrial
revolution heritage, and vibrant culture.
</h3>
<ul>
<li>Population - 1.1 million+</li>
<li>Famous for - Industrial Revolution, Canals, Bullring Shopping Centre</li>
<li>Major Attractions - Birmingham Museum, Library of Birmingham</li>
</ul>
<a href="[Link]">Back</a>
</body>
</html>
IV. [Link]:-
<html>
<head><title>Manchester - England</title></head>
<body bgcolor="lightgreen">
<h1><center>Manchester</center></h1>
<h3>
Manchester is a major city in northwest England known for its rich industrial heritage and musical
scene.
</h3>
<ul>
<li>Population - 500,000+</li>
<li>Famous for - Football Clubs (Man Utd & Man City), Music, Industry</li>
<li>Attractions - Science & Industry Museum, Manchester Cathedral</li>
</ul>
<a href="[Link]">Back</a> 3
22UIT503 – WEB PROGRAMMING LABORATORY
JUSTIN VARGHESE 7107231040437
</body>
</html>
OUTPUT:
4
22UIT503 – WEB PROGRAMMING LABORATORY
JUSTIN VARGHESE 7107231040437
RESULT:
Thus, the program to create a webpage using with Image-map was executed and the Output was
verified successfully. 5
22UIT503 – WEB PROGRAMMING LABORATORY
JUSTIN VARGHESE 7107231040437
6
22UIT503 – WEB PROGRAMMING LABORATORY
