Fr. Chris' Guide to Making Your Own Web Site

Overview

Prerequisites

• Netscape Communicator 4.05 or later
• An e-mail address (like Hotmail or your own internet provider).
• A place to put your web pages (like GeoCities or your own internet provider).

For Advanced topics you'll need:

• A text editor (Windoze has "Notebook", Macs come with "SimpleText" (I recommend BBEdit ), Unix/Linux has vi or EMACS (OS/2 has a text editor too, but I forget its name right now).
• An image editor (See c|net oakland or TuCows for a wide selection of freeware and shareware)
• A ftp application (Again see the above. I recommend WnFTP for Windoze, Fetch for the Mac)

Making a Web Page

Ever look at a Web Page and wonder how the author made things look and work the way they do? Go ahead. Look at a web page in Netscape Navigator. Under the "View" menu, select "Page Source." Yikes! What is all that stuff? It is a language called "HTML" (Hyper Text Meta Language). Don't panic. There are easy ways of generating this stuff. Only later will I explain the details. For right now, it is only important that you know that there are two basic "modes" of looking at any web page:

• the way a user sees it (with a web browser), and
• the way the author creates and edits (with a web page editor)

For right now you've only been browsing the web, so you have only used a web browser. Now you'll be making your own pages, and you'll need to open up a web page editor. If you're in Netscape, Go to the "Navigator" menu and select "Page Composer" (or to use your keyboard instead, press Ctrl-4 or Command-4 on a Mac).

Hopefully you are looking a Blank Page. If someone has been working on your computer earlier, Go to the "File" menu and select "New."

Type your name.

Changing the size of the Letters

Does your name look too small to be a title? That's because it is ordinary text. Let's make this look Impressive. In the upper left corner there is a Style indicator that is currently indicating "Normal" with a little gray and black arrow icon that is pointing down. To make your Name big and Bold, select (or "highlight") your name, then click on the arrow and choose "Heading 1" (you can also go to the "Format" Menu and select "Heading" and "1" from the "pop-up" menu). Nicer, huh?

Alignment

But it still doesn't look much like a title because the letters aren't centered, huh? Not to worry. While your name is still selected, go to "Format" menu and select "Align" and pick "Center" from the pop-up menu. The icon on the opposite side of the bar that says "Heading 1" will do the same thing.

To make sure you don't replace your name with what you are about to type next, press the right-arrow key on your keyboard, or click to a new place with your mouse. If you accidentally do something, go to the "Edit" menu and select "Undo".

Now type a new line and notice that it is normal text. Type the line:

"I'm going to summer school at " Seems like an incomplete sentence, huh? Well it is. What we are going to do next is complete the sentence with special words that will be a clickable link to the St. Francis High School web page.

Making a link

Go to the "Insert" Menu and select "Link..." (If you prefer, you can use the "Link" button). Notice how you have a dialog box. This is how you can create things that are hidden.

In the first box type the text that will be seen (the stuff to complete out sentence), which in this case is "St. Francis High School"

In the next box type the URL of the link. This is the address where the browser will go when a person clicks the text you typed. In this case, type: "http://www.stfrancishigh.com"

Now press the "OK" button and notice that now you see the words "St. Francis High School" in blue and underlined. This is the normal way it shows that it will link you to some other web page when you click on the text.

To see if you typed the link correctly, see if it works. You can view the page in the browser, or if you want to just stay in the Page Composer section of Netscape, hold down the Ctrl button while clicking on the link and the composer will make a new composer with the linked page in the edit mode. This is a great way to see "the tricks of the trade" and add some cutting edge techniques to your own web page. To get back, close the window.

Let's say that the link didn't work. You may have forgotten the "http://" part that goes in the beginning. This http:// tells the browser to look for the next page somewhere in the www, as opposed to your present location. Or maybe you misspelled the name of the URL. How do you change it? Right-click (Macs: click and hold) the link, and a "Pop-Up" menu appears. Notice the first in the list is "Link Properties." Also notice that you could visit the page that the link is pointing to ("Browse to:").

Now let's try a different type of link. You can make a link that when the user clicks on the text, it will open a box for the user to send you e-mail. Go to the end of your document and type "Send me " and then Insert a Link. (remember? "Insert" menu, select "Link..."). In the first box type the word "e-mail" and in the second box type your e-mail address after "mailto:" For example, if your e-mail address is bbunny@hotmail.net, the second box should be; "mailto:bbunny@hotmail.net"

Color

You probably noticed that there are a bunch of formatting options, including color, on the title bar. This works just like a word processor. Try making the next word you type Purple by picking the color before you type it. You can also select the words after you type them and pick the color while the words are highlighted.

You can also change the background color of the page. Under the "Format" menu of Composer, select "Page Color and Properties" Here you can add the title of your page, as well as other information that will be hidden to viewers, but available for web searches (That's what the META tabs are for). Click on the "Colors and Background" tab.

Publishing a Web Page

Save your work locally

Think Globally, but act locally! You probably need to save your work from time to time so you can pick up where you left off. In order to do this, press the "Save" button from the tool bar or go to the "File" menu and select "Save" It is a good idea to put this in a new directory for your web page files, or else to save it to your own floppy disk.

The file name should be named "index.html" This is so it will be loaded automatically later when we publish your web page. While we are here it is a good idea to put all the image files that you will be using in this same folder (or floppy disk).

Right now, only people sitting at the computer you are now using will be able to see your web page. In order to have the page available to anyone on the world wide web, you need to publish this file you just saved. You may have your own internet provider that provides space for your web pages, but since the method can vary from internet provider to internet provider, I will explain how this is done on GeoCities. GeoCities will allow anyone to make a web site for free, so long as it is not offensive and non-commercial.

Make a Home at GeoCities

Go to GeoCities and pick a city to homestead . The city can be anywhere you like, though it is arranged by theme. For example, if you like to paint, you probably would pick Paris. Follow the instructions at GeoCities for finding a location. You will need to provide your e-mail address so they can mail you the password for the location of your web page. On a piece of paper, write down the city and the four-digit number of your web address. Wait a couple of minutes and check your e-mail for something from GeoCities. Write down the password they sent you on this same piece of paper.

Using the GeoCities File Manager

Even though Netscape Page Composer has a "Publish" button (which you may wish to configure at home), it isn't a good idea to type your GeoCities password on a public or lab computer. What we will be doing instead, is using the Netscape Navigator (the browser part) to go to a special web site at GeoCities. This web page will ask you for the address and password of the web site you want to edit. Get your piece of paper out and type the address and password you wrote down earlier.

If your are "logged-in" you will see a list of files at your site. This should be a short list at this point. At the bottom of the page is a "E Z File Upload" section. Press the "Browse" button, and notice how you can now select from your directory the file called "index.html"

Now press the "Upload Files" button. If you have any image files for later use, you can upload them now too.

Pictures

Getting pictures from other some web site

To have any pictures or artwork on your web page, they need to be stored as a file. For simplicity, it is easier if your image files are stored in the same location as your html files. If you see a picture you would like to use on your web page while browsing, you can make it part of your own by saving the image file. It is usually a short name that ends with ".gif" or ".jpeg" or ".jpg" Right-click (macs: Click and hold) the image in your browser, and you will get a "pop-up" menu. Select "Save Image As.." notice the name of the picture and make sure you save it in the same directory (folder) as your own "index.html" file. Handy applications for converting image files is IrfanView (win95) or GraphicConverter (mac).

Making your own image files

For the sake of the people looking at your web page, a large image files (or many images) take a while to download, and folks won't wait around if the download time is too long. The best format to save your image files will be either "GIF" or "JPG" ("JPEG") since these formats have built-in file compression which will make it a small size. Try to reduce the size of the file by scaling it down (you can later blow it up on your web page), reducing the number of colors, and making sure the picture is saved with the maximum compression option. If you like to have the user see the picture as it is being downloaded, select "interlaced" in your graphics program.

Adding a picture to your web page

Open your "index.html" in the Composer. Click to the place where you would like to add the picture. Now from the "Insert" menu select "Image" (or press the "Image" button on the toolbar). Now you know why I told you to use the same directory! DON'T CLICK "OK" YET!!!!

In order to make things smoother when you publish your web site, everything but the name of the file. For example, if the box reads "file:///C|/mydirectory/waldo/bird.gif" change it so it only reads "bird.gif"

Using a picture as a background

Instead of a solid color, you can have a pattern or any image file as the background. It will repeat the pattern, so small images work best. If it is a large image, it will take a long time to download, and will not repeat very well. If you want to keep it simple for now, put the image file called "snake.gif" in the same folder as your "index.html" file.

Go to the "Format" menu and select "Page Colors and Properties". Click on the "Colors and Background" tab and check the box that says "Use Image" and simply type the name of the image, which in this case is "snake.gif"

Making Links by clicking pictures

If you want to be able to click on a picture, and have it link to a different page, you can add the image as described above, and then double-click the image while in the Netscape composer. You now have a dialog box that will allow you to add a link or change the size or alignment of the image.

Making a Image Map

This is an advanced topic, so if you want to skip it, go ahead to the next section.

It is possible to link to different places by clicking on different parts of the image. These are called "Image Maps" You can go to different places by clicking on different objects in the picture. For a simple example you can save the image I made called menu.gif which looks like:

Notice how it looks like four buttons, but actually it is a single image, which loads VERRRRY fast since it is less than 3k big! To make the single image work like four buttons, you need to define the rectangular regions, and specify which page to link to for each region.

First, save the image "menu.gif" to the same directory (folder) you have your "index.html" file saved in. Now add that image to your page (Go to "Insert" and select "Image" and type "menu.gif"). Save your work.

Now we need to actually add some "nitty-gritty" HTML, and we're going to do it in the GeoCities FileManger rather than in Netscape Composer. When you log in, you should see your list of files. If you haven't done so already, upload the image file "menu.gif" as well as your recently updated "index.html". Find the file "index.html" and click the box to the left of the file name. Now press the "Edit" botton. Now you see the actual HTML code you generated in the window. Find the place where you have the image "menu.gif" It should look like

<IMG SRC="menu.gif" HEIGHT=51 WIDTH=404>

The instructions, called "tags" are in the < brackets > We need to tell it that there will be a map that goes along with this image. We can do this by adding "USEMAP=#map" to the IMG tag. Now edit your page so that the line above looks like this:

<IMG SRC="menu.gif" HEIGHT=51 WIDTH=404 USEMAP="#MAP">

Now comes the part where we specify our MAP. just after this line, add a new line that looks like:

<MAP NAME="MAP">

Now we add a new line for each region, in this case we need four:

<AREA SHAPE="RECT" COORDS= HREF= > <AREA SHAPE="RECT" COORDS= HREF= > <AREA SHAPE="RECT" COORDS= HREF= > <AREA SHAPE="RECT" COORDS= HREF= >

Now we all the COORDS for the four rectangular regions. Edit the above so they look like:

<AREA SHAPE="RECT" COORDS=0,0,99,51 HREF= >
<AREA SHAPE="RECT" COORDS=100,0,199,51 HREF= >
<AREA SHAPE="RECT" COORDS=200,0,299,51 HREF= >
<AREA SHAPE="RECT" COORDS=300,0,404,51 HREF= >

Now you need to add the links to the four web pages. You can make four new web pages later to reflect your interests, so for right now we'll give them names fun.html, favorites.html and sports.html The School slot is easy. Make shure the lines now look like:
<AREA SHAPE="RECT" COORDS=0,0,99,51 HREF= "fun.html" >
<AREA SHAPE="RECT" COORDS=100,0,199,51 HREF= "favorites.html" >
<AREA SHAPE="RECT" COORDS=200,0,299,51 HREF= "http://www.stfrancishigh.com">
<AREA SHAPE="RECT" COORDS=300,0,404,51 HREF= "sports.html">

The only way that they'll know that the map is done is by adding a new (and last line)

</MAP>
Press the save button, and now try testing your web page. You can do this quickly by pressing the "Veiw" next to the file "index.html" in the GeoCities File Manager. Until you actually create and upload your web pages called "fun.html," "favorites.html" and "sports.html" it will not work when you click on them. the "school" button should work, though....try it out!

A Work in Progress

It is common to have a web point to a other pages that are not yet complete. Here is a tip. We have links now to pages that do not yet exist. All we have to do is make a new simple web page in Netscape Composer that says "This page is in progress" (or something like that) and save it with the name of the file that is not complete. Go to the "File" menu and select "Save As.." three times. Each time type a different name, like "fun.html" or "favorites.html" or "sports.html." Now upload them to you site using the "EZ File Upload" section of the GeoCities File Manager

Sound

Click here to play the Canyon midi file

Movies

Links to MPEG, QT, AVI

The same method can be used for movie files, but keep in mind they can take a long time to download because of their large size

Animated GIFs

A more effient method is to put each cell of the animation into an animated gif. to the Web browser, it looks like an ordinary image file. However, it will play as if it were a constantly running movie. Here is an example: To make your own, you need to use a photo or graphic application, and knit together the imges like cells of a cartoon with an application like GifBilder . You can see how this can be done with space photos from NASA on my Mars Page (Be patient, the animation is 135k bytes)

Java scripts

Animated Text

Special Effects

Guestbook "sign-in"

Counters and CGI stuff

Other fun things can be found that includes a way to see how many people have seen your web page.
The only thing you need to do is add the following code to your page:

In order to make sure your counter shows the correct count for each
page, it's best to put the code as <img src="/cgi-bin/counter/#"> where
# is a different number for each page. This will ensure the counter loads
anew for every page you have it on.

In order to remove a counter from any of your pages, simply remove the
tag from that page.

To manage your counter, login at geocities here

You are visitor number since July 24, 1998