Page Banner

Lesson Practice 3-1: Working with Color


Task 1: Working with Background and Text Colors

  1. Open template.htm in notepad++.
  2. Create a new folder in your Lesson site file structure, naming it color.
  3. Save this file in your new folder as colortest1.htm.

  4. Add Content:
    1. In the title element, add the title: Color Test
    2. Create an h1 element with the same text.
    3. In the opening <body> tag, add the style statement:
      style="background-color: a medium-light named color; color: navy; font-family: arial;"
    4. Add a paragraph element with the text:
      A style attribute in the body of the HTML document <b />
      has changed the background and text color from the default.
    5. On the next line, add a paragraph element with the style attribute as "color: white;"
    6. Between the p tags, type:
      A style change caused a test of white text <br />
      on the colored background.
    7. Add another paragraph element containing the text:
      Without another style change, <br>
      the text reverts to the default color.

  5. Save the file and preview your page in the browser. Make any adjustments needed and save the file.


Task 2: Working with Background and Text Colors

  1. Open template.htm in notepad++.
  2. Save the file in your color folder as colortest2.htm
  3. In the title element, add the title: Color Comparisons
  4. Create an h1 element with the same text.
  5. In the opening body tag, use a style attribute to set the bgcolor attribute to teal, using the similar coding as you used in Task 1.

  6. Add and color a table:
    1. Create a 2 x 2 table.
    2. Add attributes to make the cells have a height and width of 50.
    3. Add the text Sample 1, Sample 2, Sample 3, Sample 4 to the four cells, centering the text vertically and horizontally.
    4. Use style attributes in the opening td tags to:
      • Make Sample 1 'peachpuff' background color, and font color '800000'.
      • Make Sample 2 '0000cc' background color, and font color 'white'.
      • Make Sample 3 'darkorchid' background color, and font color 'gold'.
      • Make Sample 4 'indianred' background color, and font color 'darkred'.

  7. Save the file as colortest2.htm, and display it in the browser.

  8. Resave the file as colortest 3.htm.
  9. Change the title and h1 text to read My Color Comparisons.
  10. Experiment with other combinations of text and background by changing the bg and font colors. Refer to the Colors, Colornames, Colorvalues pages in W3Schools for guidance on the color names and numbers.
  11. Save the file with your new color choices, and open it in the browser.
  12. Be sure all your final choices are legible, make any adjustments needed and resave.


Task 3: Creating a Color Table

  1. Open template.htm in notepad++.
  2. Save the file in your color folder as colortable.htm
  3. In the title element, add the title: Color Table
  4. Create an h1 element with the same text.

  5. Create a page that shows the 16 original named colors organized in a table.
    The table should
    • have a header row that goes across the table
    • contains an appropriate title for the table, spanned across the columns.
    • contain information in each cell naming the background color as well as any changes you needed to make to the text to make it visible
    • add width and/or height attributes to the table to make the cells wide enough to easily see the colors with sufficient background showing around the text.

  6. Below the table, add an appropriate link to the site page you found the color information for your chart.
  7. Save and preview your file. Make any adjustments needed, and resave.


Task 4: Add the Color Section to your Index file

  1. Open your index.htm file.
  2. Add a new section (a new definition term) to your categories of files: Using Color
  3. Add the files you just made as the definitions (dd) to under the new heading.
  4. Create the hyperlinks to the new files, using the same pattern of link text and title attributes as your other links.
  5. Save the file and test your links.

  6. Publish your finished files in your folder of the class Share file.
  7. Open the index file in the new location and test your links.

 

bonom bar