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/Mozilla Composer HTML Editor which is part of the Netscape/Mozilla Suite.

Follow these steps to launch Netscape/Mozilla Composer.

1. Open the Netscape/Mozilla web browser
2. The 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 Window menu and select Composer.
4. Composer will open in a new window in front of the web browser.
5. You will notice that some new toolbar and formatting buttons have appeared.
6. 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.)
7. 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)
   Instructor Name is my instructor. (Enter)
   Here is a hyperlink to the Yahooligans! Website. (Enter)
   
   
8. 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.
9. 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
   
   
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 (Your Name's First Webpage) while holding down the left mouse button. This will select the text (indicated by the background that appears).
12. Click on the Format menu move the cursor down to Font. Move to the list of fonts 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 Format menu again and this time select Size. Start with Medium. Notice that the font size changes.
15. Click on Format again and this time select Text Color. Select a new font color from the color chips that appear. Mac Users: you will see a color wheel instead of the color chips.
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 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 left mouse button.
21. Select the Verdana font and change the size to medium.
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 several HyperText Links to the webpage.
24. Drag across the words Instructor Name while you hold down the left 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 Instructor Name appear in the Linked text box near the top of the dialog box.
28. Type http://www.josts.net/bob in the white Link to box.
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 Instructor Name are now underlined and appear in blue indicating that a hyperlink from your page to my website has been created.
31. Create another hyperlink.
32. Select Yahooligans! Website and create a hyperlink to http://www.yahooligans.com
33. Click on the Save icon to save the changes that you made.
34. It is time to see how the changes we made work. Click on the Browse button in the toolbar.
35. The web browser will move in front of Composer and your webpage will be displayed on the screen.
36. Click on the links you created and watch what happens.
37. Make a note of any hyperlinks that do not work. You will be able to fix the broken links when you return to Composer.
38. Click the browser close box to return to Composer.
    
    Adding Background Colors
    
    
39. Next, you will add some background color to the webpage.
40. Click on the Format menu and select Page Colors and Background.
41. A new dialog box will appear.
42. Click on the radio button in front of Use Custom Colors.
43. Click on the color chip in front of Background and select a new color from the color chips that appear.
44. Notice that the preview screen to the right of the color chips changes to reflect your selected background color.
45. Click on OK when you find a background color that you like.
46. Composer will display your new background color.
47. Click on the Format menu again and select Page Colors and Background.
48. Select new Link Text and Followed Link Text colors.
49. Click on OK.
50. Click on the Save icon to save your changes.
51. Click on the Preview toolbar button to view your embellished webpage in the Navigator web browser.
52. Close Navigator by clicking the Close box.
    
    Adding Horizontal Lines
    
    
53. Position the cursor at the end of the (Your Name)'s First Webpage.
54. Click on the Insert menu and select Horizontal Line .
55. Notice that a Horizontal Line has been added to the webpage. Horizontal lines are often used to separate sections on a webpage.
56. Position the cursor at the end of your webpage and press the Enter key.
57. Repeat the steps above to add a horizontal line at the bottom of the webpage.
    
    Aligning Text on the Webpage
    
    
58. Select (Your Name)'s First Webpage and click on the Alignment options on the right side of the Formatting toolbar.
59. Select the Center Justify option. Notice that the opening line of your webpage moves to the middle of the screen.
60. Select the rest of your webpage text.
61. Click on the Increase Indent and Decrease Indent buttons. Notice how the selected text is repositioned on the screen.
62. Click the toolbar button again or select Undo from the Edit menu to remove the changes that you made.
63. Click on the Bullet List and Numbered List toolbar buttons. Notice how bullets and numbers are added to the webpage.
64. Click the toolbar button again or select Undo from the Edit menu to remove the changes that you made.
65. Click on a blank space outside the text to unselect the text.
    
    Applying Additional Formatting
    
    
66. Drag across one word on the webpage while holding down the left mouse button to select one word.
67. Click on Bold, Italic and Underline toolbar buttons. Notice how the selected word changes as your select the formatting options.
68. Click the toolbar button again or select Undo from the Edit menu to remove the changes that you made.
69. 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
    
    
70. The last step in this activity will be to change the webpage Title.
71. Select Page Title and Properties from the Format menu.
72. Change the Title, Author and Description text.
73. 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.
    
74. Click on Save to save your webpage.
75. Click on the Browse button to view your webpage in the web browser.
76. Close the browser and Composer when you are finished.
    
    Try it on Your Own!
    
    
77. 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 21, 2004

Copyright © 1997-1999 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.