Google

1 Put your name and exercise number here. The purpose of this webpage is to give you practice at using style sheets. See Chapters 14-16 in your HTML textbook for information on how to create and use style sheets -- especially check out page 244. Also, refer to the Overview of the CSS Specification page on the Internet. By the way {} are called braces. You are reading a introduction paragraph P class=intro


2 Exercise 1 -- Level 1 heading

3 Barcelona WebPage -- Level 2 heading

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.

4 Remember your name & exercise number -- level 3 heading

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.


5 Exercise 2 -- Level 1 heading

6 Adding to your Barcelona Page -- Level 2 heading

Using your Resume code handout, add the following to your Barcelona page done in Exercise 1 above:

7 Use three graphics-- level 3 heading

You may use these pages as your Barcelona links:
  1. http://travel.lycos.com/Destinations/Europe/Spain/Barcelona
  2. http://www.tmb.net/welcome.html
  3. http://www.campingelcarlitos.com/
  4. Save as index2.html in your barcelon folder.
  5. Print the html code as shown in WordPad
  6. Print the browser view.
  7. Staple both print outs together, label them Exercise 2, and place them into your work-folder.

8 Exercise 3 -- Level 1 heading

9 Viewing the HTML codes -- Level 2 heading

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.geocities.com/lucky506/fall2000/chapexer/chapter3.htm

10 View/Source Option -- level 3 heading

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

11 Exercise 4 -- level 1 heading

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

12 Change the default color font to red. (p 50) 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 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)

13 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 name. Put your work in your folder.

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

15 Getting GIF File -- heading level 3

Mr. Gordon will also show you where you can get a copy of a gif file named duck2.gif. You will be using these graphics in later exercises.

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

17 Exercise 6

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

18 Make the image smaller by cropping. p 62 and 63
  1. Reduce the number of colors. p 69
  2. Make part of the image transparent. p 70
  3. Fake transparency by making the background a solid color. p 72 Interlace the image. p 73
  4. Change and save the image in jpeg format. p 76
  5. Create a low resolution image from the previous jpeg format image. p. 78

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

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

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

23 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 in your class folder on your harddrive. 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."

24 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

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

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