Tài liệu Creating Cool Web Sites with HTML, XHTML, and CSS- P3 pptx

557386 Ch04.qxd 4/2/04 11:01 AM Page 74 Ł 74 Creating Cool Web Sites with HTML, XHTML, and CSS The effects of both word and line spacing are shown in Figure 4-7. Figure 4-7: Word and line spacing can dramatically change the way text looks on a page. Not all possible settings are good, of course. A line height that’s too small results in the lines of text becoming illegible as they’re overlapped. The single addition of line-height: 1.25 , however, can significantly improve the appearance of a page, and you can increase line height for the entire document by changing the style of the body tag. Adding the following code to the top <style> block changes all the text on the page: body { line-height: 1.25 } Cool, eh? I tweak the body container again and again as I proceed. It’s very useful! Text alignment HTML includes some attributes for the <p> tag that let you specify if you want the text to be left, center, or right aligned, or justified, where both the left and right margins are aligned. These attributes are replaced in CSS with the text-align style, which has the following possible values: • left • righ t • center • justify Vertical text alignment Here’s one feature that you don’t see in HTML except in the exceptionally awkward form of <sup> and <sub> for superscripts and subscripts, respectively. Instead, use vertical-align and pick one of the values shown in Table 4-3. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 557386 Ch04.qxd 4/2/04 11:01 AM Page 75 75 Ł Chapter 4: Moving into the 21st Century with Cascading Style Sheets Table 4.3: CSS Vertical Alignment Values Value Explanation top Specifies that top of element aligns with top of highest element in line middle Specifies that middle of element aligns with middle of line bottom Specifies that bottom of element aligns with bottom of lowest element in line text-top Specifies that top of element aligns with top of highest text element in line text-bottom Specifies that bottom of element aligns with bottom of lowest text element in line super Indicates superscript sub Indicates subscript A nice demonstration of this capability is a technique for having trademark ( tm ) character sequences displayed attractively on a page: .tm { vertical-align: top; font-size: 33%; font-weight: bold; } In use, this might appear as Though just about lost to common parlance, it remains the case that Xerox<span class=”tm”>tm</span> is a trademark of Xerox Corporation. Text decorations One HTML text decoration that, surprisingly, made it to CSS is underlining. As discussed in Chapter 3, underlining text on a Web page is somewhat problematic because it can become quite difficult to differentiate links from underlined text. But the CSS text-decoration style enables more than just underlining. It provides the following four values: • underline • overline • line-through • blink With the exception of overline , these all have HTML equivalents: <u> for underline, <strike> for line-through, and <blink> for blink. In CSS, however, it’s much easier to apply a number of them simultaneously, like this: h1 { text-decoration: overline underline; } By using the underlining styles, you can rather dramatically change the appearance of head­ ers throughout a document. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 557386 Ch04.qxd 4/2/04 11:01 AM Page 76 Ł 76 Creating Cool Web Sites with HTML, XHTML, and CSS Changing text case This is the last new CSS style for this chapter, I promise. I know that this chapter must seem like quite a monster with all this thrown at you at once! That’s why it’s incredibly important that you try things on your computer as you read about them. If you just sip your latté while you go through this book, your retention is likely to be minimal. But if you’re trying each and every style and example on your computer, you’ll have lots of “a ha!” moments, and you should start to see the tremendous value of CSS for even the most rudimentary pages. Ł Don’t forget, all the code listings are available on the book Web site at on the http://www.intuitive.com/coolsites/ . web The final style to learn in this chapter, text-transform , deals with the capitalization of text and has the values specified in Table 4-4. Table 4-4: Text Transformation Values Value Meaning capitalize Displays the first letter of each word as caps and all others as lowercase uppercase Displays all letters as uppercase lowercase Displays all letters as lowercase none Displays characters as specified To have a paragraph of text transformed into all uppercase, for example, use text-transform: uppercase; , and to instantly ensure that all header level ones are in proper case, use: h1 { text-transform: capitalize; } Putting it all together Let’s pull the example from the end of the last chapter and see how using CSS can help jazz up the presentation. Here’s what I’ve produced with just a little CSS tweaking (notice that I always include a font-family default value, too): <style type=”text/css”> body { font-family: Arial,Helvetica,sans-serif; font-size:90%; line-height: 1.25; } h1 { text-transform: capitalize; text-decoration: overline underline; color: blue; letter-spacing: 0.05em; text-align: center; } { font-variant: small-caps; font-weight: bold; } .email { color: #909; font-family: monospace; font-size: 90% } .tm { vertical-align: top; font-size: 40%; font-weight: bold; } </style> </head><body> i Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 557386 Ch04.qxd 4/2/04 11:01 AM Page 77 77 Ł Chapter 4: Moving into the 21st Century with Cascading Style Sheets <h1>Travels with Tintin</h1> <p> Of the various reporters with whom I’ve travelled around the world, including writers for <i>UPI</i>, <i>AP</i>, and <i>Reuters</i>, the most fascinating has clearly been <b>Tintin</b>, boy reporter from Belgium ( <span class=”email”>tintin@intuitive.com</span>). </p><div style=”text-align:right”> Probably the most enjoyable aspect of our travels was his dog <b>Snowy</b>, though I don’t know that our hosts would always agree! </div> <h1>The First Trip: Nepal</h1> <p> After winning the Pulitzer for <i>Red Rackham’s Treasure</i> <span class=”tm”>tm</span>, Tintin told me he wanted a vacation. Remembering some of his earlier adventures, he decided to visit Nepal. Early one Sunday, I was sipping my tea and reading the <i>Times</i> when he rang me up, asking whether I’d be able to take a break and come along . </p> Check out the attractive result in Figure 4-8. Make sure you compare this figure to Figure 3-8 from the previous chapter to see how much more capability you’ve gained by moving to CSS. Figure 4-8: The Travels With Tintin screen shot from Chapter 3 has been enhanced with the CSS styles presented throughout this chapter. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 557386 Ch04.qxd 4/2/04 11:01 AM Page 78 Ł 78 Creating Cool Web Sites with HTML, XHTML, and CSS Ł One CSS shortcut that I haven’t mentioned here is the font: style itself. Many of the tip individual font-related styles can be combined into a single font: style, saving you a lot of work. For example, the following two code lines are functionally equivalent: h1 { font-weight: bold; font-size: 22pt; line-height: 30pt; font-family: Courier, monospace; } h1 { font: bold 22pt/30pt Courier, monospace } Well worth learning to save you typing! Description <span </span> tences or headers to change individual words style= Provides specific CSS styles to apply to the span class= Identifies which CSS class should be applied to the span id= span <div </div> <p> style= Specifies CSS styles to apply to the div class= Identifies which CSS class should be applied to the div id= div <link type= Specifies a type of external link; for CSS it should be text/css href= rate CSS style sheets are named with a .css filename suffix <style </style> should appear within the <head></head> block of the page type= Specifies the type of style sheet being used; for CSS always use text/css Table 4-5: HTML Tags That Support CSS Covered in This Chapter Tag Closing Tag Specifies a nonbreaking CSS container; used within sen­ Identifies which CSS ID should be applied to the Specifies a CSS container that acts identically to the tag; forces a line break before and after Identifies which CSS ID should be applied to the References external CSS style sheet by name Indicates the URL of the style sheet; by convention, sepa­ Specifies a block for CSS style definitions on Web page; Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 557386 Ch04.qxd 4/2/04 11:01 AM Page 79 Ł Chapter 4: Moving into the 21st Century with Cascading Style Sheets 79 Style Exemplary Usage Description font-weight font-weight: bold Specifies how much or how little to embolden a text passage font-style font-style: italic font-family font-family: serif Specifies which typeface to use for the text passage, as a comma-separated list, or which font-family to use from a small predefined list font-size font-size: 80% Specifies the type size of the text pas­ sage in one of a wide variety of different units and values color color: green Specifies the text color in the text pas­ sage; can be color names or color values specified in a variety of ways font-variant font-variant: small-caps on the specified variation; only small-caps and none are defined letter-spacing letter-spacing: -3px Changes the interletter spacing (also known as the kerning) to make it larger or smaller than the default word-spacing word-spacing: 15px Increases or decreases the spacing between words in the text passage line-height line-height: 1.25 Changes the spacing between lines of text (also known as the leading); a variety of values are accepted, including fractional values such as 1.5 (for one and a half times normal spacing), 2 (for double spacing), and so on text-align text-align:center Specifies alignment for a block of text vertical-align vertical-align: sub Specifies vertical alignment of a text pas­ sage relative to other text on the line text-decoration text-decoration: underline Specifies one or more of a variety of simple text decorations text-transform text-transform: capitalize Specifies one of a number of text trans­ formations involving upper- and lower­ case letters font font: 22pt monospace allows the specification of a number of different font characteristics Table 4-6: CSS Styles Covered in This Chapter Specifies whether to italicize, oblique, or leave the text passage non-italicized Transforms the text passage based Indicates shorthand CSS notation that Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 557386 Ch04.qxd 4/2/04 11:01 AM Page 80 80 Ł Creating Cool Web Sites with HTML, XHTML, and CSS showing you how a few simple changes to your HTML, such as bold, italics, looking at lists and special characters. Ł Summary This chapter introduced you to the marvels of Cascading Style Sheets, underlining, text alignment, and text decorations and transformations, can result in dramatically improved Web page layout and text presentation. In the next chapter, you continue your exploration of both HTML and CSS by Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 557386 Ch05.qxd 4/2/04 9:48 AM Page 81 Ł 5 Special chapter Lists and Characters Setting up definition lists Adding numbered and bulleted lists to Fiddling with list styles Adding special characters to your Ł In This Chapter your Web pages HTML documents Working with comments within HTML I n this chapter, I introduce you to various types of lists for Web pages, including ordered (numbered) and unordered (bulleted) lists. You learn how to change the appearance of lists using both HTML attributes and CSS styles to make them exactly what you want. I also explain how to add special and non-English charac­ ters and comments to your Web documents. You have probably noticed lots of lists on the Web. After you read this chapter, you will know how to use the differ­ ent list styles to your advantage as you create your own Web pages. Definition Lists One of the most common elements of multipage documents is a set of definitions, references, or cross-indexes. Glossaries are classic examples; words are listed alphabetically, followed by prose definitions. In HTML, the entire glossary section is contained by a definition list, which is contained within a pair of definition list tags: <dl> and </dl> . Within the pair of listings, a definition has two parts: • Definition term ( <dt> and </dt> ) • Definition description ( <d> and </dd> ) Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 557386 Ch05.qxd 4/2/04 9:48 AM Page 82 Ł 82 Creating Cool Web Sites with HTML, XHTML, and CSS Here’s how you can use a definition list in HTML to define some genetics terms: <html> <head> <title>Miscellaneous Genetic Terms</title> <body> <h1>A Quick Glossary of Genetic Terms</h1> <i>Adapted from Dawkins, The Extended Phenotype</i> <dl> <dt>allometry</dt> <dd>A disproportionate relationship between size of a body part and size of the whole body.</dd> <dt>anaphase</dt> <dd>Phase of the cell division during which the paired chromosomes move apart.</dd> <dt>antigens</dt> <dd>Foreign bodies, usually protein molecules, which provoke the formation of antibodies.</dd> <dt>autosome</dt> <dd>A chromosome that is not one of the sex chromosomes.</dd> <dt>codon</dt> <dd>A triplet of units (nucleotides) in the genetic code, specifying the synthesis of a single unit (amino acid) in a protein chain.</dd> <dt>genome</dt> <dd>The entire collection of genes possessed by one organism.</dd> </dl> </body> </html> Figure 5-1 shows the result of the preceding HTML code in a Web browser. Notice the auto­ matic indentation and formatting. If you’re writing a book about herbal remedies, for example, you may want to have a cross- reference of herbs for specific problems. Perhaps you want the ailment in bold and certain key herbs in italics for emphasis. The following example shows how you might want such a listing to look: Blood Pressure Balm, Black Haw, Garlic, Hawthorn. Bronchitis Angelica, Aniseed, Caraway, Grindelia. Burns Aloe, Chickweed, Elder. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 557386 Ch05.qxd 4/2/04 9:48 AM Page 83 83 Ł Chapter 5: Lists and Special Characters Figure 5-1: A glossary, formatted as a definition list, in HTML. Obtaining this format within an HTML document requires the following tag placements: <dl> <dt><b>Blood Pressure</b></dt> <dd>Balm, Black Haw, <i>Garlic</i>, Hawthorn.</dd> <dt><b>Bronchitis</b></dt> <dd>Angelica, <i>Aniseed, Caraway</i>, Grindelia.</dd> <dt><b>Burns</b></dt> <dd>Aloe, Chickweed, <i>Elder</i>.</dd> </dt> Figure 5-2 shows the result, which is, if I do say so myself, quite attractive and similar to the original design. Ł By now, I hope that you can read the preceding HTML snippet and understand all x-ref the paired formatting tags. If not, you might want to skip back to Chapters 3 and 4 and study it a bit more to refresh your memory on text-style formatting. There’s a smarter way to accomplish some of the formatting in this last definition list: Use a CSS style modification that makes all <dt> tags appear in bold text. It looks like the following in the <style> block: dd { font-weight: bold; } Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... watermark  106 Creating Cool Web Sites with HTML, XHTML, and CSS Notice in the preceding HTML code that the link for the Office of Surface Mining is a complex URL with a specified starting page, not just a domain name URL Also notice that the words The White House in the prose at the beginning of the Web page are highlighted and underư lined, comprising a real Web link note Understanding this section... the anchor tag, , and its ending partner is This tag must contain attributes Without any Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark  104 Creating Cool Web Sites with HTML, XHTML, and CSS attributes, the tag has no meaning and doesnt affect the formatting of information The following, for example, would result in the display of the text without formatting:... www.verypdf.com to remove this watermark  86 Creating Cool Web Sites with HTML, XHTML, and CSS A combination of the two list types (unordered and definition) is often useful The definition list looks very professional with the addition of a few style tweaks, and the bullets next to each item in the unordered list look slick, too The solution is to nest lists within one another, as follows: ... 84 Creating Cool Web Sites with HTML, XHTML, and CSS Figure 5-2: A definition list of medicinal herbs with some additional formatting With this style modification in place, you can simplify the previous HTML and also make it more manageable: dt { font-weight: bold; } ... above and feed the text to a Web browser, the browser does not display the comments, as you see in Figure 5-11 (which looks just like Figure 5-6) Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark  100 Creating Cool Web Sites with HTML, XHTML, and CSS Figure 5-11: Comments galore, but none displayed note You dont have to use comments, but if youre starting to build a complex Web. .. 92 Creating Cool Web Sites with HTML, XHTML, and CSS Continued Findings Conclusions Body of Paper Previous research Research methods used Results and findings Conclusion Implications Directions for future research References This outline displays correctly in a Web. .. purchase PDF Split-Merge on www.verypdf.com to remove this watermark  96 Creating Cool Web Sites with HTML, XHTML, and CSS Based on the many possibilities, you can apparently have lots of fun with different counting options, but unfortunately, only a few of these values are implemented, as the table indicates If youre expert with the HTML type attribute of the tag, you recognize all the implemented... The following demonstrate the various uses of character entities in working with non-English languages on Web pages Gibt es ein Café in der Nähe? Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Continued 98 Creating Cool Web Sites with HTML, XHTML, and CSS Continued Is there a café nearby? Je voudrais un dîner... different design for this particular Web page might include such hypertext labels as The FTP archives of or Send email to to set expectations I explore this important usability factor in Chapter 14 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark  108 Creating Cool Web Sites with HTML, XHTML, and CSS Referencing Internal Documents with Relative URLs The capability to... capability to link to external information sources and sites on the Internet is a huge boon to Web designers; but if you stopped at that and never learned any more, youd be missing half the picture The one piece yet to learn is how to reference other documents on your own server This is where you advance from creating cool Web pages to creating cool Web sites! Many home pages offer a simple format similar . 74 Ł 74 Creating Cool Web Sites with HTML, XHTML, and CSS The effects of both word and line spacing are shown in Figure 4-7. Figure 4-7: Word and line. Page 84 Ł 84 Creating Cool Web Sites with HTML, XHTML, and CSS Figure 5-2: A definition list of medicinal herbs with some additional formatting. With this