Lesson Two

Home

Friends

News

Greetings

Entertainment

Tutorial Links

Java

To keep things a little cleaner I am only going to write what is in the <BODY> tags.
I will omit the <HTML>, <HEAD> & <TITLE> tags. Important to say, keep these in your document.
<BODY> </BODY>

Type something really cool.
<BODY> Something really cool </BODY>

Something really cool

Whenever you make a change to your document, just save it, then hit the Reload button on your browser. In some instances just hitting the reload button doesn't quite do the trick... in that case hit SHIFT- Reload.

I think the first thing we are going to learn is how to change background colors. I think you'll agree that the gray is pretty ugly. Pretty ugly... is that like an exact estimate? (Note- gray is not always the default background color.)
<BODY BGCOLOR="#FFFFFF"> Something really cool </BODY>

Something really cool

FFFFFF is computerized for white. Here are a few more.
In 256 color mode Netscape dithers all images to these colours. Additionally if a background colour is specified that is not one of these colours, then Netscape will usually pick the closest of these colours to use. Although it's not overly important to understand how browsers and colours work together at this point in time, you may want to stop back after the lessons and learn about Netscape's infamous 216 colours.

You can specify a background image instead.
<BODY BACKGROUND="swirlies.gif"> Something really cool </BODY>

Here's the background image
You can save this image (swirlies.gif) to the folder where you saved the html document. Just right click on the image and choose Save Picture As...

It's probably pretty obvious that the image is tiled. If you use a long skinny
image you can get an effect like this...
<BODY BACKGROUND="bluebar.gif"> Something really cool </BODY>

Here's the background image

(It's actually 800x2, but I have compressed it here to 530x2 so it will fit on everyone's screen)

Let's go back to a plain old white screen.
<BODY BGCOLOR="#FFFFFF"> Something really cool </BODY>

Something really cool

We can make things bold.
<BODY BGCOLOR="#FFFFFF"> Something really cool </BODY>

Something really cool

What we are telling the browser is: at the  start making things bold, and at the  stop making things bold.

The same principle applies to italics...
<BODY BGCOLOR="#FFFFFF"> Something really cool </BODY>

Something really cool

...and underlining.
<BODY BGCOLOR="#FFFFFF"> Something really cool </BODY>

Something really cool

Back again to a plain white screen.
<BODY BGCOLOR="#FFFFFF"> Something really cool </BODY>

Something really cool

We can use tags in combination if we want to.
<BODY BGCOLOR="#FFFFFF"> Something really cool </BODY>

Something really cool

This is an example of nested tags. If you are going to use tag pairs in combination (which you will probably be doing quite a bit), then to avoid confusing the browser, they should be nested, not overlapping. Let me illustrate...
 <THIS><THAT></THIS></THAT> Overlapping tags.... bad
 <THIS><THAT></THAT></THIS> Nested tags.... good

A very useful type of text effect is the mono-spaced font, or Typewriter Text.
<BODY BGCOLOR="#FFFFFF"> <TT>Something really cool</TT> </BODY>

Something really cool

Each letter uses the same amount of horizontal space.

This is regular type -> iiiiiiiiii
oooooooooo
mmmmmmmmmm

This is monospaced type -> iiiiiiiiii oooooooooo mmmmmmmmmm

We can change the font size too... It's pretty easy!
First add the  tags...
<BODY BGCOLOR="#FFFFFF"> Something really cool </BODY>
Then specify a SIZE attribute.
<BODY BGCOLOR="#FFFFFF"> Something really cool </BODY>

Something really cool

Fonts come in 7 sizes:

tiny small regular extra medium large real big yell

1 2 3 4 5 6 7

Two things I want to discuss now. First, a <TAG> tells the browser to do something. An ATTRIBUTE goes inside the <TAG> and tells the browser how to do it.
Second point is about defaults. As you probably know, the default value is a value that the browser assumes if you have not told it otherwise. A good example is the font size. The default font size is 3. If you say nothing it will be 3. If you make faces at your computer it will still be 3.
Every browser has a default font setting- font name, size and color. Unless you have messed with it the default is Times New Roman 12pt(which translates into 3 for our purposes) and it's black. Now with Netscape 3.0 we can specify font names other than the defaults. Like ARIAL and COMIC SANS.
<BODY BGCOLOR="#FFFFFF"> Something really cool </BODY>

Something really cool

The font will only display if your viewer has that font installed on their computer.
Let me repeat... If the person looking at the page doesn't have installed on their computer the font you specify, then they will only see the default font. So be very judicious in your use of fonts. Arial and Comic Sans MS are pretty widely distributed with Windows. So is Impact!. You can hedge your bets a little by specifying more than one font. (Yes! You can do that!). Just do one of these... Hello.
For lunkheads like me that might not understand that right away, here's what's happening- The browser looks for ARIAL. If it finds it, it uses it. If not, it goes on to HELVETICA. If it can't find that, it looks for LUCIDA SANS. And if it can't find that it uses the default font.
Now I guess is a good time to yap a bit about syntax. You notice here and
there I use quotation marks, these are important. You have no idea how many times I made a page and it was all screwed up... I mean all screwed up because of a single missing or misplaced quotation mark or a missing space or a missing greater than > sign . Someday we will be separated from this kind of coding, but for now we just have to be careful. Another thing is my use of CAPITAL LETTERS for most of my marking up. This is just personal preference.
I find that the tags stand out more when using all caps. You could just as well use  instead of . You can even use  if that's what trips your trigger.
Alright, back to the fun stuff.
You can change the font colour if you like.
<BODY BGCOLOR="#FFFFFF"> Something really cool </BODY>

Something really cool

We can, of course use more than one ATTRIBUTE in a <TAG>...
<BODY BGCOLOR="#FFFFFF"> Something really cool </BODY>

Something really cool

Oh! We're on a roll now!
<BODY BGCOLOR="#FFFFFF"> Something really cool </BODY>

Something really cool

I feel the need to point out once again that multiple tags should be nested.
<TAG3><TAG2><TAG1>Hello!</TAG1></TAG2></TAG3>
It doesn't matter which tag is first. It's not like if you want to make something red and bold you have to do one or the other first. You can do them in any order you want. Such as..
<TAG2><TAG1><TAG3>Hello!</TAG3></TAG1></TAG2>
The fastest way to confuse the browser, not to mention yourself is to overlap the tags...
<TAG3><TAG2><TAG1>Hello!</TAG3></TAG1></TAG2>
(I couldn't think of a way to explain it so I hope the use of examples makes it clear.)

One more thing and we'll wrap up this lesson. The browser has default settings for text colour, link colour, active link colour and visited link color in addition to the background colour. The defaults are...

Text is black
Links are blue
Active link is red
Visited link is purple

You can change these if you need to (optional). The whole world has gotten used to links being blue. Why confuse us?
You can change these defaults for the entire document in the <BODY> tag.
<BODY BGCOLOR="#00000" TEXT="#FFFF00" LINK="#FF0000" VLINK="#800000" ALINK="#008000"> Something really cool </BODY>

Something really cool

I know that we have not gotten into how to make links, so that information is not shown above (why muddy the water?) This is simply to show you how to make the color changes when you do learn how to make links.
 You can see that the background is now black and the text is now yellow.
 Links are now red
 Visited links are now dark red
 And active links are green.

There! You now know just about everything that has to do with manipulating the text in your document. You can now make Big red letters or small bold letters You can use other Fonts, or monospaced fonts.
You can even make a rollercoaster!
Coding for the roller coaster is here.

You can even make a rollercoaster!

<--BACK NEXT-->

Lesson 2