MAT 125: Web Design 1: Fundamentals : EXERCISES

Exercise 4: Linking: 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:


Exercise 4 Assignment:

Watch the Video Lectures on the Video Page.
Read in Text Book: Chapter 6: Adding Links

By Due Date:

Create a minimum of four HTML pages/documents using Text Edit (MAC) or Notepad (PC). Save into your folder - Ex4. Create your own page content for your webpage, do not use the page content from the book. If you do not want to write your own content, you may use non-offensive song lyrics, poems, stories. Most pages for this exercise need little content. The page using Document or Jump links needs to have a lot of content so you can visibly jump up and down the page.

Remember your first page is ALWAYS index.html

  1. Folder Name: Ex4
  2. Opening Page Name: index.html   use simple names for your other pages such as two.html, three.html etc. The page names are what you link to so you need to match them exactly in your coding.
  3. Make a minimum of 4 html pages/documents. More would be better.
  4. Link all the pages together on every page of this exercise. (Using Relative Links)
  5. Use CSS Document Styles to add color, font changes, etc to each page to make them look different from each other
  6. Link to at least 3 external webpages (using Absolute LINKS and the target attribute)
  7. Have one page that is long, using Jump Links (Document LINKS) that go up and down the page (back to top and a couple of other links on the page)
  8. Add an email link
  9. At least two Image LINKs (Hot Links) - link to another image and another page
  10. Create a CSS External Style Sheet and link it to two of your pages
  11. Use CSS to style your links variables:
    a:link   a:visited   a:hover   and   a:active
    • change the colors, fonts, sizes, or more.

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


Exercise Four Grading Rubric
Item/Points 2 3 4
Coding Some Most All correct
Function Some Most All
Requirements Some Most All
Effort Minimal Basic Requirements Above & Beyond
Creativity Minimal Basic Requirements Above & Beyond

Evaluation

This exercise is worth 30 points.

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


Useful Links

List of Supported HTML Color Names with the hex codes listed.

Exercise Four Elements Defined

A page of tag/element descriptions for Exercise Four
Content updated: 6.24.20