Making Web Pages in Netscape

Notepad Html Editing:

Ok...it's notepad html editing time. Does everyone have their deluxe/better notepad installed?

After the html has been saved from Netscape's composer, there is a good chance you will need to do some fine tuning, editing. Although Composer is the best and easiest we've found for setting up web pages, there are a few little problems. Most webpage editors will add excess code, so you should learn this no matter what.

Some Basics

To better understand editing html in Notepad, first you have to learn to recognize a few basic codes and two rules

Rule #1: All code must be enclosed.
<html> <head> <body> and etc.

Rule #2: Whatever you begin in code must be ended in code.
<center> </center> and etc.

So....if you've used the center command to center something, it would go like this:

<CENTER><IMG SRC="headcontact2.jpg" ALT="Contact Information at Rob's" HEIGHT=120 WIDTH=600></CENTER>

Ok....so let's discuss everything we see in the code above. First we wanted the image centered, so we used center in netscape and <center> is the code it automatically put in.

Right next to it is the image code....IMG SRC= Now take note that the actual image is between quotation marks.

ALT....that is extra information that comes up as text while an image is loading on the web page. If you want to add alt text, you can either type it in in Notepad, or... while in Netscape, right click on the image and use the alt text button. A window will come up. Fill in what you want as text and say ok. Now that code has been added to the html.

The next two things in the string of information is height and width. When you add an image in netscape, it automatically sets those values. If you end up doing any java applications like the lake affect, you will have to alter those values in Notepad.

Finally, since we had started with the center command, we have to end it.

There are many problems revolving around case sensitivity. Try to keep all your images, midis, and html in lower case. It will save you some problems. It's not a rule, it's just a guide that has saved me some problems over the years.

The Top of the HTML Page

Now remember in the Netscape tutorial that I said how important it is to pick the basic text color you will be using on the page in Page Properties? I'm going to paste in the top of a page I did. The following is everything I setup in Page Properties before I did anything else.

<HTML>
<HEAD>
 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
 <META NAME="Author" CONTENT="Web Warriors at http://www.glorianon.com">
 <META NAME="GENERATOR" CONTENT="Mozilla/4.05 [en] (Win95; I) [Netscape]">
 <META NAME="Description" CONTENT="Automotive & Truck repair, collision specialists, body work, towing & mobile road services. Full services from one of the largest companies in the Philadelphia area.">
<META NAME="KeyWords" CONTENT="automotive services, towing, collision repair, road service, trucking, body work, heavy recovery, mobile repair, car rentals, Bucks County, Philadelphia">
 <TITLE>Contacting Rob's</TITLE>
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#0000EE" VLINK="#800080" ALINK="#FF0000">

Ok...so you see how the html actually begins. <html> is always first. Now...see the <head> ? That's everything that went in before I actually started the page design. Some of these things are handled automatically by Netscape. I filled in the Author, a site Description, Keywords, a Title for the page, and then the Head ends.

But the things I setup in Page Properties are not quite finished. First comes the body text color, in this case black. I've made the background color of the page white....bgcolor stands for background color. The next three color codes are the link colors I chose. Link is for linking text, vlink is for followed link, and alink is for active link. Now since I did choose a text color, Everytime I type in text it won't have to add a font color code.

</HEAD>
<BODY TEXT="#FFFFFF" BGCOLOR="#990000" LINK="#FFFF00" VLINK="#00CC00" ALINK="#FF0000" BACKGROUND="flakered.jpg">
<EMBED SRC="avemaria.mid" hidden="true" autostart="true" loop="true">

Ok....so you see I pasted from the end of the heading. In this html I was using a background image. That's the end of the page setup stuff, so next I paste in the sound code. Then the rest of my page will begin. I'll cover codes at the end.

Font:

<CENTER>Email Addresses: </CENTER>

Now.....here is an example of text I added lot's of changes to from the setup of my page properties. I made the text bold and italic, I used a font that wasn't the default, I chose a color not setup as the page text color, and I made the text very large. So.....there was quite a bit of code to begin and end. There were 3 font codes that had to be ended, then the italic, bold and center had to end. For every font change you add, you must have .

Some basic codes you will need to associate with text:
B = bold
U = underline
I = italic

Editing

Ok....now I want to give you an example of something you might have to edit out in Notepad now that you're getting a general idea of how the html works.

<CENTER> <IMG SRC="construc02.gif" HEIGHT=27 WIDTH=202></CENTER>

Ok students....this is a test. Does anyone see anything wrong with the code above? Do I see any hands? Well.....I see the center command, and then some font commands, and the image code.....but wait.....do I actually see any text typed in there? NO! Every now and then an editor will add some font code when putting in an image! These are the kinds of things you have to look for when checking over your html in Notepad. Oh...believe me....Front Page adds mega extra stuff.....so let's not be too hard on Netscape! Ok..let's edit that.

<CENTER><IMG SRC="construc02.gif" HEIGHT=27 WIDTH=202></CENTER>

btw.....a good clue to that text code not needing to be there was the fact that the code began and ended with no text between it! Now doesn't that edit look better? The page would have looked fine on the web, but.....for every extra little piece of html code, the kb size of html gets bigger. I always shoot for smaller.

<CENTER><HR SIZE=3 WIDTH="100%"></CENTER>
That last one is how the horizontal line you add in Netscape looks. You can alter the height and width of it for a different look.

Spaces and Line Breaks

Now.....a couple of common editing problem are spaces or breaks where you don't want them. Let me explain something here. Let's say you are typing a line of text that you have centered on the page. Maybe it's a heading. You want a line of text below it, so you hit enter. That creates a line break code: Sometimes you will find that you didn't want the line to break but it did anyway. So...open it up in Notepad and look there for that little line break code. If you wanted a break and didn't get one, you can add one in notepad. Just remember to always end what you begin.

The spacing command looks like this:  

You may find that the space command gets put in places where you don't want it. Unlike the line break command, the space code is not enclosed in brackets. Now here is one confusing little fact though. The ampersan (spelling does not count!) looks a lot like the space thingy. Take a look at this:

<CENTER>Rte. 413 & Rte. I-95</CENTER>

<CENTER> </CENTER>

<CENTER> <IMG SRC="bar2.jpg" VSPACE=10 HEIGHT=10 WIDTH=500></CENTER>

Take note on the first line that I wasn't using the default font so it had to add the font type/face. Now.....that & between 413 and Rte. is the ampersan. Right below that line is a centered space. I actually don't need that spacing code since right below it is an image that I added vertical space to. But....it would be good to remember how that looks. If you want to you can add

<CENTER> </CENTER>

to add some space between tables or text. Sometimes you have to go into Notepad and remove too many of them though! Let's clean that section of html up.

<CENTER>Rte. 413 & Rte. I-95</CENTER>

<CENTER><IMG SRC="bar2.jpg" VSPACE=10 HEIGHT=10 WIDTH=500></CENTER>

Once again, doesn't that look better? There was also a useless space on that last line between the center command and the image.

And if you remember your Netscape lessons, VSPACE adds space to the top and bottom of an image. That's why I didn't need that extra spacing html code. I had already covered that by adding the Vspace. And Hspace adds space to the left and right of an image.

Does anyone have any coffee?

Ok....let's review while we drink our coffee.

We've covered how the html begins, the section called head, our page properties and what they added to the html, beginning and ending code, basic html codes, font codes, spacing and breaks, and what to look for to either edit in or out. While you're recovering from the first part let me say that I intend to offer you something called the spacer.gif. It's teeny tiny and invisible. But oh how much I use it! I did a product table for a client. In this table I created rows with just color in them to add a nice colorful break in the listing. Well...in IE the nice blue row turned to a tiny blue line. So...I inserted the trusty spacer.gif and added some vspace to it. I use this little sucker a lot. Now repeat after me.....the spacer.gif is our friend!

<CENTER><IMG SRC="spacer.gif" VSPACE=20 HEIGHT=8 WIDTH=8>

Ok.....get ready to right click on it and save it, there it is------->
Did you get it? It's right at the end of the arrow. I thought you would have fun trying to catch it.

Sound Codes

Ok.....sound codes. You wouldn't believe how many people on aol write me and ask how to get sounds on their pages! Well.....the bad thing is that they are using Personal Publisher or AOL Press which for the most part is very limited. Things like sound codes, counter codes, link exchange codes, webring codes, etc....have to be pasted in Notepad. I'm going to show you two sound codes: The basic one and the crescendo one. The first code is the basic bg sound code. The second one is the crescendo.

<bgsound src="evrgreen.mid" loop="infinite">

<EMBED SRC="avemaria.mid" hidden="true" autostart="true" loop="true">

Unless you are going to install Crescendo for both IE and Netscape, you might want to go with the plain code at first. Although we use Crescendo with no problems on our computers, there have been some people that did have trouble. I do think though their systems were older ones.

So....all you have to do is to paste the code in right after the last link code or background image code if you are using one at the top of your page. Just change the name of the midi to the one you are using. Don't forget to upload the midi to your site too!

Link Codes

Ok...not to worry. You will be able to setup your links very easy in netscape. I just want you to be aware of what the links look like. Now.....this first one is a link that links outside of your section of pages. Remember that in the netscape tutorial? So if you were placing a link back to me, it would look like this:

<CENTER>Web Design © <A HREF="http://www.glorianon.com">Web
Warriors</A></CENTER>

The link goes before the text or image it's making a link. So it's actually Web Warriors that was made a link. That © is for the copyright symbol. To make it when you are typing text, ©, you hold down alt on the keyboard and type the number 0169. Ok....now also note that link code has to end too. It ends with: </a>

Now here is how the link looks when I was linking to something on the same site or in the same folder:

<CENTER><A HREF="cxmas04g.html"><IMG SRC="backangel.gif" VSPACE=15 BORDER=0 HEIGHT=75 WIDTH=120></A></CENTER>

You will notice that there is no http address, just the name of the html I am linking to. Works the same for an image too.

Counter Codes

Ok.....Netscape and some other editors screws over the counter code, but we've got a little trick to save you that headache. I'm going to paste in a counter code from my page.

<A HREF="http://member.linkexchange.com/cgi-bin/fc/fastcounter-login?185788" target="_top"><IMG SRC="http://fastcounter.linkexchange.com/fastcounter?185788+371583" NOSAVE BORDER=0 ></A>

Now take note of NOSAVE after the last counter number and before BORDER=0. That's the little thing that keeps it from getting messed up. I do strongly suggest that you keep all codes in a text file as backup though just in case something happens. That means all counter codes, webring codes, etc.

Oh.....small note here. If you do join a webring, ask them to send you the code as an attachment.....aol screws it up. And....if you register for a link exchange counter, copy your code right then and there when they give it to you! Paste into a text file.

Netscape 1 I Netscape 2 I Netscape 3 I Netscape 4 I Netscape 5 I
Netscape 6 I Netscape 7 I Netscape 8 I Netscape 9
Notepad Editing I A Better Notepad I Graphic Buds Tutorials

[Netscape 1 [Netscape 2] [Netscape 3] [Netscape 4] [Netscape 5]
[Netscape 6] [Netscape 7] [Netscape 8] [Netscape 9]
[Notepad Editing] [A Better Notepad] [Using Iview]

[Forum] [Members] [Join] [Rosebuds] [Resources] [PSP Tutorials] [Graphic Buds]