Comments look like the following: Here are some examples: As you can see from Figure 4.4, users can view your comments using the View Source functionality in their browsers, so don’t
Trang 1▼
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.)
Trang 2So, 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
4
Output ▼
FIGURE 4.5
The cheese factory
example.
▲
Trang 3Summary
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
<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
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
78 LESSON 4: Learning the Basics of HTML
Trang 4Q 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
4
Trang 5Exercises
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
Trang 6Organizing 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
Trang 7Lists: 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>
NOTE
Trang 8is 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 (olstands 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>
5
Trang 9Output
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 typeattribute can set the numbering style, or you can use the list-style-typeCSS property Table 5.1 lists the numbering styles
Trang 10TABLE 5.1 Ordered List Numbering Styles
Attribute
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 decimaltype is assumed
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-romanto the <ol>tag, as follows, it would
appear in a browser, as shown in Figure 5.2:
NOTE