Course Project

Your course project is due at the end of class on Sunday.
Create an index.html file that provides links to all the pages you created for this class.
Upload this index file and all the other webpages created in this class to your free Geocities/Yahoo server.
Make sure that all the links work on your pages, especially the links in your main index file.
Ask a neighboring student to check out your links.
Using your free Yahoo e-mail account, send a message to Mr. Gordon giving your Geocities address. Include in your message the name of the student who checked out your links. Send your message to webteachus@yahoo.com instead of Mr. Gordon's regular e-mail address at richard@gordonrichard.com.
Copy all files of your webpages to your diskette. The organization of your files on this diskette should be the same as the organization on your Geocities/Yahoo server and your harddrive on your class computer.
Make sure your name is on your diskette.
Put your Geocities address on the cover of your class folder.
At the end of class on Sunday, hand in your diskette in your folder along with your other class work.
Your completed project will be composed of your webpages on the Geocities/Yahoo server and on the diskette.

Exercises

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.

Exercise 1

You are about to create a Web page that looks like this one at http://www.gordonrichard.com/fall2000/barcelon/index.html
Following the steps on pages 34 to 42 in your textbook and using WordPad, create the Web page titled Barcelona, Capital of Catalunya.
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.
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.)
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.
Print the html code as shown in WordPad.
Print the browser view.
Staple both print outs together, label them Exercise 1, and place them into your work-folder.

Exercise 2

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.
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/
Save as index2.html in your barcelon folder.
Print the html code as shown in WordPad
Print the browser view.
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

Use the View/Source option in your browser to see the HTML codes.
Save your work as chapter3.htm in your chapexer folder
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 4

Resave your Exercise 3 chapter3.htm file as chap3a.htm. Now working with your chap3a.htm file, do the following:

Change the default color font to red. (See page 50 in your text.) Check the back inside cover of your book to view the Sixteen Predefined Colors that only require using a name such as "red" instead of a code number like #FF3118. For information on setting background colors, here is a suggested website to check out.
Change the text color of at least two separate sentences. Use either color codes or predefined color names. (p 51)
At the end of your Web page, create two examples of superscripts and two subscripts to add to your Web page. (p 52)
Strike out a sentence and underline a sentence.(p 53)
Have one sentence in Monospace fonts using the <TT> code. (p 54)
Create two examples of Hidden text. (p 56) See WWI site for good example of Hidden text.
Save and print both the browser and source codes of your chap3a.htm file. Be sure that Exercise 4 appears on your work along with your name. Put your work in your folder.

Exercise 5

Read Chapter 4 Creating Web Images in your textbook, pages 57 to 79. Copy the five images on these sites to a subfolder called images. This images subfolder should be within your harddrive folder used for this course:

Using My Computer, show on your screen that you have copied these five images to your harddrive graphics subfolder.
Use the Print Screen key to copy the My Computer screen into a Word document having your name and Exercise 5 typed in at the top.
Save the Word document as graphics, print it, and insert it in your folder.

Exercise 6

Use the mallard graphic to apply the Adobe Photoshop directions on these pages in your textbook: Make the image smaller by cropping. p 62 and 63

Interlace the image. p 73
Change and save the image in jpeg format. p 76
Create a low resolution image from the previous jpeg format image. p. 78
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.gordonrichard.com/fall2000/parkduck.htm
Save your file as smallduc.htm.
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.
For extra credit, repeat this exercise using the graphic at http://www.gordonrichard.com/fall2000/card.htm

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.gordonrichard.com/fall2000/duck2.gif

Save your file as smallduc.htm.
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.

Save your file as coffee3.htm.
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:

Add a background color (p 98) or a background image. (p 99)
Make several words bold and others italic. (p 46)
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.

Put your notes on a separate piece of paper with your name and Exercise 12.
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:

Change the Heading 1 font family to Arial and the text alignment to right.
Change the P.basic code color to orange.
Change the HR (Horizontal Rule) percentage to 90%
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.

Exercise 17

Before doing this exercise, read Chapter 8 on Lists in your HTML text.

Look at the various kinds of lists illustrated at this site: http://www.geocities.com/lucky506/lists.htm
Now look at the HTML codes behind the above lists at this site: http://www.geocities.com/lucky506/lists/listsall.htm
Print out the HTML page viewed in step 2.
Using the printout as your guide, create your own examples of ordered, unordered, nested and definition lists.
Print out your browser and source-code views of your lists.

Exercise 18

Go to this Geocities site to sign up for a free Web page: http://www.geocities.com

Upload to your Geocities site at least five of the HTML files you have created for this course.
Print out the-browser view of one of these uploaded pages to show that you have successfully signed-up for a free Webhosting service and that you know how to upload files to this service.

Exercise 19

Before doing this exercise, review Chapters 10 and 11 on Frames in your HTML textbook. Also, first look at least three of the framed sites linked from this page: http://www.geocities.com/lucky506/fall2000/frames.htm.

Go to this site that illustrates the use of frames for a prototype site on an imaginary team called the Tigers: http://www.geocities.com/lucky506/tigers/index.html
Click through the Table of Contents in the frame at the left of this site on the Tigers.
Now go to this site to view the HTML codes for the Index page, Table of Contents page, Main page and a sample of all the other page. http://www.geocities.com/lucky506/frames.htm
Print out this HTML code page. Ignore the numbers that are to the left of each line -- they are not part of the HTML code, but will be used by Mr. Gordon to refer you to different sections of this prototype.
Now using the HTML printout as your guide, make up your own five-page framed Web site. Just as in the prototype, you may only use a single sentence on each page.
Print out the source-code view of the pages making up your site as well as the browser view of all the pages.
Upload your site to Geocities and give Mr. Gordon the address so that he can see how your framed site is working properly.
Take a look at the notes on how to create a site with frames.

Exercise 20

You will learn to use and change a Style Sheet in this exercise.

Open an Exercise on Style Sheets adapted from the Exercise section of this course guide.
Skim through this site, noting the formatting of level 1, 2, and 3 headings; the background color of the links; the ordered and unordered lists.
Then use View/Source to see the HTML codes. Note especially the use of Style codes at the beginning of the page.
In Notepad, re-save the Source/View with the name sspract1.htm in Notepad to a file on your diskette or to your class folder on your harddrive.
Experiment with changing codes in the Style section, and use your browser to view how these changes appear in your browser. For this step, you will have to switch back and forth between browser-view and Notepad (or WordPad) view.
In making changes to the HTML Style codes, be sure to change the background color and font size of all three level headings.
Change the formatting of your links.
Change the background color of your TT formatted text.
Change the formatting of your ordered and unordered lists so that circles instead boxes appear in your unordered lists and Arabic rather than Roman numerals appear in your ordered lists.
Again, view your changes in your browser.
Make a final save of your file again as sspract1.htm
Upload sspract1.htm to your Geocities site.
Print both your browser and NotePad (or WordPad) views, and put your printouts in your work folder.

Exercise 21

You should refer to notes and pages 246-247 in your text to help you with this exercise.
In this exercise, you will see how editing a style sheet can automatically cause changes in linked files. Begin by looking at these files on your harddrive folder aagordon. The first file is the style sheet linked to the other three files: owlstyle.css | owls1.ht | owls2.htm | owls3.htm From the aagordon folder on your harddrive, you will have to open the owlstyle.css file in WordPad since it cannot be viewed with your browser because it is not an htm(l) file. Or, if you click on it as link, it may open in Dreamweaver, assuming, of course, that you have Dreamweaver on your computer.
View and copy the HTML codes of all four files to your diskette in a folder called styles.
Make the following changes in the owlstyle.css file: (a) change the background colors and font sizes of the TT, Strong, and link tags; (b) in the unordered list, change the boxes to circles and, in the ordered list, change the Arabic numbers to Roman numbers; (c) center the Horizontal Rule. Save your changes.
Create a folder called styles at your Geocities site.
Upload all four files to this Geocities styles folder.
Print out the browser view of one of your three owl Web pages and the browser view of your style sheet.

Exercise 22

View this site which is this course guide especially modified for practice using style sheet tags: http://www.gordonrichard.com/fall2000/styles/guidecss.htm
Make changes in the style tags to see how these changes are reflected throughout this website.
Save and then upload the website with your changes to your Geocities site using the file name guidecss.htm.

Links below for entire Website

Web Page Creation Course Guide Cont'd -- Project & Exercises