Your First Web Page
Apr. 23, 1997
Work through these exercises. There is nothing that needs to be handed in.
You will, however, need to have some pages by Friday when we practice
transferring files from your N: drive to the Web server. (We will
take some time Friday for you to finish this.)
These instructions are a little sketchy. (I hope they're not too sketchy.)
I've done this on purpose. Some of you need just a little bit of direction
to get started and will be able to help those around you. Others will have
a question or two and a few might need more help. Just call me over if you
get stuck, or if you don't think your system is doing what it's supposed to.
- Make sure you're logged into the network.
- Make a folder (directory) for your set of Web pages:
This is very important: be careful to store your web pages, images,
etc., into this folder on your N: drive. When you create a new page,
use Save as to save it and make sure it's being saved in the
correct drive and folder (
- Open an MS-DOS window: Open the DOS folder and open the DOS
- Type the command N: .
- Your command prompt should have
N:\ in it at this point.
- Type the command md web to make the folder.
- Type the command exit to quit the MS-DOS window.
- Start Netscape Navigator Gold (Windows folder).
- Open the editor: From Navigator open the File menu. Choose
New Document, then choose Blank. You should have two
windows now: your original browser window and the editor window.
- There will be times when you'll be using a browser window and
possibly several editor windows. (Make sure you can distinguish between
the browser and the editor.) It's possible to move and resize windows. If
you don't know how to do this, I, or perhaps your neighbor, can show you.
- Start using the editor. Notes:
- The editor's formatting features are similar to those of any other
GUI word processor.
- You can cut-and-paste text from one window into the editor.
- You can drag an image from the browser into the editor.
- Save your first page as INDEX.HTM. You must use this
name. Make sure you're saving the file into the correct drive and folder
- I want you to put two things on your first page:
- The words ``My First Web Page,'' centered at the top of the page,
using the Heading 1 style.
- A link to a second page. The link text should be ``Here's a
link.'' The text should be left aligned and be in the Normal style.
Type the text, then highlight the text and use the link button on the
toolbar to make the link point to the file SECOND.HTM. (Remember
that all links to local files and images MUST BE IN UPPERCASE.)
- Save the file.
- Create a new, second web page using the filename SECOND.HTM.
(A second copy of the editor will begin running.) Put an image on this
- Perform a Save As on the file.
- Using your browser, go to Westminster's home page.
- Drag the large image into the page you're editing.
- Center the image, using the formatting buttons. (Click on the
- Save the file.
- Let's see if it all worked. Go back to the browser and open the
File menu. Choose Open File... and open the file
INDEX.HTM you just created. Test your link to make sure it works and make
sure the second page image is loaded by the browser.
- Let's try an experiment:
Moral of the story: To browse changes in a Web page, you must save the page
from the editor, then reload it from the browser.
- Use the editor to add some additional text to INDEX.HTM.
- Go back to the browser and view INDEX.HTM. You're still
looking at the old version, right?
- Go back to the editor and save INDEX.HTM
- Go back to the browser. Still the old version, right?
- Hit the Reload button on the browser. Now you finally see
the new version.
- If you want to begin experimenting further, go right ahead.
The Web server we'll be using is a Unix system. In Unix, file names are
case sensitive ( index.htm and INDEX.HTM are two different
files), whereas DOS, Windows, and OS/2 are case insensitive. This
can cause headaches when you go to publish your pages (transfer them to the
Web server). If you follow these guidelines, you'll have few problems:
How can you check the links? If you click the right mouse button
on a link or image, a menu pops up. Choose Link Properties or
Image Properties as appropriate and check the file name associated with
the link or image. Correct as necessary.
- A link to a local file or image should always be made with an
uppercase file name. Examples: INDEX.HTM, SECOND.HTM,
- A link to a page on the Internet should be made using the correct URL
for the page. Example:
- The editor will sometimes add the prefix
similar) to your local files and images. This prefix must be removed or
the links won't work when published.
Thomas P. Kelliher
Mon Apr 21 11:03:09 EDT 1997