Note: This tutorial is written for the Netscape Composer HTML Editor which is part of the Netscape Communicator Suite. If you do not have Netscape installed on your computer, you can download it with no charge from http://www.netscape.com .

You can also use Claris HomePage or Adobe PageMill if they are available on your computer. Both HomePage and PageMill have excellent tutorials and help files. AppleWorks or Microsoft Word both include the Save As HTML (webpage) option and can be used to create a simple webpages.

Follow these steps to launch Netscape Composer.

1. Open the Netscape Navigator web browser
2. The Navigator web browser allows you to view webpages but does not permit you to edit the webpage. To do that, you will need to open Composer, the HTML Editor.
3. Click on the Communicator menu and select Composer.
4. Composer will open in a new window in front of Navigator.
5. You will notice that Composer (the HTML Editor) looks very similar to Navigator (the web browser) but that some new toolbar and formatting buttons have appeared.
6. If you look closely, you will see that the Netscape "N" logo is missing on the right side of the toolbar. Note: We'll use that feature throughout these lessons to help us determine if we are using Navigator (with the "N") or Composer (without the "N").
7. On the Composer screen, type Room ## Class Webpage (Note: You guessed it… instead of Room ## you will type your room number followed by the words Class Webpage.)
8. Hit the Enter key two times and type:
   
   Room ##'s Class Webpage… (Press the return key)
   Type a paragraph or two describing your room, school, students, etc. (Press return)
   Here is a hyperlink to the Kings Canyon Unified School District Website. (return)
   
   
9. Click on the Save icon. Navigate to the folder that you created earlier. Change the file name from Untitled to default.html
   Note: As mentioned in the Before you begin... notes, if you do not name the webpage default and include the .html suffix, the KCUSD webserver will not recognize your webpage as a webpage and will return an error message.
   
   Formatting the Text on Your Webpage
   
   
10. Next, you will apply some formatting to the webpage text. The "rule of thumb" is that you must first select the text before applying formatting changes.
11. Drag across the first line Room ##'s Class Webpage while holding down the mouse button. This will select the text (indicated by the highlighting that appears).
12. Click on the Format menu, move the cursor down to Font and scroll down the list of fonts until you find Verdana.
13. Click on Verdana and notice that the selected text changes to the Verdana font.
14. Now, click on the little down arrow next to 12 and select 18 from the list that appears. Notice that the font size changes to the larger size 18 font.
15. Click on the font color toolbar button (the little multi-colored square) and select a new font color from the color chips that appear. You will notice that you have several options for selecting a font color.
16. You won't see the new font color until you move the cursor and click outside the selected text field. Do that now.
17. If you want to modify the changes that you made to your webpage, you will need to select the text again (hold down the mouse button while you drag across the text) before making the changes.
18. Click on the Save icon (the little floppy disk) to save your changes.
19. Now you will format the rest of the text on the webpage.
20. Drag across the rest of the text while you hold down the mouse button.
21. Select a new font and change the size to 14.
22. Don't change the font color right now… you can do that later if you wish.
    
    Adding HyperText Links to the Webpage Text
    
    
23. Next you will add a HyperText Link to the webpage.
24. Drag across the words Kings Canyon Unified School District while you hold down the mouse button (Note: Remember… you must first select the text before applying any changes to the webpage.)
25. Click on the Link button in the toolbar (hint: look for the little chain icon).
26. A dialog box will appear on the screen.
27. Notice that the words Kings Canyon Unified School District appear in the Linked text box near the top of the dialog box.
28. Type http://www.kingscanyonusd.k12.ca.us in the white Link To box. Important note: You must include the entire web address beginning with http:// or the hypertext link will not work.
29. Click on the OK button to activate the hyperlink.
30. Click on a white space outside the selected text and notice that the words Kings Canyon Unified School District are now underlined and appear in blue indicating that a hyperlink from your page to the Kings Canyon Unified School District website has been created.
31. Click on the Save icon to save the changes that you made.
32. It is time to see how the changes you made work. Click on the Preview button (the little ship's wheel) in the toolbar.
33. Navigator (the web browser) will move in front of Composer and your webpage will be displayed on the screen.
34. Click on the link you created and watch what happens.
35. If the link does not work, you will be able to fix the broken link when you return to Composer.
36. Click the Navigator close box in the upper left corner of the window to return to Composer.
    
    Adding Background Colors
    
    
37. Next, you will add some background color to the webpage.
38. Click on the Format menu and select Page Properties.
39. A new dialog box will appear. If the Colors and Background tab is not selected, click on that tab.
40. Click on the radio button in front of Use Custom Colors.
41. Click on the color chip in front of Background and select a new color from the color choices that appear.
42. Notice that the preview screen to the right of the color chips changes to reflect your selected background color.
43. Click on OK when you find a background color that you like.
44. Composer will display your new background color.
45. Click on the Format menu again and select Page Properties.
46. Select new Link Text and Followed Link Text colors.
47. Click on OK.
48. Click on the Save icon to save your changes.
49. Click on the Preview toolbar button to view your embellished webpage in the Navigator web browser.
50. Close Navigator by clicking the Close box.
    
    Adding Horizontal Lines
    
    
51. Position the cursor at the end of the Room ##'s Class Webpage.
52. Click on the Horizontal Line toolbar button (it looks like a hyphen).
53. Notice that a Horizontal Line has been added to the webpage. Horizontal lines are often used to separate sections on a webpage.
54. Position the cursor at the end of your webpage and press the return key.
55. Click on the Horizontal Line toolbar button again to add a horizontal line at the bottom of the webpage.
    
    Aligning Text on the Webpage
    
    
56. Select Room ##'s Class Webpage and click on the down arrow next to the Alignment button on the right side of the Formatting toolbar.
57. Select the Center Align button. Notice that the opening line of your webpage moves to the middle of the screen.
58. Select the rest of your webpage text.
59. Click on the Increase Indent and Decrease Indent buttons (to the left of the Alignment button). Notice how the selected text is repositioned on the screen.
60. Click the toolbar button again or select Undo from the Edit menu to remove the changes that you made.
61. Click on the Bullet List and Numbered List toolbar buttons. Notice how bullets and numbers are added to the webpage.
62. Click the toolbar button again or select Undo from the Edit menu to remove the changes that you made.
63. Click on a blank space outside the text to unselect the text.
    
    Applying Additional Formatting
    
    
64. Drag across one word on the webpage while holding down the mouse button to select one word.
65. Click on Bold, Italic and Underline toolbar buttons. Notice how the selected word changes as your select the formatting options.
66. Click the toolbar button again or select Undo from the Edit menu to remove the changes that you made.
67. Click on the down arrow next to the Font Color toolbar button and select a new color. Remember that you won't see the new color until you click on a blank space outside the selected text.
    
    Changing the Webpage Title
    
    
68. The last step in this activity will be to change the webpage Title.
69. Select Page Title from the Format menu.
70. Click on the General tab at the top of the dialog box.
71. Change the Title, Author and Description text.
72. Click on OK and notice that the Title that is displayed in the web browser's title bar has changed. The Author and Description won't appear on the webpage but will be saved in the HTML source code.
    
73. Click on Save to save your webpage.
74. Click on the Preview button to view your webpage in Navigator.
75. Close Navigator and Composer when you are finished.
    
    Continue on Your Own!
    
    
76. Now… You are ready to add some more text and hypertext links to your webpage. Be sure to save and preview your changes.

Fresno Pacific University | School of Professional Studies 
Website maintained by Bob Jost | Copyright © 1999-2000 All rights reserved