Computing index HTML GUIDE
PAGE 4

TOC <- -> Ind

Tags covered on this page
<ADDRESS> <B> <BR> <CENTER><CODE>
<EM> <FONT> <HR> <I> <P> <PRE>
<STRIKE> <STRONG> <SUB> <SUP> <U>





FORMATTING AND STYLE OF TEXT


Most formatting in HTML is done with just four, very useful, tags.

<BR>

This is the line BReak tag.
As you write text into your document, the browser will fill each line
with text before moving onto the next.
Often this can look messy or just strange, so a BR command will come in handy.

Given something like

<HTML>

<HEAD>
<TITLE>
Line Break Example
</TITLE>
</HEAD>

<BODY>

This line of text looks
strange in some way.

</BODY>

</HTML>

This line of text looks strange in some
way.

We can alter it to look more effective

<HTML>

<HEAD>
<TITLE>
Line Break Example
</TITLE>
</HEAD>

<BODY>

This line of text
<BR>looks strange in
some way.

</BODY>

</HTML>

This line of text
looks strange in some way.


<P>

The Paragraph tag is very similar to the BReak tag, but it leaves an extra
blank line between the two lines it seperates.


<HTML>

<HEAD>
<TITLE>
Paragraph Example
</TITLE>
</HEAD>

<BODY>

This is my first paragraph
<P>
This is my second paragraph

</BODY>

</HTML>

This is my first paragraph

This is my second paragraph


<CENTER>

The CENTER tag allows text to be aligned to the center of the browser window rather than constantly to the left. This can help break up and emphasise blocks of text within the page.


<HTML>

<HEAD>
<TITLE>
Center Example
</TITLE>
</HEAD>

<BODY>

Aligned to the left
<CENTER>
Aligned to the center
<BR>Second line
<P>
Third line
</CENTER>
Back to the left

</BODY>

</HTML>

Aligned to the left
Aligned to the center
Second line

Third line

Back to the left

Notice the cancellation tag </CENTER> which restores text alignment to the left
and that each of the <CENTER> & </CENTER> tags automatically inserts a line BReak.


<HR>

The Horizontal Rule is an object tag. On coming across this tag, the browser breaks text line and draws a shaded horizontal line across the page. This comes in handy for seperating those long pages of text into small managable sections.

You can alter the rulers appearence by using its three main attributes : width, size and align.


The WIDTH of the rule can be specified in pixels or as a percentage of the window width. In the latter case, if the reader decides to alter the browser size then the ruler changes its size too.

<HR WIDTH=200>



<HR WIDTH=60%>


The SIZE of the rule is generally specified in pixels and measures the height of the rule.

<HR SIZE=5>



<HR SIZE=20>


The ALIGN attribute specifies where the rule should be placed. If left out, the rule is centered on the screen (as shown in the above examples).

<HR ALIGN=LEFT WIDTH=60%>



<HR ALIGN=RIGHT WIDTH=60%>




<FONT>

This tag allows sections of text to be highlighted by changing its size
(and colour - but I shall return to this later).

This is done by substituting the size number ( 1-7 ) for the question mark in :

<FONT SIZE=?>


<HTML>

<HEAD>
<TITLE>
Font Size Example
</TITLE>
</HEAD>

<BODY>

Immeadiate cancellation:
<BR>
<FONT SIZE=2>
Small text
</FONT>
<BR>
<FONT SIZE=5>
Large text
</FONT>
<P>
Nested cancellation:
<BR>
<FONT SIZE=2>
Small text
<BR>
<FONT SIZE=5>
Large text
</FONT>
</FONT>

</BODY>

</HTML>

Immediate cancellation:
Small text
Large text

Nested cancellation:
Small text
Large text

This is a good example of how important structuring your HTML file is. As I said at the start of this course, bad structuring can lead to immense problems in finding rogue tags that upset your page.
The example above shows immediate and nested cancellation - both are good structuring techniques.

There are many other tags that produce differing styles of text. This can be done in many ways via a long list of container tags, all of which work in the same way as the font tag above.


The examples below are not in full html form.
To test out the tags on your own page, you will need to insert them into the code given
on the above examples.

Alternatively, you can copy and edit 'example of the page' at the base of this page.


ADDRESS

<ADDRESS>
ABCDEFG - abcdefg
</ADDRESS>


Bold

<B>
ABCDEFG - abcdefg
</B>


CODE

<CODE>
ABCDEFG - abcdefg
</CODE>


EMphasis

<EM>
ABCDEFG - abcdefg
</EM>


Italic

<I>
ABCDEFG - abcdefg
</I>


PREformatted text

<PRE>
ABCDEFG - abcdefg
</PRE>


STRIKE through

<STRIKE>
ABCDEFG - abcdefg
</STRIKE>


STRONG

<STRONG>
ABCDEFG - abcdefg
</STRONG>


SUBscript

AB<SUB>CDE</SUB>FG
<P>
ab<SUB>cde</SUB>fg


SUPerscript

AB<SUP>CDE</SUP>FG
<P>
ab<SUP>cde</SUP>fg


Underlined

<U>
ABCDEFG - abcdefg
</U>




ABCDEFG - abcdefg





ABCDEFG - abcdefg






ABCDEFG - abcdefg





ABCDEFG - abcdefg





ABCDEFG - abcdefg





ABCDEFG - abcdefg






ABCDEFG - abcdefg





ABCDEFG - abcdefg




ABCDEFG

abcdefg



ABCDEFG

abcdefg




ABCDEFG - abcdefg


All the tags covered on this page can be found on an example file,
FILE NUMBER 1, on this examples page.

TOC <- -> Ind







[ Index Page | HTML Guide | JavaScript | Free Images | My Scripts | Resources Links ]

©1997 Stephen Battey
This page hosted by Get your own free home page