formatting text on a web page

This page deals with html tags for formating a webpage with text and will show how to create a headline, how to make paragraphs, how to pick fonts and change their color and size

the h tag

Use the H tag to create a headline, the h tag comes in six flavours (yum yum!)

<H1>this is h1</H1>

<H2>this is h2</H2>

<H3>this is h3</H3>

<H4>this is h4</H4>

<H5>this is h5</H5>
<H6>this is h6</H6>
the H tag is a block level element, which means it will start on a new line, in other words if a H1 tag were inserted into the middle of a line of text a there would be a linebreak at the point where the <H1> starts and another linebreak after the </H1> closing tag
the following attributes can be added to the H tag
align=[ left | center | right | justify ]
example
<H5 align=left>Hello World</H5>

the P tag

A very similar tag to the H tag is the P tag which defines a paragraph
The <P></P> tags are also a block level element and share the same attributes as the H tags
align=[ left | center | right | justify ]
<P align=left>Hello World</P>

the font tag

Probably the most versatile text formatting tag is the <font></font> tag
The font tag not only allows the color and size of text to be selected but also allows specific fonts to be selected

an example of the font tag
<font face="arial">this is the arial font face</font>

change the color
<font face="arial" color="#FF0000">this is the arial font face</font>

choose from 1 of 7 sizes
<font size=7>size 7</font>
<font size=6>size 6</font>
<font size=5>size 5</font>
<font size=4>size 4</font>
<font size=3>size 3</font>
<font size=2>size 2</font>
<font size=1>size 1</font>

using specific fonts

Unless a font is specified in a html document all of the text contained in it will be rendered in the users default font, this is also true if the specified font is not installed on the users computer
The font tag gives enough flexibility to allow html authors to specify a 'back up' font

<font face="georgia, times new roman, arial">alternative fonts</font>

in the example above the browser will attempt to render text in the georgia font, if the georgia font is not installed the browser will attempt to render text in the times new roman font and if that is unavailable the browser will search for the arial font

the following 12 fonts are installed on both pc and mac and are considered as 'safe'
arial, arial black, comic sans ms, courier, courier new, georgia,
helvetica, impact, palatino, times new roman, trebuchet ms, verdana
most browsers prefer font names to be lower case
the font tag is an inline element, if the browser encounters the font tag in the middle of a line of text it does not cause a linebreak

heres some quick links to some useful tools

quick links
list of fonts same window new window
named colors same window new window
hex colors same window new window

monospaced text

to create typewriter text (teletype text) use the <TT></TT> tags
<TT>teletype text is monospaced which means each letter takes up exactly the same amount of space</TT>
monospaced :
each letter uses the same amount of space 		  iiiii
aaaaa
mmmmm
normal text :
letters use various amounts of space 		  iiiii
aaaaa
mmmmm

preformatted text

use the <PRE></PRE> tags to render text exactly as it is written out in the source code 
<PRE>
                         .--,
          .-.    __,,,__/    |
         /   \-'`        `-./_
         |    |               `)
          \   `             `\ ;
         /       ,       ,     |
         |      /        :  O /_
         |          O  .--;__   '.
         |                (  )`.  |
         \                 `-` /  |
          \          ,_  _.-./`  /
           \          \``-.(    /
           |           `---'   /--.
         ,--\___..__        _.'   /--.
     jgs \          `-._  _`/    '    '.
        .-' ` ' .       ``    '         ;
</PRE>
Credit: POOH by joan stark, visit joan's ascii art website (new window)

remember not to make lines of text too long when using the pre tag or users will be forced to scroll sideways

pre is a block level element

some quick tags

 use the <B></B> tags to make text <B>bold</B>

use the <EM></EM> tags to <EM>emphasise text</EM>

use the <U></U> tags to <U>underline text</U>

use the <I></I> tags to make<I>italic text</I>

use the <BIG></BIG> tags to <BIG>increase the font size by +1</BIG>
the maximum font size is 7

use the <SMALL></SMALL> tags to <SMALL>decrease the font size by -1</SMALL>
the minimum font size is 1

« back | html tutorial | next »

//if the user is using IE 4+ if (document.all) document.write('click here to bookmark this site!') else document.write('press Ctrl and D to bookmark this page')
home
html tutorial css tutorial javascript webmaster articles link exchange
html tutorial

make money
from your website