Hyperlink Basics

Relative vs. Absolute Linking

Absolute Linking

• This type of linking always includes the http:// prefix

• If you link to someone else’s website, you use absolute references– <a href=“http://www.nike.com”>Visit Nike</a>

Relative Linking

• Relative references are references within a folder

• When we create projects, we link to pages in our folders using relative references– <a href=“page2.html”>Go to Page 2</a>– <a href=“files/moreinfo.html”>More Info</a>

Folder

Main folder

index.html

• To use an image that is deeper than the current folder, you use a relative reference:

• <img src=“images/pig.gif”>

images folder

pig.gif cat.gif

pages folder

1.html 2.html

Back it up…

• If you have the main page in the site folder and then other pages in subfolders, it can get confusing….

• To move “backwards” up the folder chain, put ../ in front of the relative path:

Main folder

index.html

• To link (on 1.html) back to the index, which is NOT in the pages folder:

• <a href=“../index.html”>Back to index</a>

images folder

pig.gif cat.gif

pages folder

1.html 2.html

• Write the tag that would create a hyperlink to http://www.pitchforks.com and assume that the words you click on to go there are Fork Shop.

• Write the tag that would create a hyperlink to http://www.pitchforks.com and assume that the words you click on to go there are Fork Shop.– <a href=“http://www.pitchforks.com”>Fork

Shop</a>

• Write the tag below that would create a hyperlink to a page created in your website called fun.html that is in the subfolder called crazy. Make the clickable words More Fun Stuff.

• Write the tag below that would create a hyperlink to a page created in your website called fun.html that is in the subfolder called crazy. Make the clickable words More Fun Stuff.– <a href=“crazy/fun.html”>More Fun Stuff</a>

Review the graphic. Answer the following question:

• Write the tag that would be placed on

index.html to link to page2.html.

index.html page2.html button.gif

bird mam

canary.htmleagle.htmlbirdy.jpg

human.htmlhorse.htmlhorse.jpg

Review the graphic. Answer the following question:

• Write the tag that would be placed on

index.html to link to page2.html. – <a href=“page2.html”>

index.html page2.html button.gif

bird mam

canary.htmleagle.htmlbirdy.jpg

human.htmlhorse.htmlhorse.jpg

Review the graphic. Answer the following question:

• Write the tag that would be placed on

index.html to link to canary.html.

index.html page2.html button.gif

bird mam

canary.htmleagle.htmlbirdy.jpg

human.htmlhorse.htmlhorse.jpg

Review the graphic. Answer the following question:

• Write the tag that would be placed on

index.html to link to canary.html. – <a href=“bird/canary.html”>

index.html page2.html button.gif

bird mam

canary.htmleagle.htmlbirdy.jpg

human.htmlhorse.htmlhorse.jpg

Review the graphic. Answer the following question:

• Write the tag that would be placed on

canary.html to link back to index.html.

index.html page2.html button.gif

bird mam

canary.htmleagle.htmlbirdy.jpg

human.htmlhorse.htmlhorse.jpg

Review the graphic. Answer the following question:

• Write the tag that would be placed on

canary.html to link back to index.html. – <a href=“../index.html”>

index.html page2.html button.gif

bird mam

canary.htmleagle.htmlbirdy.jpg

human.htmlhorse.htmlhorse.jpg

Review the graphic. Answer the following question:

• Write the tag that would be placed on

canary.html to link to horse.html.

index.html page2.html button.gif

bird mam

canary.htmleagle.htmlbirdy.jpg

human.htmlhorse.htmlhorse.jpg

Review the graphic. Answer the following question:

• Write the tag that would be placed on

canary.html to link to horse.html. – <a href=“../mam/horse.html”>

index.html page2.html button.gif

bird mam

canary.htmleagle.htmlbirdy.jpg

human.htmlhorse.htmlhorse.jpg