Thông tin tài liệu
ptg ▼ is parsed; comments don’t ever show up onscreen—that’s why they’re comments. Comments look like the following: <! This is a comment > Here are some examples: <! Rewrite this section with less humor > <! Neil helped with this section > <! Go Tigers! > As you can see from Figure 4.4, users can view your comments using the View Source functionality in their browsers, so don’t put anything in comments that you don’t want them to see. 76 LESSON 4: Learning the Basics of HTML FIGURE 4.4 HTML comments displayed within the source for a page. Task: Exercise 4.1: Creating a Real HTML Page At this point, you know enough to start creating simple HTML pages. You understand what HTML is, you’ve been introduced to a handful of tags, and you’ve even opened an HTML file in your browser. You haven’t created any links yet, but you’ll get to that soon enough, in Lesson 8, “Using CSS to Style a Site.” This exercise shows you how to create an HTML file that uses the tags you learned about up to this point. It gives you a feel for what the tags look like when they display onscreen and for the sorts of typical mistakes you’re going to make. (Everyone makes them, and that’s why using an HTML editor that does the typing for you is often helpful. The editor doesn’t forget the closing tags, leave off the slash, or misspell the tag.) , Download from www.wowebook.com ptg So, create a simple example in your text editor. Your example doesn’t have to say much of anything; all it needs to include are the structure tags, a title, a couple of headings, and a paragraph or two. Here’s an example: Input ▼ <!DOCTYPE html><html> <head> <title>Camembert Incorporated</title> </head> <body> <h1>Camembert Incorporated</h1> <p>”Many’s the long night I dreamed of cheese toasted, mostly.” Robert Louis Stevenson</p> <h2>What We Do</h2> <p>We make cheese. Lots of cheese; more than eight tons of cheese a year.</p> <h2>Why We Do It</h2> <p>We are paid an awful lot of money by people who like cheese. So we make more.</p> </body> </html> Save the example to an HTML file, open it in your browser, and see how it came out. If you have access to a device other than a computer that has access to the Web, like a mobile phone, check out your page there as well, and take note of the differences between them. Figure 4.5 shows what the cheese factory example looks like. Comments 77 4 , Output ▼ FIGURE 4.5 The cheese factory example. ▲ Download from www.wowebook.com ptg Summary HTML, a text-only markup language used to describe hypertext pages on the World Wide Web, describes the structure of a page, not its appearance. In this lesson, you learned what HTML is and how to write and preview simple HTML files. You also learned about the HTML tags shown in Table 4.1. TABLE 4.1 HTML Tags from Lesson 4 Tag Attribute Use <html> </html> The entire HTML page <head> </head> The head, or prologue, of the HTML page <body> </body> All the other content in the HTML page <title> </title> The title of the page <h1> </h1> First-level heading <h2> </h2> Second-level heading <h3> </h3> Third-level heading <h4> </h4> Fourth-level heading <h5> </h5> Fifth-level heading <h6> </h6> Sixth-level heading <p> </p> A paragraph Workshop You’ve learned a lot in this lesson, and the following workshop can help you remember some of the most important points. I’ve anticipated some of the questions you might have in the first section of the workshop. Q&A Q In some web pages, I’ve noticed that the page structure tags (<html>, <head>, <body>) aren’t used. Do I really need to include them if pages work just fine without them? A Most browsers handle plain HTML without the page structure tags. The XHTML 1.0 recommendation requires that these tags appear in your pages. It’s a good idea to get into the habit of using them now. Including the tags allows your pages to be read by more general SGML tools and to take advantage of features of future browsers. And using these tags is the correct thing to do if you want your pages to conform to true HTML format. 78 LESSON 4: Learning the Basics of HTML Download from www.wowebook.com ptg Q Is the <p> tag the general-purpose tag for use when styling a page? A No. The <div> tag is the general purpose tag for containing content on a page. The <p> tag is intended specifically to hold paragraphs of text. There are many tags that are not valid when placed within a <p> tag, including <div>. You learn more about <div> in Lesson 7, “Formatting Text with HTML and CSS.” Q Is it possible to put HTML tags inside comments? A Yes, you can enclose HTML tags within comments, and the browser will not dis- play them. It’s common to use comments to temporarily hide sections of a page, especially when testing things. Programmers (and web developers) generally refer to this as “commenting it out.” Quiz 1. What three HTML tags describe the overall structure of a web page, and what do each of them define? 2. Where does the <title> tag go, and what is it used for? 3. How many different levels of headings does HTML support? What are their tags? 4. Why is it a good idea to use two-sided paragraph tags, even though the closing tag </p> is optional in HTML? Quiz Answers 1. The <html> tag indicates that the file is in the HTML language. The <head> tag specifies that the lines within the beginning and ending points of the tag are the prologue to the rest of the file. The <body> tag encloses the remainder of your HTML page (text, links, pictures, and so on). 2. The <title> tag indicates the title of a web page in a browser’s bookmarks, hotlist program, or other programs that catalog web pages. This tag always goes inside the <head> tags. 3. HTML supports six levels of headings. Their tags are <h1 /h1> through <h6 /h6>. 4. The closing </p> tag becomes important when aligning text to the left, right, or center of a page. (Text alignment is discussed in Lesson 7.) Closing tags also are required for XHTML 1.0. Workshop 79 4 Download from www.wowebook.com ptg Exercises 1. Using the Camembert Incorporated page as an example, create a page that briefly describes topics that you would like to cover on your own website. You’ll use this page to learn how to create your own links in Lesson 5. 2. Create a second page that provides further information about one of the topics you listed in the first exercise. Include a couple of subheadings (such as those shown in Figure 4.2). If you feel adventurous, complete the page’s content and include lists where you think they enhance the page. This exercise can also help prepare you for Lesson 5. 80 LESSON 4: Learning the Basics of HTML Download from www.wowebook.com ptg LESSON 5 Organizing Information with Lists In the previous lesson, you learned about the basic elements that make up a web page. This lesson introduces lists, which, unlike the other tags that have been discussed thus far, are composed of multiple tags that work together. As you’ll see, lists come in a variety of types, and can be used not only for traditional purposes, like shopping lists or bulleted lists, but also for creating outlines or even navigation for websites. In this les- son, you’ll learn the following: n How to create numbered lists n How to create bulleted lists n How to create definition lists n The Cascading Style Sheets (CSS) properties associated with lists Download from www.wowebook.com ptg Lists: An Overview Lists are a general-purpose container for collections of things. They come in three vari- eties. Ordered lists are numbered and are useful for presenting things like your top 10 favorite songs from 2010 or the steps to bake a cake. Unordered lists are not numbered and by default are presented with bullets for each list item. However, these days unordered lists are often used as a general-purpose container for any list-like collection of items. Yes, they’re frequently used for bulleted lists of the kind you might see on a PowerPoint slide, but they’re also used for things like collections of navigation links and even pull-down menus. Finally, definition lists are used for glossaries and other items that pair a label with some kind of description. 82 LESSON 5: Organizing Information with Lists Older HTML standards also supported two additional list types: menu lists ( <menu>) and directory lists (<dir>). Menu lists were deprecated until HTML5, but they have been reinstated for use as lists of commands. All the list tags have the following common elements: n Each list has an outer element specific to that type of list. For example, <ul> and </ul> for unordered lists or <ol> and </ol> for ordered lists. n Each list item has its own tag: <dt> and <dd> for the glossary lists and <li> for the other lists. NOTE The closing tags for <dd>, <dt>, and <li> were optional in HTML. To comply with HTML5, use closing tags </dd>, </dt>, and </li>. Although the tags and the list items can be formatted any way you like in your HTML code, I prefer to arrange the tags so that the list tags are on their own lines and each new item starts on a new line. This way, you can easily select the whole list and the individual elements. In other words, I find the following HTML <p>Dante’s Divine Comedy consists of three books:</p> <ul> <li>The Inferno</li> <li>The Purgatorio</li> <li>The Paradiso</li> </ul> NOTE Download from www.wowebook.com ptg is easier to read than <p>Dante’s Divine Comedy consists of three books:</p> <ul><li>The Inferno</li><li>The Purgatorio</li><li>The Paradiso</li></ul> although both result in the same output in the browser. Numbered Lists Numbered lists are surrounded by the <ol> </ol> tags (ol stands for ordered list), and each item within the list is included in the <li> </li> (list item) tag. When the browser displays an ordered list, it numbers and indents each of the elements sequen- tially. You don’t have to perform the numbering yourself and, if you add or delete items, the browser renumbers them the next time the page loads. Ordered lists are lists in which each item is numbered or labeled with a counter of some kind (like letters or roman numerals). Use numbered lists only when the sequence of items on the list is relevant. Ordered lists are good for steps to follow or instructions to the readers, or when you want to rank the items in a list. If you just want to indicate that something has a number of elements that can appear in any order, use an unordered list instead. For example, the following is an ordered list of steps that explain how to install a new operating system. You can see how the list displays in a browser in Figure 5.1. Input ▼ <h1>Installing Your New Operating System</h1> <ol> <li>Insert the CD-ROM into your CD-ROM drive.</li> <li>Choose RUN.</li> <li>Enter the drive letter of your CD-ROM (example: D:\), followed by SETUP.EXE.</li> <li>Follow the prompts in the setup program.</li> <li>Reboot your computer after all files are installed.</li> <li>Cross your fingers.</li> </ol> Numbered Lists 83 5 Download from www.wowebook.com ptg Output . FIGURE 5.1 An ordered list in HTML. 84 LESSON 5: Organizing Information with Lists Customizing Ordered Lists Attributes are a structural element of HTML that haven’t been intro- duced yet. They provide further information about a tag or modify the behavior of a tag and take the form of an attribute name and, option- ally, an attribute value. For example, all tags support the style attribute. Here’s what an attribute for an HTML element looks like: <ul style=”insert style information here”> Since Cascading Style Sheets were introduced, HTML elements and attributes that describe how the page should be displayed have been migrating to CSS. HTML is now associated with describing the struc- ture of a page’s content—CSS is for indicating exactly how the page should look in the browser. In discussing how to customize lists, I talk about the old HTML attributes that were once used (and still work in nearly all browsers), and the more current CSS approach to solving the same problems. The display attributes for ordered lists enable you to control several features of the lists including which numbering scheme to use and from which number to start counting (if you don’t want to start at 1). The attributes mentioned in this section are deprecated in favor of using style sheet properties and that can accomplish the same task. You may, however, see these attributes used in examples or in other people’s markup. You can customize ordered lists in two main ways: the numbering style and the number with which the list starts. The type attribute can set the numbering style, or you can use the list-style-type CSS property. Table 5.1 lists the numbering styles. Download from www.wowebook.com ptg TABLE 5.1 Ordered List Numbering Styles Attribute CSS Value Value Description decimal 1 Standard Arabic numerals (1, 2, 3, 4, and so on) lower-alpha a Lowercase letters (a, b, c, d, and so on) upper-alpha A Uppercase letters (A, B, C, D, and so on) lower-roman i Lowercase Roman numerals (i, ii, iii, iv, and so on) upper-roman I Uppercase Roman numerals (that is, I, II, III, IV, and so on) You can specify types of numbering in the <ol> tag as follows: <ol type=“a”> or using the style attribute, like this: <ol style=”list-style-type: lower-alpha”> By default, the decimal type is assumed. Numbered Lists 85 5 HTML5 has dropped support for the type property, and all but the oldest browsers support list-style-type, so you should take that approach. However, you may run into old Web pages or tools for creating Web pages that still use the type attribute. As an example, consider the following list: <p>The Days of the Week in French:</p> <ol> <li>Lundi</li> <li>Mardi</li> <li>Mercredi</li> <li>Jeudi</li> <li>Vendredi</li> <li>Samedi</li> <li>Dimanche</li> </ol> If you were to set the list style type upper-roman to the <ol> tag, as follows, it would appear in a browser, as shown in Figure 5.2: NOTE Download from www.wowebook.com . and preview simple HTML files. You also learned about the HTML tags shown in Table 4 .1. TABLE 4 .1 HTML Tags from Lesson 4 Tag Attribute Use < ;html& gt; < /html& gt; The entire HTML page <head>. list-style-type CSS property. Table 5 .1 lists the numbering styles. Download from www.wowebook.com ptg TABLE 5 .1 Ordered List Numbering Styles Attribute CSS Value Value Description decimal 1 Standard. or prologue, of the HTML page <body> </body> All the other content in the HTML page <title> </title> The title of the page <h1> </h1> First-level heading <h2>
Ngày đăng: 05/07/2014, 20:21
Xem thêm: Tự học HTML và CSS trong 1 giờ - part 11 pdf, Tự học HTML và CSS trong 1 giờ - part 11 pdf
