e-pixs.com -- HTML Tutorial Text and Fonts

Header Tags
<H1></H1> <H2></H2> <H3></H3> <H4></H4> <H5></H5> <H6></H6>	largest text smaller text smaller text smaller text smaller text smallest text	The tags to the left are called header tags. They are used mainly for titles like at the top of a page or for text in a document where no other change to the text is desired, like changing the color or font style of the text. The header tag gives text a bolder appearance. Go to the practice board and try some.

Font Tags
<font size=+4></font> <font size=+3></font> <font size=+2></font> <font size=+1></font> <font></font> <font size=-1></font> <font size=-2></font>	largest font default size smallest font	The tags to the left are called the font tags and are are much more interesting. With the font tag you can add attributes. Thats the size=xx information. Many tags can include attributes and they can include multiple attributes. More about that in a moment. Go to the practice board and try some.

More Font Tags
<font size=+4 color=blue></font> <font size=+3 color=red></font> <font size=+2 color=white></font> <font size=+1 color=lightgreen></font> <font color=hotpink></font> <font size=-1 color=slate></font> <font size=-2 color=#0000C0></font>	largest font default size smallest font	Now it starts to get fun. The examples on the left have two attributes for each font tag: size=xx and color=xxxxx. Notice that the color can be traditional names: blue, red, lightgreen, hotpink, slate, etc. Or a hexadecimal color number with a number sign (#) in front. See the results of these tags below. There must be a space between each seperate attribute in any tag. Go to the practice board and try some.
blue red white lightgreen hotpink slate dark blue

More Font Tags
<font size=+4 color=blue face=Arial></font> <font size=+3 color=red face="Comic Sans MS"></font>	Now we have three seperate attributes in each font tag: size= color= face= You notice that the second example now has quotation marks around the name of the font. This is important to know and remember. Any attribute in any tag that has spaces in the attribute must be framed with quotation marks. To be really thorough all attributes inside of any tag can have quotation marks. Older browsers might not read and execute the tag and attribute correctly if there are no quote marks, but all modern browsers do not need to use quote marks.
Arial Comic Sans MS
The new attribute face changes the look of the font. A couple of points about changing font faces. The font must be spelled correctly. If the font you choose to use is not installed on the persons' computer that views your HTML they will not see that font, instead they will see the default font face that is set in their browser. So it is best to stick with common Windows fonts such as: Arial, Comic Sans MS, Roman, Times New Roman, Helvectica, etc. Those really cool fonts you have will only display on the minority of computers that have that exact same font installed on them in the Windows font folder. So resist the urge to use fonts like Jokerman or Kidnap. Although Wingdings can be fun...:^) Remember the point about quotation marks in the box to the right. Go to the practice board and try some.

Basic Formatting Tags
These tags are pretty much self explanatory. Many can be used in conjunction with the <FONT> tag to produce nice results. Example: <FONT COLOR=RED FACE=ARIAL><I>TEXT HERE</I></FONT> Gives you: Red colored Italic Arial text Note that you open and close multiple inline tags in reverse order. First tag opened is the last tagged closed and the last tag opened in the first tag closed. You can use as many inline tags like this as you want. Start out crawling before you walk, then walk before you run though. Practice makes perfect !!
<B></B> BOLD TEXT <I></I> ITALICS TEXT <U></U> UNDERLINED TEXT <STRIKE></STRIKE> ~~STRIKETHROUGH TEXT~~ (<S></S> does the same thing) <STRONG></STRONG> STRONGLY EMPHASIZED TEXT (Like Bold) <EM></EM>EMPHASISES TEXT (Like Italics) <BIG></BIG>MAKES TEXT A LITTLE BIGGER AND BOLDER Go to the practice board and try some. <SMALL></SMALL>MAKES TEXT A LITTLE SMALLER <SUP></SUP>^SUPERSCRIPT (Example: 10³) <SUB></SUB>_SUBSCRIPT (Example: H₂0) <BR> This tag forces a line break. (A new line in other words.) <P> This tag forces a new unindented paragraph. <P ALIGN=LEFT></P> This tag forces left justification. <P ALIGN=CENTER></P> This tag forces centered justification. <P ALIGN=RIGHT></P> This tag forces right justification. Go to the practice board and try some. <HR>Horizontal rule. Draws a horizontal line below where the tag is inserted. <HR SIZE=5 WIDTH=75% NOSHADE> Horizontal rule with SIZE, WITDH and NOSHADE attributes. <HR SIZE=10 WIDTH=50% COLOR=RED> Horizontal rule with SIZE, WITDH and COLOR attributes. <CENTER></CENTER> Centers text or any data between the opening and closing tag. <BLOCKQUOTE></BLOCKQUOTE> Indents the area between the blockquote tags on the left and right. Nice way to make a block of text stand out on a page. <PRE></PRE> PRE FORMATTED TEXT. This tag retains all spacing and uses mono spaced characters. A little tricky but can be very useful. Go to the practice board and try some.

Basic Formatting Tags

These tags are pretty much self explanatory. Many can be used in conjunction with the tag to produce nice results.

Example:
TEXT HERE
Gives you: Red colored Italic Arial text

Note that you open and close multiple inline tags in reverse order. First tag opened is the last tagged closed and the last tag opened in the first tag closed. You can use as many inline tags like this as you want. Start out crawling before you walk, then walk before you run though. Practice makes perfect !!

BOLD TEXT

ITALICS TEXT

UNDERLINED TEXT

<STRIKE></STRIKE> ~~STRIKETHROUGH TEXT~~ (<S></S> does the same thing)

STRONGLY EMPHASIZED TEXT (Like Bold)

EMPHASISES TEXT (Like Italics)

<BIG></BIG>MAKES TEXT A LITTLE BIGGER AND BOLDER

Go to the practice board and try some.

MAKES TEXT A LITTLE SMALLER

^SUPERSCRIPT (Example: 10³)

_SUBSCRIPT (Example: H₂0)

This tag forces a line break. (A new line in other words.)

This tag forces a new unindented paragraph.

This tag forces left justification.

This tag forces centered justification.

This tag forces right justification.

Go to the practice board and try some.

<HR>Horizontal rule. Draws a horizontal line below where the tag is inserted.

<HR SIZE=5 WIDTH=75% NOSHADE> Horizontal rule with SIZE, WITDH and NOSHADE attributes.

<HR SIZE=10 WIDTH=50% COLOR=RED> Horizontal rule with SIZE, WITDH and COLOR attributes.

Centers text or any data between
the opening and closing tag.
<BLOCKQUOTE></BLOCKQUOTE>

Indents the area between the blockquote tags on the left and right. Nice way to make a block of text stand out on a page.

    PRE FORMATTED TEXT.
    This tag retains all spacing
    and uses mono spaced characters.
    A little tricky but can be very useful.

Go to the practice board and try some.

Controlling text and fonts