Creating a Web Page using

Step 2:
Once Mozilla is launched, you will see a typical web browser window. To start creating a web page, go to the menu item:
File > New > Composer Page

Step 3:
At the top, you see many icons that are similar to those found in a word processing application such as new, open, save and print.

Other icons are unique to web authoring, such as image, which lets you insert an image in your page, and table, which lets you insert a table. Also, you see the link icon, which lets you create a hyperlink in your page.

On the next tier of icons, you have many of your text formatting tools.

On the very left, you can choose the format for the type of text you are typing, whether part of the text body or a heading. Next, you can choose the color of your text by clicking on the black box in the foreground and the color of your background by clicking on the white box in the background. The small and large A’s let you change font size, and you can choose if you want your text bold, italicized or underlined. Finally, you can add in bulleted or numbered lists and choose a justification for your text.

At the bottom of the window you see tabs.

These will allow you to toggle between different views. There is normal view, which is the default view you see now, and the tags view, which shows what part of the page you are working on. The code view shows the HTML code for your page and the preview tab will show you what your page will look like in a browser window.

Saving your Page

Before you get very far along on your page, you will want to save it:

Step 1:
Go to the menu item File > Save As
A window will pop up asking you to give a title to the current page. This will be the title that appears in the blue bar at the top of the page, and will be the default title suggested by the program as you continue to save. Go ahead and type in a title and click O.K. Then, the standard Save window will open. If you are satisfied with the suggested title, go ahead and leave it. Browse to where you want your document to be saved and click Save.

Step 2:
To continue saving your work as you go along, go to the menu item File > Save. Notice that when there are no changes to save on the page, the Save selection is grayed out.

Formatting Text

Apply formatting to the text of your page:

Step 1:
To format text, use your mouse to highlight the desired text. Then look in the toolbar at the top of the window to choose from the various formatting options.

Step 2:
Apply formatting changes:

To increase the font size of the selected text, click on the large “A”

To bold the selected text, click on the bolded “B”

To align the text to the center, click on the “align center” button

Insert a Table

To insert a table into your web page:

Step 1:
Go to the menu item Insert> Table.

Step 2:
Specify the number of rows and columns you want in the table.

Step 3:
Determine how big you want the table by specifying the table width in terms of the percent of the page it will take up.

Step 4:
Specify how thick or thin of a border you want around the table.

Step 5:
Click O.K.

Step 6:
To align the table, first make sure that your cursor is in the table. Then, go to the menu item Table and then to Select > Table. This will highlight the entire table. Then click on the “align center” button in the tool bar.

Inserting an Image

To insert an image from one of your files into your web page:

Step 1:
Go to the menu item Insert > Image.

Step 2:
Click on the “choose file” button. Browse to where your image is saved and select it by clicking on it once. Then click the “open” button.

Step 3:
Back in the image properties window, enter an appropriate description in the “alternate text” field. Then click O.K.

Step 4:
To align the image: Use your mouse to click on it so that it is highlighted blue, then click on one of the alignment buttons.

A note on File Management:

A web page with images in it is actually a collection of files. You have one file that is your web page containing the HTML code. And when you insert an image, you introduce another file, the image file. The image file does not live within your web page; it exists independently. Your web page only contains directions on how to retrieve the image, which is usually the file name of the image. These directions are called the relative path. This kind of structure means you need to respect the relative path and be careful to always save your image and your web page in the same location - usually a single folder. If you put them in separate folders, the web page will not be able to find or display the image. ALSO… NEVER put spaces in file names!

Making Hyperlinks

To create hyperlinks to other pages, or create internal links using a named anchor:

Step 1:
Use your mouse to highlight the text you want to be a link .

Step 2:
Next go to the toolbar at the top of the window and click on the “link” button.

This will open a new window – the link properties window.

Step 3:
Type in the URL in the window and click O.K.

Internal Links

Step 1:
To create an internal link, first make a named anchor:

Place your cursor where you want to put the anchor (example: if you are creating a "Back to top" link, you will put the anchor at the top of the page).

Step 2:
Next, go to the menu item Insert > Named anchor.
This will open a new window where you can type in the name of the anchor. Name it something simple, like "top."
Click O.K.
The little yellow anchor icon that appears is the named anchor (the icon will not be visible on the web).

Step 3:
To link to the named anchor, place your cursor where you want the link to exist (example: if you are creating the "Back to top" link, you will make the link at the bottom of the page).
Next, highlight the text that you want to make into a link with your mouse and click on the “link” button on the toolbar at the top of the window.
Step 4:
In the Link Properties window that will open, type in #titleofyournamedanchor.
The “#” sign indicates that it is a named anchor you are linking to.
Click O.K.

Modifying Page Properties

To modify page properties to change the background color of your page or the color of your text:

Step 1:
Go to the menu item Edit > Preferences .

Step 2:
Go to the Appearance category and double click on it.

Step 3:
To change the background color of your page, click on the subtopic “colors”. Then, in the right hand side of the window, click on the colored square next to “background” (or “text” or “visited links”). A grid of palettes will appear; use your mouse to select the color you prefer.

Return to Lab