To develop a website to display details about the places around my house.
Create a Django admin interface.
Download your city map from Google.
Using <map> tag name the map.
Create clickable regions in the image using <area> tag.
Write HTML programs for all the regions identified.
Execute the programs and publish them.
mapmap.html
<html>
<style>
body{
background-color:#9855aa;
}
img{
width: 1000px;
display: flex;
align-items: center;
}
.imgDiv{
display: flex;
justify-content: center;
align-items: center;
}
.title{
display: flex;
justify-content: center;
align-items: center;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-variant: small-caps;
font-size: 20px;
}
.subtitle{
display: flex;
justify-content: center;
align-items: center;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-weight: 700;
}
</style>
<body>
<div class="title">
<h1>Chennai city</h1>
</div>
<div class="subtitle">
<h3>Haridharshini J(24900163)</h3>
</div>
<hr>
<section class="imgDiv">
<img src="web.png" usemap="#image-map">
</section>
<map name="image-map">
<area target="_blank" alt="Adyar" title="Adyar" href="adyar.html" coords="665,325,35" shape="circle">
<area target="_blank" alt="Guindy" title="Guindy" href="guindy.html" coords="595,312,35" shape="circle">
<area target="_blank" alt="Velachery" title="Velachery" href="velachery.html" coords="598,381,43" shape="circle">
<area target="_blank" alt="Tnagar" title="Tnagar" href="tnagar.html" coords="632,246,44" shape="circle">
<area target="_blank" alt="Annanagar" title="Annanagar" href="annanagar.html" coords="582,172,38" shape="circle">
</map>
</body>
</html>
velachery.html
<html>
<style>
body{
background-color:orchid;
}
p{
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 20px;
font-weight: 700;
}
h1{
display: flex;
justify-content: center;
align-items: center;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-variant: small-caps;
font-size: 40px;
}
h3{
display: flex;
justify-content: center;
align-items: center;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-weight: 700;
}
</style>
<body>
<h1>Chennai City</h1>
<h3>Velachery</h3>
<hr>
<p>Velachery is an established residential locality situated in South Chennai and surrounded by prominent areas such as Guindy, Perungudi, Taramani, Madipakkam and Nanganallur.<br>
The locality is dominated by independent residential houses and low-rise apartment projects.<br>
Presence of civic amenities, proximity to significant IT hubs and excellent connectivity are the main factors driving residential demand here.</p>
</p>
</body>
</html>
annanagar.html
<html>
<style>
body{
background-color:cornflowerblue;
}
p{
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 20px;
font-weight: 700;
}
h1{
display: flex;
justify-content: center;
align-items: center;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-variant: small-caps;
font-size: 40px;
}
h3{
display: flex;
justify-content: center;
align-items: center;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-weight: 800;
}
</style>
<body>
<h1>Chennai City</h1>
<h3>Annanagar</h3>
<hr>
<p> Anna Nagar is one of the most expensive, premium and well-planned residential locality comprising excellent social infrastructure and a sound arrangement of internal roads.<br>
Anna Nagar is known for bungalows, independent residential houses and apartments.<br>
It is surrounded by established locales of Villivakkam, Ayanavaram, Kilpauk, Arumbakkam and Koyambedu</p>
</p>
</body>
</html>
tnagar.html
<html>
<style>
body{
background-color:rgb(144, 189, 216);
}
p{
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 20px;
font-weight: 700;
}
h1{
display: flex;
justify-content: center;
align-items: center;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-variant: small-caps;
font-size: 40px;
}
h3{
display: flex;
justify-content: center;
align-items: center;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-weight: 700;
}
</style>
<body>
<h1>Chennai City</h1>
<h3>TNagar</h3>
<hr>
<p>T Nagar is short for Thyagaraya Nagar, which is a premium commercial and residential locality of Chennai.<br>
It is one of the most planned and well-established localities of Chennai. <br>
The area of T Nagar is famous for retail outlets offering a variety of merchandise. <br>
The Chennai International airport is just 13 KM away from T Nagar.</p>
</p>
</body>
</html>
adyar.html
<html>
<style>
body{
background-color: pink;
}
p{
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 20px;
font-weight: 700;
}
h1{
display: flex;
justify-content: center;
align-items: center;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-variant: small-caps;
font-size: 40px;
}
h3{
display: flex;
justify-content: center;
align-items: center;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-weight: 700;
}
</style>
<body>
<h1>
Chennai city
</h1>
<h3>Adyar</h3>
<hr>
<p>
Adyar is a neighbourhood located in southern Chennai.<br>
The name of this locality comes from the Adyar river, flowing to its estuary through the broken bridge in the east.<br>
The locality is strategically located to be in proximity to major employment hubs in the city.
</p>
</body>
</html>
guindy.html
<html>
<style>
body{
background-color:coral;
}
p{
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 20px;
font-weight: 700;
}
h1{
display: flex;
justify-content: center;
align-items: center;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-variant: small-caps;
font-size: 40px;
}
h3{
display: flex;
justify-content: center;
align-items: center;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-weight: 700;
}
</style>
<body>
<h1>Chennai City</h1>
<h3>Guindy</h3>
<hr>
<p>Guindy is a luxury locality situated in the southern part of Chennai. <br>The pincode of this locality is 600032.<br>
This locality is near SIDCO Industrial Estate, Guindy, Race View Colony and Guindy Institutional Area. </p>
</p>
</body>
</html>
.png)
.png)
.png)
.png)
.png)
.png)
The program for implementing image maps using HTML is executed successfully.