Img tag
From Dharmasphere
Contents |
<img> Image Tag
This allows us to put images into our web page. The images are not actually saved within the document - they are merely referenced by the document and get downloaded when a user's browser opens the page.
We need to say which image we want to use. That is, we need to give the source of the image. We do this with a src attribute:
<img src="mydog.jpg" />
The src attribute gives the location of the image in relation to the web page we are writing. It may be an image on your computer's hard drive, or it may be an image on a website on the World Wide Web.
In the previous example, we told the browser to look in the same folder as the web page and then look for the file called mydog.jpg
If the image was contained within a sub-folder called images, we would write the code like this:
<img src="images/mydog.jpg" />
If the image was on another website, we would need to provide the full web address:
<img src="http://www.example.com/images/mydog.jpg" />
This img tag is self-closing because it does not need to enclose any text. That is, we do not need to give an opening <img> and a closing </img> tag. We simply close the single tag with />.
Alt Attribute
We can (and should) provide some descriptive text for those who cannot see images in their browser. This will be useful for those who are blind or have poor eyesight, those using a text-only browser or web-enabled mobile phone, or even a search engine like Google, which scans websites to find out what they contain). We do this by using the alt attribute, which stands for "alternative text".
<img src="mydog.jpg" alt="Photo of my dog" />
Height & Width Attributes
We can optionally supply the height and width of the image, measured in pixels:
<img src="mydog.jpg" alt="Photo of my dog" height="240" width="240" />
This is not essential, as the image will appear at its normal size once the browser downloads it. However, a browser will always download the text on a page before the images, so specifying the height and width attributes for each image will reserve the correct amount of space for them on the page. This is useful if, for example, a visitor to the website has a slow connection or if a page contains many images. Without specifying these attributes, the page would expand as each image downloads, which could be irritating if the user is reading some text or trying to click on a hyperlink.
