Value Added | daily

Class Schedule

Basics | sessions 01-03
  1. 19 Jan intro and clients | lecture | labs
  2. 26 Jan servers and command line | lecture | labs
  3. 02 Feb networks and protocols | lecture | labs
Web Development | sessions 04-08

  1. 09 Feb structural layer | lecture | labs
  2. 16 Feb presentational layer | lecture | labs
  3. 23 Feb using a structure | lecture | labs
  4. 02 Mar behavioral layer | lecture | labs
  5. 09 Mar design thoughts | lecture | labs
Dealing with Markup | sessions 09-10
  1. 16 Mar control objects and display | lecture | labs
  2. 23 Mar tools that read markup | lecture | labs
Working with data | sessions 11-14
  1. 30 Mar formulas, functions, vectors | lecture | labs
  2. 06 Apr data display | lecture | labs
  3. 13 Apr manipulate data sets | lecture | labs
  4. 20 Apr relational data bases | lecture | labs
Presentations | sessions 15-16
  1. 27 Apr designing a presentation | lecture | labs
  2. 04 May delivering a presentation | lecture | labs

Images can add a lot to your web pages.
Consider using individual images as hyperlinks.
Consider the utility of multiple hyperlinks on an images map as a navigational tool.


UNIX/LINUX ⇒ command argument value
HTML ⇒ tag attribute value
CSS ⇒ selector declaration property declaration value

Working with images

Image tags

You put images in a web page using the img element. For example, if you include this image tag in your page
< img src="images/GEB.png" />

[Goedel Escher Bach]

then the image displayed on this page will be displayed on your page when you load the page. (But only if you have the image stored at the same relative file location from the file location where this particular web page is stored - in a directory named "images" that is three levels away in the file hierarchy from this page)

In the general case, the img element can have a number of attributes though the above example only has a single one, src. In this case, the src attribute is required -- it doesn't make sense to have an img tag without specifying which image.

The img tag can take any or all of the following as attributes:

  • alt Alternate text to be displayed if image is not loaded
  • width Width of image in pixels
  • height Height of image in pixels

So the img tag (with an absolute, not relative, location this time)

    alt="[Goedel Escher Bach]"
    src="" />


Display the specified image
use [Goedel Escher Bach] as the alternate text if the image is not or cannot be displayed.
display it with a width of 301 pixels
display it with a height of 349 pixels
Find the source of the image at the location specified after the = sign and self-close the tag

But why does the image on lines 160-164 of this page display in the center of the space?

It does so because the HTML tags that encompass it refer back to a CSS element that tells the IMAGE object how to display. In particular the encompassing HTML element is a special kind of span. Note how, on line 161 in the code for this page, one sees the tag


which refers to the instructions on line 61 on the stylesheet where the special image class named "center" is defined

.center { display: block; text-align: center; margin: 20px auto; }

So an image tag which includes the class attribute named the value "center" will then display in the center of the space.

back to top

Images as hyperlinks

To make an image into a hyperlink, embed the img tag inside the hypertext anchor

<a href="">
        alt="[Goedel Escher Bach] "
        src="" />

Now when you click on the image it will take you to the UNC homepage.

back to top

Image Maps

Image maps are "clickable images". They allow you to specify which URL should be accessed when a user clicks on a part of an image. For example, if you have a state map and want to bring up information about selected counties when a user clicks on the shape of the county, then you can do so by defining a geometric shape around a county and associating the coordinates of that shape with a URL of your choosing - in this case, a county information page. This is a very powerful tool and gives you a lot of flexibility in how you design your pages. It's a step towards dynamic-content as well.

There are two dimensions to image map creation.

  1. First, image maps can be client-side or server-side
    • A client-side image map contains all of the shape information and associated URLs in an HTML document, usually the same document that contains the image. They run more quickly because the client has all the information it needs to work.
    • On the other hand, a server-side map contains all of this information on the server in a place completely separate from the file containing the image. The terms client-side and server-side simply refer to where the "click" coordinates are interpreted and translated into a corresponding URL - on the client or on the server. Server-side image maps require you to do the creation work on the server.
  2. The second, more practical dimension of image map creation, is how to actually create one, in this case a client-side image map.
    • You can create a map by hand using any of a number of free applications, a program like DreamWeaver or Photoshop to determine the shape coordinates, or you can use a program specifically designed to do image map creation.
    • ITS has contracted with Adobe to make Creative Cloud (which includes both Dreamweaver and Photoshop) available to all students. Go to the Adobe Creative Cloud page and download the programs you need.

back to top

An Example

Here is a simple example of the HTML code for a client-side image map. Looking at the code, we see the instructions shown below on this page.

<h2>North Carolina
<map name=" FPMap0">
<area href="counties/Brunswick.htm" shape="circle" coords="375, 189, 18">
<area href="counties/Columbus.htm" shape="circle" coords="348, 175, 18">
< area href="counties/NewHanover.htm" shape="circle" coords="399, 177, 15">

[we skipped many lines of code here]

< area href="counties/Jones.htm" shape="polygon" coords="408, 123, 417, 104, 440, 112, 440, 137, 412, 121">
     alt="map of North Carolina's 100 counties" />

Components of the image map.

  • The usemap attribute of the img element says "this is a client-side image map".
  • The map shapes and coordinates are in a map element called "#FPMap0".
  • The map element shows two separate shapes (circle and polygon), each of which refers to a different file, designated by its relative location in the file structure.

back to top

You can use some editors to create image maps or online tools such as

back to top

23 February lecture | preps | templates | free editors | one editor | images