Beyond Filamentality: Adding Images

Placing Images in Web Pages

While surfing and searching the Net, you ran across gobs of graphics: banner titles, pictures, photographs, bullets, bars, logos, etc. So you're probably saying to yourself, "I want some of that." This page will show you how to place graphics you already have. Another "Beyond the Son of Filamentality" training site will help you if you're interested in grabbing, scanning, or creating graphics for your Web page.

So, what's covered in this 6 part graphics tutorial is:

The HTML of Adding Images
Here's where you learn the HTML tag that magically makes your images appear through a Web browser. The five lessons after this are useful, courteous, and elegant, but if you learn this first step you've got "quick and dirty" web images down!
Using Height / Width and Alt Tags
The courteous part of placing images relates to how fast they load. You learned some key points about file size in the Grabbing Graphics tutorials, but another part to a quick-loading page is using Height and Width tags. These allow the text to load before the images download, so people can read your page right away. Another courtesy are "Alt," or alternate, tags. This is text you enter to describe the graphics in case viewers of your page have graphic loading turned off.
Aligning Images
Images appear where you place them. Usually this is "in-line" between a line of text. But sometimes you want to make the page look more elegant by aligning the images on the right or left side of the page. Then text can fill in around the image. This looks a lot nicer than having a graphic just sitting plopped between a line of text.
Adding "White Space" Between Images & Text
The next step after aligning your images and wrapping text around them is to add a little "white space." This way you won't have words bumping right up against the image, but cooly hovering a few millimeters away.
Adding Two Kinds of Borders to Images
Sometimes you'll want to make your images stand out more by adding a border around them. Sometimes this looks neat and sometimes borders are clunky and too much. Guess who gets to decide? You do! You can use a solid border of varying thickness or try a 3-D, beveled border.
Using Images as Hotlinks
Finally, you might want to use an image as a "button" that will send the user to another Web site when they click on the graphic. This is easily done and can make a page more user friendly (if the buttons are clear!).

Return to the "Beyond the Son of Filamentality" Homepage

Last revised May 21, 1996
By the SDSU/Pacific Bell Fellows
Applications Design Team/Wired Learning
http://www.kn.pacbell.com/wired/beyond/image.intro.html
Copyright © 1996 Pacific Bell -- All Rights Reserved