Font & Text Assignment Explained

Listed below are the steps you need to follow to complete this week's assignment.

1. Read Chapter 3 "Stylin Fonts and Text" in your textbook. The author provides an overview of font families and explains how you can control the font family for the entire page. Font size is also discussed with an emphasis on how size is inherited. The remaining font properties are explained. Next come text styles, there may be a few new items here such as vertical-align or word-spacing. At the end of the chapter there is a sample of how text and font properties can be applied.
   
   For some of you this will be an easy read, for others you may want to try it in 2 stages: pages 67-84 and then pages 85-99
   
2. I recommend you tackle the DVD in 2 stages also. Open the DVD > css-part1 > start-here.html > Font lesson. Here is a list of what you need to watch first.
   * font-family
   * font-size
   * fixed font-size
   * base 10 font-size
   * font-properties
   * font-shorthand
   * font sampler
   * stretch & shrink fonts
   * "em" demo
   * files used in this lesson
3. The videos and web pages closely follow the information covered in the textbook. After watching the movie, the Web page will have instructions and code samples you can use. You can copy the code from the Web page and paste it into your HTML editor to avoid code typos. If you have questions on the general concepts please send me a note, or post it to the class message board.
4. Next create files that illustrate the difference between text sized in a relative vs absolute manner. In creating these examples you will be modifying the size of the font in the body style, while the font size settings for all other styles remain the same.
   
   Refer to the font size, fixed font size, base 10 font size and stretch and shrink lessons on the DVD. Create these files:
   * relative.html
   * relative-big.html
   * relative-sm.html
   * fixed.html
   * fixed-small.html
   
   Place them in the "samples" folder and validate the code.
   
   This exercise uses several files, it will be a fairly easy process to make these 5 files by saving the first file under a new name and changing the embedded css code.
   
   
5. My advice to students is to do the required homework first and then try to make all the examples on the DVD work. After completing the stretch and shrinking font examples try to make a page with the font sized in base 10 or use the font shorthand to see if it works. These activities will not be turned in, but they will help you understand the concepts. For a shortcut to all the code presented in this lesson access the files used in this lesson page.
   
6. Take a break, go outside, maybe a nap is in order :->
   
7. Next you need to begin working on the "Text" lesson. Here are the major subjects covered in this lesson:
   # text-snake
   # text-indent
   # letter-word spacing
   # text-decoration
   # text-align
   # line height
   # text-transform
   # vertical alignment
   
   Watch the video demonstration and then review the Web page for the code that is used in each lesson.
8. The homework from the text lesson is a page which displays text which has displays 3 types of vertical alignment.
   
   # assign a value to the vertical alignment property to raise or lower the text from the baseline.
   # use the <sup> tag
   # use the <sub> tag.
   
   Use the page on the DVD as a model. If you are having a hard time making the code work, send me the URL of the page with a detailed description of the problem. Save this file as "vert-alignment.html" and place it in the "samples" folder. Don't forget to validate.
   
9. In the font and text lesson there are examples of how you can modify the "live" site using font and text properties. I recommend that you try my code to see if it works for you, but feel free to create a page which is not an exact duplicate of my "live" site. Get a little wild and crazy and change out the font family, size, or color.
   
   The "live" homework for this lesson is to add 5-7 font or text properties to the "live.css" file. Open the "live.css" file from last week and add more styles to fulfill the assignment requirements. You may have to add some additional HTML to the "live-site.html" page, that depends on your design. Save the revised pages in the "live" folder. Validate your code.
   
   Many students ask me if they should rename the live HTML and CSS pages for each lesson. I do not require it, and feel it just ads to the confusion of file organization. When working in industry you would just keep adding to the CSS file until it did what you wanted, and so I recommend you follow that model.
10. Now open the "homework.html" page and activate the links for the font and text lesson. This will require you to create a link to the 5 files which were used to show how fonts stretch and shrink, a link to the vertical alignment page, and links to the "live" html and css files.
    
11. Please upload the files (including your modified homework page) onto "student"
    Don't forget to use a Web browser to view your homework page and click on the links to make sure the homework page links to the new files you have created.
12. That is all you need to do. I have created a "student work" page which has links to everyone's homework page. I will use that page to grade your work.
13. If you have the time, return to the DVD and make a "text snake" and try recreating the hanging indent by reviewing the "text indent" lesson.
14. One final note - there is an option for extra credit this week. I will assign 10 points if you have time to create a "font sampler" and a "text sampler". These pages are intended to be a Web page of notes about the various font and text poreprties and how they work. Sometimes writing this out on a Web page helps you remember it.
    
    If you plan to do the extra credit this week, add links on your homework page to these 2 pages, "font-sampler.html" and "text-sampler.html". Place these pages in the "samples" folder.