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)

In Lesson 1, you marked up the plain text notes (from the Introduction). In this Lesson, we'll use the file you created, and add some rules to it. It's better to use your own file, but if you don't have it, download this exampleactive.htm file now.
In , we'll add a little style to active.htm with rules. If you're unsure of what means, hover your mouse over for a brief description.

Remember that you can (for details, click here).

If you have Notepad's window open from the previous Lesson, you can skip .

Notepad will not be the application registered to open HTM files (this will be your default browser's job), and so we'll need to use Notepad :

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

If your  HTML view  window is still open from Lesson 1, skip this re-opening step. If not, the below will help you open your active.htm document in a Browser window scaled to fit the Lesson's window layout, as before.

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 .

 
Lesson 1 dealt with basic , now let's add some Style with . We'll split the job into four logical stages, and learn some useful rules. This is the plan:

With rules, you can easily change fonts and colours. You can even create rules to change (or add to) the rendering of standard tags, as we'll soon see,

A useful way to work with rules is to keep them in a separate file, which all your pages can use. That means you can change a style feature throughout an entire website by changing its rule in only one file. For our present purpose, however, we'll put our rules in the , where they apply to the whole of the current document.

 
Changing overall settings for the document:

In the of our document, we can specify rules enclosed between and </> tags. These rules will apply to the whole document :

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

We used the standard tag to mark our document's main content. We can alter the meaning of this tag with a rule. For example, we can add a rule about what font to use, and it will apply to all text between and .

To change any tag's meaning, this is what we need to do:

• List the tag's name in our new section
• Add a rule to the tag's name, in {curly brackets}

We can choose which font the will use with the rule. We'll use Arial. It's a standard, Microsoft font found on most machines :

Browsers are very strict on spelling and punctuation in rules. They will ignore any rules that are misspelt or mispunctuated, and may even ignore (correct) rules that follow them. So, if the  HTML view  of your document doesn't respond to any rules you add, check all the spelling of tags and rules carefully.

And remember: you must save Notepad changes before  HTML view  will show them.

We can add a rule to change the font's :

You specify colours with in one of five ways (we'll use the first):

1. Any of 140 standard Colour Names in the scrollable list
    
2. RGB hexadecimal codes: :#RRGGBB
    
3. RGB short hexadecimal codes: :#RGB
    
4. RGB decimal codes: :rgb(red,green,blue)
    
5. RGB percentages: :rgb(red%,green%,blue%)

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

For precise work, you'll probably use one of the numerical mixing methods, but for quickly testing a few ideas, the (faintly whimsical) Colour Names are quite useful.

We can specify the text colour with the rule, and the document's background colour with the rule.

Try :yellow;:chocolate. See what you think :

Colours are a matter of taste. The 140 Colour Names make an easy way to test colour combinations. Click the  Colours  button on the right; it will re-display the list in a small window that you can drag around, and see with your Notepad window open.

You may want to play with research a few changes of and by trying some other combinations now. Remember to click File, Save after each change in Notepad, then press  F5  in the  HTML view  window to see the effect.

We'll wait here until you've finished researching ...

 
Next, we'll look at how to change the appearance of individual letters, words, or phrases. This is called "Text-Level" tagging.

The tag can be used to make a span of text look bold. Try using it to make the technical term: stand out :

Here, emboldening isn't very effective. We could use a rule to add a colour change to the tag. But there's a more versatile way. We'll try it with another term.

We can tag ing with the user-definable tag, . It won't appear to have any effect until we define some rules for it :

We can now add rules to the tag. Let's add a colour rule :

 Note  If a rule used inside a tag needs  Space s use quotes around the rule, eg:

<span style="font-family:Times New Roman"> The Times </span>

You may want to try some other colour combinations. Use the button to see the Colour Names list again (in a small window). Remember to save any changes in Notepad before refreshing the  HTML view  window. Remember, too, that you can read the RGB decimal values of any colour in the list by hovering your mouse over its colour block.

We can make our ing appear in bold as well. We could do it with :

<span style=color:lime><b>onClick</b></span>ing or

<b><span style=color:lime>onClick</span></b>ing

Either would work. Notice that you must nest tags properly, enclosing both open and close of the inner tag within the outer. So, for example, this version would be wrong:

<b><span style=color:lime>onClick</b></span>ing because the tag opens before the tag, so the should close after the does.

However, we won't use , instead we'll use a new rule: . Add the rule to the rule :

 
Now we'll turn our attention to text in Blocks:

A Block means any chunk of content that you want to stand alone. It could be:

• one or more words that are not part of a line (or lines) of text
• one or more entire paragraphs
• a heading (which may be many words, many lines, or only one word)
• a footnote (again, it may be many words, many lines, or only one word)
• your whole document (the document is itself a Block)

But this quote: "Then felt I like some watcher of the skies when a new planet swims into his ken; or like stout Cortez when with eagle eyes he stared at the Pacific – and with all his men looked at each other with a wild surmise – silent, upon a peak in Darien" is not a Block (although it's quite long), since it's only a part of this sentence. However, this entire paragraph (Keats and all) is a Block.

We've used three Block-Level tags: , and . Each has a special function, but we could use rules to give them a quite different function, if we chose.

However, also has a user-definable Block-Level tag: (the Block equivalent of ). If we need a special block layout, it's often better to create a that meets our requirements, rather than alter one of the standard Block-Level tags.

Let's try out this idea by placing the heading of our notes in a user-definable tag instead of the tag we're using at the moment :

We could add a centre rule inside the new tag. We could, but we won't. Instead we'll define a for our tag to use. A is a set of one or more rules, and we define it in the section of the document .

We must choose a name for our – we'll call it myclass. Not very informative, but amidst all the other syntax, myclass will remind us that it's a word we chose. For now, we'll just put a rule in the new :

We need to tell the Browser to use myclass for our . The instruction for this goes inside the tag :

The purpose of creating a of rules is to re-use it elsewhere in the document. Let's put the footnote in a myclass , too :

While we're working on the footnote, let's add a pair of © symbols to it. We can do that with the &; symbol :

Now we have two Blocks (heading and footnote) assigned to myclass. If we add rules to myclass, then all Blocks assigned to it will change simultaneously.

Remember that rules can be loaded from a file. Re-usable es mean that you could re-style an entire Website with one rule change in one file.

Let's change the text of myclass and embolden it, too :

If you're not keen on  oldlace  you may want to research other colours.

 
On a slightly less serious note:

Let's sign off with a custom at the end of our document :

We'll add rules on and to our new :

We can add more rules. We could add them in same style= section. However, some Browsers (such as Internet Explorer) can handle separate style= sections on new lines, which keeps the document tidier and the lines shorter.

 Note  If you're not using Internet Explorer, keep all these extra rules inside the "quotes" of our first style= section and all on one long line – or they'll be ignored.

We'll use a rule that we haven't met before: . Make sure you keep all the rules inside the opening tag :

Of course, the precise colours for your "own work" are still up to you ...

Take the time to glance through the s for the tags and rules we've met. The Course Reference pull-down box grows automatically with each Lesson, so it now includes all the terms from Lessons 1 and 2, and has extra cross-references.

That ends this short Course in and . Try the to finish off.

This short demonstration Course in HTML for Newcomers is offered as practical example of our interactive writing techniques. We hope you found it interesting and informative. You can read more about our work and the services we offer.