Web Design & Development
[ Web Design & Development Topics ]
Almost every Web page it seems has some type of link on it--after all thats one of the purposes of the Web--Hypertext. So lets start with the most basic link like this:
The source code is like this:
<a href="http://www.google.com">The Google Site</a>
Now in many cases you may want to the page to open into a new window. There are many ways to do this in Javascript, which will be covered in the third course in this series, but for now the easiest way is to use "target" like this:
The source code is like this:
<a href="http://www.google.com" target="_blank">The Google Site</a>
Note: When you use "_blank" it will give you a new window every time you click the link (if you click multiple times you wil get multiple windows). If you use something other than "_blank" such as "whatever_you_call_it" like below then it will just open one new window and refresh each time you click the link.
The source code is like this:
<a href="http://www.google.com" target="whatever_you_call_at">The Google Site</a>
Another common thing you will see on a site is a link to an email address. Be aware though these links only work if the end user has their email program set up to be recognized within their Web browser. This is not always the case. Here is a sample:
And the source code for this one is:
<a href="mailto:johndoe@uvsc.edu">johndoe@uvsc.edu</a>
A caveat though: some spammers go out looking for "mailto" in your source code and then grab what follows. Others grab anything with an @ sign in it. Due to this some people have started not making their email addresses an active link and then take it a step further and put a space before the @ sign like this: arendtan @uvsc.edu so the user has to manually type it to get it to work. This address regrettfully though has now been blasted so much I couldn't keep it hidden if I wanted to.
Anchor tags are use to link to a specific spot on a given page. Often this is used for jumping to another location on the current page. A common one you may see is something that brings you back to the top of the page like this:
On the same document:
First you have to set up the anchor somewhere (where you want to jump back to) like this:
<a name="top"></a>
Next you just put a standard href to that spot like this:
<a href="#top">top</a>
On another document:
First you have to set up the anchor which is on the page you want to link to. Lets say this is on a page called faq.php.
<a name="books"></a>
Next you just put a standard href to that spot like this:
<a href="http://www.uvsc.edu/disted/help/faq.php#books">Buy materials</a>
Relative pathnames
Relative links are relative to the document at hand. Lets say I want to link to a document in the same directory as the page I am working on. Then I only have to type the file name since relative to the current document it is in the same location. In this case my link might look something like this:
<a href="linkpage.html">Page I am linking to which is in same directory</a>
Or if it is in a subdirectory under the current directory it might look like this:
<a href="images/linkpage.html">Page which is in another directory called images</a>
Or if it is a level lower in the file structure it would look like this:
<a href="../linkpage.html">Page which is a level higher in the structure</a>
Relative links are generally preferred because they load slightly faster and because they more easily transferred to new servers or domain names.
Absolute pathnames
Absolute pathnames are when you specify the complete URL location for the file you are linking to. This is used when you are linking to pages outside of your own site and would look something like this:
<a href=http://www.google.com">Google</a>
You can use the absolute pathname when you link to files on your own site, but it is not necessary.