THÔNG TIN TÀI LIỆU
ptg 64 Chapter 2: The HTML Language <p>My associate thought that the quote originated with the designer, Aldo Gucci. I thought it came from Benjamin Franklin. If you have a direct reference source, please contact me at:</p> <address> Author Dent<br/> hitchhiker@gmail.com </address> </body> </html> Figure 2.12: Styling block quotes and address blocks with CSS e break element, <br/>, is used in the address block in Example 2.12, where an explicit line break is needed in the text content. It is a self-closing ele- ment oen used to clear a oating element by including either a clear or style attribute: <br clear="both"/> <br style="clear:both"/> Example 2.12: CSS styles for paragraphs, block quotes, and address blocks (continued) From the Library of Wow! eBook ptg Block Elements 65 Two line breaks in a row does not mean twice the vertical space on the page. A break element calls for a line break to be present in the content ow. e browser is free to ignore the tag if a line break already exists at that point. Also, when working with many WYSIWYG and online content editors, the soware strips extra line breaks from the HTML or adds its own. It is better to control vertical space using CSS than to try to position things with extra line breaks or empty paragraphs. Example 2.13 shows how to use line breaks in formatting lines of a poem. Example 2.13: Paragraphs and line breaks <!DOCTYPE html> <html> <head> <title>Example 2.13</title> </head> <body> <h1>Twelve</h1> <hr/> <p>The five colors blind the eye.<br/> The five tones deafen the ear.<br/> The five flavors dull the taste.<br/> Racing and hunting madden the mind.<br/> Precious things lead one astray.</p> <p>Therefore the sage is guided by what he feels and not by what he sees.<br/> He lets go of that and chooses this.</p> <hr/> </body> </html> e content is from a translation of Lao-Tsu’s Tao Te Ching by Gai Fu Feng and Jane English. Figure 2.13 shows how it appears in a browser. From the Library of Wow! eBook ptg 66 Chapter 2: The HTML Language Figure 2.13: Using line breaks e preformatted text element provides another means to control the spacing of text content. It is sort of an anti-paragraph. Any text between the starting and ending tags, <pre></pre>, is le essentially as is. Preformatted text retains all line breaks and redundant blanks. Horizontal tabs are recognized and expanded as if there were tab stops every eight characters across the page. is is ideal for text copied from another source, such as an email message, which needs to keep its line breaks and spacing intact. It can be pasted inside a preformatted text element. e text is rendered in a monospace font by default, although this can easily be changed with CSS. Within the preformatted block no other block elements should be used. Inline elements, including anchor and image elements, are appropriate. Exam- ple 2.14 shows a simple example of preformatted text that creates the display shown in Figure 2.14. Example 2.14: Preformatted text in HTML <!DOCTYPE html> <html> <head> <title>Example 2.14</title> </head> <body> <h2>Puzzle</h2> <pre> From the Library of Wow! eBook ptg Block Elements 67 |\ / Here's one way to o o o connect all 9 | X dots using only 4 o o o straight lines: |/ \ o-o-o- </pre> </body> </html> Figure 2.14: A web page with a preformatted element LISTS A list is a block element containing a sequence of list items. HTML provides several types of lists, including ordered lists, unordered lists, denition lists, and menus. Ordered lists have sequenced items, whereas unordered lists have bulleted items. e list item element, which is where the content goes, is also a block element. A list element may have only list items as its direct descendents. Ordered lists use the tags <ol></ol> to enclose and mark the entire list structure. Unordered lists use <ul></ul> tags. List items are enclosed in the tags <li></li>. When rendered by the browser, list items are usually indented from the le margin. Although ordered and unordered lists can contain only list items as their immediate child elements, list item elements can contain any content and markup, including other lists. Example 2.15 shows the HTML markup for nesting an unordered list inside an ordered list. is might be used in an outline or table of contents, for example. From the Library of Wow! eBook ptg 68 Chapter 2: The HTML Language Example 2.15: Nested ordered and unordered lists <!DOCTYPE html> <html> <head> <title>Example 2.15</title> </head> <body style="margin: 36px"> <h1>The Autobiography Of A Biographer</h1> <hr/> <h2>Table of Contents</h2> <! use headings for major sections > <ol> <li>Introduction</li> <li>Early Years <ul> <! use bullets for this level > <li>The Joy of Writing</li> <li>Meeting Interesting People</li> </ul> </li> <li>The Major Biographical Works</li> </ol> </body> </html> Figure 2.15 shows how this example appears in a browser. Figure 2.15: Nested lists From the Library of Wow! eBook ptg Block Elements 69 Ordered lists have two attributes that let you control the appearance of list items. e start attribute can be used to set the number for the rst item of the list to a value other than 1. e type attribute controls how the list is sequenced. type can have any of the following values: type="1" Normal numeric numbering; the default type="A" Uppercase letters: A, B, C, D, … type="a" Lowercase letters: a, b, c, d, … type="I" Uppercase Roman numerals: I, II, III, IV, … type="i" Lowercase Roman numerals: i, ii, iii, iv, … For unordered lists, the type attribute can take the values circle, square, disc, or none to indicate the type of bullet used. e start attribute is ignored in unordered lists. e items of a denition list are enclosed in <dl></dl> tags. Each item of a denition list is a pair of objects called the denition term and denition description. e denition term’s HTML tags are <dt></dt>, and the deni- tion descriptions are <dd></dd>. e default behavior of most browsers is to treat both the denition terms and descriptions as normal paragraphs, with the denition element indented from the le margin. No bullets or list num- bers are added. Denition lists are intended to be used by authors to mark up content that has a topic-comment structure. is is useful for lists of frequently asked questions and answers (FAQs), as well as for glossaries and indexes. A denition list has no restrictions regarding the use of other HTML ele- ments within either the dening term or description part. It is common to nest a heading inside the term part of the element to provide emphasis and spacing. Authors are encouraged to stick to the semantic use of the element to mark up short phrases as topics followed by longer comment terms. Denition lists should not be used just to provide alternating paragraph styles, because this is what CSS classes do. Example 2.16 shows the HTML for a simple denitionlist. Example 2.16: HTML for a definition list <!DOCTYPE html> <html> <head> continues From the Library of Wow! eBook ptg 70 Chapter 2: The HTML Language <title>Example 2.16</title> </head> <body> <dl> <dt><h3>Bucky Balls</h3></dt> <dd>Technically, Buckminster Fullerene, a family of all carbon molecules named after the great designer-architect-engineer, Buckminster Fuller. The most stable member, C60, is a hollow sphere with the same architecture as the geodesic structures Fuller pioneered a half century ago.</dd> <dt><h3>Penrose Tiling</h3></dt> <dd>A method of tiling a plane thought impossible until discovered by Roger Penrose. Combining two differently shaped rhomboids, the tiling has five-fold symmetry, yet <em>the pattern is not periodic!</em>. A mathematical curiosity until it was found in some natural minerals with rather strange properties.</dd> </dl> </body> </html> Figure 2.16 shows how this denition list appears in a typical browser. Figure 2.16: A definition list Example 2.16: HTML for a definition list (continued) From the Library of Wow! eBook ptg Block Elements 71 Without any attributes, the menu list element, <menu></menu>, has the same eect as an unordered list element. It should be used where the content consists of a list of commands, links, or similar navigation or control elements. Using menu elements in place of unordered lists allows for better styling con- trol of page navigational elements. In HTML5, the menu element has an optional type attribute. e default value is list, which preserves the behavior of existing code. However, if the type attribute has a value of context, the element can provide a context menu for a form input eld or other control on the page. In other words, the menu list is hidden until the user Alt-clicks the associated control. Context menus are associated with a control through the use of the contextmenu attribute, whose value should be the ID of the menu list element. For example, in the fol- lowing code snippet Player Name: <input type="text" contextmenu="namemenu"/> <menu type="context" id="namemenu"> <command label="Pick random name" onclick="getRandomName();"/> <command label="Use your real name" onclick="getRealName();"/> </menu> the menu element provides a context menu for the input eld dened above it. e value of the input element’s contextmenu attribute is the value of the menu’s id attribute. e command element, two of which appear inside the menu element just shown, is a new HTML5 element that provides a general- ized means of generating controls that can respond to user actions. In the preceding code, when the user clicks the input element while holding down the Alt or Ctrl key, the browser can display a submenu of the two commands. Clicking either context menu item calls a function (not dened in this exam- ple) to ll in the value of the input eld. e other permissible value of the menu element’s type attribute is toolbar. It is intended to provide web authors and developers with a means of specify- ing a list of items, possibly icons, that HTML5-level browsers can display as a horizontal toolbar. However, until browsers add support for the toolbar and context states of a menu element, web authors should continue to use the CSS float property to create horizontal toolbars and menus. Example 2.17 shows how the same list can be made to display either vertically or horizontally. From the Library of Wow! eBook ptg 72 Chapter 2: The HTML Language Example 2.17: HTML and CSS for vertical and horizontal lists <!DOCTYPE html> <html> <head> <title>Example 2.17</title> <style type="text/css"> body { padding: 36px; } menu li { float: left; list-style: none; margin-right: 8px; border: 2px solid; padding: 4px; } </style> </head> <body> <h2>Vertical and Horizontal lists</h2> <ul> <li>Gold</li> <li>Silver</li> <li>Bronze</li> </ul> <menu> <li>Gold</li> <li>Silver</li> <li>Bronze</li> </menu> </body> </html> In this example, it is not the menu element that creates the horizontal toolbar. e CSS rules in the style element operate on each list item in the menu element, causing it to oat up on the right of the previous list item. e From the Library of Wow! eBook ptg Block Elements 73 CSS statements setting the margin, border, and padding style the list items as separated buttons. e CSS statement list-style: none; is needed to suppress the bullets. Figure 2.17 shows how the preceding HTML code appears in a browser. Figure 2.17: Vertical and horizontal lists DIVISION AND SECTION ELEMENTS Divisions are general-purpose block elements that can contain any other content and markup, including other divisions. Content marked up with divi- sion tags, <div></div>, has no special semantic meaning other than that the separate elements of that content belong together. Divisions are most useful as containers for CSS properties providing a means of grouping headings, para- graphs, and other elements for visual styling with backgrounds and borders. Divisions are also useful as targets of scripting actions. It is common practice to use a division for content that is hidden or shown by a script responding to a user’s mouseover or click actions. In contrast to the division element, the section element, new in HTML5, is intended for marking up major sections of a larger work, such as the chapters of a book. For example, a publisher may choose to publish a work online in two dierent formats: the book as a set of linked pages, one per chapter, and the entire book as a single web page. Assume that the content is provided by a content management system that provides all the content and markup to create a single chapter page. For the all-on-one-page version, each chapter’s From the Library of Wow! eBook . are appropriate. Exam- ple 2.14 shows a simple example of preformatted text that creates the display shown in Figure 2.14. Example 2.14: Preformatted text in HTML <!DOCTYPE html& gt; < ;html& gt;. the HTML for a simple denitionlist. Example 2.16: HTML for a definition list <!DOCTYPE html& gt; < ;html& gt; <head> continues From the Library of Wow! eBook ptg 70 Chapter 2: The HTML. |/ o-o-o- </pre> </body> < /html& gt; Figure 2.14: A web page with a preformatted element LISTS A list is a block element containing a sequence of list items. HTML provides several
Ngày đăng: 06/07/2014, 18:20
Xem thêm: HTML cơ bản - p 9 docx