Skip to content

Update README.md #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Nivedhakaliaperumal76 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Update README.md #6

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f12421b
Update README.md
Nivedhakaliaperumal76 Dec 27, 2025
55dd88d
Update README.md
Nivedhakaliaperumal76 Jan 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
197 changes: 196 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
# Ex04 Places Around Me
# Date:
# Date:22/12/2025
# AIM
To develop a website to display details about the places around my house.

Expand All @@ -23,6 +23,201 @@ Write HTML programs for all the regions identified.
Execute the programs and publish them.

# CODE
"
map.html

<!DOCTYPE html>
<html>
<head>
<title>My City</title>

<style>
img {
max-width: 100%;
height: auto;
display: block;
margin: auto;
}
</style>
</head>

<body>
<h1 style="text-align:center;">CHENNAI</h1>
<h3 style="text-align:center;">Nivedha K(25013942)</h3>

<img src="Screenshot 2025-12-14 074007.png" usemap="#image-map">

<map name="image-map">
<area alt="Sholinghur" href="Sholinghur.html" coords="221,367,66" shape="circle">
<area alt="Tambaram" href="Tambaram.html" coords="1440,705,60" shape="circle">
<area alt="Thiruvallur" href="Thiruvallur.html" coords="1098,335,58" shape="circle">
<area alt="Adyar" href="Adyar.html" coords="1728,572,64" shape="circle">
</map>

<!-- ✅ PLACE LIST HERE -->
<hr>

<h2>Places in Chennai</h2>

<ul>
<li><a href="Adyar.html">Adyar</a></li>
<li><a href="Tambaram.html">Tambaram</a></li>
<li><a href="Sholinghur.html">Sholinghur</a></li>
<li><a href="Thiruvallur.html">Thiruvallur</a></li>
</ul>

</body>
</html>

Adyar.html

<!DOCTYPE html>
<html>
<head>
<title>Adyar</title>
<style>
body {
background-color: #fce4ec;
font-family: Verdana, sans-serif;
margin: 0;
padding: 40px;
}
.section {
background: white;
padding: 25px;
border-radius: 15px;
border: 2px dashed #ad1457;
}
</style>
</head>
<body>
<h1>Adyar</h1>
<div class="section">
<p>
Adyar is a well-known residential and commercial area in Chennai.
It is located along the banks of the Adyar River and close to the Bay of Bengal.
The area is famous for educational institutions, IT offices, and peaceful residential localities.
Adyar is also known for its greenery and good quality of life.
</p>
</div>
</body>
</html>

Tambaram.html

<!DOCTYPE html>
<html>
<head>
<title>Tambaram</title>
<style>
body {
background-color: #e8f5e9;
font-family: Arial, sans-serif;
margin: 0;
padding: 40px;
}
.card {
background: #ffffff;
padding: 25px;
border-left: 8px solid #2e7d32;
}
</style>
</head>
<body>
<h1>Tambaram</h1>
<div class="card">
<p>
Tambaram is a major suburban area located in the southern part of Chennai.
It serves as an important railway junction and transport hub.
The area has good connectivity to IT corridors and educational institutions.
Tambaram is a rapidly developing residential and commercial zone.
</p>
</div>
</body>
</html>

Sholinghur.html

<!DOCTYPE html>
<html>
<head>
<title>Sholinghur</title>
<style>
body {
background-color: #e3f2fd;
font-family: "Times New Roman", serif;
margin: 0;
padding: 40px;
}
.box {
background: white;
padding: 25px;
border-radius: 12px;
}
</style>
</head>
<body>
<h1>Sholinghur</h1>
<div class="box">
<p>
Sholinganur is a fast-growing locality in Chennai, known for its IT parks and offices.
It lies along the Old Mahabalipuram Road (OMR), also called the IT corridor.
Many software companies and professionals are located in this area.
Sholinganur plays a key role in Chennai’s technological development.
</p>
</div>
</body>
</html>

Thiruvallur.html

<!DOCTYPE html>
<html>
<head>
<title>Thiruvallur</title>
<style>
body {
background-color: #fff3e0;
font-family: Georgia, serif;
margin: 0;
padding: 40px;
}
.content {
background: #ffffff;
padding: 25px;
border-radius: 8px;
box-shadow: 0 0 10px #ccc;
}
</style>
</head>
<body>
<h1>Thiruvallur</h1>
<div class="content">
<p>
Thiruvallur is a town located on the outskirts of Chennai.
It is known for its temples, especially the Veera Raghava Perumal Temple.
The area has a mix of cultural heritage and industrial growth.
Thiruvallur connects Chennai with nearby towns and rural regions.
</p>
</div>
</body>
</html>

# OUTPUT
<img width="1280" height="680" alt="image" src="https://github.com/user-attachments/assets/50f803ee-7a81-473a-9397-3c671606fbad" />

<img width="1280" height="630" alt="image" src="https://github.com/user-attachments/assets/4c941cdf-a0c0-4c7b-9b34-43942c9e1bed" />

![WhatsApp Image 2026-01-05 at 09 36 04](https://github.com/user-attachments/assets/67465f60-0c7b-480f-b31d-ae635eea5661)

![WhatsApp Image 2026-01-05 at 09 36 18](https://github.com/user-attachments/assets/c52a7a09-c0d1-400e-aca4-6a012fefbf12)

![WhatsApp Image 2026-01-05 at 09 36 30](https://github.com/user-attachments/assets/c6ea6de5-1253-4db5-907b-30d410f2ff2e)






# RESULT
The program for implementing image maps using HTML is executed successfully.