Creating links to your images

There are three basic ways to use images in your pages.

Including images in your layout

The basic HTML tag for including images in you document is: 

     &ltIMG SRC="[Document]" ALT="Your Alternative text">



 eg. &ltIMG SRC="Logo.GIF" ALT="Educational Technology Center">
Educational Technology Center

This will simply place the image on your page. The ALT tag is Alternative Text which a browser application can use in a variety of ways. A text only browser will display this text for your image, if no ALT text is included in the tag a text only browser will simply state [IMAGE]. Including this Alternative Text is important to allow visually impaired people full use of your pages when they access them over the Web. Some graphical browsers will display this text when images are not loaded. Some people, especially those using slower connections from home, do not load all the images and this text will give them some idea of what the image is and help them decided whether or not to load it.

Text following your image on the page will begin right next to the bottom of the image. 


&ltIMG SRC="Logo.GIF" ALT="Educational Technology Center"> RIT
Educational Technology Center RIT

You can add the align specification to your image tag to position the text differently. 


&ltIMG SRC="Logo.GIF" ALT="Educational Technology Center" Align=top> RIT
Educational Technology Center RIT 


&ltIMG SRC="Logo.GIF" ALT="Educational Technology Center" Align=center> RIT
Educational Technology Center RIT

If you want your text to begin on a new line after the image use the &ltBR> tag to indicate a paragraph break. 


&ltIMG SRC="Logo.GIF" ALT="Educational Technology Center">

&ltBR>

Welcome to the Educational Technology Center.
Educational Technology Center
Welcome to the Educational Technology Center.

If you don't have any images of your own to work with you can browse the sites on the RIT Library -- Images for Web page. If you need a reminder on how to acquire images from these sites you may want to review the section on getting an image in the HTML tutorial.

Using images as links

You can use images as hyperlinks in place of or in conjunction with text links. All you have to do is use the basic IMG tag as part of your link. 
&ltA HREF="About.HTML">&ltIMG SRC="Button.GIF"></A>

Above is a simple link attached to an image alone. Clicking on the link will take you to the HTML document "About.HTML". 

 &ltA HREF="About.HTML">&ltIMG SRC="Button.GIF"> Squash out Bugs</A>
Squash out Bugs

This shows the image and the text "Squash out Bugs" used together as a link. Clicking on either will follow the link.

To make your pages load as quickly as possible you may want to use a smaller thumbnail of your image as a link to your full image. This allows the viewer to get some idea of whether or not they would like to take the time to load the larger image. 

&ltA HREF="Beakman.GIF">&ltIMG SRC="BeakmanThumb.GIF"></A>
Professor Beakman

This shows a small thumbnail image of Professor Beakman, BeakmanThumb.GIF, as a link that when clicked on will take you to the larger image, Beakman.GIF.

Using images as backgrounds for your pages

A nice way to add some color to your pages is to use a picture as a background beneath the layout of your page. 
&ltBODY Background="Stellar.JPG">
All pages have a &ltBODY> tag near the beginning of the document. By adding the Background specification we have told the browser to use the image Stellar.JPG as the background for this page.
Background Example
Subtle images whose edges blend together well make the best backgrounds. You may also need to change the color of the text, as we did in our example, to make it show up better against your background. This is accomplished by including a Text=#RRGGBB specification in the Body tag too. 
&ltBODY Background="Stellar.JPG" Text=#EFEFEF>
Since colors are made up of a hexadecimal number of its' Red, Green, and Blue values the easiest way to figure out the values is to use a utility such as HexColor for the Macintosh. This utility allows you to select the color from a color wheel you can adjust and gives you the hexadecimal number for that color ready to be copied and pasted into your HTML document.

Just to give you some idea of what not to do, we have an example of bad choices when using backgrounds. Since you won't be able to read much remember to use the Back Arrow button in your browser to return to the tutorial.

The image doesn't tile well as a background, some of it is cut off on one side giving it a lopsided look. Everything is too dark and the normal black text is nearly impossible to read over the image.

Make wise choices when choosing backgrounds and text colors and try them out before you use them. You may even want to ask some other people to look things over because a combination that looks great to you may be impossible for others to read.

If you don't have any images of your own to work with you can browse the sites on the RIT Library -- Images for Web page. If you need a reminder on how to acquire images from these sites you may want to review the section on getting an image in the HTML tutorial.

Additional Image topics

Transparent Images

By using a program such as Transparency on the Macintosh you can set one color of the image as transparent. When a browser shows this image the background color or image will show through these transparent areas. Not all browsers have this ability however so take that into account when formatting your pages.
Normal Image.  Transparent Image.

In this example yellow has been made transparent in the image.

Transparent images are more desirable then trying to match the grey background color in your image. The background color can be defined by the user of the browser so the background might not necessarily be grey for everyone. Transparency gives your images a clean and consistent look.

Interlaced Images

Interlaced Images will display with a special "venetian blind" or mosaic effect when they are loaded by some browsers. To see this effect watch the two images after clicking on the Reload button at the top of the screen.
 
Instead of loading the image top to bottom the browser displays the full image with increasing detail as it loads. The practical use of this interesting effect is to allow people using slow connections to judge if an image is something the want to wait for.

You can save a GIF in this format using a program such as GraphicConverter on the Macintosh. In this program click the Option button in the Save dialog box when you are saving the image as a GIF file to get the Interlace option.

GraphicConverter Save Dialog

Centering Images on the page

HTML doesn't offer many options for positioning your text beyond Centering images horizontally on the page. The following commands will do just that. 

&ltP Align=Center>

&ltIMG SRC="Logo.GIF" ALT="Logo">

</P>
Logo
Anything, images or text, placed between the &ltP ALign=Center> and </P> tags will be centered on the page. Remember, if you want the image alone on a line followed by text on separate line you need to use the &ltBR> tag for a break.

This concludes our tutorial on using images in your HTML documents. If you have any questions or comments please feel free to let us know!