Exercise: Add Font Formatting
Create a page using changes in several fonts, a few font sizes, and vary the color of the fonts.

Vary the font to make the document on GIF versus JPEG more visually interesting.
  1. If you don't have a copy of the file GIFvsJPEG.html, copy it from my directory.
    cp ~nblachman/html/GIFvsJPEG.html ~/public_html
  2. Change to your public_html directory.
    cd ~/public_html
  3. Using your favorite editor or XEmacs, edit ~/public_html/GIFvsJPEG.html  or ~/public_html/GIFvsJPEG2.html
    xemacs GIFvsJPEG.html &
  4. Add font tags. Use at least one change each of font face, size, and color. Here are some suggestions for things to try:
    • Create an enlarged first letter in each paragraph (a drop cap) by using a different, larger font face around the first letter of the each paragraph.
    • Substitute a larger, sans serif font face in a different color for a headline tag.
  5. Save the file.
  6. Examine your page in your browser.
    1. In the location window of your browser, type
      vaweb.valinux.com/~user/GIFvsJPEG.html
      to view your page, where "user" is the name you use to login to your system.
    Or
    1. From the File menu in Navigator, choose the "Open Page" from the File menu. The Open Page dialog box appears
    2. Click the "Choose File" button. The file browser appears.
    3. Navigate to your public_html directory. The name of your html file will now appear in the Files box.
    4. Click on the file and then hit the return key or click the "OK" button at the button left of the dialog box. Then click "Open in Navigator" in the Open Page dialog box. You should always check your work in your browser.

VA Linux Systems logo

   
I would appreciate comments, corrections, and
suggestions for how I can improve this course.

Nancy Blachman
Variable Symbols, Inc.
356 Bush Street
Mountain View, CA 94041-1332
650 966 8999
650 966 8998 fax
nancy- at -variablesymbols.com

If you want to learn how to search effectively using Google, visit Google Guide, which you can find at www.googleguide.com.