CPSC 120 Lab 8:
More About URL'sA link in a HTML document uses a URL to specify the target of the link. Every document on the Web has a URL that identifies it. The URL for a document starts with "http://". For example, if your user name is smith, then the URL for the index file in your math account is "http://math.hws.edu/user/smith/index.html". If you have another file in your www directory, say "resume.html", it would have its own URL: "http://math.hws.edu/user/smith/resume.html". When you leave out the file name, our web server assumes that the file name is "index.html". So, the address that I gave you for your home page is really an abbreviation for the full URL.
Now, you can make directories inside your www directory. Suppose, for example, that you want to have a directory to store images that you produce in art class. You could create a directory named "art" inside your www directory. (Do this by right-clicking the directory window. Choose "New" from the pop-up menu, then choose "Folder".) If you store a file named "projects.html" in this directory, then its address on the Web would be "http://math.hws.edu/user/smith/art/projects.html". If you have a file named "index.html" in the "art" directory, it could be referred to as either "http://math.hws.edu/user/smith/art/index.html" or "http://math.hws.edu/user/smith/art/". If your friend at Harvard wants to put a link to your Web site on her own Web page, she can use these URL's.
Relative URL's
When you create a Web site, it usually consists of many files, often in several directories. To link from one file to another on the same site, you won't usually use the full URL of the file you want to link to. Instead, you can use a "relative URL". If the file you are linking to is in the same directory as the file that contains the link, then the relative URL is just the file name. For example, let's say you have a file called "resume.html" in the same directory as your "index.html" page. The index.html file could contain the link:
<a href="resume.html">My Resumé</a>
to link to the resume.html file. When a user clicks on the link, the Web browser will load the resume.html file.
Now, suppose that you have a file named "projects.html" in your "art" directory, and that you want to link to that file from your main index.html file. In this case, the relative URL has to specify the directory as well as the file name. The syntax is "art/projects.html". The link could be given as
<a href="art/projects.html">My Art Projects</a>
The special directory name ".." stands for "the directory that contains the current directory". Suppose that you wanted to link back from your projects.html page in the art directory to the index.html page in your www directory. You could use a relative URL of the form "../index.html". (You could even use just "../".) The link might look like this in the source code:
<a href="../index.html">Back to my main page</a>
Note that relative URL's are often used to refer to images. If you specify an image using SRC="mypic.jpg" in an IMG tag, the "mypic.jpg" is just a URL for the image file. You could use any URL, including a complete URL such as "http://math.hws.edu/eck/painter/painter11a.jpg".
Email Links
There are other types of URL's besides URL's for files. One important example is the "mailto:" URL. A mailto URL specifies an email address. For example: "mailto:smith@hws.edu". When a mailto URL is used in a link, clicking on the link will open a window that the user can use to send email to send email to the specified address. If you want to include an email link on a Web page, it will be something like
<a href="mailto:smith@hws.edu">Send me mail!</a>
By the way, it's also possible to make a link that appears on the page as an image. Clicking on the image will make the Web browser follow the link. Just replace the text with an IMG tag. For example, if you have an image in a file named envelope.gif and you want to make it into an email link, use
<a href="mailto:smith@hws.edu"><IMG SRC="envelope.gif"></a>
Links Within a Document
It's possible to give a name to a specific point in a document, and to have URL's refer to that specific point. The <A> tag is used for this purpose, as well as for adding links to a page. (The "A" stands for "anchor", and an A tag can be used as an anchor for either the source or the target of a link.) Use <A> with the NAME modifier to name a point in your web page. For example, suppose you use the following in the document projects.html in the art directory:
<a name="abstract">My Abstract Art</a>
Then the link to this point in the document has a full URL of the form "http://math.hws.edu/user/smith/art/projects.html#abstract". From within the same file, the URL would be simply "#abstract". Don't forget to add the # before the name of the anchor.
[ Previous | Next ]