| Using
Composer, the Netscape HTML Editor, to create a Web page.
Overview
In this section, we will learn how to create a Web Page
using the HTML Editor, Netscape Composer. Composer
works like a wordprocessor, but when you save your Page (your document),
it goes onto your computer in HTML (i.e. Web) format. You can
then look at it in your Browser as if it were on the Web.
We will learn how
to do the following things, using Composer:
-
Enter Text, change its size, colour
and the way it fits onto the page (left justified, centred, right justified)
-
Insert a Picture into your page.
-
Add a Link, so that when it is clicked on, another
page or another location will be reached.
-
Save the page to the computer's hard drive or to a
floppy disk.
-
Retrieve an existing page from disk into your browser
As you are editing, you may want to look at your page in
your Browser (Netscape Communicator), to see what it looks
like. Remember, we are dealing with two different programmes here:
1. The Browser, which lets you look at
the Web pages and interact with them.
2. The HTML Editor, which lets you create and
edit the pages.
Both look similar on screen, but their buttons and menus
are different. When you are in the HTML Editor, things look
more or less like they will in the Browser, but your links
will not work. This is a bit like using a wordprocessor and then
printing out what you have done; what you see on the printed page is not
always exactly like what you see on the screen.
Here now are step by step instructions to
1. Create two pages, each with a picture.
2. Add links so you can jump from the first page to the
second.
Start your Editor
From your Netscape Browser (Communicator) :
On the top toolbar, click File,
then select New, and click Blank Page.
A faster way to get to Composer is to click on the
icon at the bottom extreme right hand side of the screen. The icon looks
like a writing pad with a pen on top. If you roll over that icon with your
mouse, a yellow rectangle called "composer" will pop up.
A window will open with a different set of tool bars at
the top. You are now in the HTML Editor, Composer.
Start a Page
You are now ready to create your own page.
You may want to explore the buttons on the grey toolbars
at the top of the screen. On most computers, a yellow rectangle (with text
inside it) appears when the mouse is over the button. In this booklet,
we will refer to the buttons on the toolbar by using
an italic font.
We will be using the middle row of the
toolbar to import and move text and images around on the page (cut, copy,
paste), and the bottom row to change the size and font of characters,
add colour, indent and align (left, right, centre).
Title
1.Type a title in the main white area:
A Trip to Quebec City (page 1)
2. Highlight this title with your mouse by placing
the cursor at the beginning of the title and then left clicking and dragging
the mouse to the right; you can now lift your left finger up and your title
will stay highlighted in blue. Move your cursor to the far left side of
the bottom tool bar where you see "Normal" written inside
a white box. Click on the arrow pointing down and select "Heading
1." The different numbers beside "Heading" simply
changes the size of the font. Search Engines look for the "Heading"
title when they are selecting Web pages.
3. To move the title to the centre of the page,
move your cursor to the far right side of the bottom toolbar. A yellow
text box will let you know that you can change the "Alignment"
of your title. Left click on the button and select the centre text alignment.
When you press "Enter," your cursor will remain centred until
you readjust the alignment to the left.
4. To change the size of font, left click on the
down pointing arrow beside the third box from the left (with the number).
Play around with the
different sizes
of font.
5. The box beside the font size box changes the colour
of text. Hightlight your title then select another colour by left clicking
on the down pointing arrow and clicking on the colour of your choice.
6. You can bold, italicize, and/or
underline your text by highlighting and then clicking on the A,
A, A buttons. Click away from your hightlighted text to see
the results.
To remove all font settings, click on the A with a blue
eraser on it.
Picture
Now let's insert one of the pictures you have on your
floppy disk.
1. Move the cursor to the end of the first line.
2. Hit the ENTER key twice to bring the cursor
down 2 lines.
3. Click on the Image button on the middle
toolbar. It looks like a white rectangle with three colored geometrical
shapes in it.
4. A window will pop up called "Image Properties."
Click on the "Chose File..." button to retrieve the image from the
"31/2 Floppy (A:)" drive. You access this drive
the same way we did earlier to get to the bookmarks.
5. We have a number of images already saved
for you on the floppy disk. The images we will be dealing with are called
GIFS [gIfs]
or JPGS "J pegs." They are easily identified
on your disk because they are files that end with .gif or .jpg.
Double click on the yellow folder called Student.
6. Look for the quebec11.jpg file, click on this
file, click OK, and then OK again at the bottom.
You will have a picture of the Chateau Frontenac
Hotel!
7. You can move this picture around on your page by clicking
on the picture to select it and clicking the Align Left, Centre or Right
buttons we used earlier. You must click outside of the picture to unselect
it before going on.
Save
1. Save this first page by clicking the Save
button (it is represented by a disquette). A window will pop up called
"Save As."
2. Select the "31/2 Floppy
(A:)" drive and type in "fron.html" in the white box called "File
name."
3. Click on the "Save" button.
Congratulations! You have now created your first
Web page.
Link
In this part, we will enter some text and create a link
from it to another Web page.
1.Type the following comment under the picture:
In Quebec City, you can visit the Chateau Frontenac Hotel.
From the hotel, you can walk to a small street called the Tresor Street.
2. Highlight "Tresor Street" and click on the "Link"
button, which is represented by a chain. A window will appear called
"Character Properties."
3. Click inside the second long white box called "link
to a page location or local file," and type tresor.htm
4. Click OK; the text will appear in a different
colour and it will be underlined.
5. Save your work again.
You have made your first link. When someone clicks on "Tresor
Street", the browser will jump to a page called "tresor.html. However,
you have not created this "tresor.html" page yet so we had better do that.
Start a second page
Click on the "New" button at the far left
hand side of the middle toolbar. A window pops up called "Create New
Page." Click on the button called "Blank Page."
You have opened up a new "Untitled - Netscape Composer"
page.
1.Type the title:
A Trip to Quebec City (page 2)
2. Highlight this title with your mouse by placing
the cursor at the beginning of the title and then left clicking and dragging
the mouse to the right; you can now lift your left finger up and your title
will stay highlighted in blue. Move your cursor to the far left side of
the bottom tool bar where you see "Normal" written inside
a white box. Click on the arrow pointing down and select "Heading
1."
Insert a second picture
1.Move the cursor to the end of the first line
2. Hit the ENTER key twice to bring the cursor
down 2 lines.
3. Click on the Image button on the middle
toolbar. It looks like a white rectangle with three colored geometrical
shapes in it.
4. A window will pop up called "Image Properties."
Click on the "Chose File..." button to retrieve the image from the
"31/2 Floppy (A:)" drive.
5. Double click on the yellow folder called "Student"
(the same way we did for the first image.)
6. Look for the "quebec04.jpg" file, click on this file,
click OK, and then OK again at the bottom.
You will see a picture of Tresor Street.
7. Save your work again.
Enter text and create a link to
another file
1.Type the following statement under the picture:
You can see Tresor Street. It is very small.
You will find this street near the Chateau
Frontenac Hotel.
2.Highlight Chateau Frontenac Hotel and click on
the Link button (the one with the chain link).
A window will appear called "Character Properties."
3. Click on the button called "Choose File... " that is
beside the second long white box called "link to a page location or local
file."
4. Find the file called "fron.htm" in the "31/2
Floppy (A:)" drive. Click on this file.
5. Click OK and then click OK on the other
box. The text will appear in a different colour and it will be underlined.
Save
1.Save this page by clicking on the Save
button.
2.Call it "tresor.htm"
You have just created a second
page. Now we are ready to try your links out.
-
Click the View in Browser button. This
is the yellow and green one with half a ship's wheel.
Your
page is now open in the browser. Click on the link Chateau
Frontenac Hotel to go directly to the other page where you
will get some information about the hotel.
Close
At the bottom of your screen, you will see buttons with
a pencil icon that have the names of the files you have just created.
Click on one of them, and your file will reappear on the screen.
To close your file, click on File
on the top toolbar and select Close. Repeat for the
other files.
This ends the first part of your editing training.
Retrieve
To open one of your pages in your browser, click File
and click Open Page. Make sure you are in the
A: floppy drive. Click on the file you want to see and click OK.
Second Language Teaching
with the Web: ALLE Project
|
