Sample click-box: ··

If you:

1. have never created web pages before
2. would like to create web pages containing some of your lecture materials
3. are familiar with the basics of using a PC or Mac
4. are familiar with a word processor (e.g. Word)

You may believe that in order to create web pages, you need to learn a special "computer language", e.g. HTML.  Or, you may be aware of (possibly costly) editor-like tools, like Front Page, that will do some of this job without your having to learn HTML.  You may also know that there are "special effects" that a particular editor-tool doesn't allow you to create, and whose use requires that you "drop into" HTML.

This tutorial will show you how to use a (free) editing tool that comes as part of the Netscape Navigator application, called Composer.  It is mainly for creating "static" pages, but I will show you how to create one "special effect" -- a click-box, that will make your pages interactive in a somewhat primitive, but particularly useful way.

For an example of a lesson (from a course, Topics in Mathematics, that I teach) that has been created using Composer in the ways I am about to explain, click here.

Instruction will proceed as though you are working from a PC (IBM compatible), but most of it will carry over to Apple computers as well.  I am assuming some basic familiarity with the PC (or Mac), with a web browser, and word-processing in general.

This is not a comprehensive tutorial on all the in's and out's of Composer.  It is, to a large extent, a discusssion of those features of Composer that I have found useful in creating web-browsable lessons for my courses.

You should be viewing this page from a Netscape browser window.  If you are using Internet Explorer, click out of IE and view it in Netscape.

At the top of the Netscape browser window you will find a menu bar, containing a list of pulldown menus, the first of which is File.  Click on the File menu, and then move the cursor to the New selection.  This is what you should see:

Now click on Blank Page.  This will take you into Composer, in a window that looks like:

Subsequently, we will abbreviate the series of actions just described as follows:

File..New..Blank Page

Notice that your page is "untitled".  Do Format..Page Colors and Properties.  On that form, fill in the Title field.  If you want as colored background, click on the Colors and Background tab, click on Background, and select a color from the palette.  When you click the OK button, you should see your new title and background color.

It is a good idea to "save often."  Then if something untoward happens, you will not lose all your work.  The first time you save a newly created page, you will have to give it a file name, and indicate the folder into which it is to be placed.  Do File..Save As, and you will see a form that will allow you to specify a folder via the Save in field.  Also specify a name "name.html" via the File name field.

On subsequent saves, having already established file name and folder, you can simply click the Save icon on the Composition Toolbar at the top of the window.

1. view the page in Netscape
2. do File..Edit Page

Notice that the Taskbar (at the bottom of the page) shows a Composer task (marked by a blue triangle and pen) and a Netscape task (blue triangle and ship's wheel).  Here's what to do:

1. While still in Composer, do Save, so that all your changes are saved to disk.
2. Click on the Netscape task.  This makes the Netscape window active, but you will be looking at the old version of your page (before your changes).
3. From Netscape, do Reload.  This should update your screen to show the changes just made.
4. To go back to Composer, click on the Composer task.

You may wish to select text (or even a table or image) in order to:

• move it to another place on the page, or to a different page
• copy it to another place on the page, or to a different page

• select one word by double-clicking it
• select a whole line by clicking to its left
• select a whole paragraph by double-clicking to its left
• select arbitrary contiguous text by
• dragging the cursor over it, or
• click at the beginning of the text to be selected, hold down the shift key, and click again at the end of the text to be selected

The Formatting Toolbar lets you specify (from left to right): heading style, font type (Times New Roman, Ariel, etc.), font size, font color, font style (bold, italic, underline), and remove styles.  The remainder of this toolbar will be discussed subsequently.  These features are self-explanatory for the most part, except for remove styles, which simply returns composition to the base text style (e.g. for this document base text style is: Times New Roman, size 14, plain style, black) of the document.  Examples of the various styles follow.  Note that "red" is in a different font type: Ariel.

The quick red foxjumped over the

Clicking on H. Line on the Composition Toolbar will create a horizontal line (as seen at the end of each of these topics).  You may alter the characteristics of the line by clicking on the line itself and responding to the form.

• click before the text to be deleted, then repeatedly press the Delete key, or
• click after the text to be deleted, then repeatedly press the Backspace key, or
• select the text to be deleted, and press the Delete key or click the Cut icon

Select the text to be moved, then do one of the following:

1. place the cursor over it -- you will see a hand
2. drag the text to where you it

1. do Cut
2. click where you want the text
3. do Paste

Select the text to be moved, then do one of the following:

1. place the cursor over it -- you will see a hand
2. while holding down the Control key . . .
3. drag the text to where you want it

1. do Copy
2. click where you want the text
3. do Paste

First, click in the paragraph to be aligned or indented.

to align left: do Ctrl-e (or use the Alignment icon on the Formatting Toolbar)

To indent right: click the Increase Indent icon (right arrow) on the Formatting Toolbar.  You can do this several times to get more indenting.
To indent left: click the Decrease Indent icon (left arrow) on the Formatting Toolbar.

To create  a list:

1. click on the Bullet List or Numbered List icon on the Formatting Toolbar -- a bullet or #-sign will appear
2. type a list item
3. press Enter -- you will start a new item
4. repeat for each list item
5. press enter one last time -- you will again get bullet or #
6. now re-click the List icon you clicked on to get started --  this will terminate your list

1. click where you want the break
2. press the Enter key

1. select the paragraphs
2. click on the appropriate List icon

• item
• item
• sub-item
• sub-item
• item

Links are the familiar underlined items that you can click on from your browser to go to a different page (external link), or somewhere else on the same page (internal link).  Here's an external link to a different page, Part II of this tutorial.  Click on it, then click on Back to come back here.  Here's a link to a previous section in this page, Lists.  Click on it, then Back.

External links

1. select that portion of text that will serve as the (underlined) link
2. click on the Link icon on the Composition Toolbar
3. if the page you wish to link to is:
• in the same folder as the current page, just fill in the Link to text... field with the file name of the page; e.g. myfile.html
• unrelated to the current page, fill in the Link to text... field with the complete URL of the page; e.g. http://austin.cc.tx.us/sarah/sarahpage.html

Create a target (a named location in your page):

1. click where the target is to be
2. click on the Target icon
3. give your target a name

1. select that portion of text that will serve as the (underlined) link
2. click on the Link icon on the Composition Toolbar
3. select the target you have just created from the list shown in the form

When a viewer clicks on a mail link, e.g. mail me, the browser will open a window of a mail program, into which you can write a message to the e-mail address specified by the link.  A mail link is created using the Link icon, but takes on a special form:  "mailto:" followed by the e-mail address.  Note that if you move the mouse over the above link, the link is seen to be "mailto:powens@austin.cc.tx.us".  You must write the "mailto:" exactly as shown:  lower case, no blanks!

Unlike Word files, whose images are embedded in the file itself, browser page images are stored in separate files, usually (but not necessarily) in the same folder with the page itself.  Image files are typically files whose name ends in ".gif" or ".jpeg".

Including an image in a page

1. click where you want the image to appear
2. click on the Image icon
3. fill in the Image location text box in the form:
• if it is an image that is being stored in the same folder as the page, just type its name, e.g. "myimage.gif"
• if it is a remote image (somewhere else on the web), type its complete URL
4. if necessary, click on the style of text alignment that you want
5. notice that there are other image properties that you can specify, principally Dimensions (size)

1. click on the image
2. click on the Image icon
3. alter properties to suit:
• text alignment
• size -- note that if "constrain" is checked, the original proportions of width-to-height (aspect ratio) will be preserved
• etc. (experiment with them!)

Tables are useful for:

• presenting tabular data (grid shown):

• placing things where you want them on a page (grid not shown):

• emphasizing important points by "boxing" them:

Notice that a table can have a background color.  In fact, each cell can have a different color:
 

Creating a table

• click where you want the table to be
• click the Table icon -- the main things to fill in the form are:
1. Number of rows and Number of columns
2. uncheck Border line width if you don't want to see the grid
3. specify Table width (as % of window)
4. uncheck Equal column widths if you want your table to adjust column width automatically to the amount of information typed into cells
5. check Use Color (and select it) if you want a colored background

• click in the row or column after which you want the new one
• do Insert..Table..Row (or Alt-i-t-r) or Insert..Table..Column

1. click in the row or column you want to delete
2. do Edit..Delete Table..Row (or Alt-e-l-r) or Edit..Delete Table..Column

1. click somewhere in the table
2. do Format..Table Properties
3. note that the form has three tabs: Table, Row, and Cell, each with appropriate properties

This final editing topic shows how to make a page interact with the user in a limited, but useful way, and without a steep learning curve on the part of the page author.

Here's an example:

The remainder of 10 ¸ 3 is 1
What is the remainder of 15 ¸ 4? ··   Click on the box to see the answer.

You don't need to learn HTML to do this; just follow the directions:

Tell the browser you will be using a Form element
(you only need to do this once for each document)

1. click at the top of your page
2. do Insert..HTML Tag
3. type the 6 characters: <form>
4. click on OK

1. go to the end of the page
2. do Insert..HTML Tag
3. type the 6 characters: </form>
4. click on OK

Insert a click-box
(do this for each click-box you want)

1. go to this tutorial
2. edit it in Composer
3. select the click-box shown in the Table of Contents, including the two "·" delimiters
4. copy that click-box into your document as follows:
1. click on Copy
2. go back to the document you are creating (in Composer)
3. click where you want your click-box to be
4. click on Paste
5. customize the copied click-box
1. double-click on the yellow tag
2. replace the characters 3.14159 by a message of your choice
3. make the size field bigger or smaller accordingly (you can adjust the size more accurately after you review your page in Netscape)
4. click on OK

Notes:

• once you have acquired one click-box from this document, you can acquire the rest from your own document by copying and customizing
• if you need to insert many click-boxes, you can do one Copy, and then repeated Paste's
• the role of the "·" delimiters is to make the style of the click-box text Arial-16 pt.-bold, which makes the text easy-to-read -- you can use any style you wish.
• before you resume typing following a click-box, be sure to click Remove All Styles first, to remove the style of the delimiters and go back to your base style
• don't forget to insert the <form> tag -- without it the click-box will not show, and it will make you crazy (believe me, I know!)
• if you wish your message to display single quotes (') or double quotes ("), you must use an escape (backslash) character (\) before the quote.  Thus, value="I\'m hip" will cause I'm hip to be displayed.

Presentation