|
Entering text on a
Web page is the easiest part of HTML programming.
All you have to do
to make text appear on a Web page is to actually type the text
in the body of the HTML code.
It should be noted,
however, that text you type in may not necessarily appear exactly
as you expect it to. This is because HTML puts certain restrictions
on text.
Let's try adding some
text to our existing Web page. Modify the code in your "test.htm"
file so it looks like the following:
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
This is some text!
</body>
</html>
Now save it and look
at it in the web browser. It should look something like this:
HTML
Text Restrictions:
HTML does not recognize
Tab stops, nor does it recognize more than one space between characters…therefore,
if you attempt to use standard writing convention of two spaces
after a period, you will not see the two spaces on the page. For
example:
The[tab]quick
brown fox jumped over the lazy dog. The end.
written in HTML code
will show the following on the page:
Thequick
brown fox jumped over the lazy dog. The end.
Certain characters
are reserved for use by the browser software; these are used as
command characters. Entering these characters in as text may cause
the browser to recognize them incorrectly as part of a tag or
a command. The reserved characters are:
- Quote marks ( "
)
- Left and right pointed
brackets ( < and > )
- Ampersand ( &
)
Solving
HTML Text Restrictions:
The most basic way
to solve the problem of spacing and tab stop usage is by use of
a formatting tag pair called <PRE> </PRE>. This stands
for pre-formatted text.
Any text placed within
the <PRE> </PRE> tag pair appears exactly as typed
in, including spaces, tab stops, and special characters.
The downside of the
<PRE> </PRE> method is that all the text inside it
automatically appears in a single-sized, unattractive typeface.
That may be fine for some uses, but for the most part, it’s
not good design. Here's what it looks like:
<PRE>This
is preformatted text. Not exactly the
most exciting thing in the world.</PRE>
looks
like this:
This is preformatted text. Not exactly the most exciting thing in the world.
The more difficult
but better-appearing method of solving the tab stop & spacing
problem is the same solution for the “reserved characters,”
namely what are called “escape characters.”
Escape Characters are
special codes which indicate that a specific character is to be
displayed. These always appear in the following format:
&code;
where “code”
is a series of 2 to 4 letters that indicate the character that
should be displayed.
"
= Quotation Marks ( " )
< = "Less Than" Sign ( < )
> = "Greater Than" Sign ( > )
& = Ampersand ( & )
= Space ( ) [No Break Space]
By replacing each additional
space you want to add with the escape character sequence,
you can simulate Tab stops or extra spacing.
Additional escape character
sequences can be used to show "special characters" like
Copyright marks. For example:
©
= ©
Let's try adding a
couple of these to our developing web page. Open up your text
editor and modify your code so it looks like this:
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
This is some text!
<pre>This is preformatted text</pre>
This web page is ©2001 by Me.
This should be a few spaces over
to the right.
</body>
</html>
Save your work and
look at the page in your browser. It should look something like
this:
Now you may notice
that even though we have a line break (Enter or Return) between
the "This web page is ©2001 by Me" and the "This
should..." in the code, the resulting web page does not go
on to the next line. This is because HTML does not recognize line
breaks in the code of its text. In other words, the following
three sets of code do exactly the same thing:
- <html><head><title>Test</title></head><body>This
is text. This is some more text. This is even more text</body></html>
- <html>
<head>
<title>Test</title>
</head>
<body>
This is text.
This is some more text.
This is even more text
</body>
</html>
- <html><head>
<title>Test</title>
</head><body>
This
is tex
t. This is so
me more text. This is even m
ore text</body></html>
Of the three examples
shown above, the second is the best to use because it's the easiest
to read and diagnose for problems.
We'll be seeing how
to add line breaks to the text soon. Up next, we'll be looking
at how to make your text look better.
|
