Web Page Creation Course Guide
(Updated 6/30/2000)
by Richard E. Gordon, BA, MS, CAS
Phone: 727-771-9328 E-mail: [email protected]

Copyright 1999. Duplication prohibited without author's permission.
Site is intended for use by my students in my WebPage Creation classes.


Objectives

You will learn how to create and display (upload) a web page using both HTML and Netscape Composer. Your web page will include:
  1. At least five internal links
  2. At least five external links
  3. At least five graphics including a hit counter and an animated e-mail graphic
  4. At least three different font sizes and headings


You will learn how to post your web page on a free Internet service such as Geocities or Angel Fire.

 

Required Texts

  1. HTML, by Elizabeth, Eisner, and Reding. Illustrated Series. Published by Course Technology, ISBN 0-7600-6077-0
  2. Creating Web Sites Projects, by Cram and Hirschl, Published by Course Technology, ISBN 0-7600-5802-4. To access the Student Online Companions site for this text, go to this URL:

  3. http://www.course.com/downloads/Illustrated/crwebprojects/index.html
 

Curriculum

Mr. Gordon intends to teach as many of the following aspects of Web Page Creation as time permits. On-line course materials including a copy of this course guide can be found here:
http://www.geocities.com/lucky506/.


Page numbers after each item refer to the pages items are introduced in each of the two textbooks used in this course: HTML and Creating Web Sites Projects. An H after the page number means that the page referred to is in the HTML text; a C the Creating Web Site Project text.

No page number next to an item means that the text does not cover this item. Such items will be taught with the help of the instructor’s notes or handouts. Time allocation based on 15 hours of class time. *An asterisk next to an item means that it is optional and will only be covered if time permits. The listing is adapted from the Table of Contents from the two texts used for this class.
 

1 Introduction to course (1/2 hour)

    1.1 Checking student roll, distributing handouts, discussion of course guide, attendance policy, etc.

2 Creating an HTML document (2 hours)

    2.1 Understanding HTML, p A-1, H
    2.2 Planning an HTML document, p A-2, H
    2.3 Writing an HTML document, p A-4, H
    2.4 Editing and viewing an HTML document, P A-8, H
    2.5 Linking documents to other web sites, p A-10, H
    2.6 Printing an HTML document, p. B-2, H

3 Controlling HTML text (2 hours)

    3.1 Planning document formats, p B-2, H
    3.2 Creating ordered and definition lists, p B-4, H
    3.3 Creating unordered lists, p B-6, H
    3.4 Formatting text, p B-8, H
    3.5 Adding line breaks, p B-12, H
    3.6 Using preformatted text, p B-1-13, H
    3.6 Creating a Table, p B-14, H

4 Adding graphics and multimedia (2 hours)

    4.1 Understanding graphic images, p C-2, H
    4.2 Inserting online graphics, p C-4, H
    4.3 Resizing a graphical image, p C-6, H
    4.4 Linking graphics, p C-8, H
    4.5 *Setting a hot spot, p C-10, H
    4.6 *Creating an image map, p C-10, H
    4.7 Inserting multimedia files, p C-14, H

5 Using forms to control input (2 hours)

    5.1 Planning a form, p D-2, H
    5.2 Creating a text entry field, p D-4, H
    5.3 Using radio buttons, p D-6, H
    5.4 Using checkboxes, p D-8, H
    5.5 Creating a pull-down menu, p D-10, H
    5.6 Creating a scroll box, p D-12, H
    5.7 Using push down buttons with preset values, p D-14, H

6 Uploading your web page to the Web (2 hours)

    6.1 Using a free storage site (Fortunecity, Angelfire, Geocities)
    6.2 Uploading an AOL website
    6.3 Increasing web site traffic, p AP-6, H

7 Miscellaneous (3 hours)

    7.1 *Quick overview of the html editor Dreamweaver
    7.2 Using Netscape Composer to create your own personal website, p WS A-20, C
    7.3 Finding on-line HTML tutorials

8 Closing (1 1/2 hour)

    8.1 Review, exam course evaluations, and preparation for the after-class project
 

 
 
 

 Grading options

You have two grade options:
  1. S (Satisfactory). This choice is for you if you hope to earn one credit and achieve an S (Satisfactory) that equates to a Passing grade.
  2. X (Audit). This is the choice for you if you wish to audit the class.
As an auditing student, you attend classes for informational purposes only. You will receive neither a grade nor credit for the course. This is the best option if you wish to simply enjoy the course without the pressure of required exams and exercises. Although Mr. Gordon encourages you to try the exams, exercises and final class project, you are not obligated to do them. You are, however, expected to attend all class sessions.
 
 
Students who select the S option will automatically end up with an X (no credit) grade if they do not meet the requirements for Passing. You must tell your instructor your choice within the first class hour. Once you make a choice, you may not change it.
The S option (Passing). Here are the requirements you must meet if you select this option:
  1. Do five of the assigned Exercises in this course guide. Your instructor will tell you which of the exercises you will be required to do. Additional ones beyond those required may be done for extra credit.
  2. Be absent from class no more than two hours.
  3. Take class quizzes and the final exam.
  4. Receive a passing grade on an assigned project that you will mail to your instructor within 14 days after the last class. (More about this project later.)
  5. Work on the course content or related enrichment materials throughout the course hours.*
*Regarding this last item, occasionally a student signs up for this course who already is a competent and experienced in using the Internet, perhaps expecting to coast to an easy credit with an Passing grade. If you take the course already knowing the curriculum, Mr. Gordon will require you to make constructive use of class time by expanding your knowledge beyond the basic curriculum. You may do so by (1) exploring additional web sites that Mr. Gordon suggests and by(2) completing advanced exercises furnished by Mr. Gordon. Regardless of how well you do on the Exercises and final exam, wasting class time will result in reducing your class average by lowering your participation grade.

How an S (Satisfactory grade is determined.

  1. Five assigned Exercises will be worth a total of 50 points (50%) toward your final grade, 10 points for each Exercise.
  2. Class participation — which includes working on content-related materials throughout the course hours — will count for 10 points (10%) toward your final grade.
  3. Your final exam will be worth 20 points (20%).Your project will also count for 20 (20%) points of your final grade.However, if you do not earn a satisfactory grade on your project or if you do not turn it in, you will NOT be given a final grade of S (Satisfactory) no matter how well you do on items 1, 2, and 3. A satisfactory project is an essential requirement for passing.


Please note well: No satisfactory project turned in– no Satisfactory grade for the course and no college credit earned even if you do a perfect job on the other requirements.Students who earn a minimum of 70 points and a satisfactory project grade will receive an S grade for the course.

The X grade.If you do not submit a satisfactory project on time or if you earn less than 70 points, your final grade will be X. You will also receive an X if you have elected to Audit the class. X stands for both “(1)Audited or (2) showed progress, but did not meet the requirements for pass.”

The W grade. For students who are absent for more than two hours of the class.

5% deduction for each missing homework assignment and additional exercise. In addition to the graded Exercises, final exam, and project, your instructor will require that you complete additional Exercises, homework or other assignments. Some of these additional Exercises are included in this course Guide, but others may be distributed later in the course. For each missed or unsatisfactory assignment, Mr. Gordon will deduct 5% from your class average.

Extra credit work. You may gain up to 5 points by doing extra credit assignments. Consult with Mr. Gordon about the nature of extra credit work that may be designed to fit your job needs and interests. For example, you may be given the extra credit option of using a search engine to research a topic related to your job or personal interest.

Academic Honesty and Behavior

The following statement is from a memo of the college administration. This statement applies to this class:
Computer software and hardware should be used properly. In addition, each student’s behavior in the classroom is expected to contribute to a positive teaching and learning environment. The instructor has the authority to request the student to leave the classroom if the disruptive behavior continues.

Registered Students Only

This statement, too, comes from the college administration and also applies to this course:
 
Other than in an emergency when specifically approved by the Provost of the Tarpon Springs Center, employees and students shall not bring children to work or class other than for an occasional quick visit, to drop off a paper, pick up materials or other similar activities. In no case is a child to be left unattended on college premises.
 

Attendance


Here, too, is an college admiistrative statement applying to this course:
 

Attendance at all ... Computer Institute class meetings/times is mandatory. Permission for an excused absence must be obtained from the ... instructor and must be based on extreme circumstances. Any absence, as determined by the instructor, may result in the student being dropped from the class.
Maximum two-hour absence for credit eligibility. Using this administrative statement as a guideline, your instructor has determined that students may be denied course credit if they miss more than two hours of class time.Understand that your instructor expects you to be in class on time and to attend all class hours. If you anticipate that you will not be able to meet this attendance obligation, you should select Audit for your grade choice. If an emergency arises causing your absence, call Mr. Gordon at 727-771-9328. An unexplained absence will suggest to your instructor that you did not have a serious reason for missing valuable class time.

Missed work must be made up.If you miss class because of an excused lateness or absence, it is your responsibility to get the missing notes, handouts, and to make up the missed work

Safeguarding equipment

No food or drink is allowed in the classroom. A spilled drink or food particles could lead to costly computer repairs. At the end of each class, please be sure to (1) exit properly from all running programs, and (2) turn off your computer, monitor and printer.
 

Final Exam Question Bank

For the final exam, your instructor will select twenty questions from the following possibilities. You will not know in advance the twenty questions your instructor will choose. Therefore, to be on the safe side, know the answers to all the possibilities.
If you are taking the course for credit, you will take this test under conventional test-taking conditions, without the help of notes or assistance from others. The time limit is 60 minutes.Each question will be worth 1 point for a total possible score of 20, making this test worth 20% of your final course grade.

The page number after each question refers to the pages in the textbook where you can find the answer. All questions above the horizontal line come from your HTML textbook. The questions below the horizontal line come from your Creating Web Sites Projects textbook.

  1. What does HTML mean? A-3
  2. What do hyperlinks do? A-3
  3. When you save a web-page document, what file extension should you use? A-6
  4. In an HTML document, where does the title appear that is written between the codes <HEAD>Title</HEAD>? A-7
  5. How many sizes of headings can an HTML document have? A-8
  6. When using WordPad to create an HTML document, what format must you save your document in? A-8
  7. When would you use <H2></H2>? A-10
  8. Give an example of an HTML editor? A-13
  9. Using the browser Internet Explorer, how can you view the HTML code of a web page? A-12
  10. What is the difference between an ordered and an unordered list?Give an example of each. B-2 to B-5
  11. How do you refresh your screen in Netscape Navigator? B-6
  12. What is the tag for a horizontal line? B-9
  13. What is the tag for a line break? B-9
  14. When would you use the <PRE></PRE> tags? B-12
  15. Why is it safer to use the preformatted tags instead of the table tags when creating a table? B-14
  16. In creating a table using preformatted tags, how should you create space between columns? B-15
  17. What is the extension of the most common natively supported graphic file format displayed by most Web browsers? C-2
  18. How can you spot a clickable image on a Web page? C-2
  19. What kind of tag is an empty container? C-4
  20. In an Image tag, what does SRC specify? C-5
  21. Why is it a good idea to offer a text-only option for graphic images? C-7
  22. If you place your mouse pointer on top of a word or graphic that is a link, where can you see the website address of the link? C-9
  23. If you click an unavailable or fictitious Web site, what appears on your screen? C-10
  24. What happens if you click on this link? C-13 <A HREF=MAILTO:[email protected]>[email protected]</A>
  25. How can you print a Web page so that it displays checkboxes and radio buttons? D-2
  26. In creating a form, what tag is used for a text entry field? D-4
  27. How can you limit choices and assure easy and accurate data entry in a form? D-6
  28. What is the closing tag for a form? D-7
  29. What tag is used for pull-down menus and scroll boxes? D-10
  30. How do you see additional choices on a pull down menu? D-11
  31. What should be the extension of a website's home page? WS A-4
  32. What is the difference between a local link and a remote link? WS A-8
  33. What mistake would you be making if you saved an index file with the name INDEX.HTM? WSA-4
  34. How can you display a Word document into a Netscape Composer window? WS A-6
  35. What's a good way to separate information on a Web page? WS A-12
  36. Why should you close Navigator windows you are no longer using? WS B-12
  37. What format should images be saved in if you wish to display them in a Web page? WS A-14
  38. Why would you want to insert Alternative Text and Images in a webpage? WS B-16
  39. Why would Maria Sanchez  insert the following using Composer? mailto:[email protected]  WSA-18
  40. If you have several Web pages making up your Web site, when you use Composer to publish your site, what page should you be sure to publish from? WS A-18
  41. Where should you be able to return to from every page in your Web site? WS A-21
  42. As a follow up to the previous question, what pages should you be able to link to from any page on your Web site? WS A-21
  43. If you plan to have a five page Web site, how can you minimize repetitive tasks by resaving the index.html file under different file names? WS B-2
  44. How can you add text to an image? WS B-2
  45. In Composer, what key combination can you use to quickly return the cursor to the to the left margin? WS B-8
     
Course Project
 
(Revised Projects are available for the class meeting March 23 to 25, 2000)

Choice 1:

Your course project must be mailed to your instructor in the addressed envelope Mr. Gordon gave you. It should be mailed seven to ten days after the course is over. For the class meeting meeting March 3 to 5, the latest acceptable postmark date is March 15. For the class meeting March 24 to 26, the latest acceptable postmark date is April 5. Projects postmarked after these dates will not be accepted. To receive credit for the class, you must submit a satisfactory project.
For your project, you will create a resume similar in set-up to either of the resumes found at these two sites:
http://www.geocities.com/lucky506/
http://www.geocities.com/lucky506/Maria/mariares.htm
 
You may fictionalize your resume for the purposes of this exercise. Be sure your real name is printed on this project-resume before you submit it to Mr. Gordon. Use Netscape Composer. Submit your resume as it appears (1) in your browser window and (2) as it appears showing the HTML codes.
Be sure you resume includes:
  1. A background image
  2. At least two levels of headings
  3. Two examples of lists
  4. A horizontal line
  5. At least two different font sizes
  6. At least five external links
  7. An e-mail graphic
  8. Examples of boldface and italics text
 
Open your webpage in either Netscape Navigator or Internet Explorer. Print it from your browser. Then use View/Source to reveal your HTML code. Then make a print out of your HTML code. In your envelope, mail to Mr. Gordon both the browser view and source (HTML) view of your resume-website. (If you prefer, you may upload your Web pages to Geocities and -- by the postmark-deadline -- send Mr. Gordon your Web site address instead of the printed copies of your work.)


OR

Choice 2

Pretend you own a restaurant. Using Netscape Composer create a website telling about your restaurant (address, phone number, hours opened). Include your menu. Your site should be composed of at least four different pages, including an index page that links to all the others. You may model your site on the Dino's Pizzeria shown in class, but you do not have to use frames.  Be sure your site includes the following:
  1. Index page that links to all other pages in your site
  2. Links on all pages linking to other pages in the Web Site
  3. At least four pages composing your Web site
  4. Consistent look among all pages
  5. Background image
  6. At least two graphics
Print all of your pages first as viewed by either Netscape Navigator or Internet Explorer. Then use View/Source to print the HTML codes for each page. In your envelope, mail to Mr. Gordon both the browser view and source (HTML) view of your resume-website. (If you prefer, you may upload your Web pages to Geocities and -- by the postmark-deadline -- send Mr. Gordon your Web site address instead of the printed copies of your work.)
 
Mail your browser and source-code view pages in the envelope provided by Mr. Gordon.  For the class meeting meeting March 3 to 5, the latest acceptable postmark date is March 15. For the class meeting March 24 to 26, the latest acceptable postmark date is April 5. Projects postmarked after these dates will not be accepted. Be sure to keep a copies of your work.

Exercises

Exercise 1

Create the web-page Normad by following the directions on pages A-6 to A-13 in your HTML textbook. Print your page as viewed in Internet Explorer. Then print your source code using WordPad or NotePad.

Exercise 2

Create the web page in the Skills Review section on pages A-16 to A-17 in your HTML textbook. Save your page on your diskette or on your harddrive folder as crystal2. Print your HTML document as instructed in section 5 on page A-17.

Exercise 3

Do the Visual Workshop exercise on page A-20 in your textbook HTML. On your diskette, as stated in the directions, “Save your HTML file as a text document called Marvelous Musicals.htm. Then print the document in your text editor and your browser.”Make the <TITLE> Marvelous Musicals</TITLE>

Exercise 4

Study pages B-2 to B-7 in your HTML textbook. Using HTML, create a single web page showing that you know how to make these kinds of lists: Ordered, Unordered, Definition, and Nested.Make the headings <H1> and <H2>.For what your HTML list should look like, go to this site, but be sure that your HTML list uses different items in each list:
http://www.geocities.com/lucky506/lists.htm

Exercise 5

Create a web page following the example shown in Figures B-3 on page B-5 of your HTML text. This example illustrates how to do Ordered and Definition lists. Follow the example’s format, but substitute your own words.

Exercise 6

Using preformatted tags, create the web page in Figure B-14 on page B-15 of your HTML textbook. Save your page as Nomad3.htm and print it using Internet Explorer.

Exercise 7

Using the table tags, create the table shown in figure B-15 on page B-15 of your HTML textbook.

Exercise 8

Do Concepts Review on pages B-16 to B-17 of your HTML textbook.

Exercise 9

Create the web page shown in Figure B-18 on page B-22 of your HTML textbook. Use the table tags for creating the table. Add the column-heading Item to the first and third columns. Be sure to include your name. Save it as Bakery. Print it using your text editor and browser.

Exercise 10

Do Skills Review on pages B-18 to B-19 of your HTML textbook.
 

Exercise 11

Do Independent Challenge 3 on page B-21 in your HTML textbook. To get movie information on titles, actors, directors, etc., go to this site: http://www.filmsite.org/


Exercise 12

In your textbook Creating Web Site Projects, complete Project 1 and Project 2 for the Personal Web Site chapter, pages WS A-4 to WS A-15. You do not have to do the Project 3 section. Viewing your work in Navigator or Explorer, print all your work. Include your own name at the top of each printed page. You can access the student files necessory for this exercise and other exercises for this book at this site:
http://www.course.com/downloads/Illustrated/crwebprojects/index.html
 

Exercise 13

Go to the following Web page to read how to get your Web site listed on Yahoo. Then write a paragraph summing up the steps. http://howto.yahoo.com/chapters/10/1.html

Exercise 14

Do the Visual Workshop exercise on page WS A-94 in your Creating Web Site Projects textbook. Do not, however, use yellow text as the directions say. Instead, use black text which is far easier to read. Use this address as your link for Hadrian's Villa: http://www.ece.arizona.edu/~justin/rome.html
 

Internet Resources

Mr. Gordon’s on-line resources
This Course Guide, completed exercises, and other supplemental materials for this course can be found at –
http://www.geocities.com/lucky506/

Student Data Files for HTML Textbook

To download student files used in connection with your Course Technology textbook HTML, click on this link.
HTML textbook student files

Internet Resources for Projects Text

To view student resources referred to in your Course Technology textbook Creating Web Sites Projects, click on this link:
Student on line companion

Sources for Graphics

Internet sources for graphics for your web pages: Most of these sources are free, but be sure to read about any copyright restrictions on each site.
Background images
http://www.ECNet.Net/users/gas52r0/Jay/backgrounds/back.htm
http://www.ender-design.com/rg/backkidx.html

http://www.netscape.com/assist/net_sites/bg/backgrounds.html

http://www.ender-design.com/rg/backidx.html
http://www.netscape.com/assist/net_sites/bg/backgrounds.html
If you need help on how to insert graphics, go to this site:
http://www.cwru.edu/help/introHTML/TCh7.html
“When specifying a background image (with BACKGROUND) it is a good idea also to specify a background color (with BGCOLOR.) That color should be one similar to the prevailing color of the image; this ensures that if the user viewing your page has image loading off, or if your background image cannot be loaded for some reason, the page will still look close to the way you intended.” From Netscape http://www.netscape.com/assist/net_sites/bg/backgrounds.html
Example: <body bgcolor="#gray" background="assets/grayba.jpg" text="black" link="blue" vlink="green" alink="purple">
black
gray
maroon
purple
green
olive
navy
teal
silver
white
red
fuchsia
lime
yellow
blue
aqua
These 16 colors are supported by name in HTML 4.0. You do not have to use a number/letter code to identify them in your color tags:

Other graphics

http://www.freegraphics.com/
http://www.altwebmasters.com/aag/
http://www.free-clip-images.com/
http://www.arttoday.com/
http://www.barrysclipart.com/
http://www.clipart.com/
http://www.clipartconnection.com/
http://www.freefoto.com/
http://www.octagamm.com/boutique/
http://www.freegraphicland.com/

Animations

http://www.animatedgifs.simplenet.com/
http://www.graphsearch.com/en/category/r_category_1.html
http://www.webarrow.net/graphics/animation/

Counters

http://www.ultimatecounter.com/

Sources of Free Audio Clips (Sound Files)

WAV sound files

http://pirovich.com/sounds.html
http://www.google.com/search?q=%22free+sound+files%22
http://www.webplaces.com/html/sounds.htm
 

Animal sounds

http://sunsite.sut.ac.jp/multimed/sounds/sound_effects/animals/
 

Internet Tutorials on Creating Web Pages

http://werbach.com/web/wwwhelp.html
http://www.hooked.net/~larrylin/web.htm
http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html
http://www.zdnet.com/devhead/?chkpt=extr012
http://www.fortunecity.com/hi/
http://davesite.com/webstation/html/
http://www.tripod.com/explore/computers_internet/Internet/Tutorial/HTML/
http://webcom.com/html/win_index.shtml
http://xoom.com/helpcenter/tutorial
http://camalott.com/html/
    Tutorial on just HTML
        http://camalott.com/html/htmltutor/index.html
        http://www.echoecho.com/htmlbasics.htm
    Website building for teachers -- but anyone can use this site to help build webpages without knowing HTML
        http://www.spinfrenzy.com/cooltools/
 

Using free HTML editors to create webpages

    Creating Web sites using Netscape Composer
        Xoom, a free web page storage site, shows how to create a web page using Netscape Composer. Especially helpful in detailing how to upload or publish your web page on Xoom using composer.
           http://xoom.com/helpcenter/ftp/compose
        Netscape shows how to use its own Composer program
           http://home.netscape.com/browsers/createsites/index.html
 
    Creating Web sites using Front Page Express
        http://vccslitonline.cc.va.us/myowswsdw/frntpage.htm
        http://www.toltbbs.com/howto/  (This second site tutors both Front Page Express and Netscape Composer)

    Creating Web sites using Dreamweaver
        http://wally2.rit.edu/instruction/web/drw2/
        http://www.law.berkeley.edu/computing/howto/dreamweaver/
        http://webtools.com/story/graphics/TLS19990401S0008
        http://hotwired.lycos.com/webmonkey/98/27/index1a.html
        http://hotwired.lycos.com/webmonkey/99/11/index2a.html?tw=hf199912
        http://www.cfa.arizona.edu/mar203/Tutor/ImageMap/mapmakerDW.htm
        http://webdesign.about.com/compute/webdesign/msubdreamweaver.htm
        http://www.idest.com/dreamweaver/resources-main.htm
        http://www-asia.macromedia.com/software/dreamweaver/productinfo/tutorial/index.fhtml
        http://www.online-designs.co.uk/webdesign.htm

Using Forms to get purchasing information from viewers
        Joe Barta shows you  how to create HTML forms so that you can get feedback from your viewers.
           http://junior.apk.net/~jbarta/tutor/forms/index.html

Selling products and services on your website. E-Commerce.Guide.Com

http://ecommerce.internet.com/

Spot Errors in Your HTML

http://validator.w3.org/
http://websitegarage.netscape.com

Free Internet Sites for Storing Your Web Pages

If you have AOL, you can get free Web site storage. Click on Keyword and type in My Place. Then hit the Enter key.

 

Free Registration of Your Web Site with Popular Search Engines

http://www.addme.com/
http://register-it.netscape.com/
(The End)
 
 
Hosted by www.Geocities.ws

1