Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P18 ppt

Horizontal Rules
Figure 6.7. Examples of rule line thicknesses.
[View full size image]

The width attribute specifies the horizontal width of the rule line. You can specify the exact width of the
rule in pixels. You can also specify the value as a percentage of the browser width (for example, 30% or
50%). If you set the width of a horizontal rule to a percentage, the width of the rule will change to
conform to the window size if the user resizes the browser window.
Figure 6.8 shows the result of the
following code, which displays some sample rule line widths:
Input
<h2>100%</h2>
<hr />
<h2>75%</h2>
<hr width="75%" />
<h2>50%</h2>
<hr width="50%" />
<h2>25%</h2>
<hr width="25%" />
<h2>10%</h2>
<hr width="10%" />

Output
Figure 6.8. Examples of rule line widths.
file:///G|/1/0672328860/ch06lev1sec4.html (3 von 5) [19.12.2006 13:48:44]
Horizontal Rules
[View full size image]

If you specify a width smaller than the actual width of the browser window, you can also specify the
alignment of that rule with the
align attribute, making it flush left (align="left"), flush right

(
align="right"), or centered (align="center"). By default, rule lines are centered.
Finally, in most current browsers, the
noshade attribute shown in the following example causes the
browser to draw the rule line as a plain line without the three-dimensional shading, as shown in
Figure
6.9.
Handling Attributes Without Values
In HTML 4.0 and earlier versions, a value isn't required by the noshade attribute. The
method you use to apply this attribute appears as follows:
<hr align="center" size="4" width="200" noshade>

To comply with XHTML 1.0, however, all attributes require a value. The HTML 4.01
specification requires that Boolean attributes (such as
noshade) have only the name of the
attribute itself as the value. The following example demonstrates how to apply the
noshade
attribute to the
<hr> tag in compliance with the XHTML 1.0 specification.
file:///G|/1/0672328860/ch06lev1sec4.html (4 von 5) [19.12.2006 13:48:44]
Horizontal Rules
<hr align="center" size="4" width="200" noshade="noshade" />
<hr align="center" size="4" width="300" noshade="noshade" />
<hr align="center" size="4" width="400" noshade="noshade" />
<h1 align="center">NorthWestern Video</h1>
<hr align="center" size="4" width="400" noshade="noshade" />
<hr align="center" size="4" width="300" noshade="noshade" />
<hr align="center" size="4" width="200" noshade="noshade" />
<h2 align="center">Presents</h2>

Output
Figure 6.9. Rule lines without shading.
[View full size image]



file:///G|/1/0672328860/ch06lev1sec4.html (5 von 5) [19.12.2006 13:48:44]
Line Break



Line Break
The <br> tag breaks a line of text at the point where it appears. When a web browser encounters a <br>
tag, it restarts the text after the tag at the left margin (whatever the current left margin happens to be
for the current element). You can use
<br> within other elements, such as paragraphs or list items; <br>
won't add extra space above or below the new line or change the font or style of the current entity. All it
does is restart the text at the next line.
Closing Single Tags Properly
Like the <hr> tag, the <br> tag has no closing tag in HTML. To convert this tag to XHTML
and to ensure compatibility with HTML browsers, add a space and forward slash to the end
of the tag and its attributes, as shown in the following example:
And then is heard no more: it is a tale <br />
Told by an idiot, full of sound and fury, <br />
Signifying nothing.</p>


The following example shows a simple paragraph in which each line (except for the last, which ends with
a closing

<p> tag) ends with a <br>:
Input
<p>Tomorrow, and tomorrow, and tomorrow,<br />
Creeps in this petty pace from day to day,<br />
To the last syllable of recorded time;<br />
And all our yesterdays have lighted fools<br />
The way to dusty death. Out, out, brief candle!<br />
Life's but a walking shadow; a poor player,<br />
That struts and frets his hour upon the stage,<br />
And then is heard no more: it is a tale <br />
Told by an idiot, full of sound and fury, <br />
Signifying nothing.</p>

Figure 6.10 shows how it appears in a browser.
Note
clear is an attribute of the <br> tag. It's used with images that have text wrapped
alongside them. You'll learn about this attribute in
Lesson 7, "Adding Images, Color, and
file:///G|/1/0672328860/ch06lev1sec5.html (1 von 2) [19.12.2006 13:48:45]
Line Break
Backgrounds."

Output
Figure 6.10. Line breaks.



file:///G|/1/0672328860/ch06lev1sec5.html (2 von 2) [19.12.2006 13:48:45]
Addresses

Addresses
The address tag <address> is used for signature-like entities on web pages. Address tags usually go at
the bottom of each web page and are used to indicate who wrote the web page, who to contact for more
information, the date, any copyright notices or other warnings, and anything else that seems
appropriate. Addresses often are preceded with a rule line (
<hr>), and the <br> tag can be used to
separate the lines.
Without an address or some other method of signing your web pages, it's close to impossible to find out
who wrote it or who to contact for more information. Signing each of your web pages by using the
<address> tag is an excellent way to make sure that people can get in touch with you. <address> is a
block-level tag that italicizes the text inside it.
The following input shows an address:
Input
<hr />
<address>
Laura Lemay <a href="mailto:"></a><br />
A service of Laura Lemay, Incorporated <br />
last revised January 10, 2003 <br />
Copyright Laura Lemay 2003 all rights reserved <br />
Void where prohibited. Keep hands and feet inside the vehicle at all times.
</address>

Figure 6.11 shows it in a browser.
Output
Figure 6.11. An address block.
[View full size image]

file:///G|/1/0672328860/ch06lev1sec6.html [19.12.2006 13:48:45]
Quotations


Quotations
The <blockquote> tag is used to create an indented block of text within a page. (Unlike the <cite> tag,
which highlights small quotes,
<blockquote> is used for longer quotations that shouldn't be nested inside
other paragraphs.) For example, the Macbeth soliloquy I used in the example for line breaks would have
worked better as a
<blockquote> than as a simple paragraph. Here's an input example:
<blockquote>
"During the whole of a dull, dark, and soundless day in the autumn
of the year, when the clouds hung oppressively low in the heavens,
I had been passing alone, on horseback, through a singularly dreary
tract of country, and at length found myself, as the shades of evening
grew on, within view of the melancholy House of Usher." Edgar Allen Poe
</blockquote>

As with paragraphs, you can split lines in a <blockquote> using the line break tag, <br>. The following
input example shows an example of this use:
Input
<blockquote>
Guns aren't lawful, <br />
nooses give.<br />
gas smells awful.<br />
You might as well live.<br />
Dorothy Parker
</blockquote>

Figure 6.12 shows how the preceding input example appears in a browser.
Output
Figure 6.12. A block quotation.

file:///G|/1/0672328860/ch06lev1sec7.html (1 von 2) [19.12.2006 13:48:45]
Quotations
Note
The <blockquote> tag is often used not to set off quotations within text, but rather to create
margins on both sides of a page in order to make it more readable. This technique works,
but strictly speaking, it's a misuse of the tag. These days, you should control margins with
Cascading Style Sheets, as explained in
Lesson 9, "Creating Layouts with CSS."



file:///G|/1/0672328860/ch06lev1sec7.html (2 von 2) [19.12.2006 13:48:45]
Special Characters


Special Characters
As you learned earlier in the week, HTML files are ASCII text and should contain no formatting or fancy
characters. In fact, the only characters you should put in your HTML files are the characters that are
actually printed on your keyboard. If you have to hold down any key other than Shift, or type an arcane
combination of keys to produce a single character, you can't use that character in your HTML file. This
includes characters you might use every day, such as em dashes and curly quotes (if your word
processor is set up to do automatic curly quotes, you should turn them off when you write your HTML
files).
"But wait a minute," you say. "If I can type a character like a bullet or an accented a on my keyboard
using a special key sequence, and I can include it in an HTML file, and my browser can display it just
fine when I look at that file, what's the problem?"

The problem is that the internal encoding your computer does to produce that character (which enables
it to show up properly in your HTML file and in your browser's display) probably won't translate to other
computers. Someone on the Internet who's reading your HTML file with that funny character in it might
end up with some other character or just plain garbage. Or, depending on how your page is sent over
the Internet, the character might be lost before it ever gets to the computer where the file is being
viewed.
So, what can you do? HTML provides a reasonable solution. It defines a special set of codes, called
character entities, that you can include in your HTML files to represent the characters you want to use.
When interpreted by a browser, these character entities are displayed as the appropriate special
characters for the given platform and font.
Some special characters don't come from the set of extended ASCII characters. For example, quotation
marks and ampersands can be presented on a page using character entities even though they're found
within the standard ASCII character set. These characters have a special meaning in HTML documents
within certain contexts, so they can be represented with character entities in order to avoid confusing
the web browsers. Modern browsers generally don't have a problem with these characters, but it's not a
bad idea to use the entities anyway.
Character Entities for Special Characters
Character entities take one of two forms: named entities and numbered entities.
Named entities begin with an ampersand (
&) and end with a semicolon (;). In between is the name of
the character (or, more likely, a shorthand version of that name, such as
agrave for an a with a grave
accent, or
reg for a registered trademark sign). Unlike other HTML tags, the names are case sensitive,
so you should make sure to type them in exactly. Named entities look something like the following:
&agrave;
&quot;
&laquo;
&copy;

The numbered entities also begin with an ampersand and end with a semicolon, but rather than a name,
they have a pound sign (
#) and a number. The numbers correspond to character positions in the ISO-
Latin-1 (ISO 8859-1) character. Every character you can type or for which you can use a named entity
file:///G|/1/0672328860/ch06lev1sec8.html (1 von 3) [19.12.2006 13:48:46]
Special Characters
also has a numbered entity. Numbered entities look like the following:
&#130;
&#245;

You can use either numbers or named entities in your HTML file by including them in the same place
that the character they represent would go. So, to place the word résumé in your HTML file, you would
use either
r&eacute;sum&eacute;

or
r&#233;sum&#233;

In Appendix B, "HTML 4.01 Quick Reference," I've included a table that lists the named entities currently
supported by HTML. See that table for specific characters.
Character Set: ISO-Latin-1 Versus Unicode
HTML's use of the ISO-Latin-1 character set allows it to display most accented characters
on most platforms, but it has limitations. For example, common characters such as bullets,
em dashes, and curly quotes simply aren't available in the ISO-Latin-1 character set.
Therefore, you can't use these characters at all in your HTML files. (If they're absolutely
necessary, you can create images representing those characters and use them on your
pages. I don't recommend that option, though, because it can interfere with the layout of
your page. Also, it can look odd if the user's browser is set to a nonstandard text size.)
Also, many ISO-Latin-1 characters might be entirely unavailable in some browsers,
depending on whether those characters exist on that platform and in the current font.

HTML 4.01 takes things a huge leap further by proposing that Unicode should be available
as a character set for HTML documents. Unicode is a standard character encoding system
that, although backward-compatible with our familiar ASCII encoding, offers the capability
to encode characters in almost any of the world's languages, including Chinese and
Japanese. This means that documents can be created easily in any language, and they also
can contain multiple languages. Both Internet Explorer and Netscape support Unicode, and
it can render documents in many of the scripts provided by Unicode as long as the
necessary fonts are available.
This is an important step because Unicode is emerging as a new de facto standard for
character encoding. Java uses Unicode as its default character encoding, for example, and
Windows supports Unicode character encoding.

Character Entities for Reserved Characters
file:///G|/1/0672328860/ch06lev1sec8.html (2 von 3) [19.12.2006 13:48:46]