Tài liệu Web Programming with HTML, XHTML, and CSS Second Edition- P2 pptx

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang	50
Dung lượng	1,11 MB

Nội dung

The align attribute has been replaced with the text-align property in CSS and the ability to float block- level elements (as you will see in Chapter 7). The align attribute is covered in more detail in Appendix I. Creating Paragraphs Using the Element The element offers another way to structure your text. Each paragraph of text should go in between an opening and closing tag, as in this example (ch01_eg07.html): Here is a paragraph of text. Here is a second paragraph of text. Here is a third paragraph of text. When a browser displays a paragraph, it usually inserts a new line before the next paragraph and adds a little bit of extra vertical space, as in Figure 1-8. Figure 1-8 The element can carry all of the universal attributes and the deprecated align attribute: align class id style title dir lang xml:lang Creating Line Breaks Using the Element Whenever you use the element, anything following it starts on the next line. The element is an example of an empty element, where you do not need opening and closing tags, because there is nothing to go in between them. The element has a space between the characters br and the forward slash. If you omit this space, older browsers will have trouble rendering the line break, whereas if you miss the forward slash character and just use , it is not valid XHTML. Most browsers allow you to use multiple elements to push text down several lines, and many designers use two line breaks between paragraphs of text rather than using the element to structure text, as follows: Paragraph one Paragraph two Paragraph three 21 Chapter 1: Creating Structured Documents 59313c01.qxd:WroxPro 3/22/08 2:32 PM Page 21 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. While this creates a similar effect to using the paragraph element, if you do not use the element itself for each paragraph then the document is no longer describing where each paragraph starts and finishes. Further - more, in Strict XHTML the element can be used only within what are known as block-level elements. These are elements such as the element—elements that tend to naturally act as though they have a line break before and after them. You learn more about block-level elements near the end of the chapter. Avoid using elements just to position text; such usage can produce unexpected results because the amount of space created when you do so depends upon the size of the font. Instead, you should use CSS, which you learn about in Chapter 7. Here you can see an example of the element in use within a paragraph (ch01_eg08.html): When you want to start a new line you can use the element. So, the next word will appear on a new line. Figure 1-9 shows you how the line breaks after the words “next” and “do” look. Figure 1-9 The element can carry the core attributes as well as an attribute called clear, which can be used with images, and is covered in Appendix I. clear class id style title Creating Preformatted Text Using the <pre> Element Sometimes you want your text to follow the exact format of how it is written in the XHTML document— you don’t want the text to wrap onto a new line when it reaches the edge of the browser; you don’t want it to ignore multiple spaces; and you want the line breaks where you put them. 22 Chapter 1: Creating Structured Documents 59313c01.qxd:WroxPro 3/22/08 2:32 PM Page 22 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Any text between the opening <pre> tag and the closing </pre> tag will preserve the formatting of the source document. You should be aware, however, that most browsers would display this text in a monospaced font by default. (Courier is an example of a monospaced font, because each letter of the alphabet takes up the same width. In non-monospaced fonts, an i is usually narrower than an m.) Two of the most common uses of the <pre> element are to display tabular data without the use of a table (in which case you must use the monospaced font or columns will not align correctly) and to represent computer source code. For example, the following shows some JavaScript inside a <pre> element ( ch01_eg09.html): <pre> function testFunction(strText){ alert (strText) } </pre> You can see in Figure 1-10 how the content of the <pre> element is displayed in the monospaced font; more important, you can see how it follows the formatting shown inside the <pre> element—the white space is preserved. Figure 1-10 While tab characters can have an effect inside a <pre> element, and a tab is supposed to represent eight spaces, the implementation of tabs varies across browsers, so it is advisable to use spaces instead. You will come across more elements that can be used to represent code later in this chapter in the section “Phrase Elements,” which covers the <code>, <kbd>, and <var> elements. Firefox, IE, and Safari support an extension to the XHTML recommendation that prevents line breaks: the element. (This retains the normal style of its containing element and does not result in the text being displayed in a monospaced font.) Because it is an extension, it is not valid XHTML. The element is covered in Appendix I. Try It Out Basic Text Formatting Now that you’ve seen the basic elements that you will be using to format your text—headings and paragraphs—it’s time to try putting that information to work. 23 Chapter 1: Creating Structured Documents 59313c01.qxd:WroxPro 3/22/08 2:32 PM Page 23 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. In this example, you create a new page for a site about jazz legends, and this page tells people about Miles Davis. So, start up your text editor or web page authoring tool and follow these steps: 1. You will be creating a Strict XHTML document, so add the XML declaration and a DOCTYPE dec laration to indicate that you will be writing Strict XHTML: <?xml version=”1.0” encoding=”UTF-8”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> 2. Add the skeleton of the document: the <html>, <head>, <title>, and <body> elements. The root <html> element carries the xmlns attribute to indicate that the markup belongs to the XHTML namespace. <?xml version=”1.0” encoding=”UTF-8”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”> <head> <title>Jazz Legends - Miles Davis</title> </head> <body> </body> </html> 3. Your page will have a main heading and some level 2 headings, which show the general structure of the page people will see: <body> <h1>Jazz Legends - Miles Davis</h1> <h2>Styles of Miles</h2> <h2>Davis the Painter</h2> </body> 4. You can now fill out the page with some paragraphs that follow the headings: <body> <h1>Jazz Legends - Miles Davis</h1> Miles Davis is known to many as one of the world’s finest jazz musicians and an outstanding trumpet player. He also earned great respect in the world of music as an innovative bandleader and composer. <h2>Styles of Miles</h2> Miles Davis played and wrote in a variety of styles throughout his career, from tunes that have become jazz standards to his more experimental improvisational work. In the 1950s Miles was known for a warm, rich, wispy sound and was able to vary the color of his sound, pitch. He was also adept in using a Harmon mute. In the 1960s Miles began to play more in the upper register. In 1969 he even incorporated the use of electronic instruments in his music. <h2>Davis the Painter</h2> Miles’ love was not only for music; he is also considered a fine painter. Inspired by a Milan-based design movement known as Memphis, Miles painted a series of abstract paintings in 1988. </body> </html> 24 Chapter 1: Creating Structured Documents 59313c01.qxd:WroxPro 3/22/08 2:32 PM Page 24 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 5. Save the file as miles.html and then open it in a web browser. The result should look something like Figure 1-11. Figure 1-11 How It Works The opening line of this page is the optional XML declaration. Because this is a Strict XHTML document (and therefore is an XML document), it has been included here. The next line is the DOCTYPE declaration, which is required in Strict XHTML documents. The DOCTYPE declaration indicates which version of XHTML the document conforms to. <?xml version=”1.0” encoding=”UTF-8”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> The entire page is then contained in the root <html> element. The opening <html> tag carries the namespace identifier, which is just another way of indicating that the markup your document contains is XHTML. The <html> element also carries the lang attribute, which indicates the language that the document is written in. Our web page is written in English, so it uses the two-letter ISO code for English (the full list of country codes can be found in Appendix G). While the lang attribute has little practical use at the moment, it will help future-proof your documents. <html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”> The <html> element can contain only two child elements: the <head> element and <body> element. The <head> element contains the title for the page, and you should be able to tell from the title of the page the type of information the page will contain. <head> <title>Jazz Legends: Miles Davis</title> </head> 25 Chapter 1: Creating Structured Documents 59313c01.qxd:WroxPro 3/22/08 2:32 PM Page 25 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Meanwhile, the <body> element contains the main part of the web page—the part that viewers will actu- ally see in the main part of the web browser. Note how this page contains headings to structure the information on the page just as you would find in a word-processed document. There are different levels of headings to help enforce structure. In this example, there is a main heading introducing Miles Davis—the main topic for this page—and then subheadings, each containing specific information about his music and other interests. Don’t forget the closing </html> tag at the end—after all, you must close every element correctly. Presentational Elements If you use a word processor, you are familiar with the ability to make text bold, italic, or underlined; these are just three of the ten options available to indicate how text can appear in HTML and XHTML. The full list is bold, italic, monospaced, underlined, strikethrough, teletype, larger, smaller, superscripted, and subscripted text. Technically speaking, these elements affect only the presentation of a document, and the markup is of no other use, but they remain in both Transitional and Strict XHTML 1.0. As you will see later in the chapter, there are dedicated elements for indicating things like emphasis within a piece of text, and these will result in a similar presentation of the information. All of the following presentational elements can carry the universal attributes and the UI event attributes you met earlier in the chapter. You should also be aware that you can use CSS to get similar results, as you will see in Chapter 7. The Element Anything that appears in a element is displayed in bold, like the word bold here: The following word uses a bold typeface. This does not necessarily mean the browser will use a boldface version of a font. Some browsers use an algorithm to take a font and make the lines thicker (giving it the appearance of being bold), while others (if they cannot find a boldface version of the font) may highlight or underline the text. This element has the same effect as the element, which you will meet later, and is used to indicate that its contents have strong emphasis. The Element The content of an element is displayed in italicized text, like the word italic here: The following word uses an italic typeface. 26 Chapter 1: Creating Structured Documents 59313c01.qxd:WroxPro 3/22/08 2:32 PM Page 26 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. This does not necessarily mean the browser will look for an oblique or italicized version of the font. Most browsers use an algorithm to put the lines on a slant to simulate an italic font. The element has the same effect as the element, which you will meet later, and which is used to indicate that its contents have emphasis. The Element (deprecated) The content of a element is underlined with a simple line: The following word would be underlined The element is deprecated in HTML 4 and XHTML 1.0, although it is still supported by current browsers. The preferred method is to use CSS to achieve this effect, which you’ll learn about in Chapter 7. The <s> and <strike> Elements (deprecated) The content of an <s> or <strike> element is displayed with a strikethrough, which is a thin line through the text ( <s> is just the abbreviated form of <strike>). The following word would have a <s>strikethrough</s>. Both the <s> and <strike> elements are deprecated in HTML 4.1 and Transitional XHTML 1.0, and were removed from Strict XHTML 1.0, although they are still supported by current browsers. The preferred method is to use CSS to achieve this effect, which you learn about in Chapter 7. The <tt> Element The content of a <tt> element is written in monospaced font. The following word will appear in a <tt>monospaced</tt> font. Figure 1-12 shows the use of the , , , <s>, and <tt> elements (ch01_eg10.html). Figure 1-12 27 Chapter 1: Creating Structured Documents 59313c01.qxd:WroxPro 3/22/08 2:32 PM Page 27 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. The Element The content of a element is written in superscript; the font size used is the same size as the characters surrounding it but is displayed half a character’s height above the other characters. Written on the 31st February. The element is especially helpful in adding exponential values to equations, and adding the st, nd, rd, and th suffixes to numbers such as dates. However, in some browsers, you should be aware that it can create a taller gap between the line with the superscript text and the line above it. The Element The content of a element is written in subscript; the font size used is the same as the characters surrounding it, but is displayed half a character’s height beneath the other characters. The EPR paradox2 was devised by Einstein, Podolsky, and Rosen. The element is particularly helpful when combined with the <a> element (which you meet in the next chapter) to create footnotes. The <big> Element The content of the <big> element is displayed one font size larger than the rest of the text surrounding it. If the font is already the largest size, it has no effect. You can nest several <big> elements inside one another, and the content of each will get one size larger for each element. The following word should be <big>bigger</big> than those around it. In general, you should use CSS rather than the <big> element for formatting purposes. The Element The content of the element is displayed one font size smaller than the rest of the text surrounding it. If the font is already the smallest, it has no effect. You can nest several elements inside one another, and the content of each gets one size smaller for each element. The following word should be smaller than those around it. In general, you should use CSS rather than the element for formatting purposes. The <hr /> Element The <hr /> element creates a horizontal rule across the page. It is an empty element, rather like the element. <hr /> This is frequently used to separate distinct sections of a page where a new heading is not appropriate. 28 Chapter 1: Creating Structured Documents 59313c01.qxd:WroxPro 3/22/08 2:32 PM Page 28 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Figure 1-13 shows the use of the , , <big>, , and <hr /> elements (ch01_eg11.html). Figure 1-13 Phrase Elements The following elements are not used as widely as the elements you have met so far. As the element names indicate, they are designed to describe their content: ❑ and for emphasis ❑ <blockquote>, <cite>, and <q> for quotations and citations ❑ <abbr>, <acronym>, and <dfn> for abbreviations, acronyms, and key terms ❑ <code>, <kbd>, <var>, and <samp> for computer code and information ❑ <address> for addresses While some of these phrase elements are displayed in a manner similar to the , , <pre>, and <tt> elements you have already seen, they are designed for specific purposes. For example, the and elements give text emphasis and strong emphasis respectively and there are several elements for marking up quotes. It is tempting to ignore these elements and just use the presentational elements you just met to create the same visual effect, but you should be aware of them and preferably get into the habit of using them where appropriate. For example, where you want to add emphasis to a word within a sentence you should use the and elements rather than the presentational elements you just met; there are several good reasons for this, such as: ❑ Applications such as screen readers (which can read pages to web users with visual impairments) could add suitable intonation to the reading voice so that users with visual impairments could hear where the emphasis should be placed. ❑ Automated programs could be written to find the words with emphasis and pull them out as keywords within a document, or specifically index those words so that a user could find important terms in a document. 29 Chapter 1: Creating Structured Documents 59313c01.qxd:WroxPro 3/22/08 2:32 PM Page 29 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. As you can see, appropriate use of these elements adds more information to a document (such as which words should have emphasis, which are parts of programming code, which parts are addresses, and so on) rather than just saying how it should be presented visually. All of the following phrase elements can carry the universal attributes and the UI event attributes you met earlier in the chapter. The Element Adds Emphasis The content of an element is intended to be a point of emphasis in your document, and it is usually displayed in italicized text. The kind of emphasis intended is on words such as “must” in the following sentence: You must remember to close elements in XHTML. You should use this element only when you are trying to add emphasis to a word, not just because you want to make the text appear italicized. If you just want italic text for stylistic reasons—without adding emphasis—you can use either the element or CSS. The Element Adds Strong Emphasis The element is intended to show strong emphasis for its content—stronger emphasis than the element. As with the element, the element should be used only when you want to add strong emphasis to part of a document. Rather than being rendered in an italic font, most visual browsers display the strong emphasis in a bold font. Always look at burning magnesium through protective colored glass as it can cause blindness. Figure 1-14 shows how the and elements are rendered in Firefox (ch01_eg12.html). You need to remember that how the elements are presented (italics or bold) is largely irrelevant. You should use these elements to add emphasis to phrases, and therefore give your documents greater meaning, rather than to control how they appear visually. As you will see in Chapter 7, it is quite simple with CSS to change the visual presentation of these elements—for example to highlight any words inside an element with a yellow background and make them bold rather than italic. Figure 1-14 30 Chapter 1: Creating Structured Documents 59313c01.qxd:WroxPro 3/22/08 2:32 PM Page 30 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... datetime, and title attributes just like the element When you learn how to use CSS, you will see how it would be possible to show and hide the inserted and deleted content as required Using Character Entities for Special Characters You can use most alphanumeric characters in your document and they will be displayed without a problem There are, however, some characters that have special meaning in XHTML,. .. Links and Navigation What really distinguishes the Web from other mediums is the way in which web pages can contain links that take you directly to other pages (and even specific parts of a given page) Known as hyperlinks, these links are often credited with being the secret behind the Web s phenomenal success Hyperlinks allow visitors to navigate between web sites by clicking on words, phrases, and. .. , , , , , , , , , , , and ❑ Lists such as unordered lists using and , ordered lists using and , and definition lists using , , and ❑ Editing elements such as and ❑ Grouping elements and You will obviously use some of these elements more than others, but where an element... <h1> and elements will not sit on the same line, whereas the inline elements flow with the rest of the text. You can see what this looks like in Figure 1-27 Figure 1-27 You should also be aware that in Strict XHTML, block-level elements can contain other block-level elements, and inline elements However, inline elements can appear only within block-level elements, and they... Grouping Elements with and The and elements allow you to group several elements to create sections or subsections of a page On their own, they will not affect the appearance of a page, but they are commonly used with CSS to allow you to attach a style to a section of a page (as you will see in Chapter 7) For example, you might want to put all of the footnotes on a page within a ... met a lot of new elements and learned the attributes they can carry You’ve seen how every XHTML document should contain at least the , , , and elements, and how the element should carry a namespace identifier You then met some attributes: the core attributes (class, id, and title), the internationalization attributes (dir, lang, and xml:lang), and the UI event attributes,... carriage return or line break before and after them For example the , , , , , , , , , , , , , and elements are all block-level elements They all start on their own new line, and anything that follows them appears on its own new line, too Inline elements, on the other hand, can appear within sentences and do not have to appear on a new... element for use with smaller quotations, as discussed in the next section Here’s ch01_eg14.html: The following description of XHTML is taken from the W3C Web site: XHTML 1.0 is the W3C’s first Recommendation for XHTML, following on from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0 Text inside a element is usually indented from the left and right... href=”http://www.wrox.com/”>Wrox Web site? This link points to the Wrox web site As you can see, the value of the href attribute is the same as you would type into a browser if you wanted to visit the Wrox web site This is known as a qualified URL because it contains the domain name for the web site When you are linking to pages that make up part of the same web site, you can use a shorthand form called... reference to the book this recipe is adapted from The next sentence makes use of the element so you can write “1st” and use superscript text—although you will note that this makes the gap between the first line and the second line of text larger than the gap between the second and third lines of text (as the superscript letters poke above Please purchase PDF Split-Merge on www.verypdf.com to remove . finest jazz musicians and an outstanding trumpet player. He also earned great respect in the world of music as an innovative bandleader and composer. <h2>Styles. content: ❑ and for emphasis ❑ <blockquote>, <cite>, and <q> for quotations and citations ❑ <abbr>, <acronym>, and

Ngày đăng: 21/01/2014, 13:20

Xem thêm