Anchors



Anchors The real point of the Web, of course, is that documents can be linked to each other, or to other types of files such as movies or sound clips, through the use of hyperlinks. These links allow authors to link documents together in intuitive ways, as opposed to traditional linear texts such as books, articles, or almost anything else printed. In order to create a hyperlink, you'll need to know two things. The first is the URL (that is, the location ) of the file to which you want the link to go. The second is knowledge of how links work, which is the subject of this chapter. You will be required to send the html files, you produce during this session, as attachments. The Basic Anchor The simplest possible anchor starts with <A> and ends with </A>. However, you will never ever use the <A> tag by itself, because it doesn't do anything. You'll need to enhance the <A> tag with attributes like... HREF HREF stands for "Hypertext REFerence," which is another way of saying, "The location of the file I want to load." Most anchors are in the form <A HREF="URL">, where URL is the location of the resource to which you want the link to point. For example, the CWRU Web server is at "http://www.cwru.edu/" (that's the server's basic URL). A sentence which contained a link to that address would look something like: Check out the <A HREF="http://www.cwru.edu/">CWRU Web server </A> The words outside the angle brackets but between the open and close of the anchor ("CWRU Web server") would be displayed as a hyperlink. Selecting that link within a Web browser would cause the browser to link to and load the CWRU Web server's main page. Here's what the above markup looks like in your browser: Check out the CWRU Web server The double-quote marks found around the value of HREF in an anchor are, under certain specific circumstances, optional. However, in most cases they are required. In addition, if you start the URL with a double-quote, you must close it with another. Just as tags need to be balanced, quote-marks do too. Linking to a local Document Exercise: The simplest hyperlink jumps to a different document in the same folder or directory on the same computer. Create two HTM files in the same directory, one named file1.htm and the other file2.htm To enable the user to jump from one document to another an anchor tag is required in file1.htm: <A HREF="file2.htm">Highlighted text to appear</A> Thus:- <HTML> <HEAD> <TITLE>Simple HTML Documentwith local links</TITLE> </HEAD> <BODY> You can try out my hyperlink by <A HREF="file2.htm"> clicking here</A> </BODY> </HTML> - The target file2.htm should read, <HTML> <HEAD> <TITLE>Target HTML Document</TITLE> </HEAD> <BODY> This is my First ever HYPERLINK! </BODY> </HTML> A URL (and therefore, by implication, an anchor) can point to any resource available on the Web. This is usually another HTML page, but it can also be a graphic, a sound file, a movie, or any other kind of file. This fact lets you set up links to large graphics without actually having to display them in the page. For example, if there were a graphic file called "welcome.gif" in the directory "emeyer" of a server with the address "www.site.edu," the URL would be: http://www.site.edu/emeyer/welcome.gif Therefore, a text anchor referring to this graphic file would look something like: <A HREF="http://www.site.edu/emeyer/welcome.gif">See my welcome message! </A> A user who selects the anchor thus created will cause their Web browser to download the graphic file, which will then be displayed by their browser or by a helper program. In case you were wondering, the first four letters of a Web URL do mean something. http stands for "HyperText Transfer Protocol," which is the technical way of saying "how the computers move Web data back and forth." There is of course a way to link to a specific part of a document. Using a standard hyperlink, of course, but with a small addition. Found in the HREF attribute, the name is tacked onto the end of the URL of the document in which it appears. To do this, just enter document's URL, and then add a hash-sign (#) and the name to the end of the URL. For example, assuming that the document's URL is "http://www.site.edu/food.htm" the pointer to the named anchor pt.3 would be: http://www.site.edu/food.htm#pt.3 A hyperlink which has the above URL in its HREF attribute will take the reader straight to the text contained within the anchor <A NAME="pt.3">... </A> within the file "food.htm." (Incidentally, if the browser loads a file but can't find the named anchor which has been specified, it simply goes to the top of the file, just as it would have if there hadn't been a name in the URL at all.) Now, you may be confused about why a hash-sign (#) is in the URL. That hash-sign is how the browser knows that it's looking for a name, and how it keeps the named anchor separate from the document's filename. Therefore, if you are writing a hyperlink which points to a named anchor found within the same document, you only need to have the hash-sign followed by the name of the anchor. For example, a hyperlink to Part 3 which is found within the file "food.htm" would have this markup: <A HREF="#pt.3">Part 3</A> training report sheet Using the above material try to answer the following:- Email address Name 1 The two most common attributes of the anchor tag (<A>) are: URL and NAME NAME and NUMBER A and B NAME and HREF HREF and URL 2 The NAME attribute is used to: identify your computer specify the page's author specify an invisible anchor refer to another resource request a user's name 3 An anchor's URL may only point to another HTML page. True False 4 Which of the following is an incorrect anchor? (Assume that the server, files, and named anchors referred to actually exist.) <A HREF="http://www.site.edu/> <A HREF="test1.htm#p2"> <A NAME="http://www.site.edu/"> <A NAME="section21"> <A HREF="#section21"> 5 The symbol used to identify a reference to a named anchor is: HREF the pound-sign the exclamation point the double-quote 6 Send an e-mail to dingbats@mcr1.poptel.org.uk and attach the files you created in this session. (see Attaching a File to a Message)