• Your course project is due at the end of class on Sunday.
• For your project, using Netscape Composer or HTML, you will create a fictional resume similar in setup to the one found at this site:
  http://www.geocities.com/lucky506/Maria/mariares.htm
• Be sure your real name is hand-printed on this fictional-practice resume before you submit a hard copy of the browser version to Mr. Gordon.

More exercises than can be covered. There are far more exercises here than you could possibly do in a single weekend course. From these choices, Mr. Gordon will select five to be done during class time. However, to earn extra credit, you may do additional exercises of your choice. Or if you are an advanced student who already knows much of the material in the curriculum, you may, with Mr. Gordon's permission, work on many of these exercises on your own, also for extra credit.

Remember name and exercise number. Be sure your name and exercise number appear on all your printed work, and that all your exercises are put in your class-work folder.

Repeating exercise with Composer. Many of these exercises, first done without the aid of an HTML editor, will be repeated using Netscape Composer.

1. You are about to create a Web page that looks like this one at http://www.gordonrichard.com/fall2000/barcelon/index.html
2. Following the steps on pages 34 to 42 in your textbook and using WordPad, create the Web page titled Barcelona, Capital of Catalunya.
3. Add your name as part of Heading 1 so that your work can be identified as belonging to you when printed. Be sure to repeat this step in all the other exercises you do for this class.
4. Save the page as index.html in a folder named barcelon. (Stick to eight or fewer letters, all lower case, for all html documents and folder names in these exercises.)
5. Use both Navigator and Explorer to view your Web page. See page 330 in your HTML textbook for how to test or view your Web page to make sure your HTML codes are displaying as you expect.
6. Print the html code as shown in WordPad.
7. Print the browser view.
8. Staple both print outs together, label them Exercise 1, and place them into your work-folder.
   

Exercise 2

1. Using your Resume code handout, add the following to your Barcelona page done in Exercise 1 above: (a) italics and bold text, (b) three external links to a Barcelona or Catalunya sites, (c) a background image, (d) a graphic.
2. You may use these three pages as your Barcelona links: http://travel.lycos.com/Destinations/Europe/Spain/Barcelona/
   http://www.tmb.net/welcome.html
   http://www.campingelcarlitos.com/
3. Save as index2.html in your barcelon folder.
4. Print the html code as shown in WordPad
5. Print the browser view.
6. Staple both print outs together, label them Exercise 2, and place them into your work-folder.
   

Exercise 3

Read Chapter 3 in your HTML textbook. Then using the information in this chapter as your guide, create the Web page found at this site: http://www.gordonrichard.com/fall2000/chapexer/chapter3.htm

1. Use the View/Source option in your browser to see the HTML codes.
2. Save your work as chapter3.htm in your chapexer folder
3. Print out two versions of your work: the browser view and the source code view. Be sure your name and Exercise 3 identify your work

Exercise 5

Exercise 6

Use the duck2.gif graphic to apply the Adobe Photoshop directions on these pages in your textbook:

1. Make the image smaller by cropping. p 62 and 63
2. Reduce the number of colors. p 69
3. Make part of the image transparent. p 70
4. Fake transparency by making the background a solid color. p 72
5. Interlace the image. p 73
6. Change and save the image in jpeg format. p 76
7. Create a low resolution image from the previous jpeg format image. p. 78
8. Insert your image into a Web page similar to this one your instructor created about a duck he photographed many years ago. At this point only insert the photo once, not yet using it is a hyperlink to a larger sized photo. http://www.geocities.com/lucky506/fall2000/duck/parkduck.htm
9. Save your file as smallduc.htm.
10. Print both browser and source-code view of this file and insert the printout into your folder. Be sure your name and Exercise 6 are written on your work.

Exercise 7

Now add another copy of the same thumbnail duck photo, but this time make it a link to a larger, longer loading photo at this address: http://www.geocities.com/lucky506/assets/duck.jpg

1. Save your file as smallduc.htm.
2. Print both browser and source-code view of this file and insert the printout into your folder. Be sure your name and Exercise 7 are written on your work.

Exercise 8

Create a Web page using two different formats of graphics, one a gif graphic and the other the same graphic but in jpg format. Use as your GIF graphic the coffee.gif file at http://www.gordonrichard.com/fall2000/coffee/coffee.gif. See your textbook Chapter 4 on page 76 for instructions for help on how to "Create JPEG (JPG) Images" from a GIF file, and page 82 in Chapter 5 for help in "Inserting Images on a Page."

Make the JPG graphic a link to site having something to do with coffee. To find such a site, use one of the search engines or just use this site: http://www.citybean.com/tree_to_cup.html

You may look at how your instructor did this exercise by just clicking on the word coffee.

1. Save your file as coffee3.htm.
2. Print both browser and source-code view of this file and insert the printout into your folder. Be sure your name and Exercise 8 are written on your work.

If you have time and for extra credit, try adding the following to your coffee3.htm file:

1. Add a background color (p 98) or a background image. (p 99)
2. Make several words bold and others italic. (p 46)
3. Add an ordered list to your Web page. (p 136)

Exercise 9

Repeat the steps in Exercise 8, but this time substitute the duck2.gif file for the coffee.gif file. Name your Web page duck.htm.

Exercise 10

• Use the tables feature of Netscape Composer to create the Web site found at this address:
  http://www.gordonrichard.com/fall2000/owls/
• You can copy the owl from the above site to include the owl into your own site.
• For help in using tables in Netscape, see this site: http://plato.acadiau.ca/sandbox/tutorial/solutions/Netscape/Composer/inserting_tables.html
• And here, just by clicking on the word table, you can find other examples of sites created by tables.
• Create an owls folder on your Geocities site, and then upload all your Owls files to your Geocities site.
• Print both your browser and source code views of your index file and put your printouts in your folder.

Exercise 11

You will find four photos of the same Canadian goose at this Web site: http://www.geocities.com/imfern156/richard/fall2000/phodisiz.htm

Looking at this Web page, explain under what circumstances you would find it best to use each of the photos in a Web page. Consider, for example, when might it be best to use the smallest photo? the sharpest, but longest loading?

Exercise 12

Your textbook on page 73 tells you how to interlace "an image so that a browser can show it gradually increasing resolutions." The reader can continue reading the text while the image loads bit by bit on a conventional phone modem. Go to this site to see an example of an interlaced GIF89a graphic. http://www.geocities.com/imfern156/richard/fall2000/duckint.htm

View this Web site in both Explorer and Navigator. Then after reading the explanations on page 84 of your text, in note form, tell how to figure out the size (width and height) of a graphic by using both Explorer and Navigator to view an image.

1. Put your notes on a separate piece of paper with your name and Exercise 12.
2. Include your notes in your class-folder.

Exercise 13

Mr. Gordon created this Web site to give you practice in using a variety of HTML tags. Go to this site and then re-create it on your own, using three graphics that are in the aagordon folder on your harddrive. Make changes in the text to customize the site to reflect that you did some original work. Use the View Source Code option in your browser to see the HTML tags.

http://www.geocities.com/lucky506/fall2000/varhtml/varhtml.htm

Exercise 14

Create a Web site that uses two different graphics, one left aligned and the other right aligned. (See page 93 in your text.) For one of the graphics, scale the size so that it is larger than the original size of the image. (For scaling directions, see page 92.) For help in doing this exercise, see the dancing apple Web site.

Exercise 15

Before doing this exercise, be sure to review Chapters 13-16 on cascading style sheets in your HTML textbook. Then go to this site:
http://www.gordonrichard.com/fall2000/styles/ss1.htm. Use View/Source in Explorer to view the HTML codes in Notepad. Note the style codes at the beginning of this Web page. Make these changes to the style codes:

1. Change the Heading 1 font family to Arial and the text alignment to right.
2. Change the P.basic code color to orange.
3. Change the HR (Horizontal Rule) percentage to 90%
4. Add your name and this exercise number in one of the headings so that you can identify your work once you print it out.

On your diskette, save the Web page you have revised. Then print both the source code view and the browser view.

Exercise 16

Before doing this exercise, you should review Chapters 11 on Forms in your HTML textbook. You may also wish to review some of the tutorial Web sites at http://www.gordonrichard.com/fall2000/forms.htm

Go to this site http://www.geocities.com/lucky506/textform.htm. At this site, you will see a simple form. Use the View/Source option in Explorer to view the HTML code. Copy the source code into your own WordPad window. While leaving the HTML tags, change the text in the form to show that you can modify a form already in existence to fit your own needs. You might, for example, change "Tell me about yourself" to "Tell me about your dog." And for "Course Name," you might substitute "Breed." Be sure your last name appears somewhere on the form so that your work can be identified when you print it.

Print both your browser and source-code view.