Code Monkey home page Code Monkey logo

nearme's Introduction

Ex04 Places Around Me

Date: 26/03/2024

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

map.html

<html>
    <head>
        <title>Map</title>
    </head>
    <body>
        <h1 align="center">
            <font color="red"><b>Mahindra World City</b></font>
        </h1>
        <h3 align="center">
            <font color="blue"><b>Nithish Kumar P(212221040115)</b></font>
        </h3>
        <center>
            <img src="map.png" usemap="#image-map">
            <map name="image-map">
                <area target="" alt="Infosys limited" title="Infosys limited" href="info.html" coords="1051,462,1185,519" shape="rect">
                <area target="" alt="Toll Gate" title="Toll Gate" href="toll.html" coords="728,571,757,597" shape="rect">
                <area target="" alt="BMW" title="BMW" href="bmw.html" coords="1081,542,1151,571" shape="rect">
                <area target="" alt="Wabco" title="Wabco" href="wabco.html" coords="1262,499,46" shape="circle">
                <area target="" alt="Renault Nissan" title="Renault Nissan" href="nissan.html" coords="1040,355,1120,404" shape="rect">
            </map>
        </center>  
    </body>
</html>

info.html

<html>
    <head>
        <title>Map</title>
    </head>
    <body bgcolor="purple">
        <h1 align="center">
            <font color="cyan"><b>Mahindra World City</b></font>
        </h1>
        <h3 align="center">
            <font color="lime"></b>Infosys Private Limited</font>
        </h3>
        <hr size="3" color="red">
        <p align="justify">
            <font face="Georgia" size="5" color="white">
                Infosys Limited is an Indian multinational information technology company that provides business consulting, information technology and outsourcing services. 
                The company was founded in Pune and is headquartered in Bangalore. 
                Infosys is the second-largest Indian IT company, after Tata Consultancy Services, by 2020 revenue figures
            </font>
        </p>
    </body>
</html>

bmw.html

<html>
    <head>
        <title>Map</title>
    </head>
    <body bgcolor="orange">
        <h1 align="center">
            <font color="cyan"><b>Mahindra World City</b></font>
        </h1>
        <h3 align="center">
            <font color="red"><b>BMW group Plant</b></font>
        </h3>
        <hr size="3" color="red">
        <p align="justify">
            <font face="Georgia" size="5" color="black">
                BMW Group Plant Chennai started operations on 29 March 2007. BMW Group Plant Chennai locally produces 12 car models โ€“ BMW 2 Series Gran Coupe, BMW 3 Series, BMW 3 Series Gran Turismo, BMW 5 Series, BMW 6 Series Gran Turismo, BMW 7 Series, BMW X1, BMW X3, BMW X4, BMW X5, BMW X7 and MINI Countryman. 
            </font>
        </p>
    </body>
</html>

nissan.html

<html>
    <head>
        <title>Map</title>
    </head>
    <body bgcolor="violet">
        <h1 align="center">
            <font color="cyan"><b>Mahindra World City</b></font>
        </h1>
        <h3 align="center">
            <font color="green"><b>Renault Nissan of Technology</b></font>
        </h3>
        <hr size="3" color="yellow">
        <p align="justify">
            <font face="Georgia" size="5" color="black">
                Nissan Motor Co. Ltd. is a Japanese multinational automobile manufacturer headquartered in Yokohama, Kanagawa, Japan. 
                The company sells its vehicles under the Nissan and Infiniti brands, and formerly the Datsun brand, with in-house performance tuning products (including cars) under the Nismo and Autech brands. 
                The company traces back to the beginnings of the 20th century, with the Nissan zaibatsu, now called Nissan Group.
            </font>
        </p>
    </body>
</html>

toll.html

<html>
    <head>
        <title>Map</title>
    </head>
    <body bgcolor="sky blue">
        <h1 align="center">
            <font color="cyan"><b>Mahindra World City</b></font>
        </h1>
        <h3 align="center">
            <font color="green"><b>Toll Gate</b></font>
        </h3>
        <hr size="3" color="yellow">
        <p align="justify">
            <font face="Georgia" size="5" color="black">
                A toll road, also known as a turnpike or tollway or toll gate, is a public or private road (almost always a freeway in the present day) for which a fee (or toll) is assessed for passage. It is a form of road pricing typically implemented to help recoup the costs of road construction and maintenance.
                Toll roads have existed in some form since antiquity, with tolls levied on passing travelers on foot, wagon, or horseback; a practice that continued with the automobile, and many modern tollways charge fees for motor vehicles exclusively. The amount of the toll usually varies by vehicle type, weight, or number of axles, with freight trucks often charged higher rates than cars
            </font>
        </p>
    </body>
</html>

wabco.html

<html>
    <head>
        <title>Map</title>
    </head>
    <body bgcolor="yellow">
        <h1 align="center">
            <font color="cyan"><b>Mahindra World City</b></font>
        </h1>
        <h3 align="center">
            <font color="green"><b>Wabco Private Limited</b></font>
        </h3>
        <hr size="3" color="red">
        <p align="justify">
            <font face="Georgia" size="5" color="black">
                ZF holds a leading position in e-mobility, digitization as well as autonomous and networked driving in India. 
                ZF announced today that it has secured all required approvals for ZF Commercial Vehicle Control Systems India Limited to become the new name for WABCO India Limited.
            </font>
        </p>
    </body>
</html>


OUTPUT

alt text

alt text

alt text

alt text

alt text

alt text

RESULT

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

nearme's People

Contributors

selvasachein avatar nithish143257 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.