1. Hyperlink Basics Relative vs. Absolute Linking

2. Absolute Linking This type of linking always includes the http:// prefix If you link to someone else’s website, you use absolute references – Visit Nike

3. Relative Linking Relative references are references within a folder When we create projects, we link to pages in our folders using relative references – Go to Page 2 – More Info Folder

4. Main folder index.html To use an image that is deeper than the current folder, you use a relative reference: images folder pig.gifcat.gif pages folder 1.html2.html

5. 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:

6. Main folder index.html To link (on 1.html) back to the index, which is NOT in the pages folder: Back to index images folder pig.gifcat.gif pages folder 1.html2.html

7. 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.

8. – Fork Shop

9. 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.

10. – More Fun Stuff

11. 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 birdmam canary.html eagle.html birdy.jpg human.html horse.html horse.jpg

12. 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 birdmam canary.html eagle.html birdy.jpg human.html horse.html horse.jpg

13. 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 birdmam canary.html eagle.html birdy.jpg human.html horse.html horse.jpg

14. 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 birdmam canary.html eagle.html birdy.jpg human.html horse.html horse.jpg

15. 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 birdmam canary.html eagle.html birdy.jpg human.html horse.html horse.jpg

16. 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 birdmam canary.html eagle.html birdy.jpg human.html horse.html horse.jpg

17. 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 birdmam canary.html eagle.html birdy.jpg human.html horse.html horse.jpg

18. 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 birdmam canary.html eagle.html birdy.jpg human.html horse.html horse.jpg