Adding Images
             |
Adding images are one of the easiest things to do, but one of the best to make your site stand out from the rest or personalizing a web site and giving that distinct feeling of it being yours. Now, here is the tag that you would have to use:
<img src="picture.gif">
Now this is the most basic image tag that is around. Let's dissect it a little. IMG means imagine, src, means source, then you say ="picture.gif" Now similar to linking objects, if you want to link to a picture that you've uploaded for a web site, all you have to do is have the picture in the folder that you've set up for that particular web site. Now if you wanted to link to a picture that was not on your web site, then you would use the URL or web address where the picture resides.
There are a few tags that you should know when using the image tag. First
is the width and height command. If you had this tag:
<img src="picture.gif" width="300" height="90">
Now this tag is creating the picture size before the picture is loaded
to your web page. Width and height can either use a pixel size or a percentage
of the webpage, so you could have said width="20%" and it would have made
the picture, 20% of the viewable screen. It is an easy way to adjust the
size of a photo that you may be using. It does serve another purpose,
it allows the browser to know how much space to set aside for the photo,
by doing this you allow the browser to load the rest of your page and
the picture at the same time. It doesn't have to wait for the picture
to load to determine the size of the image you are using. This will increase
the speed of loading of your web page.
Another set of commands is the align command: <img src="nameofpicture.gif"
align="left">
Now the align command has three possible settings, left, right, middle,
bottom, top. Each does a different thing. Here is how it works:
- Align=left the graphics will align to the left of your web page and any of the text will wrap around the right edge of the graphic, beginning at the top.
- Align=right the graphics will align to the right of your web page and any of the text will wrap around the left edge of the graphic, beginning at the top.
- Align=middle the graphic will align to the left of your web page and the text will start in the middle of the graphic, starting at the right edge.
- Align=bottom the text will begin on the bottom of the graphic
- Align=top the text will begin on the top of the graphic
There is another set of commands, the HSPACE
and VSPACE command. Now if you don't want the text to be right up against
the image you have placed on your web site, you can use these commands
to create a buffer zone around the image. Here is an example:
<img src="picture.gif" width="150" height="100" hspace=10 vspace=10>
This will create a little space where text won't be right up against the
image.
The last command to be used with images is the alt command. Some people
shut their graphics off on their web browsers, so you can add a text alternative
to your picture or if the person has a slow computer or internet connection,
they may be waiting for a bit before the photo loads, so it would be a
good idea to tell them what picture they are waiting to load:
<img src="picture.gif" alt="Picture of my beautiful face :o)">
Now that alternate text will appear until the actually image loads.
You can also add a border around your photo, but using this command:
<img src="picture.gif" border="1">
It will create a little box around your photo, you can make the number
larger than one to make a thicker border.
Creating a Hyperlink with a Photo!
Now we go back to last lesson and add this little neat trick. Making a
picture a hyperlink. Here we go:
<a href="home.htm"><img src="picture.gif" alt="link to home"></a>
Now when someone clicks on the photo, that will be the hyperlink, and it will bring the person to the page you wanted. This can really add a little something special to your page.
You've completed the lesson on adding images, now the next step, and one of the most useful, TABLES!!!!