Exercise 4: Using Links - Absolute, Relative and Internal
In this Exercise we will build a series of web pages
which use a variety of links. Links make the web work.
The tag for this exercise is the a tag also known as the anchor tag.
These are the types of links we will cover in this exercise:
- Relative Links to go to other local pages inside a website or common folder
- Absolute Links to jump to remote URL addresses with the target="_blank" attribute and value to open in a new tab.
- Link to Email Addresses
- Image Links used to link to other pages OR to images using the target="_blank" attribute and value to open in a new tab
- Document Links also known as Jump Links - to go to specific locations within a document. Most commonly used one is Back to Top
- Linking to a CSS External Style Sheet
- Use CSS to style the different link states a:link a:visited a:hover a:active
- We will use text or images (hot links) as our linking content
Exercise Requirements
Watch: the step by step Videos Lectures for Exercise 4.
Read: Chapter 6 Adding Links
Folder Name: Ex4
Minimum Number of Pages/Documents Required for Exercise: 4
Minimal text content on most pages. Use CSS to style your page content.
Text Content: Write about each of the types of links you are using.
All Pages in the Exercise Must Link Together. Links must be styled with CSS - font, font-size, color, etc. All pages can have the same styling of links or you can experiement and make them all different.
Page Content:
- Index.html
- Headline - Page One - Relative & Absolute Links
- Relative Links to link all the Exercise 4 pages together
- Paragraph of text explaining the difference between Relative and Absolute links.
- Add a minimum of 3 Absolute Links to external sites.
- Page2.html
- Headline - Page Two - Email Links
- The same Relative Links as your Index page. They can be styled the same or differently.
- Paragraph of text explaining how to use an Email link.
- Add an email link to your own email address.
- Page3.html
- Headline - Page Three - Image Links
- The same Relative Links as your Index page. They can be styled the same or differently.
- Use an Image as the linking Content. Link to a larger image.
- Use an Image Link to link to another page in your homework.
- Page4.html
- Headline - Page Four - Document or Jump Links
- The same Relative Links as your Index page. They can be styled the same or differently.
- Create a long page of content
- Use a Back to Top Link plus Links to several specific spots on your page.
- Create an External CSS Page
- Link to one or two of your exercise 4 pages.
- Create styles for the links, page backgrounds, fonts, colors, etc
Review the Exercise 4 demo pages and video pages for more information.
Points: 30
Giving an Element an "ID"
You can add an ID to an element, which is like giving it a specific address. It is like the number address for your house which helps people or mail find you.
175 Any Street.
Adding an ID gives you the option to use it as a linking target which is very useful when you have a long page of content.
If you add styles to a specific id, use the # sign before the name. This identifies it as an ID to the browser.
Example for styling use:
#top
Any Element
Attribute:
id
Value:
You can make up a name. Single word names relating to the nearby content are best
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.
Example of a very common Document or Jump 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.
Use Jump links to Jump Down long pages as well. See Demos for more examples.
Styling the Anchor Tag
Use CSS too add a variety of styles to your anchor tag. Here are the most commonly used states, link, visited, fover and active.
Anchor Selector Options:
a:link
a:visited
a:hover
a:active
Be sure to style them in the order listed above.
Styling Links with CSS
By default, links have three colors. Blue for link, red for hover 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.
In my example I also added styles for the font-family, font-size and font-weight in the a:link set of styles. This rolls over to the other a styles that come afterwards unless I add a different value.
Example Adding Link Colors:
<style type="text/css">
a:link {color: green;
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: bold;}
a:visited {color: #660066;}
a:hover {color: #564212;}
a:active {color: hotpink;}
</style>
Adding an External Style Sheet
Using external style sheets is a great way to make your pages look consistent. Develop a set of styles that you want to use on your pages, create a new document with the extension of .css and then link it to all your pages or in a very big website you might have several external style sheets.
If you change a style on the external sheet, it changes the content on all the pages it is link too at one time, instead of having to go back individually to make the changes. Much simpler.
Element
link
Attribute:
type
Value:
text/css
Attribute:
href
Value (example):
mystyles.css
You can name your style sheet whatever you wish.
Attribute:
rel
Value:
stylesheet
rel stands for relationship.
Linking to an External Style Sheet
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">
/* Put your page specific styles here */
</style>
</head>
<body>
etc...