left-pointing arrow for navigating to previous page

HTML Tutorial: Poetry

right-pointing arrow for navigating to next page

<! index.html - the first page, ?? site>
<! Copyright ?? >

<html>

<body>

</body>

</html>

<! end of index.html>
You're not interested in poetry? This really isn't about poetry. It's about the <br> and <p> tags.

To begin, remove 100% of the body content from index.html. Yours should look like the one on the left. Got it?

See where it says "?? site"? If your name is "Judy Jones" change that to "Judy Jones' wonderful new site".

If it's 2008 and your name is Fred Frelanski, change the "Copyright ??" to "Copyright 2008, Fred Frelanski".

If you're neither Judy nor Fred, go ahead and use your own name.


Experiments Start Here

Now type this bit of a poem into the body area: 

This is a poem
About HTML.

Learn it now
And it will serve you well.
Save index.html. Reload index.html into the working tab of your browser and what do you get? Mine looks like this:

Poem written as one long line.

Yes, your browser has no taste for poetry and no respect for the way your text is formatted. You have to give it directions.

Add Break (<br>) Tags

This is a break tag: <br>.¹ This is not: < br >. HTML is pretty loose about most things, but one thing you can't do: put anything between the opening "<" and the tag name.

Start by putting a break tag (<br>) after every line of your poem: 


This is a poem<br>
About HTML.<br>

Learn it now<br>
And it will serve you well.<br>

Here's what you should get when you save and reload index.html. (You don't need any more save/reload reminders, do you?)

The poem now spans four lines.

Try a Paragraph (<p>) Tag

Next, change the <br> that follows "About HTML." to a paragraph tag between the verses: 

This is a poem<br>
About HTML.
<p>
Learn it now<br>
And it will serve you well.<br>
You could put the <p> tag at the end of the previous line or at the start of the next line. It's more human-readable if you put it on a line of its own. Be nice to yourself and write HTML as if you may need to read it a week or a month from now.

Introducing Attributes

Most tags have "attributes"—named things to which you can assign values within the tag. The paragraph tag has an align= attribute that accepts "left", "center" and "right" as values.

Experiments

Try these: 

<p align=center> centered! </p>
<p align=right> right aligned! </p>
<p align=left>...</p> is nearly useless, as left is the default. Those working in Arabic or Hebrew, however, think right alignment is useless.

On your own, experiment with the align attribute of the enclosing paragraph and end paragraph tags. Something like this will be interesting: 


<p align=center>This is a poem<br>
About HTML.</p>

<p align=right>
Learn it now<br>
And it will serve you well.</p>

Experiment with Mistakes

Hope you're thinking about the possibilities for your site. Again, on your own, change the align attribute to something other than the allowed "left", "center" and "right" choices. Try align=elegantly or align=righht. What do you get?

When the browser can't understand the HTML, it gives no error messages. It just reverts to the default, left alignment. Remember that your browser will never give you an HTML error message.

Next, we'll use boldface and italic and lots of other text decorations.

Let's decorate text!

¹This is the break tag in XHTML: <br />. If you see that, realize that it's just another way to get a break. XHTML is supposed to replace HTML, but I don't think that's going to happen. The standards body sort of forgot that there are thousands of us who want to communicate in cyberspace, but don't want to become full-time, professional webmasters.