Ex04 Places Around Me

AIM

To develop a website to display details about the places around my house.

DESIGN STEPS

STEP 1

Create a Django admin interface.

STEP 2

Download your city map from Google.

STEP 3

Using <map> tag name the map.

STEP 4

Create clickable regions in the image using <area> tag.

STEP 5

Write HTML programs for all the regions identified.

STEP 6

Execute the programs and publish them.

CODE:

INDEX:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>"MAP"</title>
    <h1 align="center">
        <font color="blueS" face="cursive">
           Elamaran 212222040041- MAP 
        </font>
    </h1>
</head>
<body>
    <img src="/static/map.jpg" usemap="#image-map">

    <map name="image-map">
        <area target="" alt="vailnkannischool" title="vailnkannischool" href="vailnkannischool.html" coords="626,63,115" shape="circle">
        <area target="" alt="hotelagni" title="hotelagni" href="hotelagni.html" coords="333,365,97" shape="circle">
        <area target="" alt="textilemarket" title="textilemarket" href="textilemarket.html" coords="1122,615,116" shape="circle">
        <area target="" alt="busstand" title="busstand" href="busstand.html" coords="947,461,101" shape="circle">
        <area target="" alt="bdooffice" title="bdooffice" href="bdo.html" coords="158,184,133" shape="circle">
    </map>
</body>
</html>

BDO OFFICE:

<h1 align="center">
    <font color="blueS" face="cursive">
        BDO OFFICE
    </font>
</h1>
<p align="center">
    <font color="black" face="Comic Sans MS" size="24">
        <OL  TYPE="1" START="1">
            <LI>This is a block development officer office in bargur.<br></LI>     
            <LI>A BDO is a government official who is responsible for overseeing the development of a specific administrative block or region within a district.<br></LI>
            
        </OL>


    </font>
    <font color ="blue" face = "cursive" size="20" > 
    "GOVERNMENT OFFICE"
    </font>

BUSSTAND:

<h1 align="center">
    <font color="purple" face="cursive">
        BUS STAND
    </font>
</h1>
<p align="center">
    <font color="black" face="Comic Sans MS" size="24">
        <OL  TYPE="1" START="1">
            <LI>This is a very popular bus stand in bargur.<br></LI>     
            <LI>its biggest bus stand.<br></LI>
            
        </OL>


    </font>
    <font color ="purple" face = "cursive" size="20" > 
    "MOST POPULAR BUS STAND"
    </font>

HOTEL AGNI:

<h1 align="center">
    <font color="purple" face="cursive">
           HOTEL AGNI
    </font>
</h1>
<p align="center">
    <font color="black" face="Comic Sans MS" size="24">
        <OL  TYPE="1" START="1">
            <LI>This stunning luxury farm stay offers all the style and amenities of a five star hote.<br></LI>     
            <LI>This is the best five star hotel in bargur.<br></LI>
            <LI>Hotel Agni has an outdoor swimming pool, garden, a terrace and restaurant in Krishnagiri.<br></LI>
            
        </OL>


    </font>
    <font color ="purple" face = "cursive" size="20" > 
    "FAMOUS FIVE STAR HOTEL"
    </font>

TEXTILE MARKET:

<h1 align="center">
    <font color="purple" face="cursive">
        Textile market
    </font>
</h1>
<p align="center">
    <font color="black" face="Comic Sans MS" size="24">
        <OL  TYPE="1" START="1">
            <LI>Textile Wholesalers in Bargur, Krishnagiri is the one-stop shop for all your textile wholesale needs.<br></LI>     
            <LI>This is the biggest textile market in our district<br></LI>
            
        </OL>


    </font>
    <font color ="purple" face = "cursive" size="20" > 
    "CHEAP AND BEST TEXTILE MARKET"
    </font>

VAILNKANNI SCHOOL:

<h1 align="center">
    <font color="purple" face="cursive">
           VAILNKANNI SCHOOL
    </font>
</h1>
<p align="center">
    <font color="black" face="Comic Sans MS" size="24">
        <OL  TYPE="1" START="1">
            <LI>Vailankanni Matric Hr. Secondary School is an English Medium co0educational school..<br></LI>     
            <LI>Every Student is expected to strive this goal by dedicated efforts.<br></LI>
            
        </OL>


    </font>
    <font color ="purple" face = "cursive" size="20" > 
    "BEST PRIVATE SCHOOL"
    </font>