Formatting a Block Quotation 37 14. Apply the <pre> tag to the rest of the poem <pre>The gardener does not love to talk, He makes me keep the gravel walk; And when he puts his tools away, He locks the door and takes the key. Well now, and while the summer stays, To profit by these garden days, O how much wiser you would be To play at Indian wars with me!</pre> 15. Save the le, and then refresh the Internet Explorer display to check your work CLEAN UP Close the Notepad and Internet Explorer windows. Formatting a Block Quotation When quoting blocks from other sources, it is customary—both on Web pages and in print—to indent those blocks from the main body of the text The <blockquote> tag does exactly that And don’t feel constrained about using it; you can use <blockquote> for any text that you want to indent, not just quotations HTML5_SBS.indb 37 1/13/11 5:05 PM 38 Chapter 3 The <blockquote> tag has a cite=”URL” attribute, but most browsers don’t do anything with it If you happen to know the URL for the source you are citing, it is good practice to include it in the tag for browsers that do support the attribute, and as an aid to anyone who might be viewing or editing your raw HTML code later Note There is also a <q> tag, which is used for formatting inline quotations. Its only functionality is to place quotation marks around the text that it encloses. Most people don’t use this tag because it is much easier to simply type the quotation marks. In this exercise, you will add a block quotation to a Web page SET UP Open the poem and poemtext les from the previous exercise (or in the practice le folder for this topic) in separate instances of Notepad. These practice les are located in the Documents\Microsoft Press\HTML5 SBS\03Format\ FormattingQuotes folder. 1. In the poemtext le, select only the text below the poem (the heading and the biographical note), and then press Ctrl+C to copy it to the Clipboard 2. In the poem le, click above the </body> tag, and then press Ctrl+V to paste the copied text after the poem 3. Enclose the text Brief Biography from Answers.com: in an <h4> tag <h4>Brief Biography from Answers.com:</h4> HTML5_SBS.indb 38 1/13/11 5:05 PM Formatting a Block Quotation 39 4. Enclose the biographical note in a <p> tag: <p>Stevenson was one of the most-read adventure novelists of the late 1800s. Among his most popular books were Kidnapped (1886), The Strange Case of Dr. Jekyll and Mr. Hyde (1886), and Treasure Island (1883). The latter book features Stevenson’s famous crafty pirate Long John Silver. Steven- son also published a much-loved book of poems, A Child’s Garden of Verse (1885). Having suffered from tuberculosis for much of his life, Stevenson spent many years travelling in search of a climate that would suit his ill- ness. He finally settled in Samoa, where he died in 1894 and is buried.</p> 5. Immediately before the opening <p> tag in the previous example, enter this open- ing <blockquote> tag: <blockquote cite=”http://www.answers.com/topic/robert-louis-stevenson”> Note Don’t remove the <p> tags for the quoted paragraphs; place the <blockquote> tags around the outside of them. 6. At the end of the paragraph, after the </p> tag, enter the closing </blockquote> tag </blockquote> 7. Save the poem le, and then display it in Internet Explorer to check your work HTML5_SBS.indb 39 1/13/11 5:05 PM 40 Chapter 3 CLEAN UP Close the Notepad and Internet Explorer windows. Conguring View Settings in Internet Explorer At the beginning of the chapter, I mentioned that users can customize how certain tags are displayed on their own systems by setting the viewing preferences in their brows- ers To understand what people might be doing with your pages, take a few moments to examine the settings in Internet Explorer 9 The customization capabilities in other browsers, including earlier versions of Internet Explorer, are similar In this exercise, you will view HTML pages in Internet Explorer 9 and specify a variety of settings HTML5_SBS.indb 40 1/13/11 5:05 PM Conguring View Settings in Internet Explorer 41 SET UP Use the poem.htm and index.htm les from the previous exercises, or use those in the practice le folder for this topic. These practice les are located in the Documents\Microsoft Press\HTML5 SBS\03Format\ConguringSettings folder. Open the index le in Internet Explorer. 1. If the menu bar doesn’t appear in Internet Explorer, press Alt to make it visible 2. Choose View | Text Size | Largest All the text on the page increases in size 3. Choose View | Text Size | Smallest All the text on the page decreases in size 4. Choose View | Text Size | Medium The text returns to its default size 5. Choose Tools | Internet Options The Internet Options dialog box appears HTML5_SBS.indb 41 1/13/11 5:05 PM 42 Chapter 3 6. On the General tab, click the Fonts button The Fonts dialog box appears 7. In the Webpage font list, click Arial 8. In the Plain text font list, click Lucida Console (if you have it; otherwise, select another font) Your choices are immediately reected in the sample text below the font lists Note Windows comes with a basic set of fonts, and you get more fonts when you install some applications, such as Microsoft Ofce. Arial comes with Windows, but Lucida Console does not; it comes with Ofce. HTML5_SBS.indb 42 1/13/11 5:05 PM Conguring View Settings in Internet Explorer 43 9. Click OK to close the Fonts dialog box 10. Click OK to close the Internet Options dialog box The page now appears in Arial font Your font choices are now overriding Internet Explorer’s defaults HTML5_SBS.indb 43 1/13/11 5:05 PM 44 Chapter 3 11. Open the poem le in Internet Explorer Notice that the plain text font you chose in step 8 is applied to the poem; the remaining text appears in Arial font 12. Repeat steps 5 through 10, changing the Web page font back to Times New Roman and the plain text font back to Courier New Note You do not need to perform step 12 if you prefer the new font choices, but it is generally a good idea to preview your Web pages in the same font that most people will be using to view them. CLEAN UP Close the Internet Explorer window. HTML5_SBS.indb 44 1/13/11 5:05 PM Key Points 45 Key Points ● Most tags are based on function, not formatting They specify that text has a certain function, such as a heading or quotation, rather than specifying a certain way it should appear ● The exact formatting (the appearance) applied to tagged text is controlled by the default settings of the browser, by individual user customization, or by styles ● Dene headings by using the tags <h1> through <h6> (largest to smallest) ● When one heading immediately follows another as a subheading, you might want to group them with <hgroup> so that screen readers and outlines show them as a single unit ● To make text bold, use the <b> tag; to italicize it, use the <i> tag ● The tag for superscript is <sup>; the tag for subscript is <sub> ● Monospaced text uses a font whose characters all occupy the same amount of hori- zontal space, no matter the specic character; its opposite is proportional text ● By default, most Web text appears in a proportional font To specify a monospaced font, use the <kbd>, <code>, or <samp> tag HTML5 no longer supports the obso- lete <tt> code for monospaced text ● By default, a Web browser strips out any extra spaces and ignores paragraph breaks (except for those created when using the <p> tag) To force the browser to render spaces and line breaks in text, enclose that text in a <pre> tag ● To set off a block quotation, use the <blockquote> tag The tag can take a cite=”URL” attribute, but most browsers do not make use of it ● In Internet Explorer, you can choose a default text size from the View menu This affects only your copy of Internet Explorer, not the page itself ● In Internet Explorer, you can choose a default text font by opening the Internet Options dialog box, clicking Fonts, and specifying the fonts to use for various purposes HTML5_SBS.indb 45 1/13/11 5:05 PM Chapter at a Glance Create bulleted and numbered lists, page 48 Insert horizontal lines, page 57 Specify a background image file, page 62 HTML5_SBS.indb 46 1/13/11 5:05 PM [...]... & & < (less than) < < > (greater than) > &# 62; (nonbreaking space)     ¢ (cent) ¢
62; £ (pound) £ £ ¥ (yen) ¥ ¥ © (copyright) © © ® (registered trademark) ® ® ° (degree) ° ° ± (plus or minus) ± ± † (dagger) † &# 822 4; ™ (trademark) ™ T 82; Note  The nonbreaking space entity   is very popular... the Documents\Microsoft Press \HTML5 SBS\04Lists\ InsertingCharacters folder Open the index file in Notepad and in Internet Explorer Inserting Horizontal Lines   57 1 Add copyright and trademark symbols to the copyright notice at the bottom of the file Copyright © 20 12 The Garden Company™ No material may be reproduced without written permission 2 Save the file, and then refresh... method, you can describe a color using a series of three numbers, from 0 to 25 5 Each number represents the component of red, green, or blue that makes up the color For example, pure red is 25 5, 0 ,0; that is, maximum red (25 5), no green (0), and no blue (0) You can create a large range of colors using these three values For example, 25 5, 153, 0 represents a particular shade of orange—full red, a little... display Web-safe colors use Choosing Background and Foreground Colors   61 only the following numeric values for red, green, and blue: 0, 51, 1 02, 153, 20 4, and 25 5 To see full-color samples of all the web-safe colors, refer to Documents\Microsoft Press\ HTML5 SBS\Reference\websafe.htm Yet another way to express color values is by using extended names These are similar to the basic color names, but... way to express color values in HTML is by using a hexadecimal value The hexadecimal values represent the RGB values converted to the base-16 numbering system For example, the value 25 5 converts to FF, so the RGB value 25 5, 25 5, 0 can also be expressed as the hexadecimal value #FFFF00 The problem with defining colors by using RGB or hexadecimal values is that not every display supports that many colors... will learn more about in Chapter 6 HTML5 does not support the older method of applying colors within the tag In this exercise, you will change the foreground and background colors of a Web page  62   Chapter 4  Chapter 4  SET UP  Use the foliage.htm file in the practice file folder for this topic This practice file is located in the Documents\Microsoft Press \HTML5 SBS\04Lists\ChoosingColors... Table 4-1  Common List Style Type Attribute Values List Style Value Result Bulleted disc Filled circle (the default) circle Unfilled circle square Filled square decimal 1, 2, 3, 4 (the default) Numbered decimal-leading-zero 01, 02, 03, 04 lower-roman i, ii, iii, iv upper-roman I, II, III, IV lower-alpha a, b, c, d upper-alpha A, B, C, D none (nothing) To apply the attribute, place it in the opening... full-color samples of these, refer to Documents\Microsoft Press \HTML5 SBS\ Reference\colors.htm In this exercise, you will add two horizontal rules to a Web page SET UP  Use the index.htm file from the previous exercise, or use the one in the practice file folder for this topic The practice file is located in the Documents\ Microsoft Press \HTML5 SBS\04Lists\InsertingLines folder Open the index file in... value="5"> Note  The start= and value= attributes are both deprecated, but they still work in HTML5 In this exercise, you will create and nest ordered and unordered lists SET UP  Use the foliage.htm file in the practice file folder for this topic This practice file is located in the Documents\Microsoft Press \HTML5 SBS\04Lists\NestingLists folder Open the foliage file in Notepad and in Internet Explorer... the tag: Yellow Necrotic spots White powder Light and dark green areas Holes or chewed areas 2 Save the file, and then refresh the Internet Explorer display to view your work  52   Chapter 4  Chapter 4  3 After the first item in the list, create a nested list, as shown in the following, and then save and check your work Yellow . purposes HTML5_ SBS.indb 45 1/13/11 5:05 PM Chapter at a Glance Create bulleted and numbered lists, page 48 Insert horizontal lines, page 57 Specify a background image file, page 62 HTML5_ SBS.indb. chewed areas</li> </ol> 2. Save the le, and then refresh the Internet Explorer display to view your work HTML5_ SBS.indb 51 1/13/11 5:05 PM 52 Chapter 4 3. After the rst item. &#176; ± (plus or minus) &plusmn; &#177; † (dagger) &dagger; &# 822 4; ™ (trademark) &trade; &#84 82; Note The nonbreaking space entity &nbsp; is very popular for creating