Exercise One

In this exercise, you will take assorted images and code them into an HTML page. You will also experiment with IMG tag attributes and make graphical hyper-references. All necessary exercise files may be downloaded from the links below.

Download Exercise Files:
Stuff-It Archive (.sit -- 63K)
Zip Archive (.zip -- 63K)

  1. Write down the width and height, in pixels, of each of the exercise images (from the stuffed/zipped archives above). To do so, either drag-and-drop the images one by one into a browser window from Netscape Communicator and read the WIDTH X HEIGHT readings from the drag-region of the browser window, or open the images in Adobe Photoshop and select the "Image/Image Size" menu item.
  2. Create a new folder named "exerciseMod3".
  3. Create a folder named "graphics", and place it inside of your "exerciseMod3" folder. Place all three images into this "graphics" folder. Note: images for a website are commonly stored together in a "graphics" or "images" folder to prevent all of the site files from being stuffed together in the same folder.
  4. Create an HTML page named "myImagesPage.html". Save it into "exerciseMod3" folder.
  5. Place "capitalA.gif" into your HTML page, invoking the image in your "graphics" folder, using the IMG tag with SRC, WIDTH, and HEIGHT attributes. Test in browser.
  6. Enclose the IMG tag within <p></p>; this is a common way of setting images off from adjoining text or information.
  7. Place "capitalB.gif" into the page, using the IMG tag with SRC, WIDTH, and HEIGHT attributes. Test in browser.
  8. Place a DIV tag around the IMG tag for "capitalB.gif", and set the ALIGN attribute of the DIV tag equal to "center" (DIV will set the image off from whatever else is to come on the page). Test in browser.
  9. Place "elizabeth.jpg" into the page, adding SRC, WIDTH, and HEIGHT to the IMG tag as before, and include the ALT and ALIGN attributes as well. Set ALIGN equal to "right" and ALT equal to "Elizabeth". Test in browser.
  10. Type two paragraphs of text (each marked with the <p></p> tag) after the third image. Test in browser. Notice how the text wraps around the picture?
  11. Change the ALIGN attribute to "left" for Elizabeth. Test in browser.
  12. Set VSPACE and HSPACE for Elizabeth to 10. Test in browser.
  13. Mark the first and second images (capitalA and capitalB) with A (anchor) tags to make them hot links. Make the first image a hot-link to "http://www.yahoo.com/" and the second image a hot-link to "http://www.macromedia.com/". Test in browser.
  14. Set the BORDER attributes for the IMG tags for "capitalA.gif" and "capitalB.gif" equal to "0". Test in browser.

View Solution

Main Menu

Copyright © 2001 Michael Masumoto. All Rights Reserved.