Basic HTML Coding

Image Tags -- These are the tags that cause an image to appear in your document.
Basic code:
<img src="image.gif">
Note that you can use the same addressing formats that you can use in hyperlinks -- eg. full addressing: http://www.arts.ilstu.edu/~guither/webtricks/image.gif or relative addressing, etc.
Here is the image. Just a small nothing for demo purposes.



Specifying width and height in the image tag:

It is very useful to specify the actual width and height of the image (in pixels) in your tag. If you don't, the browser has to actually load the image before showing anything else below it on the page (in order to know how much room to leave). When you specify the size, the browser leaves the space for it and continues to show text, etc. while loading the image, giving your viewer more to look at while waiting.

There are a number of programs which will show you the size of your image.

The code format for image.gif with size info is:<img src="image.gif" width="54" height="36">

You can also use size to force an image into a different shape or size (with some distortion, of course). For example, here is the same image with a width of 94 instead of 54 specified in the tag.




Using "border" in the image tag.
<img src="image.gif" width="54" height="36" border="2">
Note: Specify border="0" for an image that is a link, to avoid the link color automatically added as a border.



Image spacing
You can make images line up right next to each other by eliminating spaces between code elements. This is great for creating buttons that form a grid.

1. Note extra space
<img src="image.gif" width="54" height="36"> <img src="image.gif" width="54" height="36">


2. Without extra space:
<img src="image.gif" width="54" height="36"><img src="image.gif" width="54" height="36"><br><img src="image.gif" width="54" height="36"><img src="image.gif" width="54" height="36">





Image alignment
Image alignment refers to how the image is aligned with respect to text or other elements following it. This can be very useful in your page layout. Note that you can include images right within your text (in fact, to separate them out, you need to include line breaks, etc.)
<img src="image.gif" align=top> This text is written immediately before the image tag. This text is after. This is a demonstration of how text interacts with various photo alignments as it wraps in different ways.
<img src="image.gif" align=middle> This text is written immediately before the image tag. This text is after. This is a demonstration of how text interacts with various photo alignments as it wraps in different ways.
<img src="image.gif" align=bottom> This text is written immediately before the image tag. This text is after. This is a demonstration of how text interacts with various photo alignments as it wraps in different ways.
<img src="image.gif" align=left> This text is written immediately before the image tag. This text is after. This is a demonstration of how text interacts with various photo alignments as it wraps in different ways.
<img src="image.gif" align=right> This text is written immediately before the image tag. This text is after. This is a demonstration of how text interacts with various photo alignments as it wraps in different ways.
<img src="image.gif" align=absmiddle> This text is written immediately before the image tag. This text is after. This is a demonstration of how text interacts with various photo alignments as it wraps in different ways.
<img src="image.gif" align=texttop> This text is written immediately before the image tag. This text is after. This is a demonstration of how text interacts with various photo alignments as it wraps in different ways.
<img src="image.gif" align=baseline> This text is written immediately before the image tag. This text is after. This is a demonstration of how text interacts with various photo alignments as it wraps in different ways.
<img src="image.gif" align=absbottom> This text is written immediately before the image tag. This text is after. This is a demonstration of how text interacts with various photo alignments as it wraps in different ways.
In order to clear text from continuing to wrap by a picture, use <br clear=left> (or whatever alignment was set)
<img src="image.gif" align=left> Image text with a standard line break<br>Next line of text. Image text with a standard line break
Next line of text.
<img src="image.gif" align=left> Image text with a "clear" line break<br clear=left>Next line of text. Image text with a "clear" line break
Next line of text.


WebTricks Main Page


You can reach Pete at:
pete@thelivingcanvas.com