Setting up a Web Site - HTML

Part 4 - Links to Other Documents

The Anchor Tag for Links

Hypertext - links to other documents
Anchor tags - <A> </A>
Text or graphics between tags operate as a link
Required element: the name of the link

Link to Shippensburg University's home page. Location:

http://www.ship.edu

Specify the hypertext reference within the anchor tag using parameter HREF= followed by the location in double quotes:

I am currently a communication/journalism major at <A HREF="http://www.ship.edu">Shippensburg University of Pennsylvania</A>, where I will graduate in May.<P>

HyperText References (HREF)

Absolute reference - exact location of a World Wide Web page: http://www.ship.edu
Relative reference - relative to the document which is being viewed: first.html
/spring/calendar.html
../intro.html

Content of file second.html:

<HTML> <TITLE>HTML Workshop - My Second Document</TITLE> <H2>My Second Document</H2> This is my second HTML document. This will illustrate how to use links, which is a powerful feature of HTML.<P> <HR> I've already created <A HREF="first.html">my first document.</A> If you select that link, you can look at it.<P> Here is a link to <A HREF="http://www.ship.edu">the Shippensburg University home page.</A> Take a look at it.<P> <HR> </HTML>

Relative references:

Useful when creating series of documents stored together
Shorter to type:
- pdhtmlb.html versus
- http://www.ship.edu/~pfdemp/htmlguide/pdhtmlb.html
Reduce chance of typing error
Easier to move documents to a different location

Absolute references:

Required when linking documents at other locations
Prescribed format for links

Uniform Resource Locator (URL)

Uniform Resource Locators (URL) identify locations of documents. Example:

  http://www.ship.edu/~pfdemp/htmlguide/pdhtmlb.html

Consists of four parts:

Document or location type ( http )
Host/server name ( www.ship.edu )
Path name ( ~pfdemp/htmlguide )
File name ( pdhtmlb.html )

Document Type

http: Files on a World Wide Web server, using the HyperText Transfer Protocol.
gopher: Files on a gopher server. Gopher is a text-based document distribution system common on the Internet.
ftp: Files on an ftp server using the File Transfer Protocol. This is a system of distributing files to be downloaded to your local computer.
news: Files on a Usenet news group server.
telnet: A telnet connection to a remote computer.
file: A file on your local computer.

Host or Server

Name of the remote computer using a standard type of internet address. The end of this name tells something about the type of location:

edu: Educational institutions.
com: Commercial businesses.
gov: Government agencies.
mil: Military.
org: Non-commercial organizations.
net: Networking services companies.

For international locations, the 3-letter type is followed by a 2-letter country code (such as ca for Canada).

Path Name and File Name

Identifies the specific document you would like to view. If file name omitted, browser retrieves the default file (such as index.html).

Examples of absolute references:

Link to a directory in a WWW server: <A HREF="http://www.ship.edu/~registr">Registrar's Office</A> Link to a specific file: <A HREF="http://www.ship.edu/~registr/cal966.html">1996 Fall</A> Link to a gopher server: <A HREF="gopher://gopher.ship.edu">The SU Gopher</A> An off-campus link: <A HREF="www.whitehouse.gov">Visit the White House</A>

Links to Specific Sections in Documents

Create a named section using the anchor tags ( <A> </A> ) with the parameter NAME (instead of HREF):

<A NAME="sections">Links to Specific Sections</A> To create a link to this section, use HREF with a hash mark ( # ) followed by the section name. This link would be:

you can have <A HREF="#sections">links to sections</A> Linking to specific sections of other documents:

Review

Examples of the use of the anchor tag (text indicates the text which is highlighted as the link):

<A HREF="http://www.ship.edu"> text </A>: An absolute reference to the main page of a WWW server.
<A HREF="http://www.ship.edu/~registr"> text </A>: An absolute reference to a path on a WWW server. This would display the default file ( index.html ) in that directory.
<A HREF="http://www.ship.edu/~registr/cal966.html"> text </A>: An absolute reference to a specific file.
<A HREF="pdhtmlc.html"> text </A>: A relative reference to the file name pdhtmlc.html which is on the same server and directory as the current document.
<A HREF="pdhtmlc.html#review"> text </A>: A reference to the section review in the file pdhtmlc.html.
<A HREF="#review"> text </A>: A reference to the section review in the current document.
<A NAME="review"> text </A>: Creates the section named review at the highlighted text.

In the next section, we'll look at how colors and graphics can be used to enhance your HTML documents.

Go to Top of Page

Back to Contents Page On to Next Section

Setting Up a Web Site
1998 MSACROA Conference
Monday, November 30, 1998