When I first started making web pages, I was confused! I thought pictures were just called pictures, but in computer lingo they are known as images, or graphics. So if I interchange these three terms, don't worry. They all mean the same thing!
To a computer, everything is a file. A HTML page is a file, as is a picture, or graphic. To sort these files out, the computer attaches a little ending "tag" to the back of your file's name. This "tag" begins with a dot, or period, followed by some letters.
Picture, or image, files are followed by a multitude of "tags", but there are three that are used on HTML web pages all the time. These are .GIF, .JPEG (or JPG), and .BMP.
.GIF means Graphics Interchange Format. Gif is a good way to save images that have large parts that are all the same color (like cartoons). These types of images display the best on the screen if saved in Gif format.
.JPG (.JPEG) means Joint Photographic Expert Group. This format is the best way to save photographs and drawings that have large parts of diffused coloring.
.BMP means Bitmap. The only place I've seen .BMPs is in my "Paint" program, but they work on web pages, so I put them in here. Often your computer will let you save an image as a .BMP when it won't let you save it as anything else.One note: .BMPs don't seem to work in Netscape...try to save everything as a GIF or JPG.
To put an image on your page, first you must know how to get an image. As you cruise around the web, you'll see cartoons & pictures that you like, and you may want to take one of them and put it on your desktop or your web page. There are tons of sites devoted to free graphics, and tons of software. Either way can get you a huge library of images, but
**BE CAREFUL** if you're using free images, make sure that you always read the usage agreement at the site where you find them. Most artwork on the web is copyrighted. The artist usually does not mind people using his/her stuff for personal pages, but it's your responsibility to check.
To lift an image off the web:
A word about .ART images: There seem to be a lot of .ART images out there. When I get images off the internet I see them all the time. But they don't appear on my web pages! I'm trying to figure out why, and when I find out the answer to this, I'll let you know. In the meantime all I can tell you is to save all your images as one of the three above, because I know they work.
Place your cursor over the image you want, and click the right mouse button. A little menu will pop up. Click on "save picture as..."
Now another little screen will pop up, with the name of the image in a white box. Check the ending "tag" and see if the image is a .gif, .jpg, or .art image. If the image has .art on the end, you will have to change it to a gif, jpg or bmp. Click on the pull-down menu right below the white box, and click on one of the choices there. I always erase the name of the image and put something I'll recognize later, and one more thing!
Look at the top of the little menu, and see what file your image is going into. You'll have to go there to get your image out later. So, I always change this name to the exact place I want this image to be. There will be a pull-down menu that will show you all your files, just click on the one you want.
Finally, click "save." Now your image is in a file on your hard drive. You can take it out and use it any time.
To put an image on your HTML page:
Since this is HTML, you'll need a tag. This is it:
<IMG SRC=" ">
Place the path to your image between the " " marks. This tag tells the computer to follow this "path", retrieve this image and show it on your page. In HTML, IMG SRC means "image source." There is no need to end this tag - no </IMG SRC>. A proper tag would look like this:
<IMG SRC="/images/deer.gif">
(/images means "search the whole hard drive for the file "images." You could specify the drive, but it's easier this way. If you write the whole thing out, there are just more chances to make a mistake somewhere. /deer.gif is the name of the image you want. The slash just separates the two.)
There is an easier way! If you keep your HTML files in the same place as your image files, all you need to do is put the name of your image between the " " marks, like this:
<IMG SRC="deer.gif">
There is an even easier way!
The reason I love my HTML editor (the program where I write all my web pages) is because it puts the paths in for me. All I do is push a button called "graphics," and it shows me all my gifs, jpgs, and bmps. Then I just select the one I want and - viola! The program puts it on the page for me.
And finally...
Within the IMG SRC tag, attributes can be placed to modify the placement of the picture.
You can specify the height and width of the picture (in pixels) so it will fit somewhere better. Specifying height and width also helps the picture load faster, because it lets the computer know just how big a space to prepare.
The align attribute can also be used to align the image to the top, bottom, or middle of your text.
The border attribute places a line, or border, around your picture. "0" means no border, "1" is a thin one, "2" is thicker, etc. etc.
The alternate (ALT) attribute is a place to put a word describing your picture. This word shows on the screen while your viewer waits for the image to load. Some people have browsers that don't even show pictures, or they turn the pictures off so they can browse faster. So it's a good idea to always use ALT.
Remember - all attributes are enclosed within " " marks. See the example below, or visit the Basic HTML Tags page. An IMG SRC tag containing all these attributes would look like this:
<IMG SRC="deer.gif" HEIGHT="100" WIDTH="100" ALIGN="top" BORDER=0 ALT="deer">
Main Page |
Email Vividpages
Disclaimer: I'm still learning, and all I know is what works for me...some of this may not be exactly perfect. So if there's an error, email me, and I'll fix it :)