Internet Explorer As A Development Platform?
META tags: What they are and how they work
Stop! Is Your HTML Document Valid?
HTML #5 - Using feedback forms
HTML #4 - Advanced Page Layout
You are here: irt.org | Articles | HTML | Formatting Text In HTML [ previous next ]
Published on: Tuesday 14th July 1998 By: Michael Bednarek
In my last article I introduced you to the HTML language, explained how to write it, and showed you how to create a simple HTML page. Unfortunately this page wasn't very exciting - the text was bog standard and there were no hyperlinks, images or anything else around.
In this article I will go through the many HTML tags which allow you to manipulate the appearance of text on the screen, and I also show you how to create hyperlinks to link to other Web pages.
The next two sections of this article will cover the HTML text formatting tags. These have been in use since the early days of HTML, and as such will work in the vast majority of browsers. However, HTML's formatting capabilities are not very powerful, and so a new way of formatting Web pages was developed, known as CSS (Cascading Style Sheets).
CSS allows much greater flexibility and control over the style of your Web pages. In fact, the official HTML 4.0 specification from the W3 Consortium encourages the use of CSS. HTML still includes the formatting tags in version 4, but many are now "deprecated" - this means that the tag has been superseded by CSS and may become obsolete in future versions of HTML.
As such, I would recommend the use of CSS to format your Web pages - you can learn it by reading An Introduction To Cascading StyleSheets. However I will still mention the formatting tags in this article for backward compatibility reasons - Netscape 3.0 and below and Internet Explorer 2.0 and below do not support CSS.
Standard HTML allows a fair amount of formatting to be applied to text. Aside from size, colour and font changes, which we will look at a little later on, it can do all the style and alignment tricks that would be characteristic of a top of the range word processor a few years ago.
First of all, let's look at bold and italic text. These are handled by the <B> and <I> elements respectively. Any text in between the element is rendered as either bold or italic. If you use both tags, one inside the other, you get bold italic text. The following sentence shows the possibilities:
Words in <B>bold</B> stand out more than words in <I>italics</I>, but words in <B><I>both</I></B> stand out even more.
Which renders as:
Words in bold stand out more than words in italics, but words in both stand out even more.
Text can be aligned to the left, right or centre of the screen. To achieve this, we use the <P> (Paragraph) tag. This tag can be used as normal to enclose a paragraph of text, or it can be used with no closing tag to produce a wide line break, like having two BRs in a row. The ALIGN attribute is used to specify the alignment of the text. For example:
<P ALIGN="LEFT">This text is left aligned.</P> <P ALIGN="CENTER">This text is centred.</P> <P ALIGN="RIGHT">This text is right aligned.</P>
Which renders as:
This text is left aligned.
This text is centred.
This text is right aligned.
Another method of centering text is by using the CENTER tag, which centres any elements - including images, form objects, Java applets and so on - in between the opening and closing tags. The CENTER tag was introduced in Netscape 3, so browsers below Netscape and MSIE3 will not recognise it.
Finally, there are four other tags which produce various effects: <S> for crossed out text; <SUP> for superscript;<SUB> for subscript; and <U> for underlined text. For example:
<P><S>This text will be crossed out</S> <P>E = MC<SUP>2</SUP> <P>C + O<SUB>2</SUB> --> CO<SUB>2</SUB> <P><U>This is important!</U>
Which renders as:
This text will be crossed out
E = MC2
C + O2 --> CO2
The last section covered the basic manipulation of text, but we still haven't covered how to change the size of the text. Aside from using CSS, there are two ways. Both have their advantages and disadvantages.
First of all, there are headings. Headings are built in sizes which are invoked by a tag <Hx>, where x is a number between 1 and 6. <H1> is the largest heading, and <H6> is the smallest. Headings have been present since the very early days of HTML, so you can be sure that absolutely everything supports them. However, your page will not necessarily look the same in all browsers - the headings are relative sizes, not absolute. So for example, although H1 will always be bigger than H6, on one browser H1 may look larger than in another browser.
The second method of changing the size of the text is by using the <FONT> tag. It just so happens that with this tag you can also change the text's colour and style, so we'll look at it in a bit more detail.
The FONT element has several attributes - SIZE, COLOR and FACE. The SIZE attribute ranges from 1 to 7 (default is 3), where 7 is the largest size. The COLOR attribute, as usual, takes either a colour name or a hexadecimal triplet (see An Introduction to HTML). The most interesting attribute, however, is FACE, which allows you to change the style of font. So, to have a blue, Arial font you might use something like:
<FONT COLOR="#0000FF" FACE="Arial">This is some text</FONT>
Which renders as:
This is some text
Unfortunately the user needs to have the required font installed on their system or it won't work - so you can't just change the font to "Twirly Wirly Extra" and expect your page to look very fancy on other people's browsers because they'll just end up with the boring default font. One way you can get around this is to specify alternate font names in commas after the first one, like this:
<FONT COLOR="#0000FF" FACE="Garamond,Times,Serif">This is some text</FONT>
When faced with the line above, the browser will search for the Garamond font. If it can't find it, it will display the text in Times font, and if even that fails then it will resort to plain old Serif.
HTML is even capable of creating lists of items for you. There are two types of list; ordered lists, which number each item (useful for tables of contents) and unordered lists, which represent each item with a bullet point or similar symbol (useful for outlining main points).
We'll first take a look at unordered lists, because they are the easiest to grasp. An unordered list is contained within the <UL> tag. This tag has one useful attribute, the TYPE attribute, which specifies what the bullet points will look like. It can take the values "disc", "circle" or "square".
Each item within a list is surrounded by the <LI> tag. You can also nest the list tags to create multiple level lists. Below is an example:
<UL TYPE="disc">
<LI>Item 1</LI>
<LI>Item 2</LI>
<UL TYPE="square">
<LI>Item 3-1</LI>
<LI>Item 3-2</LI>
</UL>
<LI>Item 4</LI>
</UL>Which renders as:
Ordered lists are very similar, except that you use the <OL> tag instead of UL. OL also has the TYPE attribute, but this time it is used to specify the style of the list numbering. Possible values (which are case sensitive) include "1","a","A","i", or "I", representing standard numbering, lower case and upper case letters, and lower case and upper case roman numerals. You can also use the START attribute to specify the starting number of the first list item. So for example, START=3 would start the list at "3","C", or "III" depending on which type of numbering you chose.
You can also give list items a specific order using the VALUE attribute of the LI tag. For example, <LI VALUE=5> would make that item the fifth item, and all subsequent items will follow on from there.
Here's an example of an ordered list:
<OL TYPE="1">
<LI>Preface</LI>
<LI>Acknowledgements</LI>
<LI>Introduction</LI>
<LI>Part One</LI>
<OL TYPE="a">
<LI>Chapter One</LI>
<LI>Chapter Two</LI>
<LI>Chapter Three</LI>
</OL>
...........
<LI VALUE=10>Conclusion</LI>
<LI>Glossary</LI>
</OL>Which renders as:
To wrap up this article I'll take you through the process of creating hyperlinks, the very centre of Web navigation. A hyperlink (or just a link) is an image or bit of text which when clicked on will transport you to another section of the page, another page, or a completely different site. You should be instantly familiar with them by now. Hyperlinks are created with the <A> tag, for "anchor". The A tag has three attributes that you should be interested in; NAME, HREF and TARGET.
The NAME attribute is optional and is used to create an anchor to mark a certain point on the page. For example, the subtitle "Hyperlinks" at the top of this paragraph is an anchor. When you click on the link to the "Hyperlinks" section at the top of the article, it jumps straight to this section of the page.
The HREF attribute is used to specify the destination of the link, i.e. where you are taken when you click on it. This can be a URL, such as http://www.irt.org or ../articles/, it can be the name of an anchor, or it can activate some JavaScript (we will look at examples of all these below).
Finally, the TARGET attribute is used when you have a frames system on your site, and it specifies the frame into which the link will be loaded.
So let's now take a look at some examples of common hyperlinks. One of the first features of your new homepage is probably going to be a list of links to your most commonly visited sites. Let's say you wanted to link to the Microsoft site (originality escapes me). All you need is the following line:
<A HREF="http://www.microsoft.com">Click here to jump to the Microsoft site</A>
Notice that the text inside the A tags is what is shown to the user on screen.
Another scenario you will come across when you start designing multi-page sites is linking from one page on your site to another. Let's say you are on the homepage, and you want to link to your Awards page, which is called "awards.htm" and resides in the same directory. Let's also say you use frames on your site, and you want to load the awards page in the frame called "mainframe" (this will be explained further in a future article). You would use the following line:
<A HREF="awards.htm" TARGET="mainframe">My Awards page</A>
Now let's look at an example of linking to an anchor, using this very article. This page contains several anchors, the closest of which is the "About the Author" subtitle below. To define it, I used the following line:
<A NAME="7"></A><H2>About The Author</H2>
This creates a blank anchor called "7", just before my main title. Why have I done this, when I could just as easily have used:
<A NAME="7"><H2>About The Author</H2></A>
The answer is that this article uses style sheets - because of the way stylesheets are designed, any tags inside an A tag would look like hyperlinks. Therefore my subtitle would appear to be a link, which I do not want.
Anyway, once I have defined that anchor, I can link to it from the Contents at the top of the article by using this line:
<A HREF="#7">About The Author</A>
If the article was called "myarticle.htm" and I wanted to link to the same anchor from another page, I could also use:
<A HREF="myarticle.htm#7">About The Author</A>
A handy property of the A element is the ability to run JavaScript code from a hyperlink. This will work on all JavaScript enabled browsers. For example, to display a message box when the user clicks on a link, use the following line:
<A HREF="javascript:alert('Hello!')">Click me!</A>Try it: Click me!
And that's almost all there is to know about linking. There are still some things I deliberately haven't covered, such as using images as hyperlinks, because you will learn about that in the next article.
That's it for another article. Hopefully I've given you the basic ingredients to start churning out some reasonably text-pretty pages now, with a bit of links here and there. In the next article I'll cover using images and image maps on your pages to brighten them up even further, and eventually I'll get round to "advanced" subjects like tables, frames, music and feedback forms. Until then, keep practising!
Internet Explorer As A Development Platform?
META tags: What they are and how they work
Stop! Is Your HTML Document Valid?
HTML #5 - Using feedback forms
HTML #4 - Advanced Page Layout
HTML #3 - Making your Web pages more exciting