1  <HTML>
  2  <HEAD>
  3    <TITLE>HTML Example:  Links</TITLE>
  4  </HEAD>
  5  <BODY BGCOLOR="#FFFFFF">
  6  
  7  <A NAME="topOfPage"><H1 ALIGN="CENTER">Links</H1></A>
  8  
  9  <H2>Text links</H2>
 10  
 11  A simple textual link that takes you back to the 
 12  <A HREF="../html.html" TARGET=_top>home page</A> for this tutorial is 
 13  included as part of this sentence.  Go ahead...try it and see what 
 14  happens!  Alternatively, links may be prominently displayed, such as 
 15  the one below: <P>
 16  
 17  <CENTER>
 18  <A HREF="../html.html" 
 19  TARGET=_top><B>HTML tutorial page</B></A>
 20  </CENTER>
 21  <P>
 22  
 23  Both of the previous examples link to a page in the directory 
 24  <EM>containing</EM> the current directory, hence, the use of two dots 
 25  (..)  in the URL, which signifies one level up in the directory 
 26  hierarchy.  Here is a link to the Web Technologies home page: <P>
 27  
 28  <CENTER>
 29  <A HREF="../../index.html" 
 30  TARGET=_top><B>Web Technologies</B></A>
 31  </CENTER>
 32  <P>
 33  
 34  which links to a page two levels up in the directory hierarchy.  
 35  Study the corresponding HTML code closely.
 36  
 37  <H2>Graphic links</H2>
 38  
 39  In addition to textual links, an HTML page may also have 
 40  graphic links.  Here is an example of a graphic link: <P>
 41  
 42  <CENTER>
 43  <A HREF="links1.html"
 44    onClick="window.open('links1.html.html', 'bottom_frame')"
 45  ><IMG BORDER=0 WIDTH=32 HEIGHT=32
 46  SRC="../../images/righthand.gif"></A>
 47  </CENTER>
 48  <P>
 49  
 50  which sends you to another page with more information about links.  
 51  Remember, you can put any HTML code you want inside the 
 52  &lt;A&gt;&nbsp;...&nbsp;&lt;/A&gt; container: text, graphics, or 
 53  whatever.
 54  
 55  <H2>Arbitrary WWW links</H2>
 56  
 57  The above links are to pages on a local Web server, hence, the 
 58  abbreviated URLs, but you may link to a page on <EM>any</EM> Web 
 59  server.  For example, the link <P>
 60  
 61  <UL>
 62    <LI><A HREF="http://lal.cs.byu.edu/buttons/" 
 63    TARGET="newWindow"><B>LAL Images for Buttons</B></A>
 64  </UL>
 65  
 66  is a link to a server in Utah.
 67  
 68  <H2>Links on the same page</H2>
 69  
 70  All of the above links are to pages distinct from the current page.  
 71  However, a link may be to a remote part of the current page (which 
 72  only makes sense for long pages).  For example, the following link 
 73  jumps to the top of the current document: <P>
 74  
 75  <CENTER>
 76  <A HREF="#topOfPage"><IMG BORDER=0 WIDTH=32 HEIGHT=32
 77  SRC="../../images/uparrow.gif"></A>
 78  </CENTER>
 79  <P>
 80  
 81  To understand how this works, examine the corresponding HTML 
 82  code carefully.
 83  
 84  <P><HR>
 85  
 86  </BODY>
 87  </HTML>