Step 12 – Images

To my index.html document I’d like to add a graphic. Graphics and photos are being applied the exact same way. The only difference is the image itself. When it’s an animated or computer made image, than we call it a graphic. If it’s an image of a real flower or a person, that’s when you call it a photo or image. HTML recognises both as image.

Adding photos and graphics to an HTML document:

<HTML>
<HEAD>
<TITLE>my own homepage</TITLE>
</HEAD>

<BODY BACKGROUND=”images/background.gif” BGCOLOR=”#FFFFE1″ TEXT=”#808080″ LINK=”#FF9B6A” ALINK=”#FF9B6A” VLINK=”#FF0000″>

<FONT FACE=”Verdana” SIZE=2>

<CENTER>
<IMG SRC=”images/logo.gif” WIDTH=400 HEIGHT=161 ALT=”logo”>
<H2>A short introduction</H2>
</CENTER>

<FONT COLOR=”#FF9B6A”><B>Nora Tol Virtual Publishing</B></FONT> was founded about 12 years ago when owner <FONT COLOR=”#FF9B6A”>Nora Tol</FONT> started offering her web design services.
<P>
By demand she quickly expanded her services with <U>designing logos and artwork (DTP)</U> and even started various <U>Internet- and marketing services</U>.
<P>
This is a short list of the services Nora Tol Virtual Publishing offers:
<OL>
<LI> Web design
<LI> DTP
<LI> Web hosting
<LI> Domain registration
<LI> (press)mailings for artists
</OL>

<CENTER>
<FONT SIZE=4>Take a look at her homepage for more information
<BR>
Or send her an E-mail!</FONT>

<HR WIDTH=50% COLOR=#000000 NOSHADE SIZE=2>
</CENTER>

</FONT>
</BODY>
</HTML>

With the line <IMG SRC=”images/logo.gif” WIDTH=400 HEIGHT=161 ALT=”logo”> I’ve refered to my company logo, which makes it visible in the browser.

IMG is short for “image”.
SRC is short for “source”. With SRC you make the referer to the image you want to have in your document. In this case, that’s the image “logo.gif”, which can de found in the directory “images”. (Read for details Step 12e)
Adding the WIDTH and HEIGHT of a graphic in its’ HTML code is not required, but helps to download the image faster. By already telling the browser how big the image is, there’s no need for it to calculate that while downloading. The values with WIDTH and HEIGHT are pixels.
ALT stands for “alternative” and is not required either. When a graphic doesn’t work the text placed here between the quotes is showed. You can also see this text when you place your mouse on an image and hold it for a while.

Step 12b – image alignment:
The IMG-tag offers you more possibilities. You can determine the alignment of the image. You can choose from left, right, top, middle and bottom:

<IMG SRC=”images/logo.gif” ALIGN=LEFT>
<IMG SRC=”images/logo.gif” ALIGN=RIGHT>
<IMG SRC=”images/logo.gif” ALIGN=MIDDLE>
<IMG SRC=”images/logo.gif” ALIGN=TOP>
<IMG SRC=”images/logo.gif” ALIGN=BOTTOM>

Step 12c – spacing around the images:
When you choose LEFT or RIGHT, you’ll notice that the text will wrap itself around the image. Especially with the LEFT alignment it will look like the text is stuck to the image. Often not a pretty sight, so you’d want to add some spacing to image:

<IMG SRC=”images/logo.gif” ALIGN=LEFT HSPACE=2 VSPACE=2>

The value (in pixels) after HSPACE determines the width of the horizontal spacing and the value with VSPACE determines the width of the vertical spacing. Basically you’re creating an invisible border around your image.

Step 12d – image border:
To surround the image with a border (usually shows automatically when using graphics as links) you use the following code:

<IMG SRC=”images/logo.gif” BORDER=0>
The values given are pixels. When you set to the border to 2 a border of 2 pixels will become visible:

<IMG SRC=”images/logo.gif” BORDER=2>

When using pictures for links please note that the colour of the border is defined by the LINK, ALINK or VLINK values in the BODY-tag (see Step 3b).

Step 12e – refering to images:
To make it easy on me I have assumed you’ve placed the images in de subdirectory “images”. But suppose you didn’t and you’ve placed the graphic with the rest of your HTML files. Then the code for the image will be:

<IMG SRC=”logo.gif”>

or

<IMG SRC=”./logo.gif”>

The code “./” means that the graphic can be found in the current directory, in which the HTML can also be found.

If you’ve placed the graphic a directory back, then the HTML code would be:

<IMG SRC=”../logo.gif”>

The code “../” tells the browser that the picture can be found one directory back. If you want to go further back you, say two directories, the code will be “../../” and so on.
To know this, makes it easier to jump back and forth between directories and to limit the amount of diskspace you use on the webserver.
These codes also apply to refer to other files, such as other HTML files.

Step 12f – jpg and gif:
When you’ve surfed the Internet for a while you may have noticed that most images are .jpg or .jpeg or .gif. This is because all browsertypes read them, they are the smallest in bytesize and contain the most screen quality. Other formats can cause problems.

The difference between .jpg and .gif is huge. .gif images use a limited amount of colours, they can create animations and image backgrounds can be made transparant. The standard .gif image uses 256 colours, but you can adapt this to use less colours and decrease the image bytesize. And a smaller bytesize will make it faster to download.

.jpg can use up to millions of colours but still is small in bytesize. Therefore it can be used best for real photos (people, animals, products).

It’s hard to say when you should use which format. Often it’s best to try both and see what the difference is. Then go with the one you like the best.

Step 12g – image troubleshooting:
Pay close attention naming the image! Some images may not work when the images and the HTML file are online.
Are you sure the images are on the server? Then it could be that a refence within the HTML coding is incorrect. The most frequent problem that causes images not to show is the use of capitols, for example: image.GIF. The HTML code has to be <IMG SRC=”image.GIF”> instead of <IMG SRC=”image.gif”>.
This often does not show while working offline.
Another can be caused by using spaces in filenames.

Go to Step 13

Bookmark the permalink.

Comments are closed