Lesson 7 of Keith's HTML Tutorial

Courage, now! We're almost done... just a few more formatting tricks, and we'll have covered pretty much everything that you can do with text. Then we can get on to some of the really clever stuff.

Lesson 5 introduced us to the align attribute, used with the <HR> tag. Actually, we can also apply it to the <P> and <H1> through <H6> tags to set paragraph and heading alignments. Just remember that this attribute is deprecated, and it's really recommended that you don't use it: setting alignment with Cascading Style Sheets (CSS) is now the preferred method.

<HTML> <HEAD> <TITLE>Lesson 7</TITLE> </HEAD> <BODY> <H1 align="center">All About Alignment</H1> <P>Having opened with a centred H1 heading, we'll continue with a straightforward "flush left" (or left aligned) paragraph. Notice that the default alignment for the P tag is left, so it isn't necessary to enter the attribute into the tag.</P> <P align="center">For our next paragraph, we've gone to centre alignment -- the kind of thing you might do if you have a brief quote that you want to pull out from the rest of the text.</P> <H2 align="right">Flush right</H2> <P align="right">If you really must align a paragraph "flush right", this is how to do it. It's a technique best reserved for short pieces or in very particular circumstances.</P> <P>To finish, we'll return to flush left text.</P> </BODY> </HTML>

Save your file as "file7.html". When you open it in your browser, it should look like this.

You should have noticed that you have to set the align attribute for every tag for every paragraph or heading that you want aligned to anything but flush left. This can be a bit tedious if you have a whole series of headings or paragraphs that you want to align centre or right.

Fortunately, another tag comes to our rescue -- the <DIV> (for "division") tag, and its closing partner </DIV>. We can put the align attribute inside the opening <DIV> tag, then all text inside the <DIV> tags will adopt the alignment we specify. Unless...

<HTML> <HEAD> <TITLE>Lesson 7</TITLE> </HEAD> <BODY> <DIV align="center"> <H1 align="center">All About Alignment</H1> <P>Having opened with a centred H1 heading, we'll continue with a straightforward "flush left" (or left aligned) paragraph. Notice that the default alignment for the P tag is left, so it isn't necessary to enter the attribute into the tag.</P> <P align="center">For our next paragraph, we've gone to centre alignment -- the kind of thing you might do if you have a brief quote that you want to pull out from the rest of the text.</P> <H2 align="right">Flush right</H2> <P align="right">If you really must align a paragraph "flush right", this is how to do it. It's a technique best reserved for short pieces or in very particular circumstances.</P> <P>To finish, we'll return to flush left text.</P> </DIV> </BODY> </HTML>

Save your file. Now you might think, given what I've told you, that this will now make all of the text centred. But open the file in your browser -- it should look like this.

It didn't make everything centred. But if you look carefully at the code, you can see what's going on. It's all a matter of precedence. We didn't remove any of the other alignment attributes, so the only text that got centred was:

There is an order of precedence at work. Everything between the <DIV> tags will take whatever alignment they specify, unless the <P> or <H> tag for a paragraph or heading specifies something else. If we go back to our file and take out all of the align attributes except that in the <DIV> tag like so:

<HTML> <HEAD> <TITLE>Lesson 7</TITLE> </HEAD> <BODY> <DIV align="center"> <H1>All About Alignment</H1> <P>Having opened with a centred H1 heading, we'll continue with a straightforward "flush left" (or left aligned) paragraph. Notice that the default alignment for the P tag is left, so it isn't necessary to enter the attribute into the tag.</P> <P>For our next paragraph, we've gone to centre alignment -- the kind of thing you might do if you have a brief quote that you want to pull out from the rest of the text.</P> <H2>Flush right</H2> <P>If you really must align a paragraph "flush right", this is how to do it. It's a technique best reserved for short pieces or in very particular circumstances.</P> <P>To finish, we'll return to flush left text.</P> </DIV> </BODY> </HTML>

Now everything is centre aligned, making nonsense of what a few of the paragraphs actually say, of course! This example serves to illustrate two points: first, that you can use the <DIV> element with an align attribute as a quick way of aligning a whole bunch of paragraphs or headings all at once; second, if you need to align perhaps just one paragraph differently from all the others between the <DIV> tags, you can still do so by setting an align attribute in the paragraph's own tag.

In previous editions of this tutorial, I used to describe how to suggest to the browser which typeface, colour and size of font you would like any given piece of text to be displayed in. (I say "suggest", because the browser's ability to do this always depended on whether users had the particular font installed on their computers or not.)

To achieve this, you had to make use of the now deprecated FONT element, and its equally deprecated attributes. The FONT element began as an extension to Microsoft Internet Explorer, which was picked up by other browsers, and eventually incorporated into an earlier version of the HTML specification, HTML 3.2. If ever there was an abomination visited upon web site builders, it was the FONT element.

Using the FONT element correctly, to set the font characteristics for every paragraph and heading in your document, meant bloating the HTML file with zillions of <FONT> tags. Many people used the tag incorrectly, exploiting the "non-standard" behaviour of one of the major browsers, meaning that in other browsers, at best, the desired effect was not achieved; and at worst, the page was completely broken.

So after some agonising, I've decided not to burden you (or the viewers of the pages you might create!) with the knowledge of this dreadful tag and its attributes. Control of typography is something that really is much better done using CSS. And if users' browsers don't support CSS, then they'll see your pages in their default font, which they're used to anyway. And that's just fine and dandy.

If you've been looking carefully at our examples and everything we've been learning about tags, you might have thought: Hey, the left and right angle bracket signs "<" and ">" have a special meaning in HTML files. When the browser sees one of these, it thinks it's seeing the start or the end of a tag. So what if I actually want to display a left or right angle bracket on screen? I can't just use the normal character, can I?

Well, that's absolutely right. If you want to show the "<" or ">" characters on a web page, you have to represent them with something else in your HTML code, which the browser will interpret as meaning to be displayed as "<" or ">".

There are actually a couple of ways to do this, but I think the easiest is by using the character entities. There is a whole range of character entities used to represent characters that cannot otherwise be used directly in your HTML code, either because they might be interpreted as something else, or there simply is no other way to describe them. You've already met one of these character entities, in the form of the non-breaking space, which we represent with " ". Character entities are all recognisable by the fact that they begin with an ampersand (&) and end with a semi-colon (;).

To represent the left angle bracket, we use the character entity "<"; for the right angle bracket, we use ">". ("lt" comes from "less than", and "gt" from "greater than", the other symbolic use of the angle brackets.)

The code snippet below shows a number of the more common character entities and what they represent:

<BODY> <P>< -- renders the left angle bracket</P> <P>> -- renders the right angle bracket</P> <P>& -- renders the ampersand</P> <P>" -- renders the double quotation mark</P> <P>© -- renders the copyright symbol</P> <P>® -- renders the registered trade mark symbol</P> <P>¢ -- renders the cent symbol</P> <P>° -- renders the degree symbol</P> </BODY>

In case it isn't clear from the code example, the same character entities and the characters they represent are set out below:

Remember that the first four characters in the table are reserved characters in HTML; that is, they are reserved for use in tags. So if you want to include a <, >, & or " in text, you must use the character entities in your HTML, and not the characters themselves. Otherwise, you could confuse the browser, and make a real mess of your page!

Text is aligned "flush left" by default; however alignment can be changed using the align attribute (with values of "left", "center", or "right") in the <P> tag or <H1> to <H6> tags.

Blocks of text can be given the same alignment by enclosing the block within <DIV> and </DIV> tags, and setting the align attribute inside <DIV>.

Alignment set within individual paragraph or heading tags will override the alignment set in an enclosing <DIV> tag.

To render characters like the left and right angle brackets, the ampersand, double quotation marks, the copyright symbol, the registered trade mark symbol, the cent symbol and the degree symbol, it's necessary to use character entities in the HTML code instead of the characters themselves.