HTML Graphics 5

Adding HyperText Links to a Web Page

Objectives

• Create Hypertext links between elements within a document.

• Create Hypertext links between one document and another.

• Create hypertext links to pages on the Internet.

Fred’s Personal Web Page

About Me, My Quotes, My Poem,

About Me

Hi. I am Fred. I am a student at LACES. I like to fly paper airplanes and watch cheerleaders…

Links INSIDE a web Page

• Start with the headings

About Me, My Quotes, My Poem,

• Find and Mark the heading for each section with an < A > Tag.

<A> About Me

Hi. I amFred. I am a student at L A C E S. I like to fly paper airplanes and …

The Anchor Tag < A >

• The <A> tag creates an ANCHOR

• Text that is specifically marked so you can LINK to it from other points in the document.

Anchor Tags

• You assign each anchor its own anchor NAME using the NAME property.

<A Name=“ME”> About Me</A>Hi. I amFred. I am a student at LACES. I like to fly paper airplanes and

watch cheerleaders …

• The Text About Me becomes an anchor named “ME”…a place to link TO

• Later you create a link from the beginning to this anchor.

An anchor doesn’t have to be just TEXT!

• Link to a photo or inline image.

<A NAME=“PHOTO”><IMG SRC=“Rhino.gif”></A>

• You can create a link to the photo from other points in the document by using the word “PHOTO”

Creating Anchors

• Locate the text or Graphics

• Before the TEXT or Graphic, place the tag

<A NAME=“Anchor_Name”>• where Anchor_Name is the name of YOUR

anchor

• After the text or graphic, place a </A> to turn off the anchor.

Creating Links to

• After you ANCHOR text that will be the destination for your links, you create the Links themselves.

Fred’s Personal Web Page

About Me, My Quotes, My Poem,

To Create a Link to an Anchor

• Use the same <A> tag

• Instead of NAME, use HREF<A HREF=“#ME”> About Me, </A>

HREF

stands for HyperText Reference, but who cares??? Links to the About Me place

Link to _Tags

• Tags that create links to.

<A HREF=“#ME”> About Me, </A>

Links from images

• To turn an inline image into a hypertext link,

<A HREF=“#OTHER”> <IMG SRC=Sunshine.gif”> </A>

• Tags that create links are called

• LINK TAGS

Linking to Text within a document

• Mark the destination with an anchor• Locate the text or Graphic you want to

designate as a link• Before the text or graphic, place the tag

<A HREF=“#Anchor_Name> where Anchor_Name is the name of the

anchor.• Close the link with </A>

Problems ? ? ?

• Sometimes a link does

NOT work.

HREF is CASE SENSITIVE

“ME” “Me” and “me” are all evaluated differently.

More Problems??

• Each anchor name needs to be a unique name within a document.

<A Name=“ME”>About Me

<A Name=“ME”> More About Me

<A Name=“ME”> Still More About Me

TEST your Links

• Click each link.

• You should jump to the right place.

• If NOT, check your code.

Review that…

• What is the HTML code for marking My Quotes with the anchor name “QUOTES”?

• <A NAME=“QUOTES”>My Quotes</A>

Review Stuff

• What is the HTML code for

linking the text Favorite Quotes to an anchor with the name QUOTES?

<A HREF=“#QUOTES”>Favorite Quotes</A>

Review Stuff

• What is wrong with this statement?<A NAME=“INFO”><H3>For More Information</H3></A>

• When you add an anchor tag to a large section of text, place the anchor within the heading tags

<H3><A NAME=“INFO”>For More Information</A></H3>

Review stuff

• What is the HTML code for marking an inline image, Photo.jpg with the anchor name “PHOTO”?

<A Name=“PHOTO”> <IMG SRC=“photo.jpg”> </A>

Review Stuff

• What is the HTML code for linking the inline image,

Button.jpg, to an anchor with the name “LINKS”?

<A HREF=”#LINKS”><IMG SRC=“Button.jpg”></A>

More Review stuff

• TRUE or FALSE?? Anchor Names are case sensitive!

• T R U E

• “PHOTO”, “Photo” and “photo” are all different