1 Web Page Creation Course Guide -- Practice Using an Internal Style Sheet

by Richard Gordon (Updated 9/15/00) E-mail: richard@gordonrichard.com Home >Web Page Creation Course Resources

2 Contents of Course Guide

Objectives | Required Text | Curriculum | Academic Honesty and Behavior | Grading options | Registered Students Only | Attendance |Safeguarding equipment | Final Exam Question Bank | Course Project | Exercises

3 This partially formatted webpage will give you practice using HTML and Style Sheet tags. For information on Style Sheets, see your HTML textbook by Elizabeth Castro. To help you determine the HTML formatting, refer to the Course Guide on the Internet and the hardcopy version Mr. Gordon gave you at the beginning of class. As you apply HTML and style tags to this page, be use to view in both browsers -- Explorer and Navigator. You'll be surprised to see how some tags are treated differently by each browser. Numbers in front of many headings and paragraphs have been inserted to make it easier for Mr. Gordon to direct your attention to different sections of this webpage throughout the lesson.

4 Objectives

5 You will develop the skills to create a Web page using both HTML and Netscape. You will also learn how to display your page on free Web servers like Geocities or Angel Fire. Your Web page will include:

At least three internal links At least three external links At least three graphics including an animated e-mail graphic At least three different font sizes and headings

6 Required Text

7HTML 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/ 8 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. 9


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

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

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

12Time 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.

13Grading options

You have two grade options:

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

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 enjoy the course without the pressure of required exams and exercises. Although Mr. Gordon encourages you to try the exams and exercises, 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.

15 The S option (Passing)>

Here are the requirements you must meet if you select this option:

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

Be absent from class no more than two hours.

Take class quizzes and the final exam. 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 creating Web pages, 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) working ahead on the Exercises or the class Project on your own, and (2) arranging with Mr. Gordon to work on a special Web page project meeting you individual needs.

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

18 How an S (Satisfactory grade is determined.

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

19The 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.

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

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

22 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

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

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

25 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

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

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

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

29 The page number after each question refers to the pages in your HTML textbook where you can find the answer. Base your answers on information in your textbook on the cited pages.

30 What does HTML stand for? p 12 What is the software called that allows us to view a Web page? p 13 Give an example of angle brackets. p 21 How do browsers treat any extra spaces that exist between tags in your HTML document? p 24 What mistake did John make when he named a Web page file this way? INDEX.HTML p 26 Where should your HTML tag first appear in your Web page? p 35 In most browsers, where does the title of your Web page appear? p 37 Why should you choose carefully the title of your Web page? p 37 When would you use these tags? p 38 When you save a document as a Web page using a simple text editor like WordPad, what extension should you use for your file name? 41 What does it mean if an HTML code is deprecated by WC3? p 43 Why might you be making a mistake if you use Cascading Style Sheets? p 44 If in your HTML code you specify a font that the viewer does not have installed on his/her system, what font will appear on the screen? p 45 How many basefont sizes should you use in a HTML document? p 47 When are the and tags used? p 49 Explain the difference between a superscript and a subscript? You can use an example of each in your explanation. p 52 By default what are the two fonts specified in your browser's preferences? p 55 If you use the Blink code and most of you viewers are using Microsoft Explorer, what mistake would you be making? p 55 What are the two most popular formats for graphics on the Web, and what format is gaining in popularity? p 57 What are three ways you can get graphics for your Web pages? p 61 If you create your own images, you should save them at what dpi and what format? p 61 Why would you want to reduce the physical size of your images? p 62 What is special about an interlaced GIF89a graphic? p 73 We won't be making animated GIFs in class, but what is one inexpensive program you can use to create animations? p 74 When is it the best time to check out the size of an image on one of your Web pages? p 77 Why would you want to create a low resolution image? p 78 Within what time limit should you aim to have your Web page load? 82 Why should you offer alternate text with a graphic? 83 How do you figure out the size of an image using Explorer? 84 When is it a good idea to use miniature images? 86 What does the BGCOLOR tag allow you to do? 98 What must you be careful about when using a background image? 99 When would you want to use the BR tag instead of the P tag? 102 Why might you want to use the UL tag? p 107 What is usually the name of the default file in a Web site? 118 How do you create a link to a particular location on a Web page? 119 When are you required to put quotation marks around an anchor name? 120 How is an ordered list different from an unordered list? 135, 137 When should you use an external style sheet instead of an internal style sheet? 244 Why would you use a HTML validator? 323 What is a big advantage of using style sheets? 240 What is the biggest disadvantage of style sheets? 241 How does a comment tag begin? 245 What is the number one problem people face in trying to create Web pages? 323 Why is it important to view your Web pages in both Netscape and Explorer? 325, 326 Why should you avoid saving images in BMP format? 327 What are three things to consider when selecting a Web hosting service? 332 What is a big advantage of having your own domain name? 333

31 Course Project

Your course project is due at the end of class on Sunday. For your project, using Netscape Composer or HTML, you will create a resume similar in setup to the one found at this site: http://www.geocities.com/lucky506/Maria/mariares.htm You may fictionalize your resume for the purposes of this exercise. But be sure your real name is printed on this project-resume before you submit it to Mr. Gordon. Be sure your resume includes:

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

32 Once your Web page is completed, follow these steps:

Open your Web page in Internet Explorer. Print it from your browser view. Next use View/Source to reveal your HTML codes. Then make a print out of your HTML code. In your work folder, put both the browser view and source (HTML) view of your resume-Web site.

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

33 Repeating exercise with Composer.

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

34 Exercise 1

You are about to create a Web page that looks like this one at http://www.geocities.com/lucky506/fall2000/barcelon/ 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.

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

36 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

37 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. You can also view Netscape's site on background colors: http://www.netscape.com/assist/net_sites/bg/backgrounds.htm 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 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.

38 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 graphics. This graphics subfolder should be within your harddrive folder used for this course: http://www.geocities.com/lucky506/assets/duck.jpg http://www.geocities.com/lucky506/assets/boathous.jpg http://www.geocities.com/lucky506/assets/tree.jpg http://www.geocities.com/lucky506/assets/stormclo.jpg http://www.geocities.com/lucky506/assets/kaybeach.jpg Mr. Gordon will also show you where you can get a copy of a file named duck2.gif. You will be using these graphics in later exercises. 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.

39 Exercise 6

Use the duck2.gif graphic to apply the Adobe Photoshop directions on these pages in your textbook: Make the image smaller by cropping. p 62 and 63 Reduce the number of colors. p 69 Make part of the image transparent. p 70 Fake transparency by making the background a solid color. p 72 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.geocities.com/lucky506/fall2000/duck/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.

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

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

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

43 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?

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

45 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

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

47 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.geocities.com/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: 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.

48 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/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.

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

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

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

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

53 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, the first of which is the style sheet linked to the other three files. owlstyle.css | owls1.htm | owls2.htm | owls3.htm 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.) 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. -------------------------------------------------------------------------------- Home to Course Resources | Objectives | Required Text | Curriculum | Academic Honesty and Behavior | Registered Students Only | Attendance | Safeguarding equipment | Final Exam Question Bank | Course Project | Exercises -------------------------------------------------------------------------------- < Home < Web Page Creation Course Resources Last updated 9/23/00 ©Richard Edward Gordon. All rights reserved. For information contact Webmaster richard@gordonrichard.com