Graphics
Preamble
This tutorial is likely to be of most value to the novice who wants to understand how to use HTML to include images on their Wed Pages and present them in the best as possible way through formating techniques. Alternativly some may appreciate the refreasher or be interested in how others use HTML to present graphics on their pages. Whatever brought you here I hope you find it useful.
The Tutorial
Graphics as Image Files are presented on web pages using the <IMG> tag. In the main these are "gif" files as they are the smaller and hence load faster. The bigger "jpeg" files are used mainly where very high quality is a must. In the main however you would not notice the difference in a casual view.
The <IMG> tag has a number of attribute to add to the way you can present your Graphic Image. The main ones are shown here:
<IMG SRC="file name" border="" height="" width="" vspace="" hspace="" ALT="text description" ALIGN="Direction">
To display an image the minimum elements of the <IMG> tag are as
<IMG SRC="file name">
See the Note (1)below on image file location where the image you are using is not in the same directory or location for that matter as your HTML file whch uses it.
Attributes of <IMG>
Attributes of <IMG> tag and their available values are:
Notes
(1)As said earlier to display an image the minimum elements of the <IMG> tag are as
<IMG SRC="file name">
However where the image you are using is not in the same directory or location for that matter as your HTML file which uses it you must prvide a path to that file. If it was at another location on the net you would for example change the Tag to
<img src="http://www.******.***/file name">>
If it was in a different directory you would need to show the path to that directory. For example change the Tag to
<img src="../dir path/dir path/file name">
Of the "../dir path/dir path/" that is the path. The two dots indicate up one level with the two dir path representing a subdirectory of a subdirectory of that directory.
If that doesn't confuse nothing will. Mainly I keep images in the same directory as the HTML file to avoid the unneccesary risk of mistaken directory paths bearing broken images.
(2) Aligning to LEFT and RIGHT is most effective when embedded in a long paragraph of text in order to achieve a "text-wrap" feel. See Figure (1) (2) (3).
(3) To force the LEFT and RIGHT effect to cease use the <BR> tag as below
Figure 1 <img ...align="left">
This is not me even though I am told it is. You will note this text which I have puposely repeated auto wraps at the end of each line but is left margined to the image. You should also not the use of the alt="" attribute if you position your mouse over the image you will see the word Devil which I typed as alt="Devil" . As you will also see that once past the image the text goes back to the margin. I could have forced this effect as shown in Figure 3 using the clear attribute discussed in the notes. This is not me even though I am told it is. You will note this text which I have puposely repeated auto wraps at the end of each line but is left margined to the image
Figure 2 <img ...align="right">
This is not me even though I am told it is. You will note this text which I have puposely repeated auto wraps at the end of each line but is right margined to the image. You should also not the use of the alt="" attribute if you position your mouse over the image you will see the word Devil which I typed as alt="Devil" . As you will also see that once past the image the text goes back to the margin. I could have forced this effect as shown in Figure (3) using the clear attribute discussed in the notes. This is not me even though I am told it is. You will note this text which I have puposely repeated auto wraps at the end of each line but is left margined to the image
Figure 3 <img ...align="right"> <BR Clear=right>
I have used the same words as above but have broken the wrap by using <BR Clear=right>. You will note this text which I have puposely repeated auto wraps at the end of each line but is right margined to the image.
You should also not the use of the alt="" attribute if you position your mouse over the image you will see the word Devil which I typed as alt="Devil" . As you will also see that once past the image the text goes back to the margin. I could have forced this effect as shown in this Figure using the clear attribute discussed in the notes. This is not me even though I am told it is. You will note this text which I have puposely repeated auto wraps at the end of each line but is left margined to the image
Figure 4 <img ...border=10>
As you can now see the same image above without a border now has a thin border around its entirety, just by changing the border value from <img ...border=0> to <img ...border=10>. Note you can set the border pixels value to what suits you and the particular image you are working with.
A Member of
and
You are Visitor Number
Get your own Free Home Page
View Guestbook