The first phase in learning how to create your own webpages is to create a simple, text-only webpage. You will be using the Netscape Composer HTML Editor which is part of the Netscape Communicator Suite.

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 (Your Name)'s First Webpage (Note: You guessed it… instead of (Your Name) you will type your first name followed by the words First Webpage.)
8. Hit the Enter key two times and type:
   
   This is my first webpage… (Press the Enter key)
   I am learning how to create my own webpages. (Enter)
   Bob Jost is my instructor. (Enter)
   Here is a hyperlink to the Yahooligans! Website. (Enter)
   
   
9. Note: You will probably want to create a new folder on your hard drive or on a floppy disk in which you will save the webpage and graphics associated with the webpage.
10. Click on the Save icon. Change the file name to your first name. Use only lowercase letters and do not include any spaces.
    
    Formatting the Text on Your Webpage
    
    
11. 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.
12. Drag across the first line (Your Name's First Webpage) while holding down the left mouse button. This will select the text (indicated by the blue background that appears).
13. Click on the little down arrow next to Variable Width and scroll down the list of fonts until you find Verdana. Mac Users: The fonts are located under the Format menu.
14. Click on Verdana and notice that the selected text changes to the Verdana font.
15. 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.
16. Click on the down arrow next to the black font color and select a new font color from the color chips that appear. Mac Users: you will see a color wheel instead of the color chips.
17. You won't see the new font color until you move the cursor and click outside the selected text field. Do that now.
18. 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.
19. Click on the Save icon to save your changes.
20. Now you will format the rest of the text on the webpage.
21. Drag across the rest of the text while you hold down the left mouse button.
22. Select the Verdana font and change the size to 14.
23. Don't change the font color right now… you can do that later if you wish.
    
    Adding HyperText Links to the Webpage Text
    
    
24. Next you will add several HyperText Links to the webpage.
25. Drag across the words Bob Jost while you hold down the left mouse button (Note: Remember… you must first select the text before applying any changes to the webpage.)
26. Click on the Link button in the toolbar (hint: look for the little chain icon).
27. A dialog box will appear on the screen.
28. Notice that the words Bob Jost appear in the Linked text box near the top of the dialog box.
29. Type http://www.josts.net/bob in the white Link to box.
30. Click on the OK button to activate the hyperlink.
31. Click on a white space outside the selected text and notice that the words Bob Jost are now underlined and appear in blue indicating that a hyperlink from your page to my website has been created.
32. Create another hyperlink.
33. Select Yahooligans! Website and create a hyperlink to http://www.yahooligans.com
34. Click on the Save icon to save the changes that you made.
35. It is time to see how the changes we made work. Click on the Preview button in the toolbar.
36. Navigator (the web browser) will move in front of Composer and your webpage will be displayed on the screen.
37. Click on the links you created and watch what happens.
38. Make a note of any hyperlinks that do not work. You will be able to fix the broken links when you return to Composer.
39. Click the Navigator close box to return to Composer.
    
    Adding Background Colors
    
    
40. Next, you will add some background color to the webpage.
41. Click on the Format menu and select Page Colors and Properties.
42. A new dialog box will appear.
43. Click on the radio button in front of Use Custom Colors.
44. Click on the color chip in front of Background and select a new color from the color chips that appear.
45. Notice that the preview screen to the right of the color chips changes to reflect your selected background color.
46. Click on OK when you find a background color that you like.
47. Composer will display your new background color.
48. Click on the Format menu again and select Page Colors and Properties.
49. Select new Link Text and Followed Link Text colors.
50. Click on OK.
51. Click on the Save icon to save your changes.
52. Click on the Preview toolbar button to view your embellished webpage in the Navigator web browser.
53. Close Navigator by clicking the Close box.
    
    Adding Horizontal Lines
    
    
54. Position the cursor at the end of the (Your Name)'s First Webpage.
55. Click on the H. Line toolbar button.
56. Notice that a Horizontal Line has been added to the webpage. Horizontal lines are often used to separate sections on a webpage.
57. Position the cursor at the end of your webpage and press the Enter key.
58. Click on the H. Line toolbar button again to add a horizontal line at the bottom of the webpage.
    
    Aligning Text on the Webpage
    
    
59. Select (Your Name)'s First Webpage and click on the Alignment button on the right side of the Formatting toolbar.
60. Select the Center Justify button from the drop down buttons. Notice that the opening line of your webpage moves to the middle of the screen.
61. Select the rest of your webpage text.
62. Click on the Increase Indent and Decrease Indent buttons. Notice how the selected text is repositioned on the screen.
63. Click the toolbar button again or select Undo from the Edit menu to remove the changes that you made.
64. Click on the Bullet List and Numbered List toolbar buttons. Notice how bullets and numbers are added to the webpage.
65. Click the toolbar button again or select Undo from the Edit menu to remove the changes that you made.
66. Click on a blank space outside the text to unselect the text.
    
    Applying Additional Formatting
    
    
67. Drag across one word on the webpage while holding down the left mouse button to select one word.
68. Click on Bold, Italic and Underline toolbar buttons. Notice how the selected word changes as your select the formatting options.
69. Click the toolbar button again or select Undo from the Edit menu to remove the changes that you made.
70. 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
    
    
71. The last step in this activity will be to change the webpage Title.
72. Select Page Colors and Properties from the Format menu.
73. Click on the General tab at the top of the dialog box.
74. Change the Title, Author and Description text.
75. Click on OK and notice that the Title that is displayed in the blue title bar has changed. The Author and Description won't appear on the webpage but will be saved in the HTML source code.
    
76. Click on Save to save your webpage.
77. Click on the Preview button to view your webpage in Navigator.
78. Close Navigator and Composer when you are finished.
    
    Try it on Your Own!
    
    
79. Now… You are ready to create another webpage to review the skills that you learned.

Website maintained by Bob Jost | bjost@josts.net | last revised July 30, 2000

Copyright © 1997-2000 by Bob Jost.  All rights reserved. No part of this website may be
transmitted, stored or recorded in any form without written permission from the author.