HTML XHTML Image Code Tutorial
The <img> tag is used to place an image in an HTML document.
The src attribute tells the web browser where the image is located. Similar to the <a> tag used in a hypertext link, the location can either absolute or relative (which is usually the case).
The HTML code example below shows you how to add an image with a relative location to an HTML document.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>this is the title of the web page</title>
</head>
<body>
<p>
<img border="0" src="csshtmltutorial-cssimage.jpg" width="63" height="30" alt="css image" />
</p>
</body>
</html>
The above HTML code produces the following image.
height and width attributes
The height attribute tells the web browser what height you want the image to be and the width attribute tells the web browser what width you want the image to be. If you do not specify these attributes, the web browser will calculate the size of the image as it loads, instead of when the web page loads. Not specifying the height and width of an image can lead to the layout of the web page readjusting itself and a slower download time.
alt attribute
The alt attribute, a.k.a. alternative description, is used to for web browsers of people who cannot or choose to not view images. This attribute is required in the latest versions of HTML.
note: the <img> tag is a self-enclosing tage, which means that it must end with " />".
A few notes on image file formats: GIF and JPEG
The most commonly used file formats that are used for images are GIFs and JPEGs. The file extension for a GIF is ".gif" and the file extension for a JPEG is ".jpg". Both of these image file formats are compressed file formats and are used for different purposes.
The GIF file format uses a palette of up to 256 distinct colors. The lower the number of colors that there are in the image, the lower the file size will be. It also supports animations and allows a seperate palette of 256 colors for each frame. The limitation on the use of colors makes the GIF format makes it suitable for saving simple images such as graphics or logos with solid areas of color, and not for saving color photographs and other images with a wider use of colors.
The JPEG image file format is most used for saving color photographs and images. The JPEG file format is not well suited for saving linear graphics or linear text or graphic logos, which is what the GIF file format is better used for.