Open the index.html you made in Lesson 1, in Notepad and in your browser, side by side. Everything in this lesson goes between <body> and </body>.

The browser ignores your Enter key

Type three short paragraphs in Notepad, pressing Enter between them, and reload. They all run together into one lump. This surprises everybody. The browser pays no attention to how you lay out your typing: extra spaces, extra Enters, tabs, all of it gets squeezed down to a single space. You have to tell it where the breaks go.

<p> starts a new paragraph with a blank line above it. <br> just drops to the next line, like the carriage return on a typewriter. <br> has no closing tag; it doesn't go around anything.

Headings

There are six sizes of heading, from <h1>, the biggest, down to <h6>, the smallest. Use one <h1> at the top for the name of your page, and <h2> or <h3> for the sections under it.

Bold, italic and centered

A word from your old typing teacher: bold is like shouting. A little of it gets attention. A whole page of it and people stop listening. There's an underline tag, <u>, but please don't use it. On the Web, underlined words look like links, and people will click on them and wonder why nothing happens.

Size, color and typeface

The <font> tag changes how words look. It takes three settings, called attributes, that go inside the opening tag:

• size goes from 1 (tiny) to 7 (enormous). Regular text is 3.
• color can be a plain English name like red or navy, or a code with a # in front. The codes look scary but they're just three pairs: how much red, how much green, how much blue, from 00 (none) to FF (all). #FF0000 is all red. #000000 is black. #FFFFFF is white. #000080 is navy.
• face is the typeface. Stick to ones everybody has: Arial, Times New Roman, Courier New. If your visitor doesn't have the one you picked, they get the plain standard one instead.

Coloring the whole page

To change the colors of the whole page at once, add attributes to your <body> tag:

bgcolor is the background, text is the words, link is links you haven't visited yet, and vlink is links you have. Those four are the colors of this very page. Whatever you pick, please keep dark words on a light background, or light on dark. Peter, who is fifty-three, made his page yellow on white the first week. Nobody could read it but Peter.

Lines and lists

<hr> draws a line across the page. <ul> is a list with dots; <ol> is a list with numbers, and the browser counts for you. Each thing in either list gets its own <li>.

Two handy extras

Notes to yourself. Anything between <!-- and --> is invisible in the browser. Use it to leave yourself reminders, like <!-- put the picture of the dog here -->.

Special characters. Since < and > mean "here comes a tag," you can't just type them. Write &lt; for <, &gt; for >, and &amp; for the & sign itself. &copy; makes a ©.