Formatting Text using HTML

By James Middleton - Added 25th of June 2008

As we established in the previous tutorial, html derives from the standard 'olde' word-processing language 'Mark-up'. As with mark-up, there are plenty of methods for changing font size, justification, colour, etc. In this tutorial we will examine those methods.

HTML only!

At this point it would be worth pointing out; many of the methods out-lined within the following tutorial, could be easily dropped and replace with CSS (cascading style sheets). I feel it important to show you all methods so that your knowledge will have a strong foundation as well as a sure appreciation of CSS.

Open up your source editor and try at the following examples.

Font formatting: Bold-Italic-Underline

Bold text

Code: <b>This is bold.</b> This isn't.
Result: This is bold. This isn't.

Italic text

Code: <i>This is italic.</i> This isn't.
Result: This is italic. This isn't.

Under-lined text

Code: <u>This is underlined.</u> This isn't.
Result: This is underlined. This isn't.

Combining formatting together

Code: <u><b><i>Bold and italic.</i></b></u>
Result: Bold and italic.

In the above example, make a note of the way in which a tag is place within another tag to combine formatting methods. Although the order in which the bold, italic or underline appear within the code is not important, it is vital that each tag closes in the reverse order that they opened. Think of it like this:

You have a box (tag), you place another box (tag) inside of the first. They both can't be on the inside or outside at the same time, one must be inside the other. Confused? Well, that's what a web-browser will be if you mess up the sequence.

Tag syntax:

Incorrect example: <b><i>Text</b></i>
Correct example: <b><i>Text</i></b>

Text layout

Paragraphs

Code: <p>Seperate Paragraph.</p>
Result:

Seperate Paragraph.

Line Breaks

Code: This is line 1.<br>This is line 2.
Result: This is line 1.
This is line 2.

Please note: In the above example, the 'br' or 'line-break', will not require a container as doesn't apply itself to any particular word, line or paragraph of text.

Font Color and Size

Font-Color

Code: <font color="#ff6600">Orange Text.</font>
Result: Orange Text.

Font-Size (from 1-7)

Code: <font size="5">Big Text.</font>
Result: Big Text.

Combining formatting together

Code: <font size="5" color="#ff6600">Big Orange Text.</font>
Result: Big Orange Text.

Text Alignment

Left-aligned Text

Code: <div align="left">Left Align</div>
Result:

Right-aligned Text

Code: <div align="right">Right Align</div>
Result:

Center-aligned Text

Code: <div align="center">Center Align</div>
Result:

Headings - Header Tags (1(largest) - 6)

Code: <h2>This is a heading</h2>
Result:

This is a heading

Please note: In the above example, the 'h2' (or any other 'hx' tag) automatically results in a line break after the text within tag.

Bullet Points and Numbers

An un-ordered List

Code: <ul>
<li>Point 1
<li>Point 2
<li>Point 3
</ul>
Result:

• Point 1
  
• Point 2
  
• Point 3
  

An Ordered List

Code: <ol>
<li>Point 1
<li>Point 2
<li>Point 3
</ol>
Result:

1. Point 1
   
2. Point 2
   
3. Point 3
   

An Ordered List starting from...

Code: <ol start="5">
<li start="5">Point 1
<li>Point 2
<li>Point 3
</ol>
Result:

5. Point 1
   
6. Point 2
   
7. Point 3
   

Closing note

Now that you have experimented with text formatting, try to put together a fully formatted document using only a source editor and test the results.

---

Credits & Links

Article written by James Middleton - www.webdesign-4-beginners.co.uk.

Information for Publishers

You are free to republish this article, provided you retain all hyperlinks as active in the above credits.

---

Add your own comments

* Must complete

*Your Name
*Comments Please do not use HTML codes within this field	(Max chars: 1000) Characters remaining:
*Security Code	Please type the above code into the box below (case sensitive):
	Please Note: All comments are reviewed before going live.