Exercise 4 Linking Terms Defined
A simple explanation of what each one does.
Anchor Element and its Attributes
To make a website interactive it must link. To do this we use the <a> element or anchor tag.
- <a> </a>
- a is the anchor tag - by itself it does nothing. But add attributes and it makes your website come to life. The content inbetween the opening and closing anchor tags be comes the hypertext link. It can be text or an image.
The Attributes
Here are some of the attributes that work with the anchor tag.
- href
- HREF stands for Hypertext REFerence. It provides the address to the page you wish to link to - or tells the browser where to find the page you are looking for. Its URL. If you are linking to a page outside of your website you use an Absolute URL which means you include the whole URL
href="http://www.claudiafaulkdesign.com"
A Relative URL is used when you link to a document inside your own website. The address does not need as much information.
href="home.html"
- mailto:
- mailto: is the way to link to an email address.
href="mailto:cfaulk@miracosta.edu"
target
The target attribute tells the browser where to open the page or new information you are calling up. If you want the information to replace the window you are in now, you do not need to use a target. If you want the information to appear somewhere else there are other targets to aim it at:
target="_blank" opens a new window or new tab. If you are going to a new website you want to keep your website accessible to the user.
id
Use the ID attribute to identify a location on a page. We will use it for other things later in the semester. The ID attribute allows us to target a specific destination on a page, not just starting from the top. We can either jump up or down a page we are already on, target the top of the page a popular one - href="#top" - or jump to a specific spot on another page. - href="animals.html#dogs"
The ID attribute must already be in place on the page.
<p id="dogs">This is a bunch of information about dogs blah blah blah...
CSS for Links
CSS offers more options or states for link colors. They should be added to the CSS in this order or that can cancel each other out by giving the browser conflicting information.
- a:link
- The first state you see a link take on a new page
- a:visited
- The link after you have used it or visit the linked page
- a:hover
- When you roll over the link with the mouse
- a:active
- When you push or make the link active, ready to go to the next target.