Tự học HTML và CSS trong 1 giờ - part 20 docx

ptg
tags, and all the other strange bugs that always seem to creep into an HTML file the first
time you create it. These problems always seem to happen no matter how good you are
at creating web pages. If you use an HTML editor or some other help tool, your job will
be easier, but you’ll always seem to find mistakes. That’s what previewing is for—so you
can catch the problems before you actually make the document available to other people.
Getting Fancy Everything included on the page up to this point has been plain-
vanilla HTML 2.0, so it’s readable and will look pretty much the same in all browsers.
After you get the page to this point, however, you can add additional formatting tags and
attributes that won’t change the page for many readers but might make it look a little
fancier in browsers that do support these attributes.
So, what attributes do you want to use? Here are two:
n
Centering the title of the page, the quote, and the bookstore’s address
n
Making a slight font size change to the address
To center the topmost part of the page, you can use the <div> tag around the heading, the
quote, and the bookshop’s address, as in the following:
Input ▼
<div style=”text-align: center”>
<a name=”top”><h1 style=”font-variant: small-caps”>The Bookworm: A Better Book
Store</h1></a>
<blockquote>
“Old books are best—-how tale and rhyme<br />
Float with us down the stream of time!”<br />
- Clarence Urmy, <cite>Old Songs are Best</cite>
</blockquote>
<p>The Bookworm Bookshop<br />
1345 Applewood Dr<br />
Springfield, CA 94325<br />
(415) 555-0034

</p>
</div>
I’ve also used the style attribute to change the text in the <h1> tag to small caps. To
change the font size of the address, add a style attribute to the paragraph containing the
address:
166
LESSON 7: Formatting Text with HTML and CSS
,
,
Download from www.wowebook.com
ptg
Input ▼
<p style=”font-size: 150%”>The Bookworm Bookshop<br />
1345 Applewood Dr<br />
Springfield, CA 94325<br />
(415) 555-0034
</p>
Figure 7.19 shows the final result, including styles.
Summary
167
7
,
Output .
FIGURE 7.19
The final
Bookworm home
page, with addi-
tional attributes.
You’ll learn more about formatting tags, and styles, and how to design well with them, in
Lesson 8.

Summary
Tags, tags, and more tags! In this lesson, you learned about most of the remaining tags in
the HTML language for presenting text, and quite a few of the tags for additional text
formatting and presentation. You also put together a real-life HTML home page. You
could stop now and create quite presentable web pages, but more cool stuff is to come.
So, don’t put down the book yet.
Table 7.2 presents a quick summary of all the tags and attributes you’ve learned about
in this lesson. Table 7.3 summarizes the CSS properties that have been described in this
lesson.
▲
Download from www.wowebook.com
ptg
TABLE 7.2 HTML Tags from Lesson 7
Tag Attribute Use
<address> </address> A signature for each web page;
typically occurs near the bottom
of each document and contains
contact or copyright information.
<b> </b> Bold text.
<big> </big> Text in a larger font than the text
around it. (Removed from
HTML5.)
<blockquote> </blockquote> A quotation longer than a few
words.
<cite> </cite> A citation.
<code> </code> A code sample.
<dfn> </dfn> A definition, or a term about to be
defined.
<em> </em> Emphasized text.
<i> </i> Italic text.

<kbd> </kbd> Text to be typed in by the user.
<pre> </pre> Preformatted text; all spaces,
tabs, and returns are retained.
Text is printed in a monospaced
font.
<s> </s> Strikethrough text. (Removed
from HTML5)
<samp> </samp> Sample text.
<small> </small> Text in a smaller font than the
text around it.
<strong> </strong> Strongly emphasized text.
 Subscript text.
 Superscript text.
<tt> </tt> Text in typewriter font (a mono-
spaced font such as Courier).
(Removed from HTML5.)
<u> </u> Underlined text. (Removed from
HTML5.)
<var> </var> A variable name.
<span> </span> A generic tag used to apply styles
to a particular bit of text.
168
LESSON 7: Formatting Text with HTML and CSS
Download from www.wowebook.com
ptg
TABLE 7.2 Continued
Tag Attribute Use
<hr> A horizontal rule line at the given
position in the text. There’s no
closing tag in HTML for

<hr>; for
XHTML, add a space and forward
slash (
/) at the end of the tag
and its attributes (for example,
<hr size=”2” width=”75%” />).
size The thickness of the rule, in pix-
els. (Removed from HTML5.)
width The width of the rule, either in
exact pixels or as a percentage of
page width (for example, 50%).
(Removed from HTML5.)
align The alignment of the rule on the
page. Possible values are
left,
right, and center. (Removed
from HTML5.)
noshade Displays the rule without three-
dimensional shading. (Removed
from HTML5.
<br> A line break; starts the next char-
acter on the next line but doesn’t
create a new paragraph or list
item. There’s no closing tag in
HTML for
<br>; for XHTML, add a
space and forward slash (
/) at
the end of the tag and its attrib-
utes (for example,

<br
clear=”left” />).
<nobr> </nobr> Doesn’t wrap the enclosed text
(nonstandard; supported by
Netscape and Internet Explorer).
<wbr> Wraps the text at this point only
if necessary (nonstandard; sup-
ported by Netscape and Internet
Explorer). Adds a space and for-
ward slash at the end of the tag
for XHTML 1.0.
<p> </p>, <h1-6> </h1-6> align=”left” Left-justifies the text within that
paragraph or heading. (Removed
from HTML5.)
Summary
169
7
Download from www.wowebook.com
ptg
TABLE 7.2 Continued
Tag Attribute Use
align=”right” Right-justifies the text within that
paragraph or heading. (Removed
from HTML5.)
align=”center” Centers the text within that para-
graph or heading. (Removed from
HTML5.)
<div> </div> align=”left” Left-justifies all the content
between the opening and closing
tags. (DeprecatRemoved from

HTML5.)
align=”right” Right-justifies all the content
between the opening and closing
tags. (Removed from HTML5.)
align=”center” Centers all the content between
the opening and closing tags.
(Removed from HTML5.)
<center> </center> Centers all the content between
the opening and closing tags.
(Removed from HTML5.)
TABLE 7.3 CSS Properties from Lesson 7
Property Use/Values
text-decoration Specifies which sort of decoration should be applied
to the text. The values are
underline, overline,
line-through, blink, and none.
font-style Specifies whether text should be italicized. The three
values are
normal, italic, and oblique.
font-weight Specifies the degree to which text should be embold-
ened. Options are
normal, bold, bolder, lighter,
and
100 to 900.
font-family Enables you to specify the font used for text. You can
choose families such as serif, sans serif, and mono-
space, or specific font names. You can also specify
more than one font or font family.
font-variant Sets the font variant to normal or small-caps.
text-align Specifies how text is aligned: left, right, center,or

justify.
font-size Enables you to specify the font size in any unit sup-
ported by CSS.
170
LESSON 7: Formatting Text with HTML and CSS
Download from www.wowebook.com
ptg
Workshop
Here you are at the close of this lesson (a long one!) and facing yet another workshop.
This lesson covered a lot of ground, so I’ll try to keep the questions easy. There are a
couple exercises that focus on building some additional pages for your website. Ready?
Q&A
Q If line breaks appear in HTML, can I also do page breaks?
A HTML doesn’t have a page break tag. Consider what the term page means in a
web document. If each document on the web is a single page, the only way to pro-
duce a page break is to split your HTML document into separate files and link
them.
Even within a single document, browsers have no concept of a page; each HTML
document simply scrolls by continuously. If you consider a single screen a page,
you still can’t have what results in a page break in HTML. The screen size in each
browser is different. It’s based on not only the browser itself, but also the size of
the monitor on which it runs, the number of lines defined, the font currently being
used, and other factors that you cannot control from HTML.
When you design your web pages, don’t get too hung up on the concept of a page
the way it exists in paper documents. Remember, HTML’s strength is its flexibility
for multiple kinds of systems and formats. Instead, think in terms of creating small
chunks of information and how they link together to form a complete presentation.
If page breaks are essential to your document, you might consider saving it in the
PDF format and making it available for download.
Q How can I include em dashes or curly quotes (typesetter’s quotes) in my

HTML files?
A There are entities for all these characters, but they might not be supported by all
browsers or on all platforms. Most people still don’t use them. To add an em dash,
use &mdash;. The curly quote entities are &ldquo; for the left quote and &rdquo;
for the right quote. Similarly, you can create curly single quotes using &lsquo; and
&rsquo;.
Workshop
171
7
Download from www.wowebook.com
ptg
Quiz
1. What are the differences between logical character styles and physical character
styles?
2. What are some things that the <pre> (preformatted text) tag can be used for?
3. What’s the most common use of the <address> tag?
4. Older versions of HTML provided ways to align and center text on a web page.
What’s the recommended way to accomplish these tasks in HTML 4.01?
5. Without looking at Table 7.2, list all eight logical style tags and what they’re used
for. Explain why you should use the logical tags rather than the physical tags.
Quiz Answers
1. Logical styles indicate how the highlighted text is used (citation, definition, code,
and so on). Physical styles indicate how the highlighted text is displayed (bold,
italic, or monospaced, for example).
2. Preformatted text can be used for text-based tables, code examples, ASCII art, and
any other web page content that requires extra spaces to align characters.
3. The <address> tag is most commonly used for signature-like entities on a web
page. These include the name of the author of the web page, contact information,
dates, copyright notices, or warnings. Address information usually appears at the
bottom of a web page.

4. Alignment and centering of text can be accomplished with style sheets, which is
the recommended approach in HTML 4.01.
5. The eight logical styles are <em> (for emphasized text), <strong> (for bold text),
<code> (for programming code), <samp> (similar to <code>), <kbd> (to indicate
user keyboard input), <var> (for variable names), <dfn> (for definitions), and
<cite> (for short quotes or citations). Logical tags rely on the browser to format
their appearance.
Exercises
1. Now that you’ve had a taste of building your first thorough web page, take a stab at
your own home page. What can you include that would entice people to dig deeper
into your pages? Don’t forget to include links to other pages on your site.
2. Try out your home page in several browsers and even on multiple platforms if you
have access to them. Web developers have to get used to the fact that their designs
are at the mercy of their users, and it’s best to see right away how different
browsers and platforms treat pages.
172
LESSON 7: Formatting Text with HTML and CSS
Download from www.wowebook.com
ptg
LESSON 8
Using CSS to Style
a Site
The past few lessons Idiscussed how to lay out web pages using
Hypertext Markup Language (HTML) tags. This lesson describes how you
can create complex pages using Cascading Style Sheets (CSS). You’ve
already learned about the advantages CSS can provide for formatting
smaller snippets of text. In this lesson, you learn how to use CSS to
control the appearance of an entire page.
The following topics are covered:
n

Creating style sheets and including them in a page
n
Linking to external style sheets
n
Using selectors to apply styles to elements on a page
n
Units of measure supported by CSS
n
The CSS box model
n
Positioning elements using CSS
n
Applying styles to tables and the <body> tag
n
Using CSS to create multicolumn layouts
Download from www.wowebook.com
ptg
Including Style Sheets in a Page
Thus far, when I’ve discussed style sheets, I’ve applied them using the style attribute of
tags. For example, I’ve shown how you can modify the font for some text using tags such
as
<div> and <span>, or how you can modify the appearance of a list item by applying a
style within an
<li> tag. If you rely on the style attribute of tags to apply CSS, if you
want to embolden every paragraph on a page, you need to put
style=“font-weight:
bold” in every <p> tag. This is no improvement over just using <p><b> and </b></p>
instead. Fortunately, CSS provides ways to apply styles generally to a page, or even to an
entire website.
Creating Page-Level Styles

First, let’s look at how we can apply styles to our page at the page level. Thus far, you’ve
seen how styles are applied, but you haven’t seen any style sheets. Here’s what one looks
like:
<style type=“text/css”>
h1 { font-size: x-large; font-weight: bold }
h2 { font-size: large; font-weight: bold }
</style>
The <style> tag should be included within the <head> tag on your page. The type
attribute indicates the MIME type of the style sheet. text/css is the only value you’ll
use. The body of the style sheet consists of a series of rules. All rules follow the same
structure:
selector { property1: value1; property2: value2; }
Each rule consists of a selector followed by a list of properties and values associated
with those properties. All the properties being set for a selector are enclosed in curly
braces, as shown in the example. You can include any number of properties for each
selector, and they must be separated from one another using semicolons. You can also
include a semicolon following the last property/value pair in the rule, or not—it’s up to
you.
You should already be quite familiar with CSS properties and values because that’s what
you use in the style attribute of tags. Selectors are something new. I discuss them in
detail in a bit. The ones I’ve used thus far have the same names as tags. If you use h1 as
a selector, the rule will apply to any <h1> tags on the page. By the same token, if you use
p as your selector, it will apply to <p> tags.
174
LESSON 8: Using CSS to Style a Site
Download from www.wowebook.com
ptg
Creating Sitewide Style Sheets
You can’t capture the real efficiency of style sheets until you start creating sitewide style
sheets. You can store all of your style information in a file and include it without resort-

ing to any server trickery (which I discuss in Lesson 21, “Taking Advantage of the
Server”). A CSS file contains the body of a <style> tag. To turn the style sheet from the
previous section into a separate file, you could just save the following to a file called
style.css:
h1 { font-size: x-large; font-weight: bold }
h2 { font-size: large; font-weight: bold }
In truth, the extension of the file is irrelevant, but the extension .css is the de facto stan-
dard for style sheets, so you should probably use it. After you’ve created the style sheet
file, you can include it in your page using the <link> tag, like this:
<link rel=“stylesheet” href=“style.css” type=“text/css” />
The type attribute is the same as that of the <style> tag. The href tag is the same as
that of the <a> tag. It can be a relative URL, an absolute URL, or even a fully qualified
URL that points to a different server. As long as the browser can fetch the file, any URL
will work. This means that you can just as easily use other people’s style sheets as your
own, but you probably shouldn’t.
There’s another attribute of the link tag, too: media. This enables you to specify different
style sheets for different display mediums. For example, you can specify one for print,
another for screen display, and others for things like aural browsers for use with screen
readers. Not all browsers support the different media types, but if your style sheet is spe-
cific to a particular medium, you should include it. The options are screen, print, pro-
jection, aural, braille, tty, tv, embossed, handheld, and all.
You can also specify titles for your style sheets using the title attribute, as well as alter-
native style sheets by setting the rel attribute to alternative style sheet.
Theoretically, this means that you could specify multiple style sheets for your page (with
the one set to rel=“stylesheet” as the preferred style sheet). The browser would then
enable the user to select from among them based on the title you provide. Unfortunately,
none of the major browsers support this behavior.
As it is, you can include links to multiple style sheets in your pages, and all the rules will
be applied. This means that you can create one general style sheet for your entire site and
then another specific to a page or to a section of the site, too.

Including Style Sheets in a Page
175
8
Download from www.wowebook.com