Webmaster
Create your site
Text Layout
We are now ready to tackle page content. Displaying a text is very easy. Just place it between the <body> and </body> tags of the page. Save the work in a file giving it the extension .htm or .html, and open it in your Internet browser to see your text appearing ... Magic isn't it? Basic HTML is that simple!
But you could improve the layout of your text with only a few more tags. What about a bold text? Just enclose the element you want to highlight by the <b> paired tag. For instance:
"<b>The world is a wonderful place and worth fighting for</b>"
( The world is a wonderful place and worth fighting for)
[For whom the bell tolls - Ernest Hemingway]
Which is rendered as:
"The world is a wonderful place and worth fighting for" (The world is a wonderful place and worth fighting for) [ For whom the bell tolls - Ernest Hemingway ]
In the same way, you can use the <i> and <u> tags to italicise and underline a text respectively. Using the same example:
"<b>The world is a wonderful place and worth fighting for</b>"
(<i> The world is a wonderful place and worth fighting for </i>)
[<u> For whom the bell tolls </u> - Ernest Hemingway]
This time, the text is rendered as follows:
"The world is a wonderful place and worth fighting for" ( The world is a wonderful place and worth fighting for ) [For whom the bell tolls - Ernest Hemingway]
These three tags should meet most of your layout needs. You may have noticed that the line breaks we inserted do not appear in the browser rendering of the page. This is because HTML does not interpret these line breaks, or to be more precise interprets them as a simple space character. To force a line break, you must use the <br> tag as follows:
"<b>The world is a wonderful place and worth fighting for</b>"<br>
(<i> The world is a wonderful place and worth fighting for </i>)<br>
[<u><b>For whom the bell tolls</b></u> - Ernest Hemingway]
The rendering by the browser is now closer to our expectations with line breaks appearing:
"The world is a wonderful place and worth fighting for"
( The world is a wonderful place and worth fighting for )
[For whom the bell tolls - Ernest Hemingway]
You will have noticed from the previous example that tags can be nested. So you could format a text to be bold and italic by combining the <b> and <i> tags.
Here is a summary of the tags which are useful for text layout. If you are interested in learning more about HTML, see our workshops on this subject.
We are now ready to tackle page content. Displaying a text is very easy. Just place it between the <body> and </body> tags of the page. Save the work in a file giving it the extension .htm or .html, and open it in your Internet browser to see your text appearing ... Magic isn't it? Basic HTML is that simple!
But you could improve the layout of your text with only a few more tags. What about a bold text? Just enclose the element you want to highlight by the <b> paired tag. For instance:
"<b>The world is a wonderful place and worth fighting for</b>"
( The world is a wonderful place and worth fighting for)
[For whom the bell tolls - Ernest Hemingway]
Which is rendered as:
"The world is a wonderful place and worth fighting for" (The world is a wonderful place and worth fighting for) [ For whom the bell tolls - Ernest Hemingway ]
In the same way, you can use the <i> and <u> tags to italicise and underline a text respectively. Using the same example:
"<b>The world is a wonderful place and worth fighting for</b>"
(<i> The world is a wonderful place and worth fighting for </i>)
[<u> For whom the bell tolls </u> - Ernest Hemingway]
This time, the text is rendered as follows:
"The world is a wonderful place and worth fighting for" ( The world is a wonderful place and worth fighting for ) [For whom the bell tolls - Ernest Hemingway]
These three tags should meet most of your layout needs. You may have noticed that the line breaks we inserted do not appear in the browser rendering of the page. This is because HTML does not interpret these line breaks, or to be more precise interprets them as a simple space character. To force a line break, you must use the <br> tag as follows:
"<b>The world is a wonderful place and worth fighting for</b>"<br>
(<i> The world is a wonderful place and worth fighting for </i>)<br>
[<u><b>For whom the bell tolls</b></u> - Ernest Hemingway]
The rendering by the browser is now closer to our expectations with line breaks appearing:
"The world is a wonderful place and worth fighting for"
( The world is a wonderful place and worth fighting for )
[For whom the bell tolls - Ernest Hemingway]
You will have noticed from the previous example that tags can be nested. So you could format a text to be bold and italic by combining the <b> and <i> tags.
Here is a summary of the tags which are useful for text layout. If you are interested in learning more about HTML, see our workshops on this subject.
| Tag | Description | Use |
| <b> | Bold style | <b>Bold text</b> |
| <i> | Italic style | <i>Italicised text</i> |
| <u> | Underlined style | <u>Underlined text</u> |
| <font> | Use of fonts | <font color="#FF0000" face="Arial">Formatted text</font> |
| <table> | Insert a table | Our HTML workshops will tell you more about list usage ... |
| <tr> | Insert a table line | Our HTML workshops will tell you more about list usage ... |
| <td> | Insert a cell in a table line | Our HTML workshops will tell you more about list usage ... |
| <ul> | Insert an ordered (numbered) list | Our HTML workshops will tell you more about list usage ... |
| <ol> | Insert an unordered (bulleted) list | Our HTML workshops will tell you more about list usage ... |
| <li> | List item | Our HTML workshops will tell you more about list usage ... |