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
Results
 |
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:
| 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 (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. |
| height | Optional attribute (but recommended). 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. |
Image Alignment
You can determine how your images will be aligned, relative to the other content on the page (such as a paragraph of text). You do this using the align attribute.
HTML Code:
This results in:
some nice layout effects, especially if you have a lot of text, and it runs right past the image.<*/p><*p> Otherwise, the image will just hang below the text and may look funny. |
Image Links
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.
HTML Code:
Results
|
Removing the Border
You might notice that this has created a border around the image. This is default behaviour for most browsers. If you don't want the border, specify border="0".
HTML Code:
HTML Code:
|
Basic Notes - Useful Tips
Note: If an HTML file contains ten images - eleven files are required to display the page right. Loading images take time, so my best advice is: Use images carefully.
Note: When a web page is loaded, it is the browser, at that moment, that actually gets the image from a web server and inserts it into the page. Therefore, make sure that the images actually stay in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon is shown if the browser cannot find the image.
