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

Chia sẻ: Nguyễn Thị Ngọc Huỳnh | Ngày: | Loại File: PDF | Số trang:31

Thêm vào BST

Báo xấu

410
lượt xem 160
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Cơ bản về HTML và CSS Cascading Style Sheets, hay còn gọi tắt là CSS, là những file hỗ trợ cho trình duyệt Web trong việc hiển thị một trang HTML. Về cơ bản, các trang HTML như bộ xương - khuôn khổ cơ bản - của một trang web - trong khi các file CSS sẽ cụ thể hóa các thành phần của một trang nên được hiển thị như thế nào. CSS cho phép bạn kiểm soát phông chữ, màu chữ, kiểu nền..., của một trang HTML....

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: giáo trình HTML5 và CSS3 từng bước phần 2

37 Formatting a Block Quotation 14. Apply the tag to the rest of the poem . The gardener does not love to talk, He makes me keep the gravel walk; And when he puts his tools away, He locks the door and takes the key. ... Well now, and while the summer stays, To profit by these garden days, O how much wiser you would be To play at Indian wars with me! 15. Save the file, and then refresh the Internet Explorer display to check your work . CLEAN UP Close the Notepad and Internet Explorer windows. Formatting a Block Quotation When quoting blocks from other sources, it is customary—both on Web pages and in print—to indent those blocks from the main body of the text . The tag does exactly that . And don’t feel constrained about using it; you can use for any text that you want to indent, not just quotations .
38 Chapter 3 The tag has a cite=”URL” attribute, but most browsers don’t do anything with it . If you happen to know the URL for the source you are citing, it is good practice to include it in the tag for browsers that do support the attribute, and as an aid to anyone who might be viewing or editing your raw HTML code later . Note There is also a tag, which is used for formatting inline quotations. Its only functionality is to place quotation marks around the text that it encloses. Most people don’t use this tag because it is much easier to simply type the quotation marks. In this exercise, you will add a block quotation to a Web page . SET UP Open the poem and poemtext files from the previous exercise (or in the practice file folder for this topic) in separate instances of Notepad. These practice files are located in the Documents\Microsoft Press\HTML5 SBS\03Format\ FormattingQuotes folder. 1. In the poemtext file, select only the text below the poem (the heading and the biographical note), and then press Ctrl+C to copy it to the Clipboard . 2. In the poem file, click above the tag, and then press Ctrl+V to paste the copied text after the poem . 3. Enclose the text Brief Biography from Answers.com: in an tag . Brief Biography from Answers.com:
39 Formatting a Block Quotation 4. Enclose the biographical note in a tag: Stevenson was one of the most-read adventure novelists of the late 1800s. Among his most popular books were Kidnapped (1886), The Strange Case of Dr. Jekyll and Mr. Hyde (1886), and Treasure Island (1883). The latter book features Stevenson’s famous crafty pirate Long John Silver. Steven- son also published a much-loved book of poems, A Child’s Garden of Verse (1885). Having suffered from tuberculosis for much of his life, Stevenson spent many years travelling in search of a climate that would suit his ill- ness. He finally settled in Samoa, where he died in 1894 and is buried. 5. Immediately before the opening tag in the previous example, enter this open- ing tag: Note Don’t remove the tags for the quoted paragraphs; place the tags around the outside of them. 6. At the end of the paragraph, after the tag, enter the closing tag . 7. Save the poem file, and then display it in Internet Explorer to check your work .
40 Chapter 3 CLEAN UP Close the Notepad and Internet Explorer windows. Configuring View Settings in Internet Explorer At the beginning of the chapter, I mentioned that users can customize how certain tags are displayed on their own systems by setting the viewing preferences in their brows- ers . To understand what people might be doing with your pages, take a few moments to examine the settings in Internet Explorer 9 . The customization capabilities in other browsers, including earlier versions of Internet Explorer, are similar . In this exercise, you will view HTML pages in Internet Explorer 9 and specify a variety of settings .
41 Configuring View Settings in Internet Explorer SET UP Use the poem.htm and index.htm files from the previous exercises, or use those in the practice file folder for this topic. These practice files are located in the Documents\Microsoft Press\HTML5 SBS\03Format\ConfiguringSettings folder. Open the index file in Internet Explorer. 1. If the menu bar doesn’t appear in Internet Explorer, press Alt to make it visible . 2. Choose View | Text Size | Largest . All the text on the page increases in size . 3. Choose View | Text Size | Smallest . All the text on the page decreases in size . 4. Choose View | Text Size | Medium . The text returns to its default size . 5. Choose Tools | Internet Options . The Internet Options dialog box appears .
42 Chapter 3 6. On the General tab, click the Fonts button . The Fonts dialog box appears . 7. In the Webpage font list, click Arial . 8. In the Plain text font list, click Lucida Console (if you have it; otherwise, select another font) . Your choices are immediately reflected in the sample text below the font lists . Note Windows comes with a basic set of fonts, and you get more fonts when you install some applications, such as Microsoft Office. Arial comes with Windows, but Lucida Console does not; it comes with Office.
43 Configuring View Settings in Internet Explorer 9. Click OK to close the Fonts dialog box . 10. Click OK to close the Internet Options dialog box . The page now appears in Arial font . Your font choices are now overriding Internet Explorer’s defaults .
44 Chapter 3 11. Open the poem file in Internet Explorer . Notice that the plain text font you chose in step 8 is applied to the poem; the remaining text appears in Arial font . 12. Repeat steps 5 through 10, changing the Web page font back to Times New Roman and the plain text font back to Courier New . Note You do not need to perform step 12 if you prefer the new font choices, but it is generally a good idea to preview your Web pages in the same font that most people will be using to view them. CLEAN UP Close the Internet Explorer window.
45 Key Points Key Points ● Most tags are based on function, not formatting . They specify that text has a certain function, such as a heading or quotation, rather than specifying a certain way it should appear . ● The exact formatting (the appearance) applied to tagged text is controlled by the default settings of the browser, by individual user customization, or by styles . ● Define headings by using the tags through (largest to smallest) . ● When one heading immediately follows another as a subheading, you might want to group them with so that screen readers and outlines show them as a single unit . ● To make text bold, use the tag; to italicize it, use the tag . ● The tag for superscript is ; the tag for subscript is . ● Monospaced text uses a font whose characters all occupy the same amount of hori- zontal space, no matter the specific character; its opposite is proportional text . ● By default, most Web text appears in a proportional font . To specify a monospaced font, use the , , or tag . HTML5 no longer supports the obso- lete code for monospaced text . ● By default, a Web browser strips out any extra spaces and ignores paragraph breaks (except for those created when using the tag) . To force the browser to render spaces and line breaks in text, enclose that text in a tag . ● To set off a block quotation, use the tag . The tag can take a cite=”URL” attribute, but most browsers do not make use of it . ● In Internet Explorer, you can choose a default text size from the View menu . This affects only your copy of Internet Explorer, not the page itself . ● In Internet Explorer, you can choose a default text font by opening the Internet Options dialog box, clicking Fonts, and specifying the fonts to use for various purposes .
Chapter at a Glance Create bulleted and numbered lists, page 48 Insert horizontal lines, page 57 Specify a background image file, page 62
4 Using Lists and Backgrounds In this chapter, you will learn how to 4 Create bulleted and numbered lists . 4 Create definition lists . 4 Insert special characters . 4 Insert horizontal lines . 4 Choose background and foreground colors . 4 Specify a background image file . Suppose you’re studying for an important test or gathering information for a big project at work . There’s a lot of data and very little time in which to digest it . Which would you rather browse through: a long report on the topic, or a list of the important points? If you’re like most people, you would probably prefer a list . Lists make text easier to skim . English teachers might wring their hands over this (and I can say this because I was an English teacher), but we’ve become a society of skimmers and browsers . People don’t like to read paragraph after paragraph of plain text . They like their information divided up into easily digestible chunks . In this chapter, you’ll learn to create several types of lists by using HTML, including bul- leted lists, numbered lists, and definition lists . You’ll learn how to create nested lists within lists, how to use styles to specify the bullet character or numbering style, and how to cre- ate horizontal lines (which in HTML-speak are called rules) that further help divide a page . You’ll also learn about entity codes that make it possible to insert special characters or symbols that are not on your keyboard, including symbols such as greater than (>) and less than (
48 Chapter 4 divisions in Chapter 11, “Creating Division-Based Layouts,” you’ll see how understanding backgrounds can come in handy for creating a navigation bar that contrasts with the main page . See Also Do you need only a quick refresher on the topics in this chapter? See the Key Points section at the end of this chapter. Practice Files Before you can use the practice files provided for this chapter, you need to download and install them from the book’s companion content location. See “Using the Practice Files” at the beginning of this book for more information. Creating Bulleted and Numbered Lists In Chapter 2, “Setting Up the Document Structure,” you worked with a file that contained a numbered list, but it was set up as a regular paragraph with breaks for each line, such as the following: 1. Click in the Login box 2. Type premium> 3. Click in the Password box 4. Type customer Tagging the list this way worked in this instance because the lines were short and simple, but HTML has tags designed specifically for creating lists, and it’s better to use those tags when possible . They accept attributes that you can use to control formatting, and they create hanging bullets and numbers (that is, bullets and numbers that extend, or “hang,” off the left margin of the paragraph) . The tag for a numbered list is , which stands for ordered list . For a bulleted list, the tag is , which stands for unordered list . Each numbered or bulleted item within the list is tagged , for list item . You start the list with the opening or tag, enclose each list item with and tags, and then end the list with the closing or tag . Here’s the numbered list from the previous example, this time using the proper tags: Click in the Login box Type premium Click in the Password box Type customer
49 Creating Bulleted and Numbered Lists Note The indentation is added to make the text easier for you to read, but the browser ignores extra spaces, as you learned in Chapter 2. In fact, if the tag had been placed on the same line as the first item, it would not have made any difference. You’ve probably noticed that what’s missing here is the numbers themselves . That’s because when creating an ordered list in HTML, you don’t assign the numbers to the items yourself . You let HTML handle that for you as well as the paragraph alignment . The result is a standard, recognizable numbered list . Download from Wow! eBook A bulleted list works the same way, except you use tags . Here’s an example: Bring in the mail Take out the trash Feed the dogs Stop the newspaper delivery This produces a basic bullet list on a Web page . Nesting Lists You can nest lists within one another . In the following example, we have a bulleted list embedded within a numbered list . Notice how this nested list was constructed . The bul- leted sublist (the tag) is placed within one of the tags within the numbered list . Thursday: Do Algebra homework Friday: Housesit for neighbors: Bring in the mail Take out the trash Feed the dogs Stop the newspaper delivery Saturday: Wash car
50 Chapter 4 On a Web page, it would look like this . Changing the Bullet or Number Character Bulleted and numbered lists can be styled by using a list-style-type: type attribute . This is a type of style-based attribute that you will be seeing a lot more of later in this book, but for now we’re using it as a standalone technique for changing the bullet character or numbering style . You can use the values shown in Table 4-1 for the list-style-type attri- bute . (This isn’t a comprehensive list, but it covers all the values you are likely to use .) TABLE 4-1 Common List Style Type Attribute Values List Style Value Result Bulleted disc Filled circle (the default) circle Unfilled circle square Filled square Numbered decimal 1, 2, 3, 4 (the default) decimal-leading-zero 01, 02, 03, 04 lower-roman i, ii, iii, iv upper-roman I, II, III, IV lower-alpha a, b, c, d upper-alpha A, B, C, D none (nothing) To apply the attribute, place it in the opening or tag . For example, to create a bulleted list that uses the square bullet character, start the list off this way: To create a numbered list that uses uppercase Roman numerals, start the list this way: Note Another way of specifying the bullet or number type is use a cascading style sheet (CSS); you will learn about CSS later in the book.
51 Creating Bulleted and Numbered Lists Specifying the Start of a Numbered List To start a numbered list at a number other than 1, you use the start=”n” attribute with the tag, where n is the starting number . For example: Note that you always specify the starting number as an Arabic numeral, even if you have chosen a Roman numeral or letter style for the list . You can use the value=”n” attribute for an individual list item if you want to change the numbering for one item only . For example, to force a particular list item to be numbered with a 5 (or in a list with Roman numerals, a V), insert the value=”n” attribute, as shown here: Note The start= and value= attributes are both deprecated, but they still work in HTML5. In this exercise, you will create and nest ordered and unordered lists . SET UP Use the foliage.htm file in the practice file folder for this topic. This practice file is located in the Documents\Microsoft Press\HTML5 SBS\04Lists\NestingLists folder. Open the foliage file in Notepad and in Internet Explorer. 1. Create the following numbered list above the tag: Yellow Necrotic spots White powder Light and dark green areas Holes or chewed areas 2. Save the file, and then refresh the Internet Explorer display to view your work .
52 Chapter 4 3. After the first item in the list, create a nested list, as shown in the following, and then save and check your work . Yellow Wet soil Low fertility Root rot pathogens Roots cut or damaged Nematodes Tip The indentation of the lines in the nested list is optional. It makes no difference in the browser, but it does help you to see your code more easily. You can indent using either the Tab key or the space bar. 4. Within the nested bulleted list, create another layer of nesting, as shown in the fol- lowing, and then save and check your work . Yellow Wet soil Low fertility Root rot pathogens Roots cut or damaged Gophers Moles Insects Nematodes
53 Creating Bulleted and Numbered Lists 5. Change the opening tag of the top-level numbered list so that it uses uppercase Roman numerals . 6. Save and check your work . CLEAN UP Close the Notepad and Internet Explorer windows.
54 Chapter 4 Creating Definition Lists A definition list is just what it sounds like: a list that presents terms with their definitions, such as you would see in a glossary . The word being defined serves as a heading, and the definition paragraph is indented under it . The complete list (headings and definition paragraphs) is contained within the and tags, which stands for definition list . Each word to be defined is contained in a (definition term) tag, and the definition paragraphs are in (definition descrip- tion) tags . Here’s the code for the example just shown: Fungus A primitive, non-vascular, non-photosynthetic form of plant life. Examples include mildews, molds, and mushrooms. Nematode A microscopic roundworm that lives in the soil. There are both harmful and beneficial nematodes. Harmful ones take their toll on the roots of the plant. This example shows a one-to-one relationship between words and definitions (one definition for each word), but that’s not a requirement . You can have multiple consecu- tive entries of either type . You might do this to accommodate situations in which a single word has two meanings or two words have the same definition . Note HTML permits you to omit the closing and tags, but you should get into the habit of using them anyway. XHTML requires them. In this exercise, you will create a glossary of terms on a Web page . SET UP Use the glossary.htm file in the practice file folder for this topic. This practice file is located in the Documents\Microsoft Press\HTML5 SBS\04Lists\CreatingGlossary folder. Open the glossary file in Notepad and in Internet Explorer. 1. In the area, enter the following: Gardening Terms Here are some useful gardening terms:
55 Inserting Special Characters 2. After the text you just entered, create the following definition list: Acid Soil Soil that is lower than 7.0 pH. Acidity is measured by the amount of calcium in the soil. The opposite of acidic soil is alkaline soil. Deciduous A tree or plant that loses its leaves at the end of the growing season, such as a maple tree. Fungus A primitive, non-vascular, non-photosynthetic form of plant life. Examples include mildews, molds, and mushrooms. Nematode A microscopic roundworm that lives in the soil. There are both harmful and beneficial nematodes. Harmful ones take their toll on the roots of the plant. 3. Save the file, and then refresh the Internet Explorer display to view your work . CLEAN UP Close the Notepad and Internet Explorer windows. Inserting Special Characters Special characters are characters that are not included on a standard English keyboard . Examples include letters with accent marks over them such as in résumé, or an ownership symbol like © or ™ . In HTML, these special characters are referred to as entities, and you create them by using codes beginning with an ampersand (&), followed by an entity
56 Chapter 4 name or an entity number, and ending with a semicolon . The entity names and entity numbers both represent the same thing; you can use either one . For example   or &#160 both render as a non-breaking space . In addition to the non-keyboard symbols, certain other symbols must be created as enti- ties in HTML because they have a specific meaning in HTML . The most common are the ampersand (&), the greater than sign (>), and the less than sign ( (greater than) > > (nonbreaking space)     ¢ (cent) ¢ ¢ £ (pound) £ £ ¥ (yen) ¥ ¥ © (copyright) © © ® (registered trademark) ® ® ° (degree) ° ° ± (plus or minus) ± ± † (dagger) &dagger; † ™ (trademark) ™ ™ Note The nonbreaking space entity   is very popular for creating spaces, and in fact, many WYSIWYG Web site creation programs like Microsoft Expression Web and Adobe Dreamweaver insert them for you when you press the spacebar. Don’t use nonbreaking spaces instead of good layout techniques, though. For example, if something needs to be indented a certain amount, use the correct HTML tags and styles to create the indent, don’t just “space over” with a half-dozen   codes. In this exercise, you will add copyright and trademark symbols to a Web page . SET UP Use the index.htm file in the practice file folder for this topic. This practice file is located in the Documents\Microsoft Press\HTML5 SBS\04Lists\ InsertingCharacters folder. Open the index file in Notepad and in Internet Explorer.