Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P12 docx
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 (151.48 KB, 10 trang )
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"
" /><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]
