Overview
 |
 |
 |
 |
 |
|
| DEMO Overview |
| ||||||||
|
|
| At A Glance: |
So far I have discussed what the Web is and how it works. I have
also shown you the basics of the Hypertext Markup Language and
what makes up the foundation of every Web page that you will create.
Now it is time to get into the actual design and implementation
of a Web page. Topics in this chapter will cover text fundamentals,
customizing the font, and displaying special characters. Text Fundamentals
Probably one of the best ways to see and learn how to manipulate
text with HTML is to look at some examples and analyze their individual
parts. In this book, I will give examples of Web pages to demonstrate
how the language works. I also suggest that as you browse the
Web and find intriguing design elements, view the source code
of the document and analyze the manner in which the author accomplished
the formatting. Headings
One of the most basic of HTML tags is the heading. Using the
heading tag, text can be resized to six different levels. The
format of the heading is
<H#>Text Here</H#>
where # represents the level of the heading. A level 1 heading
is the largest and the size decreases down to level 6. Let's
look at an example. <HTML> <HEAD><TITLE> Example of Headings </TITLE></HEAD> <BODY> <h1>HEADINGS</h1> Some text in reference to headings <h2>Heading 2</h2> In regards to heading 2. <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>And heading 6</h6> </BODY> </HTML> Example 3.1 Headings are used to change the size of text on a Web page. There are six levels from 1, largest, to 6, smallest. First, notice that the Web page basics surround all heading levels and text. Example 3.1 shows the hierarchy of heading levels from 1 to 6. Beneath heading 1 is some text in plain type. Notice in Figure 3.1 that when a heading is used, the browser automatically puts white space above and below to separate the heading from the rest of the text.
HEADINGSSome text in reference to headingsHeading 2In regards to heading 2.Heading 3Heading 4Heading 5And heading 6Figure 3.1 Headings are displayed with space above and below them. Generally, the level 1 heading is used for page titles. After that, larger headings should be used to summarize the main topics. Try to limit the number of different headings used in your documents. Also, because the heading tag does put breaks around itself, you should not use it to highlight words in the middle of a sentence.
If you decide to use the heading tag frequently in your Web pages,
you may find it necessary to change the alignment of the text.
Every customization in a tag will have an attribute identifier.
To align text with the heading tag you will use the ALIGN
attribute. The heading tag has the following options for alignment:
For example, if you would like to center the title of your page,
you would use the heading tag with the ALIGN attribute set to
center:
<H1 ALIGN="center">Page Title</H1>
All attributes within tags follow the same pattern. It is a
general rule that you always put quotation marks around the attribute
argument, in this case "center." As we progress throughout the
book you will find that many of the attributes' names are closely
related to their function. Text Styles
It is sometimes necessary to highlight or emphasize something
that you are talking about on your Web page. To make text stand
out and still flow with the rest of your document, HTML contains
tags to change the style of the text. These tags come in two
forms: physical and logical. Physical Styles Physical styles tell the browser how to display text on the screen. In the early days of the Web, the drawback of physical styles was that browsers might display the text in different fashions. Since many standards have been reached, this is not as much of a problem today, but you should keep it in mind when designing your Web page.
The following physical styles are supported by the majority of
browsers:
NOTE: Some older browsers will only accept one style tag
at a time. This means that you can create bold text or italicized
text but not bold, italicized text. I will continually remind
you to be aware of the wide range of browsers on the market.
Also, try not to use too many different styles on the same page.
This can quickly clutter your page and confuse the reader. More
on style will be addressed later in the book. Logical Styles
Logical Styles are different from physical styles in that
they are generally displayed the same regardless of what browser
is used. Some of the logical tags give the same results as an
equivalent physical tag. While logical tags are found on the
Web less often than their physical tag counterparts, you may find
them useful when developing a Web page which is a reflection of
a manual or scholarly journal. You will also notice that many
of the logical styles will display in the same fashion.
These styles may appear slightly different in a Web browser due
to differences in word processor character manipulation and that
of a Web browser. Regardless, you can see the differences in
the logical styles. Preformatted Text
If you would like to transfer something that you have written
to the Web, but do not want, or trust, the browser to format the
selection as you foresee it, then you can tell the browser that
it is preformatted text. Examples of times when this might be
needed are with poems, tables, or ASCII art (pictures drawn using
only keyboard characters.) For instance, with the <PRE>
tag the code: <PRE> As I stumbled through the flow, Wanting only to really know, To know the way which is said, To be the way of the Web.</PRE>
would display the poem without changing the format:
As I stumbled through the flow, Wanting only to really know, To know the way which is said, To be the way of the Web.
The <PRE> tag is very useful in such situations as displaying
poems. However, it should be used sparingly for several reasons.
Many other tags will not operate inside the <PRE> sections
while others may produce unpredictable results. Also, different
browsers may have different tab settings and could render your
text in an unforeseen fashion. If you do decide to use the <PRE>
tag, be aware that the browser will display white space and carriage
returns so you should not include HTML paragraph or line breaks.
Blockquotes
The <BLOCKQUOTE> tag is used as you would use a block
quote in your writing. If you quote a large amount of someone
else's work, then you would enclose it in the <BLOCKQUOTE>
tag. As seen in Figure 3.2, the block quote of Example 3.2 is
displayed in the browser as an indented block of text. As I browse the web I am sometimes overwhelmed by the number of pages. I can relate to the beginning of Edgar Allan Poe's <I>The Tell-Tale Heart</I>: <BLOCKQUOTE> True! - nervous - very, very dreadfully nervous I had been and am! but why will you say that I am mad? The disease had sharpened my senses - not destroyed - not dulled them. Above all was the sense of hearing acute. I heard all things in the heaven and in the earth. I heard many things in hell. How, then, am I mad? Hearken! and observe how healthily - how calmly I can tell you the whole story. </BLOCKQUOTE> Example 3.2 Blockquotes are used to display large quotes.
As I browse the web I am sometimes overwhelmed by the number of pages. I can relate to the beginning of Edgar Allan Poe's The Tell-Tale Heart: True! - nervous - very, very dreadfully nervous I had been and am! but why will you say that I am mad? The disease had sharpened my senses - not destroyed - not dulled them. Above all was the sense of hearing acute. I heard all things in the heaven and in the earth. I heard many things in hell. How, then, am I mad? Hearken! and observe how healthily - how calmly I can tell you the whole story. Figure 3.2 Blockquotes will display as indented paragraphs.
|