Pre-lab

Pre-lab Reading

• Textbook pp 133-144

Pre-lab Activity

1. exercise 8-1
2. exercise 8-2
3. 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

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.

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.

1. 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.

2. 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. 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. Show your instructor that siena.html displays the thumbnail image and links to the full-sized image.

3. HTML Forms

1. Use pages 147-173 as a reference and complete exercise 9-1, 9-2, 9-3, and 9-4 using Notepad++.
2. Make sure contest_entry.html validates at http://validator.w3.org/#validate_by_upload
3. Show your instructor that contest_entry.html validates.