HTML REFERENCE - LINKS

URL Who?
URL's are Uniform Resource Locators or signposts to tell you where you are or where your going. Its an address for the location of information on the Internet. To navigate to other pages or Web sites, you will need to Reference the URL of the place you wish to Link to. You can easily get this information by accessing the page or site and then cutting and pasting the URL into your document instead of trying to remember it, as some URL's are quite extensive.

There are usually three parts to Most URL's:

• The Protocol.....(http,ftp,gopher,mailto etc.)
• The Host Name....(the Internet system where the info is stored: aol.com, tumvsa)
• The Directory and or Filename..(may have multiple directories coded)

For more extensive information on URL's and the various types, handling special characters, etc. reference the HTML manual.

Names/Anchors and References
Links give access to other parts of your document, other documents, and to other Web sites.
There are two parts to every link:

• The Name of the file or place you are linking to (URL).
• The Reference which is the Text/Image associated with an URL which your
  readers can select to link to the Name.

The "A" (Anchor) tag uses various attributes to allow you to link. It is a two-sided tag and must have a closing tag. It may have some descriptive text between the opening and closing tags to tell what or why its coded there.
The "NAME" attribute is part of the ANCHOR or URL. It is the actual place you will be linking to. When you reference this Name (preceeded by a # in the HREF statement), your link flow will take you Here.
The "HREF" attribute is the HYPERTEXT REFERENCE. With it you will use some Text or an Image which when selected will Reference the Name, File or URL specified as the place you want to go and perform the link to that place.

Code as follows:
SIMPLE INTERNAL LINK:
<A NAME="TOP">Top of Page</A>-----------This is the Anchor and is coded at the top of the page.
<A HREF="#TOP">Goto Top of Page</A>----This is the Reference and can be coded anywhere on the page.

Linking: The IN's and OUT's
There are multiple ways to Link, such as Internally in the same page, or Externally from Page to Page or from your page to another Web site, and so on.

How to code an Internal Link (within same page):
<A NAME="LINK">Top of Link Page</A>
Body of Document with TEXT and other Tags
<A HREF="#LINK">Goto Top of Link Page</A>

EXAMPLE:
Goto Top of Link Page

How to code an External Link (to another page):
<A NAME="LINK">HTML Ref Index - Links</A>----Coded on the Index page itself.
Body of Document with TEXT and other Tags
<A HREF="index.html#LINK">Goto HTML Reference Index</A>----

      HREF info in quotes is the actual Filename, URL or Anchor name
           your linking to.

How to code an External Link (to another Web site):
Body of Your Document with TEXT and other Tags
<A HREF="http://www.microsoft.com/">Goto Microsoft Web Site</A>

EXAMPLE:
Goto Microsoft Web Site----Select BACK in your Browser to return to this HTML reference.

There is one attribute you can use with the HREF tag. This is:

• Style="text-decoration: none" (will NOT underline the text link)

Links and Images
Instead of using Text as your Link, you can use an IMAGE where appropriate. The image will replace the Underlined text you would normally see for a link. When using Images as your link, be sure to code an ALTERNATIVE to the image in case there is a problem and the image cannot be found or takes a long time to load. This alternative is a simple text name which appears where the image would normally appear and it will not show when the Image is present.

Rules of Thumb:
--Keep your Images small - it takes less tiime to load (under 10K).
--Do you Really Need It?, Is it relevant annd appropriate?
--Reuse Images to provide consistancy to yoour design.
--Provide Text alternative to the Image in case is does not load.
--Optimize your Images (compress- 72 DPI iss all the browser can use).
--Keep your pages between 40 - 50K in size..

There are various attributes you can use with the IMG tag to control your Image. These include:

• ALT="text" (provides text alternative to the image)
• SRC="where image is located" (URL/address of image)
• BORDER=# (size of Border around image)
• HSPACE=# (horizontal space around image)
• VSPACE=# (vertical space around image)
• ALIGN= (Left, Right, Center, Top, Middle, Bottom, etc. - Browser dependent)

  --- or for more customization code --- 

EXAMPLE:
-image link after customization-

-How alternative text appears in a Link wheen image does not-

Chapter 5 Assignment

Tynette Lunday
Tlunday2@txu.com
10/08/2004