Images
Images are used in HTML documents to one: make the page visually effective and two: display information. Images can also be used as links, but this is discussed in the topic on linking.
Although images are good for a number of things, a page with too many images often looks too cluttered and can take too long to load, which can be frustrating, and as a business aspect it could lose clients.
- An image -
<img src="url"> - To display an image you need to specify the URL of the image using the
srcattribute, replacingurlwith the filename of your image. There are several ways this can be done: src="picture.jpg"- the filename if the image is in the same directory as the html file.src="images/picture.jpg"- a relative path when the image is in another directory.src="http://www.simplehtmlguide.com/images/photo.jpg"- a full URL can also be used.- Alternate Text -
<img ... alt="?"> - The
altattribute defines the text shown in place of an image when the image cannot load. This is actually a required attribute for valid html, and should briefly describe what the image normally would. - Image Size -
<img ... width="?" height="?"> - An image will normally be shown actual size, but by using the
widthandheightattributes you can change the displayed size. You can specify the size in pixels or as a percentage. Tip: specify the size using the actual size of the image in pixels to force browsers to allocate space for the image before it is even loaded, ensuring you page layout remains the same with or without images displayed. - Border -
<img ... border="?"> - Add a border by specifying the thickness in pixels. You can also set
border="0"to remove the border added when images are used as links. (*) - Image Alignment -
<img ... align="?"> - By default an image appears at the place specified in the html code(as with any other tag). However, you can align an image with the surrounding text or paragraph by setting any of
align="left | right | top | bottom | middle". (*) - Spacing -
<img ... vspace="?" hspace="?"> - Adjust the whitespace (or runaround space) around an image, in pixels. Use
vspaceto adjust the vertical spacing above and below, orhspacefor the left and right sides. (*)
Example:
Show an image using html
<html>
<body>
<p><img src="photo.jpg" alt="parakeet"></p>
</body>
</html>
See live demo of this example or open in a new window. (Note: close window or tab to return to the guide)
Example:
See another images example, and select 'view source' in your browser to see the html code.
(*) Important Note:
Tags marked with (*) should still work, but have been superseded by Cascading Style Sheets (CSS), which is now the recommended way to change the font, colour, spacing, border or alignment of HTML elements.
