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 can 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!)

First posted 1997. Last modified Monday November 26, 2007 © 2008 Copyright AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property. This site contains links to public sites whose content and language do not fall under the jurisdiction of AT&T. The views and opinions expressed at these sites are not those of AT&T. Please read our Disclaimer.