Paragraphs and
Line Breaks
In this section,
you'll learn about paragraphs and line
breaks. On a web page, text flows
continuously across the page, regardless
of carriage returns or white spaces in
the HTML code. Thus, paragraph and line
breaks need to be explicitly specified
in HTML.
The <p> tag is
used to indicate the beginning of a new
paragraph. It need not be closed with a
</p> tag.
For Example:
This is the
last line of paragraph 1. <p> This is
the first line of paragraph 2.
Would be rendered as:
This is the last line of paragraph 1.
This is the first
line of paragraph 2.
if you want a
sentence to begin on a new line, unlike
the above example, you could use the
line break or <br> tag.
For Example
The sun
rises in the east. <br> The sun sets in
the west.
Would appear as:
The sun rises in the east.
The sun sets in the west.
An absence of
explicit <p> or <br> tags in the HTML
document will typically cause the page
to the rendered as a single block of
text, regardless of the number of
carriage return or line breaks used when
writing the code. The only exception to
this is text contained within the <pre>
tag, explained later.
The <p> tag may
also be used to align blocks text with
the Align attribute, which takes the
values Left, Center and Right. For
example
<p
align='right'>
This text is aligned to the right
would render
as:
This
text is aligned to the right.
And while we're on
topic of alignment, should here mention
the <center>......</center> tag
combination, which aligns all elements
between the opening and closing tags in
the centre of the page.
<center>
This text is aligned in the center.
</center>
Would rendered as:
This text is aligned in the center
Then there are the
so-called heading tags <h1>, <h2>, <h3>,
<h4>, <h5> and <h6>, all of which
require closing tags. Text between <h1>
is typically displayed as the largest
and boldest, and the remaining headings
display text with progressively
declining intensity. The following lines
of code:
<h1>This
is H1 Text</h1>
<h2>This is H2 Text</h2>
<h3>This is H3 Text</h3>
<h4>This is H4 Text</h4>
<h5>This is H5 Text</h5>
<h6>This is H6 Text</h6>
would be displayed
as:
Heading tags
automatically provide a paragraph break.
They may also be used with the familiar
ALIGN attribute to align towards the
left, center or right. This could be
written as:
<h1
align=center>This heading will appear in
the center</h1>
Moving on, we come
to the <font>......</font> tag, an
important and extremely common tag used
for altering the color, size and
typeface of text rendered in the
browser. The <font> tag takes numerous
attribute. I'll begin with the face
attribute, used to modify the typeface
of enclosed text. The Face attribute may
take either a single font name as the
value, or a list of different font
names, separated by commas, For example:
<font face="Arial,
Comic Sans MS"> This will use the Arial
font or else the Comic Sans font.</font>
When a list of
several font name is provided, text will
be displayed in the first font found on
th user's computer, and if none of the
listed fonts are available, the default
browser font is used. Common fonts on
most PCs include Arial, Courier and
Comic Sans MS.
The size attribute
changes the size of displayed text,
similar to the heading tags but far more
customizable. It may have either an
absolute value or a relative value.
For example:
<font
face="Arial, Comic Sans MS" size=5>This
will use the Arial font, or else the
Comic Sans MS font and increase the
default font size by 5</font>
Would appear as:
An interesting
application of the Size attribute lies
in the use of drop caps, or extra large
capital letters used to signify the
beginning of a chapter, topic or
sentences. This can be accomplished with
the following code:
<font size=+4>0</font>once upon a
time.........
Which would appear as:
Once upon a time......
The color
attribute decides the color in which
text will be displayed Colors in HTML
are represented by RGB (Red-Green-Blue)
hexadecimal codes, preceded by a hash
(#), in the format #ggbb. Thus, the
color red would be represented by the
RGB code #FF0000, green by #00FF00 and
blue by #0000FF. These RGB codes can be
used with all tags that support the
color attribute, so for example,
<font color="#FF0000">This is red</font>
will display the enclosed text in red.
The HTML language
has 16 basic colors black, green,
silver, lime, gray, olive, white,
yellow, maroon, navy, red, blue, purple,
teal, fuchsia and aqua, which may be
called by actual names instead of RGB
codes. So the previous line of code
could be written as:
<font color="red">This is red</font>
will be display the enclosed text in
red.
Netscape users
should note that the Netscape Navigator
browser actually supports 140 names
colors, including the 16 listed above.
Let's continue our
quest:
The <Basefont>
tag, which always appears in the <head>
of the document, sets the default font
size, color and typface used for that
particular document, for example:
<head>
<basefont size=+5 color=blue face="comic
Sans Ms"></head>
This will cause all text on the page to
be displayed in blue Comic Sans MS with
a size increment of 5. Note that the <basefont>
tag is an empty tag, which does not
require to be terminated.
There are numerous other tags that come
in body when formatting text, I'll
illustrate them briefly, and leave you
to experiment with them:
<sub>.....</sub> is used for displaying
text as a subscript, while
<sup>....</sup> is used to format text
as a superscript.
for instance:
Intel<sup>TM</sup>
will display:
<em>....</em>is used to emphasize text,
and is similar to the <i></i> italics
tag. <strong>....</strong> is much more
stronger emphasis, similar to the <b>
boldface tag.
<blockquote>.....</blockquote> is used
to display text that has been quoted
from elsewhere. Typically, it inserts an
emply line above and below the text, and
also indents it from the left and right.
For example:
As Shakespeare memorably said
<blockquote>
To be or not to be<br>
That is the question </blockquote>
would be rendered as:
As Shakespeare memorably said
To be or not to be
That is the question
<pre>......</pre> is used to present
blocks of text precisely as they have
been formatted and aligned within the
opening and closing tags, retaining all
tabs, carriage returns and white spaces.
For example:
<pre>
Ah, What a beautiful day !
I think I shall go for a walk?
Who knows what will happen? The sky
might fall on my head!
</pre>
would be rendered as:
Ah, What a beautiful day !
I think I shall go for a walk?
Who knows what will happen? The sky
might fall on my head!
and, in conclusion, let's incorporate
some of the gags, we have learnt into
basic web page I created last time:
<html>
<head><title>My First HTML Page</title>
</head>
<body bgcolor="Black" Text="white">
<p>HTML Tutor<sup>TM</sup>
<center><font face="courier"
color="red">
You guide to <u>HTML
Programming</u></font>
</center>
<br>
<font color="blue" size="5">The ideal
tutorial to learn HTML</font>
<hr width="75%" align="center" size=2>
</body>
</html>
This brings us to the end of this
section, in the next section get down to
the interesting business of adding
images to your pages, and then stringing
them together with hyperlinks
