The lt img gt Element To add an image to a webpage you need the lt img gt element The lt img gt element is an empty element which means there is no closing tag All lt img gt elements should contain attributes describing the image ID: 751262
Download Presentation The PPT/PDF document "HTML Images CS 1150 Spring 2017" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
HTML Images
CS 1150 Spring 2017Slide2
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 imageSlide3
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 HTMLSlide4
An Image Example
<
img
src
="images/kitten.jpg" alt="Kitten" title="kitten“ />
Example file:
https://cs.mtsu.edu/~
crn2k/public/courses/1150/HTMLExamples/image.html
Slide5
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/HTMLExamples/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 CSSSlide6
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. Slide7
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: Slide8
Helpful Links for Website Images
http://www.w3schools.com/html/html_images.asp