You scroll down the page and view the relevant code. All of the image maps are contained within the <map> tags.
Code
<p><img src="assets/fruit.gif" width="300"
height="245" align="middle" usemap="#earthfarm"
border="0" vspace="0" hspace="75"></p>
<map name="earthfarm">
<area shape="rect" href="banana.html"
coords="11,34,98,180"/>
<area shape="poly"
href="grape.html"
coords="178,165,50,189,81,212,153,211"/>
<area shape="circ"
href="peach.html" coords="227,159,48"/>
</map>
The <area> tag is used to define an area inside the image map. The first image referenced in the code is of a banana shape. It is defined as a rectangle by using the shape attribute.
The href attribute links the image to a location - in this case, a web page called banana.html.
The coords attribute defines the dimensions of the rectangle within the image based on pixels.
Graphic
The highlighted code for the banana image is as follows:
<area shape="rect" href="banana.html" coords="11,34,98,180">
Code
<p><img src="assets/fruit.gif" width="300"
height="245" align="middle" usemap="#earthfarm"
border="0" vspace="0" hspace="75"></p>
<map name="earthfarm">
<area shape="rect" href="banana.html"
coords="11,34,98,180">
<area shape="poly"
href="grape.html"
coords="178,165,50,189,81,212,153,211">
<area shape="circ"
57
href="peach.html" coords="227,159,48"></map>
Question
You want to create a client-side image map called "Products".
Type the opening tag.
Code
INSERT THE MISSING CODE
Answer
You type <map name="Products"> to create the opening tag of a client-side image map called
"Products".
Correct answer(s):
1. <map name="Products">
Question
Identify the features of image maps.
Options:
1. Image maps call either a client-side or a server-side set of coordinates 2. Server-side image maps require CGIs to define their coordinates
3. The coordinate system used to define an image map is based on millimeters 4. The shape of an image map is defined using the <map> tag
Answer
Option 1: Correct. Image maps call either the client-side or server-side to determine how to process the user's mouse action.
Option 2: Correct. The coordinates for client-side image maps are embedded in HTML code.
Option 3: Incorrect. The coordinate system used to define an image map is based on pixels.
Option 4: Incorrect. The shape of an image tag is defined in the <area> tag within the <map> tag.
Correct answer(s):
58
1. Image maps call either a client-side or a server-side set of coordinates 2. Server-side image maps require CGIs to define their coordinates
2. Style sheets
Cascading Style Sheets, also known as CSS, are lists of formatting instructions used to customize your web page.
You can use style sheets to override some or all of the default properties presented by HTML elements. The strict flavor of HTML requires you to use only style sheets to impose layout for your pages.
A CSS style rule has two parts - a selector and one or more declarations.
The selector references the element you want to apply the style to.
Code
h1 {color:green; font-size:10px;}
A declaration contains an attribute and a value to specify the style you want to apply.
Code
h1 {color:green; font-size:10px;}
For administrative purposes, style sheets make site development easier because you can make design changes to a number of pages centrally.
Style rules can be included directly within an HTML document or grouped within a separate CSS file which can be attached to the HTML document. External CSS files have the .css file
extension.
There are three standards for CSS – CSS1, CSS2, and CSS3. Full support for CSS2 is widespread with partial support for CSS3.
There are four different implementations of style sheets:
linked style sheets
Linked style sheets are external style sheets that are attached to web pages with the style definitions held in a separate .css file.
It's a lot quicker to use linked style sheets to reformat an entire web site than it is to alter each
59
web page manually. The style sheet is linked to the web pages that use the style elements from the style sheet.
imported style sheets
You can import an external .css style sheet file to an HTML document using an import statement.
embedded style sheets, and
You can embed CSS styles within a document. An embedded style sheet is useful when a style is unique to a particular document. Embedded style rules override any style rules for the same elements in an imported or linked style sheet.
inline styles
Inline styles are coded into the tag of the element that is affected. Inline styles override any embedded style rules or imported or linked style rules that may exist for the element. This is why style sheets are described as "cascading".
Question
Identify the functions of CSS.
Options:
1. Cascading Style Sheets use HTML elements to define the style of a web page 2. You can apply a style rule to a single element, a single page, or a group of documents 3. An embedded style is placed directly within an HTML document
4. The use of style sheets increases administrative load
Answer
Option 1: Incorrect. Cascading Style Sheets use rules, and not HTML elements, to define the style of a web page. A rule defines the style of an element in a web page such as text.
Option 2: Correct. CSS rules can be applied to entire sites, to a single page or a single element.
Option 3: Correct. The style information is specified by inserting <style> tags between the
<head> tags in a document.
Option 4: Incorrect. You can make changes centrally, so the administrative overhead is actually diminished.
Correct answer(s):
2. You can apply a style rule to a single element, a single page, or a group of documents 3. An embedded style is placed directly within an HTML document