Scribd
Upload
26 views

Web Assignment

The document contains HTML code for a web page that demonstrates image insertion and image map creation. It includes an index page with images linked to separate pages for 'Computer', 'Phone', and 'Coffee', each providing descriptions and images related to the topics. The use of image maps allows for interactive areas on the 'Workplace' image that link to these specific pages.

Uploaded by

sijesim421
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
26 views

Web Assignment

The document contains HTML code for a web page that demonstrates image insertion and image map creation. It includes an index page with images linked to separate pages for 'Computer', 'Phone', and 'Coffee', each providing descriptions and images related to the topics. The use of image maps allows for interactive areas on the 'Workplace' image that link to these specific pages.

Uploaded by

sijesim421
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

1.

Image Insertion and Image Map creation for a Web page

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Image Map creation</title>
</head>
<body>
<h1>Image Insertion</h1>

<img src="place.jpg" alt="Dow Hill School" width="460"


height="345">

<h2>Image Maps</h2>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap"


width="400" height="379">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer"
href="computer.html">
<area shape="rect" coords="290,172,333,250" alt="Phone"
href="phone.html">
<area shape="circle" coords="337,300,44" alt="Cup of
coffee" href="coffee.html">
</map>

</body>
</html>
Computer.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Computer</title>
</head>
<body>
<h1>Computer</h1>
<img src="mac.jpg" alt="Mac" width="460" height="345">

<p>A computer is a device that can be instructed to carry out


arbitrary sequences of arithmetic or logical operations
automatically.</p>
</body>
</html>

Phone.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Phone</title>
</head>
<body>
<h1>Phone</h1>
<img src="cellphone.jpg" alt="Cell Phone" width="460"
height="345">

<p>A telephone, or phone, is a telecommunications device that


permits two or more users to conduct a conversation when they are
too far apart to be heard directly.</p>
</body>
</html>

Co ee.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Coffee</title>
</head>
<body>
<h1>Coffee</h1>
<img src="coffeehouse2.jpg" alt="Coffee" width="460"
height="345">

<p>Coffee is a brewed drink prepared from roasted coffee


beans, which are the seeds of berries from the Coffea plant.</p>
</body>
</html>
ff
OutPut:

You might also like