How to create Web sites easily

The most complete guide for the Web page builder
All you'll
ever need to know about homepages and HTML

Images

Click here to return to the index

Images and graphics on your text

This is the code for putting a graphic:

<IMG SRC="clickme.gif">
The <IMG SRC> tag loads a graphic in its place, referenced by the SRC= parameter, in this case would be "clickme.gif". No ending tag, folks! As there are people with text browsers or people who disable graphic loading, and a graphic can contain meaningful sentences, you can put an ALT="xxx" parameter in the <IMG> tag, so that these browsers display the text enclosed in the quotes instead.

The following tip asked by Brian Tallon. Give him a visit by clicking on his name.

Sometimes your page won't be properly displayed if your graphics aren't loaded. That's why the browser determines the size of the placeholder for the graphic while it's loading. To keep other people's browser from disarranging your page if they have Auto Load graphics turned off, put WIDTH=xxx and HEIGHT=yyy on the <IMG> tag, where xxx and yyy are the width and the height, respectively, of the graphic, expressed in pixels. Here´s an example:

<IMG SRC="image.gif" height=50 width=25>
would display a placeholder of height 50 pixels and width 25 pixels, while the image is loading, or if the Auto Load Images characteristic is off.

The following tip asked by Neil, who hasn't given me his URL yet. He helps this page develop!

If you want the graphic to get aligned at the left or right, and the text surrounding it should flow around it, put an ALIGN="LEFT" or ALIGN="RIGHT" parameter. For example, to set the alignment of the graphic "ie_animated.gif" to the left and let the text flow around it, the tag should read:

<IMG SRC="ie_animated.gif" ALIGN="LEFT">
If you get hard to understand how to include a file that's on other server, read this!.

How to make an image clickable

Ah, one more thing about the <IMG SRC> and <A HREF> tags: you can nest them. Example:

<A HREF="ie30.html"><IMG SRC="ie.gif"></a>

This would make the "ie.gif" graphic clickable and link it to the page "ie30.html". Very useful. See the graphics in the main navigation bar? Well, well, these are examples of this method.

There is one more thing: BORDER=0 inside the IMG SRC tag prevents the browser to display a border of the color of your hyperlinks around the image. That border is supposed to help people determine if a graphic is a hyperlink to another place, but I think it looks awful. Try to imagine the buttons at your left in the navigation bar, with a nasty blue border around them!

If what you want is one of these image menus instead, click here.

Internet Link Exchange
Member of the ILE Free Home Pages at GeoCities


[Main page] [HTML help] [MIDI page] [Murphy's Laws] [More information]
[Feedback form to email me] [Sign guestbook] [Mail me!]