-- Click to visit --
Home Page
Site Map,
Bones of a Web Site
Lesson 3   Lesson 4   Lesson 5

Tags to organise text

Open your page1.html file in Notepad. Save it as page4.html. Now open it in your Browser, to watch the changes as you change your code during the lesson.

<BODY BGCOLOR="#FFFFFF">
Hey!
What's
going
on
here??
</BODY>
Hey! What's going on here??

The browser ignores instructions it does not understand (maybe you used a spelling error).
It also ignores upper and lower case.
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 BGCOLOR="#FFFFFF">
Hey!<BR>
What's<BR>
going<BR>
on<BR>
here??
</BODY>

Hey!
What's
going
on
here??

<BR> simply says- start a new line. Simlilar to <BR> is <P>. It does exactly the same thing but it breaks, then skips a line.

<BODY BGCOLOR="#FFFFFF">
Hey!<P>
What's<P>
going<P>
on<P>
here??
</BODY>

Hey!

What's

going

on

here??


These are examples of standalone tags. No closing tag required. Another thing about the <P> tags... you can't use them more than once. In other words, specifying <P><P><P> won't give you 3 empty lines, it will just give you 1. How can you add several empty lines? I'll tell you in a minute.

Look at this first...

<BODY BGCOLOR="#FFFFFF">
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 to have it this way. 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...

<BODY BGCOLOR="#FFFFFF">
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 six of these special characters.
(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 by-product of learning!

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, the browser will interpret that as a space... unless there is already a space there.

One more quick example.

<BODY BGCOLOR="#FFFFFF">
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!

Next up is a very useful little tag. It's pretty self explanatory.

<BODY BGCOLOR="#FFFFFF">
<CENTER>Something really cool</CENTER>
</BODY>

Something really cool

You can center one word or your whole page. Everything betwen the <CENTER> tags gets centered.

I almost forgot, I was going to show you how to make multiple blank lines. It's really simple. Make an empty space with a line break for each blank line you want.

<BODY BGCOLOR="#FFFFFF">
Something really<BR>
&nbsp;<BR>
&nbsp;<BR>
&nbsp;<BR>
&nbsp;<BR>
&nbsp;<BR>
cool
</BODY>

Something really
 
 
 
 
 
cool




Extra stuff you may like to know

We mentioned <TT> to imitate typewriter text.
Remember when I said that the browser doesn't understand formatting, it just displays text in a steady stream? Kind of like this...

<BODY BGCOLOR="#FFFFFF">
 

                 \|/ 
                (@ @)
     +----oOO----(_)-----------+
     |        ELIZABETH        |
     |           for           |
     |    FAVOURITE TEACHER    |
     +-----------------oOO-----+
               |__|__|  
                || ||
               ooO Ooo
</BODY>
\|/ (@ @) +----oOO----(_)-----------+ | ELIZABETH | | for | | FAVOURITE TEACHER | +-----------------oOO-----+ |__|__| || || ooO Ooo

Well, with the <PRE> (preformat) tag, we can put a stop to that and have things displayed the way we type them.

<BODY BGCOLOR="#FFFFFF">
<PRE>
 

                 \|/ 
                (@ @)
     +----oOO----(_)-----------+
     |        ELIZABETH        |
     |           for           |
     |    FAVOURITE TEACHER    |
     +-----------------oOO-----+
               |__|__|  
                || ||
               ooO Ooo
</PRE>
</BODY>
 
                 \|/ 
                (@ @)
     +----oOO----(_)-----------+
     |        ELIZABETH        |
     |           for           |
     |    FAVOURITE TEACHER    |
     +-----------------oOO-----+
               |__|__|  
                || ||
               ooO Ooo

* Notice that a monospaced font is used.


Text Styles

<B>text</B>Display text in bold
<BIG>text</BIG>Display text in big font
<I>text</I>Display text in italics
<SMALLl>text</SMALL>Display text in small font.
<S>text</S>Strikethrough text
<SUB>text</SUB>Subscript text
<SUP>text</SUP>Superscript text
<TT>text</TT>Typewriter text
<U>text</U>Underline text
<KBD>text</KBD>Keyboard text
<STRONG>text</STRONG>Strong emphasis text
<FONT SIZE="size">text</FONT>Font size = 1 to 7 Text
<BLINK>text</BLINK>Blinking Text



Blocks of Text

Text can be specially separated and formatted using the following tags:

<ADDRESS>text</ADDRESS> Mailing address
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

<BLOCKQUOTE>text</BLOCKQUOTE> Quotations
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

<CODE>code</CODE> Computer Code
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

<CENTER>text</CENTER> Center text and/or images.
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

<PRE CLEAR=["left"l "right"l"all"] text </PRE> Text is diplayed exactly as typed
Text Text    Text Text    Text    Text Text    Text Text Text Text Text
 Text Text Text Text Text    Text Text Text Text Text Text Text Text
 Text Text    Text Text Text      Text Text Text Text Text Text Text Text



Home, Site pages,   Lesson 5


Back to Introduction, 2 Body text, 3 Body attributes, 4 Text Formatting,
5 Adding images, 6 Lists and lines, 7 Links, 8 Other comments.
the 140 Colour the page, using hex numbers,
HEXbcr, HEX test, Complex about colour,
My Web Address is           http://www.geocities.com/mallee2007

This website is developed and maintained by
, Elizabeth Janson

1
Hosted by www.Geocities.ws