Exercise 3: Linking: Absolute, Relative and Internal
In this Exercise we will build a series of web pages which use links to jump to remote URL addresses (absolute links), to other local pages (relative links), to specific locations within a document (internal jump links) and to email addresses. We will link from text and images.
HTML Link Element
Use the a tag to make your links
Use the href attribute (hypertext reference) to look for or source your link.
<a href="index.html"> - Linking content - </a>
Relative Links
When you build a website, you link the pages together. These HTML pages are all together in a folder, they are related. This is a very simple link.
RELATIVE LINK EXAMPLE:
<a href="index.html"> Home </a>
Absolute Links
You can link to another website, but you have to add more to your linking content. You add the entire url address including the HTTP.
- href="http://www.claudiafaulkdesign.com"
Have the Absolute link open in a new page or tab in your browser by using the target attribute.
- target="_blank"
ABSOLUTE LINK EXAMPLE:
<a href="http://www.claudiafaulkdesign.com"
target="_blank"> Check out my website
</a>
Internal or Jump Links
If you have a long HTML page, you can give your viewer the option of jumping back up to the top of the page. (or down the page to a specific spot). You need to identify the spot you are jumping to. Use the id attribute and add a value that you create yourself. This is added to the location you are aiming at. Then create a link using the a tag with the href attribute. The value would have a # sign before the name or id you are jumping to. This tells the browser it is document link.
- <h1 id="top">
The link part is at the bottom of the long page in this example
- <a href="#top"> Back to TOP <a>
NOTE: You can name the id area anything you like. In my example I used top. But if you have an existing id for an area, use that name. The viewer only sees the text content you use. See Demos for more examples.
Email Links
Use the mailto: attribute for a direct link to email addresses. But also give your viewer the option to copy and paste the email address in case they do not use their computer's default mail program
EMAIL EXAMPLE:
<a href="mailto:you@your-email-address.com">
Send me an email
</a>
you@your-email-address.com
Using Image Links
You can use an image, typically thumbnail sized, instead of text to link to other pages, websites, or larger images. The link uses the same code as regular image placement>
EXAMPLE of an Image Link to HTML Page:
<a href="index.html">
<img src="images/homeT.jpg" alt="small home picture">
</a>
If you link to a larger image, you may want to use the target attribute as well
EXAMPLE of an Image Link to Another Image:
<a href="images/cat.jpg" target=_blank">
<img src="images/catT.jpg" alt="small cat picture">
</a>
Color Links with CSS
By default, links have three colors. Blue for link, red for active and purple for visited. Use CSS to give them the colors you want to match your page color scheme. Add this to the style in the head of your document. You can use hex codes or color names for the link colors.
Example Adding Link Colors:
<style type="text/css">
a:link {color: green;}
a:visited {color: #660066;}
a:hover {color: #564212;}
a:active {color: hotpink;}
</style>
Add an External Style Sheet
To have consistent looking pages in a website, create an external CSS style sheet that links to all your web pages. This way if you change a style, it changes everywhere immediately. Put the link in the head of your document above any Document styles you have.
Do NOT use any HTML coding on your CSS external style sheet. Only CSS.
Example Link to an External Style Sheet:
<!DOCTYPE html>
<head>
<title> My Page Name
<head>
<link type="text/css" href="mystyles.css" rel="stylesheet">
<style type="text/css">
/* Your page specific styles here */
</style>
</head>
<body>
etc...