Comments Comments You can put comments into HTML pages to describe the page itself or to provide some kind of indication of the status of the page. Some source code control programs store the page status in comments, for example. Text in comments is ignored when the HTML file is parsed; comments don't ever show up onscreenthat'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! > 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. Task: Exercise 4.1. Creating a Real HTML Page At this point, you know enough to get started 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 tomorrow's lesson. This exercise shows you how to create an HTML file that uses the tags you've learned about up to this point. It'll give you a feel for what the tags look like when they're displayed 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 itself.) So, create a simple example in your text editor. Your example doesn't have to say much of anything; in fact, 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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html> <head> <title>Camembert Incorporated</title> </head> <body> <h1>Camembert Incorporated</h1> <p>"Many's the long night I dreamed of cheese toasted, mostly." file:///G|/1/0672328860/ch04lev1sec6.html (1 von 3) [19.12.2006 13:48:35] Comments 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> <h2>Our Favorite Cheeses</h2> <ul> <li>Brie</li> <li>Havarti</li> <li>Camembert</li> <li>Mozzarella</li> </ul> </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 another browser on your computer or, even better, one on a different kind of computer, I highly recommend opening the same HTML file there so that you can see the differences in appearance between browsers. Sometimes the differences can surprise you; lines that looked fine in one browser might look strange in another browser. Figure 4.11 shows what the cheese factory example looks like. Output Figure 4.11. The cheese factory example. file:///G|/1/0672328860/ch04lev1sec6.html (2 von 3) [19.12.2006 13:48:35] Comments file:///G|/1/0672328860/ch04lev1sec6.html (3 von 3) [19.12.2006 13:48:35] Summary 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. Today, 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, and the CSS properties shown in Table 4.2. 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. <ol> </ol> An ordered (numbered) list. Each of the items in the list begins with <li>. type Specifies the numbering scheme to use in the list. This attribute is deprecated in HTML 4.01. start Specifies at which number to start the list. This attribute is deprecated in HTML 4.01. <ul> </ul> An unordered (bulleted or otherwisemarked) list. Each of the items in the list begins with <li>. type Specifies the bulleting scheme to use in the list. This attribute is deprecated in HTML 4.01. <li> </li> Individual list items in ordered, unordered, menu, or directory lists. The closing tag is optional in HTML, but is required in XHTML 1.0. file:///G|/1/0672328860/ch04lev1sec7.html (1 von 2) [19.12.2006 13:48:35] Summary type Resets the numbering or bulleting scheme from the current list element. Applies only to <ul> and <ol> lists. This attribute is deprecated in HTML 4.01. value Resets the numbering in the middle of an ordered (<ol>) list. This attribute is deprecated in HTML 4.01. <dl> </dl> A glossary or definition list. Items in the list consist of pairs of elements: a term and its definition. <dt> </dt> The term part of an item in a glossary list. Closing tag is optional in HTML, but required in XHTML 1.0. <dd> </dd> The definition part of an item in a glossary list. Closing tag is optional in HTML, but required in XHTML 1.0. <! > A comment. Table 4.2. CSS Properties from Lesson 4 Property Use/Values list-style-type Used to specify the bullet style or numbering style for the list. Valid values are disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper- alpha , and none. white-space Specifies how white space is handled for list items. Valid values are pre, nowrap, and normal. list-style-image The image to use in place of the bullets for a list. The value should be the URL of the image. list-style-position Defines the alignment of lines of text in list items after the first. Values are inside and outside. list-style Enables you to set multiple list properties at once: list style type, list style position, and the URL of the bullet style. file:///G|/1/0672328860/ch04lev1sec7.html (2 von 2) [19.12.2006 13:48:35] Workshop Workshop You've learned a lot today, and the following workshop will 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. Q My glossaries came out formatted really strangely! The terms are indented farther in than the definitions! A Did you mix up the <dd> and <dt> tags? The <dt> tag is always used first (the definition term), and the <dd> follows (the definition). I mix them up all the time. There are too many d tags in glossary lists. Q I've seen HTML files that use <li> outside a list structure, alone on the page, like this: <li>And then the duck said, "put it on my bill"</li> A Most browsers at least accept this tag outside a list tag and format it either as a simple paragraph or as a nonindented bulleted item. According to the true HTML specification, however, using an <li> outside a list tag is illegal, so good HTML pages shouldn't do this. Enclosing list items within list tags is also required by the XHTML recommendation. Always put your list items inside lists where they belong. Quiz file:///G|/1/0672328860/ch04lev1sec8.html (1 von 3) [19.12.2006 13:48:36] Workshop 1. What three HTML tags are used to 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? 5. What two list types have been deprecated? What can you use in place of the deprecated list types? 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 is used to indicate 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 6, "Formatting Text with HTML and CSS"). Closing tags also are required for XHTML 1.0. 5. The <menu> and <dir> list types have been deprecated in favor of using bulleted or unordered lists, <ul>. Exercises file:///G|/1/0672328860/ch04lev1sec8.html (2 von 3) [19.12.2006 13:48:36] Workshop 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 tomorrow. 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 really adventurous, complete the page's content and include lists where you think they enhance the page. This exercise will also help prepare you for tomorrow's lesson. file:///G|/1/0672328860/ch04lev1sec8.html (3 von 3) [19.12.2006 13:48:36] Part II: Creating Simple Web Pages Part II: Creating Simple Web Pages 5 Adding Links to Your Web Pages 6 Formatting Text with HTML and CSS 7 Adding Images, Color, and Backgrounds file:///G|/1/0672328860/part02.html [19.12.2006 13:48:36] Lesson 5. Adding Links to Your Web Pages Lesson 5. Adding Links to Your Web Pages After finishing yesterday's lesson, you now have a couple of pages that have some headings, text, and lists in them. These pages are all well and good, but rather boring. The real fun starts when you learn how to create hypertext links and link your pages to the Web. In this Lesson Today, you'll learn just that. Specifically, you'll learn about the following: ● All about the HTML link tag (<a>) and its various parts ● How to link to other pages on your local disk by using relative and absolute pathnames ● How to link to other pages on the Web by using URLs ● How to use links and anchors to link to specific places inside pages ● All about URLs: the various parts of the URL and the kinds of URLs you can use file:///G|/1/0672328860/ch05.html [19.12.2006 13:48:36] . Adding Links to Your Web Pages Lesson 5. Adding Links to Your Web Pages After finishing yesterday's lesson, you now have a couple of pages that have some headings, text, and lists in. 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. deprecated list types? Quiz Answers 1. The < ;html& gt; tag indicates that the file is in the HTML language. The <head> tag specifies that the lines within the beginning and ending points