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" "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] . 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. 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. 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