MAT 125: Exercises & Projects

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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

Using the a (Anchor) Element - Plus the Attributes and Values for this exercise.

The Anchor Tag
a

Attribute:
href
(hypertext reference)

Value:
The url (address) of the website or webpage being visited.

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 to the page name/address.

RELATIVE LINK EXAMPLE:
<a href="index.html"> Home </a>

Target Attribute

Open the linked website in a new browser tab

Attribute:
target

Value:
_blank

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. The easiest way to get an accurate absolute link is to copy the content in the address bar of the browser.

ABSOLUTE LINK EXAMPLE:
<a href="http://www.claudiafaulkdesign.com" target="_blank"> Check out my website </a>

Email Attribute & Value

Open your mail program to send an email.

Attribute:
href

Value:
mailto:
plus an email address

Email Links

Use the mailto: value for a direct link to email addresses.

Give your viewer the option to copy and paste the email address in case they do not use their computer's default mail program. Place it before the email link, or as the email link content.

EMAIL EXAMPLE:

<a href="mailto:you@your-email-address.com">
Send me an email </a>


you@your-email-address.com

Element
img

Attribute:
src

Value:
images/image.jpg

Using Images as Linking Content

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 Going to HTML Page:

<a href="index.html">
<img src="images/homeT.jpg" alt="small home picture">
</a>

You can also use images link to a larger image. You may want to use the target attribute as well

EXAMPLE of Using an Image to Link to Another Image:

<a href="images/cat.jpg" target=_blank">
<img src="images/catT.jpg" alt="small cat picture">
</a>

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...

Exercise Four Grading Rubric
Item/Points 1-3 4-5 6
Coding / Errors Some Mostly Correct All correct
Function Some Most All
Requirements Some Most All
Effort Minimal Most Requirements Above & Beyond
Design & Creativity Basic Average Amount Above & Beyond

Evaluation

This exercise is worth up to 30 points.

Coding (6)
Functionality (6)
Meeting project requirements (6)
Your effort/experimentation (6)
Design (6)