Text Formatting and Layout

  • Description : In this tutorial you will learn how to organise text into paragraphs, change the appearance of text and use alignment and headings.
  • Language : HTML
  • Date Added : 25th September, 2009
Bookmark and Share

First we will take a look at paragraphs. Paragraph tags will only ever be used in the body section of the document. The code for a paragraph is as follows:

Code :
<p>Enter your paragraph here</p>
Output:

Enter your paragraph here

This will generate one paragraph, if you wanted two paragraphs you would use:

Code :
<p>Paragraph 1</p> <p>Paragraph 2</p>
Output:

Paragraph 1

Paragraph 2

It is possible to use a line-break to generate a new line without creating another paragraph. The code would look like:

Code :
<p>This is one line<br /> and then is line two<br /> and then line three</p>
Output:

This is one line
and then is line two
and then line three

Note: You can use the line break tag anywhere in the body section, not just in paragraphs. Now you can create multiple paragraphs you might want to change the font colour. Below is the code to do this:

Code :
<p style="color: #FF3333;">Paragraph 1</p> <p style="color: #CCCCCC;">Paragraph 2</p>
Output:

Paragraph 1

Paragraph 2

The first paragraph would have red text whereas the second paragraph would have grey text. When selecting your colour make sure you use the American spelling of the word, so color. Also anything that is used after the html tag(So in this case after p) is called an attribute. The colour code used above is in hexadecimal format, for a full list of hexadecimal codes click here.

Aligning your text is extremely easy and can be accomplished in a similar way to colouring your text by using an attribute. Below is the code:

Code : 
<p align="left">Paragraph 1</p> 
<p align="center">Paragraph 2</p> 
<p align="right">Paragraph 3</p> 
<p align="justify"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu lectus sed justo sagittis commodo. Nulla facilisi. Proin fringilla auctor dolor, vitae facilisis nibh faucibus ac. Curabitur vestibulum ante nec magna pulvinar rutrum cursus orci iaculis. Nam bibendum imperdiet sem ac porttitor. Suspendisse ullamcorper tincidunt pulvinar. Phasellus tempor sem non magna adipiscing faucibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse ut nibh neque. Praesent rhoncus hendrerit pharetra. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis ultrices mauris vitae risus eleifend euismod. Sed ultrices leo eu orci aliquet commodo pretium erat accumsan. In id tellus vitae turpis laoreet venenatis. Ut tellus velit, fringilla id dapibus nec, mollis sed massa. </p>
Output:

Paragraph 1

Paragraph 2

Paragraph 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu lectus sed justo sagittis commodo. Nulla facilisi. Proin fringilla auctor dolor, vitae facilisis nibh faucibus ac. Curabitur vestibulum ante nec magna pulvinar rutrum cursus orci iaculis. Nam bibendum imperdiet sem ac porttitor. Suspendisse ullamcorper tincidunt pulvinar. Phasellus tempor sem non magna adipiscing faucibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse ut nibh neque. Praesent rhoncus hendrerit pharetra. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis ultrices mauris vitae risus eleifend euismod. Sed ultrices leo eu orci aliquet commodo pretium erat accumsan. In id tellus vitae turpis laoreet venenatis. Ut tellus velit, fringilla id dapibus nec, mollis sed massa.

The code above is fairly self explanatory, the first three lines align the text left, center and right. The 4th line has the align value of "justify" which changes the gap between text so it all lines up at the end of the line. If you've ever used word, there is a justify alignment option there too.

The penultimate part of the tutorial will explain how to make text bold, italic and underlined. Below is the code for these three:

Code :
<p>You can turn <b>text bold!</b></p> <p>You can turn <i>text italic</i></p> <p>You can make <u>text underlined!</u></p>
Output:

You can turn text bold!

You can turn text italic

You can make text underlined!

As you can see above you use the first line to generate bold text, the second line will generate text in italics and the third line will underscore your text..

The final part of this tutorial will explain headings. Headings are a way of making something stand out and are widely used, they come in varying size:

Code :
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
Output:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

As you can see there are six types of heading. After a heading there will always be a linebreak, so no need to use a line break.

So that concludes this tutorial. In the next tutorial we will how to create hyperlinks and images.

Login Required

To post comments you must sign in to your account below!

User :
Pass :

If you do not currently have an account click here to create one now!