HTML Images CS 1150 Fall 2016

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

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

An Image Example <img src="images/kitten.jpg" alt="Kitten" title="kitten“ /> Example file: https://cs.mtsu.edu/~crn2k/public/courses/1150/image.html

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: https://cs.mtsu.edu/~crn2k/public/courses/1150/image_align.html 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

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.

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

Helpful Links for Website Images http://www.w3schools.com/html/html_images.asp