Tự học HTML và CSS trong 1 giờ - part 18 doc

ptg 146 LESSON 7: Formatting Text with HTML and CSS 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 7.10 shows how it appears in a browser. 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 9, “Adding Images, Color, and Backgrounds.” NOTE Output . FIGURE 7.10 Line breaks. Download from www.wowebook.com ptg 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, whom 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 impos- sible to find out who wrote it or who to contact for more information. Signing each of your web pages 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, 2010 <br /> Copyright Laura Lemay 2010 all rights reserved <br /> Void where prohibited. Keep hands and feet inside the vehicle at all times. </address> Figure 7.11 shows it in a browser. Quotations 147 7 Output . FIGURE 7.11 An address block. 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 Download from www.wowebook.com ptg soliloquy I used in the example for line breaks would have worked better as a <block- quote> 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 7.12 shows how the preceding input example appears in a browser. 148 LESSON 7: Formatting Text with HTML and CSS Output . FIGURE 7.12 A block quotation. 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 CSS, as explained in Lesson 8. NOTE Download from www.wowebook.com ptg Special Characters As you’ve already learned, 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. 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 dis- play 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 charac- ters have a special meaning in HTML documents within certain contexts, so they can be represented with character entities to avoid confusing 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. Special Characters 149 7 HTML validators will complain when they encounter ampersands that are not part of entities, so you always want to encode them using entities on your pages. CAUTION Download from www.wowebook.com ptg 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 set. Every character you can type or for which you can use a named entity 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; Appendix B, “HTML Quick Reference,” includes a table that lists the named entities cur- rently supported by HTML. See that table for specific characters. 150 LESSON 7: Formatting Text with HTML and CSS Character Sets All web pages are rendered using a character set. A character set represents all the letters, numbers, and symbols that can be displayed on the screen. HTML originally supported only the ISO-Latin-1 character set, which supports most accented charac- ters, but not common characters such as bullets, em dashes, and curly quotes. Usually when you see a page that includes nonsensical symbols where punctuation should be, it’s because the browser is using a different character set than the one that was used to create the document. Download from www.wowebook.com ptg Special Characters 151 7 HTML 4.01 took things a huge leap further by adding support for Unicode. 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 docu- ments can support any language, and that one document can contain multiple lan- guages. All modern browsers support Unicode, and can render documents that use all the characters provided by Unicode as long as the necessary fonts are available. Specifying Character Encoding Most characters on a web page are the same in Unicode (UTF-8), Western (ISO-8859-1), and Western (Windows-1252). However, some more exotic characters differ between them. If these characters are included on a web page and the character encoding does not include those characters, they will display incorrectly. For example, if the browser thinks a page is encoded in UTF-8 and the page includes smart (curly) quotation marks that were copied from a Word document, those characters will display as unintelligible symbols. This is one of the reasons to use named entities wherever possible. Browsers will trans- late those entities to the proper characters, regardless of the character set used. You can change the character set the browser is using for a web page. This can prove useful when a page has the wrong encoding, or if you just want to experiment with different character sets. In my browser, you can change character sets using the Character Encoding item in the View menu. The character encoding used for the page will be selected in that menu, and you can change to another one by selecting it. You can also specify the character set used by a page in the page header, using a <meta> tag. Here’s a tag that will specify UTF-8 as the character encoding for that page: <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”> This indicates to the browser that the page is an HTML page encoded using utf-8. The <meta> must be placed somewhere within the <head> tag. The <meta> tag is used to specify or override information that is normally provided by the web server, and indeed, web server software enables you to specify a character encoding for all the pages that it serves. If you need to use a specific character encoding for all the pages on your site, you’ll want to configure your web server to use that encoding, instead of adding a <meta> tag to every page on your site. Download from www.wowebook.com ptg Character Entities for Reserved 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, too. 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 less- than 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 an entity. 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 entities for each of these characters, and one for the double quo- tation mark, too, as shown in Table 7.1. TABLE 7.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. Furthermore, HTML validators will not flag quotation marks that are not encoded using entities. 152 LESSON 7: Formatting Text with HTML and CSS Download from www.wowebook.com ptg Text Alignment Text alignment is the capability to arrange a block of text, such as a heading or a para- graph, so that it’s aligned against the left margin (left justification, the default), aligned against the right margin (right justification), or centered. The old-fashioned approach to aligning elements is to use the align attribute, which was deprecated as of HTML 4.01 and has been removed completely from HTML5. The approach currently in favor is to use CSS, as explained next. Aligning Individual Elements To align an individual heading or paragraph, include the align attribute in the opening tag. The align attribute has four values: left, right, center, and 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 7.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> Text Alignment 153 7 Output . FIGURE 7.13 Headings with varying alignments. Aligning Blocks of Elements A slightly more flexible method of aligning text elements is to use the <div> tag. The <div> tag supports several attributes. Among these attributes is align (deprecated as of HTML 4.01), which aligns elements to the left, right, or center just as it does for Download from www.wowebook.com ptg 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: n You need to use <div> only once, rather than including align repeatedly in several different tags. n You can use <div> 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 text itself, it just enables you to apply your own styles to the text and tags inside. 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 coun- terpart, <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 7.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> 154 LESSON 7: Formatting Text with HTML and CSS Download from www.wowebook.com ptg Output . FIGURE 7.14 Various text alignments avail- able using CSS. Fonts and Font Sizes 155 7 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. Fonts and Font Sizes Earlier in this lesson, I described a few font-related properties that you can manipulate using CSS. In fact, you can use CSS to control all font usage on the page. I also described how the font-family property can be used to specify that text should be ren- dered 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. 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 trade-off 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. Download from www.wowebook.com . right margins.</div> 15 4 LESSON 7: Formatting Text with HTML and CSS Download from www.wowebook.com ptg Output . FIGURE 7 .14 Various text alignments avail- able using CSS. Fonts and Font Sizes 15 5 7 You. the ISO-Latin -1 (ISO 8859 -1 ) character set. Every character you can type or for which you can use a named entity also has a numbered entity. Numbered entities look like the following: & #13 0; &#245; You. B, HTML Quick Reference,” includes a table that lists the named entities cur- rently supported by HTML. See that table for specific characters. 15 0 LESSON 7: Formatting Text with HTML and CSS Character