Create a web site (set of web pages) for a zoo. The following requirements must
ID: 2247615 • Letter: C
Question
Create a web site (set of web pages) for a zoo.
The following requirements must be met:
1. The home page must have an image map with 2 hot spots. One of the hot spots must be a circle shape; the other must be a polygon shape. The example output home page image map has 4 hot spots (3 circles and 1 polygon). Your image map must be based on a real zoo map. You can use Microsoft PowerPoint and Microsoft Paint to create your image map image file. See the document, "How to Create an Image Map Image File" to understand this better.
2. Each image map hot spot must use a title tag to cause a pop-up identification when the mouse is hovered over it.
3. The home page is considered to be at level 0 of the navigation hierarchy. Both of its hot spot links must lead to a 2-level navigation path (level 1 and level 2 on each path). Each page must include a working breadcrumb trail at its top left. One of the 2nd-level pages must link to a 3rd-level page that includes an embedded YouTube video. The link to this 3rd-level page must cause it to be opened in a new browser tab. All other links must open their target page in the current browser window. The 3rd-level page is the only page (other than the home page) that must NOT include a breadcrumbs trail.
4. One of your 1st-level pages must include either an ordered or an unordered list. The other 1st-level page must include a dictionary list.
5. The images of your animals do not have to be pictures of animals that actually came from your chosen zoo. All that matters is that your animal images match the hot spot animal category on the image map.
3- Example Output Navigation Map: All links replace the current window, except where noted as "(new tab)". Zoo Home Page Zoo Birds Zoo Elephants Wild Elephants Elephants Video (new tab) Zoo Giraffes Wild Giraffes Zoo Zebras Wild ZebrasExplanation / Answer
home.html
<html>
<head>
<title>Zoo Home Page</title>
</head>
<body>
<h1 align="middle">Zoo Home Page</h1>
<p align="center"><img src="home1.png" alt="home1" ></p>
<p align="center"><img src="home2.png" alt="home2" ></p>
<p align="center"><img src="home3.png" alt="home3" ></p>
<a href="birds.html" >Zoo Birds</a><br>
<a href="elephant.html" >Zoo Elephants</a><br>
<a href="giraffe.html" >Zoo Giraffes</a><br>
<a href="zebras.html" >Zoo Zebras</a><br>
</body>
</html>
birds.html
<html>
<head>
<title>Zoo Birds</title>
</head>
<body>
<u><a href="home.html">Home></a></u>
<h1> Zoo Birds</h1>
<ul><li>Crowned Pigeons</li></ul>
<img src="bird1.png" alt="home1" hspace="20" ><br>
<ul><li>Golden Pheasants</li></ul>
<img src="bird2.png" alt="home1" hspace="20"><br>
<ul><li>Gouldian Finches</li></ul>
<img src="bird3.png" alt="home1" hspace="20" ><br>
</body>
</html>
elephant.html
<html>
<head>
<title>Zoo Elephants</title>
</head>
<body>
<u><a href="home.html">Home ></a></u>
<h1> Zoo Elephants</h1>
<img src="ele1.png" alt="home1" >
<img src="ele2.png" alt="home1" ><br>
<h2>Elephant Facts</h2>
<ol>
<li>Elephants live in Africa and Asia</li>
<li>Elephants are big.</li>
<li>Elephants are smart.</li>
<li>Elephants are herbivores.</li>
<li>Elephants like to play in water.</li>
</ol>
<h2>Explore Elephants</h2>
<a href="wildelephant.html">Wild Elephants </a>
<br><br><hr>
</body>
</html>
wildelephant.html
<html>
<head>
<title>Wild Elephants</title>
</head>
<body>
<u><a href="home.html">Home ></a></u>
<u><a href="elephant.html">Zoo Elephants ></a></u>
<h1> Wild Elephants</h1>
<img src="wel1.png" alt="home1" >
<img src="wel2.png" alt="home1" ><br><br>
<u><a href="">Elephants Video</a></u>
<br><br>
<hr>
</body>
</html>
giraffe.html
<html>
<head>
<title>Zoo Giraffes</title>
</head>
<body>
<u><a href="home.html">Home ></a></u>
<h1> Zoo Giraffes</h1>
<img src="giraf1.png" alt="home1" >
<img src="giraf2.png" alt="home1" ><br>
<h2>Giraffe Facts</h2>
<dl>
<dt>Habit</dt>
<dd>Giraffes live in the grasslands of Africa.This is morefiller text.
This is more filler text.This is more filler text.This is more filler text.This is more <br>
filler text.This is more filler text.This is more filler text.This is more filler text.
This is more filler text.This is more filler text.</dd>
<dt>Neck</dt>
<dd>Giraffes have the longest neck of any animal.</dd>
<dt>Diet</dt>
<dd>Giraffes are herbivores.</dd>
<dt>Speed</dt>
<dd>"The giraffe can reach a sprint speed of up to 60km/h(37mph), and can sustain 50km/h(31mph) for sevaral kilometers."[Wikipedia] This is<br>
more filler text.This is more filler text.This is more filler text.This is more filler text.This is more filler text.This is more filler text.This is more <br>filler text.
This is more filler text.This is more filler text.</dd>
</dl>
<h2>Explore Giraffes</h2>
<a href="wildgirafe.html">Wild Giraffes </a>
</body>
</html>
wildgirafe.html
<html>
<head>
<title>Wild Giraffes</title>
</head>
<body>
<u><a href="home.html">Home ></a></u>
<u><a href="giraffe.html">Zoo Giraffes ></a></u>
<h1> Wild Giraffes</h1>
<img src="wgiraf.png" alt="home1" >
<br><br>
<hr>
</body>
</html>
zebras.html
<html>
<head>
<title>Zoo Zebras</title>
</head>
<body>
<u><a href="home.html">Home ></a></u>
<h1> Zoo Zebras</h1>
<img src="ze1.png" alt="ze1" >
<img src="ze2.png" alt="ze2" ><br>
<h2>Zebra Facts</h2>
<ol>
<li>Zebras live in Africa.</li>
<li>Zebras have stripes.</li>
<li>Zebras are herbivores.</li>
<li>Zebras like the graceslands.</li>
<li>Zebras constently watch out for carnivores.</li>
</ol>
<h2>Explore Zebras</h2>
<br><br><hr>
<a href="">Wild Zebras </a>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.