Adding pictures to a web page is very easy the only hard part is making or getting the pictures in the first place. We'll talk about that later, first here is the tag that inserts a picture onto a web page:
I'll now explain all the parts of this tag; this is all you need to know to put pictures on your web page.
IMG is simply the name of the tag, it stands for image if you hadn't guessed. It does very little by itself.
SCR="picture.gif" is where you put the name of the picture. It has to be a gif or jpg, if you don't know what that means I'll explain it later in the making a picture section. It is best to put the name all in lower case letters and make sure that the files name is also in lower case letters. This is because a lot of the internet uses computers that are case specific. If your picture was called PICTURE.GIF and you referred to it as picture.gif the browser might not be able to find it.
WIDTH=100 HEIGHT=100, if you do not know the width and height of your picture you can miss these out but it is better to include them if you can. Pictures take longer to download than text so the whole page of text appears first and leaves spaces for your pictures that appear later. The problem is how does it know how big the pictures are if you don't tell it. It doesn't, so it leaves a little space and then when it loads the picture it shunts all the text down. It makes it very hard to read the writing when it's moving all the time, so it's best if you can to include the width and height.
ALT="a picture". This is a caption that appears where the picture is so that people know what it is before it downloads. Some people with slower modems choose not to show pictures so all they see is the caption.
|
<HTML> <HEAD> <TITLE>Pictures.</TITLE> </HEAD> <BODY> <IMG SRC="picture.gif" WIDTH=100 HEIGHT=200 ALT="A picture">
</BODY> |
To do this you are going to need an art program. You can buy expensive art programs but there are some shareware alternatives that are just as good. One of the best is Paint Shop Pro which you can download from here, this program gives you all the options you need and is well worth the download time.
I can't give you any tips on creating images, you'll have to let your own artistic talents shine through. Once you have created your image you have to save it in gif or jpg format. In Paint Shop Pro you select one of these from the list of file types in the save as dialog box. Gif and jpg are used for different types of pictures. If your image is mostly block colours you should save it as a gif but if it's more like a photo or is a photo with lots of different shades you should save it as a jpg.
It is also possible to make animated gifs, these aren't shown by all browsers but can be very effective. There is a good shareware program called Gif Construction Set that you can use to make them.
The internet is not very fast and it's all well and good having a page full of cool pictures but if it's going to take hours for them all to download no ones going to see them. You have to minimise the use of graphics and try to keep the file size down. As a rule of thumb you do not want the total size of your page (the html file and all the pictures) to exceed 30 kb. If you have any big pictures that you want to show it is a good idea to show a small version of this picture that links to a full size version on a different page. This way anyone who likes the picture and wants to see it will spend the extra time but those who don't want to don't have to.
That about sums it up for pictures, in the next chapter we will learn how to create links which link one page to other pages and to other locations on the web.