Unlike using alignments in individual elements, however, 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..
Trang 1For 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 < 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
< <
> >
& &
" "
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
Trang 2Text 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]
Trang 3Aligning 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:
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>
Trang 4Text 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]
Trang 5Fonts 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.
Trang 6Fonts 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]
Trang 7<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:
Trang 8Fonts 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 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]
Trang 9<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:
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
Trang 10<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"
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<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"
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<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]