Links

In week 2 and lab 2, we worked with links to a web page. Remember that we can link to a web site, a directory in a web site, or a specific page in a web site.
We linked to web pages in other sites; this is called an absolute link, because the full http transfer protocol is specified.
We also linked to other pages, looking in our current directory; this is called a relative link. Relative links can also relate to other directories within our server by specifying the path to the directory.
We also considered copyright limitations in week 2 and lab 2.

Internal links

Internal links allow you to link to a specific place within a page, rather than just linking to the top of the page. You must specify an id at the location where you want to go. Then you must specify where you want to go in the <a> tag.

Look at the samples, to understand what I mean. Look at the source code for these pages. There are comments in the code, indicating what to look at. To look at the source code for a page, in the menu select -view -page source

Be sure to read my comments about current practice, in the reading assignment below, before reading the book section 5.2

Link style

Usually, you do not want to change the default blue/purple color for links.
Sometimes you want the links to be more prominent.
Sometimes you want the link colors to be lighter, because you are using a dark background.
Look at the sample, which changes the style for the links. The style sheet for the sample page contains:

body
  {
  color:            white;
  background-color: black;
  }
a:link
  {
  color:            #c0cbe7;
  font-size:        150%;
  }
a:visited
  {
  color:            #d2a6c7;
  font-size:        150%;
  }
a:hover
  {
  color:            #fac6aa;
  font-size:        150%;
  }
a:active
  {
  color:            #f0888a;
  font-size:        150%;
  }
         

Title

A title can be put on any element.
If you put a title on an a tag, the browser can use the title as a tool tip. A tool tip when the user holds the pointer over the link.

XHTML standards

We have been using a simple sample web page to build our web pages.
It contains the following elements:

  • html
  • head
  • title
  • body

We need these four elements in a standard web page.

We also need some things to specify that we have a standard web page.
From now on, we will use a new Web page template to build our web pages.
It contains the following elements:

<?xml version="1.0" encoding="UTF-8"?>
This is the xml specification. XHTML is HTML and also is XML. We are using XML 1.0. The character set is UTF-8, which includes the American English alphabet, and many other alphabets.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This is the SGML specification, which says we are using html as the root element, which contains all our other elements. Note that the SGML element requires some upper case letters. It says we are using the XHTML 1.0 Transitional standard. The Transitional standard allows all the current strict elements and attributes. It also allows some older elements and attributes, which we are occasionally using.
<html xmlns="http://www.w3.org/1999/xhtml">
This is the html element. The xmlns attribute specifies we are using the xml name space for XHTML.
head, title, body
The head, title, and body elements are required, as we did in the simple web pages.
link, h1, a, and comment
The link, h1, a, and comment elements are NOT required, but you probably want them.

Validation

Now that we can build a web page, using the prototype, that includes the standard specification, we can validate our pages.
The link is to the standard validator.
The first tab is   Validate by URI   - you can copy the address of your page on voyager, paste it in the Address field, and press check.
The second tab is   Validate by File Upload   - you can copy the address of your page on your home or school machine, paste it in the Address field, and press check.
The validator will probably tell you that you have 429 errors. Do not worry about it. Just fix one or two of the first errors listed. Often that will cause many following errors to go away. After you have fixed one or two errors, run the validator again. Repeat this until the page is valid.

Lab 6

In lab 6 we will begin using a new lab topic. If you have not already done so, send an e-mail to your instructor requesting approval for your selection. In the e-mail, select one state of the United States of America, or select a foreign country. ( You may include second and third choices, in case your first choice is not available. )

Validate lab 6

Validate your lab 6 page.

Complete Lab 6

You have built your lab 6 web page and uploaded it to voyager.
Look at the page with your Firefox browser, to make sure the page works correctly on voyager.
Then, log in to Catalyst and submit assignment 6. The submission should provide the following information:

  • It should say that you have completed Lab 6.

Reading assignment

Reading assignments are in HTML, A Beginner's Guide, by Wendy Willard.
Read the chapter. The chapters are divided into Critical Skill sections.

Chapter 5

Add Links to Other Web Pages
Read about absolute and relative links.
Add Links to Sections Within the Same Web Page
The book uses the name attribute to identify an XHTML element. The use of the name attribute is being phased out.
Instead, use the id attribute to identify an XHTML element.
Also the book puts the name on an   a   element. The use of the   a   to carry the identification is also being phased out.
Instead, put the id on the first element where you want the target to be. Often this is the heading element at the beginning of a section of your page.
Example:
<h3 id="discussion"> Discussion </h3>
Add Links to E-Mail Addresses and Downloadable Files
You can see my e-mail link in this week 5 web page.
Download links are often useful, but we are not building these in this course. Try one if you wish.
Style Link
Link styles are sometimes used, when links are prominent features of a page.
Customize Links by Setting the Tab Order, Keyboard Shortcut, and Target Window
Some web sites use a title in the  a  elements, to provide a tool tip.
Tab order is sometimes used within a form. We will look at forms later.
A target of "_blank" is often used when you open a page that belongs to a different web site. It opens in a new tab, or a new window. The different tab or different window shows clearly that it is separate from your web site. On the other hand, it is a nuisance for the user to keep needing to close all the windows.
The standards committee plans to phase out the target attribute of the  a  element; however, the replacement techniques are not all in place yet, so use the target attribute of the  a  element for now.

An alternate text is Even More Excellent HTML by Timothy T. Gottleber and Timothy N. Trainor. This book gives both new and older techniques. You may read in this book, if you wish.
Chapter 3