COMM 380: World Wide Web Design and Production

Dr. Paul Martin Lester, Professor
California State University, Fullerton
714/278-5302; Email | Homepage
Office: H-324F

Assignment 6: Images for the Web

Look on the Web for free clip art (or take a picture and scan it yourself) to add to the conservative version of the text you used for assignment 5. One picture will be linked to another Web file and the other picture will be unlinked.

Here is the paragraph in case you forgot:
"While the literature of some pencil manufacturers, themselves descendants of the German industry, claims that clay was used in German pencil leads as early as the 1820s, it was certainly not used widely, if at all, for export. It was only after he took over his father's A.W. Faber pencil factory in 1839 that 'Lothar Faber occupied himself with opening up business connections throughout the civilized world.' Thus it is most probable that German pencils were not at all common in America when young Henry Thoreau first sought to improve his fatheršs product." p. 111, The Pencil by Henry Petroski

Assignment specifics:

  • Create a new file in NotePad. Remember the HTML file rules.
  • Include TWO clip art images (or your own work) that are appropriate for the subject of the paragraph.
  • 3. If you find an image on the Web you can use, click the art with the right mouse button to download it and save it on your disk. REMEMBER: Using images without permission is stealing, but in this context, crediting the source of the image (domain name) is enough.
  • 4. There is a trick to help your images download quickly. In PhotoShop, open your images. From Image, select Image size. Set the measurements to pixels for the width and height. Write down those dimensions. From Image, select Mode and then Indexed Color. Click Okay to Flatten Layers and then Okay again to select the default settings. From Image, select Mode and then RGB Color. Save the pictures as JPG files. Use the name "pictureone.jpg" and "picturetwo.jpg". Use the dimensions of the images you wrote down in the width and height command tags below.
  • One of the images must be linked to a source on the Web while the other is unlinked. The tag structure for an unlinked picture is <img src="picturefilename"> The tag structure for a linked picture is <a href="url of the destination"><img src="picturefilename"></a>
  • To create a border around your picture, use border=# of pixels, to align your text with the image use align=top, middle, bottom, left or right, to create white space around the image use hspace=# of pixels, vspace=# of pixels, to specify the size of your image use width=# of pixels and height=# of pixels (dimensions from PhotoShop), and to show a text name for the picture use alt="description and source"
  • For each picture your img src command tag should include: <img src="picturefilename" border=X align=left hspace=X vspace=X height=X width=X alt="picture of a pencil from www.pencils.com">
  • Write some explanatory text for your linked picture that users will see on the screen.
  • Save the file as assign6.htm in the same place as your pictures.
  • Print out you HTML file and allow time to have your files uploaded to the server.

    Some useful web sites:
    Clip art: www.ecn.bgu.edu/users/gas52r0/Jay/home.html
    Clip art: www.4clipart.com/
    List of hexadecimal colors: www.lynda.com/hexh.html
    General web page design: www.sun.com/styleguide