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


Exercise 4 Assignment:

Read Lecture sent by email (also posted in Canvas)
Read in Text Book: Chapter 6: Adding Links

By Due Date:

Create a minimum of four HTML pages 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. First page is ALWAYS index.html

Links make the web work. Internal Links (Relative Links), External Links (Absolute Links), Image Links, Jump Links (Document Links). Links to External Style Sheets. Use the "a" element and try all the different types of links listed on the Exercise Four Page on the class website. Try the CSS variables for link color as well as other CSS options.

Using Links to connect your pages

  1. Folder Name: Ex4
  2. Opening Page Name: index.html   use simple names for your other pages such as page2.html etc
  3. Make a minimum of 4 html pages. More would be better.
  4. Link all the pages together. (Using Relative Links)
  5. Link to at least 2 external webpages (using Absolute LINKS)
  6. 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)
  7. Add an email link
  8. At least one Image LINK (Hot Link)
  9. Create a CSS External Style Sheet and link it to at least two of your pages
  10. 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 (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
Exercise updated: 9.14.18