![]()
This
lesson introduces a number of basic tags that allow an HTML page to be formatted
- much in the same way that word processors format documents. The following
topics are covered:
·
Character
Formatting
·
Paragraphs
·
Paragraph
Alignment
·
Forced Line
Breaks
·
Spaces
·
Horizontal
Rules
Character Formatting:
The Bold <B></B> element specifies that the
enclosed text should be displayed in boldface.
The Underlined <U></U> element specifies that
the enclosed text should be displayed underlined.
The Italic <I></I> element specifies that the
enclosed text should be italicized.
Below
are these HTML tags beside samples of their respective browser displays:
|
HTML
Code |
|
Browser
Display |
|
This
text is <B>bold!</B> |
|
This
text is bold! |
|
This
text is <I>italicized.</I> |
|
This
text is italicized. |
|
This
text is <U>underlined</U>. |
|
This
text is underlined. |
Paragraphs
In HTML you indicate paragraphs with the <P> and
</P> elements. Without these elements the document becomes one long
paragraph. Likewise, browsers ignore any indentations or blank lines in the HTML
code.
Thus the examples below, although coded differently, are
all displayed the same way:
|
HTML
Code |
|
Browser
Display |
|
<P>
This is a very short paragraph to illustrate my point.</P>
<P>And this is the second paragraph. </P> |
|
This
is a very short paragraph to illustrate my point. And
this is the second paragraph. |
|
<P>
Although this |
|
Although
this is written differently with lots of carriage returns it still only
displays the paragraphs when you put in the Paragraph Tag. Like
so. |
NOTE: The </P> closing tag may be omitted. This is
because browsers understand that when they encounter a <P> tag, it means
that the previous paragraph has ended.
To preserve readability when composing HTML files, separate
paragraphs with blank lines. As mentioned above, browsers will ignore blank
spaces inserted into source code.
Paragraph Alignment
Paragraph alignment can be manipulated by including either
the RIGHT, LEFT, or CENTER (note the Americanized spelling) attributes within
the <P> tag as shown below:
|
HTML
Code |
|
Browser
Display |
|
<P
ALIGN=left> This paragraph is left aligned. </P> |
|
This
paragraph is left aligned. |
|
<P
ALIGN=CENTER> This is a centered paragraph. </P> |
|
This is a centered paragraph. |
|
<P
ALIGN=RIGHT> This paragraph is right aligned. </P> |
|
This paragraph is right aligned. |
Forced Line Breaks
The line break tag <BR> can be used to control how
browsers render text. When an HTML document is viewed the text normally does a
word-wrap at the end of a line. If a text break is desired before the end of a
line, use the <BR> tag to force a line break without any extra space
between lines. This element has no closing tag.
|
HTML
Code |
|
Browser
Display |
|
CN
Tower<BR> |
|
CN
Tower |
Using the <P> tag instead of the <BR> tag for
short lines of text, such as the above example, would have resulted in unwanted
additional white space.
Horizontal Rules
The horizontal rule <HR> tag produces a horizontal
line the width of the browser window. Horizontal rules are useful for separating
major sections of a document. The length of a rule can be varied by using the
"WIDTH=" and "SIZE=" attributes.
|
HTML
Code |
|
Browser
Display |
|
Horizontal
Rules rule!<HR SIZE=3 WIDTH=80%> |
|
Horizontal
Rules rule! |
There
are two other attributes that can be used with the <HR> tag. They are:
|
ALIGN=
|
RIGHT,
LEFT, or CENTER |
|
NOSHADE
|
Causes
the rule to appear solid black. |
Try it out!
In the box below, type the following HTML code, then click
the "View" button. The HTML document you have written will be
displayed in your browser. You may wish to change some of the tags and/or
attributes to experiment with some of the different items discussed in this
lesson.
Try typing this:
<HTML>
<HEAD>
<TITLE>HTML</TITLE>
</HEAD>
<BODY BGCOLOR="#800080" TEXT="#FFFFFF">
Learning HTML is <B>so</B> much fun!
<P ALIGN=center>
And it is really <I>easy</I> once you get the hang of it.
</P>
<HR SIZE=3>
</BODY>
</HTML>