LINKS / ANCHORS
Links (also known as anchors) is what the web is all about. They are the “HT” in HTML. Hyper-Text, meaning text that you can click on it and have something happen. They are also known as anchors because the HTML tag uses what is called an anchor tag which also refers to a destination when clicked.
A basic Anchor tag looks like this:
<a href=”page1.html”>Page 1</a>
a = anchor
href = stands for HTML REFERENCE and is basically defining what happens when the user clicks
page1.html = in this case is the page the user would go to when clicking the link
There are two main types of LINKS / ANCHORS or “ADDRESS TYPES”.
Relative and Absolute.
A RELATIVE link, links to another page within the same site or same server.
example: <a href=”page2.htm”>CLICK HERE</a>
An ABSOLUTE link, links to a specific location on the web MUST include “http://” as part of the address..
example: <a href=”http://www.tiwi.ca”>CLICK HERE</a>
So in a nutshell, when you are clicking to other pages of within a website, the links are usually relative. When you click a link and go to different website – it is an absolute link.
TIP!
When creating an absolute link, visit the page/location you are clicking to in your browser first, and copy the full address in the address bar so you can just paste it into your code.
Wait there’s more!
You can also use relative/absolute addresses when linking to CSS files or images.
“Relativeness”
If you are organizing your files into folders you must account for it in the address you place in your code.
Take a look at the folder structure below:
In this case, a link to basic.html on the index.html page would have to look like this:
<a href=”html/basic.htm”>Basic</a>
A link on basic.htm to the index.html page would look like:
<a href=”../index.html”>Index</a>
If you are going into a folder you must state the name, if you are going out of a folder you use ‘../’.
NOTE : There will be other references to absolute and relative throughout HTML so it is good to get a goo basic understanding of the theory behind it. Relative is in relationship to another value or position where absolute is an absolute value ands is not dependant on another value.
The “Anchor” Link
An anchor link, can also point to a specific item or area on a page by using an ID reference.
EXAMPLE : if the HEADING at the top of this page has an ID of “mainHeading” ..
<h1 id=”mainHeading”>LINKS / ANCHORS</h1>
We can link to that area of the page by using the ID as the value.
<a href=”#mainHeading”>TOP</a>
(most HTML tags can have an ID and you must use a “#” when referring to an id in an href value)
Email Link
Another type of anchor is an EMAIL link, which of course allows the user to click and then send an email. The key component of the code is the href value : “mailto:email_address”.
Example:
<a href=”mailto:gen_sub@mac.com”>SEND EMAIL</a>
The link will request the computer to launch an email program (if it is not already up and running) and will automatically open a new message window sending to the address stated in the link.
ANCHORS (Links) & CSS
PSEUDO CLASSES (Anchors)
CSS rules controlling links also referred to as Pseudo Classes – meaning they are like a class but not! Anchors has built in styles based o if they have been clicked or note, if a mouse is hovering over the link or not, and if the link is being clicked on. These “states are referred to as unvisited (link), visited, hover and active links.
Pseudo classes style each of these states.
a {background-color:yellow;}
“a” by itself styles all the anchor states. ALL anchors will have a background color of yellow regardless of the state.
a:link {color:green;}
Unvisited links will be green.
a:visited {color:orange;}
Visited links will be orange.
a:hover {color:blue;}
The link will turn blue when the mouse is ‘hovering’ above it.
a:active {color:purple;}
Active links (active means ‘when clicked’) will be purple.
IMPORTANT: The order in which you apply your Anchor ruless is important – you must have the rules in the following order for it to work. NOTE: you do not have to use all the rules but what rules you do use must be in the proper order.
a
a:link
a:visited
a:hover
a:active
To be even more specific you can add a class to an anchor rule. In the following example a class was created to signifyan external link. NOTE that the class name is made up and does not have to be named external. Also when using a class with an anchor you should define all states.
a.external:link {color:cyan;}
The HTML tag looks like this:
<a HREF=”http://www.apple.com”>
EXERCISES
- Add new styles to your resume – include links to any work / companies / references online, and add an email link
- Create a three page website
- name the home page index.html, the second page2.html, the third page3.html
- have each of the pages use the same CSS page
- have links to all three pages on each page.
- start simple
- if you have time add some style!
RESOURCES
w3schools.com