Skip to main content
Sign In |
  Help (new window)

Web Foundations

Go Search
Home
Documents and Lists
Create
Site Settings
Help
  
Web Foundations > Unit 03: XHTML > Lesson 05 Adding Images  

This class is created for the the Web Authoring Foundation and Production classes.

Lesson 05: Adding Images

In this lesson you will learn about each of the units within this course.
This lesson should take you approximately 60 minutes.

Introduction | Image Format | The img Element | Imagemap | Activity Summary

Introduction

Images make a web page more interesting but slows the download time. Images can be displayed on a web page as an inline content or as a tiled background. We will be using style sheets for placing images into the background of our web pages so in this lesson we will concentrate on putting them on the page as an inline element.

Inline images can be used three basic ways.

  • An image: You can simply place an image on the page as decoration or to help communicate an idea/concept. An example might be a company logo.
  • As a Link: I am sure you have been to web sites that use images as buttons. Simply surround an image tag with the same open and closing anchor tags we learned about in the last lesson and you will have a button.
  • As an Imagemap: An imagemap is a single image that has multiple hyperlinks. We will practice writing the code to create a simple image at the end of this lesson.

Image Format

Make sure that you only use GIF, JPEG, or PNG files in your web pages. All imaging applications will allow you to save your images as one of these formats. We will cover these in much more detail later in the class. For now try to follow these basic rules:

  • GIF (.gif): This file format is best for computer graphics with limited numbers of colors or if you need to have transparency.
  • JPEG (.jpg): This file format is best for photographs becuase it handled millions of colors well.
  • PNG (.png): This is the newest file format. It can handle transparency and millions of colors well.

Just make sure that when you write your code you include the correct file extension. Example: <img src="images/photo.jpg" />

top

The img Element

The <img />tag is a self closing inline element. Which means a couple things. First you will need to include it within another block level element (parapgraph, heading, div). Second, that by default it does not add space above or below the image and it can be place in the flow of text. You will need to use a couple attributes that help the browser handle the img tag.

  • src (source): This attribute tells the browser where to find the image file on your server or on the Internet. If you are using an images folder make sure to start your path name with it.
    Example: src="images/photo.jpg" *This attribute is required by the W3C!
  • alt (alternate text): This attribute provides the browser and screen readers with alternate text to display if images are turned off or if the screen readers is trying to describe your image.
    Example: alt="School Adz Logo" *This attribute is required by the W3C!
  • height: This attribute provides the browser with information so it can display the page faster.The value is the height of the image in pixels.
    Example: height="100" *This attribute is required by your instructor!
  • width: This attribute provides the browser with information so it can display the page faster.The value is the width of the image in pixels.
    Example: width="200" *This attribute is required by your instructor!
    ***    You can find the height and width of an image by right clicking the image and going to properties, then details on a PC.

The img Element Tutorial

Tips

  • We will use style sheets to fine tune the position. For now, experiement with how the image looks depending on where you put the tag in the flow of your current content.
  • Organize your images by keeping them all in the images folder. If you are using an imaging program like Adobe Fireworks or Photoshop, make sure to keep the Fireworks/Photoshop files in a different folder outside your web site so you can continue to edit them but won't accidently upload these very large files to your web server.
  • Alt text values should provide the same information as the image. For example, if the image is our School Adz company logo, the attribute would be alt="School Adz Logo". If the image is a bullet, horizontal rule or is simply decrative, leave the value blank. Example: alt=" "
  • Take advantage of caching. If you have the same image on multiple pages the browser only has to download one copy of the image and can store it in the disk cache (temporary memory). Make sure to point to the same image on the server if you want to utelize caching.
  • Another way to get the height and width of an image is to open the image in FireFox and look in the title bar.

top

Activity #1

Download the School Adz logo to your images folder. Add it to the top of all the web pages we have worked on so far. Make sure to include all the required attributes and make it self closing.

Turn it in: Upload all four web pages and the image to the correct location on your FTP folder. Send your instructor an email with the URL's for your home page.

Grading Rubric

Tag Point Possible
src 2
alt 2
height 2
width 2
Total
 8

top

Imagemap

Image maps allow you to use specific parts of an image as a hyper link.  

There are two steps to creating an image map.

Having trouble with Adobe Photoshop crashing? Every time you go to a new computer you will need to turn off “Open GL” because our video cards can’t handle it. Here is a quick little tutorial that will walk you through the process. (0:36) http://mountsihighschool.com/directory/_dockeryj/photoshopcrash/photoshopcrash.html

Part 1:  Determining the coordinates for the hot spots (hyper link areas).

  • Open your image in Photoshop.
  • If the rulers are not visible, go to the View menu and select "Show Rulers". Right click on the rule and change the measurement to "pixels".
  • Drag guides onto the image to define the hot spots.  To get a guide, click and drag on the ruler.  A blue line will appear at your mouse pointer.  Once the guide is placed on the image, it can be moved by holding "Ctrl", then click and dragging.
  • Once the guides are laid out you can put your pointer on the upper left and lower right corners.  These are the coordinates for your hot spot.  You will need to write down two sets or all four numbers, separated by commas.   The first number in each set is number of pixels left to right, the second is the number of pixels up and down.
    I have an example in the "Coding Examples" folder on the Sharepoint called "imagemap_coor"

Part 2:  Writing the HTML that will insert the image map into your page and create the hot spots. 

  • Insert the image using coding discussed above.  Your code should include all the attributes for an image with one additional attribute (usemap="#name")
  • Add the map name tag <map name=name">
  • Add each hot spot tag.  This should include four parts.  1. Define the area  2. Define the coordinates  3. Provide the URL 4. Provide the Alt text.
  • Use a closing map tag. </map>

Example - I have posted an example of how the HTML might look (with pointers to the important components) in the "Coding Examples" folder on the Sharepoint called "imagemap_html"

*Replace "name" with the name of your image map.  This can be any short one word name.

The imagemap Tutorial

top

Activity #2

Part 1: Start by creating a new web page with all the basic structure.  

  • The title of the page will be "Image Map Example".  This should be a page title in the head and a title in the body using a heading 1 tag.
  • You need to include author and generator meta tags.
  • Save the file as "imagemap.html".

Part 2: Download the "imagemap" file from the "images" folder on the Sharepoint. Place it on your web page.

Part 3:  Write the imagemap code that will create hyperlinks to the four web pages you have created so far.

Turn It In: When you feel like the page is just the way you want, upload the web page and image to your server folder.  Test it to make sure that it is working properly. Then email your project manager the URL for evaluation.  *Make sure the URL starts with "http".

Grading Rubric

Tag Point Possible
Basic attributes 2
usemap 2
map (open & close) 2
area 2
coordinates 4
Accurate URLs 2
alt 2
Total
 16

top

Activity Summary

There are two assignment in this lesson. Activity 1 ask you to add an image to all of your web pages. Activity 2 ask you to create a new web page with an imagemap.