Lecture 07

posted Feb 8, 2013, 6:07 AM by Samuel Konstantinovich   [ updated Feb 13, 2013, 6:07 AM ]


Goals: file system directory tree, and absolute/relative/internal links

Different ways to make hyperlinks:

You know how a URL is formatted:
protocol + IP address + path = URL
http://192.168.1.20/home/users/hi.html
(we can substitute a name for the address, if someone pays to make a DNS record)
http://www.sitename.com/home/users/hi.html


But you don't always use a full URL when you make a hyperlink!!!! So stop doing it!


This works when you want to make a link to an external site
Absolute link has the full site: (generally starting with http:// )

<a href="http://www.mysite.com/index.html">Go To My Site</a>


You should use links relative to the document:  

(require you to know the directory structure so here is a little detour to the land of directory trees!)
The index.html file is at the root of the site (like your public_html  folder)

1. If the file you want to link to is in the same directory:

  • Page1 can link to sourcepage (this link MUST be in page1 to work)

<a href="sourcepage.html">Go To Sourcepage</a>


2.If the file you want to link to is in a sub directory:
  • page1 can link to page2

<a href="directory2/page2.html">Go To Page2</a>


  • Index can link to page2,

<a href="main-directory/directory1/directory2/page2.html">Go To Page2</a>


3.If the file is OUTSIDE of the directory you can use the .. to signify to up a directory in the path.
  • Page2 can link to page1: (go up one level)

<a href="../page1.html">Hollah Page1</a>



  • Page1, sourcepage, page3, or page4 can link to the index (because it just means look at the directory two levels up:

<a href="../../index.html">Go to the index</a>


  • Page1 can link to page3: (go up, then go into directory3)

<a href="../directory3/page3.html">Hollah Page3</a>



Site root relative links start with a / which means start at the highest level of this site

1. Any file can link to page4 if they do the following:
<a href="/main-directory/directory4/page4.html">Go To Page 4</a>

(The exact same link will work from any page anywhere in the site.!)


#NICE OPTIONAL PART#
Link to a Specific Part of a Page (Internal Hyperlink)
Internal hyperlinks require an anchor tag with the "name" attribute like so:
<a name="part2">Part 2</a>

Then create a hyperlink which refers to this anchor with a hash (#) like so:
<a href="#part2">Go To Part 2</a>


More directory discussion:


Comments