1. HTML Images
CS 1150 Fall 2016

2. The <img> Element
To add an image to a webpage, you need the <img> element
The <img> element is an empty element, which means there is no closing tag
All <img> elements should contain attributes describing the image
The src attribute tells the brower where it can find the image file
The alt attribute provides a text description of the image which describes the image if you cannot see it
The title attribute provides additional information about the image. Most browsers will display the title in a tooltip when the user hovers over the image

3. More Attributes for the <img> Element
Often, you will see the <img> element described by the following attributes
Height – this specifies the height of the image in pixels
Width – this specifies the width of the image in pixels
The size of images is increasingly being specified using CSS rather than HTML

4. An Image Example
<img src="images/kitten.jpg" alt="Kitten" title="kitten“ />
Example file:

5. Image Alignment
The align attribute was commonly used to indicate how the other parts of a page should flow around an image
Left – aligns the image to the left, allowing the text to flow around its right-hand side
Right – aligns the image to the right, allowing the text to flow around its left-hand side
Example file:
This has been removed from HTML5 and new websites should use CSS to control the alignment of images
We will use HTML image alignment until we learn how to align images with CSS

6. Tips for Adding Images
Save images in the right format. Most images found on websites are .jpg, .png, or .gif format
Save images in the right size. The image should be the same width and height that it will appear on the website, measured in pixels.
Measure images in pixels. When you are saving images for use on the web, make sure you measure the image in terms of pixels.

7. Using an Image as a Link
To use an image as a link, nest the <img> tag inside the <a> tag
<a href=“ <img src=“smile.jpg” alt=“Smiley Face” title=“Smiley Face”> </a>
Example file:

8. Helpful Links for Website Images