If you've completed the Introduction you know how to use this Lesson. If not, remember:

• Hover your mouse over any, or any term to see an
• Click on any term in dark blue to see a box (try clicking now)

Remember, you can if you prefer (for details, click here).

In , we'll mark up our plain text file (ACTIVE.TXT), turning it into . If you're unsure of what means, hover your mouse over for a brief description.

If you have Notepad's window open from the previous session, you can skip . Otherwise, remember that Notepad won't always be the editor registered to open TXT files, so we'll get some more practice with the method.

Glance through the preview below first, then click the button to go ahead :

 Note  Remember to use the Notepad window in its default size.

With the file open in Notepad, we'll make a note about the box. As we learnt in the Introduction, this supplies instant help ing any technical term.

Use the scroll bars in the to see all of a large preview – remember to return to the Notepad window so you can type into it :

Since an file is a plain text file with an .HTM or .HTML extension, the next step is to save our plain text notes as active.htm :

 Note  file names are often in lowercase, because this is common in , where file names are case-sensitive.

To understand tags properly, it helps to see their effect at each step. The below will help you open your file in a browser window scaled to fit the Lesson's screen layout.

With the path to your file in the box, click the  View as HTML  button. A new window opens, placed so you can compare your progress at each  Step  with a .

When a browser renders your initial active.htm it's displayed with:

• consecutive  Space s reduced to one  Space 
• consecutive new lines as a single  Space , too
• the default font, colour, and background, usually:  Times New Roman 

Marking up text is an art. But, sometimes, all you want is a legible result, fast. So, first, let's learn one quick kludge – the tag :

You did remember to click File, Save to save that change to active.htm, didn't you?

Let's stop calling the new window: "new window", and give it a title that appears on its Taskbar button. This is done with the tag :

When you've saved the change, click the Taskbar button for the new window, and press  F5  to refresh it. Its Taskbar button (and Title bar) will show the name  HTML view , which makes it easier to distinguish amidst the other buttons on your Taskbar.

Use the help built into this page (it's there whether you stay online or ):

• Hover your mouse over any, or any term to see an
• Click a dark blue term, such as for details and cross-references

You must spell tag names correctly. Browsers don't spellcheck. They ignore tags they don't recognise. If you spell a tag wrongly, say <tilte> for , or forget the  /  in a closing tag, it won't be obeyed (and like all tags it won't be displayed either).

 
That was the quick fix ... now to do it properly. We'll split the job into four stages, and learn a useful range of mark up techniques on the way. The is the main outline plan:

There's a  Step  button to check the  HTML view  of your document after every tiny change. By working in small steps, and checking each one, you learn more easily.

We need to take out the tags again. Their correct use is for short extracts of text where an exact format is needed, such as Computer Program Code examples.

With the tags out, we'll be able see the effect of other tags properly :

 
It's conventional to use structural tags to divide the whole document explicitly into two sections. Most browsers can deduce the structure (at least in simple cases), and these tags won't make any difference to the way we see our current document in  HTML view :

First, and tags are placed around the entire document :

A document is usually laid out in two principal, explicit sections:

– contained between and tags

Used for items that define or manage the overall document. These are items (such as the document title) that don't normally appear as part of the main content.
 

– contained between and tags

For the document content that's to be shown in the browser window.

By the way, it doesn't matter whether you use uppercase or lowercase for tag names. But do stick to one convention or the other. If you mix cases, you may find Browsers won't render your documents properly, as newer and tighter standards are introduced.

 
As we'll see in Lesson 2, there is often an tag and an alternative Style Rule that achieves the same effect. That's because Style Rules are designed to supersede older ways of doing things (especially for fine details of layout).

But remains a simpler way to handle basic layout, and that's what we'll start with:

This does what it says, (but you must spell it US-style=center). We can use it to centre the heading of the notes :

We'll put the first definition in a paragraph, with the tag. This simple tag is very useful for basic text layout. As usual, there's a corresponding close tag: .

Add the paragraph tags around the definition :

The line break tag is unusual: it doesn't have a closing form. It's an instruction to the Browser to start a new line. It's like pressing  Return  when you're typing a text file.

A Browser doesn't treat a  Return  as a cue to start a new line. One or more  Return s (like multiple  Space s) are rendered as a single  Space . The resulting text is wrapped automatically to fit the Browser window. The Browser chooses a convenient point to wrap a line, such as between words, or at a  –  (dash or hyphen).

Use a line break tag to start a new line :

 
We've marked up and its definition with paragraph and line break tags. These are useful tags to know, but for the other definitions we'll try something different.

has several handy groups of tags to format lists. There's a special group meant for lists of terms and their associated definitions:

We'll practise on and its definition first (and extend the tagging to other terms afterwards). There are three two-letter tags. Each starts with a letter d for Definition. The second letter is either l, t, or d (l=List, t=Term, d=its Definition). They work like this:

whole List (possibly many lines of text)

One pair (open/close) of these tags enclose the whole List, including all terms (each with their special tags), and all definitions (each with their special tags)

 

each Term to be defined

Within the list, a pair (open/close) of these tags enclose each Term

 

the Definition of the term

Within the list, a pair (open/close) of these tags enclose each Definition

 Note  You're free to insert blank lines and white space (= Space  or  Tab  characters). The browser ignores them, but they make the document easier for you to read.

Let's extend the Definition List tagging to include the term LookUp box and its definition, too. We can do it like this:

1. Leave the (open) list tag in place
2. Move the (close) tag so it comes after the definition
3. Tag the term LookUp box with and,
4. Tag its definition with and, as we did before

In the same way, we can extend the Definition List tagging back, so that it includes the question and its answer.

This time we leave the (close) tag in place, but move the (open) tag. We also need to take out the paragraph and line-break tags and replace them with the Definition List tags for a term and its definition :

Now extend the Definition List tagging to include the final term, . We can also improve its definition with a new type of list (but we'll defer that until Stage 4).

For now, tag , and its entire definition, as we did for the other terms. Don't forget to move the (close) tag, too :

 
There are two other list styles for which provides dedicated tags:

 
In our definition, we have two Styles: Edit and MultiStep. We can make them stand out better by tagging them as a list. Lists can be nested, so we can create this new list inside the main Definition List.

We'll use and tags for the two Styles, to create an Ordered List. The preview has the tags colour-coded to show how they match up :

With the items tagged as a list, we can add further text to each of them. For example, we can include a gloss (explanation) for each. Try it for yourself :

If we add more items, the browser will number them for us. For example, there's another style of , which is used in our Batch File Course.

It simulates a DOS window, and it looks like this :

Add the new style, DOS and its description. Make it first in the list and the browser will automatically re-number the other two items :

 
For items that you want to display as a series of bullet points, rather than a numbered sequence, you can use the and tags to create an Unordered List.

Indeed, the three styles would be more effectively presented in this way.

So let's change our Ordered List to an Unordered one :

 
We can improve the look of the Definition List with a blank line between each pair of Term+Definition. Put a tag in front of each Term except the first :

 
We've seen that multiple  Space s are ignored by the Browser. We've also seen that the Browser will wrap lines at any boundary between words.

Sometimes you need to insert several consecutive  Space s, or avoid a line break ever coming between two adjacent words. For this, you can use a Non-breaking Space.

This is one of a number of special s inserted with the  & mnemonic ;  syntax. The mnemonic for a non-breaking space is nbsp, so the symbol for it is: &;

The Browser will render each &; as a  Space . For example, if we want to indent the Copyright  message by four  Space s, we use &; four times :

A Browser will wrap lines at any convenient  Space  or  hyphen  (and at a few other points). It's a matter of chance (depending on window size and screen resolution). But you can use non-breaking spaces to control line wrap, in a subtle way.

For example, suppose you're writing the History of a War. See how a strong, clear sentence can become a weak, confused one with an unlucky line wrap.

If you write: It was&nbsp;not. your sentence will never wrap between was not ... On that nice point of rhetoric, we'll close this Lesson.

You can refresh your memory for any point you're unsure about with this pull-down version of the Course Reference. It has s for all the terms we've met so far.

The Index has the syllabus for the next Lesson, where we'll add style to our document with Cascading Style Sheet rules. See you then.