Remember that the filenames and filetypes are case sensitive. If you don't type them in exactly, viewers cannot see the image.[ FILETYPES | FTP'S | TAGS | WITHIN TEXT | THUMBNAILS ]
When constructing a website with graphics, you must consider the types of images all browsers are able to view. It's useless to put them all over your site when a large portion of the viewers are unable to load them. The most common image filetypes used on websites are GIF's and JPG's ( or JPEG's. ) Most all browsers can read both of these.
GIFs ( pronounced as jiff or as giff ) can be read by all graphical browsers. GIF's look the best with animated graphics.
JPG's, aka JPEG's ( called j-pegs, ) are the best filetypes to use for photographs. They usually do not take up as much memory as GIF's, but not all browsers can read them ( the vast majority can. )
To display images on the web, the files must be stored on the server with your site. This will take a little more skill than simply publishing your HTML documents. You'll need an FTP program, or file-transfer protocol. This is a fairly small program which uploads files to the selected server. ( Still with me ? ) If you use Netscape, then there will usually be an FTP within the webhost. If you're using something else, then you'll need your own FTP prog, which is faster and has a log to keep track of which files you've u/led. The most widely used and easiest FTP for Windows is WS-FTP. If you have a Mac ( Heaven forbid, ) consider the Fetch program. To get one of the progs, do a software search if you're on AOL, or do a websearch on FTPs. You'll probably find one to d/l without having to go out and buy one.
Placing a basic image on your page is the easy part. After ftping, use the image tag [IMG]. Then, specify the image to be used by using the souce attribute:
[IMG SRC="filename.filetype"]For example, i shall use an image called 3eb.gif. The tag will appear as such:
[IMG SRC="3eb.gif"]and the image will appear like this:
Remember that the filenames and filetypes are case sensitive. If you don't type them in exactly, viewers cannot see the image.
There are several attributes which can be used with the image tag. The alternate, or ALT, attribute is used to supply a section of text which shows up if the image doesn't load, and on the cursor's tooltip. Place it within the image tag, as such:
[IMG SRC="3eb.gif" ALT="3eb logo"]Although alternates are not required, it is a good idea to put them in anyway. Those who cannot or do not wish to load the images will know what they are missing and whether or not it is important.
If the ALIGN attribute within the image tag doesn't end up looking as you wanted, try placing the image within its own paragraph. Align the paragraph as center, instead:
[P ALIGN="center"][IMG SRC="3eb.gif" ALT="3eb logo"][/P]
You can put a border around an image. With the border attribute [BORDER=x], you can change the size of a border which fits the image.
[IMG SRC="3eb.gif" ALT="3eb logo" BORDER=5]
Images may also be inserted in text, such as in a newspaper or magazine. The text wraps around, depending on the alignment of the image. Let's start out with adding the image into a basic paragraph ( in bold ). The IMG tag was added directly after the paragraph [P] tag:
Basic paragraph about how Third Eye Blind is one of the best bands to debut in 1997.
The alignment attribute positions the image within the text. Place the ALIGN="bottom/top/left/right/middle" within the image tag.
[IMG SRC="3eb.gif" ALT="3eb logo" ALIGN="middle"]Using the same paragraph as above, the image is aligned in the "middle."
Basic paragraph about how Third Eye Blind is one of the best bands to debut in 1997.
Try different setups with the alignment attribute to find the design which bets suits your paragraph.
Similar to the border attribute, the space attributes create a space between the image and the text. You can control the spaces from the horizontal or vertical sides of the image. Add [HSPACE=n] for horizontal space and [VSPACE=n] for vertical. The variable n stands for the space size in pixels. Here is the same paragraph with the attributes:
[IMG SRC="3eb.gif" ALT="3eb logo" ALIGN="middle" HSPACE=10 VSPACE=40]
Basic paragraph about how Third Eye Blind is one of the best bands to debut in 1997.
Notice the gaps between the image and the text. Remember that the space attributes affect everything around the image, not just the text within that paragraph. This is another feature that requires experimentation.
Thumbnails are small copies of large images. They link to the larger images on a separate page. Thumbnails are useful because if you're displaying a large amount of images in a photo album or gallery, it will take the viewers much less time to load the page. You should make a thumbnail for each of the images in a gallery, usually sizing around 100x100 pixels or less. Use most any graphics program to resize the image, keeping the same proportions for accuracy. Displayed below is a thumbnail of an image called "james.JPG." The thumbnail should be named similar to the image, in this case, "jamesth.JPG." Remember that the thumbnail is a link, connecting to the actual image within your directory.
[P]James Hetfield [A HREF="james.JPG"][IMG SRC="jamesth.JPG" ALT=" MetallicA "][/A][/P]
James Hetfield 
[ FILETYPES | FTP'S | TAGS | WITHIN TEXT | THUMBNAILS ]
![[ HOME ]](hhome.gif)