What's a web page?

A document where all the text formatting, graphics, tables and other elements are defined only with plain text.

Hypertext Markup Language (HTML) is used to tell your browser how to layout all the elements of the document in a window.

HTML consists of a variety of commands, called tags, which mark the text with instructions for Netscape-

It includes text formatting tags (bold, italics, alignment changes etc. similar to WordProcessing)-

Tags for including images, sounds and movie clips.-

Tags to permit links to new pages or sites around the world.

Claris Home Page makes it easy to make web pages because it writes the HTML for you.

A Few Tips to Start

Spend some time thinking about your web page before you begin creating it:-

What information are you going to include.-

How is the information going to be linked together - it may help to create a flowchart here.-

Provide users with an easy way to get back to the main page from where-ever you lead them.-

Watch the resolution of your monitor and other conditions specific to your system which may be different for other users - your web browser for instance.

Organize your files:

Place all your html files and images for one page in the same folder.
Make sure your files are named according to web conventions:
-

HTML files should end with the extension ".html"-

GIF images should end with the extension ".gif"-

JPEG images should end with the extension ".jpeg" or ".jpg"

Home Page's Toolbars

Top row working from left to right:
Mode Buttons	Edit Page - Default mode which permits WYSIWIG creation and editing of home pages. Preview Page - Allows you to preview what your page will look like in a browser. (Remember that some elements will display differently depending on the browser) Edit HTML Source - Allows you to see and edit raw HTML code.
Preview Button	Preview in Browser - Allows you to use Netscape or another browser to see how your page will look.
Editor Buttons	Object Editor - Allows you to tweak the settings of images, tables and movies. Link Editor - Allows you to edit links you've created. Document Options - Set the page title and the background, text and link colors.
Insert Buttons	Insert Anchor - An anchor is a marker used to identify a specific point on a page where a link should take you.
	Insert Image - Add a graphic to your web page Insert Horizontal Rule - Put a horizontal line across your scree Insert Table - Add a new, empty table to your page
Site Editor	Verify Links and References - Consolidate - Upload - Upload the site onto server

Bottom Row, working from left to right:
Paragraph Format	Format Styles - Formats sections of text as headlines, lists etc.
Alignment Buttons List Buttons	Align Left Align Center Align Right Create Numbered Lists - Adds an entry to a numbered list Create Bullet Lists - Adds a bullet item to an nnumbered list.
Indent Buttons	Indent - Indent a whole paragraph of text Outdent - Outdent a whole paragraph of text
Font Size Buttons	Smaller Text - Decrease font size of selected text by one increment Larger Text - Increase font size of selected text by one increment
Style Buttons	Bold Italics
Text Color	Text Color

"Realm of King Lear"

This project was put together by students in a British Literature class at the University of Texas at Austin as a group project. We'll be reconstructing a small portion of their work to illustrate one way of putting together a frame based annotated text. If you like what we're working with, I encourage you to take a look at the original site in greater depth: http://www.cwrl.utexas.edu/~scoggins/316british/kinglear/index1.html

We're go ing to begin with what will be a fairly straight forward web page and a review of some features in Claris HomePage 3.0. Please begin by opening HomePage with the icon on your desktop and open the file "index1.txt"

From the file menu, select "open". Find the file "index1.txt" and click "ok"

Formatting: Let's start with the formatting changes we need to make. Again, nothing new here, the formatting commands in Claris are nearly identical to a wordprocessing program.

Highlight the text you wish to format and select the Command in question. -

Use the Alignment, Center, Bold and Italics commands from the button bar or from the "Style" menu - whatever you're most comfortable and familiar with.

Use the "link Editor" to create a link to a web site. From the phrase "British Literature Class" let's link to the class web site.-

Begin by selecting the text "British Literature Class".-

Use the "link editor" from the button bar, or from the insert menu select "insert link to URL".-

Enter the URL (web address) in the dialogue box which appears: http://www.cwrl.utexas.edu/~scoggins/316british/index.html

Now use the "Link Editor" to create a mailto: link from the students in the group which created this project: Carrie, Mandy and Kortney. These links are usually used to facilitate e-mail for users of your web page. -

Again begin by selecting the text you wish to link. Let's use Carrie's to begin.-

Next use the "link editor". The command is on the button bar, or under the insert menu select "insert link to URL".-

When the dialogue box appears asking for the URL, type "mailto:" followed by the address to which email should be sent, "Carriejones@mail.utexas.edu". The full command in this case would read "mailto:Carriejones@mail.utexas.edu".-

Repeat for Mandy and Kortney

Mandy - met@mail.utexas.edu
Kortney - kporter@mail.utexas.edu

Next we're going to use a table to clean up the formatting of this page. Insert a table in the space below the phrase "by William Shakespeare"

- Place the cursor where you wish the table to appear-

Select "insert table" from the insert menu, or use the table function from the button bar.-

Use the object editor dialogue box to modify the table so it has 1 row, 2 columns and the border is "0"

Add Bold and Center, you should also enlarge the title.

Insert Table Here ----->

Insert Link from 316k

Insert mailto: links

King Lear

By William Shakespeare

This web site representes the cumulative efforts of students in a 316K
British literature class at the University of Texas at Austin. The full text
of William Shakespeare's King Lear is included within the web page, and
research on the cultural and ideological debates within the text is
available to surfers on the web. Thank you for visting the site, and feel
free to e-mail us, Carrie, Mandy, and Kortney, with questions, comments, or
suggestions.

Proceed to the Realm of King Lear

Now let's add an image to the page.

-

Place the cursor in the left cell of the table.-

Select the insert image button from the button bar, or use the insert menu, and select "image".-

What appears is a dialogue box, navigate until you find the image, "gothic.gif" and select it. The image should appear In your table.

Now select the text on the page (without the header). Use the cut and paste functions to move the text to the right cell of the table.

- With the text selected, choose the "cut" command from the edit menu.-

Place the cursor in the right cell of the table-

Choose the "paste" command from the edit menu.

Insert picture "lear1.jpg" into left cell.

Cut and paste text into right cell.

King Lear

By William Shakespeare

To finish up the first page let's add a background to give the site some uniformity and visual appeal. Careful, a little of this goes a long way.-

Select Document Options, either from the button bar, or from the Edit Menu.-

Next, Set the background image by clicking on set.-

In the dialogue box which opens navigate to the file "cement.jpg". -

Close the dialogue box and the background should be set.

Now for the content of these pages which is based on frames. Warning! Think before proceeding with a frame based page:

€frames may not display on certain (especially older) browsers
€frames can quickly fill up the space in the browser window
€frames can do sneaky things to browsers' bookmark functionality

The Lear project is based on a page with three frames. The left frame contains the text, the right frame contains the annotations to the text, and the bottom frame contains a menu.

Text

Annotations

Menu

Let's begin by setting up the framework. To set up the frames:-

From the file menu select "New" (note: not "new page")-

Select "Frame Page" from the list of options and click "ok"-

Now select the two files which are vertically laid out in the frames (That is the Text and the Annotations. The text is contaned in a file called "left.html". The annotations are in a file called "right.html". Then click "ok".

Halfway through the set up now! You'll notice your page has appeared with two of the files in place. The black outline around the two frames indicates that the "root frameset" is selected. Which means we can devide the page horizontally now to create a frame at the bottom for the menu. A word first about some new buttons which have appeared in the button bar. These commands are duplicated in the "Frame" menu if you feel more comfortable using menus. Your frame editor buttons from left to right are:

Subdivide Horizontally

Subdivide Vertically

Add Frame

Select parent Frameset - selects the original frame and its "offspring" for making changes on all these frames.

Select Root Frameset - Selects all of the frames on the page including all parent framesets.

With the root frameset selected, subdivide the frames horizontally using either the "subdivide horizontally" button, or the command from the "frame" menu.
Double-Click to open the editor for the frame we've just created, which doesn't yet have any content. Let's begin by clicking on the button, "page displayed in frame": - In the dialogue box which has opened, click the "assign file" button.-

Navigate and select the file "menu.html" and "open" to specify the file which will occupy the frame

That's beginning to look more like it, but we still have some editing to do. Let's begin with the appearance of the bottom frame, which shouldn't take up half the page. To edit the appearance:-

Select the "appearance" tab, in the frame editor dialogue box.-

One of the options is to change the size as a percentage of the screen. Try playing with the percentage until the screen looks "right" to you. -

Options: you could also set the exact number of pixels for the frame if you chose using the pull down menu which now contains "percentage". -

Beware: That the appearance of frames (and many other layout options) will be affected by your browser type, platform (PC vs. Mac) and screen resolution. If your page needs to work in all circumstances you'll need to test it under those conditions.

Now let's select the left frame with William Shakespeare's picture. In the frame editor dialogue box notice that you may assign a "frame name" to each frame. You'll use these names when making links to reference different areas of the screen. Let's use and example. Below the picture in the left frame is a heading for "Act I, Scene I" of the King Lear. We can (and will) link from that heading to the full text of that scene, but we have a decision to make. Where should that text appear? The text could remain in the left frame and replace the "table of contents", the text could appear in the right frame, replacing the list of contextual annotations, the text could appear in a new browser window, or it could replace all of the frames. By assigning a name to this frame we can specify where we wish our links to appear. -

For now let's assign the name "left" to the left frame, and the name "right" to the right frame.-

To name the right frame you will need to select that frame, then name the frame in the editor dialogue box.

Now check the appearance of both the left and right frames. Each should take up 50% of the browser window.-

Select the left frame-

In the browser window click the "appearance" tab.-

Change the frame "size" to 50%-

Repeat for the right frame.

The setup of the site is now complete. What remains is some formatting in the individal pages and the links between the pages. If we were to try to recreate all the links in this particular project we would be here a while, but I've selected some representative links for us to work on which illustrate the idea.

First let's save our frame layout and call it "index2.html".

Please select the menu frame and in the frame editor choose the "edit page" option. This feature will open a new window in Claris HomePage to allow you to edit the menu. In this case the menu is a very simple page consisting of five links.

Reset - Is a courtesy to users who may have gotten lost in multiple levels of links.... it takes them back to the beginning.

Context - Is the first set of contextual material being brought to the text.

Textual Production - Is the set of links relating to the text of King Lear.

Canon - More links

Class Page - Takes you back to the class page where one could explore other projects in the class.

The links are relatively straight forward, the twist is deciding where this material should appear. -

Begin by selecting the word "context"
-

Now select the "link editor" from the button bar, or select "insert link" from the insert menu.-

In the dialogue box click the "browse files" button to select the file to link to. Look for "right.html" and click "ok".-

Use the arrow in the left corner of the "link editor" to open the extended options. You may now specify the target frame for the file "r ight.html". In this case the material should appear in the frame we've named "right" - so type "right".-

repeat for "textual production" and "canon". The html files you're linking to are text.html and canon.html respectively.

The links for "reset" and "class page" are variations on this, what changes is the where the material appears. The pages being linked in this case will replace the current frame layout, rather than appearing within one of the frames. To do this specify that the link appear in the "_top" frame. hint: if you have trouble remembering this, click the show examples button and you'll get a list of the special values available.-

Select the word "reset" and then select the link editor. "Browse files" and link to the file "index2.html". The "target frame = _top". Hint: that's the underscore key before the word top (shift and to the right of the zero).-

From "Class Page" link to the URL (web address) - http://www.cwrl.utexas.edu/~scoggins/316british/index.html Again, the "target frame = _top".

Save the changes you've made to "menu.html" and close that window. Then preview your frames layout in Netscape, using "Preview in Browser" from the button bar, or the window menu.

If that worked, let's set about editing the left frame of our frame layout.-

Please select the left frame and in the frame editor choose the "edit page" option. A new window will open allowing you to edit this page.

First a bit of review, let's set the background on this page so it matches the menu. To do so you need to edit the document options.-

Select document options from the button bar, or the Edit menu.-

In the "background" portion of the dialogue box, click the "set" button next to the word Image.-

Select the file "cement.jpg" as the background. Click "ok", and "ok" again to exit the document options.

This file serves as a table of contents for King Lear and links to the different scenes in the play. We're only going to work with Act 1, Scene One. -

Please select the text "Scene I" and create a link to the file "act1scene1.html". The target frame should equal the special value "_self", indicating that the text of scene one will replace the table of contents.

Save the changes you've made to "left.html" and close the window. You may wish to preview your frame layout to check your links.

Select the right frame of your frames layout and "edit page" in the frame editor. Many links on this page, but I've only selected a few...

Select the Text: Link to the file:

Shakespeare and Medicine in the Elizabethan Era elizabethan.html

Witchcraft and the Supernatural Witchcraft.html

Evil Daughters? Evil_Daughters.html

Now save the file "right.html" and close this claris window.

Now open the file "text.html" in HomePage.

Select the Text: Link to the file:

Parallels within Double Plot parallels.html

Now open the file "canon.html" in HomePage.

Select the Text: Link to the file:

Message forum discussion Canon Discussion.html

Now open the file "act1scene1.html" in HomePage.

Select the Text: Link to the file:

Kill thy physician, and the fee bestow Upon thy foul disease doctors.html

Now open the file "parallels.html" in HomePage

We'll start with a review of the concept of "Anchors" and "links to Anchors". If you think of the anchor as a bookmark you'll get the idea. This page contains a menu at the top and a list of topics with in the page.

Let's start by creating the anchors:-

Select the underlined header "Parent's rejection of child:"-

To create an anchor select "anchor" from the button bar, or from the insert menu. -

You may accept or change the name of the anchor when the dialogue box appears. Click "ok" and an anchor will appear to the left of the phrase selected. Hint: When creating a complex set of pages it may-

Repeat for the phrases:

Rejection of Nature

Loyalty

Disloyalty

Now to link to those anchors let's select the text "Parent's rejection of child:" in the overview. To link to an anchor:-

With the text selected open the "link editor", or "insert link to URL" from the insert menu.-

This gets a bit complicated. Insert a Link to a URL from the insert menu.-

Click on the arrow at the right of the dialogue box. -

At the bottom of the list that appears you will see "Link to open file". -

Select it and you'll see a list of anchors in that file. Select the anchor you wish.

Repeat for the phrases in the overview:

Rejection of Nature

Loyalty

Disloyalty

For a twist let's try another variation. An "anchor link" need not link to an anchor, or bookmark within the same file. So for example we could link from the text "Act 1, Scene 1, line 257:" in the "parallel within the double plot" to the text which illustrates the point. First we'll need to create a bookmark in "act1scene1.html"-

Open the file "act1scene1.html"-

Find the follwing text near the bottom of that file:

KING LEAR

Thou hast her, France: let her be thine; for we Have no such daughter, nor shall ever see That face of hers again. Therefore be gone Without our grace, our love, our benison. Come, noble Burgundy. -

Select the character "King Lear" and create an anchor by selecting anchor from the button bar or the insert menu. You may accept or change the name of the anchor when the dialogue box appears.

Now back to the file "parallels.html":-

Select the text "Act 1, Scene 1, line 257:"-

Insert a Link to a URL from the insert menu or use the link editor from the button bar.-

Click on the arrow at the right of the dialogue box. -

At the bottom of the list that appears you will see "Link to open file". Select the file "act1scene1.html" and within it the anchor you wish to select.

Now let's test everything to see if things are working. Using Material from the Web

Texts - With the text on the screen in Netscape:

use the file menu and select save as.
click and hold on the format popup menu. You have two options
-
Source, will save the file with all the html formatting.-

Text, will save just the text in the file without formatting.
note: in neither case will you save any of the pictures associated with a web page.

Pictures, Quicktime Movies:

point and hold the cursor down on a picture or Quicktime Movie file until a menu appears.
select save this image (or movie) as.
in the save dialog box which appears select a filename and location for the file.
other options
-
copy this image location - will save the address of the image to the clipboard, use the paste command to retrieve. (Edit menu and select paste)
-
copy this image - will save the image to the clipboard, use the paste command to copy into another document.

Audio Files:

Audio files come in many different formats, most will save themselves to your hard drive in the folder specified in your netscape preferences.
To specify this folder (or see what location is specified) Go to the options menu and select general preferences
Select the applications tab from the dialog box and look for downloads directory: for the current location of downloaded files. Use the Browse command to specify. (I use the desktop folder)

Using existing material from a WordProcessing Program

From WordPerfect 3.5

Open the file you wish to use on the web in WordPerfect. (File menu and Open)
Then save the file in HTML format:-

from the file menu select saveas
-
select a name and location for your html file-

in the format popup menu select html export.
Your text and most of the html compatible formatting will be saved and the file can be used directly on a web page, or modified using Claris Home Page.
Note: this may also be possible from other WordProcessing applications. Check the format popup menu in the saveas dialog box and see if an html export command is available.

From other WordProcessing applications

Open the file you wish to use on the web in your WordProcessor (File menu and Open)
Then save the file in Text format:-

from the file menu select saveas
-
select a name and location for your html file-

in the format popup menu select text export.-

if various text options exist, elect to delete soft returns.
Your text, minus most formatting can now be imported into Claris Home Page.

Glossary

GIF - Graphics Interchange format. A file compression format and one of two standard formats used for images on the Web.

JPEG - Joint Photographic Experts Group. An image compression scheme which is the other standard format for images on the Web.

PICT - Picture files. Image format used on the Macintosh, Claris Home Page can automatically convert these files to GIF format for use in your web pages.

CGI - Common Gateway Interface. Standard used for programs which interface with information provided by Web servers. Often used with search engines or forms.

Flame - A piece of e-mail or a network posting which is violently argumentative. Flame wars are situations in which two or more people on the network hurl insults at one another.

FAQ - A file which answers Frequently Asked Questions. It's a good idea to read these if you're entering an environment you're unfamiliar with.

FTP - File Transfer Protocol. The Internet standard for transferring files from one computer to another.

HTML - Hypertext Mark-up Language, a way to "mark," that is to format text for pages on the worldwide web.

HTTP - Hypertext Transport Protocol, the primary protocol used by most WWW servers.

IMHO - In My Humble Opinion. Common e-mail or chat abbreviation.

IRC - Internet Relay Chat. A protocol that allows for real-time "conversations" on the internet.

MUSH - Multi-User Shared Hallucination, a text-based virtual environment in which two or more participants interact.

MPEG - A full-motion video compression scheme defined by the Motion Pictures Experts Group.

URL - Uniform Resource Locator, a line of information that identifies the location of data found on the world wide web.

Just for fun

Archie - one database (archie.mcgill.ca) that lists what is available from anonymous FTP sites.

Gopher - Freeware developed at the University of Minnesota that makes looking for information in online databases pretty easy.

Jughead - like Veronica, a means of searching gopher menus. Jughead searches only UT Austin, though.

Veronica - Very Easy Rodent-Oriented Netwide Index to Computerized Archives. Veronica is an index of titles of gopher items on all the gopher servers known to the Mother Gopher in Minnesota.

Select the Text:	Link to the file:
Shakespeare and Medicine in the Elizabethan Era	elizabethan.html
Witchcraft and the Supernatural	Witchcraft.html
Evil Daughters?	Evil_Daughters.html

Select the Text:	Link to the file:
Parallels within Double Plot	parallels.html

Select the Text:	Link to the file:
Message forum discussion	Canon Discussion.html

Select the Text:	Link to the file:
Kill thy physician, and the fee bestow Upon thy foul disease	doctors.html