The first
tag we'll learn is the HEADING. This is automatically bold, and you can have it
in several different levels. You may have read that you have to keep them in
order, but this is not so. You can have your first HEADING smaller than the
next, whichever way you want. Let's look at the various sizes. Again,
if you open it, close it.
The next
tag we'll learn that goes in the body is the Paragraph tag. Again, remember
that if you open a tag, close it. The Paragraph tags, not so strangely, are <P>
and </P>
The default for the HEAD and PARAGRAPH is left-aligned. If
you add nothing else to your P or H tags, that is what the browser will read it
as. For neatness, and just so no unusual browser messes it up, I always add the
ALIGN="LEFT" ATTRIBUTE anyway. For example:
<P ALIGN="LEFT">
The
other alignment ATTRIBUTES you can add are RIGHT, which gives you text that is
aligned on the right hand side, and CENTER, which centers all the text (and
images if you have them in the paragraph) in the center of the page. Let's take
a look at how this works.
<P ALIGN="LEFT">This is a Really Awesome Page</P>
<P ALIGN="CENTER">This is a Really Awesome Page</P>
<P ALIGN="RIGHT">This is a Really Awesome Page</P>
And for your HEADING tags:
Why is the
Paragraph text so light as compared to the rest of the page? Because in the code
for this page, I use the STRONG ATTRIBUTE. This is preferred over the BOLD, but
I use both freely and liberally. The tags for strong are <STRONG></STRONG>
and the tags for BOLD are <B> and </B> See if you can tell the
difference:
This is Strong Text
This is Bold Text.
These
are the basic steps for creating Headings and paragraphs, which by the way will
keep running on until it finds the closing P or H Tag. Then there will be a line
break. If you want to use a line Break without skipping a line, we'll talk about
the BREAK Tag next.
The BREAK Tag is the exception that proves the rule. You do not need to close this particular tag. The format for this is <BR> and you can use as many as you need. If you like, you can enclose them within one set of <P></P> tags for an extra break. Using the <BR> tag is similar to hitting Enter on your keyboard, you get the text to start on a different line. This is especially useful if you're putting poetry on your page, as it doesn't create the gaps between lines. To see how this works, here is an example of using the Paragraph tags:
<P ALIGN="CENTER">Roses are red</P>
<P ALIGN="CENTER">Violets are blue.</P>
<P> ALIGN="CENTER">Sugar is sweet</P>
<P ALIGN="CENTER">And so are you.</P>
Now here is the same poem using a <BR> after each line
<P
ALIGN="CENTER">Roses are red<BR>
Violets are blue.<BR>
Sugar
is sweet<BR>
And so are you.</P>
Other tags you can use in your HEADINGS and PARAGRAPHS are the ITALIC or EMPHASIZED tags <I> and </I> or <EM> and </EM>, or the UNDERLINE Tags <U> and </U>, or both. One thing, if you open tags in a certain order, close them in the same order so as not to confuse the browser. I'll show you what I mean:
See how
that goes? Close them in the opposite order that you opened them.
Emphasized
text is the same as ITALIC. Again, see if you can tell the difference between
these two line:
<I>This is ITALIC text</I>
<EM>This
is EMPHASIZED text</EM>
Your choice, since I certainly can't see
any difference.
One more area to cover, and then we move on. Occasionally you have some text that you cannot format correctly no matter what you do. For example, a chart. Tables are useful, but that's Advanced HTML, so what are you going to do? You can use the Preformatted Text tags <PRE></PRE>, which will leave your text exactly the way you type it. The main problem is that it now becomes a Fixed Width Font, different from all the other text on the page. These tags cannot be inside a set of Paragraph or Heading Tags. They must stand alone. You can however, add UNDERLINING or ITALICS or BOLD/STRONG and other formatting (we'll learn that later) to the text. Here is how you can use the Preformatted Tags to lay out a chart:
<PRE>
Medical First Responder: $75.00 Emergency Medical Technician: $100.00 Emergency Med. Tech/Specialist: $150.00 Emergency Med. Tech/Paramedic: $200.00 Instructor/Coordinator: $400.00
</PRE>
One more thing before we move on, and that is the <CENTER></CENTER> Tags. They mean just what they say, and you can use them in place of or in addition to, for example, the <P ALIGN="CENTER"></P> Tags. In some ways this is a good idea, as some Browsers do not recognize the Paragraph Alignment Tags, and our goal is to create a page capable of being read by all Browsers. To cover all ends, then, you can format your Centering like this:
<CENTER><P ALIGN="CENTER">This is my story</P></CENTER>
Another Tag you use on your page, which doesn't require any closing, is the Horizontal Rule. You can use this to separate sections of your page, paragraphs, or anytime you want a divider. The code for this is simply <HR> which will give you a full page width line, like below.
You can play with these by adding ATTRIBUTES to the <HR> tag. You can specify the width in pixels or percent, you can specify the thickness, you can also specify whether it's shaded or not. Let's see what we can do with a Horizontal Rule.
<HR SIZE="25" NOSHADE> (specified in pixels):
<HR SIZE="10" WIDTH="300"> (again in pixels):
<HR ALIGN="RIGHT" WIDTH=50% SIZE="15" NOSHADE> (width specified in percentage):
<HR ALIGN="LEFT" WIDTH="200">:
Play with the ATTRIBUTES until you get the look you desire. You can even change the color of the Horizontal Rule, but only those with Microsoft's Internet Explorer will see it, leaving out Netscape and other browser users. To get around this, you can specify the background color of your page to the color you want the Horizontal Rules to be.
| Page 1 | Page 2 | Page 3 | Page 4 |
| The Basics | Basics Page 2 | Basics Part 3 | Basics Part 4 | Color Chart | Color Tester | Downloads | Geocities FAQ's | Font Viewer | Graphics Help | Gif Wizard | Helpful Links | Midi Tips and Tricks | Page Builder | Good Page Design Tips | Intro Page |Simple Frames | Tables |