Lab 4: Tables & Forms

Goals

Learn about...

  • How to format tabular data into tables
  • About the importance of nesting in HTML tables
  • How to created basic input forms
  • About the importance of attributes in HTML forms

Key Concept

HTML tables are used to format tabular data and should not be used to create page layouts. When tables are properly formatted, programs and applications can more easily parse and extract correct information from the table.

HTML forms are used to create user interfaces. When forms elements are appropriately labeled using name and id, applications can easily extract submitted information.

Pre-lab

Pre-lab Reading

  • Textbook pp 133-144

Pre-lab Activity

  1. Textbook exercise 8-1
  2. Textbook exercise 8-2
  3. Textbook exercise 8-3

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

Info

Note that these instructions are not always detailed. You must figure out some of the detail by reading the textbook and investigating online sources. You can always ask your instructor for help. If your instructor is busy helping others, raise your hand to make sure the instructor sees that you need help, but then put your hand down and go back to work. As you wait for help, try your best to solve the problem on your own by reading the textbook.

Working with others

You can work together with a partner during lab. But after the lab session is over, you must complete this activity independently. Be sure to email your partner relevant files before the end of the lab session.

You should not collaborate with anyone outside of the designated two-hour lab session.

Preparation

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

Textbook Exercises

It is very important to read the pages as you do the exercises. While you may be tempted to download the solution without doing the reading and actual exercises, the purpose of this work is to learn concepts and details that you will need to know to complete the rest of the lab and to answer exam questions.

HTML Tables

  1. Use pages 133-144 as a reference and complete exercise 8-4 on page 145 using Notepad++.
  2. Remember to include the basic HTML document structure shown on page 56 (Figure 4-7).
  3. Make sure table.html validates at http://validator.w3.org/#validate_by_upload
  4. Show your instructor that table.html validates.

HTML Forms

  1. Use pages 147-173 as a reference and complete:
    • exercise 9-1 be sure to read the directions on the next page
    • exercise 9-2 give each checkbox item a value
    • exercise 9-3
    • exercise 9-4
  2. Make sure contest_entry.html validates at http://validator.w3.org/#validate_by_upload
  3. Show your instructor that contest_entry.html validates and works as expected.

Activity

You can work together with a partner during lab. But you must complete this part of the lab on your own. You should not collaborate with your partner outside of the designated two-hour lab session.

Image Editing With GIMP

In this activity, we will take a full-sized landscape image and scale/crop it into a square (120 X 120px) thumbnail-sized version. Then we will create a basic web page that embeds the thumbnail and links to the full-sized version.

  1. Download siena.jpg by right-clicking and selecting Save Link As..Be sure to save it in your lab4 folder.
  2. Open the program called "GIMP 2" by clicking on the Start Menu and typing "gimp" to find the program.
  3. Using GIMP, open the file (File --> Open) you just saved
  4. Scale the image (Image --> Scale Image...) so that it is exactly 120px wide by 120px high. The aspect ratio is locked, so you have to unlock the keychain icon next to the width and height.
  5. Notice that the image looks squeezed. The original image had a width of 1000px and height of 600px which is 5:3 aspect ratio. To make a square (1:1 aspect ratio) thumbnail image, we have to use a technique called "scale and crop."
  6. Restore the original image by undoing (Edit --> Undo Scale)
  7. Scale the image again (Image --> Scale Image...) but this time keep the keychain icon locked and set the height to 120px. Notice that the width is automatically set to 200px to keep the original 5:3 aspect ratio.
  8. The image should be resized to 200px X 120px.
  9. To make the image square but not squeeze the aspect ratio, we will crop out the left and right side.
  10. In the Toolbox, click on the Rectangle Select Tool, which is the very first tool on the top left.
  11. Use the Rectangle Select Tool to draw a box on the image.
  12. In the Tool Options, which are below the Toolbox, you can precisely set the position and size of the selection box. Normally, tool options are displayed in a window attached under the Toolbox as soon as you activate a tool. If they are not, you can access them from the image menu bar through (Windows → Dockable Windows → Tool Options) which opens the option window of the selected tool.
    Set the position to 40 and 0, and set the width and height to 120. This should position a square selection box directly in the center of the image.
  13. Crop the image (Image --> Crop to Selection)
  14. Export the image (File --> Export) but be sure to call it smallsiena.jpg and make sure it is saved in your lab4 folder.
  15. Finally, create a basic web page called siena.html that embeds smallsiena.jpg using the img tag and use the a tag to make the image a hyperlink to the full-sized image (siena.jpg).
  16. Make sure siena.html validates at http://validator.w3.org/#validate_by_upload
  17. Show your instructor that siena.html displays the thumbnail image and links to the full-sized image.

Deliverables

Upload contest_entry.html to Blackboard