250 html and web design secrets phần 5 ppt

P1: FCH WY021-07 WY021-Holzshlag-v2 May 25, 2004 16:40 ࡗ 156 Part II: HTML, XHTML, CSS and Accessibility ࡗ ࡗࡗ note For an interesting and very detailed article on empty elements, their history, and their quirks, see “Empty Elements in SGML, HTML, XML, and XHTML” by Jukka Korpela, at www.cs.tut.fi/∼jkorpela/html/empty.html. ࡗࡗࡗ Secret #113: Managing Minimized Attributes A minimized attribute is one that is represented only by the attribute name. There’s no associated value. In HTML, familiar examples would include attributes such as the following: ࡗ noresize ࡗ noshade ࡗ nohref ࡗ nowrap ࡗ multiple ࡗ checked ࡗ ismap ࡗ compact Here’s a sample: <hr noshade> In XHTML, the minimization of attributes is disallowed. The attribute name is given a value of itself: <input type="checkbox" checked="checked" /> So, in all cases where you find a single-word attribute, you must give it a value of itself for the attribute to be valid in XHTML. note During classes I often ask students to guess what the attribute value of a minimized attribute becomes in XHTML. Many guess that the value is “true”, which makes absolute sense. The selected attribute is considered a Boolean attribute, and you can read more about their unique history and use at www.w3.org/TR/REC-html40/intro/sgmltut.html. ࡗࡗࡗ Secret #114: Entities and XHTML Chapter 6 examined character entities and their role in HTML. Used for the display of special characters in both HTML and XHTML, entities are also used in XHTML to escape certain characters in scripts and URLs. The best example of this is the ampersand (&), which appears in JavaScript and also in some URLs. P1: FCH WY021-07 WY021-Holzshlag-v2 May 25, 2004 16:40 ࡗ ࡗࡗࡗ Chapter 7: Moving Ahead with XHTML 157 Because the ampersand is considered reserved for use, the more rigid rules of XHTML expect you to escape all inline instances of ampersands not related to a special character. Take the following URL, for example: http://www.molly.com/books/250.cgi?chapter=1&section=2 The ampersand must be escaped using the character entity: http://www.molly.com/books/250.cgi?chapter=1&section=2 The same is true in any inline or embedded JavaScript. Consider the following snippet from a routing script: if (browser == "Microsoft Internet Explorer" && navigator.appVersion==version) If this JavaScript appears as an embedded script, the ampersands must be escaped: if (browser == "Microsoft Internet Explorer" && navigator.appVersion==version) note Escaping characters in URLs or scripts will not affect the functions related to either. You do not need to do this for any external script. For more information on entities in XHTML and other helpful XHTML workarounds, see www.simonstl.com/tips/archive/workarounds.html. ࡗࡗࡗ Secret #115: alt Attribute Required Unlike HTML, where the alt attribute is a recommended inclusion for accessibility purposes, you can’t leave it out in XHTML. Incorrect: <img src="molly.jpg" width="100" height="200" /> Correct: <img src="molly.jpg" width="100" height="200" alt="photograph of molly" /> There are no exceptions to this rule, even if you leave the value empty: <img src="spacer.gif" width="25" height="1" alt="" /> However, since you can use CSS for effective spacing, spacer graphics are unnec- essary anyway. note Interestingly, while width and height might seem presentational, they are available for use in strict DTDs and XHTML 1.1, because having width and height attributes present will assist with better graphic rendering in most browsers. P1: FCH WY021-07 WY021-Holzshlag-v2 May 25, 2004 16:40 ࡗ 158 Part II: HTML, XHTML, CSS and Accessibility ࡗ ࡗࡗ ࡗࡗࡗ Secret #116: Understand Well-Formedness Well-formedness is simply the proper nesting of elements. It is important in HTML, although it’s not brought up too often as a discussion point until you begin to study XHTML in earnest. What happens if you want to have something being both emphasized and strong at the same time? Well, you can apply both elements to text. The important issue is that the elements nest properly. Correct: Welcome to my super duper web site! Also correct: Welcome to my super duper web site! Incorrect: Welcome to my super duper web site! Also incorrect: Welcome to my super duper web site! A great way to help visualize this is to draw an arc from an opening tag to its companion closing tag. If the arcs intersect, your elements are improperly nested (refer to Figure 7-3). The same is true for the vertical, too (see Figure 7-4). Figure 7-3: Improper nesting of elements along the horizontal axis. Figure 7-4: Improper nesting of elements along the vertical axis. P1: FCH WY021-07 WY021-Holzshlag-v2 May 25, 2004 16:40 ࡗ ࡗࡗࡗ Chapter 7: Moving Ahead with XHTML 159 ࡗࡗࡗ Secret #117: Proper Nesting of Lists One thing that markup authors moving to XHTML stumble over early on is how to nest lists properly in XHTML. In HTML, you could leave off the closing </li> tag, and nest lists like this: <ul> <li>Pens <ul> <li>Felt tip <li>Highlighter <li>Fountain </ul> <li>Envelope <li>Stamp </ul> The results (shown in Figure 7-5) are a nested, unordered list. Figure 7-5: A nested unordered list created using HTML. Logic says if you’re closing all your nonempty elements in XHTML, you’d do this: <ul> <li>Pens</li> <ul> <li>Felt tip</li> P1: FCH WY021-07 WY021-Holzshlag-v2 May 25, 2004 16:40 ࡗ 160 Part II: HTML, XHTML, CSS and Accessibility ࡗ ࡗࡗ <li>Highlighter</li> <li>Fountain</li> </ul> <li>Envelope</li> <li>Stamp</li> </ul> But proper nesting rules in XHTML place the nested list inside a list item as part of that item, not as a separate part of that list. As a result, the correct listing procedure in XHTML looks like this: <ul> <li>Pens <ul> <li>Felt tip</li> <li>Highlighter</li> <li>Fountain</li> </ul> </li> <li>Envelope</li> <li>Stamp</li> </ul> Of course, ordered lists (see Figure 7-6 for an example) follow the same practice in XHTML, with nested ordering placed within the list item: Figure 7-6: A nested ordered list created using XHTML. P1: FCH WY021-07 WY021-Holzshlag-v2 May 25, 2004 16:40 ࡗ ࡗࡗࡗ Chapter 7: Moving Ahead with XHTML 161 <ol> <li>Go to store <ol> <li>Go to flower section</li> <li>Go to produce section</li> <li>Go to liquor section</li> </ol> </li> <li>Go to bank</li> <li>Go to post office</li> </ol> You can also mix and match lists, as long as they are properly nested: <ol> <li>Go to store <ul> <li>flowers</li> <li>salad fixings</li> <li>white wine</li> </ul> </li> <li>Go to bank</li> <li>Go to post office</li> </ol> Figure 7-7 shows the results. Figure 7-7: A nested unordered list within a numbered list created using XHTML. P1: FCH WY021-07 WY021-Holzshlag-v2 May 25, 2004 16:40 ࡗ 162 Part II: HTML, XHTML, CSS and Accessibility ࡗ ࡗࡗ note CSS provides some terrific ways to style list bullets and numeric values. See Chapter 8, “Style Tips for Type and Design” to learn more. ࡗࡗࡗ Secret #118: DOCTYPE Switching As you’ve come to learn in these markup chapters, DOCTYPEs are required com- ponents of a valid HTML or XHTML document. The DOCTYPE declaration has historically been passive, with no actual function until the document is passed through a validator and uses the declaration to determine which DTD to validate the document against. Historically, many Web authors have not validated their documents, much less au- thored to standards, although, fortunately, that is a changing trend. Understanding the way the languages with which we work and how the browsers respond to them is surely the road to long-term success and survival as a Web designer. So knowing this stuff is really important. Another equally important but lesser known reason that the DOCTYPE declaration is so significant has to do with a switching mechanism that’s been added to all contemporary browsers to allow those browsers to identify documents that appear to be standardized. This allows them to render the documents more quickly and accurately. This becomes very important when you begin using CSS, especially for layout. Studying the problem of CSS implementation in browsers, Tantek Ç elik, a pro- grammer for Microsoft who has been involved with browser development and standards for some years now, recognized that no browser could afford to move ahead with more compliant and consistent technologies without allowing for rea- sonable backward compatibility. cross ref See Chapter 9, “Laying Out Pages with CSS” for more details about how DOCTYPE switching influences display. The solution Ç elik devised was to split the browser’s capabilities into two modes: Quirks mode and Standards (or “compliance’’)mode. Quirks mode is the implementation of rendering engines in use that manage nonstandard markup (essen- tially the same forgiving rendering that we’ve relied on for years). It is forgiving of our shortcomings as well as those of our tools, but can be incredibly inconsistent as a result. Compliance mode, on the other hand, is a streamlined standards-compliant rendering engine, allowing for faster, more accurate, and more controlled rendering of your designs. Web browsers with DOCTYPE switching technology rely on specifically formed DOCTYPE declarations for proper switching to occur. DOCTYPE declarations can be written in any number of ways. The default DOC- TYPEs in many visual tools and HTML editors are problematic for the reasons I mentioned earlier in this chapter. There’s nothing wrong with those DOCTYPEs in any technical sense, but there is something wrong with them in regards to DOCTYPE switching technology. You must use some very specific DOCTYPEs to P1: FCH WY021-07 WY021-Holzshlag-v2 May 25, 2004 16:40 ࡗ ࡗࡗࡗ Chapter 7: Moving Ahead with XHTML 163 kick the browser in question into Standards mode. All of the DOCTYPEs in this chapter will do the trick. Here’s how the behavior breaks down: ࡗ Documents with older or Transitional DOCTYPEs, poorly formed DOCTYPES, or no DOCTYPE at all are displayed using Quirks mode, and will be interpreted with the legacy bugs and behaviors of version 4 browsers. ࡗ Documents with properly formed HTML Strict or XHTML DOCTYPEs are displayed using Compliance mode. This mode follows W3C specifications for HTML, CSS, and other layout languages as closely as possible. Of course, any browser (including Netscape 4) that came along before DOCTYPE switching was conceived will act just as Quirks mode does. In contrast, Opera 6 and earlier does not bother with DOCTYPE switching, but those browsers work more like standards mode does, because Opera has been purposely developed with standards in mind. note For an excellent overview of DOCTYPE switching, read “DOCTYPE Switching and Standards Compliance” by Matthias Gutfeldt. The article describes the technical details regarding the switching technology and provides additional resources (http://gutfeldt.ch/matthias/articles/doctypeswitch.html). ࡗࡗࡗ Secret #119: Enclose Inline Elements in Blocks If you’re using XHTML 1.0 Strict or XHTML 1.1, you can’t have any widowed inline elements. This means that any inline element must appear within a block. Listing 7-4 shows a valid XHTML 1.0 Transitional document with an image (which is an inline element) marked up on a line by itself. This is allowed in HTML and XHTML Transitional. Listing 7-4: Valid transitional document with a widowed inline element <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>block and inline elements in XHTML</title> <meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> <img src="images/molly.jpg" width="250" height="165" alt="photograph of molly" /> (continued) P1: FCH WY021-07 WY021-Holzshlag-v2 May 25, 2004 16:40 ࡗ 164 Part II: HTML, XHTML, CSS and Accessibility ࡗ ࡗࡗ Listing 7-4: (continued) </body> </html> Listing 7-5 shows the image, an inline element, marked up properly for XHTML 1.0 Strict or XHTML 1.1. Here, I’m using a paragraph element, but you can use any logical block-level element to contain your inline elements. Another good choice for this would be the div element. Listing 7-5: Proper management of inline elements in XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>block and inline elements in XHTML</title> <meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> <img src="images/molly.jpg" width="250" height="165" alt="photograph of molly" /> </body> </html> ࡗࡗࡗ Secret #120: name Becomes id In XHTML 1.0 Strict and 1.1, the name attribute is replaced with the id attribute. In the past, you might have had the following: <a name="intrapagelink">Line 200</a> But in XHTML 1.0 Strict and XHTML 1.1, you must use id instead: <a id="intrapagelink">Line 200</a> In most cases, using id doesn’t change the function. However, because some browsers do not properly identify or interpret id, when you need to ensure backward compatibility, use a Transitional XHTML DTD and include both, as in the following: <a name="intrapagelink" id="intrapagelink">Line 200</a> note The id attribute becomes very important when using CSS. See Chapter 9, “Laying Out Pages with CSS” for details. P1: FCH WY021-07 WY021-Holzshlag-v2 May 25, 2004 16:40 ࡗ ࡗࡗࡗ Chapter 7: Moving Ahead with XHTML 165 ࡗࡗࡗ Secret #121: The target Attribute is Unavailable in Anchor Yo u’ve been doing it all along—targeting a new window for links. It’s an easy option in HTML and XHTML Transitional. However, if you’re using XHTML 1.0 or XHTML 1.1, you cannot use the target attribute in an anchor element. Here’s what you’ve been doing: <a href="newpage.html" target="_blank">Opens in new window</a> But what are your options to open links in a new window? The main workaround is to use JavaScript, as in the following example: <a onclick="window.open('http://www.molly.com/newpage.html', 'newWindow');" href="#">Opens in new window</a> However, people sometimes turn their JavaScript off. If you don’t want to use JavaScript for any reason, your only alternative is to use a Transitional DTD and the target attribute. Summary The last two chapters have covered more about HTML and XHTML than the vast majority of working Web designers could tell you. Hopefully, you’ve found some clarification, insight, or suggestions that will assist you in understanding the why as well as the how of writing markup. If you’vefound the last couple of chapters a bit on the technical or dry side, fear not. CSS is up next, so you’ll get a chance to learn more about how to add great design and presentation options to your well-formed, valid, and structured documents. [...]... helps you eliminate presentational markup from your HTML or XHTML, add visual intrigue and effects to your designs, and aids designers by improving workflow This chapter focuses on sharing the best techniques to address the integration of CSS with HTML or XHTML documents, improve the way you style text, and use CSS to style your designs Learning CSS The secrets in this chapter assume at least a basic knowledge... action Listing 8-2: Specificity test (continued) ࡗ 174 Part II: HTML, XHTML, CSS, and Accessibility ࡗࡗࡗ Listing 8-2: (continued) Specificity Test Home Books Articles Events Courses Consultation About Molly Fun Stuff < /html> ࡗࡗࡗ Chapter 8: Style Tips for Type and. .. their use, and all the values you can assign to them, see http://www.w3.org/TR/CSS2/fonts .html and www.w3.org/TR/CSS2/text .html ࡗ 186 Part II: HTML, XHTML, CSS, and Accessibility ࡗࡗࡗ Figure 8-11: Exploring text effects using CSS ࡗ ࡗ ࡗ Secret #1 35: Styling Lists with CSS There are a number of cool ways to style lists, too This secret focuses on list properties (Table 8-3), but the next two secrets show... margin: 0; padding: 0.25em; border-top: 1px solid #999; } #navlist li a { text-decoration: none; color: red; } #navlist li a:hover { color: #333; } ࡗࡗࡗ Chapter 8: Style Tips for Type and Design ࡗ 189 List-Based Navigation: Vertical #nav ul { margin-left:... behoove anyone interested in contemporary Web design and development to learn the concepts within the language itself Along with many excellent books, a variety of Web sites and tutorials are available, almost always for free, that will help you learn the theory note Appendix C, “Helpful Reading, Web Sites, and Resources” provides numerous helpful sites, articles, and courses available to learn CSS Also,... inheritance at work Listing 8-1: Inheritance within a simple document Inheritance Test body { font-family: Arial; font-size: 16px; . WY021-Holzshlag-v2 May 25, 2004 16:40 ࡗ 156 Part II: HTML, XHTML, CSS and Accessibility ࡗ ࡗࡗ note For an interesting and very detailed article on empty elements, their history, and their quirks, see. Boolean attribute, and you can read more about their unique history and use at www.w3.org/TR/REC -html4 0/intro/sgmltut .html. ࡗࡗࡗ Secret #114: Entities and XHTML Chapter 6 examined character entities and their. width=" ; 250 & quot; height="1 65& quot; alt="photograph of molly" /> (continued) P1: FCH WY021-07 WY021-Holzshlag-v2 May 25, 2004 16:40 ࡗ 164 Part II: HTML, XHTML, CSS and Accessibility ࡗ

Định dạng
Số trang	44
Dung lượng	2,55 MB