Tự học HTML và CSS trong 1 giờ - part 11 pdf
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (794.38 KB, 10 trang )
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
