Images = <img src="" height="" width="" border="" alt="">
When you want to place an image on your web page you use the <img src=""> tag. The image tag is different as it does not strictly have a closing tag.
<img src=""
As in 9 - Source, the browser needs to know where to find the image and what type of image file it is. In the above image, the relative path is src="images/cat.jpg". This means that the image/jpeg file cat.jpg is in the sub-folder of this site called images.
NOTE: When you are using the TRY IT! editor, if you want to use images from other sites you must use the full path =
scr="http://www.html4kids.net/images/cat.jpg"
or if you want to use an image on your computer the full path would look like this =
src="file:///C|/Documents%20and%20Settings/gbt/My%20Documents/My%20Pictures/cat.jpg"
A browser thinks that a black space is the end of the name, %20 is put in place of all of the blank spaces in a file or folder name.
height="" width=""
These tell the browser how big and wide the image is. This is particularly important when you want to put two images together side by side or in a particular place on the page. It lets the browser know exactly what the height and width of the image is in pixels
border=""
When you wish to put a border around an image you set the border="number" to the number of pixels wide you want the border to be. This border will change colors when you are using the image as a link/<a></a>. The border in the image above has been set to border="4". Set the border="0" (zero) if you do NOT want a border.
alt="">
In the image above the alternative text or alt="" is alt="Jet's Cat". When you let your cursor hover over an image, some text should appear telling you what the image is about. The alt text is also there in case the image fails to load into the page. It is also important to fill out all your alt tags for those impaired vision and other-abled users who can't actually see what the images are, but the alt text will tell them what it is.
|
