Adding Links

Learning Web Design:Chapter 6

Lesson Overview Using the anchor tag <a> Linking to other pages with relative

or absolute pathnames Linking to other pages on the Web Internal links with the anchor tag More on URLs

The Anchor Tag <a> The anchor tag or <a> element is used to

create links The hypertext reference or href attribute is

used to give the address of the page The text that appears between the opening

and closing tags is called hypertext The default style of anchors is underlined blue

text Linked images have a blue border Visited links are purple

The Anatomy of an Anchor Opening tag

<a href=“filename”> Hypertext

This text usually appears as blue underlined text in the browser

The closing tag:</a>

<a href = “menu.htm”>Go back to Menu</a>

Common Problems with Links Web servers are usually case sensitive:

Make sure you have spelled the filename and pathname correctly, including the correct case

Be sure to use correct nesting of tags Inner tag is always closed before outer tag

Correct: <p><a>…</a></p> Incorrect: <p><a>…</p></a>

Linking Using Pathnames Definition: Local Pages are those on your own

computer or server You usually have control of these pages

Definition: External Pages are those outside of your Web site You usually do not have control over these pages

Links to files whose position is given in relation to the current file need a Relative URL

Links to files whose position is given depending their absolute location on the system need an Absolute URL

Linking to Pages on the Web Refer to other pages on the Internet by

using the complete Absolute URL These pages not located on your local

machine are called external pages Use http:// as part of the URL Some examples:

href=“http://yoda.tc.uvu.edu/barthoki/index.htm”

href=“http://www.author.edu/myfiles/index.htm”

Various Kinds of URL Protocols

HTTP- points to remote documents on the Web href= “http://yoda.tc.uvu.edu/barthoki/index.htm” Non-Anonymous FTP- needs username and

password href=“ftp://username:password@foo.com/index.htm” Anonymous FTP- point to files on FTP servers href=“ftp://cseftp.tc.uvu.edu/barthoki/pages/index.htm” Mailto- used to send email if browser supports it: href=“mailto: barthoki@uvu.edu”

Linking Within Your Own Site Most linking you will do will be to

resources within your own Web site using a Relative URL

Without a protocol like http:// in the pathname: the browser will begin looking in the

current directory for the file The forward slash / is used to separate

directories and filenames

Linking Within a Directory The most often used Relative URL

is to another file in the same directory as your page

If no path is given, just the filename, the server just looks in the current directory

Example: <a href=“about.htm” >About Us</a>

Linking Within a Directory

Cake.jpg

GoodEats

Images/

about.htm

Recipes/

oatmeal.htm salmon.htmToast.jpg

index.htm

jello.htm cupcakes.htm

Dessert/

<a href=“about.htm” >About Us</a>

Linking to a Lower Directory

If page is stored in a subdirectory of the current directory, you must provide the pathname as well as the filename

Use the forward slash / to separate the subdirectory name(s) from the filename

Example: <a href=“Recipes/salmon.htm” >Salmon</a>

Linking to a Lower Directory

Cake.jpg

GoodEats

Images/

about.htm

Recipes/

oatmeal.htm salmon.htmToast.jpg

index.htm

jello.htm cupcakes.htm

Dessert/

<a href=“Recipes/salmon.htm” >Salmon</a>

Linking Two Directories Down

Cake.jpg

GoodEats

Images/

about.htm

Recipes/

oatmeal.htm salmon.htmToast.jpg

index.htm

jello.htm cupcakes.htm

Dessert/

<a href=“Recipes/Dessert/jello.htm” > Green Jello</a>

Linking to a Higher Directory

This pathname might include directions to go up directory level(s) to get to the file needed

Use two dots and a / to refer to the directory above the current one: ../

For each directory level upward, add another ../

Example: <a href=“../index.htm” >Home</a>

Linking to aHigher Directory

Cake.jpg

GoodEats

Images/

about.htm

Recipes/

oatmeal.htm salmon.htmToast.jpg

index.htm

jello.htm cupcakes.htm

Dessert/

<a href=“../index.htm” >Home</a>

Dessert

Recipes

GoodEats

Linking Upward Two Directories

Cake.jpg

GoodEats

Images/

about.htm

Recipes/

oatmeal.htm salmon.htmToast.jpg

index.htm

jello.htmcupcakes.htm

Dessert/

<a href=“../../index.htm” >Home</a>

Dessert

Recipes

GoodEats

Relative Pathname Examples Examples of relative pathnames:

href=“files/morefiles/file.htm” move down two directories

href=“../file.htm” move up one directory

href-“../../file.htm” move up two directories

Site Root Relative Pathnames The root directory is the directory that

contains all the files and subdirectories for a Web site

The root directory path starts with the root and lists the subdirectories until the file is reached

Don’t list the name of the root directory, just use the / to start the pathname

Example:

<a href=“/Recipes/salmon.htm” >Salmon</a>

Site Root Relative Linking

Cake.jpg

GoodEats

Images/

about.htm

Recipes/

oatmeal.htm salmon.htmToast.jpg

index.htm

jello.htm cupcakes.htm

Dessert/

<a href=“/Recipes/salmon.htm” >Salmon</a>

Linking to a Point on a Page You can create links to different

locations internally within a document

These links allow the user to jump to various places within the document, not just to the top of the page

Sometimes called “linking to a fragment”

Naming the Link Destination Use the id attribute to flag a

destination point for a link The id must be unique within the

document The id value can have no spaces in

it and must begin with a letter or underscore

Example:<h1 id=“MainHeading”>IS&T Department</h1>

Linking to the Destination With the identifier (id) in place, you

must then create a link to it Use <a> tag with the href attribute

to provide the location To signal you are linking to a

fragment, use the hash symbol (#) before the fragment name

The <a> also requires some hypertext for the user to click

<p>Linking: <a href=“#MainHeading”>Main Heading</a></p>

Page: letterB.html

<p> Names that begin with B before Byrd</p>

<h2 id=“byrd”>Byrd, William, 1543-1623</h2>

<p> Names that begin with B after Byrd </p>

<p> More stuff </p>

<p><em>Return to:</em>

<! Link to the named anchor above -- >

<a href=“#byrd” >Byrd, William</a></p>

Using Anchors to Jump Within the Same Page

Linking to a Fragment on Another Page You can link to another page by

identifying a fragment on the destination page

Use the id attribute to name the fragment

When linking to the fragment from one page: Add the # and the fragment name to the

end of the URL of the other page

<p> Names that begin with B before Byrd</p>

<h2 id=“byrd” >Byrd, William, 1543-1623</h2>

<p> Names that begin with B after Byrd </p>

<p><em>See Also</em>

<! Link to the fragment, byrd, in document letterB -- >

<a href=“letterB.htm#byrd” >Byrd</a>, Gibbons, Lassus</p>

Using Anchors to Jump into a Second Page

Page: index.htm

Page: letterB.htm

Targeting a New Window If you have a goal to keep people at

your site even when they click an external link…

Then open the external page in a new window

Use the target attribute with the _blank value <a href=“http://uvu.edu/index.htm”

target=“_blank”>UVU</a>

Lesson Summary Links are created with the anchor <a> tag href attribute is used to give filename for link id attribute is used to create link fragments You can jump to a link fragment within

the same document or in another document Use the target attribute to determine if a

new window opens with the link or the same window is used

URLs can be used to point to many different kinds of information on the Internet