by: riham alsmari, pnu · using the id attribute 4 id names must be unique, if you assign the same...

BY: RIHAM ALSMARI, PNU

Lab 3

LINKING

linking

Linking between documents

Linking to location within a document

Linking between document and specific location in other document

Linking to a web site

Linking to an E-mail address

Linking to Locations within Documents 3

To jump to a specific location within a document, you

first need to mark that location

One way to identify elements in an HTML document

is to use the id attribute

The id element uses the syntax:

id=“id ” where id is the id name assigned to the

element.

<h2 id=“H”>H</h2>

Using the id Attribute 4

Id names must be unique, if you assign the same id

to more than one element on your Web page, the

browser uses the first occurrence of the id name.

Id names are not case sensitive.

Linking to an id 5

Once you’ve marked an element using the id

attribute, you can create a hypertext link to that

element using the hypertext link

<a href = “#id”>content </a>

For example to create a link to h2 heading for the

letter A in the glossary document, you would enter

the following code:

<a href=“#A”>A</a>

Using the id Attribute for glossary.htm

6

<h1 style="color: blue">Glossary</h1>

<p>

[<a href="#A">A</a>] [<a href="#B">B</a>] [<a href="#C">C</a>]

[<a href="#D">D</a>] [<a href="#E">E</a>] [<a href="#F">F</a>]

[G] [H] [I]

[J] [K] [L]

[M] [N] [O]

[P] [Q] [R]

[S] [T] [U]

[V] [W] [X]

[Y] [Z]

</p>

Linking to Locations within Documents

7

The id Attribute (top of page) 8

Use the id attribute to mark the top of the page <body>

<div id="top">

<img src="camshots.jpg" alt="CAMshots" />

</div>

… etc. …. Much more follows …

<hr />

<div><a href="#top">Return to Top</a> ⇑</div>

<hr />

<address>

CAMshots ››› Advice and News from the World of Digital Photography by Patrick Healy

</address>

</body>

</html>

Creating Links between Documents 9

To create a link to a specific location in another file,

enter the code

<a href="reference#id">content</a>

where reference is a reference to an HTML or

XHTML file and id is the id of an element marked

within that file

<a href =“glossary.htm#D>”D” terms in

the Glossary</a>

Creating Links between Documents 10

Working with Linked Images & Image Maps

11

A standard practice on the Web is to turn the Web

site’s logo into a hypertext link pointing to the home

page

<a href="reference"><img src="file"

alt="text" /></a>

HTML also allows you to divide an image into

different zones, or hotspots, each linked to a

different destination


12


13

To define these hotspots, you create an image map

that matches a specified region of the inline image

to a specific destination

HTML supports two kinds of image maps: client-side

image maps and server-side image maps.

Client-Side Image Maps 14

A client-side image map is inserted in an image map into the HTML file, it is defined with the map element

<map id=“map” name = “map”>

Hotspots

</map>

Where map is the name of the image map and hotspots are the locations of the hotspots within the image.

You have to set id and name attribute to the same value.

Defining Hotspots on a Web

Define a hotspot using two properties:

Its location in the image

Its shape

Syntax of the hotspot element:

<area shape=“shape” coords=“coordinates”

href=“url” alt=“text” />

Shapes can be rectangles, circles, or polygons.

Creating a Rectangular Hotspot 16

Two points define a rectangular hotspot: the upper-left corner and the lower-right corner

A sample code for a rectangular hotspot is:

<area shape=“rect” coords=“x1,y1,x2,y2” …/>

Where x1,y1 are the coordinates of the the upper-left corner and x2,y2 are the coordinates of the the lower-right corner

<area shape=“rect” coords=“384,61,499,271”

href=“water.htm” alt=“water”/>

The hotspot is a hypertext link to water.htm

Creating a Circular Hotspot 17

A circular hotspot is defined by the location of its

center and its radius

<area shape=“circle” coords=“x,y,r”…/>

Where x and y are the coordinates of the center of

the circle and r is the circle’s radius.

<area shape=“circle” coords=“307,137,66”

href=“karts.htm” alt=“karts”/>

Coordinates are (307, 137), and it has a radius of 66

pixels

The hotspot is a hypertext link to page karts.htm

Creating a Polygonal Hotspot 18

To create a polygonal hotspot, you enter the coordinates for each vertex in the shape

<area shape=“poly” coords=“x1,y1,x2,y2,x3,y3,…”

.../>

• Where (x1,y1), (x2,y2), (x3,y3)and so forth define the coordinates of each corner in the multisided shape.

<area shape=“poly”

coords=“13,60,13,270,370,270,370,225,230,225,

230,60” href=“rides.htm” alt=“rides”/>

Coordinates are for each vertex in the shape

The hotspot is a hypertext link to rides.htm

With polygonal hotspot you can creates a wide variety of shapes as long as you know the coordinates of each corner.

Creating a Default Hotspot 19

<area shape="default" coords="0, 0, x, y" … />

where x is the width of the inline image in pixels

and y is the image’s height

Any spot that is NOT covered by another hotspot

will activate the default hotspot link

Applying an Image Map 20

To apply an image map to an image, add the

usemap attribute to the inline image’s <img> tag.

The syntax is

<img src=“file” alt=“text” usemap=“#map” />

Applying an Image Map 21

Creating a Client-Side Image Map 22

Removing the border from an inline

image 24

To remove a border from an inline image, add the

following attribute to the <img> tag:

style = “border-width:0”

Example:

<img src="camshots.jpg" alt="CAMshots"

usemap="#logomap" style="border-width: 0" />

Introducing URLs 25

To create a link to a resource on the Internet, you

need to know its URL

A Uniform Resource Locator (URL) specifies the

precise location of a resource on the Internet

A protocol is a set of rules defining how information

is exchanged between two resources

Introducing URLs 26

Your Web browser communicates with Web servers

using the Hypertext Transfer Protocol (HTTP)

The URLs for all Web pages must start with the

scheme “http”

Other Internet resources use different protocols and

have different scheme names

Linking to a Web Site 27

To create a link to a Web site from your document,

use the URL of the Web site as the value of the href

attribute.

<a href="http://www.apogeephoto.com">Apogee

Photo</a>

Linking to an E-Mail Address 28

To create a hypertext link to an e-mail address, use the following syntax:

<a href="mailto:address">content</a>

Exampel:

<a href="mailto :[email protected]">E-mail us</a>

<a href=“Second.htm”> content </a>

Second.htm

second

First.htm

<h1 id=“A”> A: </h1>

A

First.htm

A:

-------------

A- using the id attribute:

B- linking to an id:

<a href=“#A”>A</a>

<h1 id=“A”> A: </h1>

A

First.htm

A- using the id attribute:

B- linking to an id:

<a href=“second.htm#A”>A</a>

Second.htm

A:

-------------

google

First.htm

<a href=“http://www.google.com/”>google</a>

http://www.google.com/

my e-mail

First.htm

<a href=“mailto: [email protected]”>my e-mail</a>

[email protected]

Image map

Client side

Server side

<map id=“map” name=“map”> hotspots </map>

A- insert imge map into the HTML file

<area shape=“rect” coords=“x1,y1,x2,y2” href=“second.htm” alt=“second”/>

B- defining hotspots

1- Rectangle Second.htm

(x1,y1)

(x2,y2)

<area shape=“circle” coords=“x,y,r” href=“second.htm” alt=“second”/>


2- circular Second.htm

(x,y) r

<area shape=“poly” coords=“x1,y1,x2,y2,x3,y3”

href=“second.htm” alt=“second”/>


3- polygonal Second.htm (x1,y1)

(x2,y2) (x3,y3)

<area shape=“default” coords=“0,0,x,y”

href=“second.htm” alt=“second”/>


4- default Second.htm

<img scr=“filename” alt=“text” usemap=“#map”/>

C- apply an image map:

Lab Time