Displaying Images on Your Web Page

Images make web pages more appealing. When I first started "surfing the net," there was only text. There was no World Wide Web - there were no GUIs (Graphical User Iinterfaces). Then, along came Mosaic and, finally, the browsers we use today that allow us to see colorful animated graphics - not just black, white and green text!

It is easy to place an image on your page using the <img> tag. For example, to place the Sequoia Seal on your page, you would save the image file in your images folder and use the following image tag:
<img src="images/logo.gif" />


To size the image larger or smaller, you can use a width or height attribute - but do not use both in the same tag or the image may no longer be in proportion. Example:
<img src="images/logo.gif" width="125" />

Assignment: To practice displaying images with the Sequoia Seal, you will first need to save the image to your images folder. Right-click on the image above and choose Save Image As. Find your images folder and click on Save.

Attributes to Use with the Image Tag

AttributePurpose and SyntaxValues
srcDesignates the filename for the image
<img src="images/logo.jpg" />		Directory/Filename of Image
widthSets the width of the image
<img width="125" />		Width in pixels
heightSets the height of the image
<img height="125" />		Height in pixels
borderSets the border size
<img border="1" />		Border size in pixels
altAssigns alternate text to the image that text-only browsers can see
<img alt="Image of Sequoia's Seal" />		Descriptive text
The image tag does not have a closing tag - even though it has attributes. However, XHTML requires a closing "/" in the tag.

 

Background Images
The <body> tag is used to display a tiled background on a web page (instead of a color). The attribute for background is: <body background="images/stucco.gif">. Tiled images are small graphics that are printed across the page multiple times.

 

Assignments:

  1. Place the Sequoia Seal image on your seal.html page.
  2. Practice placing the image at least three more times using the align attribute (see handout). Which placement do you like the best? Why?
  3. In the last paragraph in seal.html, create a link to Sequoia High School. Example:
    "The name <a href="http://www.sequoiahs.org/">Sequoia High School</a> is written around the seal. Beneath the giant Sequoia Redwood appears the word UNALIYI, which is the Cherokee word meaning Place of Friends."
  4. Go to the Web Resources page and search for a pleasing (not overpowering!) background for seal.html.
  5. Go to the Web Resources page and search for appropriate images on the web to place on one of your other pages (e.g., books, computers or school-related graphics for your schedule.html page). Remember to site the source of the image on your page. (It is easy to copy the URL and paste it onto your page: select the URL and press Ctrl-C; go to your web page and press Ctrl-V.)
  6. Show Mrs. Givens your completed pages.

Back to the Week 4 Schedule