Images

The purpose of this page is to demonstrate some of the features of HTML that you should be using in your work.

NOTE: The image markup below is written to conform to XHTML 1.0

Working with Inline images

• <img src="image.format" alt="text" /> This is the basic form of the markup when the image is in your www directory. Typical image formats that you will use include .jpg, .gif, and .png

  .gif stands for "Graphics Interchange Format." This format is useful for computer generated images, line drawings, and cartoons and will only display 256 colors

  .jpg stands for "Joint Photographic Experts Group". This format is useful for scanned photographs and images that contain more than 256 colors

  .png stands for "Portable Network Graphics." PNG is an new file format for the lossless, portable, well-compressed storage of raster images. PNG provides a patent-free replacement for .gif and can also replace many common uses of .tiff.

  The markup for an image might look like:

  <img src="../Images/Godzilla.jpg" border="0"" alt="The big guy" />

  And here it is:

  

• <align=>To wrap text around images, use the following values with the align attribute. These are:

  right aligns the image to the right side of the page

  left aligns the image to the left side of the page

  When you align images to the right, or the left on a page, you can use the markup to wrap text around the image (on the opposite side of the page as the specified value).

  Now the markup changes:

  <img src="dali.gif" align="right" alt="Melting watch" />

  And it looks like this:

  So, here goes again! Notice that the image is placed on the right side of the screen and that any text that is near the image begins to wrap at the left margin of the image. Also notice that there is border of white space between the image and the text and that the text begins to move to the right side of the screen when it gets below the image.. The left and right values provide you with more control over the layout of the page.
  

  You also can use the align attribute along with several values to position the image relative to a line that passes through it on the page. The generic form of this attribute is:

  <align="position">

  There are several alignment options which change the position of the image relative to a single line of text. These include:

  top aligns the top of the image with the highest element in the line, whether it is a text character or an image.

  texttop aligns the top of the image with the highest letter or number in the line of text. It differs from top because it looks for the highest text character and ignores images <Netscape extension>

  middle aligns the middle of the image with the baseline (bottom of text characters) of the text

  bottom aligns the bottom of the image with the baseline of the text

  baseline aligns the bottom of the image with the baseline of the text. This is equivalent to the bottom attribute <Netscape extension>

  absbottom aligns the bottom of the image with the bottom of the lowest character in the line of text <Netscape extension>

  When using these attributes, the full markup looks like this:

  <img src="image.format" align="position" />

  So, if I have an image named dali.gif, I can include it on this page with the following markup:

  <img src="dali.gif" align="middle" alt="Melting watch" />

  So, here goes:

  When you align images to the top, middle or the bottom, you are aligning the image relative to a single line of text. Notice that the image is positioned so that the line of text would go through the middle of the image. Using the top or bottom attributes changes the position of the image on the page relative to this line of text.

  For example, to align the image to the top, you would use the following markup:

  <img src="dali.gif" align="top" alt="Melting watch" />

  See the difference?:

  And to align the image to the bottom, you would use the following markup:

  <img src="dali.gif" align="bottom" alt="Melting watch" />

  Notice the change in position:

• <br clear= />. You can instruct the browser to stop text from wrapping along an image until there is a clear margin below the image. To do this you use the <br clear= /> attribute, which can take the values:

  left: The flow of text stops until there is a clear left margin (at the bottom of an image that is aligned to the left)

  right: The flow of text stops until there is a clear right margin (at the bottom of an image that is aligned to the right)

  all: This causes the text to stop flowing until the bottom of all images has been reached.

  This is what it looks like when the <br clear="left" /> attribute is not used to stop the text from wrapping when the image is aligned along the left hand margin of the page. Notice that the text will continue to flow around the right side of the image without a break or interruption until it reaches the bottom of the line on which the image has been placed. At this point the text resumes its normal alignment, flowing along the left hand margin. This effect can resemble the placement of images in printed text, like a magazine or newspaper.
  

  Here is the markup for the following example of the use of the <br clear="left" /> attribute:

  This is what it looks like when using the <br clear="left"><img src="dali.gif" align="left" alt="Melting watch" />
  <br clear="left" /> attribute to stop the text from wrapping when the image is aligned along the left hand margin.

  And here's what is looks like:

  This is what is look like when using the <br clear="left" />
  attribute to stop the text from wrapping when the image is aligned along the left hand margin

  Using the left and right attributes, you can place images along the left and right margins and have text flow between them. The markup would look like this:

  <img src="dali.gif" align="left" alt="Melting watch" />
  <img src="dali.gif" align="right" alt="Melting watch" />
  Text goes here.

  It looks like this:

  So, here goes again! Notice that the two images are displayed along the left and right margins of the screen and that this text runs between them until it is below the bottom of the images, when it returns to a full page margin. This effect gives you even more control over the layout of the page.

  Here is a page with images so you can see how the various alignment attributes look on the screen.

• <hspace=> and <vspace=> You can use these attributes to add white space around an image, which is useful if you want to separate an image from text or other images.

  To do this, you use <hspace=> and a value in pixels to add white space around the left and right sides of an image.

  Use <vspace=> and a value in pixels to add space around the top and bottom of an image. The markup is added to the img src="image.extension" tag.

  It would look like this:

  <img src="image.gif" hspace="pixel_value" vspace="pixel_value" />

  So, using the image zippy.gif, we can create a border of white space around it of, say 5 pixels with the following markup:

  <img src="zippy.gif" hspace="5" vspace="5" align="left" alt="Zippy" />

  And it would look like this:

  Here is the way that text will wrap alongside an image that had a border defined by the hspace and vspace attributes. Notice the thin border between the image and the text

  Here's the same image with hspace="50" and vspace="50":

  Here is the way that text will wrap alongside an image that has a border defined by the hspace and vspace attributes. Notice that the border between the image and the text has tripled in size. Also notice that the white space border pushes the image to the right

  You'll have to experiment with pixel values to get the effect you want




• <width="n"> and <height="n"> These attributes can be used to tell the browser the size of the image, which allows faster downloading. You do this by determining the size of your image in pixels, which you do offline using a graphics program (Photoshop, Paintshop Pro). The markup looks like this:

  <img src="image.extension" width="65" height="50">

  This allows the browser to set aside the proper amount of screen "real estate" to display the image

  You can also use these attributes to change the size of an image. Check here for some examples

• <alt="text"> As a favor to our friends who use screen reader sotfware because of vision problems, or who use browsers that are "text-only", like lynx, or who turn off their browser's image-loading capability (often to increase the speed of downloading pages), a common courtesy is to provide some text that their browsers will be able to see. This will provide a text message that lets them know what the image is.

  The use of this attribute is essential for extending the accessibility of the web to people with visual handicaps. The alt attribute provides text which can be read by speech synthesizers

  To make this happen, you use the alt="text" attribute in your image markup. It would look like this:

  <img src="dali.gif" alt="Melting watch">

  And when they view this image with a text-only browser, they see (or hear):

  [Melting watch]

• Another way to use an image is to make it a link. To do this, you place the image markup inside the markup for a link (which can be any kind: to an external page, to another page you own, or to another place within a page)

  For example, say we have an image called zippy.gif and we want to use it as a link to another page we own, say the Table of Contents for these pages, which is DemoCon.html. The markup would look like this:

  <a href="DemoCon.html"><img src="zippy.gif" align="middle" alt="Zippy lives!"></a>

It would look like this:


• <border="n"> Using this attribute, you can vary or eliminate the border around the image that you are using as a link. This attribute can only take values in pixels. The default value is 2 pixels. So, to create a thick border around zippy.gif, you would use the following markup:

  <a href="DemoCon.html"><img src="zippy.gif" align="middle" border="15" alt="Zippy lives!" /></a>

It would look like this:



To remove a border entirely, you would use border="0". Use this with care, because you are removing a cue that many users identify with links. So, to remove the border around zippy.gif, you would use the following markup:

<a href="DemoCon.html"><img src="zippy.gif" align="middle" border="0" alt="Zippy lives!" /></a>

It would look like this:



Notice that the image is still a link!

Acquiring Inline images

• To download an image if you have a Macintosh, move the mouse over the image you want. Click, hold the mouse button and a menu will pop up, and then...

  If you have a PC, move the mouse on top of the image. Click the right mouse button. A menu will pop up, and then...

  On either type of computer, once you have the menu, choose the "Save this Image as..." option, select a destination for the image, give it a name (or leave the name as it appears in the box, and click on "Save". It's yours! You can save the image anywhere on your hard drive or floppy.

• Here's one you can steal:
  

• And here's another:
  

  Here are some other images you can use.

• Unless you know that the images that you have downloaded are in the public domain, don't pass the pictures off as your own - give credit to the page from which you copied it just like you would with a quote in a research paper. As a courtesy to the people who provided the public domain images, you might even give them an acknowledgement

Working with color

• There are several different ways that you can use color in your web pages.
  • <body bgcolor="#ffffff"> This is the markup tag that will provide a background color for the entire page. The six character element is a hexadecimal code for colors which, in generic form, is #rrggbb. The rr defines the value for red, the gg for green, and the bb for blue. This example #ffffff will turn the background white
  • text="#rrggbb" This attribute, which follows the body bgcolor tag, will change the color of the text
  • link="#rrggbb" This attribute will change the color of links that have not yet been visited
  • vlink="#rrggbb" This attribute will change the color of links that have been visited
  • alink="#rrggbb" This attribute will change the color of a link when the user clicks on it

  An example of a markup tag that combines these attributes is:

  <body bgcolor="#ffffff" text="#ff0000" link="#0000ff" vlink="#ffff00" alink="#00ff00">

  The background color of the page is white, the text is red, the links that you have not visited are blue, the links you have visited are yellow and when you click on a link, it will turn green.

• A new development is the ability to use the names of 16 predefined colors. Some of the colors you can use include:

  Color
  Color name	Silver	Gray	Maroon	Green	Navy	Purple	Olive	Teal
  Hex color code	#cccccc	#999999	#660000	#336600	#330066	#660066	#666600	#006666
  Color
  Color name	white	Black	Red	Lime	Blue	Magenta	Yellow	Cyan
  Hex color code	#ffffff	#000000	#ff0000	#99ff00	#0000ff	#cc000cc	#ffff00	#33ffff

  In HTML 4.01 you simply use the color name in your markup, for example:

  <body bgcolor="cyan">

  In XHTML you simply use the hexidecimal color code in your markup, for example:

  <body bgcolor="33ffff">

• <color=> attribute You can also change the color of text within the document using the color= attribute. The value is the hexidecimal code for colors. Most browsers recognize this markup. To change the color of a single word of text in a sentence (say, red), you would use the following markup:

  This markup changes the color of <font color="#ff0000">text</font> within the <font color="#00ff00">document</font>

  It looks like this:

  This markup changes the color of text within the document.

• <body background="image.extension"> If you would like to use a background that has texture, an image, or more than one color, you have to use an image file instead of these hexadecimal codes. Typically, these will be a small .gif or .jpg file that you have either created or downloaded

  The markup involves the body tag again and looks like this:

  <body background="image.extension">

• Realize that you use a background color or and background image, and you can also use both

  The markup would look like this:

  <body background="image.extension" bgcolor="#ffffff">

  The color will appear on the page and then will be replaced by the background as the page loads

  Here are some background images, lines, and buttons that you can use

So, if this makes sense, let's try out imagemapping!