
Intro
>	HTML Tutorial
>	Your First Web Page
>	Backgrounds & Link Colors
>	Formatting Text
Images
>	Adding Images
>	Aligning Images
>	Linking & Bordering Images
Tables
>	Tables
>	Table Attributes
>	Table Cell Spanning
>	Table Tips
Forms
>	Forms
>	Form Elements
>	Form Submit Buttons
Frames
>	Frames
Web Colors
>	Web Colors
>	Web Color Table
>	Web Color Names
>	Web Color Calculator

Formatting Text with HTML

This page covers:
      Heading Text Tags
      Font Tags
      Text Style Tags
      Formatting Tags

Heading Text Tags

You were just introduced to the P (Paragraph) tag, and now we're going to go over some other basic HTML tags to alter text. First of all, for titles you can use the heading tags:

H1 heading (`<H1> </H1>`)

H2 heading (`<H2> </H2>`)

H3 heading (`<H3> </H3>`)

H4 heading (`<H4> </H4>`)

H5 heading (`<H5> </H5>`)

H6 heading (`<H6> </H6>`)

Use the blue tags and put your text in between the opening and closing tags. I personally never use these tags because I prefer to use the FONT element. For example, you can create headings that look similar and you have more control over them. Heading tags don't let you put anything above or below them without a full paragraph break:

Example:

Heading 2

Some sample text I want to have right underneath the heading.

Code:

<H2>Heading 2</H2> Some sample text I want to have right underneath the heading

Instead, I can make a heading using FONT and the B (Bold text) element to get the same effect. With these tags, I also gain more control of the placement of the text underneath the heading:

Example:

Heading
Some sample text I want to have right under the heading

Code:

<P><FONT SIZE="5"><B>Heading<B></FONT><BR> Some sample text I want to have right under the heading<P>

You'll notice above that I use the BR element. BR creates a line break. Where <P> creates a paragraph break (2 line breaks). <BR> creates only one. There is no end tag for the BR element. The end tag for the P element is optional. I personally like to use the end tag for consistency's sake, but it's not neccessary.

The FONT Element:

Element

Attribute

Variables

FONT color
Hexadecimal code or valid color name

Example:
Sample Text

CODE:
<FONT COLOR="#CC0000">Sample Text</FONT>

Element

Attribute

Variables

FONT size
1 to 7 (3 is default) OR -2 to +4 (0 is default)

Example:
Font size 4
Font size +1 (notice that these two are the same size)

CODE:
<FONT SIZE="4">Font size 4</FONT>
<FONT SIZE="+1">Font size +1</FONT>

Element

Attribute

Variables

FONT face
Comma separated list of font names in order of preference.

Example:
Times Font
Arial Font
Comic Sans MS Font

CODE:
<FONT FACE="times">Times Font</FONT> <FONT FACE="Arial">Arial Font</FONT> <FONT FACE="Comic Sans MS">Comic Sans MS Font</FONT>

Text Style Elements

Element

Description

Example

CODE

B
Bold text

Bold text
<B>Bold text</B>

BIG
Large text

Large text
<BIG>Large text</BIG>

CODE
Computer code text

CODE text
<CODE>CODE text</CODE>

I
Italic text

Italic text
<I>Italic text</I>

SMALL
Small text

Small text
<SMALL>Small text</SMALL>

STRIKE
Strike through

~~Strike through~~
<STRIKE>Strike through</STRIKE>

STRONG
Strong emphasis

Strong emphasis
<STRONG>Strong emphasis</STRONG>

SUB
Subscript

Text_subscript
Text<SUB>subscript</SUB>

SUP
Superscript

Text^superscript
Text<SUP>superscript</SUP>

TT
Teletype

Teletype text
<TT>Teletype text</TT>

U
Underlined text

Underlined text
<U>Underlined text</U>

Formatting Elements

Element

Description

PRE Pre-formatted text (text appears in browser just as it does in HTML document)

Example:

I can format this paragraph just like this.

CODE:
<PRE>I can format this paragraph just like this.</PRE>

Element

Description

BLOCKQUOTE Long quotation

Example:

From Jules Renard:
Writing is the only profession where no one considers you ridiculous if you earn no money.

CODE:
<P>From Jules Renard: <BLOCKQUOTE>Writing is the only profession where no one considers you ridiculous if you earn no money.</BLOCKQUOTE></P>

Next Page: Adding Images to Web Pages
Previous Page: Background Colors & Images & Link Colors

H1 heading (<H1> </H1>)

H2 heading (<H2> </H2>)

H3 heading (<H3> </H3>)

H4 heading (<H4> </H4>)

H5 heading (<H5> </H5>)