Scribd
Upload
67 views3 pages

MidtermExam - Web Dev. 2-3

Miguel Pulta took a midterm examination on May 25, 2021 for their Web Design course. The exam covered topics like image mapping tags, attributes, and using specific shapes to create an image map of the solar system with defined clickable areas for each planet. Miguel provided code to create an image map of the solar system using <map>, <area>, and circle and rectangle shapes to define the clickable areas for planets like Jupiter, Saturn, Uranus, Neptune, and Mars.

Uploaded by

Miguel Pulta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
67 views3 pages

MidtermExam - Web Dev. 2-3

Miguel Pulta took a midterm examination on May 25, 2021 for their Web Design course. The exam covered topics like image mapping tags, attributes, and using specific shapes to create an image map of the solar system with defined clickable areas for each planet. Miguel provided code to create an image map of the solar system using <map>, <area>, and circle and rectangle shapes to define the clickable areas for planets like Jupiter, Saturn, Uranus, Neptune, and Mars.

Uploaded by

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

Midterm Examination

MAY 2022

Name: Miguel Pulta Student No: 2020-02339-MN-0 SCORE:


Schedule: 7:30—12:00 Date: May 25, 2021
Subject: WEB DESIGN Professor: MRS. MARISOL PAYRA

I. IDENTIFICATION

1. This tag creates a client-side image map. <MAP></MAP>


2. This tag defines clickable areas within a <MAP> element. <AREA>
3. This image map attributes
a. It defines maps name. NAME
b. It indicates a server side image map. ISMAP
c. It indicates URL of a client side image map. USEMAP
d. Indicates the alternate text for image display. ALT
e. Indicates the URL of the map areas. HREF
f. It indicates points bounding the map areas. COORDS
g. It also indicates the shape of the rect,poly,circle, and point. SHAPE
h. This Tag also has he attribute USEMAP and ISMAP IMG
4. It ___IMAGE________ window contains several elements similar to the document window in other applications.
5. This area is where the image displays in the paint windows. PAINT
6. The ___TOOLBOX____ displays tools that you can use to edit or draw an image.
7. It displays at the top of the window just below the title bar and shows the paint menu names. STATUSBAR
8. The ____MENUBAR_____ displays the coordinates of the center of the mouse pointer at its current position on the
image.
9. The ___BORDERS_____ can create multiple ling in single image.
10. The ____BORDERCOLOR_________ attributes sets the border color of a Frame.
11. The___MARGINWIDTH_______ attribute used to define the margin above and below the document within the frame.
12. To indicate whether scroll bars will display, use the ____SCROLLING_____ attribute.
13. The ____FRAME_____ tag is required when creating frames.
14. ____FRAMESET____defines a given frame.
15. ____TABLE_____ defines the alternate content of the frame if the browser does not support frames.
16. The HTML tag does not needed in the frame definition file is ______BODY________.
17. The _____ROWS______ attribute indicates the number of rows.
18. The ______COLS_____ attribute indicates the number of cols.

RECT X, Y MAPPING IMAGE FRAME


IMAGE MAP STATUS BAR MENU BAR TOOLBOX PAINT
ALT HREF COORDS SHAPE IMG
USEMAP ISMAP Name <AREA> <MAP></MAP>
BORDERCOLOR MARGINWIDTH SCROLLING FRAMESET BORDERS
BODY ROWS COLS ALIGN COLSPAN
TABLE NORESIZE SIZE LENGTH WIDTH

1
II. IMAGE MAPPING 25pts
Directions: Write the codes that fit to the image just use the shape of the circle and rectangle.
Use the following shapes:
Circle – Jupiter, Saturn and the remaining planets URANUS and Neptune and Mars you will use RECT shape
Image size: Width 200 Height= 200

<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>Document</title>
</head>
<body style="background-color:#2E4053 ;">

<h3 style="text-align:center; color:antiquewhite; padding-top: 40; font-size: 40;" >Image Mapping Midterms</h3>

<center><h1 style="color:antiquewhite;"><b>Miguel Pulta DICT 2-3</b></h1></center>

<center><img src="planets.png" usemap="#image-map">></center>

<map name="image-map">
<area target="" alt="Uranus" title="Uranus" href="Uranus" coords="151,81,166,105" shape="rect">
<area target="" alt="Neptune" title="Neptune" href="Neptune" coords="168,82,185,106" shape="rect">
<area target="" alt="Mars" title="Mars" href="Mars" coords="73,110,80,83" shape="rect">
<area target="" alt="Jupiter" title="Jupiter" href="Jupiter" coords="100,92,18" shape="circle">
<area target="" alt="Saturn" title="Saturn" href="Saturn" coords="134,92,15" shape="circle">
<area target="" alt="Earth" title="Earth" href="Earth" coords="64,94,NaN" shape="circle">
<area target="" alt="Venus" title="Venus" href="Venus" coords="52,95,NaN" shape="circle">
<area target="" alt="Mercury " title="Mercury " href="Mercury " coords="41,94,NaN" shape="circle">
</map>
</body>
</html>

2
OUTPUT

You might also like