Formatting Text and Paragraphs Using HTML

Text and Paragraphs can be formatted in any number of ways. Font colour, alignment, and size are just a few of the everyday basics. There are also header tags, paragraph tags, and lists to help you organize your web page.

Formatting Text

Standard Formatting Tags

italics
 boldface
<TT> monospaced font, like that of a typewriter
<S> strikethrough
 underline
<BIG> increases text size relative to default
 decreases text size relative to default
 superscript
 subscript
<BLINK> causes text to blink or flash at you

For example,
The cat sat on the mat yesterday in the sun.
would appear as
The cat sat on the mat yesterday in the sun.

Headings

Headings range in size, font, and attributes. They are in the form <H#> where # is a number from 1 to 6, 1 representing the largest, most prominent heading.

<H1> Large Heading Text </H1>

Special Characters

Not all browsers recognize special characters. As an alternative, you can use special HTML equivalent codes to represent such characters. All begin with &, are followed by code, and end with ;

For example, " represents “ and   represents a space.

Preformatted Text

<PRE> </PRE> displays text exactly the way it is entered between the two tags, including
spaces, formatting, etc.

For example, <PRE> This is a test. </PRE>
will appear as This is a test.

Formatting Paragraphs

Text Breaks

paragraph tag that inserts a line space.
 a line break of equivalent to pressing Enter
<HR> horizontal line
<HR SIZE=8> changes thickness of horizontal line from default 2 to 8
<HR WIDTH=200> changes width of horizontal line to 200 pixels
<HR WIDTH=50%> changes width of line to 50% width of browser window
<HR WIDTH=33% ALIGN=LEFT> can combine options in one line
<HR NOSHADE> turns off 3D effects

Alignment

right-aligns the paragraphs
<CENTRE></CENTRE> centres the paragraph (notice the American spelling)
 justifies the paragraph
 or simply just left-aligns the paragraph - default
 turns off word wrap
 moves paragraph down until margin indicated is
clear from images or pictures


<BLOCKQUOTE></BLOCKQUOTE> offsets a paragraph (indentation)

You can combine any or all of the above in one line:

Font

§ Specifies order of font preference if browser does not support your favourites
§ If none of the fonts exists on the user’s computer, the user’s default font is displayed, in this case in the colour green

§ Font size is from 1 to 7; the default is 3

§ Increases current font by 2 sizes

§ Decreases current font by 1 size
<BASEFONT SIZE=5>
§ Changes the default font size from 3 to 5

Body Properties

The background can be set within the tag for the main part of the HTML document – the <BODY> tag.

<BODY BACKGROUND=”picturename.gif”>
§ Create a watermark image as your background (i.e. one single image that is tiled to fit the browser window
<BODY BACKGROUND=”backlogo.gif” BGPROPERTIES=FIXED>
§ Now the background image is fixed and will not scroll
<BODY BACKGROUND=”image.jpeg” TOPMARGIN=50 LEFTMARGIN=100>
§ A margin has now been set for 50 and 100 pixels respectively
<BODY BGCOLOR=#0000FF>
§ Colour is specified in hexadecimal numbers, Red-red-Green-green-Blue-blue
<BODY TEXT=#FFFFFF>
§ Text colour
<BODY LINK=#FFFF#F>
§ hyperlinks
<BODY VLINK=#EBEBEB>
§ Hyperlinks already visited
<BODY ALINK=#FF0000>
§ Active link colour

Lists

1) Unordered lists use bullets to format lines of text:

<UL>
<LH>List Header</LH> List Header
<LI>List Item 1</LI> · List Item 1
<LI>List Item 2</LI> · List Item 2
</UL>

<UL TYPE=DISC> type of bullets: disc, square, or circle

2) Ordered lists use numbers or letters to organize lines of text.

<OL>
<LH>List Header</LH> List Header
<LI>List Item 1</LI> 1. List Item 1
<LI>List Item 2</LI> 2. List Item 2
</OL>

<OL TYPE=A> uses letters instead of numbers
<OL TYPE=I> uses roman numerals
<OL START=57> start numbering at 57 (default is 1)
<OL CONTINUE> continue numbering from previous page
<LI SKIP=5> skip 5 numbers