Part 5 - It's all about Image
We have briefly touched on adding images to your site in Part 2. Now we're going to delve a little deeper into images to uncover what we can really do with them to spice up our web pages.
Firstly, where do pictures come from? Well, if you have photographs you'd like to place on your page, you will need access to a scanner. Make sure you save your photos in 'jpg' format. If you'd like cartoon-type pictures or clipart, you'll need them to be in 'gif' format. If you're the artistic type you can create your own images with a graphics program. Otherwise, you can obtain clipart for your web pages from any number of websites that offer them free for personal use. Just make sure you don't infringe any copyrights when using other peoples images.
Ok, so we'll assume you have obtained some images (either photos or clipart) that you'd like to place on your page. The basic tag we're going to use is the tag. It's interesting to note that this tag is one of the few that does not have a closing companion tag. It does, however, have a number of parameters that we can set to make sure our image displays exactly as we want it to.
The first, and most important, parameter is where we specify the image source. This means the location of where the file is stored on the internet. In most cases, the image file will be stored in the same place as your html file. In some cases it will be saved in a sub-directory that has been set up to keep image files separate from html files. In these cases we will use the "relative path" to the image. Sometimes you will link to an image on another part of the web (see here for more information about doing this) and in this case you would use the "absolute path" to the image. I'll show you what is meant by relative path and absolute path.
Relative paths
When the image and html files are stored in the same place
When the image file is saved in a sub-directory called "images"
When the image is stored on a different website altogether
If you know the dimensions of your image (in pixels) you can set the height and width parameters. This is not necessary for your image to be displayed correctly, your browser will work it out on it's own, but adding the dimensions will make the page load slightly faster.
Latest Articles