The web wouldn't be the web if you couldn't go from one page to another. You do that via hypertext links. A web browser highlights text or images with color and/or underlines to indicate that it is a hypertext link (often shortened to hyperlink or just link).
The HTML tag for a hypertext link is <A>, which stands for anchor. The anchor tag is useless without the href attribute that tells the browser where to actually go to find the link. To create a hypertext link in your document:
Let's say you wanted to create a hypertext link to the search engine Google. You would type this in your index.html file:
- <A href="http://www.google.com/">Google</A>
All you would see on the web page is the word Google and it would be in blue and underlined to signify that it is a link. What makes the word Google a link is the <A> tag with the href attribute that tells the link where to go.
So to create a hypertext link you do the following:
- Start the anchor with <A (you must include a space after the A).
- Specify the document you're linking to by entering the attribute href="filename" followed by a closing bracket: > (note that whatever follows the href= has to be in quotes: "..." as href is an attribute and needs a value).
- Enter the text or information that will serve as the hypertext link in the current document (this text will be in regular language usually, like my home page or Yahoo!.
- Enter the closing anchor tag: </A> (notice that you DON'T repeat the href portion of the opening tag in the closing </A> tag).
Okay, now let's add some hypertext links to the list we created in the previous session. On my page, I will have three links. Here is what the HTML code for the links will look like (I am retyping the list HTML code as well -- in my index.html file I will replace the current unlinked list with this new, hypertext linked list):
- <LI><A href="http://www.google.com/">Google</A>
- <LI><A href="http://www.worldcat.org/">WorldCat</A>
- <LI><A href="http://www.yahoo.com/">Yahoo!</A>
The HTML code will look like this in a web browser:
Save your file in Notepad and preview it in a web browser. Not bad, huh? Take a look at my index.html file for reference and comparison.
Relative Paths Versus Absolute Paths
You don't always have to type http://www.address.com/blahblahblah when creating a hypertext link. If you are linking to a file that is part of your own website, you can specify the relative path from the current document to the linked document.
This may seem like an abstract concept. But think about a local phone call and a long distance phone call. To make a local call, you simply punch in seven numbers, and that's it. For long distance, you need to punch in a 1, then an area code, then the seven digit phone number. A relative link is like the local phone number; you're dialing a local number, so the address is shorter. The absolute link is further away, so like a long distance call, it needs more information to make the connection.
Here's an example: a link to a file anaheim_branch.html located in a folder called branches inside my xyzlibrary folder on my computer would look like this:
- <A href="branches/anaheim_branch.html">Anaheim Public Library</A>
This is a relative link because you are specifying the path to the linked file relative to the location of the current file. You can also use the absolute pathname (the complete URL) of the local file, but relative links are more efficient in accessing a server. They also have the advantage of making your documents more "portable" -- for instance, we are creating all the web pages for this course in one folder on our computers (remember mine? it's called xyzlibrary) -- using relative links to hyperlink one page to another, and then upload the entire folder of web pages to your server.
In general, you should use relative links whenever possible because:
- It's easier to move a group of documents to another location (because the relative path names will still be valid)
- It's more efficient connecting to the server
- There is less to type
You will notice that in the sample code I provided, there were only absolute hypertext links (remember, they all had http:// at the start of the A href tag). A website is made up of many pages, and we are creating the first page (sometimes called a "home page") for a website. You will probably have additional HTML files for other information, maybe a page with directions, or a page about services that your library provides. Those would be relative links, local phone calls versus long distance.
File and Folder Namimg
This is a good time to talk about file and folder names. Most servers (where your files will ultimately be kept) are case-sensitive where filenames are concerned, so you must be consistent when you use uppercase and lowercase file and folder names. Try to always use lowercase names for files and directories--it's easier to type! And don't put spaces in the file names:
- myfirstfile.html is correct
- my first file.html is incorrect
Servers don't like spaces in file names and will ignore them. This can cause you much annoyance, so get into the habit now of never putting spaces in your web file and folder names.
A Shortcut for Creating New HTML Pages
Let's create some new pages for those relative links you want to add to your website. Here's a shortcut to creating new pages from scratch:
- Open your index.html page in Notepad.
- Open the File menu and select Save As.
- In the Save dialog box, make sure that you are saving the file in the same directory that contains your index.html file.
- Give the file a new name. In my case, I need two more files: one called about.html and another called services.html.
- Click the Save button to save the new file.
BE SURE to give the file a new name when using this procedure! If you forget, you may accidentally overwrite your index.html file!
You will also need to change the list code on the new files, as it will be different in content from your index.html file. Here are my two new files:
Open the View menu and select Source to see the HTML tags for these page(s).
Notice that I have changed the <TITLE></TITLE> and <H1></H1> tags to reflect the new content (and also added new content!).
Now I need to add links to these new files in my index.html file:
- index.html with absolute and relative links
Notice that the links for about.html and services.html don't have http://... in the hypertext link? They are relative links. The links to Google, WorldCat, and Yahoo! are absolute (they do have the http://...).