Objectives

1. At least three internal links
2. At least three external links
3. At least three graphics including an animated e-mail graphic
4. At least three different font sizes and headings

Required Text:

HTML for the World Wide Web, Fourth Edition, by Elizabeth Castro. Published in 2000 by Peachpit Press. ISBN 0-201-35493. See Web site http://www.peachpit.com/books/catalog/K5950.html

As you use this textbook, you will find these sites, created by the textbook's author, valuable companions to the textbook:
http://beta.peachpit.com/vqs/html4/
http://www.cookwood.com/html4_4e/

Although only the Castro text cited above is required for the course, Mr. Gordon believes you will also find this textbook very helpful: Creating a Web Page, Fourth Edition, by Paul McFedries, published in 2000 by Que.

Curriculum

Page numbers after each item refer to the pages items are introduced in the Peachpit textbook HTML for the World Wide Web, by Elizabeth Castro. 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.

The work on Netscape Composer is not in the textbook, but Mr. Gordon will show you where you can find Web site tutorials on Netscape Composer that can take the place of having a separate textbook for this aspect of the curriculum.

Time allocation, all approximations, are 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 of items is adapted from the Table of Contents of your HTML textbook.
 

1 Introduction to course (1/2 hour) Checking student roll, distributing handouts, discussion of course guide, attendance policy, etc. 2 Starting your Web page (1 hour) Viewing in your browser the source codes of a resume Web page to serve as a model of your own first Web page Creating a template with the basic HTML codes to apply to new Web pages Designing your site, p 32 Organizing your files, p. 33 Creating a new Web page, p 34 Starting your Web page, p 35 Creating a title, p 37 Starting a new paragraph, p 39 Saving your Web page, p. 40 Viewing your page in a browser, 42 3 Text formatting (1 hour) About deprecated tags, p 44 Changing the font, p 45 Making text bold or italic, p 46 Choosing a default size for text, p 47 Changing text size, p 48 Choosing a default color for text, p 50 Creating superscripts and subscripts, p 52 Striking out or underlining text, p 53 Using a monospace font, p 54 Making text blink, p 55 Hiding text (adding comments), p 56 4 Adding graphics (1 hours) Getting images, 61 Making images smaller, 62    Saving images in different formats, p 73, 76 Making images load more quickly Creating transparent images, p 70 Inserting images, p 82 Offering alternate text, p 83 Specifying size for speedier viewing, p 84 Linking icons to external images, p 86 Using low resolution images, p 87 Aligning images, p 93 5 Page Layout (1 hour) Using background color, p 98 Using background images, p 99 Centering elements on a page, p 100 Specifying the margins, p 101 Creating a line break, p 102 Keeping lines together, p 103 Creating Discretionary line breaks, p 104 Specifying space between paragraphs, p 105 Creating indents, p 106 Creating indents (with lists), p 107 Using block quotes, p 110 6 Creating links (1 hour) Creating a link to another Web page, p 118 Creating anchors, p 120 Linking to a specific anchor, p 121 *Targeting to specific windows, p 122 Using images as links, p 128

7 Creating lists (1 hour) Creating ordered lists, p 136 Creating unordered lists, p 138 Creating definitions lists, p 140 8 Creating tables (1 hour) Creating a simple table, p 145 Adding a border, p 146 Changing the border color, p 147 Setting the width, p 148 Centering a table on the page, p 149 Wrapping text around a table, p 150 Adding space around a table, p 151 Adding a cell's contents, p 155 Using background image, p 159 *9 Using frames (1 hour -- optional -- only covered if time permits) *Creating a simple frameset, p 168 *Creating frames in columns, p 170 *Creating frames in rows and columns, p 170 *Targeting links to particular frames, p 181 *Creating alternative to frames, p 185 *10 Creating a form (1 hour - optional - only covered if time permits) *Sending form data via e-mail, p 194 *Using a form hosting service, p 195 *Creating text boxes, p 196 *Creating password boxes, p 197 *Creating larger text areas, p 198 *Creating radio buttons, p 199 *Creating checkboxes, p 200 *Creating menus, p 201 *Creating the submit button, p 206 *Using an image to submit data, p 210 11 Introduction to cascading style sheets (1 hour) Advantages of using style sheets, p 240 Disadvantages of using style sheets, p 241 Creating an internal style sheet, p 244 Creating an external style sheet, p 246 Using an external style sheet, p 247 Formatting text with styles, p 257-272 Layout with styles, p 273-290 12 Publishing and promoting your page on the Web (1 hour) Using a free service such as Geocities or Angelfire Testing your page first before uploading to your server, p 330 Getting your own domain name, p 333 Uploading files to your server, p 344 Getting visitors, p 339-348 13 Introduction to HTML editors (4 hours) This aspect of course is not covered in our textbook, but you will get a list of Web site tutorials covering both Composer and Dreamweaver. Using Netscape Composer to create a resume and to re-create several of the exercises done in HTML. (Not covered in text) Quick overview of the html editor Dreamweaver    14 Closing (1 1/2 hours)     8.1 Review, exam, course evaluations. *Optional -- only covered if time permits.

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

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. Work on the course content or related enrichment materials throughout the course hours.*

1. Five Exercises will be worth a total of 50 points (50%) toward your final grade, 10 points for each Exercise.
2. Class project will be worth 20 points (20%) toward your final grade and will be handed in at the end of class on Sunday.
3. Class participation — which includes working on content-related materials throughout the course hours — will count for 10 points (10%) toward your final grade.
4. Your final exam will be worth 20 points (20%).

The X grade. 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, class Project, and final exam, 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 for creating a Web page for your club, church, company, or home business.

Academic Honesty and Behavior

Registered Students Only

Attendance

Here, too, is a college administrative 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

Final Exam Question Bank

Course Project

Be sure your resume includes:

1. A background image
2. At least two levels of headings
3. Two lists, one ordered and the other unordered
4. A horizontal line
5. At least two different font sizes
6. At least five internal links to anchors within the Web page
7. At least five external links
8. An e-mail graphic

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

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

Exercise 2

Exercise 3

Exercise 5

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.geocities.com/Athens/Column/9350/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://www.journalism.indiana.edu/undergrad/materials/tabletutorial/
• And here, just by clicking on the word table, you can find other examples of sites created by tables.
• Print both your browser and source code views and put them 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.asminor.info/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.asminor.info/lucky506/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.geocities.com/lucky506/fall2000/http://www.asminor.info/lucky506/fall2000/forms.htm

Go to this site http://www.asminor.info/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.

1. Look at the various kinds of lists illustrated at this site: http://www.asminor.info/lucky506/lists.htm
2. Now look at the HTML codes behind the above lists at this site: http://www.asminor.info/lucky506/lists/listsall.htm
3. Print out the HTML page viewed in step 2.
4. Using the printout as your guide, create your own examples of ordered, unordered, nested and definition lists.
5. 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

1. Upload to your Geocities site at least five of the HTML files you have created for this course.
2. 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.asminor.info/lucky506/fall2000/frames.htm.

1. 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/http://www.asminor.info/lucky506/fall2000/index.html
2. Click through the Table of Contents in the frame at the left of this site on the Tigers.
3. 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.asminor.info/lucky506/frames.htm
4. 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.
5. 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.
6. Print out the source-code view of the pages making up your site as well as the browser view of all the pages.
7. Upload your site to Geocities and give Mr. Gordon the address so that he can see how your framed site is working properly.
8. 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.

1. Open an Exercise on Style Sheets adapted from the Exercise section of this course guide.
2. 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.
3. Then use View/Source to see the HTML codes. Note especially the use of Style codes at the beginning of the page.
4. Save with the name sspract1.htm the Source View in Notepad to a file on your diskette or to your class folder on your harddrive.
5. 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.
6. In making changes to the HTML Style codes, be sure to change the background color and font size of all three level headings.
7. Change the formatting of your your links.
8. Change the background color of your TT formatted text.
9. 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.
10. Again, view your changes in your browser.
11. Make a final save of your file again as sspract1.htm
12. Upload sspract1.htm to your Geocities site.
13. Print both your browser and NotePad (or WordPad) views, and put your printouts in your work folder.

Exercise 21

1. You should refer to notes and pages 246-247 in your text to help you with this exercise.
2. In this exercise, you will see how editing a style sheet can automatically cause changes in linked files. Begin by looking at these files, the first of which is the style sheet linked to the other three files. owlstyle.css | owls1.htm | owls2.htm | owls3.htm
3. View and copy the HTML codes of all four files to your diskette in a folder called styles. (Check with Mr. Gordon to see if he has already put these files on a diskette that he has given to you earlier in the class.)
4. 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.
5. Create a folder called styles at your Geocities site.
6. Upload all four files to this Geocities styles folder.
7. Print out the browser view of one of your three owl Web pages and the browser view of your style sheet.

---