Making a Web Page

You will remember that before you start to make any web page, you must first create a folder for it. So go ahead and do that. Give it any name (using the Internet naming rules you learned--lowercase, no spaces, no puctuation or symbols).

Now we are ready to begin. Open Mozilla, and open Composer (in the WINDOWS menu).

You should see a blank page with a few toolbars at the top.

IMPORTANT: the first thing you should do now is SAVE THE BLANK PAGE in the folder you created. If you don't do this at the very beginning, then your page might have problems.

Remember to save the page as "index.html" in the folder you made.

When you save the page for the first time, Composer will ask you to give your web page a TITLE.

You can give the page any title. However, Composer has a strange flaw: it takes the title you wrote and suggests it as a file name for the web page!

You must correct this, and make the web page name follow the rules we learned. Please do that...

And now that you have saved the page, you can start creating!

Like MS Word

Using Composer is a lot like using MS Word. Just start typing! You can see the toolbar buttons for bold, italics, underline; you can see the left/center/right/justify alignment buttons. You can see the indent buttons. All of these work the same as MS Word.

A few of the controls are different, however. For example, the color buttons. You will see them on the left, right next to the text size buttons. They look like two small squares, one black and one white:

The bottom-right button is for the background color. Click on this to select a background color for the page, or for a section of the page.

The top-left one (usually black) is the text color. This is the same as the FONT COLOR command. Select any text, then click the text color button and choose a color.

These two color buttons are only for SELECTED items. If you want to change the colors for the WHOLE PAGE (e.g., BODY BGCOLOR TEXT command), then go to the FORMAT menu and select PAGE COLORS AND BACKGROUND. There, you can select the text and background colors (or a background image) for the whole web page.

The Whole Toolbar

This is how the Mozilla toolbar might look (you might have to change the Mozilla Theme to "Modern" in the "Appearances" pane of the Preferences Dialog Box).

Main buttons are at the top:

  • New: New blank web page document
  • Open: Open an existing web page
  • Save: Save your web page
  • Publish: Send your web page to your web site
  • Browse: After saving, view your web page in a regular browser window
  • Print: Print the web page
  • Link: Create a link on your web page (after you select the text or image you wish to make a link)
  • Image: Insert an image and control it
  • H. Line: Insert a Horizontal Rule (this button may not appear until you choose it in Preferences)
  • Table: Crate a table (I explain that later)
  • Spell Check

Below that are formatting buttons:

  • Local Colors: Non-global coloring for text and background (see below)
  • Font Size: Small/Large
  • Bold
  • Italic
  • Underline
  • Bullet List
  • Numbered List
  • Remove/Add indent (Blockquote)
  • Left/Center/Right/Justify Alignment

Don't worry about the extra three buttons.

Links

Links are easy to make. First select the text you want to make into a link. Then click the link button:

Then just type the link address into the dialog box.

Remember, if the link is to another page you made (in the same folder, of course), then just type the name of the file name (for example, "page2.html"). If the link is to an outside web page, then type the whole address, starting with "http://". Or, you can go to the page you want to link to, select the address in the address bar, and then copy the address. Come back to Composer, and then paste the link address!

Next, we'll use some images.