Tutorial

Making a Web Page with Netscape 4.7

Building a web page with Netscape Composer is just as easy as Brain Surgery or Rocket Science. All you have to do is learn a few basics and a short glossary of terms and you are on your way ..... Really!!! .... It's no big deal !

Here are a few things you'll want ahead of your first incision.

A filing cabinet to put your notes in. We'll use your "C" drive
Scratch paper or Post-It-Notes & for that we'll use Microsoft's Notepad. In Windows 98 you'll find notepad under ... Start - Programs - Accessories.
Some sutures &/or nuts and bolts. I'll give you the web addresses where you can get it all free.
A way to process your X-rays or Pictures. Might use Microsoft's Paint or any basic picture program, like MGI Photo Suite that came with my digital camera. We need our pictures in a format called .jpg...... When you save a picture you are usually asked if you want to save it as a .gif ... a .bmp or a .jpg. Web pages hate .bmp! They take way too long to load. And as an aside, never, never send a .bmp file via email. The recipient will possibly age to the point of death before it gets loaded in his mail.

NOTE: You will need to learn a term called HTML. No it isn't a memory test like Morse Code. With HTML we will just find the code we need somewhere, copy it to Notepad and paste it in your page. Just think of HTML as the little notes you scribble to yourself on the margins of a first draft of your term paper. When you do the final copy of your term paper, everything you could possibly have wanted to say is included but not one person except yourself knew you had a scribbled up mess on the first draft.

Before we start ..... and in case you were wondering .... Awhile back I just KNEW I was going to have a bad day ....... 'cuzz the last thing I heard my Brain Surgeon say before I went under was ........ "hiccup". (explains a lot, huh?)

If your server is mo-net.com then email them for CD that has all of the information you will need for addresses, HTML source etc. Cost is $5.

First thing we need to do is set up our page and editor in Netscape Composer so open Composer and click Edit - Preferences. Then look down the list till you find Composer and click it. A window will open up. In the HTML Source window put in C:\windows\notepad.exe. In the next window I put in C:\Program Files\Microsoft Publisher\Mspub.exe for an image editor. This can be changed to whatever program you want to use to edit images. Might be Paint Shop Pro or MGI Photo Suite or whatever you have for an image program. Next if you expand the Composer menu, you'll see Publishing as a drop down menu. Click that to highlight it and a new window says enter an ftp or HTTP site to publish to: Here you will put ftp://www2.mo-net.com/usr/home/shirl/WWW if you were me and you were using mo-net.com as a server.

"HTTP or ftp location to publish to: ... Oh - Oh ... our first stumbling block. This is information you will have to get from your server. What is a server? When you go online via a modem, your computer modem dials a mysterious phone number somewhere. It is the server's phone number that is only answered by another computer that belongs to your server. Find a phone number for your server that may be answered by real people. Call them up and ask them where, on their computer, you should publish your page. Your server undoubtedly has its own web page. You might find the information you need on that web page. Problem is ... you have to take the initiative to find out where to publish your web page.

OK! Open Netscape Composer if it isn't already open. You have a blank page called - file:///untitled..Now just for the heck of it, up at the top you see some options: New - Open - Save - Publish - Preview. Type something on the Untitled page .... anything and punch Preview. It will ask you to save the page first, so give your page the name "index" (without the quote marks) and save it. When you do that, please note that the page is being saved as an HTML page. And by the way, for purposes of this composition just forget making your page from - templates - or the Page Wizard. Let's just do one from a blank page. Also note that any page you make in Composer will probably be saved as an HTML file extension unless you decide to do it differently & screw everything up.

Now you are looking at a Preview of your home page. It is in a new window. You can't make any changes from that window. You have to close that window to go back to your composition page, so do that. Always remember that little step.

Now, if you were satisfied with the way your page looked .... or even if you weren't, the next step would be to publish it to the web. So click, PUBLISH. Now it probably says you can't publish it until you put in some information. It want's a Title for the page, so put one in ... say ... My Home Page .. or something just as classy. Next it will probably already have filled in that the HTML file name is index.html as that is what you had to name your page to get it published. Next is .... "HTTP or ftp location to publish to: ... Hopefully this is already filled in for you. If not scan back up on this page about 3 paragraphs and you will be refresed.

In my case, my server is mo-net.com. After they finally figured out I really didn't know much about anything ... they graciously emailed me the info I needed. My screen name is shirl even though my real name is Marv (no I am not bi-sexual) and your screen name is probably the first part of your email address before the @ sign. But you will have to know your screen name.

So in that box titled HTTP of ftp location to publish to, I put in - ftp://www2.mo-net.com/usr/home/shirl/WWW/
because that is what they told me to put in. They also made me aware that everything about this operation is very case sensitive. For example the www2 had to be in lower case while the last WWW had to be in capitals. When I hit Publish .. that exact line above is in that HTTP or ftp box. If you are using mo-net as a server, the only thing you will change is after - /usr/home/ you will put in your user name instead of shirl. If your screen name was forrestgump you would type -
ftp://www2.mo-net.com/usr/home/forrestgump/WWW/ .... just like that.

In the next box they ask for your User name and your password. Type in forrestgump if that is your user name and whatever the password is that you use when your modem dials up your server. If we had additional files or pictures with the page, they would show up in the bottom box and all be pre-selected for us.

Now that you have all that done ... click OK. A screen comes up telling you it has everything prepared, so if you are ready, the computers are ready. So smack it to it!

If it worked, you should be able to go to that page on the World Wide Web. And you could, if you knew what to type in for a web address. In my case, I have to type in http://www2.mo-net.com/~shirl/index.html. Generally yours will be a lot like that except for the ~shirl, yours will have ~forrestgump. So try it. Open up Netscape Navigator and type in http://www2.mo-net.com/~forrestgump/index.html and hit enter. Of course your server may not be mo-net so put in whatever your server told you to put in for a URL to find your web page.

Another handy tool is WS-ftp. My server had instructions of where to go to find this program and download it. It is a neat free program that allows you to transfer files from your computer to the server quickly and easily. You can also transfer files from your server, back to your computer with this program. But for now let's not complicate the issue. Just keep that little program in the back of your mind for later use.

I now assume you have found your web page with Netscape Navigator and if you did you are in business so to speak. So now you have a tacky, stupid looking web page for the entire world to see that may even inadvertently have a swear word written on it. Shame on you! Now you are committed. You have to get something up there that looks decent and offends no-one. Which means everyone's home page should be a blank page. I once heard that an unbiased opinion was worthless. So if you have an opinion .... go for it. I guarantee someone, somewhere will be offended.

Now I encourage you to go back to your Composer page titled index.html and open it back up if it is closed. Click - file - Open Page and a window will come up asking you to chose the file to open. I think you can figure it out from there.

Now that your file - index.html is open in Composer, you need to play with it. Go back to the top and put in a grand and glorious name for your page. Select different font styles and sizes until you get exactly what you want. Also play with the colors of the fonts on the drop down color menu. When you do that (in the color menu) you will see some numbers come up next to your cursor as you pass over different colors. Black for instance will say R=0 G=0 B=0 HTML#000000. It's nice to know those things.

Once you have a feel for the color and style of print you want, it might be a good time to erase everything and set up your entire page format. To do that click Format -Page Colors & Properties (next to last line). When open click the General tab. Title - Author - Description - Keywords & - Classification. Put in a title for your page, the author is probably already filled in with your name, the description will be a short couple of lines you put in to describe what your site is all about. The Keywords would be those words you feel properly describe what is contained within your site. If you build Treasure Chests out of wood ... keywords might be furniture, wood, crafts, hobby, handmade etc. These words are used by search engines when someone, somewhere asks to find information on Treasure Chests. Next is the Classification. Your classification might be under Woodworking - Hobby - or something like that. All of this information is contained in what are called meta tags in case you needed to know. After you write the stuff in, Composer sets up the meta tags for you.

Next click - Colors & Background. You can choose the color of type (font), the color of links, link text, active links and all that crap, as well as the background color of your page. You can also put in a different background image if you want. You can find them all over the web and they are free. If you want a completely different font than is installed on your computer you can also find fonts for free all over the web. Just download and install them. Each font file takes up about 70 kb of space.

Now you have the basics. Get out the drill and preform some brain surgery on someone, or light a pop bottle rocket and aim it at your neighbors roof. You are ready man ..... in other words you now know enough to really get in trouble.

Now some neat stuff: At the top of Netscape Composer you will see File - Edit -
View - etc. So CLICK - View - Page Source. Oh my goodness, look at all that giberish. Quick ... close it ... what have you done! All of your careful work has turned to a bunch of computer garbage. Lighten up ... you have accidentally implanted some HTML code in your web page. Remember ... the stuff you wrote in the margins. Do it again ... take another peek. I guarantee no green worms will come out your nose by looking. Toward the top you will see <html> <head> and stuff like that. Now and again we will have to intentionally put stuff like that in our web page so don't freak out. If you want to really learn HTML then use your search engine to find html tutorials. They are all over the web and free. You don't really need to learn it. Just learn some of the basics ... like for every <head> there has to be a </head>. The slash closes the head tag. For every <html> there has to be a </html>. You can't write <head as that won't work ...You have to write or copy <head> exactly. Underneath, a few lines down, you'll see meta name, meta http and stuff like that. Forget it! We are using Netscape Composer. A little bulky but it works OK and gets the job done, but takes some time.

You might find it interesting to go to the web or a web page you like and select View Page Source and just look it over pretty good. You won't understand much of it but it will give you some perspective and who knows, someday you may want to go back to that page and borrow some of the HTML code.

I never liked the rigidity of music lessons. I had a good ear for music and just wanted to play a damned song. Put the sheet music up there and let me have a go at it. I didn't give a hoot if it took 3 months to learn. Once I learned it, I could actually play something someone wanted to hear. I didn't want to learn Chop Sticks .. I wanted to play Boogie. So every music teacher that tried to teach me Chop Sticks, found that I didn't show up after the 2nd or 3rd lesson. Mom got pretty peed at me over that so she gave up on the music lessons. Guess what ... later in life I learned to play some Boogie. God it was fun. Wish I had taken some lessons.
Guess what ..... We are going to play some Boogie ... right off the damned bat. Screw meta tags ... screw html code. Let's do it! Let's put some Boogie music on your web page. Just remember ... a lot of people really don't like music on the web page they are viewing, so we need to have a shut off switch.

Can't play any music until the music file is on the server. Can't see a .jpg image on the web until it is placed on the server. The WS-ftp program does this in a flash.
You would also use this to transfer .midi files or .au files or .class files so that they would be available for your web page to access when it needed them. We will talk about .class files later.

Let's download WS-ftp now. http://www.mo-net.com/support/html/ftp.htmlIf you are a user of mo-net.com then click that link. While you are on the above link, you might want to read through their information so you will know what to type in for your WS-ftp setup info. It also will have to know who to dial up and stuff like that. If not then click here http://gbgm-umc.org/docs/wsftp-dl.html and read the license agreement. Once you get it downloaded , unzipped and installed then open it up and take a look.

On the left hand side of the screen you will see every file on your computer and a little green arrow at the top of that window. Double click it and examine thoughtfully what you are looking at. Next scroll down in that window. You will see colored icons identifying all of your computer drives. If you want to transfer something from your A drive then select it by double clicking. The right hand side of the screen shows your files on the remote (server) computer. At the top right of the WS-ftp window, mine says /usr/home/shirl/WWW. That is the place where all of my uploaded files are located. So if I want to transfer something from my A drive, I just select that drive and then the file I want transferred on the left hand side of the screen, I then highlight /usr/home/shirl/WWW on the right hand screen. In between both of the screens you will see two arrows. One pointing to the left and one pointing to the right. You want the arrow that points to the right which is the bottom arrow. Click it and before your very eyes the file will be transferred to your server. That is how you can transfer a .jpg or .gif or .midi file all by itself. If all you want to do for example is put up a picture for eBay to see, then that is all you need to do to get it available for everyone to see. The web URL address would be http://www2.mo-net.com/~shirl/picture.jpg ..... slick as snot.

You now need to find a midi file to load up on your computer. While you are at it, find some .gif images, borders and backgrounds. .gif images are those cute little annimated jobs that wiggle at you. So go to http://www.thefreesite.com/freesounds.htmfor midi (music) files. Then go to http://www.free-graphics.com/for graphics and backgrounds. Haul out a formatted floppy and load it up. One for .midi files, one for .gif files, one for backgrounds, one for Applets....ooops later on that last one.

If you did the above procedure it is now the next day. You were overwhelmed with all the free stuff and wanted it all. Some neat stuff out there.

And by the way ... here is how I just put those links in for you to click on. Copy a link by right clicking on it and select copy ... then at the top of Composer select - Insert - Link. A dialog box comes up and where it say's link to a page or location (the second box) just right click again and select paste. Wall-ah .. click Ok and you have a link on your page. Trouble is that now and then when you put in a link and then want to write some more text after it, the link line just keeps extending. When this happens you can generally solve it in one of two ways. First way would be to just hit enter to take you to the next line, then right click and go to the links selection and delete the link. Then set your curser at the beginning of the new line and hit backspace and see if that works. If not then click Edit - HTML Source and when Notepad opens, scroll down to that place. Chances are that after the link it will say </a> which is supposed to end the link but doesn't always do that. So first, make sure that the </a> is not separated from the link line by a space. Next, immediately after </a> put in ( ) without the quote marks or spaces. That means space in HTML. If you want more space then put in two of them and that should work.

Once you have acquired your .midi & .gif files and decided to use them in your web page you probably want to have them handy on your hard drive instead of on a floppy. So minimize everything on your screen then on your desktop select My Computer - C drive -File - New Folder and title it My Web Stuff. Then open your A drive or which ever drive your floppy is on and copy it from the floppy to your My Web Stuff folder. I have some sub folders under My Web Stuff folder and save gifs in one, music in another, backgrounds in another, etc. Your choice. Just make sure you know where it is located on your computer.

That is the code you need to put music on your web page. First open up WS-ftp and find the music file you want. It will either be on a floppy disc or on your C drive under My Web Stuff. Then transfer it to your server by clicking the appropriate arrow. Now you have a midi file ready for the following code to use.

Notice that all of that garbage is stuck between one < and one >. That is one embed tag. With Composer you have to do ONE at at time. (there is an exception) So here we go ... I will put the Boogie deal right here by highlighting the above code with my curser, then right clicking and chosing Copy ... then I will click Insert - HTML tag, wherein a drop down box will appear and I will paste that code in the box. You will then need to verify that Composer inserted the code ok and if it did then click OK and you have a box like this on your home page .. Well it will be a box with an arrow of sorts inside it. When you select Preview or Publish, the box will turn out to be a minature console with a Play, Stop, Pause button. In the code of course you will have to replace my http://location with your http:// location and where mine says ~shirl/kcboog.mid" ... yours will need to say whatever file name of whatever midi song you selected.(click to the left of the button above to hear the music - click the other buttons to pause or stop)

The other stuff sets up the height and width of the smallconcole. Autostart="false" means the music starts playing as soon as you punch the play button. True would mean the music starts as soon as the page loads. ,,, hidden="false" means I didn't want to hide the console and loop means that after it get through playing it will start all over again. True or False is your option on these tags.

When you are satisfied with everything, then click Publish. Bam you have a web page with music playing away. That is assuming you selected autostart=true.

Next let's examine Editing the HTML code from Notepad. With Composer open your page - Click Edit at the top then click HTML Source. Composer may ask if you want to save changes before you go on, so OK that. Now you are looking at that HTML screen again, but his time it has opened up in Notepad. Assuming you typed something on your page, you will see, about 10 or 11 lines from the top, something like this:
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#0000FF" vlink="#FF80FF" alink="#FF0000">

Now you have a general idea that </head> means the heading ended there.
<body text= establishes your font color ... background color as 6 F's for white ... your link colors are set up too. Let's edit this code right now and change the color of your fonts. Where is says <body text="# ... why don't you put in FF0000. That is capital F twice and 4 zero's. Then hit exit ... it will ask if you want to save the changes and you do. Next thing that happens is Composer will show a little pop up window saying someone has been screwing with the page's html code and do you want to see the changes. Of course you do. Now all of your text has changed color. If you want to get it back to the original color then select Edit - HTML Source and delete between the quote marks FF0000 and put 000000 back in. Exit and hopefully Composer will say someone has messed with the page again. Sometimes that window doesn't pop up and your text remains the same. Just go back and do it all over again until the window pops recognizing the change.

I have to say it again .... if you add a space where there isn't a space or mess up a quote or anything else, you have messed up big time because the program won't know what to do and smoke may roll out of your computer. Well maybe not that bad.

Now let's put in a .gif image in your page. Well aint't that cute! I had the image on a floppy in drive A. I located it, highlighted it, right clicked and selected copy. Then on this page I just clicked paste where I wanted it. If you want a picture, you have to do that a little differently. Click Insert (in Composer) - Image. A screen comes up to help you choose or find your .jpg file. I will just use one I know works. I clicked Insert - Image then found my .JPG file. Then decided on the far right block in the dialog window that indicated I might be able to place the picture to the left and have the text wrap around it to the right. The picture was very big, so I selected it, grabed the corners and shrunk it to the size you see. Then I previewed it to make sure it loaded. On my Composer page, the picture showed up in the middle of the page but went where it was supposed to go after I previewed it.
Another problem you may have is that when you put a picture in your page and ask for a Preview or actually Publish it, it may not publish. Instead you will get a big ol herkey icon at the top left of a picture frame. A small icon initially always comes up and if you have done everything right it will vanish and your picture will come up. But the big herkey one is bad news. Possibly your photo program didn't make your picture a useable .jpg file. Maybe you typed .jpg and it wanted .JPG. A lot of times when I copy a picture from my hard drive and paste it to my web page, a screen will come up saying the file has to be converted to "imageJD6.JPG or something similar and that it will put that image in my Windows - Temp folder. That's just fine with me as long as I know where the picture is located and it's name. My original picture may have been titled - indexfinger.jpg - and the program changed the name to image0A8.JPG and put it in the Temp folder. Just be aware that stuff like this happens now and then.

After you get a home page, you may want another page. So on your home page you will put a link to your next page. You can name that page anything you want as long as it ends in .html or .htm. Actually you can have pages that end in .jpg but these pages are put directly to your server via the program WS-ftp. Whatever you name it, just remember that it shows up on someone else's URL window when they arrive at that page. For example I did have a page I harmlessly titled ... PissOnU.html ... before I realized the problem ...so now it is titled http://www2.mo-net.com/~shirl/PeeOnU.htm . If you click there, you will see a couple of .gif images you may want to swipe.

When you get a brilliant idea to add to your main web page, why not try it out on a fresh ... Untitled ... Composer page first. You will have to save it ... I usually call my test pages ... test.html or testpopupwindow.htm or whatever I am messing with. After I test it out to make sure it works I just click Edit - HTML Source ... select all of the copy on that page and copy it to Notepad. From Notepad I recopy each HTML segment ... One at a time .. to the page where I wanted it in the first place.

Like I said earlier, there is an exception to doing one HTML tage at a time. If you click - Edit - HTML Source, then all of your HTML will pop up in Notepad, which can be used for an HTML Editor. In this mode you can, if you are very careful, copy and paste in a gob of HTML codes. Or you can create several of your own HTML codes and place them in your document. When you do that and are ready to close the HTML Editor (Notepad), click Exit and a window will come up asking if you want to save the changes and you do. Next ... in the Composer window you were working with, another window will come up saying you have messed with the code and if you want to see the page reflect these changes. You do. If you did it right then everything will work fine.

If I had to actually Publish my test page to see if it worked then I don't want to forget to use the WS-ftp program to get back on the server and delete it as it is just taking up space. Sometimes you do have to publish to see if the page will work. Especially with .midi files and Java Applets. They won't work in the preview mode.

I know .. a new item Java Applets. I love 'em! They are minature programs that run within Netscape or Internet Explorer or whatever browser you are using and they make neat stuff happen on your web page. For a preview why don't you just click here http://www.codebrain.com/and click on their Java Applet link. You will waste another day at that site. Or try http://www.javapowered.com/ I really like codebrain. They will actually help you via email if your applet doesn't work. And they email quickly.

So we will finish up this little tutorial by adding a Java Applet to your page. I will use a very simple one called ... The David O'Brian Fireworks Kit. Download it from Codebrain. (above) The following is what they call a cheat sheet they send along with the applet.

David O'Brien's Classic Fireworks Applet
Courtesy of www.CodeBrain.com

This applet usually is distributed pretty bare-bones;
probably because it's so easy to use... However,
for the benefit of those less traveled in JavaLand,
we've included sample HTML, a test.html page, and
brief instructions below.

Have a blast... so to speak.

=======================================================

Sample HTML Source:

=======================================================

General Instructions:

This is a very easy applet to use.
Just put these three files:

Firework.class
Rocket.class
fire.au

in the same directory as the HTML page calling
the applet.

Insert the (above) HTML code in any page to get
started -- or use the accompanying test.html page,
ready to roll.

The parameters are pretty much self explanatory...
just work the values and experiment with them.
David O'Brien did a great job of building in a
lot of versatility in this applet!

Best regards,

www.CodeBrain.com

OK ... Let's do it! ..... You have the file downloaded from Codebrain. Now open up the above cheat sheet in Notepad. Open up a blank page in Composer. Copy the first line of the code from Notepad.... it looks like this <APPLET CODE="Firework.class" WIDTH="399" HEIGHT="349">

Click Insert - HTML Tag. Then copy the second line which says this:
<PARAM NAME="AnimationSpeed" VALUE="10">

Just keep doing this until you have all of the parameters inserted
The last insertion will be:
</applet>

Next Open up WS-ftp and transfer the three files needed:
Firework.class
Rocket.class
fire.au
to your server address

Close WS-ftp .... Go back to Netscape Composer where you put in all those funny looking arrows. If you select Preview, all you will get is a blank window. So go ahead and hit Publish. Next open Navigator and see if you can find that file working on the Web ..... It is neat ... really neat. With applets you can have drop down windows, scrolling text, scrolling text at the bottom of the page ... all kinds of crap.

Now you have music, Fireworks, text, links, pictures, .gif's and enough to build a fairly decent web page. As you mess with it over the coming months you will check out Tables and Bulleted lists and all kinds of other stuff.

Back To Home Page Back To Top