|
|
| Music | Writing | Travelogues | Shakespeare Resource Center | Contact | |
Introduction | Required Tags | Formatting, Part I | Formatting, Part II | Links | Lists | Tables | Images | Other Resources
Now that you've seen how paragraphs are "tagged," the other formatting tags will come easier. The principle is still the same: <TAG>content</TAG>. In the case of paragraphs, this would be:
<P>Paragraph text</P>
We've also covered attributes within tags (<TAG attribute="value">Content</TAG>). As an example, the <P> tag can have an alignment attribute of left, center, and right (left is default, so if there is no "align" attribute, the paragraph will be left-justified):
<P align="left">
<P align="center">
<P align="right">
You will need more than paragraph tags to make a coherent page. For titles, headings, and subheadings, the HTML standard includes tags to specify how that text will appear—generally, bigger and bolder so that they will stand out.
Now we're going to jump into them. As paragraphs are tagged with <P>, headings are conveniently tagged with <H> (P for Paragraph, H for Heading...it's easy to remember.) There are six (6) sizes of headings, from 1 (largest) to 6 (smallest), and these are demonstrated below as we attempt to add a heading to our Gettysburg address page:
| <H1>The Gettysburg Address</H1> | The Gettysburg Address |
| <H2>The Gettysburg Address</H2> | The Gettysburg Address |
| <H3>The Gettysburg Address</H3> | The Gettysburg Address |
| <H4>The Gettysburg Address</H4> | The Gettysburg Address |
| <H5>The Gettysburg Address</H5> | The Gettysburg Address |
| <H6>The Gettysburg Address</H6> | The Gettysburg Address |
Like paragraphs, headings can be aligned left, center, or right; the format is just the same:
<H1 align="center">The Gettysburg Address</H1>
Adding this to our previous code on the address, the page would look as follows:
<HTML>
<HEAD>
<TITLE>The Gettysburg Address</TITLE>
</HEAD>
<BODY>
<H1 align="center">The Gettysburg Address</H1>
<P>Four score and seven years ago our fathers brought forth on
this continent a new nation, conceived in liberty and dedicated
to the proposition that all men are created equal.</P>
<P>Now we are engaged in a great civil war, testing whether that
nation or any nation so conceived and so dedicated can long
endure. We are met on a great battlefield of that war. We have
come to dedicate a portion of that field as a final resting place
for those who here gave their lives that that nation might live.
It is altogether fitting and proper that we should do this.</P>
<P>But, in a larger sense, we cannot dedicate--we cannot
consecrate--we cannot hallow--this ground. The brave men, living
and dead, who struggled here have consecrated it far above our poor
power to add or detract. The world will little note nor long remember
what we say here, but it can never forget what they did here. It
is for us, the living, rather, to be dedicated here to the
unfinished work which they who fought here have thus far so nobly
advanced.</P>
<P>It is rather for us to be here dedicated to the great task
remaining before us--that from these honored dead we take
increased devotion to that cause for which they gave the last
full measure of devotion; that we here highly resolve that these
dead shall not have died in vain; that this nation, under God,
shall have a new birth of freedom; and that government of the
people, by the people, for the people shall not perish from the
earth.</P>
</BODY>
</HTML>
Which gives us this:
The Gettysburg AddressFour score and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing whether that nation or any nation so conceived and so dedicated can long endure. We are met on a great battlefield of that war. We have come to dedicate a portion of that field as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this. But, in a larger sense, we cannot dedicate--we cannot consecrate--we cannot hallow--this ground. The brave men, living and dead, who struggled here have consecrated it far above our poor power to add or detract. The world will little note nor long remember what we say here, but it can never forget what they did here. It is for us, the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us--that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion; that we here highly resolve that these dead shall not have died in vain; that this nation, under God, shall have a new birth of freedom; and that government of the people, by the people, for the people shall not perish from the earth. |
(For the actual example page, click here.)
There are also tags for text effects. Those are demonstrated below:
| <B>Bold Text</B> | Bold Text |
| <I>Italic Text</I> | Italic Text |
| <U>Underlined Text</U> | Underlined Text |
| <TT>Typewriter Text</TT> | Typewriter Text |
| <S>Strikethrough Text</S> | |
| <BIG>Big</BIG> Text | Big Text (one font size larger) |
| <SMALL>Small</SMALL> Text | Small Text (one font size smaller) |
| <SUP>Superscript</SUP> Text | Superscript Text |
| <SUB>Subscript</SUB> Text | Subscript Text |
Quite frankly, you should avoid the use of structural HTML tags to designate font typefaces, sizes, and colors altogether. Really. I mean it. But, since most browsers still support the use of this abhorrent tag, and since many HTML editors still use them, unfortunately, as their primary means of font formatting, you may as well know the correct way to use the dreaded <FONT> tag.
The main attributes that that apply to the <FONT> tag are:
Caveats and notes on the above: When you specify a typeface using the <FONT> tag, keep in mind that it's more of a suggestion to the browser than anything else. If you tell the browser to display Comic Sans font, but the end user doesn't have Comic Sans installed on their computer, the browser will shrug and display the text in whatever the default font is. As a result, it's usually good to specify an alternate font face or two, ending with a broad font family (serif, sans-serif, monospace) so that the text renders at least close to how you intended it to. Size is the exact opposite of headings; the sizes range from super-small (1) to very large (7). Colors can be specified as a name (red) or as its RGB hexadecimal equivalent (#FF0000). If any of the above information confuses you, then you should absolutely think twice before inserting <FONT> tags all over the place in your HTML code.
I'll give one example of content using all three attributes, because one is all I can stand. Let's say I want some text to display in large, red Verdana font or something like it. The code for that would look something like this:
<FONT face="Verdana, Arial, sans-serif" size="5" color="red">Styled text</FONT>
And the above line of code in HTML would display something like this:
Styled text
Now, please forget about the usage of <FONT> tags for the rest of this tutorial, because stylesheets provide a much better way of making text conform without cluttering up your HTML code.
You may have also noticed the dividers occasionally appearing on this page. Those are appropriately called "Horizontal Rules," and this is a single tag (like the <BR> line break tag discussed in the prior lesson) inserted where you want it. And, it is conveniently described by the tag <HR>. Let's say you wanted a divider between the heading and the first paragraph of the Gettysburg Address. The markup would appear like this:
<H1 align="center">The Gettysburg Address</H1> <HR> <P>Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal.</P>
This would be displayed on the page like this:
The Gettysburg AddressFour score and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal. |
Horizontal rules, like paragraphs and headings, can take attributes like "align" within their tag for further formatting. The attributes that apply to the <HR> tag are:
This is more complicated than the attributes for paragraphs or headings, but don't let that fool you. Horizontal rules just have a few more properties that you, the HTML author, have at your disposal. It's easily illustrated with a sample. Let's say we want a thick horizontal rule that's centered on the page. We also don't want it to run across the entire width of the page, and we're going to throw in the "noshade" attribute as well. We're going to define all those attributes in the tag itself, as follows:
<HR size="10" align="center" width="85%" noshade>
Our divider, as displayed on the page, will look like this:
Needless to say, you probably wouldn't want a line that thick. But that helps to illustrate what kind of control one has over the HTML tags. You could use any combination of the above attributes to make a horizontal rule, or none at all. It's only as complicated as the author wants to make it.
For our final lesson in formatting, we'll return once again to Lincoln's Gettysburg Address. Using some of the tags we've covered in this lesson, we've added in some new formatting to the page. See if you can correctly identify the tags and what they're doing in the code, then click here to see the example page with the code in action. Compare what you expect to what you find.
<HTML>
<HEAD>
<TITLE>The Gettysburg Address</TITLE>
</HEAD>
<BODY>
<H1 align="center">The Gettysburg Address</H1>
<HR align="center" size="5">
<P><B>Four score and seven years ago</B> our fathers brought forth on
this continent a new nation, conceived in liberty and dedicated
to the proposition that all men are created equal.</P>
<P><B>Now we are engaged in a great civil war</B>, testing whether that
nation or any nation so conceived and so dedicated can long
endure. We are met on a great battlefield of that war. We have
come to dedicate a portion of that field as a final resting place
for those who here gave their lives that that nation might live.
It is altogether fitting and proper that we should do this.</P>
<P><B>But, in a larger sense</B>, we cannot dedicate--we cannot
consecrate--we cannot hallow--this ground. The brave men, living
and dead, who struggled here have consecrated it far above our poor
power to add or detract. The world will little note nor long remember
what we say here, but it can never forget what they did here. It
is for us, the living, rather, to be dedicated here to the
unfinished work which they who fought here have thus far so nobly
advanced.</P>
<P><B>It is rather for us</B> to be here dedicated to the great task
remaining before us--that from these honored dead we take
increased devotion to that cause for which they gave the last
full measure of devotion; that we here highly resolve that these
dead shall not have died in vain; that this nation, under God,
shall have a new birth of freedom; and that government of the
people, by the people, for the people <I>shall not perish from the
earth</I>.</P>
<P><SMALL>Abraham Lincoln,<BR>1863</SMALL></P>
</BODY>
</HTML>
(When you're ready to view the actual example page, click here.)
Now that you've seen what you can do with the formatting features of HTML, there are a few more handy things that you can have at your disposal. With basic markup structure out of the way, we will now turn to some more advance markup to create hyperlinks, lists, and tables. The next lesson will teach you how to create hyperlinks in your documents, and is appropriately entitled Links.