Lesson Plan

Objectives

• Learn how HTML handles color

• Create a color scheme for a Web page

• Insert a background image into a Web page

• Create a spot color

• Learn about different image formats

• Learn how to control the placement and appearance of images on a Web page

• Work with client-side image maps

Coursework / Lab Work

• Table practice

• CTM practice test for chapter 3

• Continue to work on checkpoint #1. Reminder: checkpoint #1 is due today.

• If you have completed the requirements, you may wish to get a jump start on the second checkpoint by adding some of the commands to your HTML manual from tutorial 3 & 4.

• From the New Perspectives HTML manual (tutorial #3):  

  • Work your way through the New Perspectives manual for Tutorial #3.

  • Quick checks on pages 3.17, 3.33, and 3.44

  • Begin case problems 1, 2, 3, & 4 from pages 3.46 - 3.52. 

  • If you're ahead, attempt using image maps as part of the case problems

Home Work

• Quiz next day.

• Work on checkpoint 2.

• Read chapter 3 of HTML manual.
• Case problems from chapter.
• Previous case problems.

Demo

COLORS AND FONTS

• Color names - page 3.5, appendix A

• Color numbers - page 3.6-3.7

• Color picker software

• Using Paint Shop Pro

• Color picker web sites - page 3.7   i.e. http://www.hidaho.com/colorcenter/

• Color schemes using the body tag - BGCOLOR, TEXT, LINK, VLINK, ALINK - page 3.8 - 3.9
  

• FONT - Size, comparison to H# - Page 3.11

• FONT - Color - 3.11, 3.12 (spot color)

• FONT - Face - 3.12
  
• Background images - page 3.13, rules page 3.14, sites 3.15

Exercise (25 min):

1. Install color software & test with a mock up web page

2. Try at 3 of the web sites & test with a mock up web page. Which site offers the best features?

3. Create a sample document that contains hyperlinks to experiment with different colors

4. Experiment with Font tags

5. Experiment with different textured backgrounds (site list on page 3.15)

IMAGE TAG

• Using ALTernate text - Page 3.25 - 3.26

• Controlling alignment and text wrap - ALIGN - pg 3.27 - 3.29

• Controlling spacing (horiz/vert) HSPACE, VSPACE - aspect ratios - pg 3.29 -3.30

• Image size - WIDTH, HEIGHT- pg 3.30 - 3.31

• Tips - page 3.32

• Dithering - pg 3.32 - 3.33

Exercise (15 min):

1. Save an image from the Net on your floppy disk.

2. Experiment with text wrapping options.

3. Experiment changing the width & height

IMAGES

• GIF files - 87, 89a - pg 3.18

• Interlaced vs Non-interlaced pg 3.18 - 3.19

• Transparency - page 3.19 - 3.21

• Demo creating a transparent GIF - Paint Shop Pro

• You can use transparent GIFs as a way of controlling the layout of text and images on your Web page. Here's how you do it:

1. Go to your graphics software package and create an image containing a single color.

2. Resize the image to 1 pixel wide by 1 pixel high.

3. Save the image as a GIF file with the single color you designated in step 1 as a transparent color.

• JPEG files - pg 3.23 - 3.24

• JPG vs GIF - pg 3.25

Exercise (25 min):

1. Create a GIF with a transparent background

2. Create a spacer GIF - use spacer to align text

3. Create a GIF in both interlaced and noninterlaced format

4. Convert a GIF image to JPG format. Compare the size of the files

5. Save a JPG file under different compression options. How do the size and the appearance of the images compare?