Pre-lab

Pre-lab Reading

• Textbook pp 207-222

Pre-lab Activity

1. exercise 11-1
2. exercise 11-2

Use reading and activity to answer the Pre-lab Questions. Be sure to complete the activity and answer the pre-lab questions in Blackboard before the start of the lab period.

In-lab

Preparation

• Always make sure you save your lab files in the appropriate folder, i.e., lab5.
• For file names, only use lowercase letter and never use spaces.

1. Formatting Menus

• Download menu.html and save it to your lab5 folder.
• Use the menu.htmlfile and complete exercise 12-1 through 12-7 using Notepad++. Refer to pages 225-258 for help.
• It is OK to peek at the solution if you get lost, but do not look at it until you try to do all parts of the activity.
• Make sure menu.html validates at http://validator.w3.org/#validate_by_upload
• Show your instructor that menu.html is finished and validates.

2. Font & Text Questions

• In Notepad++, create a webpage called lab5.html
• Remember to include the basic HTML document structure shown on page 56 (Figure 4-7).
• Answer the following questions and use HTML and CSS to appropriately markup and style your answers according to the instructions in the questions below.

• Font & Text:

  1. What is the name of the CSS property for changing the font type. Use the HTML span tag with class="answer" to markup your answer below. Then use embedded CSS so that .answer uses the Georgia font.
  2. What is the name of the CSS property to make the font italic. Use the HTML span tag with class="answer" to markup your answer below. Then use embedded CSS so that .answer will be italic.
  3. What is the name of the CSS property to change the text color. Use the HTML span tag with class="answer" to markup your answer below. Then use embedded CSS so that .answer will have red text.
  4. What is the name of the CSS property to make text bold. Use the HTML span tag with class="answer" to markup your answer below. Then use embedded CSS so that .answer will have bold text.
• Save your lab5.html file. We will answer more questions at the end of the lab.

3. Adding Color

• Download bistro.html and save it to your lab5 folder.
• In your lab5 folder, create a sub-folder called images.
• Download the following pictures into the images folder you just created:
  blackgoose.png
  bullseye.png
  goose_shadow.png
  gooseshadow.png
  plaid.png
  purpledot.png
  
  
• Use the bistro.htmlfile and complete exercise 13-1 through 13-7 using Notepad++. Refer to pages 265-295 for help.
• It is OK to peek at the solution if you get lost, but do not look at it until you try to do all parts of the activity.
• Make sure bistro.html validates at http://validator.w3.org/#validate_by_upload
• Show your instructor that bistro.html is finished and validates.

4. Color & Background Questions

• Continue to answer the following questions in yourlab5.htmlfile.

• Font & Text:

  5. What is the HTML color code (#hexcode) for yellow. Use the HTML span tag with class="answer" to markup your answer below. Then use embedded CSS so that .answer will have a background color of yellow.
  6. What is the CSS property for specifying a background image. You do not have to use this property, just name it.
  7. What is the CSS code to position a background image so that it does not repeat and is centered horizontally at the top. You do not have to use this property, just write the code.

Deliverables

Upload lab5.html to Blackboard.