Fonts and Colors

Tools

The CIE 1976 color chart .

Some colors can be specified by their name. Here are the HTML5 color names. These colors and others can also be specified by 6 (or 3) character HEX codes (preceded by a #). The color picker and color mixer tools can be used to find the code for a particular color.

To validate your CSS files: http://jigsaw.w3.org/css-validator.

Lab 8

More JavaScript

1. Copy hello.html from LAB7 to a new LAB8 directory.
2. Replace the following line in the script element of the new hello.html page:
           p . i n n e r H T M L = g r e e t i n g ;
   with the following four lines of JavaScript:
           v a r   b r = d o c u m e n t . c r e a t e E l e m e n t ( b r ) ;
        v a r   m s g = d o c u m e n t . c r e a t e T e x t N o d e ( g r e e t i n g ) ;
        p . a p p e n d C h i l d ( b r ) ;
        p . a p p e n d C h i l d ( m s g ) ;
   
3. Save the file, open in a browser, and click on the Hello World text. Type your name in the popup window. Then hit Enter.
4. Now click on your name and enter someone else's name.

Styling Tony's Journal

1. In your LAB8 directory, download and extract journal.zip.
2. Edit the journal.html file in the journal directory
   • Specify the h1 font-family to be Emblema One. (Hint: use the @font-face pseudo-rule as indicated in the text.)
   • Specify default, h1, and h2 font-sizes.
   • Change the h2 font-weight to normal.
   • Change the blockquote font-style to italic.
   • Change the h1 and h2 color to orange (#CC6611).
3. Use the validator, http://jigsaw.w3.org/css-validator, to check that your pages meets W3C standards.
4. Edit the index.html file in your LABS directory to have a link to your revised hello.html and journal.html pages.

Continue to style your About Me site

1. Edit the project.css file in your PROJECT directory.
2. In the rule for the body element, set the default background-color, font size, and font family property values.
3. Define font sizes for h1, h2, and h3 elements.
4. Make sure that the CSS is valid.
5. Make sure that all of your HTML pages attach this CSS file.

Synchronize your website to your thumbdrive

Check with Bowen that the work you have done is visiable on your web site, today, before leaving class.

Always turn off your computer and screen before leaving the room.