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

Special Characters
For the most part, character entities exist so that you can include special characters that aren't part of
the standard ASCII character set. However, there are several exceptions for the few characters that
have special meaning in HTML itself. You must use entities for these characters also.
Suppose that you want to include a line of code that looks something like the following in an HTML file:
<p><code>if x < 0 do print i</code></p>

Doesn't look unusual, does it? Unfortunately, HTML cannot display this line as written. Why? The
problem is with the
< (less-than) character. To an HTML browser, the lessthan character means "this is
the start of a tag." Because the less-than character isn't actually the start of a tag in this context, your
browser might get confused. You'll have the same problem with the greater-than character (
>) because
it means the end of a tag in HTML, and with the ampersand (
&) because it signals the beginning of a
character escape. Written correctly for HTML, the preceding line of code would look like the following
instead:
<p><code>if x &lt; 0 do print i</code></p>

HTML provides named escape codes for each of these characters, and one for the double quotation mark
as well, as shown in
Table 6.1.
Table 6.1.
Escape
Codes for
Characters
Used by
Tags
Entity Result
&lt; <
&gt; >

&amp; &
&quot; "

The double quotation mark escape is the mysterious one. Technically, if you want to include a double
quotation mark in text, you should use the escape sequence and you shouldn't type the quotation mark
character. However, I haven't noticed any browsers having problems displaying the double quotation
mark character when it's typed literally in an HTML file, nor have I seen many HTML files that use it. For
the most part, you're probably safe using plain old quotes (
") in your HTML files rather than the escape
code.


file:///G|/1/0672328860/ch06lev1sec8.html (3 von 3) [19.12.2006 13:48:46]
Text Alignment



Text Alignment
Text alignment is the capability to arrange a block of text, such as a heading or a paragraph, so that it's
aligned against the left margin (left justification, the default), aligned against the right margin (right
justification), or centered. Standard HTML 2.0 has no mechanisms for aligning text; the browser is
responsible for determining the alignment of the text (which means most of the time it's left-justified).
HTML 3.2 introduced attributes for text and element alignment, and these attributes have been
incorporated into all the major browsers. HTML 4.01 still supports alignment attributes, but the
preferred method of controlling text alignment now is with style sheets.
Aligning Individual Elements
To align an individual heading or paragraph, include the align attribute in the opening tag. align has
four values:
left, right, center, or justify. Consider the following examples in the code snippet that
follows.

The following input and output example shows the simple alignment of several headings.
Figure 6.13
shows the results.
Input
<h1 align="center">Northridge Paints, Inc.</h1>
<p align="center">We don't just paint the town red.</p>
<h1 align="left">Serendipity Products</h1>
<h2 align="right"><a href="who.html">Who We Are</a></h2>
<h2 align="right"><a href="products.html">What We Do</a></h2>
<h2 align="right"><a href="contacts.html">How To Reach Us</a></h2>

Output
Figure 6.13. Headings with varying alignments.
[View full size image]
file:///G|/1/0672328860/ch06lev1sec9.html (1 von 3) [19.12.2006 13:48:46]
Text Alignment

Aligning Blocks of Elements
A slightly more flexible method of aligning text elements is to use the <div> (division) tag. <div>
includes several attributes, which are listed in
Appendix B. Among these attributes is align (deprecated
in HTML 4.01), which aligns elements to the left, right, or center just as it does for headings and
paragraphs. Unlike using alignments in individual elements, however,
<div> is used to surround a block
of HTML tags of any kind, and it affects all the tags and text inside the opening and closing tags. Two
advantages of
div over the align attribute follow:
● You need to use <div> only once, rather than including align repeatedly in several different tags.
● <div> can be used to align anything (headings, paragraphs, quotes, images, tables, and so on);
the

align attribute is available on only a limited number of tags.
To align a block of HTML code, surround it with opening and closing
<div> tags, and then include the
align attribute in the opening tag. As in other tags, align can have the value left, right, or center:
<h1 align="left">Serendipity Products</h1>
<div align="right">
<h2><a href="who.html">Who We Are</a></h2>
<h2><a href="products.html">What We Do</a></h2>
<h2><a href="contacts.html">How To Reach Us</a></h2>
</div>

All the HTML between the two <div> tags will be aligned according to the value of the align attribute. If
individual
align attributes appear in headings or paragraphs inside the <div>, those values will override
the global
<div> setting.
Note that
<div> itself isn't a paragraph type; it's just a container. Rather than altering the layout of the
file:///G|/1/0672328860/ch06lev1sec9.html (2 von 3) [19.12.2006 13:48:46]
Text Alignment
text itself, it just enables you to set off a group of text. One function of <div> is to change text
alignment with the
align attribute. It's also often used with CSS to apply styles to a specific block of text
(much like its counterpart,
<span>). In fact, to center elements within the <div> the CSS way (instead of
using the deprecated
align attribute), you can use the text-align property. Valid values for it are left,
right, center, and justify. Figure 6.14 shows how it's used.
Input
<div style="text-align: left">Left aligned text.</div>

<div style="text-align: right">Right aligned text.</div>
<div style="text-align: center">Centered text.</div>
<div style="text-align: justify">This text is justified. I'm adding some extra
text for padding so that you can see exactly how the justification works. As you
can see, the text is expanded so that it is aligned with both the left and right
margins.</div>

Output
Figure 6.14. Various text alignments available using CSS.

You can also include the align attribute in the <p> tag. It's most common to use the justify setting for
the
align attribute with the <p> and <div> tags. When you justify a paragraph, the text is spaced so that
it's flush with both the left and right margins of the page.


file:///G|/1/0672328860/ch06lev1sec9.html (3 von 3) [19.12.2006 13:48:46]
Fonts and Font Sizes



Fonts and Font Sizes
The <font> tag, part of HTML 3.2 but deprecated in HTML 4.01 (again, in favor of style sheets), is used
to control the characteristics of a given set of characters not covered by the character styles. Originally,
<font> was used only to control the font size of the characters it surrounds, but it was then extended to
enable you to change the font itself and the color of those characters.
In this section, I discuss fonts and font sizes. You'll learn about changing the font color in
Lesson 7.
Changing the Font Size
The most common use of the <font> tag is to change the font size of a character, word, phrase, or any

range of text. The
<font> </font> tags enclose the text, and the size attribute indicates the desired
font size. The values of
size are 1 to 7, with 3 being the default size. Consider the following example:
<p>Bored with your plain old font?
<font size="5">Change it.</font></p>

Figure 6.15 shows the typical font sizes for each value of size.
Figure 6.15. Font sizes.
file:///G|/1/0672328860/ch06lev1sec10.html (1 von 4) [19.12.2006 13:48:47]
Fonts and Font Sizes

You can also specify the size in the <font> tag as a relative value by using the + or - characters in the
value for
size. Because the default size is 3, you can change relative font sizes in the range from -3 to
+4, as in the following:
<p>Change the <font size="+2">Font</font> size again.</p>

Here, the word Font (inside the <font> tags) will be two size levels larger than the default font when you
view the example in a browser that supports this feature.
Relative font sizes are actually based on a value that you can define by using the
<basefont> tag,
another tag that's deprecated in the HTML 4.01 specification. The
<basefont> tag also has the required
attribute
size, which can have a value of 1 to 7. All relative font changes in the document after the
<basefont> tag are relative to that value.
It's also important to note that the available font sizes1 through 7are completely arbitrary. They're not
tied in any meaningful way to real point sizes or any other standard metric for font size. Users can
choose any font size they like, and all the sizes available to

<font> are applied relative to that size.
Various operating systems also display fonts in different sizes on the screen, so there's little consistency
from one platform to the other. You can't really count on much consistency when it comes to fonts.
Changing the Font Face
Netscape introduced the <font> tag to HTML with its 1.0 browser. Microsoft's Internet Explorer, playing
the same game, extended the
<font> tag to include the face attribute. The tag was made a part of HTML
3.2, but with HTML 4.01, the preferred method is to use style sheets to specify the fonts you use.
The
face attribute takes as its value a set of font names, surrounded by quotation marks and separated
by commas. When a browser that supports
face interprets a page with face in it, it searches the system
for the given font names one at a time. If it can't find the first one, it tries the second, and then the
third, and so on, until it finds a font that's installed on the system. If the browser can't find any of the
listed fonts, the default font is used instead. So, for example, the following text would be rendered in
Futura. If Futura isn't available, the browser will try Helvetica; it will then fall back on the default if
Helvetica isn't available:
<p><font face="Futura,Helvetica">Sans Serif fonts are fonts without
the small "ticks" on the strokes of the characters. </font></p>

Many fonts have different names on different systems; for example, plain old Times is Times on some
systems, Times Roman on others, and Times New Roman elsewhere.
Because the names of fonts vary from system to system and because the list of installed fonts varies on
a per-user basis, most browsers enable you to specify font families as well as specific font faces in your
lists of fonts. The two families that are usually supported are
serif and sans-serif. Usually you tack one
of these two families onto your font list in case none of the other fonts you specified were there. For
example, if you want to present a headline in a sans serif font, you might specify a font that's available
under the Mac OS, one that's available under the X Window System, and one that's available under
Microsoft Windows, and follow that up with

sans-serif in case the others aren't available:
file:///G|/1/0672328860/ch06lev1sec10.html (2 von 4) [19.12.2006 13:48:47]
Fonts and Font Sizes
<font face="Geneva,Helvetica,Arial,sans-serif"><h1>Today's news</h1></font>

Modifying Fonts Using CSS
Earlier in this lesson, I described a few font-related properties that you can manipulate using CSS. In
fact, you can use CSS as a replacement for all the features offered by the
<font> tag. Earlier today, I
described how the
font-family property can be used to specify that text should be rendered in a font
belonging to a particular general category, such as monospace or serif. You can also use the
font-family
property to specify a specific font, just as you can with the
<font> tag.
Fonts are specified in CSS exactly the way they are in the
<font> tag. You can provide a single font or a
list of fonts, and the browser will search for each of the fonts until it finds one on your system that
appears in the list. You can also include a generic font family in the list of fonts if you like, just as you
can with the
<font> tag. Here are some examples:
<p style="font-family: Verdana, Trebuchet, Arial, sans-serif">
This is sans-serif text.</p>
<p style="font-family: Courier New, monospace">This is
monospace text.</p>
<p style="font-family: Georgia">This text will appear in the
Georgia font, or, if that font is not installed, the browser's
default font.</p>

You can also use CSS to specify font size. Unfortunately, although the approach for specifying the font

face itself is the same whether you're using the
<font> tag or CSS, specifying font sizes under CSS is
much more complicated than it is with the
<font> tag. The tradeoff is that with this complexity comes a
great degree more flexibility in how font sizes can be specified. Let's start with the basics. To change the
font size for some text, the
font-size property is used. The value is a size (relative or absolute) in any
of the units of measure supported by CSS.
The catch here is that several units of measure are available. Perhaps the simplest is the percentage
size, relative to the current font size being used. So, to make the font twice as large as it is currently,
just use
<p>This text is normal sized, and this text is
<span style="font-size: 200%">twice that size</span>.</p>

There are also a number of length units available that you can use to specify the font size absolutely. I'll
discuss the popular ones in
Lesson 9. In the meantime, just know that there are two kinds of length
units: relative units and absolute units. Relative units are sized based on the size of other elements on
the page and based on the dots per inch setting of the user's display. Absolute units are sized based on
some absolute reference. For example, the
pt (point) unit is measured in absolute pixels. To set your
text to be exactly 12 pixels high, the following specification is used:
<p style="font-size: 12px">This text is 12 pixels tall.</p>

Caution
file:///G|/1/0672328860/ch06lev1sec10.html (3 von 4) [19.12.2006 13:48:47]
Fonts and Font Sizes
One thing to watch out for: When you specify units in CSS, you must leave no spaces
between the number of units and unit specification. In other words,
12pt and 100% are valid,

and
12 pt and 100 % aren't.

There's another thing that you can do with the font-size property that's not possible with the <font>
tag: specify line height. Let's say you want to use double-spaced text on your page. Before CSS, the
only way to achieve the effect was to use the
<br> tag inside paragraphs to skip lines, but this approach
is fraught with peril. Depending on how the user has sized her browser window, pages formatted using
<br> in this manner can look truly awful. To set the line height using CSS, you can include it in your font
size specification, like this:
font-size: 100%/200%. In this case, the size of the font is 100%the defaultand
the line height is
200%, twice the standard line height.
DO DON'T
DO specify fonts using CSS rather than the
<font>
tag.
DON'T use too many different fonts on the
same page.
DO list backup fonts when specifying a font family
in order to make it more likely that your users will
have one of the fonts you specify.
DON'T use absolute font sizes with CSS if you
can help it, because some browsers won't let
users alter the text size if you do so.



file:///G|/1/0672328860/ch06lev1sec10.html (4 von 4) [19.12.2006 13:48:47]
<nobr> and <wbr>

<nobr> and <wbr>
The <nobr> </nobr> element is the opposite of the <br> tag. The text inside the <nobr> tags always
remains on one line, even if it would have wrapped to two more lines without the
<nobr>. The <nobr> tag
is used for words or phrases that must be kept together on one line, but be careful. Long unbreakable
lines can look really strange on your page, and if they're longer than the page width, they might extend
beyond the right edge of the screen.
The
<wbr> tag (word break) indicates an appropriate breaking point within a line (typically inside a
<nobr> </nobr> sequence). Unlike <br>, which forces a break, <wbr> is used only where it's appropriate
to do so. If the line will fit on the screen just fine, the
<wbr> is ignored. In XHTML 1.0, add closure to the
tag by using the syntax of
<wbr />.
Neither
<nobr> nor <wbr> is part of HTML 3.2 or HTML 4.01. They're extensions introduced by Netscape,
and are currently supported by both Netscape and Internet Explorer.
Task: Exercise 6.1. Creating a Real HTML Page
Here's your chance to apply what you've learned and create a real web page. No more
disjointed or overly silly examples. The web page you'll create in this section is a real one,
suitable for use in the real world (or the real world of the Web, at least).
Your task for this example is to design and create a home page for a bookstore called The
Bookworm, which specializes in old and rare books.
Planning the Page
In lesson 2, "Preparing to Publish on the Web," I mentioned that planning your web page
before writing it usually makes building and maintaining the elements easier. First, consider
the content you want to include on this page. The following are some ideas for topics for this
page:

● The address and phone number of the bookstore
● A short description of the bookstore and why it's unique
● Recent titles and authors
● Upcoming events
Now come up with some ideas for the content you're going to link to from this page. Each title
in a list of recently acquired books seems like a logical candidate. You also can create links to
more information about each book, its author and publisher, its pricing, and maybe even its
availability.
The Upcoming Events section might suggest a potential series of links, depending on how
much you want to say about each event. If you have only a sentence or two about each one,
describing them on this page might make more sense than linking them to another page. Why
make your readers wait for each new page to load for just a couple of lines of text?
file:///G|/1/0672328860/ch06lev1sec11.html (1 von 12) [19.12.2006 13:48:49]
<nobr> and <wbr>
Other interesting links might arise in the text itself, but for now, starting with the basic link
plan is enough.
Beginning with a Framework
Next, create the framework that all HTML files must include: the document structuring
commands, a title, and some initial headings. Note that the title is descriptive but short; you
can save the longer title for the
<h1> element in the body of the text. The four <h2>
subheadings help you define the four main sections you'll have on your web page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" /><html>
<head>
<title>The Bookworm Bookshop</title>
</head>
<body>
<h1>The Bookworm: A Better Book Store</h1>
<h2>Contents</h2>

<h2>About the Bookworm Bookshop</h2>
<h2>Recent Titles (as of 11-Jan-2003)</h2>
<h2>Upcoming Events</h2>
</body>
</html>

Each of the headings you've placed on your page marks the beginning of a particular section.
You'll create an anchor at each of the topic headings so that you can jump from section to
section with ease. The anchor names are simple:
top for the main heading; contents for the
table of contents; and
about, recent, and upcoming for the three subsections on the page. The
revised code looks like the following with the anchors in place:
Input
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" /><html>
<head>
<title>The Bookworm Bookshop</title>
</head>
<body>
<a name="top"><h1>The Bookworm: A Better Book Store</h1></a>
<a name="contents"><h2>Contents</h2></a>
<a name="about"><h2>About the Bookworm Bookshop</h2></a>
<a name="recent"><h2>Recent Titles (as of 11-Jan-2003)</h2></a>
<a name="upcoming"><h2>Upcoming Events</h2></a>
</body>
</html>

Adding Content
file:///G|/1/0672328860/ch06lev1sec11.html (2 von 12) [19.12.2006 13:48:49]