COMM 380: World Wide Web Design and Production

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

Assignment 5: Text for the Web

There are two kinds of type for the web: HTML and graphical. In this assignment you will create text using both methods--Microsoft NotePad for HTML type and PhotoShop for graphical type. HTML type uses commands to create the typeface and attribute choices for a document. Graphical type is often favored because users cannot alter its appearance.

You first need to know something about typography. Web sites that feature typography include (use search engines for others):

www.will-harris.com/type.htm | http://www.redsun.com/type/ | commfaculty.fullerton.edu/lester/writings/nsdemo.html | www.pixelfoundry.com/Toms/index.html | www.raygun.com

In addition you might want to review pp. 249-268 in Lynda Weinman's designing web graphics.3 and pp. 99-126 in Paul Lester's Visual Communication. Typography is the sound track of a design. The choices you make in typefaces and their attributes affect a readerıs impression of your work. Typographical choices must match the content. There are six typeface families. Each one has its own style and message. Make sure you select the right typeface for the right purpose.

: This type family is the original typeface from Gutenberg. It has a serious, religious message. It should be used sparingly, if at all.

: This type family is used for formal occasions--wedding announcements and diplomas. It is hard to read on the screen.

: Another type family with limited appeal. It is sometimes used, hover, to simulate typewriting on the screen. A popular typeface is called courier.

: This type family covers any typeface that doesnıt fit into any particular family. It often conveys a playful spirit.

: This type family is quite popular with web designers because it has a modern feel and is easy to read on the screen. Popular typefaces are helvetica and arial.

: This type family is popular because it is so easy to read. As long as your type size is large, it is a good type to use on the screen. Times is a popular roman typeface.

In addition to the type family choices, you must decide upon a number of attributes including: size (body and display), color (background and type), font (boldface, italic, etc.), text block size (column width and length), justification (right, left, centered, etc.), and white space (kerning, leading, etc.).

The HTML version will retain a conservative, book-like style while the graphical version will have the dynamic vibrancy of an MTV music video. Name the conservative version assign5c.htm and the MTV version assign5m.htm. Turn in a print-out of your HTML files with your disk. Budget enough time during class so I can upload your files to the School's server. Use the copy below:

"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

HTML Text Hints

HTML Text Hints

  • In the Assessories folder, start up Microsoft NotePad with a new file.
  • At the least, use <font color="specify color" size=X face="typeface name"> Put in your text and then end with </font> (NOTE: You can get names from Edit and then Set Font)
  • Select, copy, and paste the paragraph in the contents portion of your file.
  • A heading, normal width column, and italics for the title would be nice.
  • Name and Save this file as assign5c.htm.
  • Return to Netscape and use Open File to see what your html file looks like on the Web. Return to your NotePad file, make changes, save those changes, return to Netscape, reload or refresh the file to see your changes. Continue this back-and forth procedure until you get something you're happy with.
  • Remember the rules for HTML files:
    <HTML>
    <HEAD>
    <TITLE>Write a Unique Title Here</TITLE>
    <META NAME="Type Your Name Here" CONTENT="Type a Brief Description Here">
    <META NAME="KeyWords" CONTENT="Type At Least 5 Keywords Divided by Commas">
    </HEAD>
    <BODY BGCOLOR="Color" TEXT="Color" LINK="Color" VLINK="Color" ALINK="Color" BACKGROUND="image file name (if desired)">
  • Your file contents go here.
  • At the end of the file the following commands MUST be included:
    </BODY>
    </HTML>

    Graphical Text Hints

  • Start up PhotoShop on your computer. Create a New file about 9" x 7".
  • Make sure you can see the Levels (or Layers) dialog box.
  • Use the Marquee tool to create a background area by clicking and dragging the mouse.
  • Click the mouse in the colored area and select a color for the background.
  • Use the Paint Bucket tool to fill the Marquee area with that color.
  • Create a New Level (or Layer).
  • Pick a color for the text that you will put into that colored area.
  • Select the Type tool and click in your work area. Select your typeface and attributes and type in as much text as you want. Press the Enter key. Move the text where you want it.
  • Create a New Level (or Layer), create a background color box, create a New Level (or Layer), create text, and move it where you want it. Repeat this procedure until you have a design that youıre happy with.
  • Save the file in RGB Mode using the convention, wildtext.jpg.
  • From Image, select Mode then select Indexed Color to flatten the layers. Return to Image and Mode and select RGB. Under File select Save As and save this file in JPG format.
  • In Microsoft NotePad, create a New file. REMEMBER the HTML file rules.
  • Name and Save this file as assign5m.htm in the same location as your picture file.
  • Type the following HTML command into your file: <img src="wildtext.jpg">.
  • Use the Open file in Netscape to view your graphical text. Make changes as appropriate.