HTML Images CS 1150 Fall 2016 The img
- Slides: 8
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 title attribute provides additional information about the image. Most browsers will display the title in a tooltip when the user hovers over the image The alt attribute provides a text description of the image which describes the image if you cannot see it
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/~crn 2 k/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/~crn 2 k/public/courses/1150/image_align. html This has been removed from HTML 5 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. w 3 schools. com/html_images. asp
