Images and Hyperlinks

So far, we've learned how to put up a static document that does nothing: pure text, no action. Now, we will learn how to insert images and links to other documents.

The true power of the internet lies in the ability of any web page to link to any other web page with a hyperlink. You can create a link by use of the anchor tag. The anchor tag has two primary functions: to define where a hyperlink points and to name particular places in a document.

Anchor tag
<a>...</a>
Anchor - makes the selected text into an hypertext link or the destination of a link.
  • href="url" -- the URL to which the text should link
  • name="text" -- name a reference point in a document
Example Code
<a href="http://www.perseus.tufts.edu">The Perseus Project</a>
<a name="bob">Bob reference point</a>
<a href="#bob">Link to Bob</a>
Example Output
The Perseus Project
Bob reference point
Link to Bob
<img>
Inserts an image.
  • src="url" -- the URL of the image file
Example Code
<img src="http://courses.washington.edu/html/images/uwired_logo.gif">
Example Output

The above file names are absolute references. No matter where this page is located, the above links and pictures will find the file to which they are pointed. For pages in your own directory, use relative references. For example, suppose I have two sub-directories in my public_html directory. One is called personal while the other is called work. In each sub-directory, there is a file called index.html. The image below illustrates the situation:


Now, if I wanted to put a link from my personal page to my work page, than I would use the following syntax:

<a href="../work/index.html">See my Work Page as well</a>

The "../" tells the browser to go up one directory, and then look for the file. The "work/" tells the browser to look in a directory called "work" and the "index.html" tells the browser to look for a file called "index.html"


[ Back | Home | Next ]