Images, Hyperlinks Invite Longer Stays, Offer Gateway to the Web

By CHRISTINE FREY

March 15, 2001 12 AM PT

clfrey@aol.com

Effective Web sites draw visitors in and get them to stay and look around. Pages of nothing but text are not very inviting. Adding more sophisticated elements to your Web pages such as links and images improves its use and look--and its appeal to visitors.

Hyperlinks connect your page to the rest of the World Wide Web, taking visitors to other sites on the Internet.

Working within the body portion of your HTML document, you can add a hypertext reference attribute to an anchor tag. The address of the site to which you wish to link should follow in quotation marks. For example, linking your page to the Los Angeles Times requires the following:

Los Angeles Times

The content included between the anchor tags will appear on the browser as blue, underlined text. That’s your link. Clicking on it takes you directly to The Times’ Web site. The ability to connect pages gives the World Wide Web its name.

If you create multiple Web pages on the same server and want to link them, you need only include the relative address of the desired page. A relative link excludes the scheme and server name. For example, to link from your main page--say, www.mypage.com--to your practice page--www.mypage.com/practice.html--you would write:

I’m learning HTML. Check out my practice page.

In this case, practice.html is the relative page, www.mypage.com is the server and http is the scheme--or the protocol with which your browser should connect.

By default, links appear as blue text. You can change their color by using the link attribute within the body tag. Active link, or alink, and visited link, or vlink, colors also can be modified this way. The tag will result in red links that turn green when selected and gold when visited.

Images can be included in much the same way.

Working with the image tag, add the source attribute and include the name of the image you want to display, enclosed in quotation marks. If the image is located within the same directory as your HTML document, your tag will look something like .

If the image is located in another folder within your server--or on a completely different server--you must include its full location within the quotation marks.

Images usually come in two common forms--JPG (or JPEG for Joint Photographic Experts Group) and GIF (Graphics Interchange Format). Photographs and other detailed images usually are saved as JPEG files; illustrations commonly take the form of GIF files.

Images often take the most time for a browser to download. You can speed up the process by including height and width dimensions for each image. As the page downloads, the browser reserves space for the image, allowing the rest of your layout to take the appropriate form.

Height and width attributes follow the source attribute within the image tag and include the image’s size in pixels. The tag will insert an image that is 600 pixels high and 400 pixels wide.

To control how images appear in relation to the other elements in your layout, use the align attribute. There are five attribute values common to both Netscape and Internet Explorer browsers: top, middle, bottom, left and right.

The value you assign to the image will determine where the rest of your content falls in alignment with the image.

The left and right values, for example, allow text to wrap around the image, indicating on which side the image will lie.

To prevent the image and text from appearing too close together, add vspace and hspace attributes, which create vertical and horizontal spacing around the image. The higher the numerical value you give each attribute, the greater the space.

Borders work similarly. Using the border attribute in the image tag, you can create a frame around your image. The higher the numerical value of the attribute, the thicker the border.

In some cases, a browser might be unable to display your image. Though you might not be able to prevent this from occurring, you can tell your visitors what they are missing by using the alt, or alternative text, attribute. When the attribute is employed, a temporary text box will display on the browser when the computer mouse passes over the image.

An alt attribute can contain a few words or an entire sentence; enclose the description you wish the text box to display in quotation marks after the attribute in the image tag.

You can create your own images with programs such as Photoshop, but there are dozens of Web sites, such as https://www.clipartconnection.com, that offer free graphics. Some sites might ask that you include a link to them on your page if you use their material. Make sure not to borrow images from other Web sites without permission.

Christine Frey is a freelance writer.

(BEGIN TEXT OF INFOBOX / INFOGRAPHIC)

Building Your Own Web Page

1. Picking the right provider

2. Understanding HTML

3. More HTML

Today: Adding links, photos and graphics

5. Creating forms

6. Using tables

7. Navigating with frames

8. Getting yourself found

9. Making money on a personal site