section5 notes

8/6/2019 Section5 Notes

1/6

## Section 5 - imagemaps, elements #

Protocols

Relative/Absolute linksPaths

Absolute photo link

Anchors

Image MapsImage map elements

Image map attributes


2/6

URLs Uniform Resource Locator

http://www.cdc.gov/travel/index.html

index.html

default file name that the browser looks for to display when it is

give a directory on a server to go to proper form of websites: home page should always be called

index.html

ProtocolsPROTOCOL DESCRIPTION

file:/// Accesses a file from a local hard drive

ftp:// Accesses a file from a File Transfer Protocol (FTP)

Server

http://

c:\

mailto: used with - sends link to email

page 53

File name

Directory

Domain name

Protocol


3/6

Relative/Absolute links Absolute = complete URL of objects location including protocol

(http://)

Relative = location object based on files location

- eg. index.html

Paths no slash or dots = file/image inside same folder as referring

HTML file

/ = file/image inside folder one level down from referring file

../ = folder is one level up from referring file

Absolute photo link

display a graphic from another web site

page 54


4/6

Anchors for linking on same web page

also referred to as bookmarks - eg: www.w3.org/MarkUp

also, use "top of page" anchor when your are scrolled down into

a long document to take you back up to the top uses - any id attribute can be the target of a link

Summary of Qualifications

Read the Summary of Qualifications

id replaces from html -- use both for backward

compatibility

1) scroll down your page and decide where you want to insert a bookmark (link to)

2) Locate the element that will appear at the top of the browser window when the

link is clicked and the page jumps down.3) The element will have a block-level element such as

or

Assign the "id" and "name" attributes. The attributes will contain, inside the

quotes, a short word or group of letters that will allow you to reference that name.

4) Go to the location on your page where you want to put a hyperlink

5) Insert the tag and any text you want to appear as a link. The href attribute

will have the same name as you assigned below, BUT it is preceded by a # sign

open centralvalley.html

1) below title:

About the Market

Hours of operation

Featured Vendor

2) locate: About the Market Heading

About the Market

3) Repeat for other two sections

page 55


5/6

page 56

Image Maps hot zones can be created on a large image

a hot zone is associate with a link to a URL

(en.wikipedia.org/wiki/Image_map)

based on pixel coordinates

Image map elements = contains attributes: src, usemap, id and name

- src= name of image file

- usemap = value assigned to id and name of the

= mapping coordinates- id and name attributes are same values as in

= nested within

- identifies coordinates that will be hot zones

Image map attributes

usemap = client-side image map ismap = server-side image map

usemap value is preceded by #

ATTRIBUTE DESCRIPTION

usemap names the full image to be used

coords coordinates of the shape in pixels (depends on shape

attribute)

href URL associated with area

nohref placeholder for areas not associated with URL

shape shape of defined area

alt alternate text for area

title important to indicate to the user that the image is mapped.

text instruction accompanying the image


6/6

alt tag is required with and shape can be rectangle (rect), circle (circle), or polygon (poly)

- rectangle = x, y coordinates for 2 opposite corners

- circle = x,y is center, r is radius

- polygon = has as many x,y pairs as necessary

Vitruvian Man image map example

page 57

section5 notes

Documents