HTML in 10 Steps or Less- P4 pdf

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, logical styles, to date, produce the same effect on text as physical styles. 1. To place emphasis on a chosen word, place the text between and tags: Emphasis looks italic 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 <code> and </code> tags: <code>Code</code> looks like <tt>teletype</tt> 4. To define a sample of literal characters, use the <samp> and </samp> tags: <samp>Sample</samp> looks like <tt>teletype</tt> too. 5. To define text as it should be typed by a user, for example in an instructional manual, use the <kbd> and </kbd> tags (short for “keyboard”): <kbd>Keyboard</kbd> also looks like <tt>teletype</tt>. 6. To define text as a variable name, for example in a programming language, use the <var> and </var> tags: <var>Variable</var> looks italic. 7. To format text as a term definition, use the <dfn> and </dfn> tags: <dfn>Definition</dfn> also looks italic. 8. To define a citation, as out of a book, use the <cite> and </cite> tags: <cite>Cite</cite> is another logical style that looks italic. Figure 17-1 shows the results of the code listed in Listing 17-1. note • Logical styles are favored over the deprecated physical styles not only in XHTML but also in HTML 4 and 4.01. 36 Part 2 Task 17 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 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). <html> <head> <title>Logical Styles</title> </head> <body> Emphasis looks italic. Strong looks bold. <code>Code</code> looks like <tt>teletype</tt>. <samp>Sample</samp> looks like <tt>teletype</tt> too. <kbd>Keyboard</kbd> also looks like <tt>teletype</tt>. <var>Variable</var> looks italic. <dfn>Definition</dfn> also looks italic. <cite>Cite</cite> is another logical style that looks italic. </body> <html> Listing 17-1: Logical styles set in HTML Figure 17-1: Logical styles rendered in the browser Working with Text 37 Task 17 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 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 processor, you insert a symbol from some menu or dialog box. In HTML, these symbols are referred to as character entities or special characters. Instead of tags, character entities are rendered numerically, beginning with an ampersand (&) and pound sign (#) and ending with a semicolon. This task shows you how to render a number of the more common character entities. 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 displays the results in a browser. note • Character entities are also referred to as special characters. 38 Part 2 Task 18 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tip • Most character entities have an English-language equivalent. For example, the copyright symbol can also be written as © and the registered sign as ®. <html> <head> <title>Character Entities</title> </head> <body> This book is copyrighted ©2003 My Favorite cola is Pepsi® My company name: Alpha-Gizmo ¼ teaspoon salt in my soup. ½ teaspoon sugar in my tea. ¾ cup of honey is way too much! I remember when a pay phone cost 10¢ A $500,000 house only costs £300,084.44 Which is an astronomical ¥59,037,844.65 But a moderate €436,305.17 </body> </html> Listing 18-1: Character entities in HTML Figure 18-1: Character entities rendered in the browser Working with Text 39 Task 18 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. 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 <pre> tag tells the browser that text is preformatted, 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 <pre> tags with a monospaced font. 1. Begin the region of your document to preformat with an opening <pre> tag. 2. Enter the text you want preformatted into the document. 3. Close the preformatted region with a closing </pre> tag, as in the following code. Figure 19-1 shows how it looks in your browser. <pre> | Mon | Tues | Wed | Thurs | Fri | | | | | Calculus | X | | X | | English | | X | | X | Latin | X | | X | | </pre> Figure 19-1: Code inside the <pre> 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). <pre> | Mon | Tues | Wed | Thurs | Fri | | | | | Calculus | X | | X | | English | | X | | X | Latin | X | | X | | </pre> note • Though the tags will then move the original text out of position, the browser doesn’t display space occupied by tags so there won’t be any effect on alignment. 40 Part 2 Task 19 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tip • Monospaced fonts give each character identical spacing, which allows you to line up text evenly. If you include a face attribute in your tag and don’t specify a monospaced font, the alignment of preformatted elements may be off. Figure 19-2: Nesting tags within preformatted text to enlarge the point size 5. To include logical or physical style tags inside <pre> tags, first enter your text and test it in a browser to check your alignments. Then go back to the code and insert the tags around your text choices, as shown in the following code. Figure 19-3 shows how it looks in the browser. <pre> | Mon | Tues | Wed | Thurs | Fri | | | | | Calculus | X | | X | | English | | X | | X | Latin | X | | X | | </pre> Figure 19-3: Physical styles (bolding) applied to preformatted text Working with Text 41 Task 19 cross-reference • The <pre> element is ideal for displaying programming 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. Using the Blockquote Element T he <blockquote> tag designates quoted text, specifically long quotations of paragraph length or more. Browsers typically render text wrapped in <blockquote> tags as an indented paragraph. 1. To designate a block of quoted text, place an opening <blockquote> tag at the beginning of the text to be quoted. 2. To conclude the block of quoted text, place a closing </blockquote> 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. <html> <head> <title>The Blockquote Element</title> </head> <body text=”#000000” bgcolor=”#FFFFFF”> <h1>Edgar Allan Poe</h1> The following is a quote from www.poets.org: <blockquote>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.</blockquote> </body> </html> Listing 20-1: Code example of a block of quoted text Figure 20-1: A block-quoted paragraph rendered in the browser 42 Part 2 Task 20 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tips • A quick and easy way to ensure a printable margin for a Web page is to block-quote the entire HTML document by placing opening and closing <blockquote> tags just inside the opening and closing <body> tags. • Using multiple <blockquote> tags to indent text is deprecated by the W3C in favor of Cascading Style Sheets (see Part 9). 3. You can increase the amount of indentation using multiple <blockquote> tags, as shown in Listing 20-2. Figure 20-2 shows the results in the browser. <html> <head> <title>the Blockquote Element</title> </head> <body text=”#000000” bgcolor=”#FFFFFF”> <h1>Edgar Allan Poe</h1> The following is a quote from www.poets.org: <blockquote><blockquote>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.</blockquote></blockquote> </body> </html> Listing 20-2: Using multiple <blockquote> tags to increase the indentation of a quoted paragraph Figure 20-2: Multiple <blockquote> tags that have a cumulative effect Working with Text 43 Task 20 cross-reference • To learn how to control indentation and margins using CSS, see Tasks 87 and 94. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Setting Document Margins Y ou can control the document margin with four nonstandard attributes of the <body> 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 <body> tag: <html> <head> <title>Non-standard Margin Attributes</title> </head> <body leftmargin= topmargin= > </body> </html 3. Follow these two attributes with Netscape Navigator’s two attributes, marginwidth and marginheight: <body leftmargin= topmargin= marginwidth= marginheight=> 4. Set each attribute equal to a numeric value (representing pixels), as shown in Listing 21-1. The value you specify for leftmargin and marginwidth set the width of both your left and right margins. Your topmargin and marginheight values set the width of both the top and bottom margins. Figure 21-1 shows the result of this code in your browser. 44 Part 2 Task 21 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tips • Setting your margins to zero allows your design to run to the edges of the browser window. • If being printer-friendly is an issue for your document, understand that the reason some Web pages don’t print nicely is because 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. <html> <head> <title>Non-standard Margin Attributes</title> </head> <body leftmargin=”100” topmargin=”50” marginwidth=”100” marginheight=”50”> The values we’ve set for the four margin attributes result in left and right margins that are 100 pixels wide, and top and bottom margins that are 50 pixels high. </body> </html> Listing 21-1: A document with 50-pixel margins set for top and bottom, and 100-pixel margins set for the left and right sides. Figure 21-1: Specified margin settings rendered in the browser Working with Text 45 Task 21 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. [...]... 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. .. meant for single columns Unfortunately, no browser ever attempted to render these lists Using these tags simply creates an unordered list 2 Begin your list items by proceeding to the next line, indenting, and entering an tag 3 Follow the opening tag with the text for your list item and end it with a closing tag 4 Continue this process, entering list items to complete your unordered... list 5 End the unordered list with a closing tag An example of an unordered list appears in Listing 25-1 The page this code produces appears in Figure 25-1 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 Unordered Lists... 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... 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 24 52 Task 25 Part 2 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,... 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 < /html> Listing 24-1: Specifying an ordered list’s starting... Browsers indent list items by default, not because we’ve done so in the code Indenting your code just makes it easier to read 1 In the body of your HTML document, enter an opening tag to mark where the list begins 2 Proceed to the next line, indent and enter an opening tag to mark the start of the first list item 3 Follow the opening tag with the text for your list item 4 Finish the... Task 24 Part 2 Modifying an Ordered List’s Starting Character H note • While the values of the start and value attributes are always defined with an integer, the corresponding list item character may not be numerical For example, if the ordered list’s type attribute equals A (creating an uppercase A, B, C list), setting the start or value attribute equal to 3 begins the list with “C.” In an uppercase Roman... would begin with III, etc 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 to separate lists with paragraph text You specify the value of an individual list item using the value attribute 1 Enter an ordered list as discussed in Tasks... < /html> cross-references • Listing 23-1: Different ordered list styles • By nesting a series of ordered lists with different styles, you can create highly detailed formal outlines 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 . printable margin for a Web page is to block-quote the entire HTML document by placing opening and closing <blockquote> tags just inside the opening and closing <body> tags. • Using. 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. 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 <body> tag: < ;html& gt; <head> <title>Non-standard

Định dạng
Số trang	20
Dung lượng	573,31 KB