giáo trình HTML5 và CSS3 từng bước phần 4 docx

Applying Bold and Italics 113 In this exercise, you will apply bold and italic styles to ordered and unordered lists SET UP Use the foliage.htm le in the practice folder for this topic. This le is located in the Documents\Microsoft Press\HTML5 SBS\07Text\ApplyingBold folder. Open the foliage le in Notepad and in Internet Explorer. 1. In the <style> section, add bold formatting to the denition of an ordered list ol {list-style-type: decimal; font-weight: bold} 2. Save the le, and then refresh the Internet Explorer display to see the change The text of the entire list becomes bold 3. Create a new style rule for unordered lists, setting the font weight to normal ul {font-weight: normal} 4. Save the le, and then refresh the display in Internet Explorer The unordered list items are no longer bold, but the ordered list items are 5. Create a new style rule for unordered lists within unordered lists, setting the font style to italic ul ul {font-style: italic} 6. Save the le, and then refresh the display in Internet Explorer HTML5_SBS.indb 113 1/13/11 5:05 PM 114 Chapter 7 CLEAN UP Close the Notepad and Internet Explorer windows. Applying Strikethrough and Underlining Strikethrough formatting is typically used to denote text that has changed For example, if you have marked down the price of an item, you might strike through the original price HTML5_SBS.indb 114 1/13/11 5:05 PM Applying Strikethrough and Underlining 115 Most Web designers don’t use underlining as a formatting technique because hyperlinks are underlined, and it is considered poor design to confuse your users with text that looks “clickable” but is not In the example just shown, for instance, you might think that the text Now only $9.99 is a hyperlink, but it’s not; it’s just underlined If you simply want to underline or strike through a few words of text in one specic instance that probably won’t recur elsewhere on your page (or site), it’s easiest to use the <ins> tag for underlining or the <del> tag for strikethrough These tag names come from the logical functions that underlining and strikethrough often serve in an edited document; insertions are commonly underlined, and deletions are commonly struck through Here’s the code for the preceding example: List price: <del>$24.00</del> <ins>Now only $9.99</ins> Note In early HTML versions, there was a <strike> or <s> tag for strikethrough and a tag for underlining, but both were deprecated in HTML4 and removed completely in HTML5. The <ins> and <del> tags will probably become deprecated at some point, but for now they are still in use. To strike through or underline text by using a style (a more modern and “correct” method, although it requires a little more typing), use the text-decoration attribute This attribute accepts several keywords: ●● underline ●● overline (line over the text) ●● line-through (strikethrough) ●● blink (ashing text) ●● none (removes all inherited decoration) Caution Do not use blinking text if at all possible. It is quite annoying. Visitors to your site will probably dislike it so much that they will leave your site and never return. You can use the none keyword to remove the underlining from text that would ordinar- ily be underlined automatically, such as a hyperlink Be careful, though, because if you remove the underline from a hyperlink, many people will not realize they can click it Here are some examples applied to individual paragraphs: This looks clickable, but isn’t. This is struck-through. Congratulations, you win! HTML5_SBS.indb 115 1/13/11 5:05 PM 116 Chapter 7 Here’s an example of underlining applied within a style sheet to a class called underlined: .underlined {text-decoration: underline} In this exercise, you will remove the underlining from a hyperlink SET UP Use the index.htm le in the practice folder for this topic. This le is located in the Documents\Microsoft Press\HTML5 SBS\07Text\ApplyingStrike folder. Open the index le in Notepad and in Internet Explorer. 1. In the <a> tag for the Contact the Webmaster hyperlink at the bottom of the document, add a text-decoration attribute that removes the underline <a href="mailto:webmaster@contoso.com?subject=Question/Comment" title= "webmaster@contoso.com" style="color: white; text-decoration:none">Contact the Webmaster</a> 2. Save the le, and then refresh the Internet Explorer display The hyperlink is no longer underlined, but you can still point at it to see its Screen- Tip, indicating it is still a live hyperlink 3. Use the <del> tag to strike through the word Webmaster, and insert Master Gardener in boldface following it (Use the tag for the boldface) <a href="mailto:webmaster@contoso.com?subject=Question/Comment" title= "webmaster@contoso.com" style="color: white; text-decoration:none">Contact the <del>Webmaster</del>Master Gardener</a> 4. Save the le, and then refresh the Internet Explorer display CLEAN UP Close the Notepad and Internet Explorer windows. HTML5_SBS.indb 116 1/13/11 5:05 PM Creating Inline Spans 117 Creating Inline Spans Part of the problem with replacing the old style tags like , , and <del> with styles for individual items is that the style= attribute must be placed within an existing tag For example, in the following sentence, how would you avoid using to make only one word bold? I had a great time. The word great does not have any container tags surrounding it, so there’s no place to put a style= attribute The solution is to use an inline span A span is simply a shell into which you can place any attributes you need For example, the preceding example could be written as follows to use a style: I had a great time. That’s an awful lot of typing, but there’s a good reason for it By using a span, you can apply a class, and by applying a class you can create consistency For example, suppose you know that you want to make new vocabulary words stand out somehow, but you haven’t yet decided whether you want to make them bold, italicized, or both You can create a class called vocabulary, and apply that class to each vocabulary word Deciduous Then in your style sheet, you can dene the class with the formatting you want Suppose, for example, that you decide to make vocabulary words italicized Simply create a style that denes vocabulary as italic: .vocabulary {font-style: italic} If you later change your mind, you need to make the change in only one place—the style sheet In this exercise, you will format text by using inline spans HTML5_SBS.indb 117 1/13/11 5:05 PM 118 Chapter 7 SET UP Use the bestsellers.htm le in the practice folder for this topic. This le is located in the Documents\Microsoft Press\HTML5 SBS\07Text\CreatingSpan folder. Open the bestsellers le in Notepad and in Internet Explorer. 1. Create a span around the company name in each of the list items, and assign a class called company to each one <ol> <li>Sampson & Company All-Natural Pesticide</li> <li>Vickers and Vickers Fertilizer Sticks</li> <li>Appleton Acres Big Sack of Bulbs, Tulips</li> <li>Jackson and Perkins Climbing Rosebushes</li> <li>Easton Create-Your-Own Paving Stones Kit</li> <li>Appleton Acres Big Sack of Bulbs, Daffodils</li> <li>Appleton Acres Big Sack of Bulbs, Hyacinths</li> <li>Appleton Acres Big Sack of Bulbs, Crocuses</li> <li>Hawthorne Hills Hosta, 3-Pack</li> <li>Sampson & Company All-Natural Herbicide</li> </ol> Tip Use the Clipboard to copy and paste the opening and closing tags to save time. They are identical for each entry. Note In the above example, the space following the text in each span is included within the span. The space could have gone outside of the span instead. If the class applied to the span species a very different font size than used outside the span, the placement of the space inside versus outside could make a difference in how the text appears onscreen; in this exercise’s example, it makes no difference. 2. In the <style> section of the document, create a style that denes the company class as bold, italic, and red .company {font-style: italic; font-weight: bold; color: red} 3. Save the le, and then refresh the Internet Explorer display HTML5_SBS.indb 118 1/13/11 5:05 PM Adjusting Spacing Between Letters 119 CLEAN UP Close the Notepad and Internet Explorer windows. Adjusting Spacing Between Letters In many desktop publishing applications, you can ne-tune the spacing between letters to subtly change the appearance of a paragraph Thanks to styles, you can do the same thing in HTML There are two types of spacing you can control in HTML: word spacing and letter spacing Word spacing controls the amount of space between each word, and letter spacing controls the amount of space between each letter The default is 0 for each; positive numbers increase the space and negative numbers decrease it Usually, one or two pixels in either direction is plenty HTML5_SBS.indb 119 1/13/11 5:05 PM 120 Chapter 7 To apply word and/or letter spacing, add spacing to the style= attribute for a specic tag This text has increased letter spacing. You can also add spacing to a style rule in the style sheet p {letter-spacing: 4px} In this exercise, you will increase the word and letter spacing for all paragraphs and headings in a document SET UP Use the spray.htm le in the practice folder for this topic. This le is located in the Documents\Microsoft Press\HTML5 SBS\07Text\AdjustingSpacing folder. Open the spray le in Notepad and in Internet Explorer. 1. Examine the document in Internet Explorer Note the overall look and the spacing between words and letters 2. In the <head> section, create the following <style> section: <style> h1, h2, p {word-spacing: 1px; letter-spacing: 1px} </style> 3. Save the le, and then refresh the Internet Explorer display Notice the spacing difference It’s not very attractive, but it’s different The difference is also enhanced by the fact that this document does not yet have the cascading style sheet applied to it HTML5_SBS.indb 120 1/13/11 5:05 PM Downloa d f r o m W o w ! e B o o k < w w w.woweb o o k . c o m > Adjusting Spacing Between Letters 121 4. Apply the default.css cascading style sheet to the document by inserting the following code in the <head> section (but not within the <style> tag): <link rel="stylesheet" type="text/css" href="default.css"> 5. Edit the embedded style sheet to decrease the line spacing and word spacing to 0.5px h1, h2, p {word-spacing: 0.5px; letter-spacing: 0.5px} 6. Save the le, and then refresh the Internet Explorer display Now it looks more attractive, and is more consistent with the rest of the pages for this Web site HTML5_SBS.indb 121 1/13/11 5:05 PM 122 Chapter 7 CLEAN UP Close the Notepad and Internet Explorer windows. HTML5_SBS.indb 122 1/13/11 5:05 PM [...]... graphics, page 144 Utilize thumbnail graphics, page 155 Include figure captions, page 158 9 Displaying Graphics In this chapter, you will learn how to 4 Select a graphics format 4 Prepare graphics for use on the Web 4 Insert graphics 4 Arrange elements on the page 4 Control image size and padding 4 Hyperlink from graphics 4 Utilize thumbnail graphics 4 Include alternate text for graphics 4 Add figure... paragraph, page 135 Specify vertical space within a paragraph, page 137 8 Formatting Paragraphs by Using Style Sheets In this chapter, you will learn how to 4 Indent paragraphs 4 Apply a border to a paragraph 4 Specify the horizontal alignment of a paragraph 4 Specify vertical space within a paragraph In Chapter 7, “Formatting Text by Using Style Sheets,” you learned how to use style rules to apply character... exercise in “Inserting Graphics,” on page 144 uses a graphic that has already been resized in this manner ●● The other way is to use attributes within the HTML code to specify the height and width at which the graphic is displayed The Web browser will scale the graphic down to the specified size when it displays the page With this method, the file size 144 Chapter 9 Chapter 9 is larger, so the... Name Color Depth Compression Animation Transparency Graphics Interchange Format (GIF) 8-bit (256 colors) Lossless Yes Yes Lossy Joint Photographic 24- bit Experts Group (JPEG, JPG) (1.6 million colors) No No Portable Network Graphics (PNG) Yes Yes 24- bit or 48 -bit Lossless Preparing Graphics for Web Use After you decide which graphics format to use for a particular image, your next decision is how large... learn how to create alternate text that will appear if the graphic cannot load Finally, you’ll learn how to use the new HTML5 and tags See Also Do you need only a quick refresher on the topics in this chapter? See the Key Points at the end of this chapter 141 142 Chapter 9 Chapter 9 Practice Files Before you can use the practice files provided for this chapter, you need... solid; padding: 15px"> Specifying Border Width and Color By default, a border is black and 4 pixels wide To change these attributes, use the bordercolor and border-width attributes The color can be any basic or extended color name or any RGB or hexadecimal color number (See the discussion of color choices in Chapter 4 if you need to review the color options in HTML.) For example, to decrease the border... family and pets out of the area as well. 3 Save the file, and then refresh the Internet Explorer display 4 Locate the bordered paragraph in the Spraying section Notice that the paragraph still has its first-line indent, and the border is close to the top and bottom of the paragraph text 1 34 Chapter 8 Chapter 8 5 Add 5px (five pixels) of padding to the top and bottom of the border, and remove... exercise, you will insert a graphic located in a subfolder and set it to float to the left of the text Arranging Elements on the Page 147 SET UP Use the index.htm file in the practice file folder for this topic This file is located in the Documents\Microsoft Press \HTML5 SBS\09Graphics\InsertingImages folder Open the index file in Microsoft Notepad and in Microsoft Internet Explorer Important If you... src="images/leaf.gif" style="float: left"> 4 Save the file, and then refresh Internet Explorer to check your work CLEAN UP Close the Notepad and Internet Explorer windows Arranging Elements on the Page The image in the preceding exercise was carefully prepared to be the correct size to fit in the space where it was to be inserted But what if the image is larger? 148 Chapter 9 Chapter 9 Perhaps that’s... the line height of certain elements by editing the embedded style sheet SET UP Use the spray.htm file in the practice file folder for this topic This file is located in the Documents\Microsoft Press \HTML5 SBS\08Paragraphs\Indenting folder Open the spray file in Notepad and in Internet Explorer 1 In the area, modify the style rule for the tag by setting the line height to 150% p {text-indent: . 130 HTML5_ SBS.indb 1 24 1/13/11 5:05 PM 125 8 Formatting Paragraphs by Using Style Sheets In this chapter, you will learn how to 4 Indent paragraphs 4 Apply a border to a paragraph 4 Specify. you have marked down the price of an item, you might strike through the original price HTML5_ SBS.indb 1 14 1/13/11 5:05 PM Applying Strikethrough and Underlining 115 Most Web designers don’t. strikethrough and a tag for underlining, but both were deprecated in HTML4 and removed completely in HTML5. The <ins> and <del> tags will probably become deprecated at some