Creating a Class Website
 

Why Create a Class Website?

Anatomy of a Web Page
 
Page = A single document on the World Wide Web.
HTML = A series of commands (called "tags") that determine how a document will look and behave when viewed through a web browser.
Web Browser = A program that interprets the tags so the document can be viewed and used across the World Wide Web. Netscape Navigator and Internet Explorer are examples of browsers.
 
A web page is a text file with commands embedded within angle brackets <>. Here is what a web page looks like when viewed through a text editor: 
 
<HTML> 
<HEAD> 
<TITLE>English Department, UWO Home Page (Small Version)</TITLE> 
</HEAD> 
<BODY BACKGROUND="GRAY_DOT.GIF"> 
<CENTER><B><FONT SIZE=+3>Department of English</FONT></B></CENTER> 
<CENTER><IMG SRC="turnbook.gif" HEIGHT=30 WIDTH=37></CENTER> 
<CENTER><IMG SRC="colorful.gif" HEIGHT=18 WIDTH=424></CENTER> 
<CENTER> 
<TABLE> 
<TR> 
<TD><A HREF="http://www.english.uwosh.edu/people.html"> 
<IMG SRC="faculty.gif"></A></TD> 
<TD><A HREF="http://www.english.uwosh.edu/curric.html"> 
<IMG SRC="curricul.gif"></A></TD> 
<TD><A HREF="http://www.english.uwosh.edu/wcenter/"> 
<IMG SRC="wcenter.gif"></A></TD> 
</TR> 
</TABLE> 
</CENTER> 
<HR> 
<I>Last modified: <I>May 7, 1998</I> 
</BODY> 
</HTML>
 
Click here to see what this page looks like when viewed through a browser. 

Images (including icons, pictures, backgrounds, and animations) are all separate files.  The main file tells the browser where to display these separate image files. 

There are several ways to create a web page: 

  1. Create the page with a text editor, inserting the tags manually. 
  2. Use a web page editor such as Netscape Composer. 
  3. In Microsoft Word, use the "Save as HTML" command under the "File" menu.
 
Using Netscape Composer
 
1. Open the "Netscape Communicator" program suite.  Netscape Navigator will open by default. 

NOTE:  

"Netscape" is often used generically to refer to the Navigator browser.  Actually, Netscape is the company's name.  The Communicator program that Netscape produces is a suite of programs:
 
Communicator = Navigator (browser)
+ Composer (web page editor)
+ Messenger (e-mail program)
+ etc.
2. Click on the "Communicator" menu and choose "Page Composer." 

3. To open an existing file: 

  1. Click the "Open" icon. 
  2. Double-click on the filename to open it. 
To create a new file, simply begin typing.
 
 Formatting Text
 
To change the look of any text in your web page, select the text you wish to format, then use the bottom row of menus and buttons at the top of the Composer window to format the text.  Going from left to write, use can use them to do the following: 
  • put the text into one of the standard web formats (e.g., the six heading formats). 
  • specify a font. 
  • specify a text size. 
  • choose a text color. 
  • make your text bold, italicized, underlined, or plain. 
  • create a bulleted list. 
  • create a numbered list (the numbers will be filled in for you). 
  • decrease the indent of the paragraph in which the text appears. 
  • increase the indent of the paragraph in which the text appears. 
  • change the justification of the paragraph in which the text appears.
Creating a Link
  1. Position the cursor at the place in the page where you would like the link to appear.
  2. Click on the "Link" button in the large toolbar.
  3. A dialogue box will appear.  In the box labelled, "Enter text to display for a new link:", type in the text that you would like to appear in your web page.
  4. In the box labelled, "Link to a page location or local file:", type in the URL of the file you would like to link to.  Type in the full URL, then click on the OK button.
 
Example of a full URL:  
http://www.english.uwosh.edu/classes/workshop.html 
OR
  1. Select the text in your web page that you would like to turn into a link.
  2. Click on the "Link" button in the large toolbar.
  3. A dialogue box will appear. In the box labelled, "Link to a page location or local file:", type in the full URL of the file you would like to link to.  Type in the full URL and click on the OK button.
 
NOTE: If you know that the file you are linking to will reside in the same directory on the same server as the page you are working on, you can just type in the filename. 
 
Creating a Link to Another Part of the Same Page
 
A. Create the "target" for the link. 
 
  1. Position the cursor at the place in the page where you would like the link to send the user.
  2. Click on the "Target" button in the large toolbar.
  3. Enter a name for the target and click the OK button.
 
B. Create the link. 
 
  1. Position the cursor at the place in the page where you would like the link to appear.
  2. Click on the "Link" button in the large toolbar.
  3. A dialogue box will appear.  In the box labelled, "Enter text to display for a new link:", type in the text that you would like to appear to mark the link.
  4. In the box labelled, "Select a named target in current page:", select the target that you just created.
  5. Click on the OK button to close the dialogue box.
Finding and Creating Images
 
First, you need to locate or create an image that you would like to include into your web page.  You can scan in a printed image, create one with an image editor, or find one that already exists on the web and copy it (with appropriate permission, of course). 

The web contains several archives of images for website creators. Here are a 
few: 

To copy a graphic that you find on the World Wide Web: 
  1. Position your mouse cursor over that graphic. 
  2. Click the right mouse button.  A pop-up menu will appear. 
  3. Choose "Save Image As . . ."  You will be prompted to choose a directory on your system in which to save the graphic. 
  4. Choose the directory and click on the "Save" button. 
Embedding Images in Your Web Page
  1. Make sure the image file is in the same directory as your web page.
  2. Position the cursor at the place in the page where you would like the image to appear.
  3. Click on the "Image" button in the large toolbar.
  4. A dialogue box will appear.  In the box labelled, "Image location", type the name of the image file.
Previewing Your Web Page
  1. Save any changes you have made by clicking on the Save button in the large toolbar.
  2. Click on the Preview button in the large toolbar.  You will now see your page displayed through the Navigator browser.  All of the images should show up and all of the links should now work.
  3. To go back to Composer, click the appropriate icon at the bottom of your monitor screen or use Alt-TAB to cycle through your open windows.
 
For comments, suggestions, questions, etc., contact Charlie Hill.