<img>

This tag displays a graphical image within your web page. The image tag does not require an end tag.

• Attributes for the <img> tag:
  • align - This attribute aligns the image on your page. It can also cause any text near the image to wrap around to the side. There are many values you can use, the default is "baseline". I would suggest you experiment with these values in an HTML editor to better understand how they are different from each other.
    • left - aligns the image in the left margin of the page and wraps the text that follows around the image
    • right - aligns the image in the right margin of the page and wraps the text that follows around the image.
    • top - aligns the top of the image with the surrounding text.
    • texttop - aligns the top of the image with the tallest text of the line.
    • middle - aligns the middle of the image with the surrounding text.
    • absmiddle - aligns the image with the middle of the current line.
    • baseline - aligns the image with the baseline of the current line.
    • bottom - aligns the bottom of the image with the surrounding text.
    • absbottom - aligns the image with the bottom of the current line.
    • center - aligns the center of the image with the surrounding text.
  • alt - This provides a textual description of the image. This is an essential attribute if you want to make web pages for visual impaired users. Also, some browsers display this text when the mouse pointer is above an image, so it is a way to display additional information about an image. And this text will also display as an image is loading in the browser, which is very helpful for people who have a slow connection to the Internet.
  • border - This controls the thickness of a border around the image. If you have wrapped an image within a link tag <a>, then you will probably want to set this attribute to zero so that no border will show. The default color of an image border will be black unless it is wrapped in a link tag, then the default will be blue. The default is zero.
  • height & width- These attributes defines the height and width in pixels of the image. The value should always be the same as the actual size of the image. You should never attempt to enlarge or reduce the size of an image on your web page by altering the height or width attributes to someting other than the actual size of the image. You should also always use the height and width attributes for every image you create on a page. The reason for this is that it dramatically speeds the display of your web page in the browser.
  • src - This lets the browser know where to find the image file on the web server. Without this attribute, no image will appear on your web page. You can use either a relative or absolute path to the image file in this attribute. Read the rules on relative and absolute paths at the bottom of the linking tutorial.
  • hspace & vspace - These attributes create an invisible "buffer" around either the horizontal (hspace) or vertical (vspace) area around an image. This is useful when white space is needed immediately adjacent to the image. The value for these attributes is is pixels. The space is added to both sides of the image. So if you include a value of 10 for hspace, then 10 pixels will be added to both the right and left sides of the image. These attributes are especially useful in conjuction with the align attribute mentioned above.
• Example: <img src="images/portrait.jpg" align="right" alt="Portrait of Mona Lisa doing a jig" border="0" height="120" width="200" hspace="5"> This tag will display the file "portrait.jpg" which is within the "images" directory. The image will be aligned to the right of the page and the descriptive text is set as "Portrait of Mona Lisa doing a jig". The border of the image is set to zero and the height and width is set to 120 and 200 respectively. And the image will be displayed with 5 pixels of white space to the right and left of the image borders.