Headers, Paragraphs and Lists

Headers

Reading Pages 87-88

Header tags are used to mark sections of text, kind of like chapter headings in a book. There are 6 of them, but they all look the same. The general format is


<h? attributes>Header Text </h?>
where the question mark is replaced by 1 through 6. Here is what the example in the book looks like.

This is an H1 Header

This is an H2 Header

This is an H3 Header

This is an H4 Header

This is an H5 Header
This is an H6 Header

After each header is a blank line to separate from the text that comes after. Here are some examples of the kinds of attributes and their effects.

This is an H2 Header align="left"

This is an H2 Header align="right"

This is an H2 Header align="center"

This is an H2 Header align="justify"

This is a very,very,very, like really very, I mean extremely, amazingly long H2 Header align="center"

This is a very,very,very, like really very, I mean extremely, amazingly long H2 Header align="left"

This is a very,very,very, like really very, I mean extremely, amazingly long H2 Header align="right"

This is a very,very,very, like really very, I mean extremely, amazingly long H2 Header align="justify"

Paragraphs

Reading Page 84

Web browsers, unlike word processors, ignore returns, tabs, spaces, etc., what are called whitespace. The words in a block of text are gathered together into one long line with one space between each word. Only markup tags affect this. To break text into paragraphs, you need a paragraph tag. This is <p>. It is usually used alone to mark the start of a new paragraph, but technically, the text of the paragraph should be wrapped in start and end paragraph tags.

For example,

This is some text on one line.
This is actually on the next line.
And this is the third line.
And this is what it looks like.
This is some text on one line. This is actually on the next line. And this is the third line.

Notice how the text above is not split onto different lines. But if we change it to put a paragraph tag before each line, like this,
<p>This is some text on one line.
<p>This is actually on the next line.
<p>And this is the third line.

It will look like this.

This is some text on one line.

This is actually on the next line.

And this is the third line.
Notice that each line has a blank line before it. Let's try an attribute.

<p align="right">This is a paragraph with some stuff about paragraphs in it.
There are three sentences in the paragraph, of which this is the second.
The third sentence, this one, is the last in the first paragraph.
<p align="center">
The second paragraph, which this is, also contains three sentences.
The second sentence is probably more boring in this paragraph than that last.
That is because you expect it to be like the one in the first paragraph.
Which it was, but you didn't expect that this paragraph would end up with
4 sentences.
<p align="left">The last paragraph is left aligned. The middle one is center aligned
and the first one is right aligned. The default is the same as left aligned.
And that is enough about paragraphs.
An it looks like this

This is a paragraph with some stuff about paragraphs in it. There are three sentences in the paragraph, of which this is the second. The third sentence, this one, is the last in the first paragraph.

The second paragraph, which this is, also contains three sentences. The second sentence is probably more boring in this paragraph than that last. That is because you expect it to be like the one in the first paragraph. Which it was, but you didn't expect that this paragraph would end up with 4 sentences.

The last paragraph is left aligned. The middle one is center aligned and the first one is right aligned. The default is the same as left aligned. And that is enough about paragraphs.

Lists

Reading Pages 97-100
Lists are just that. They are a sequence of bits of text, arranged down the page. They can be numbered, proceeded by bullets and lettered. Here are some examples.
First a simple bullet list.

<ul>
<li>This is a list item, the first </li>
<li>This is a list item, the second </li>
<li>This is a list item, the third </li>
</ul>
Now, let's number them.
<ol type="1">
<li>This is a list item, the first </li>
<li>This is a list item, the second </li>
<li>This is a list item, the third </li>
</ol>
  1. This is a list item, the first
  2. This is a list item, the second
  3. This is a list item, the third
Now, let's letter them.
<ol type="A">
<li>This is a list item, the first </li>
<li>This is a list item, the second </li>
<li>This is a list item, the third </li>
</ol>
  1. This is a list item, the first
  2. This is a list item, the second
  3. This is a list item, the third
And finally, we can nest them.
<ol type="A">
<li>This is a list item, the first </li>
<ol type="1">
<li>This is a list item, the first of the nested list </li>
<li>This is a list item, the second of the nested list </li>
</ol>
<li>This is a list item, the second </li>
<li>This is a list item, the third </li>
</ol>
  1. This is a list item, the first
    1. This is a list item, the first of the nested list
    2. This is a list item, the second of the nested list
  2. This is a list item, the second
  3. This is a list item, the third