HTML Tutorial Lesson 2 Start With Text & Make It Look Better

Author: Ian McAllister

Lesson 1 left you with all your text in an ugly heap. This lesson will show you how easy it is to make it look better.
Lesson 2 - formatting

As I already mentioned, I like to use a word processor to prepare my text so as to have the use of a spell checker.

I separate paragraphs with double line returns. Then when I come back to modify a page, I can see where the paragraphs start and end.

When I finish the article, including proof-reading, I select all (CTRL and A), copy it (CTRL and C) and paste it into the appropriate part of my web page template(CTRL and V). That is, between the <BODY> and the </BODY> tags

Remember what you have done

Comments were invented because nobody's memory is perfect. Every time you use an HTML tag in a novel manner, expect to forget why you did it, and write comments. A comment looks like this.

Then you would put start blink and end blink tags like this <blink>I hate visitors, go away!</blink>

Comments are also useful when you are hunting mistakes in your HTML code. Instead of deleting suspect code simply comment it out. Put the whole section that you want to be ignored inside a comment tag.

Make reading your page a pleasure

Open your text editor in one window and open your browser in another. You can usually switch between them by holding down the ALT key and pressing TAB.

If you did the exercise at the end of last lesson you now have a simple page called try-it.html. View it. It's all run together into one mass of text, isn't it?

First improvement - Paragraphs and line breaks

Put a start paragraph tag just before the first paragraph, and an end paragraph tag just after the end of the text.

Each time you come to the end of a paragraph, put a </p> tag followed by a <p> tag. Remember HTML ignores white space including carriage returns, so it makes no difference whether you put it at the end of one paragraph, the start of another paragraph, or on a line by itself separated by two blank lines before and after it. Try it. The results are obvious.

Most browsers will still accept paragraph markings if you don't include both the start and end tags. But in theory there will come a time when you have to use both, so get into the habit of doing so now.

Already your page is more commercial

A visitor would just have clicked the back button if you left the text as one long block. It's already easier to read now with paragraph separation. There is a lot more that you can do to make it easier to read.

New lines

If you want to move to the start of the next line without a line being left blank you once used a <BR> tag. Purists are trying to ban this tag because it doesn't have a closing tag. What happened instead is that the tag has been changed to look like this now... <br /> So use the modern one even thoug the old version still works in most browsers.

Try it and see what happens. You will notice that most of my links start with a new line, because it is easier to read a link that doesn't line-wrap. I use the <BR /> tag to get this result.
Click here for a definitive study of making websites attractive.

Next improvement - use headings

These are paired tags with H and a number from 1 to 6. One is largest, six is almost too small to see. Just highlight the following section, then copy and paste it between the body tags in your simple HTML template, then view it with a second instance of your browser.

Oh, you don't know how to open a second browser window? Just hold down Ctrl and press N (for new).

<H1>

Heading size is 24 pt

</H1>

<H2>

Heading size is 18 pt

</H2>

<H3>

Heading size is 14 pt

</H3>

<H4>

Heading size is 12 pt (normal size but bold)

</H4>

<H5>

Heading size is 10 pt

</H5>

<H6>

Heading size is so small that I don't know why it was included!

</H6>

You will notice that I have not used any paragraph tags. Headings always produce a space above and below them.

Use sub-headings like this to

Break text into convenient blocks
Label text blocks with their contents
Some people scan the page quickly reading only the sub-headings. Try to make the sub-headings summarise the page. This idea was stolen from "Make Your Words Sell" and you should get a copy if you intend to sell anything online.
Click here for your copy

Next improvement - emphasised text

You can emphasise text in different ways.

Use bold and italic

Bold text is surrounded by <b></b> tags
Italic text is surrounded by <i></i>
Bold italic is more complicated and something like this <b><i></i></b> Notice the outer bold tags are completely outside the italic tags. The italic tags could have been placed outside the bold tags, but not one inside and the other outside.

Change the size with discretion

You can change the size of text by using the <font></font> tags, and also the colour. Standard font size is 12 pt which happens to be represented by 3. The sizes vary from 1 to 7, with 1 being 8 pt and 7 being 36 pt. Play about with them using
<font size=6></font> tags.

You drive customers away if you use all capital letters. I have a feeling that web designs with too many large letters might have the same effect. I myself would avoid using web designs that have too much size 7 text.

You can also use size=+4 or size = -2 to change the size up or down. The range is limited to four each way, i.e. -4 to +4, and can't go outside the base font range of 1 to 7.

Use colour

I will show a colour table in a later lesson, but just now I will only say that there are sixteen generally accepted colour names (including black) and over 200 colour numbers that you can use.

Here is an example
<font color="red" size=3>Coloured text</font>
Note that the people who invented HTML couldn't spell colour. My spell checker keeps telling me it is wrong. Good web design means you should limit your text colours to no more than three colours on one page.

One very successful expert says to have only black and the blue for links. I think that is too austere, so I prefer to use black and navy blue for subheadings, and the normal blue for links. This adds up to three colours.

Other emphasised text

Try playing about with the following pairs of tags to see what results you get. The first two pairs are for subscripts and superscripts.
<sub></sub> A₅₅
<sup></sup> Temperature is 25^oC. This is a bad example because you can use a special character instead , as you will see in next lesson
<big></big> normal big
<tt></tt> (typewriter font)

Horizontal Rules

You'll notice near the foot of this page I have used horizontal rules to separate different sections. I'm not artistic so I used the standard version. If you are an artist you might want to do all sorts of things with the rules - and it doesn't take any longer to load!

However, you should know that different browsers handle horizontal rules differently. You can use a picture of your own for a horizontal rule, which makes sure that it will be exactly how you want it. It will be a small file, which will not take long to load. Even if you use the file a hundred times, it will only be loaded once, so it doesn't take long.

<hr> was the standard rule but now you should ad a closing slash. <hr />
size means the depth of the rule in pixels
width means the width of the rule in pixels or as a percentage of window width.
noshade gives an unshadowed solid line. Here is an example.
<hr size=20 width="80%" noshade>

You have more control with CSS if you learn it.

Aligning Text

You can align text, as in a word processor, to left, centre, or right, and your browser will even make a heroic attempt at justified text - you have to give it a mark or two for trying! As you can see below, the justified alignment is not very good.

There were two ways to align text when I wrote this page. Now Cascading Style Sheets (CSS) give us a better way, but it isn't html, though it's used with html. Borrow a book about css from the library. One html way lasts only for one paragraph. The other lasts between the start and end tags. The choice words are left, right, "center" (note bad spelling) and justify. Examples:
<p align=right>
<h1 align="center">
<justify>
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
</justify>

That too has changed since I wrote it. Now capital letters are discouraged in tags, and variables must be in quotes, so you would write align="center" and so on.

Don't specify typefaces

You can change the typeface using the font tag. My original advice was Don't.

That was a few years ago, and if you want to have some text without serifs you could try the face tag. The computer trying to read your page may not have the typeface you specify.

Windows computers will use Times New Roman if you don't specify the typeface, and I don't know what Macintosh computers have as a default font.

<font face="verdana, arial, helvetica, sans-serif" size="2"> In the above example verdana is the first choice, Arial is the second choice for Windows browsers, and Helvetica is the Macintosh equivalent of Arial. Finally if nothing else is available, the browser is left to choose any sans-serif font. CSS is better but is a different subject.

Verdana was designed for web pages so is better for that purpose.

Use lists to break up the grey mass

If you have long sentences with lots of commas it is often more pretty to change them to lists. For instance you can say that you should buy letterboxes from me because they are handcrafted, unique, low-cost, and add distinction to your house. Or you can say

handcrafted
unique
low-cost
add distinction to your house

Or you could even number them

handcrafted
unique
low-cost
add distinction to your house

The only difference between them is that ordered lists (numbered lists) use the <ol> and </ol> tags to start and end the list, while unordered lists (bulleted) use <ul> and </ul> In both cases each line or paragraph is started with a <li> tag, and continues until the next <li> tag, or the end of the list.

And yes, you guessed it, the purists want to insist on using </li> for the fun of having an end tag. Note: the purists won. put a closing tag for each list line. If you want to separate the lines a little you could even have a closing /li tag followed by a br / break tag at the end of each list item. Arachnophilia now puts the closing li tag automatically, but you can still add a break if you want to.

<ol>
<li>handcrafted< /li>
<li> unique< /li>
<li>low-cost< /li>
<li>add distinction to your house< /li>
</ol>

If, like me, you don't like typing, just use the free HTML writer called Arachnophilia, separating each line by pressing enter, then highlight the list, click on structures - list, then double-click the type of list you want, and it will put all the tags in the right places.

I promised not to try to teach you CSS just now, but there is one little trick that you can use with Arachnophilia to highlight some text in yellow, as I have done on this page. Highlight the text you want to have a yellow background then in the left column click Fonts and double-click span, and choose yellow.

Here is what it will do, and you can type it all in if you aren't using Arachnophilia.
<span style="background-color:#ffff00;">Text to highlight</span>
You just put the first yellow bit where you want to start your highlighted text, and don't forget to close the span tag at the end of the text you want to highlight. You don't have to know CSS to use this trick.

Now you're ready to learn about the head section

You have learned enough about HTML now to understand the very important part played by the head section.

Summary

You can improve the appearance of your text in many ways. None of them are difficult. You can experiment between your editor and your browser to find out just what happens with each change.

Next lesson introduces you to special characters, and colour charts.