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:lemay@lne.com">lemay@lne.com</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: à " « © 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: ‚ õ 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ésumé or résumé 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] . 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. 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,. <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