So, you want to make a Web Page! Lesson 4 |  |

I think we'll start by learning something about the way a browser works.
First an example...

    <BODY>
    Something really cool
    like an icecube!
    </BODY>

Something really cool like an icecube!

    <BODY>
    Hey!
    What's
    going
    on
    here??
    </BODY>

Hey! What's going on here??

The browser doesn't recognize formatting. Unless you tell it otherwise, it just displays the characters in a steady stream. If you want to start a new line you have to use a line break.

    <BODY>
    Hey!
    <BR>What's
    <BR>going
    <BR>on
    <BR>here??
    </BODY>

Hey! What's going on here??

`<BR>` basically says - start a new line.

Can you use the <BR> tag to skip a line? Sure.

    <BODY>
    <BR>What's
    <BR>going
    <BR>
    <BR>on
    <BR>
    <BR>here??
    </BODY>

What's going on here??

Skip lots of lines? You betcha.

    <BODY>
    <BR>What's
    <BR>going
    <BR>
    <BR>on
    <BR>
    <BR>
    <BR>
    <BR>
    <BR>
    <BR>
    <BR>
    <BR>here??
    </BODY>

What's going on here??

Let's go back to our simple page.

    <BODY>
    Something really cool
    </BODY>

Something really cool

This is the paragraph tag. Think of a paragraph as a block of text.

    <BODY>
    <P>Something really cool</P>
    </BODY>

Something really cool

By itself it doesn't do much. Although with most browsers, starting a new paragraph does have the effect of skipping a line.

    <BODY>
    <P>Something really cool</P>
    <P>like an icecube</P>
    </BODY>

Something really cool like an icecube

So, what else is this <P> tag good for? Well, it's great for aligning stuff.

    <BODY>
    <P ALIGN="left">Something really cool</P>
    <P ALIGN="center">like an icecube</P>
    <P ALIGN="right">or a popsicle</P>

    <P ALIGN="left">
    Something really cool
    <BR>like an icecube
    <BR>or a popsicle
    </P>

    <P ALIGN="center">
    Something really cool
    <BR>like an icecube
    <BR>or a popsicle
    </P>
    </BODY>

Something really cool like an icecube or a popsicle Something really cool like an icecube or a popsicle Something really cool like an icecube or a popsicle Something really cool like an icecube or a popsicle

Something about the `<P>` tag... although in the examples above I used a closing tag (`</P>`), it is not entirely necessary. Nearly all browsers will assume that when a new `<P>`aragraph has begun, the old one must have ended. So...

    <P>Some stuff
    <P>More stuff

is the same as...

    <P>Some stuff</P>
    <P>More stuff</P>

And one more thing before we move on, earlier we were talking about centering things. There's another way to center something that should definitely be in your bag of tricks. It's pretty self-explanatory. You can center one word or your whole page. Everything betwen the `<CENTER>` tags gets centered.

    <BODY>
    <CENTER>Something really cool</CENTER>
    </BODY>

Something really cool

Have a look at this...

    <BODY>
    Something        really        cool
    </BODY>

Something really cool

The browser won't recognize more than 1 space. I know at first this might all seem pretty stupid for it to be this way, but really, it's better like this. It gives you absolute control over the document's appearance.

There is a nifty little code that means "space" to the browser `-> &nbsp;`

Try this instead...

    <BODY>
    Something&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    really&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    cool
    </BODY>

Something really cool

The `&` means we are beginning a special character the `;` means ending a special character and the letters in between are sort of an abbreviation for what it's for. There are quite a few of these special characters. Here are six more. (Note- these should always be lower case)

         &nbsp;     non-breaking space
         &lt;       < less-than symbol
         &gt;       > greater-than symbol
         &amp;      & ampersand
         &quot;     " quotation mark
         &shy;       soft hyphen

You don't need to use them all the time, just when typing the real character would confuse the browser. How do you know when that is? No hard and fast 'rule' that I can think of. It will just come with a little practice and a few screw-ups.

By the way, some thoughts on mistakes & screw-ups. There are those that are of the opinion that mistakes are bad. They are afraid to try anything new for fear of messing it up. Making the same mistake over and over might be a little dumb, but especially while you are learning, don't be afraid to screw everything all up. Mistakes are our friends :-) If you are not screwing something up then you are not learning anything and probably not doing anything. Remember, messing things up is a perfectly acceptable part of learning!

OK, enough babbling. There are other special characters too. You'll probably hardly ever use them but I want you to know they are there.

Let's go over the last couple points real quick because if you're at all like me, it will get confusing. The browser will dispay your text in a steady stream unless you tell it otherwise with line breaks, etc. It will reduce any empty areas to 1 space. If you want more spaces, you must use the space code (`&nbsp;`). Here's a tidbit that we didn't cover... If you hit Return (or Enter) while you are typing, most browsers will interpret that as a space... unless there is already a space there.

One more quick example.

    <BODY>
    Something<BR>really<BR>cool<BR>
    like<BR>an<BR>icecube!
    </BODY>

Something really cool like an icecube!

Pretty clear?? I hope so. I gave it my best shot!

`<--BACK` `NEXT-->`

General Table of Contents | Lessons Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 | Index and Quick Reference | Barebones HTML Guide
PROFESSIONAL WEB DESIGN