The HTML Page
Lessons
Writing Your First Document
Formatting Your Documents
Links and Images
Lists and Rules
Touches of Color
Tables
Information
Helpful Links
The Guestbook
Sign it
View it
Guestbook provided
by htmlGEAR

Links and Images

It seems that a major feature of Web pages is the fact that it contatins links to great websites, and colorful pictures. In this lesson, you'll learn how to place images and links into your documents.

Images

What we'll learn now is to place images to a Web page. To do this, use the IMG tag.

<IMG>
To place an image, such as a photo or an icon, add this code:
    <img src="location_of_your_image">
where location_of_your_image is the location of your image. Here's an example.
Example:
Source:
 <img src="icon.gif">
To resize an image, put the HEIGHT and WIDTH attributes in the IMG tag.
Example:
Source:
 <img src="icon.gif" height=60 width=80>
Text-based Web browsers support IMG tags, but don't display the image. They just display the ALT text in the coding. To put some text that will become the alternative of the image in text browsers, use the ALT (for "alternative") attribute. Consult the example below. Note: If you have Netscape 4.0 or higher or Internet Explorer 4.0 or higher, you can display the ALT text by placing your mouse pointer on the image for a few seconds.
Example:
 Remember to keep the ALT text short!
Source:
 <img src="icon.gif" alt="Remember to keep the ALT text short!">
You can change the alignment of the image using the ALIGN attribute.
ALIGN=left
ALIGN=right
Aligning images have an advantage, too.

Example:
Since the image is aligned with this text, you save space because the text starts at the top of the image, not the bottom.

Links

Without links, your Web page would be pretty much useless. Most surfers want many links to get to what they're looking for. You create links using the A tag.

<A>
The A tag (which stands for "anchor") allows you to link to documents and parts of documents.

First let's explain how to link to parts of documents. To put an anchor to a document, put this code in the area you want to link to:

    <a name="name_of_anchor"></a>
For example, the top of this page has an anchor called "top". Click here to reach it.

Notice that the anchor is hidden. You can't see it, but you know it's there. Now, to link to this anchor, type:

    <a href="#name_of_anchor">
the text that will be the link, and the closing tag: </a>.
Example:
 Go to the top
Source:
 <a href="#top">Go to the top</a>
These are the links you'll see more often -- the links to other web pages. For instance, here's the link to Yahoo!.
Example:
 Go to Yahoo!
Source:
 <a href="http://www.yahoo.com">Go to Yahoo!</a>
If you're linking a page on your own website, it'll be much different. If the file is on the same directory as the page with the link, just use the file for the link. This example is the Links page. Click on it, and then push your back button to go back to this page.
Example:
 My Links page.
Source:
 <a href="links.html">My Links page.</a>

© 2001 Peter O.