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
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>,
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
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
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
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
Copyright: Tài liệu đại học ©