I have a directory or folder set aside for images that I download from the net and because there are so many images out there, I have sub-directories to categorize them. Some of my categories are: backgrounds, buttons, religious, animated images, lines, etc. If I need an image for a web page, I just copy it to the directory I need it in.
While images can really add to a web page, be careful that you do
not overuse them. It takes time for a browser to display an image
and so a lot of images can take a lot of time. Also, the bigger
the image, the longer it will take to display. Many viewers, especially those
with dial-up connections or with slower high speed connections, do not want
to wait a long time for a web page to display. What often happens then, is that viewers will
leave your site before having really seen it. Now it is possible to do certain things to speed up the displaying
of text and images and we will get to that later in this lesson.
<IMG SRC="image.gif">where "image.gif" represents the name of the image.
The chain at the top of this lesson:
was put there with this command:
A discussion on this image command.
To quickly save an image (this should work on most browsers), just place the mouse pointer anywhere on the image, and click once with the RIGHT mouse button (that is, the opposite button that you would normally use when clicking with your mouse). If this doesn't work, then click and hold the mouse button down. A menu will pop up beside the image with a number of choices. One of these choices is Save Image As ... or Save Picture As ... or Save Link As .... Choose the option that applies to your browser and the usual dialog window will open up asking you where on your hard drive you want the file (that is, the image) saved. For example, to practice saving an image, go back to the chain image at the beginning of this lesson and save it (it is free to take).
This same method for saving an image can also be used to save a background image. If you see a background (wallpaper) you like and are allowed to save it, just click anywhere on the wallpaper with the right mouse button and follow the same procedure as described above for saving an image.
Finally, if you want to try my examples with images, you will need to save the
images in my examples into the same folder that you
are saving my web page examples in (using the above method to save images).
If you do not save the images to your working folder, the images will
not appear on your web pages.
With images in this format, you are limited to a maximum of 256 colors for any image. If you were to examine an image in a paint program such as Paint Shop Pro, it will take the raw image data and determine the 256 (or fewer) colors that best describe the color content of the image and creates a color table changing these colors into integers (or decimal numbers as they are called) ranging from 0 to 255 (= 256 numbers). Thus a picture of a blue sky will have mostly blues in the color table while a picture of trees will have a lot of browns and greens in the table. Each actual pixel in the original image is then examined for its true color and matched to the closest color in the color table. The pixel is then assigned the corresponding decimal number which is called the "color index value". The result of all this a table of color indexes along with a color map table that maps each of these indexes into the chosen colors.
Color maps are known by a variety of names such as Color Table, Indexed Color, Palette, and Color LookUp Table. Thus the GIF format stores its colors in a 256 color indexed color map. This technique can do a very good job in creating images that are near identical to the original image. The GIF format is ideal for images that contain larger single-colored regions (no more than 256 colors) such as buttons, logos, icons, lines and clip art. If the image has more than 256 colors, you will have to reduce the number of colors in the image to 256 (by dithering for example). Also, remember that the fewer colors you use, the smaller the file.
Color photographs, on the other hand, often contain more than 256 colors and with no large single-colored regions. GIF images use a form of "lossless" compression called LZW named after its creators. LZW compression works by finding repeated patterns within the image. The more repeated patterns, the better the compression. Thus images with large blocks of color work great as GIF files because they can be compressed so well. Scanned images such as photographs have fewer large blocks of color and therefore do not compress as well. Thus photographs in GIF format tend to look grainy and blotchy. There are two versions of the GIF format - GIF87 and GIF89. The GIF89 format allows you to also make one of the colors of the image transparent (such as the background color).
So if you are dealing with photographic images, JPEG format is recommended because of image quality and image file size. JPEG file sizes are not determined by the number of colors, but by the amount of compression. When you save an image in JPEG format, you choose how "lossy" you want the compression to be - from lossless to extremely lossy. The more lossy the compression, the smaller will be the resulting file size but also the less clear the detail. Extremely compressed JPEG images can also look very grainy or blotchy. Therefore, if you are using JPEG format, try different levels of compression to see what gives optimum quality.
A compressed file must be decompressed to be displayed and JPEG images can take significantly longer than GIF images to decompress and display. This is because JPEG is a more complicated form of compression. You might save file space on the Hard Drive with a JPEG image and so save time loading the file, but decompressing and displaying the image can negate the time savings.
There are a number of attributes that go with the IMG command (SRC is
only one of them) and we
will begin our study of them with the BORDER and ALIGN attributes.
Recall that an attribute supports or modifies a command.
The BORDER attribute is used to place (or eliminate) a border around
the image. The BORDER attribute commands the browser to draw a
border of an indicated size around the image. A border is often used when
the image is a link to show clearly that the entire area bounded by the
border is a hyperlink. Otherwise,
it is often used as BORDER="0" (quotes are optional) to turn it
off - that is, no border.
The ALIGN attribute is used in conjunction with placing text around the
image. That is, ALIGN controls the alignment of the image with respect to text.
To see these attributes in action, please SWITCH to NOTEPAD or to a similar text
editor, and type in the following HTML document. I want you do some experimenting with it.
Now save this web page. If you have not saved the wheelchair image (whechair.gif) then you need to save it too. Remember that both the image and web page must be in the same folder. Once you have saved the web page and image, then SWITCH back to your browser and load the document to see it in action. This is what you should see:
Now for a discussion on the above HTML document.
Problem 1: SWITCH to your text editor and change the ALIGN="LEFT" to ALIGN="CENTER". Save the change, SWITCH back to your browser, and load the document. What change do you see?
Problem 2: Now repeat this process and change to ALIGN="RIGHT". What happened this time?
Using a value of LEFT or RIGHT will make the image and text line up against the left or right margin of the browser screen.
Also, only one line of text is allowed with this ALIGN command. If the line is too long or you have more than one line, the rest will be placed below the image. Try adding some words or another line to the words "We are wheelchair accessible" to see this happen.
Problem 3: Change the ALIGN="MIDDLE" to ALIGN="TOP". What happened?
Problem 4: Change to ALIGN="BOTTOM". What happened this time?
The values TOP, MIDDLE and BOTTOM specify where any text following the
image should be placed. Remember that if more than one line follows
after the image, the additional lines will be placed below the image.
You can also force text below such an aligned image by using the BR
tag with the CLEAR attribute as in <BR CLEAR>. You may want to
experiment with this attribute.
WIDTH, HEIGHT and HSPACE attributes
To understand the WIDTH, HEIGHT and HSPACE attributes, SWITCH to your text editor and make changes to our wheelchair accessibility example so that it now looks like:
Now save the document, SWITCH back to your browser, load the document and this is what you should see:
The WIDTH and HEIGHT attributes involve the size of the image. This size is measured in pixels. Thus our size has a width of 96 pixels and a height of 90 pixels. In pixels, the difference between 96 and 90 is very small and may not even be noticeable. It is important for you to include the size of your image. When you include the size of the image, the browser can then immediately set aside the required space for your image and begin loading and displaying your text while the image is still being loaded. This is important since most often images take longer to load than text. Remember also that the bigger the image, the longer it will take the browser to load and display it. That is why you often see text being displayed before images are completely displayed. If the browser does not know how much space to set aside for your image, it will not know where to place the text. The browser then has to work on displaying the image before the text. In other words, use the WIDTH and HEIGHT attributes as this allows a browser to lay out a page in advance, as it then knows where the text around the image should be placed.
Leaving out the WIDTH and HEIGHT attributes is also not considered good HTML coding practice. In other words, if you want to follow good coding practices, the WIDTH and HEIGHT attributes must be included with the IMG tag.
So you are strongly encouraged to include the WIDTH and HEIGHT attributes with your IMG tag. The ideal situation is to have the WIDTH and HEIGHT sizes the same as the original image. That is, the WIDTH and HEIGHT attributes should contain the actual image's dimensions. Using WIDTH and HEIGHT with incorrect values, or with percentage values is not recommended. Most browsers will resize the image to the indicated size, but this often gives poor results.
There are programs on the web that can be downloaded that create, change, modify and work with images. These programs (for example, Paint Shop Pro) will tell you the size of your image and allow you to change its size to suit your needs (that is, you can resize the image).
If you see an image's size in a paint program or elsewhere written as 120 x 80, it means that the WIDTH is 120 pixels and the HEIGHT is 80 pixels. The first number is always the width and the second number is always the height. If there are three numbers as in 120 x 80 x 16, then the third number is the number of colors associated with the image.
Problem 5: What do you think is the effect of the HSPACE attribute?
The ALT attribute
To see the effect of the ALT attribute, SWITCH to your text editor and make changes to the last program so that it now looks like:
Now save the document, SWITCH back to your browser, load the document and note carefully what is printed in the space reserved for the image before it is displayed. Hopefully you will notice what was printed - if not, try again.
Before an image is displayed, you often see a box or frame placed first and then the image is placed in the box or frame. The "ALT" attribute allows you to write something in the frame before the image is placed there.
Although the ALT attribute is not required for the image to be displayed, you should include it to follow good coding practices. It should be used to replace the image's meaning, and not just to provide a description of the image. In general, ALT text may not contain markup tags.
Why would we want to write something in the image box?
The ALT attribute simply gives the user information about the image. If you do not want to have anything printed in the frame, then use the command:
One example where you may not want something printed is in decorative images to prevent something from being written in text only browsers. So if the image is purely decorational, use ALT="" or you could use a decorative ALT text like "*".
Here is a summary of all the above attributes associated with the IMG tag. You can use them in any order.
ALIGN can be "TOP"
"MIDDLE", or "BOTTOM". Used for aligning one line of text beside the
BORDER used to place a border or to specify no border around the image
WIDTH used to state the width of the image that is to appear
HEIGHT used to state the height of the image that is to appear
ALT used to place text in the space where an image is located
HSPACE used to create horizontal space around the image
VSPACE used to create vertical space around the image
Of all these attributes, only the WIDTH, HEIGHT and ALT attributes are to be included for good coding practices. The rest of the attributes are purely optional and you use them based on your presentation needs.
Also, as you might have expected, the IMG attributes and values are
not case sensitive. Thus, for example, ALIGN="MIDDLE"
is the same as ALIGN="middle" which is the same as align="middle".
We know that the ALIGN="MIDDLE" command places one line of text with the middle of the image. Similarly ALIGN="TOP" will align one line of text with the top of the image and ALIGN="BOTTOM" will align one line of text with the bottom of the image. Suppose you want more than one line of text to be displayed beside the image. For example, the following has four statements beside the image:
Problem 6: Now write the HTML document that gives the above "Buchanan Village" example, keeping the following points in mind:
Our first example about the wheelchair accessibility in our hall, had the words "We are wheelchair accessible" written beside the middle of the wheelchair image and to the right of the image. These were the lines that gave us this result:
Problem 7: Change whatever is necessary so that the words are written on the left side of the image and everything is aligned to the right side of the browser screen as in the following (in some low level browsers, the ALIGN="RIGHT" does not work and so everything will still be aligned to the left side of the screen):
If you accidentally write:
<IMG SRC="garden.jpeg"> (name does not match)
<IMG SRC="gardens.jpg"> (extension does not match)
then the browser cannot display the image because there is not an exact match.
as no path to the image needs to be specified.
<H1 ALIGN="CENTER">BUCHANAN VILLAGE</H1><HR>
<H2 ALIGN="CENTER">An Adult Lifestyle Community for Seniors</H2>
<H3 ALIGN="CENTER">Operated by the Retirement Home Association</H3>
<IMG SRC="cross1.gif" ALIGN="LEFT" WIDTH="60" HEIGHT="85" BORDER="0" HSPACE="20" ALT="Cross">
<UL><LI><A HREF="About.htm">What is <EM>Buchanan Village</EM> all about?</A>
<LI><A HREF="Lifeleas.htm">What is a "Life Lease" Retirement Community?</A>
<LI><A HREF="Benefits.htm">The benefits of a Life Lease</A>
<LI><A HREF="Moreinfo.htm">Who to contact for more information</A><BR><BR>
This problem is a little unfair as it involves something we have not discussed yet (using ALIGN="LEFT" in the IMG tag). Note that the ALIGN="MIDDLE" was not used as this would only have allowed us to write one line of text beside the image. Instead we use ALIGN="LEFT" which in effect places the image to the left side of the browser screen thus allowing several lines of text on the right side of the image. Note that to make this work, the ALIGN attribute must be part of the IMG tag.
If the HSPACE attribute is not used in the above IMG tag, the bullets will be hidden behind the image in some Explorer browsers.
Also, I have inserted two <BR> tags at the end of "Who to contact for more information". I needed these tags to make sure the Horizontal Rule was placed below the image and not beside the image. However, adding two <BR> tags will not guarantee that the Horizontal Rule will be placed below the image. Whether the Horizontal Rule appears in your browser beside the image or below the image is dependent on text size and on the width of the monitor screen. For example, if the text size setting in a visitor's browser is a little smaller than normal, your browser will be able to place more text beside the image and so there may be room for the browser to also place the Horizontal Rule beside the image. If the text setting is a little bigger than normal, you will get fewer words beside the image and so the Horizontal Rule will end up below the image. Also, if the monitor is a wide screen monitor, a lot more text can be placed beside an image than in a smaller width monitor. Thus with a wide screen monitor the Horizontal Rule can end up beside the image while in the narrower width monitor it can end up below the image. In Explorer, Firefox and Netscape, if you go to the "View" menu, choose "Text Size" and then change the size of the text to see the effect on the positioning of the Horizontal Rule. This problem is solved when we study tables in Lesson 11 and 12. With tables, you can place the image and text in a borderless table and then place the Horizontal Rule below the table.
<H4 ALIGN="RIGHT">We are wheelchair accessible.<IMG SRC="whechair.gif" BORDER="0" ALIGN="MIDDLE"></H4>