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