Marketing for Libraries Logo

HTML Section: Images

Images play a vital role in web pages development. They attract attention, provide information, and entertain.

readRead!
Ekart, Donna F. (September 2010). Flickr four by four. Computers in Libraries, 46-47.

HTML Images

Images are defined with the <img> tag. There's no closing tag.

For your image to display, you need to use the src (source) attribute to tell the system where to find the image. Notice that the file name is in quotes. If you use an external site, be sure to include http:// in the address such as http://eduscapes.com/pets/dog.jpg

You also need to include the alt attribute that describes the image. This is particularly important for visually challenged readers. Notice that the description is in quotes.

You may also wish to indicate the height and width of the image. This will speed up loading. The size in pixels should be in quotes.

Indicate whether you want to align the image on the bottom (default), middle, or top of the line.

You may also want to float the image on the right or left using the styles.

Examine the following sample:

<img src="frog.jpg" alt="Photo of a green tree frog." width="300" height="250" style="float:right" >

There are two common problems with images.

First, you need to remember to upload your images. If you're using a system like Oncourse, you also need to make them public.

Second, you need to be sure that your link reflects the location of the images. If you've placed images in an image folder, be sure to provide the specific location so the images can be found.

try itTry It!
Go to w3schools and read about the HTML Images.
Use the Try It Yourself buttons to practice coding.

CSS Image Styles

Float is used to push an element to the left or right allowing other elements to wrap around it. Although it's often associated with images, it's also used in layouts.

Examine the following sample:

img {float:right;}

try itTry It!
Go to w3schools and read about the CSS Float.
Use the Try It Yourself buttons to practice coding.


| eduscapes | IUPUI Online Courses | Teacher Tap | 42explore | About Us | Contact Us | © 2006-2013 Annette Lamb & Larry Johnson