HTML in 10 Steps or Less- P4

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:20

Thêm vào BST

Báo xấu

139
lượt xem 16
download

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

HTML in 10 Steps or Less- P4:Welcome to HTML in 10 Simple Steps or Less. Our mission in writing this book is to provide a quick and accessible way for you to learn Hypertext Markup Language — the lingua franca of the World Wide Web. We hope this book provides a resource that beginning and intermediate HTML coders can use to improve their Web development skills. It is also our hope that it fills multiple roles as both a teaching tool and a reference once you expand your skills.

Chủ đề:

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

Lưu

Nội dung Text: HTML in 10 Steps or Less- P4

36 Part 2 Task 17 Applying Logical Styles T he physical styles you learned about in Task 16 apply a specific appearance to text. Logical style tags format text according to the text’s meaning without implying a specific appearance. This sounds like two different things, but because the HTML standard leaves the rendering of logical styles up to the browser, logi- cal styles, to date, produce the same effect on text as physical styles. note 1. To place emphasis on a chosen word, place the text between • Logical styles are favored over the deprecated physi- and tags: cal styles not only in XHTML but also in HTML 4 Emphasis looks italic and 4.01. 2. To place stronger emphasis on a chosen word, use the and tags: Strong looks bold 3. To define a section of text as a code sample, use the and tags: Code looks like teletype 4. To define a sample of literal characters, use the and tags: Sample looks like teletype too. 5. To define text as it should be typed by a user, for example in an instructional manual, use the and tags (short for “keyboard”): Keyboard also looks like teletype. 6. To define text as a variable name, for example in a programming lan- guage, use the and tags: Variable looks italic. 7. To format text as a term definition, use the and tags: Definition also looks italic. 8. To define a citation, as out of a book, use the and tags: Cite is another logical style that looks italic. Figure 17-1 shows the results of the code listed in Listing 17-1. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Working with Text 37 Logical Styles Task 17 Emphasis looks italic. Strong looks bold. Code looks like teletype. Sample looks like teletype too. Keyboard also looks like teletype. Variable looks italic. Definition also looks italic. Cite is another logical style that looks italic. Listing 17-1: Logical styles set in HTML Figure 17-1: Logical styles rendered in the browser cross-references • To learn more about the HTML and CSS standards, visit the World Wide Web Consortium at www.w3.org. • To control how the browser displays text formatted with a specific tag, learn about Cascading Style Sheets (see Part 9). Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
38 Part 2 Task 18 Inserting Character Entities T here are about 100 keys on your keyboard, but with all those choices, how do you type something obscure like the copyright symbol (©)? In a word proces- sor, you insert a symbol from some menu or dialog box. In HTML, these sym- bols are referred to as character entities or special characters. Instead of tags, character entities are rendered numerically, beginning with an ampersand (&) note and pound sign (#) and ending with a semicolon. This task shows you how to render a number of the more common character entities. • Character entities are also referred to as special characters. 1. Type © to display the copyright symbol: Copyright © 2003 2. Type ® to produce the registered symbol: W3C ® 3. Type  to produce the trademark symbol: Alpha-Gizmo 4. Enter ¼ to produce the fraction one-quarter: ¼ teaspoon salt 5. Enter ½ to produce the fraction one-half: ½ teaspoon sugar 6. Enter ¾ to produce the fraction three-quarters: ¾ cup of honey 7. Enter ¢ to produce the cent symbol: 10¢ 8. Enter £ to produce the British Pound symbol: £125,000 9. Enter ¥ to produce the Japanese Yen symbol: ¥500,000 10. Enter € to produce the European Union’s Euro symbol: €700 Listing 18-1 provides examples of these symbols and Figure 18-1 dis- plays the results in a browser. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Working with Text 39 Character Entities Task 18 This book is copyrighted ©2003 My Favorite cola is Pepsi® My company name: Alpha-Gizmo ¼ teaspoon salt in my soup. tip ½ teaspoon sugar in my tea. • Most character entities have an English-language ¾ cup of honey is way too much! equivalent. For example, I remember when a pay phone cost 10¢ the copyright symbol can A $500,000 house only costs £300,084.44 also be written as © Which is an astronomical ¥59,037,844.65 and the registered sign as ®. But a moderate €436,305.17 Listing 18-1: Character entities in HTML Figure 18-1: Character entities rendered in the browser cross-reference • For a full list of standard character entities, see our Web site at www.wiley .com/compbooks/ 10simplestepsorless. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
40 Part 2 Task 19 Using the Preformatted Text Element T here is a way to make a browser display text almost exactly as you type it in your HTML document. The tag tells the browser that text is prefor- matted, which means it should leave all white space as entered. In other words, if you hit the Spacebar seven times, the browser will respect those seven spaces. Typically, browsers display any text written between tags with a mono- note spaced font. • Though the tags will then move the original text out 1. Begin the region of your document to preformat with an opening of position, the browser tag. doesn’t display space occupied by tags so 2. Enter the text you want preformatted into the document. there won’t be any effect on alignment. 3. Close the preformatted region with a closing tag, as in the following code. Figure 19-1 shows how it looks in your browser. | Mon | Tues | Wed | Thurs | Fri | | | | | Calculus | X | | X | | ------------------------------------------------------ English | | X | | X | ------------------------------------------------------ Latin | X | | X | | Figure 19-1: Code inside the tag rendered in the browser 4. If you choose, you can include tags to control the size and color, as shown in the following code. Figure 19-2 shows how the modified code appears in the browser (except for the color, of course). | Mon | Tues | Wed | Thurs | Fri | | | | | Calculus | X | | X | | ------------------------------------------------------ English | | X | | X | ------------------------------------------------------ Latin | X | | X | | Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Working with Text 41 Task 19 tip • Monospaced fonts give each character identical Figure 19-2: Nesting tags within preformatted text to enlarge the point size spacing, which allows you to line up text evenly. If you 5. To include logical or physical style tags inside tags, first enter include a face attribute in your text and test it in a browser to check your alignments. Then go your tag and don’t specify a monospaced back to the code and insert the tags around your text choices, as font, the alignment of shown in the following code. Figure 19-3 shows how it looks in the preformatted elements browser. may be off. | Mon | Tues | Wed | Thurs | Fri | | | | | Calculus | X | | X | | ------------------------------------------------------ English | | X | | X | ------------------------------------------------------ Latin | X | | X | | cross-reference Figure 19-3: Physical styles (bolding) applied to preformatted text • The element is ideal for displaying pro- gramming examples on a Web page. Coincidently, even though this is an HTML book, we do have a short section on JavaScript programming (see Part 10). Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
42 Part 2 Task 20 Using the Blockquote Element T he tag designates quoted text, specifically long quotations of paragraph length or more. Browsers typically render text wrapped in tags as an indented paragraph. 1. To designate a block of quoted text, place an opening tag at the beginning of the text to be quoted. 2. To conclude the block of quoted text, place a closing tag at the end of the text to be quoted. A completed example is shown in Listing 20-1. Figure 20-1 shows the results in the browser. The Blockquote Element Edgar Allan Poe The following is a quote from www.poets.org: Edgar Allan Poe was born in Boston, Massachusetts, on January 19, 1809. Poe’s father and mother, both professional actors, died before the poet was three and John and Frances Allan raised him as a foster child in Richmond, Virginia. John Allan, a prosperous tobacco exporter, sent Poe to the best boarding schools and later to the University of Virginia, where Poe excelled academically. After less than one year of school, however, he was forced to leave the University when Allan refused to pay his gambling debts. Listing 20-1: Code example of a block of quoted text Figure 20-1: A block-quoted paragraph rendered in the browser Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Working with Text 43 3. You can increase the amount of indentation using multiple tags, as shown in Listing 20-2. Figure 20-2 shows the results in the browser. Task 20 the Blockquote Element tips Edgar Allan Poe • A quick and easy way to ensure a printable margin for a Web page is to block-quote the entire The following is a quote from www.poets.org: HTML document by placing opening and closing Edgar Allan Poe was born in tags just inside the opening and Boston, Massachusetts, on January 19, 1809. Poe’s father and closing tags. mother, both professional actors, died before the poet was three and John and Frances Allan raised him as a foster child in Richmond, Virginia. John Allan, a prosperous • Using multiple tags to indent text is deprecated tobacco exporter, sent Poe to the best boarding schools and by the W3C in favor of later to the University of Virginia, where Poe excelled Cascading Style Sheets academically. After less than one year of school, however, (see Part 9). he was forced to leave the University when Allan refused to pay his gambling debts. Listing 20-2: Using multiple tags to increase the indentation of a quoted paragraph cross-reference • To learn how to control indentation and margins using CSS, see Tasks 87 and 94. Figure 20-2: Multiple tags that have a cumulative effect Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
44 Part 2 Task 21 Setting Document Margins Y ou can control the document margin with four nonstandard attributes of the tag. Two of the attributes were introduced by Microsoft Internet Explorer; the other two by Netscape Navigator. When defined together, you’re guaranteed margin control, not only in these two major browsers but also in their competitors. 1. In your text editor, open an existing document whose margins you want to modify or just begin a new document. 2. To define the margins of your document, first enter Internet Explorer’s two margin attributes leftmargin and topmargin in your tag: Non-standard Margin Attributes
Working with Text 45 Non-standard Margin Attributes Task 21 The values we’ve set for the four margin attributes tips result in left and right margins that are 100 pixels wide, • Setting your margins to zero allows your design to and top and bottom margins that are 50 pixels high. run to the edges of the browser window. • If being printer-friendly is an issue for your document, understand that the reason Listing 21-1: A document with 50-pixel margins set for top and bottom, and 100-pixel some Web pages don’t print nicely is because margins set for the left and right sides. there’s content running out to the edges of the screen, which corresponds to where the printer rollers grab the paper. If you define sufficiently wide margins, there will be plenty of room for the rollers to grab without interfering with your page content. Figure 21-1: Specified margin settings rendered in the browser cross-reference • Cascading Style Sheets margin properties are covered in Part 9. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
46 Part 2 Task 22 Creating an Ordered List I f you use a word processor to make a numbered list of items, all you have to do is click a button and start typing. Creating them in HTML is almost as easy: Use the (ordered list) and (list item) tags. Both are container tags with opening and closing forms. As the name implies, you use ordered lists to render information of a procedural nature — for example, the items in this task. note 1. In the body of your HTML document, enter an opening tag to • Browsers indent list items by default, not because mark where the list begins. we’ve done so in the code. Indenting your code just 2. Proceed to the next line, indent and enter an opening tag to makes it easier to read. mark the start of the first list item. 3. Follow the opening tag with the text for your list item. 4. Finish the list item with a closing tag. 5. Continue this process, entering as many list items as required to complete your ordered list. There is no limit to the number of items a list can have. 6. To conclude your ordered list, enter a closing tag after the last list item. 7. To format the text of your list, place an opening tag above the list and a closing tag after the list. This way the entire list — numbers and all — receives your formatting. An example of an ordered list is shown in Listing 22-1. The page this code produces appears in Figure 22-1. caution • Even though browsers allow you to omit them, always use closing tags. They produce cleaner, more readable code. And, of course, XHTML requires them. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Working with Text 47 Ordered Lists Task 22 Honest Shampoo Instructions Apply to wet hair Massage gently into hair and scalp Rinse thoroughly Repeat steps 1 - 3 to ensure you burn through a bottle of this stuff a week. Listing 22-1: An ordered list Figure 22-1: An ordered list rendered in the browser cross-reference • Bulleted lists (also called unordered lists) aren’t radi- cally different from ordered lists in their construction. To construct an unordered list, see Task 25. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
48 Part 2 Task 23 Modifying Ordered List Styles B y default, an ordered list renders items with Arabic numerals: 1, 2, 3, and so on. You can modify the style of list items by defining the type attribute of the tag. The type attribute for the tag accepts five possible values. 1. To create an uppercase alphabetical list, set the type attribute equal notes to “A”: • Lists force a blank line after them, just like paragraphs and headings do. 2. To create a lowercase alphabetical list, set the type attribute equal • In theory, you shouldn’t apply the type attribute to “a”: to the tag. However, browsers allow you to get away with using it, not that you’d ever have a reason 3. To create an uppercase Roman numeral list, set the type attribute to do so. equal to “I”: 4. To create a lowercase Roman numeral list, set the type attribute equal to “i”: 5. To create an Arabic numeral list, set the type attribute equal to “1”: 6. To see how each of these styles appears in a browser, enter the code shown in Listing 23-1 into your text editor and test it in a browser. Your results should look similar to Figure 23-1. Figure 23-1: List styles rendered in the browser Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Working with Text 49 Effects of the Type Attribute Task 23 First do this Then do that And then, do everything else I’m not going to do this Or that Or anything else Veni Vidi Vici I came I saw She Conquered This is the same as not defining a type at all You might use this type in a nested list Nested lists are covered a few tasks ahead cross-references • By nesting a series of ordered lists with different Listing 23-1: Different ordered list styles styles, you can create highly detailed formal out- lines. To learn more about nested lists, see Task 27. • Ordered list styles can also be controlled via Cascading Style Sheets. To learn more about CSS, see Part 9. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
50 Part 2 Task 24 Modifying an Ordered List’s Starting Character H TML tries to be logical. Consequently, the attribute you define to specify the starting number or character in an ordered list is named start. This attribute allows you to maintain an unbroken ordering sequence even if you have note to separate lists with paragraph text. You specify the value of an individual list • While the values of the start and value attrib- item using the value attribute. utes are always defined 1. Enter an ordered list as discussed in Tasks 22 and 23. with an integer, the corre- sponding list item charac- 2. Follow the list with paragraph text. ter may not be numerical. For example, if the ordered 3. Create a second ordered list, defining the start attribute and setting list’s type attribute equals it equal to the number you want the second list to begin with. Listing A (creating an uppercase 24-1 shows a complete document sample, and Figure 24-1 shows the A, B, C list), setting the start or value attribute sample code displayed in the browser. In this example, the start equal to 3 begins the list attribute equals 4, which forces the second list to begin with 4. with “C.” In an uppercase Roman numeral list (type=“I”), the list would begin with III, etc. Ordered Lists To shampoo, follow these steps: Apply to wet hair Massage gently into hair and scalp Rinse thoroughly Then, to condition proceed by: Wringing excess water from hair Apply conditioner and massage gently into hair from roots to ends Rinse thoroughly with warm water Listing 24-1: Specifying an ordered list’s starting number Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Working with Text 51 Task 24 Figure 24-1: A continuous ordered list, separated by text, rendered in the browser 4. You can achieve the same effect using the value attribute of the first tag, as shown here. Subsequent tags follow in order. Wringing excess water from hair Apply conditioner and massage gently into hair from roots to ends Rinse thoroughly with warm water Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
52 Part 2 Task 25 Creating an Unordered List W hat word processing calls a bulleted list, HTML refers to as an unordered list. You create these using the tag and the same tag that ordered lists use. 1. In the body of your HTML document, enter a tag. notes 2. Begin your list items by proceeding to the next line, indenting, and • Just like ordered lists, there’s no limit to the entering an tag. number of list items you 3. Follow the opening tag with the text for your list item and end can have. it with a closing tag. • As with the ordered lists, browsers indent list items 4. Continue this process, entering list items to complete your by default, not because unordered list. we’ve done so in the code. Indenting your code makes 5. End the unordered list with a closing tag. An example of an it easier to read. unordered list appears in Listing 25-1. The page this code produces appears in Figure 25-1. • The HTML standard con- tains a directory and menu list, created with and tags. Like ordered and unordered lists, they used tags for their list items. The directory list was supposed to create multicolumn lists, and the menu list was meant for single columns. Unfortunately, no browser ever attempted to render these lists. Using these tags simply creates an unordered list. caution • Always use closing tags. They make for cleaner, more readable code, and XHTML requires them. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Working with Text 53 Unordered Lists Task 25 Points to Remember Don’t run with scissors Don’t play with your food Don’t forget to wash your hands Listing 25-1: An unordered list Figure 25-1: An unordered list rendered in the browser cross-reference • The default bullet style for unordered lists is typically a small filled-in disc. To see how to modify bullet styles, see Task 26. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
54 Part 2 Task 26 Modifying Bullet Styles J ust like the tag, the tag accepts the type attribute. In this case, the type attribute governs the style of the bullet that precedes each list item. The possible values for the type attribute are disc, square, and circle. 1. Create an unordered list as described in Task 25. notes 2. To create square bullets, set the type attribute equal to square: • Browsers typically display “square” as a small filled-in square, “circle” as a small circle outline, and “disc” as a small filled-in circle. 3. To create circular bullets, set the type attribute equal to circle: • The disc style is the com- mon browser default value, meaning it’s the style most 4. To create disc bullets, set the type attribute equal to disc: browsers display if you don’t define the type attribute. 5. To see how each of these styles appears in a browser, enter the code shown in Listing 26-1 into your text editor and test it in a browser. Your results should look similar to Figure 26-1. caution • The HTML standard states that disc, square, and circle are not case- sensitive. However, because XHTML is case-sensitive you should always use lowercase when defining attributes. Figure 26-1: Different bullet styles rendered in the browser Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Working with Text 55 Unordered Lists Task 26 Points to Remember Ordered lists have alpha-numeric styles tip Unordered lists have bullet styles • Although the HTML and XHTML standards don’t Each list controls these styles with the recognize this practice, type attribute most browsers allow you to define the type attribute for the individual tags as well. Ordered lists have alpha-numeric styles Unordered lists have bullet styles Each list controls these styles with the type attribute Ordered lists have alpha-numeric styles Unordered lists have bullet styles Each list controls these styles with the type attribute Unordered lists default to a disc style Ordered lists default to Arabic numerals We still have a third kind of list to learn Listing 26-1: Code showing different bulleted list styles cross-reference • The default bullet style is also influenced by nesting. To learn how to nest lists, see Task 27. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.