COIN 65 Logo
This page contains the materials needed for Internet Technologies - COIN 65 taught by Sandi Watkins.
View the forum for updates and announcements. View my blog for the same!
Sandi's Blog | Schedule | ETUDES | Forum | Class Sites | Syllabus | Resources | CTIS | Foothill
Homework 4A - Font and Text Options (15 points)

Due Date: Wednesday, February 7, 2007 by 10:00 PM (week 5)

This assignment addresses various aspects of using Font and Text properties in CSS designs.

Homework Guidelines

Specifics

This homework will give you practice with fonts and text. You will experiment with various font options to see how they behave in a variety of situations. You may use embedded or linked CSS, whichever you find easier.

You will be using the Pixy favelet tool throughout this assignment. I recommend that you bookmark Pixy in each of the modern browsers you use for testing.

Remember to comment your work! In addition to the general good practice of commenting the items you put into your code, this week you will write comments about your findings at the top of either the CSS and/or HTML documents, as appropriate to tell me what you observed while doing the assignment. Your notes should prove useful to you later in your career when you need them!

Remember, there are lots of ways to approach a problem, especially with CSS. The more you learn and experiment, the more options you have. Feel free to add additional experiments to the ones listed here.

  1. Create a baseline sentence for testing. Make it something you will enjoy seeing many times!
  2. Create a new document named font_practice. Create a heading called "Generic" and set the baseline sentence in the 5 generic font families. Compare the results in several browsers.

    In a separate sentence, note any findings. Use Pixy and note any size differences from one browser to another. You might see differences in which alternate fonts are chosen or in the leading.

  3. Create another heading called "Common Fonts." Choose 5 common fonts and set the sentence in each of the 5 fonts. Use only one common font per sentence. Do not set any generic fonts. Compare in several browsers.

    In a separate sentence, note any findings. What happens if the named font isn't on the computer? Use Pixy to see what font is substituted.

  4. Create a heading called "Keyword Sizing." Style the sentence using each of the seven size keywords in conjunction with a default generic font. Compare in several browsers. Check the sizes of each using Pixy.

    In a separate sentence, note any findings.

  5. Example of how part of your page might look...

    Example of Homework 4 font_practice

  6. Create a new document called percent_practice with a heading called "Percentage Sizing." Create HTML markup to display each of the following style settings.

    • Set the body text to 100% using the arial font (no generic).
    • Set h1 to 1.2 em
    • Set h2 to 1.1 em
    • Set h3 to 1 em
    • Set p to .76 em
    • Set h4 to .76 em
    • Set ul to .76 em
    • Set a to .76 em
    • Set ol to .5em
    • Compare in several browsers. Check the sizes of each sentence using Pixy. Change the font to Palatino and see what happens. Try other fonts.
    • In a separate sentence, note any findings. What happens to the links? What happens when you change the font?
    • In the same document, write a style that will force the link in the P tag to keep the same size as the tag it resides in.
    • Now, change the body size to .75%. ...to 115%. What happens?

    Example of how part of this page might look...

    Example of HW 2

  7. In your original document, font_practice, create a heading called "Styles and Variants."

    Note: for the emphasis and strong emphasis, use HTML tags.


    • Set up a DIV for this section called "variant". Set the font to arial, 1 em.
    • Set one sentence in italic, one in emphasis, one in bold and one in strong emphasis. Compare in several browsers. Any differences?
    • Set a sentence in small caps. Compare in several browsers. Try several different fonts. Note any differences?
    • In a separate sentences, note your findings.
  8. Also in your original document, font_practice, create a heading called "Absolute Sizing." Style your sentence using a default generic font and set it to each of the following sizes: 12 pixels, 12 points, 2 picas, 12 millimeters, and 2 centimeters. Compare the results in several browsers. Use Pixy to check the size of corresponding sentences in each browser. In a separate sentence, note any findings. What size would you have to set each unit to have them all be the same size on the page? ARRGHH!! Never mind!
  9. Create a new document called text_practice.

    • Set the background color to white and set a text color for the body.
    • Create a default paragraph to practice with.
    • Set one paragraph to a text indent of 5 ems.
    • Set one paragraph to a text indent of -5 ems.
    • Set up a DIV with a text indent of 3 ems and put a paragraph, a heading and a list inside. What happens?
    • Create a 3-word h2 heading. Set the letter spacing to 3 ems and the font to Georgia.
    • Create another 3-word h2 heading. Set the letter spacing to -.4 ems. What happens?
    • Create another 3-word h3 heading. Set the word spacing to 3ems. What happens?
    • Create another 3-word h3 heading. Set the word spacing to 1.5ems. What happens?
    • Set a new paragraph to 1.0 line height.
    • Set another new paragraph to 1.5 line height.
    • Set another new paragraph to 2.0 line height.
    • Set another new paragraph to 3.0 line height.
    • Set another new paragraph to .75 line height. What happens?
    • In a separate paragraph, note your findings.

    Example of how part of your page might look...

    Example of HW 2

  10. Save, test, and validate your documents.
  11. Upload your week_4 folder to the server.
  12. Create a link to homework_4 from your Home page.
Top | Sandi's Blog | Schedule | ETUDES | Forum | Class Sites | Syllabus | Resources | CTIS | Foothill
This site is best viewed with a "modern" browser - Firefox, Netscape, Opera, Safari (not IE 6 or below)
For best results, install the following plug-ins: Adobe Acrobat Reader, Quicktime, and RealAudio.
Copyright © 2006-07 Sandi Watkins & Greg Mcilhiney
Internet Technologies Department / Computers, Technology & Information Systems Division
Last Update: Saturday, April 7, 2007 at 7:31 AM