Headings

That "Battlestar Galactica Quotes:" at the top there looks a little out of place, doesn't it? Well, to fix that, we can apply a heading tag to it. There are six different heading tags: <h1> through <h6>. Like most XHTML tags, usage is straightforward:

source

Headings:

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

A heading tag does a couple of things to text. First, it creates two line breaks, like a paragraph. It also emboldens the text. Finally, headings 1, 2, and 3 almost always increase the text size, 4 is usually the same as the surrounding text, and 5 and 6 are usually smaller. However, the size of headings is really more of a guideline than a hard and fast rule; many things can change the formatting of a heading. It is worth nothing that a heading is also a block-level tag. Finally, like all XHTML tags, header tags must be closed.

results

Headings:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lets apply a heading to our quotes page:

source

Quotes Page:

<html>
<head>
<title>Battlestar Galactica Quotes</title>
</head>
<body>

<h2>Battlestar Galactica Quotes:</h2>

<p>
  Admiral Cain: Commander, why are you launching 
                Vipers? <br />
  Commander Adama: Please arrange for Chief Tyrol 
                   and Lieutenant Agathon to be 
                   handed over to my marines as 
                   soon as they arrive. <br />
  Cain: I don't take orders from you! <br />
  Adama: Call it whatever you like. I'm 
         getting my men. <br />
  Cain: You are making *such* a mistake! <br />
  Adama: I'm getting my men. 
</p>

<p>
  Commander Adama: There's a reason you separate 
                   military and the police. One 
                   fights the enemies of the state,
                   the other serves and protects 
                   the people. When the military 
                   becomes both, then the enemies 
                   of the state tend to become 
                   the people.
</p>

<p>
  Commander Adama: Sometimes, you have to 
                   roll a hard six.
</p>
</body>
</html>

Of note is the fact that I used heading tags to replace the paragraph tags previously surrounding that block. Since both elements are block-level, this is okay.

results

Quotes Page:

Battlestar Galactica Quotes:

Admiral Cain: Commander, why are you launching Vipers?
Commander Adama: Please arrange for Chief Tyrol and Lieutenant Agathon to be handed over to my marines as soon as they arrive. Cain: I don't take orders from you!
Adama: Call it whatever you like. I'm getting my men.
Cain: You are making *such* a mistake!
Adama: I'm getting my men.

Commander Adama: There's a reason you separate military and the police. One fights the enemies of the state, the other serves and protects the people. When the military becomes both, then the enemies of the state tend to become the people.

Commander Adama: Sometimes, you have to roll a hard six.

Style Tags

Lets say I want to make the speakers name's bold on my quotes. I can't use heading tags because that would create line breaks. This is where style tags come in. Style tags provide a straightforward way to control the font. These tags fall into two categories: physical styles and logical styles. Right now, we are only going to discuss physical styles.

Physical Styles

Physical style tags allow you to specify a particular font change. For example, to make text bold, you can mark it off with the <b> tag: <b>bold text</b>.

Lets apply some physical styles to our quotes page. I think that the names of the speakers would be clearer if they were in bold, and I am going to italicize when Cain says "such" rather than leave those asterisks.

source

Quotes Page:

<html>
<head>
<title>Battlestar Galactica Quotes</title>
</head>
<body>

<h2>Battlestar Galactica Quotes:</h2>

<p>
  <b>Admiral Cain:</b> Commander, why are you launching 
                Vipers? <br />
  <b>Commander Adama:</b> Please arrange for Chief Tyrol 
                   and Lieutenant Agathon to be 
                   handed over to my marines as 
                   soon as they arrive. <br />
  <b>Cain:</b> I don't take orders from you! <br />
  <b>Adama:</b> Call it whatever you like. I'm 
         getting my men. <br />
  <b>Cain:</b>  You are making <i>such</i> a mistake! <br />
  <b>Adama:</b>  I'm getting my men. 
</p>

<p>
  <b>Commander Adama:</b> There's a reason you separate 
                   military and the police. One 
                   fights the enemies of the state,
                   the other serves and protects 
                   the people. When the military 
                   becomes both, then the enemies 
                   of the state tend to become 
                   the people.
</p>

<p>
  <b>Commander Adama:</b> Sometimes, you have to 
                   roll a hard six.
</p>
</body>
</html>

Lets see what that does:

results

Quotes Page:

Battlestar Galactica Quotes:

Admiral Cain: Commander, why are you launching Vipers?
Commander Adama: Please arrange for Chief Tyrol and Lieutenant Agathon to be handed over to my marines as soon as they arrive.
Cain: I don't take orders from you!
Adama: Call it whatever you like. I'm getting my men.
Cain: You are making such a mistake!
Adama: I'm getting my men.

Commander Adama: There's a reason you separate military and the police. One fights the enemies of the state, the other serves and protects the people. When the military becomes both, then the enemies of the state tend to become the people.

Commander Adama: Sometimes, you have to roll a hard six.

Well, that just looks dandy, doesn't it? Lets move on to the final topic of the first lesson, browser tools and validating your code.