Types] [ Getting/Saving
[ The <img> (Image)
[ Good (tasteful) Image Use] [ Aligning Text & Images][ Section Summary]
The images you view on your browser are not an actual part of your HTML document -- you must save your images with their own file names and extensions. You will be using the <IMG> tag to insert images into your Web pages. In effect, these tags say "HEY YOU insert the image here." The tag will specify the name of the graphic file so the browser can open the file and display the image. There are, like HYPERTEXT LINKS, two basic types of images in HTML -- in-line images and external images.
IN-LINE IMAGE: An image that is called up and viewed within the confines of your Web browser.
EXTERNAL IMAGE : An image that you must set up some type of separate graphics program to view (a separate window).
There are many types of images and it seems that every geek who ever viewed one has invented their own way of storing them. Some of the most common formats are GIF -- JPEG -- BMP -- PCX -- TIFF -- DIB -- EPS -- and TGA -- And these are only a few. Fortunately, the Web has standardized on two basic formats, GIFs and JPEGs,
The GIF (GRAPHICS INTERCHANGE FORMAT) is used in most HTML documents and all graphical browsers are GIF friendly. This means you can use GIF images in all of your HTML documents and feel safe that most of your readers will view your images as you intended.
The other format that is becoming increasingly popular is the JPEG (JOINT PHOTOGRAPHIC EXPERTS GROUP). The main advantage of JPEG files is that they are smaller than GIFs; therefore, they take less time to download. JPEGs also display digitized photographs and other higher quality images better than GIFs do.
WHERE TO GET GRAPHICS
If you have any artistic talent at all, you can make your own graphic images in your favorite paint program and save them as a Gif or JPEG (IF THE PROGRAM ALLOWS THIS) format. However, for the less graphically gifted among us, there are many graphic goodies available. Here are a few ideas:
Right click the graphic and chose "save this image as" from the menu.
Right click the graphic and select "save picture as" from the shortcut menu.
OK, NOW DOWN TO BUSINESS:
As mentioned earlier, the <IMG> (image) tag is what we use to bring up graphics in a Web page. It looks like this:
The SRC is short for source and the file name is the name of the graphics file that you want to use. For example: if you developed a logo for your home page, and saved it as logo.gif, you would insert it into your Web page as follows: <IMG SRC="logo.gif">.
IMPORTANT NOTE: Keep in mind that for this to work your graphic must be stored in the same file as your HTML document. If you decide to store all of your graphics in one specific directory (which is not a bad idea if you have a lot of graphics) then you will have to indicate this in your <IMG> tag. For example: If you store your images in a file called graphics, then your <IMG> tag would look like this:
Ok, let's try a few graphic files of our own (Click Here To Get The Images You Need For This Activity ).
I could give you a down load, but I think I will be mean and make you practice saving them by right clicking your mouse. (DONT FORGET TO SAVE THEM ALL IN ONE FOLDER)
First you need to build that old standby -- your BARE BONES HTML file. Lets give it a title of IMAGES and save it as an image1.htm file. Now, just follow the next few simple steps.
1) Call your document IMAGES and center it with a H1 heading.
2) Put in a blank line (<p>)and a horizontal line <hr>.
3) Add one more blank line to your document.
4) Center the following image: <img src="atwork2.gif">
5) Add a blank line below it <p>.
6) Use the <dd> tag to indent the next line: "We can center a line of text between two images." Add a blank line <p>.
7) Type the following in your file: <h2><center><img src="!.gif"> IMAGES AND LISTS <img src="!.gif"> </center></h2> This will give you a line of text between two images. NOTE: It is important when using headings to place your images inside the headings -- don't forget, your heading tags force new lines.
8) Ok. Now put another blank line in. This time, instead of using the <HR> tag we will add an image break or bar.
9) Using the image tag, center the image multibar.gif and insert a blank line after it.
10) Now add the text "Test List" with a H1 heading.
11) Now we will make a definition list with graphics (NOTE: What we get in the browser is a bulleted list with graphic images instead of the plain bullets. Begin a definition list (<DL>) and add the following graphics after each <DD> (Note -- we don't use the <DT> tag here). EXAMPLE:
<DD><IMG SRC="balblu.gif">Number one
<DD><IMG SRC="balgrn.gif">Number two
NOW YOU DO THE FOLLOWING:
Number three ball_red.gif
Number four ball_whi.gif
Number five balorng.gif
Number six balpurp.gif
Number seven balyllw.gif
12. Ok. One more Bar for looks. Center the following graphic and insert a blank line after it. (MULTILIN.GIF)
13. And this is the last. Placing images in a line of text. Enter the following BOLD TEXT into your HTML document.
Indent your line. Use a H2 heading Your (place portng.gif image here) is due soon. End your heading. Indent your line. Use a h2 heading.
If is not complete, then (place the p.gif image here) right in the kisser (place the !.gif here) and end your document.
Now that you know how to implant images. Lets have a gander at what they are good for.
GOOD (tasteful) USES FOR WEB IMAGES
Images are useful and they are an easy way to add a professional look to your page. However, overuse can lead to a tacky looking Web page that is slow to load. Here are some suggested uses for images (you can probably think up some more on your own):
Don't forget -- IF YOU HAVE TOO MANY GRAPHICS, MOST FOLKS WILL GIVE UP WAITING FOR THEM TO LOAD AND GO SOMEWHERE ELSE.
Aligning text and images
If you insert an image in a Web page the browser will display them on the same line (hence the term in line image). This could cause problems with tall images. As you will have noticed in our last example, the browser aligns your text with the bottom of the image. If you would prefer your text to be in the middle, top, or wrap around the image, there is a special align code that we can add to the image tag. Here is an example of how it would work:
<IMG SRC="filename" ALIGN=top/middle/bottom/left/right>
You would specify the alignment you want -- here is what each option would do.
Select a few images from your directory and try each alignment tag out.
Some Web users still have access to TEXT ONLY browsers and others prefer to turn their images off for faster page loads. If you want people to know what graphics are on your page, you can name your graphics by using the Alternative Text attribute. This is easier than it sounds. You just add ALT="your graphic description" to the image tag. For Example:
<IMG SRC="filename" ALT="description">
THE LEAST YOU SHOULD KNOW ABOUT IMAGES