Integrating Technology in the Second Language Classroom

Netscape (no longer supported):
HTML Introduction: Making your first WWW page

Step 1

Before you start, you need to read the information contained in several of the links on the  Beginning WWW pages.  If you have not done this, STOP! Do not pass go, do not collect $200, you are in BIG trouble. Go back and do your homework by reading those pages; then return here.

Step 2

Before you begin construction, you also need to have a general idea of what you want your page to look like, what it is intended to do, and, consequently, how you will oganize it.  Below are some basic things to consider when planning your first web page:

• What's the purpose of the page? Are you providing a service, a product, or entertainment?
• Who is your intended audience? Knowing your readers helps you shape the information content and pick a consistent voice to address them.
• How do you intend to structure the information? For multiple page projects or sites, it is common to see at least two levels of hierarchy: a top level index and second-level pages. Put as much content toward the top of a hierarchy as possible. This way, even the casual reader can quickly grasp the sort of information you're presenting, and that may be just the hook to keep the person interested.  For your first page, this will not be such an issue, but the principle still holds.

Step 3

Open up Netscape Communicator (version 4 or version 7).  Go to File/New/Blank page.  Voilà:  the bare bones of your first WWW page!  You are now in Netscape Composer, Netscape's user-friendly and free HTML editor.  You also have a different set of toolbars across the top, which will be very helpful to you in constructing your page.  One  is called the Composition (or Command) Toolbar, and the other is the Formatting Toolbar.  Let's look at them separately.

Composition Toolbar

In addition to the pull-down menus across the top, which function just like regular computer menus, the Composition Toolbar provides icon shortcuts to composition commands for your page.  You can find out more about items in the toolbar by looking at the pop-up text that appears when you move your mouse over each icon. Moving across horizontally, they are:

New:  opens up a dialog box that lets you create a new page from a blank page, a template, the page wizard, or from a local file on your disk.

Open: will let you search for and open a local HTML file.

Save:  lets you save your work on the current page.

Publish:  allows you to "publish" your page on the web, provided you have the proper connection and configurations.

Preview:  shows you how the edited page will look in the browser.

Cut:  eliminates text, images, whatever you want to cut from the page.

Paste:  puts in something you have copied from elsewhere, just as in your word processor.

Print:  obvious, we hope.

Find:  provides a dialog box where you can type the text you are looking for.

Target: allows you to insert targets in your page (don't worry about this now).

Image:  allows you to insert an image into the page.

H. Line:  inserts a horizontal rule line across the page.

Table:  inserts a table and provides a dialog box that allows you to choose table properties (e.g., # of rows, columns, etc.).

Spelling:  checks the spelling in your document..
 

 Formatting Toolbar

The icons on this toolbar are shortcuts for many of the pull-down menu formatting functions.  Once you learn the icons, you can quickly reformat your document and make changes that will enhance its appearance.

Moving across, the formatting options available on this toolbar are as follows:

  Normal:  pull-down menu that offers various options for heading sizes (Body Text in ver. 7)

  Variable Width:  pull-down menu that allows you to select from many different font styles (Format / Font menu in ver. 7)

  12:  pull-down menu that allows variability of font size (-a +a in ver. 7)

  Color square:  format text color with this pull-down menu ( in ver. 7)

  A, A, A: choice of bold, italics, and/or underlined, respectively

  A w/eraser:  Removes all styles  (Format / Remove all text styles in ver. 7)

  Bullet list:  Emphasize listed items, with options for bullet symbols

  Numbered list:  Number series of items

  Indent control:  Decreases or increases indent of selected text and/or images

  Alignment:  Pull-down menu that allows right, left, or center alignment

• Begin construction of your web page.  This page is about YOU.  Convey some basic information about yourself to the reader:  e.g., name, hometown, major, interests, email address. (If you prefer, you may use some other topic that you know as much about, but keep it simple ;-)

• You will need a photo of yourself (or you may use some other image if you prefer).

• If you want to place your picture on the page and have a description or introduction beside it, use the Insert Table command to place these items on the page.  Click here for an example.  Notice the email address is an active link.  This is easily accomplished by highlighting your email address, choosing "insert link" from one of the toolbars or pull-down menus, and typing mailto:youremailaddresshere (example: mailto:santaclause@cortland.edu) in the dialog box where it asks for the link address.

• If you want to see the "man behind the curtain" aka the HTML source code, which are all the tags that make your page look the way you want it to look, under the View pull-down menu choose Page Source.  When you become more acquainted with these source codes and wish to edit something on your page from within this file, choose the Edit pull-down menu and then HTML Source.  In version 7 you can use the tabs at the bottom of the window to access tags and HTML source.  This will allow you to edit the tags and, indeed, be the "man behind the curtain" yourself!  **:-)

• The Barebones Guide to HTML  has an extensive listing of basic HTML tags, which you may need to work with eventually.

• The Visibone Webmaster's Color Lab has everything you always wanted to know but were afraid to ask about various colors in HTML.