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
<img> element 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:
|src||Required 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?)|
|width||Optional attribute. 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.|
|height||Optional attribute. This specifies the height to display the image. This attribute works similar to the width.|
|alt||Alternate text. This specifies text to be used in case the browser/user agent can't render the image.|
Dimensions Using CSS
Instead of using the
height dimensions as above, you could choose to set the size using CSS. This can give you extra flexibility. For example, it can sometimes be useful to specify a
max-height instead of an absolute size. This can prevent large images from ruining your layout (eg, if it's too big to fit inside the content area). This can happen especially if someone tries to view your website on a device with a small screen (such as a mobile phone).
In the following example, we use
max-width:100% to ensure that the image is never too big for its context. When you only use
max-width (without using
max-height), the browser will rescale the image proportionally. In other words, the height will be rescaled along with the width, and the image won't become squashed. When you do this, make sure you remove the HTML
height attributes, otherwise they will conflict with the CSS.
You can make your images "clickable" so that when a user clicks the image, it opens another URL. You do this by simply wrapping the image with hyperlink code.
Removing the Border
Some browsers create a border around the image when it's clickable. If you don't want the border, specify
border="0". You can also use the CSS
border property to remove the border (i.e.
The above examples assumed that you already had an image to embed into your web page. To learn about creating images for the web, check out the Web Graphics Tutorial.
Enjoy this page?
- Link to this page (copy/paste into your own website or blog):
- Link to Quackit using one of these banner ads.
Thanks for supporting Quackit!