HTML From the Ground Up

by L. Downs

Linking to the World

So far we've learned how to put text into a Web page and make it fancy, and how to add graphics. Before we look at some of the finer points of Web page design, there's one more feature that we need to cover, and that's how to add links.

Although you can create Web pages with no links whatsoever to any other pages, this rather defeats the whole point of the World Wide Web. The Web got its name from the fact that you could include links in any page of yours to literally any other page in the world, as long as it was posted on the Web. Clicking on a link (which typically shows up as blue underlined text, although you can change that) causes you to go to whatever Web page the author of the page chooses. You can also jump from one point in a page to another point in the same page. This link-happy system is called "hypertext," and the exact process is described in excruciating detail in a standard called HTTP.

To create a link, you have to know where you want to go. Web pages have a special kind of address, called a URL (Uniform Resource Locator, pronounced either "you are ell" or "earl"). This address usually displays just above a Web page in your browser. You can include one of these addresses in your HTML code so that the viewer of your page can jump to that page. To do this, we use an <A> </A> pair of tags, and the first tag also includes an HREF attribute which provides your destination address like this: <A HREF="http://www.twinplanets.com/cels/">

Between the <A> tag with the URL and the ending </A> tag you can put any text you want the user to see. For example, if you want them to see the words "A gallery of animation cels" on your Web page and to be sent to the above address if they click on it, you would include this in your code: <A HREF="http://www.twinplanets.com/cels/">A gallery of animation cels</A>

Here is a bare-bones example of a page with this link in it. You can also see the HTML code for this page.

Now let's take a step back and see how all this works before we go further. Think of the process of loading a Web page as a courtly (well, sometimes not so courtly) dance between two machines, all carefully choreographed in that HTTP mentioned above. The first, the "Web server," actually has the various Web files on it, such as the HTML file and any graphics files that go along with it. The other machine, which contains the browser software, is the "client" (that's you).

When you enter a URL in your browser (or click on a link), your browser sends a request across the Internet to the address in the URL and asks for the HTML file included at the end of the address (if there's no filename included, the server looks for a file called index.html). The server finds the file and sends it back across the Internet.

Next, your browser looks through the HTML file for any other files (such as graphics files) that are mentioned in the HTML code, and asks for each one, one at a time. Each time it's asked for a file, the server complies by sending it back across the Internet. Once the browser has all the files it needs, it assembles them into a Web page on your screen. Of course, if any of the files are missing, or if the server encountered any problems, you may receive an error message instead, or see one of the odd-looking "broken graphics" symbols in place of a graphic.

For this reason, a page with a lot of graphics can take a long time to display, especially over a phone line connection. It's a good idea not to get too carried away with graphics in your pages, especially if part of your intended audience is still using telephone connections to access your pages.

You might be thinking to yourself, "But right now my files are on my own machine! That's how I'm editing and viewing them." Correct! In this case, your machine is actually the client and the server at the same time. But, since your PC isn't running Web server software, there are some things you can't do this way, such as run interactive scripts and other glitzy things that you might be dreaming of. For that, you'll have to get your files posted on a real Web server (besides, if you want everyone in the world to have access to your pages, you'll have to do that anyways, sooner or later).

Coming next: Troubleshooting.

Terms to know from this lesson

Hypertext: A collection of text, usually but not always on a computer device or network, designed to be read in non-linear fashion. The Web is an example of a hypertext system. So is a dictionary or encyclopedia.

HTTP: Hypertext Transfer Protocol. This is the set of rules and conventions computers use to send and receive web pages.

Link: A reference from one document to another.

URL: Uniform Resource Locator. The unique address of a document or resource on the World Wide Web.

<A> and </A>: Enclose text or graphic which will either be a link or a destination, depending on the attribute.

HREF attribute: Used in the <A> tag; tells the browser what URL to go to if the text or graphic enclosed by the parent <A> and </A> tags is clicked.

Server: A computer or device on a network that manages network resources. A web server manages a web site.

Portions of this tutorial originally appeared in Technotes, a publication of the UNLV Libraries, and are copyright by the University of Nevada, Las Vegas; used by permission. All remaining material © 2003 Lamont Downs.