COM271, week 2

HTML Links

Syllabus | Table of Pages | Assignments | References and Useful Links

Links: The Hyper in HTML

The essence of writing for the web is its hypertext nature.

Hypertext is text displayed on a computer or other electronic device with references (hyperlinks) to other text that the reader can immediately access, usually by a mouse click or keypress sequence. Apart from running text, hypertext may contain tables, images and other presentational devices. Hypertext is the underlying concept defining the structure of the World Wide Web, making it an easy-to-use and flexible format to share information over the Internet.

The prefix hyper- ([...] means "over" or "beyond") signifies the overcoming of the old linear constraints of written text. The term "hypertext" is often used where the term "hypermedia" might seem appropriate. In 1992, author Ted Nelson – who coined both terms in 1963 – wrote, " By now the word "hypertext" has become generally accepted for branching and responding text, but the corresponding word "hypermedia", meaning complexes of branching and responding graphics, movies and sound – as well as text – is much less used. Instead they use the strange term "interactive multimedia": this is four syllables longer, and does not express the idea of extending hypertext. — Nelson, Literary Machines, 1992

—Wikipedia, "Hypertext"

The html element that is essential to hypertext (and, indeed, the web) is the link or anchor element, <a>, with its essential hypertext reference (href=) attribute and web address as corresponding value:

<p>This paragraph contains a <a href="2_html_links.htm">link back to this same page</a></p>

The link element can be used to reach pages on other servers, or pages within the current site. There are other means to link to files within the current site, and we will cover these below.

Absolute Versus Relative Links

Web Addresses—URL's: A URL is a web address written in text. URL stands for Uniform Resource Locator. A synonym is URI, for Uniform Resource Indicator, and this is preferred over URL, it is said. (Here is a complete technical specification for URLs from Apache Labs) The format includes:

The complete URL for the page you are on (i.e., "the current page") looks like this (This is displayed in a textbox at the top of your browser: see it?):
http://www.com.uri.edu/com271/course/notes/html_links.htm

Absolute Link: A web page uses the complete URL when referring to any page or file on another web servers (i.e., a server different from the one containing the current page): <a href="http://www.com.uri.edu/com271/course/notes/html_links.htm">Click here to learn about html links</a>

Relative Link: When a browser encounters a hypertext reference that does not begin with a standard protocol, it assumes that the reference is to a page or file on the same server as the current page and in the same directory. Because I keep all of my course notes in the same directory (...course/notes...), I can link from the current (i.e., this) page to any other page within the notes directory with a shorter link:
<a href="1_intro_to_html.htm">Click here for an introduction to html</a>

Why?: This shortcut allows you to use less code on a page. This shortens your workload as a developer. Less code is sent as part of the page. The browser is able to reconstruct the correct URL for any link, making a correct request to the server and directory containing any file.

Relative Links to the Same Server but Different Directory

Let's say that I am very well organized as a developer (that's a given, of course) and that I set up my web site for this course with separate folders for course notes and for weekly review questions (if you poke around, you'll see that I have, in fact, done this). The relative address that I would use would include the separate directory. It would also include " ../ " to indicate that you would first have to go up one level (i.e., outside of the notes directory) first, and then begin to look for a directory of questions:
<a href="../study_questions/1_html.htm">Review Questions for HTML</a>

Linking Within a Page

The <a> element is usually called a link (although there is actually a <link> tag, which we'll get to next), but it is also referred to as an anchor. In addition to being a means to go to other pages, it can also be used to move to other places within the same page. This takes two uses of the <a> tag, one to refer to and one to anchor a link:
Refer: <a href="#somewhere">Go somewhere</a>
Anchor: <a name="somewhere">l;</a>

Notice that the anchor uses a name attribute, assigning a unique label to itself. This same label, prefixed by the pount (#) sign, is used in the reference call.

On very long pages, it is useful to help the page user by including a "Links within this page" menu. This is how pages with long indices work. The alphabet is spelled out, with each letter (or group of letters, e.g. "e-f") contained in a <a> link tag referring to a named anchor lower on the page *<a name="EtoF"></a>. At intervals on the page, there may be another link to a named anchor at the top of the page, permitting the user to navigate without lengthy scrolling.

"URI A to Z" on the University's home page takes you to a directory of Offices and Services, a good example of within-page navigation.

If a page contains a named anchor, you may also use that in a link from another page. To get to the named anchor that I embedded on this page (just above the label "Relative Links to the Same Server...," above), you could use
<a href="2_html_links.htm#special">Click here</a>
Instead of loading the page at the top, it will move down the page and load from the anchor on down. If there is less than a full screen, it will load a full screen (i.e., the end of the page).

Links Around Images: The link tag normally contains text, but it can also be used to contain an image or a div that itself includes a mixture of image and text.

Image Maps: I won't go into detail here, but it is also possible to create links from parts of an image. These map regions are distinct, and each links to a distinct hypertext reference. For more, see the W3C Schools reference for the <map> tag.

Other Links

The ability to use the web server to point to the addresses of particular files can be extended to modularize a web page, our next subject.

Reference