Friday 5 February 2010

HTML Images

Images make up a large part of the web - most websites contain images. HTML makes it very easy for you to embed images into your web page.

To embed an image into a web page, the image first needs to exist in either .jpg, .gif, or .png format. You can create images in an image editor (such as Adobe Photoshop) and save them in the correct format.

Once you've created an image, you need to embed it into your web page. To embed the image into your web page, use the <img /> tag, specifying the actual location of the image.

Example of Image Usage


HTML Code:

<img src="http://www.xyz.com/pix/smile.gif"
width="100" height="100" alt="Smile" />

This results in:
width="100" height="100" alt="Smile" />

The img above contains a number of attributes. These attributes tell the browser all about the image and how to display it. Here's an explanation of these attributes:



















srcRequired attribute. This is the path to the image. It can be either an absolute path, or a relative path (remember these terms from our last lesson?)
widthOptional attribute (but recommended). This specifies the width to display the image. If the actual image is wider, it will shrink to the dimensions you specify here. Likewise, if the actual image is smaller it will expand to your dimensions. I don't recommend specifying a different size for the image, as it will lose quality. It's better to make sure the image is the correct size to start with.
heightOptional attribute (but recommended). This specifies the height to display the image. This attribute works similar to the width.
altAlternate text. This specifies text to be used in case the browser/user agent can't render the image.

No comments:

Post a Comment