HTML Tutorial 8
Prepared by: Anthony Larrain
Images
To display an image use the <img> tag.
Example 1
Suppose you have a JPEG image file called tree.jpg in the same directory as your HTML file. To display an image put the following into the HTML document.
Browser Display
Example 1 ... Explained
- The
imagetag is an empty tag, no content, just attributes. Start and end tags combined. - The image tag has an attribute named
srcwhich means source. - The value of the
srcattribute specifies the location of the image, a URL. - Since I specified just the file name the browser will look for the image file in the current directory.
- The path to the image file can be either an absolute URL or a relative URL.
Example 2
Specifying a path to the image file other than the current directory
Example 2 ... Explained
- The first line is a relative URL to the image file. Start from the same directory that the HTML file is in, then go into a subdirectory called images and get the file
tree.jpg - The second line is the Absolute URL to the image file
Image Attributes
Width and Height Attributes
- The dimensions of an image are the width and height of the image.
- The width is the number of pixels per row.
- The height is the number of pixels per column.
- The dimensions of the tree image are:
200 by 133 - When using the
imgtag you should also use the dimension attributes. These attributes assist the browser in determining the size of the image before it downloads.
Example 1
Design Tips
- Always use the correct dimensions for the image unless you are going for an effect.
- Use image editing software (Photo Shop, Paint Shop etc..) to change the dimensions of an image.
- Do not use HTML to change the dimensions.
Example 2
Using HTML to change the dimensions of the image
Browser Display
The alt Attribute
- The
altattribute is used to provide text in place of the image if the image does not load. - Also, useful for ueser using text-only browsers or screen readers.
Example 3
Browser Display
The title Attribute
Provides a tooltip for the user.
Example 4
Browser Display