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.
##map.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="container">
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="c:\Users\admin\Downloads\empd unit 1 qb_files\map.jpg" usemap="#image-map">
<map name="image-map">
<area target="" alt="nellore" title="nellore" href="nel.html" coords="1409,441,1487,550" shape="rect">
<area target="" alt="kanuparthipadu" title="kanuparthipadu" href="kanu.html" coords="1351,588,1603,655" shape="rect">
<area target="" alt="mulumudi" title="mulumudi" href="mul.html" coords="1087,418,1226,525" shape="rect">
<area target="" alt="golagamudi" title="golagamudi" href="gol.html" coords="1348,683,1511,747" shape="rect">
<area target="" alt="katepalli beach" title="katepalli beach" href="kate.html" coords="1594,558,1843,713" shape="rect">
</map>
</map>
</div>
</div>
</body>
</html>
##nel.html
<!DOCTYPE html>
<html>
<head>
<title>Nellore - Coastal City of Andhra Pradesh</title>
<link rel="icon" href="https://upload.wikimedia.org/wikipedia/commons/6/65/Hindu_Temple_icon.png">
<style>
body {
background-color: #fffbf2; /* Soft beige background for warmth */
color: #333333; /* Dark text color for readability */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 22px; /* Increased font size */
}
h1 {
color: #ffffff; /* White text for the header */
background-color: #ff6f61; /* Vibrant coral background */
padding: 15px;
font-size: 40px;
border-radius: 10px;
}
ul {
line-height: 1.8;
padding-left: 20px;
}
li {
padding: 5px;
}
img {
width: 90%; /* Responsive and large */
max-width: 1000px;
height: auto;
border: 5px solid #ff6f61; /* Matching border color */
border-radius: 15px;
}
h3 {
color: #4b9f67; /* Soft green text for the list */
}
marquee {
font-size: 30px;
color: #ffffff;
background-color: #2c3e50; /* Darker background for marquee */
}
</style>
</head>
<body>
<h1>
<marquee>Nellore - City of Culture, Coast & Irrigation</marquee>
</h1>
<center>
<img src="https://assets.thehansindia.com/h-upload/2022/09/05/1310958-irrigation-projects.webp"
alt="Nellore Irrigation Projects">
</center>
<h3>
<ul>
<li><strong>Nellore</strong> is a major city in Andhra Pradesh known for its agriculture, aquaculture, and coastal beauty.</li>
<li>The region plays a vital role in rice cultivation and is supported by advanced irrigation systems and river projects.</li>
<li>Its strategic location near the Bay of Bengal and on the banks of the Penna River adds to its agricultural richness.</li>
<li>The city is also home to historic temples, vibrant culture, and spiritual centers like <strong>Golagamudi</strong>.</li>
<li>Nellore is emerging as a fast-growing educational, industrial, and commercial hub in southern Andhra Pradesh.</li>
<li>It represents a beautiful blend of nature, tradition, and modern progress, making it a city of significance in South India.</li>
</ul>
</h3>
</body>
</html>
##kanu.html
<!DOCTYPE html>
<html>
<head>
<title>Kanuparthipadu - A Hidden Gem in Andhra Pradesh</title>
<link rel="icon" href="https://upload.wikimedia.org/wikipedia/commons/6/65/Hindu_Temple_icon.png">
<style>
body {
background-color: rgb(0, 234, 255);
color: azure;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 22px; /* Increased font size */
}
h1 {
color: whitesmoke;
background-color: rgb(255, 0, 93);
padding: 10px;
font-size: 40px;
}
ul {
line-height: 1.8;
}
img {
width: 90%; /* Responsive and large */
max-width: 1000px;
height: auto;
border: 5px solid white;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>
<marquee>Kanuparthipadu - A Hidden Gem in Andhra Pradesh</marquee>
</h1>
<center>
<img src="https://housing-images.n7net.in/01c16c28/5bdfa24e60dfac59e92b5fbe8073a32c/v0/large/residential_plot-for-sale-gundlapalem_1-Nellore-plot_view.jpg"
alt="Kanuparthipadu Image">
</center>
<h3>
<ul>
<li><strong>Kanuparthipadu</strong> is a quaint village located in the southern region of Andhra Pradesh, India.</li>
<li>This serene village is known for its peaceful environment, agricultural lands, and vibrant rural culture.</li>
<li>Kanuparthipadu is home to lush green fields, making it a perfect escape for nature lovers and photography enthusiasts.</li>
<li>The village's close-knit community and traditional lifestyle make it a great place to experience rural life in its purest form.</li>
<li>The village is also famous for its local festivals, which showcase the rich cultural heritage of the region.</li>
<li>Visitors to Kanuparthipadu can enjoy scenic walks, local cuisine, and explore the simple joys of village life.</li>
</ul>
</h3>
</body>
</html>
##mul.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mulumudi - A Serene Village in Andhra Pradesh</title>
<link rel="icon" href="https://upload.wikimedia.org/wikipedia/commons/6/65/Hindu_Temple_icon.png">
<style>
body {
background-color: #f1f1f1; /* Soft light gray background */
color: #333333; /* Darker text color for better readability */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 22px; /* Increased font size */
}
h1 {
color: #ffffff; /* White text for the header */
background-color: #ff6f61; /* Warm coral background */
padding: 15px;
font-size: 40px;
}
ul {
line-height: 1.8;
}
img {
width: 90%; /* Responsive and large */
max-width: 1000px;
height: auto;
border: 5px solid #ff6f61; /* Warm coral border around the image */
border-radius: 15px;
}
marquee {
font-size: 30px;
}
</style>
</head>
<body>
<h1>
<marquee>Mulumudi - A Serene Village in Andhra Pradesh</marquee>
</h1>
<center>
<img src="https://th-i.thgim.com/public/news/cities/Delhi/waoue6/article25706413.ece/alternates/LANDSCAPE_1200/DE09PARK"
alt="Mulumudi Village">
</center>
<h3>
<ul>
<li><strong>Mulumudi</strong> is a serene and tranquil village located in the southern part of Andhra Pradesh, India.</li>
<li>This village is known for its natural beauty, surrounded by lush greenery and peaceful rural landscapes.</li>
<li>The community in Mulumudi is closely knit, and the lifestyle here offers a unique experience of rural India.</li>
<li>It is an ideal spot for visitors who want to enjoy nature walks, explore agricultural lands, and witness traditional village life.</li>
<li>The area is also known for its local festivals and cultural events, which are a major attraction for tourists.</li>
<li>Visitors to Mulumudi can relax, engage with the locals, and enjoy the simple pleasures of village life.</li>
</ul>
</h3>
</body>
</html>
##gol.html
<!DOCTYPE html>
<html>
<head>
<title>Golagamudi - Spiritual Destination</title>
<link rel="icon" href="https://upload.wikimedia.org/wikipedia/commons/6/65/Hindu_Temple_icon.png">
<style>
body {
background-color: rgb(0, 234, 255);
color: azure;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 22px; /* Increased font size */
}
h1 {
color: whitesmoke;
background-color: rgb(255, 0, 93);
padding: 10px;
font-size: 40px;
}
ul {
line-height: 1.8;
}
img {
width: 90%; /* Responsive and large */
max-width: 1000px;
height: auto;
border: 5px solid white;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>
<marquee>Golagamudi - Home of Sri Venkaiah Swamy</marquee>
</h1>
<center>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7YpZ1NyeoK_vEro8B-zuIRLeE77Rw0_O0Oc4jXxDwt3chmZnd4Fqdk-966gfy6EjUGbJseOrcAiIsBLznpNinHx3e1KYww_QV04-Z4lxm16xCDLrxrEfKUGd9a6EBGQAdbWbfu0WzXsM/s1600/IMG_20181109_111352043.jpg"
alt="Golagamudi Temple" >
</center>
<h3>
<ul>
<li><strong>Golagamudi</strong> is a renowned spiritual village located in the Nellore district of Andhra Pradesh.</li>
<li>It is the final resting place of Sri Venkaiah Swamy, a revered saint believed to be an incarnation of Lord Dattatreya.</li>
<li>The village attracts thousands of devotees every week, especially on Sundays, for darshan and blessings.</li>
<li>A beautifully maintained temple has been built over Swamy’s Samadhi, making Golagamudi a major pilgrimage site.</li>
<li>Devotional events, bhajans, and free meals (annadanam) are regularly organized for pilgrims and visitors.</li>
<li>The peaceful atmosphere, spiritual energy, and historical relevance make Golagamudi a sacred destination for seekers.</li>
</ul>
</h3>
</body>
</html>
##kate.html
<!DOCTYPE html>
<html>
<head>
<title>Katepalli Beach - A Serene Coastal Paradise</title>
<link rel="icon" href="https://upload.wikimedia.org/wikipedia/commons/6/65/Hindu_Temple_icon.png">
<style>
body {
background-color: #f0f8ff; /* Soft sky blue */
color: #2c3e50;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px; /* Smaller font size */
margin: 0;
padding: 0;
}
h1 {
color: #ffffff;
background-color: #ff7f50; /* Coral */
padding: 20px;
font-size: 32px; /* Smaller title font */
margin: 0;
border-bottom: 5px solid #ffa07a;
}
ul {
line-height: 1.6;
padding: 20px;
}
li {
padding: 4px 0;
}
img {
width: 90%;
max-width: 1000px;
height: auto;
border: 4px solid #ffa07a;
border-radius: 12px;
margin-top: 20px;
}
marquee {
font-size: 20px;
color: white;
background-color: #2e8b57;
padding: 8px;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>
<marquee>Katepalli Beach - A Serene Coastal Paradise</marquee>
</h1>
<center>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRcn__uv3kIpKF2eLhz6ZDQ0w4m93BNfMeuz2vGpl89RnoiOHHbSA2I_HW27dbEjiHuG0E&usqp=CAU"
alt="Katepalli Beach">
</center>
<h3>
<ul>
<li><strong>Katepalli Beach</strong> is a beautiful and peaceful beach located in the coastal part of Andhra Pradesh, India.</li>
<li>Known for its golden sands and quiet atmosphere, it's a perfect escape from city life.</li>
<li>It's less crowded, offering a peaceful spot to unwind and connect with nature.</li>
<li>Beach walks, photography, and exploring local marine life are popular activities here.</li>
<li>The sunsets are breathtaking, making it a hidden gem for nature lovers and travelers.</li>
</ul>
</h3>
</body>
</html>
The program for implementing image maps using HTML is executed successfully.