TEXT LAYOUT

While everyone might be impressed with your groovy graphics, how to layout text on the page is a very important aspect of web design.

We are so used to working with word processing programs that when we start entering text in for a webpage you just expect to hit carriage return to get a line break or indent to start a new paragraph...

Unfortunately it doesn't work that way...Everything has to be coded in on how you like the text to behave...

Personally I always use tables...to organize my text so I get margins on my page...

If you did this for a living as a graphic designer then using a Cascading Style Sheet is a good tool for laying out your text in your document...

The skills I cover here will be great for helping you design a groovy web page, without the CSS...Eventually I will add this as an entirely new section....

Learning to use tables is linked at the bottom of this page....It is a MUST to see and learn.....It looks more complicated than it is...Once you learn...It becomes a natural tool for a number of tasks such as creating links that look like buttons but aren't....adding graphics...with text beside them...listing your links or midi files....the list goes on.....but in this section we will deal with some basic text moves......

TEXT CODES

Inserts a line break...basically a carriage return...Most editors will have a tool icon for this you just hit on.....

Tthis inserts a new paragraph.....It also causes a line break so can be used in lieu of the above....

Causes an underline to occur under the text. Note ending tag.....

Bolds the text

Just as a reminder from earlier before...with tags...it is very important to get the coding just right...If you leave off an ending bracket...it will mess up your document....Fortunately we can use the View - Page Source to see the code blinking where we have made our mistake or in most editors such as STONE's the codes are colored differently and it is easy to spot a misdone code....well not always easy...but eventually if you stare long enough....With my editor (STONE'S) I constantly hit VIEW and then VIEW SOURCE in External Browser...that way I can spot errors before they accumulate and leave me in a conundrum....It's a good tip.....

Because there are certain characters you use to write out the codes...you have to be careful about typing in certain characters...Below is a table containing some characters and the ASCII code beside...You can use the Numerical or Character Entity code. Say you wanted to type the phrase Julie & Scott. Instead of typing the & character, you would type the ASCII code & amp instead. It prints out the character in your document for you so your browser doesn't think it is actual code. & < > - these are illegal characters in HTML unless you use the codes below... I have also included some characters that are handy to have such as the copyright character..

Illegal character	Numerical ASCII CODE	ALPHABETICAL ASCII
"	& # 34 ;	& quot ; IN THE CODES there are NO spaces when you type them in between the & and the number or letter and NO SPACE between the number or letters and the ; I just had to put them there so you could see the code....GET IT?
<	& # 60 ;	& lt ;
>	& # 62 ;	& gt ;
&	& 38 ;	& amp ;
©	& # 169 ;	& copy ;
®	& #174 ;	& reg ;
™	& # 8482 ;	& trade ;

EMPLOYING WHITE SPACE
with <PRE></PRE>

This tag allows you to include pre-formatted text....Your browser will conserve the white space...Unfortunately sometimes the text will default to a fixed pitch font...otherwise we could just use it constantly...I find though I have used it on occasion...It is good for poetry....which quite often has unusual line layouts...See the poem below and notice the <PRE> </PRE> tag wrapped around it to preserve the white space..

EXPERIMENTS IN RED

<PRE><FONT SIZE="3" COLOR="TEAL" FACE="Arial, Helvetica">


         Tacky red. Like some too sweet cocktail
           drink-her disinhibited id splashing 
               its way around the bar. High 
                 heeled leather skirt red.
                  Hey, where'd you come
                   from anyway.  Do I 
                        know you? 
                         You are
                         kind of 
                         *funny* 
                           real
                           LOL*
                           WEG 
                You strange little woman

</PRE> -

you of course wouldn't see the tags in the document...I just put them in here to show you...(P.S. How I did that was using the ASCII characters otherwise it would have been treated as code)

SO IN SUMMARY LET US LOOK AT A SENTENCE AND THEN THE CODE FOR THE SENTENCE....

This is my Sentence

<CENTER>This is my Sentence</CENTER> </TD>

Just stare at it for awhile to notice the nesting of the text within the elements!!!...It's never as bad as it looks...Remember your editor will have shortcuts to insert the tags, but you have to understand them nevertheless for troubleshooting ....

The text above you is centred in a table...These are THE BEST...I can't say enough about using tables...SO fun...So great for laying out text....That is why I dedicate a whole section of their own on tables...which you can go to now.....

TABLES

[ON TO TABLES][BACK TO FONTS]