Thông tin tài liệu
ptg 54 Chapter 2: The HTML Language or height that is a percentage of what is available to the element. Example 2.8 shows a oated table with a width attribute. e tr element denes a table row, and the th and td elements dene table cells. Tables are discussed in more detail later in this chapter. Example 2.8: An HTML table with width and float attributes <!DOCTYPE html> <html> <head> <title>Example 2.8</title> <style type="text/css"> body { padding: 30px; line-height: 1.5em; } td { text-align: right; padding: 5px; } th { text-align: left; padding: 5px; } </style> </head> <body> <h2 align="center">Final Exam Results</h2> <table width="33%" align="right" hspace="12" border="1"> <tr><th></th><th>Points</th><th>Grade</th></tr> <tr><th>Larry</th><td>86</td><td>B+</td></tr> <tr><th>Heidi</th><td>91</td><td>A</td></tr> </table> <p>The final exam required students to create an HTML page containing a floating table. Larry lost a number of points because he used <em>align</em> and <em>hspace</em> attributes in the table statement instead of using the CSS <em>float</em> and <em>padding</em> properties in his entry entitled, <cite>Example 2.8</cite>.</p> </body> </html> Note the use of the cite element to mark up a title. Figure 2.8 shows how this HTML appears in a browser. From the Library of Wow! eBook ptg HTML Attributes 55 Figure 2.8: HTML page with a floating table element EVENT HANDLERS Another class of HTML global attributes is used to specify what actions browsers should take when the user interacts with an element. ese event handlers take as their values one or more JavaScript statements. Typically, the value consists of a call to a JavaScript function dened in the document’s head or in an external le, and this function does all the work. For example, if you had an input form on a web page that requested the user’s email address, you might add the onchange attribute to call a function that checks that the input represents a valid email address. e HTML element would look like this: <input type="text" onchange="check_email_address(this.value);"/> In the late twentieth century, web developers built dynamic web pages using these event handlers and a lot of JavaScript code. ese techniques were referred to as dynamic HTML or dhtml, although that term had no ocial standing. Modern web development practice discourages the addition of event handler attributes to HTML elements and encourages the practice of writing functions to handle events on DOM objects separately from the HTML source. Because the use of these attributes is discouraged, they are listed without any description, but the explanation of each is generally obvious from the attribute name. Although these attributes can be used in any HTML element, they do not make sense with every element. Here are the more commonly used attributes: From the Library of Wow! eBook ptg 56 Chapter 2: The HTML Language onabort onblur oncanplay oncanplaythrough onchange onclick oncontextmenu ondblclick ondrag ondragend ondragenter ondragleave ondragover ondragstart ondrop ondurationchange onemptied onended onerror onfocus onformchange onforminput oninput oninvalid onkeydown onkeypress onkeyup onload onloadeddata onloadedmetadata onloadstart onmousedown onmousemove onmouseout onmouseover onmouseup onmousewheel onpause onplay onplaying onprogress onratechange onreadystatechange onscroll onseeked onseeking onselect onshow onstalled onsubmit onsuspend ontimeupdate onvolumechange onwaiting In HTML5, a web developer can create his own attributes to add to any HTML element as long as the attribute name begins with the characters "data-" and has at least one more letter or number following the dash. As many data attributes as needed can be added to an HTML element, provided that there are no duplicate attribute names in any single element. e value of a data attribute follows the same restrictions as other attributes: Charac- ter entities are needed for special symbols, but other markup is not parsed as HTML. For example, the following HTML element (a list item) has extra data attributes that can be used by a client-side script to sort a listing or highlight specic items in response to a user action. <li class="book-title" data-borrower="Vonnegut, K." data-status="overdue">Venus On The Half-Shell</li> From the Library of Wow! eBook ptg Block Elements 57 e purpose of data attributes is to provide extra information about the contents of an element that can be accessed by client-side scripts. When the HTML source code is itself generated by scripts running on a server, it becomes a powerful tool, because it allows information in database records to be directly incorporated into HTML elements. is was possible in earlier ver- sions of HTML because any attribute attached to an HTML element became a property of the DOM object representing that element. However, in HTML5, this technique is formalized so that pages can have HTML elements contain- ing data attributes and still pass syntax checkers and validation services. Block Elements A web page is given structure by the block elements that comprise it. Headings and paragraphs in a document are block elements, as is the document body itself. ere are many dierent kinds of block elements: block quotes, lists, and tables, to name a few. Some block elements can be nested inside other block elements, and some cannot be. Except in very special cases, a block element should never be inside an inline element. Every block element occupies a rectangular area on the web page, sepa- rated from the content before and aer by some amount of white space. e default behavior for browsers is to give each block element as much width as is available. Block elements that are rst-level children of the document’s body element take up the full width of the browser’s window minus any padding assigned to the body element. Block elements that are children of other block elements are as wide as allowed by the width of their parent element. A big change in HTML5 is the addition of several block elements for mark- ing up new types of content. HTML3 introduced the division element, <div></div>, as an all-purpose container for organizing and referencing col- lections of other document elements. e HTML5 specication has new block elements for specic types of divisions, such as the section, header, and footer elements. ese are discussed later. HEAdingS Major segments of a document are introduced and separated by headings. HTML supports six levels of headings, h1 through h6. is is sucient for most web pages, because most of the structure of a hypertext work is in the links that bind the pages into a website. Additional structure can be generated by using list and table elements. All heading tags are containers and require a corresponding end tag. From the Library of Wow! eBook ptg 58 Chapter 2: The HTML Language e level-one heading h1 is the highest or most signicant level heading, and h6 is the least signicant. It is customary to put a level 1 heading as the rst element in the body of the home page to serve as the page’s internal title. Headings should be used in their natural hierarchical order, as in an outline. However, it is perfectly all right to skip heading levels, following an h1 element with an h3, for example. ere another good reason why every web page should have one and only one level-one heading somewhere near the top of the page: It is the most important element that search robots look for aer the window title. Try not to break this rule. Even though it might seem that having a level-one heading would hurt your page design, you can still have one at the top of the page by making it invisible to humans with the CSS display property: <h1 style="display: none;"> </h1> Example 2.9 is an HTML page illustrating the six dierent heading levels. Figure 2.9 shows how this looks in a browser. Example 2.9: HTML heading elements <!DOCTYPE html> <html> <head> <title>Example 2.9</title> <style type="text/css"> body { text-align: center; } </style> </head> <body> <h1>Level 1 Heading</h1> <h2>Level 2 Heading</h2> <h3>Level 3 Heading</h3> <h4>Level 4 Heading</h4> <h5>Level 5 Heading</h5> <h6>Level 6 Heading</h6> </body> <html> From the Library of Wow! eBook ptg Block Elements 59 Figure 2.9: HTML heading elements Figure 2.9 is essentially what a search robot sees when it looks at a page. Speaking of robots, there is an HTML element that groups headings for their benet. e heading group element, <hgroup></hgroup>, can contain only headings and other heading groups. It implies that those contained head- ings are related to each other. A browser may or may not visually indicate the group. However, using CSS, you can make the headings and heading groups look how you want them to look. is is illustrated in Figure 2.10. It uses the same body content as Example 2.9 but adds the selectors and rules to the style element in the document’s head that are shown in Example 2.10. Figure 2.10: HTML headings with CSS styles From the Library of Wow! eBook ptg 60 Chapter 2: The HTML Language Example 2.10: CSS statements for heading styles <!DOCTYPE html> <html> <head> <title>Example 2.10</title> <style type="text/css"> body { text-align: center; } h1 { font-family: sans-serif; } h2 { border: 2px solid black; padding: 10px; } h3 { font: bold italic 18pt Comic Sans MS; } h4 { color: white; background-color: darkgrey } h5 { visibility: hidden; } h6 { letter-spacing: 1.5em; } </style> </head> <body> <h1>Level 1 Heading</h1> <h2>Level 2 Heading</h2> <h3>Level 3 Heading</h3> <h4>Level 4 Heading</h4> <h5>Level 5 Heading</h5> <h6>Level 6 Heading</h6> </body> <html> Notice that the space formerly occupied by the level-ve heading is pres- ent in Figure 2.10, but the text is invisible. is is dierent from giving the element’s display property the value none, which eectively sets the height, width, and element margins to 0. Although Example 2.10 has only one heading of each level, the styles used would apply to all headings if there were more on the page. Every level-two heading on the page, for example, would have a black border. If a unique style is needed for one and only one heading, either an id attribute should be added to that heading, or a style attribute should be used to set the element’s CSS properties directly within the start tag. For example, thiscode: <h1 style="font-family: sans-serif;">Level 1 Heading</h1> From the Library of Wow! eBook ptg Block Elements 61 sets that level-one heading’s font the same way as putting the rule in the style element in the document’s head. However, CSS style information in an ele- ment’s start tag overrides previously set rules for the same properties. is is useful if you do not have access to the document’s head in your editor, such as when editing a blog post. Chapter 3, “Elements of Style,” goes into more detail on the syntax and use of CSS. PAR AGR APHS, BLOCK QUOTES, AND ADDRESS BLOCKS e paragraph is the most commonly used HTML element for representing content. e block quote and address block are similar. e blockquote ele- ment is used to mark up a quotation taken from another source. Block quotes are usually displayed by the browser with wider le and right margins. e address element is intended for designating the contact information associated with a document and is oen rendered in an italic font by browsers. Address and paragraph elements are not allowed to contain other block elements. In HTML2, the paragraph element could be used with or without an end tag. In HTML3 and later versions, the paragraph element is a container, and it is an error to omit the end tag. Web authors should avoid inserting empty paragraph elements or break tags into a page just to achieve vertical spacing of the content elements. If the page design requires more or less space before a paragraph, the top margin of that paragraph should be increased or decreased. A blockquote element can contain any other block and inline elements, but these elements should be related if they are part of the same block quote. A search engine robot nding a blockquote element can reasonably conclude that the surrounding content might be related to the quotation and contain links to sources. It is improper to use a block quote as an alternative paragraph style, such as in a list of questions and answers. Likewise, an address element on any web page should be used only for the contact information of the page’s author or the organization responsible for the page’s content. Although it is a common practice, the address element should not be used to mark up postal addresses in a business directory. Example 2.11 demonstrates the correct use of these three block elements. Figure 2.11 shows how this HTML appears in most browsers. Example 2.11: Paragraphs, block quotes, and address blocks in HTML <!DOCTYPE html> <html> <head> continues From the Library of Wow! eBook ptg 62 Chapter 2: The HTML Language <title>Example 2.11</title> </head> <body> <p>I was recently reminded of one my favorite quotes when it appeared on the back of a business card given to me at a meeting:</p> <blockquote>The bitterness of poor quality remains long after the sweetness of a low price is forgotten.</blockquote> <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.11: Paragraphs, block quotes, and address blocks Web designers who design page templates for blogs and instant-website gen- erators oen style block quotes distinctively by changing the typography and adding backgrounds and borders. Example 2.12 adds a few CSS statements in a Example 2.11: Paragraphs, block quotes, and address blocks in HTML (continued) From the Library of Wow! eBook ptg Block Elements 63 style element to the code of Example 2.11, giving the page an entirely dierent feel, as shown in Figure 2.12. Example 2.12: CSS styles for paragraphs, block quotes, and address blocks <!DOCTYPE html> <html> <head> <title>Example 2.12</title> <style type="text/css"> body { font-family: sans-serif; padding: 24px; } p { text-align: justify; line-height: 1.5em; } blockquote { font: 15pt cursive; background-color: #cccccc; padding: .5em; border: 2px dotted; } address { margin-left: 50%; font-family: courier,monospace; } </style> </head> <body> <p>I was recently reminded of one my favorite quotes when it appeared on the back of a business card given to me at a meeting:</p> <blockquote>The bitterness of poor quality remains long after the sweetness of a low price is forgotten.</blockquote> continues From the Library of Wow! eBook . later in this chapter. Example 2 .8: An HTML table with width and float attributes <!DOCTYPE html& gt; < ;html& gt; <head> <title>Example 2 .8& lt;/title> <style type="text/css"> . { font-family: sans-serif; padding: 24px; } p { text-align: justify; line-height: 1.5em; } blockquote { font: 15pt cursive; background-color: #cccccc; padding: .5em; border: 2px dotted; . eBook ptg 60 Chapter 2: The HTML Language Example 2.10: CSS statements for heading styles <!DOCTYPE html& gt; < ;html& gt; <head> <title>Example 2.10</title> <style type="text/css">
Ngày đăng: 06/07/2014, 18:20
Xem thêm: HTML cơ bản - p 8 doc
