Get a FREE fully-working copy of Steganos Security Suite 7 (worth £49.99) when you sign up to the Practical PC Newsletter. HTML for Beginners - Part 3
In Part 2 we looked at how to create paragraphs and headlines in a page and how to align them. In part 3 we'll be changing the text appearance in all sorts of ways.
We'll start with bold. To make a paragraph, word or even a single character emboldened, you use the <b> tag. A partial example might be as follows:
<body>
This paragraph has a <b>word</b> that is in bold.
Some browsers also support <strong> as an equivalent to <b>. If a bold font isn't available to the browser, it might underline or blink the word instead but in practice this is extremely unlikely.
To make something italic, use <i>. You can mix and match tags so you might want a word to be in bold and italic. The following section will do that.
<body>
<b><i>This is bold and italic</i></b>
Notice the sequence of the end tags. As the last tag to be used to specify the text format was italic, it needs to be the first to have its end tag. You should always work this way when combining tags to prevent HTML errors being generated by the browser.
It should be no surprise to find that to underline some text you use <u>. Let's look at a complete example. To make things clearer, we'll also introduce some formatting to the listing to make it easier to follow. As before, type it in to Notepad then save it and view it in your browser.
<html>
<head>
<title>A page layout test</title>
</head>
<body>
<p align=center><b>A Demo of Formats</b></p>
<p align=left»This paragraph has <b»bold</b» and <i»Italic</i» text</p»
<p>This one has <u>underlined</u> text and one word that has
<u><b><i>everything</i></b></u> applied to it</p>
</html>
Note that you cannot reliably mix headlines with paragraph alignment attributes as the header tag can over-ride the alignment tag.
A problem we looked at early on was that of being able to control when a new line begins in a block of text. Paragraphs help to an extent but what if you want to guarantee new lines occurred where you intended them to such as in a list of ingredients for a recipe? The next tag we shall look at is the line break or <br>. This tag is slightly unusual in that is has no end tag so there is no such thing or requirement for a </br>.
<body>
2 chicken portions<br>
4 rashers smoked bacon<br>
sun dried tomatoes<br>
pine nuts<br>
mixed salad<br>
honey<br>
Try the code above in place of the previous block of body code and try it out. As with paragraphs, if you resize the browser so it is very narrow width wise, the lines will start to word wrap.
Another common need with documents is to include a list of items much like the recipe above but with a bullet point before each one. These are called unordered lists and can be created using a combination of the <ul> and <li> tags. The <ul> is a standard tag and needs a </ul> to terminate it but the <li> is another of the oddities that just works on its own. Let's see an example of these two in action.
<body>
Ingredients
<ul>
<li>2 chicken portions
<li>4 rashers smoked bacon
<li>sun dried tomatoes
<li>pine nuts
<li>mixed salad
<li>honey
</ul>
If you want an ordered list instead i.e. a list with numbers in front instead of bullets then you use <ol> and </ol>. These tags have some attributes that can be used to specify how the numbers are displayed. To change the display type, use <ol type="x">. The different values you can substitute for x are as follows:
A = Capital letters e.g. A, B, C, D
a = Lower case letters e.g. a, b, c, d
I = Capital Roman numerals e.g. I, II, III, IV
I = Lower case Roman numerals e.g. i, ii, iii, iv
1 = Arabic numerals e.g. 1, 2, 3, 4
The next partial listing shows this in action.
<body>
<ol type = "I">
<li>Monday<br>
<li>Tuesday<br>
<li>Wednesday<br>
</ol>
Each of the tags discussed so far generally has additional attributes you can play with but they are too numerous to list individually here. For now, try everything that has been covered in the 3 parts of this tutorial. Mix and match the various tags and see how they behave and don't forget to try resizing the browser as you do to see how it behaves with each instruction. Try finding a piece of text in a recipe book or magazine and see if you can reproduce an approximate copy of the layout using the tags we have covered.
