HTML cơ bản - p 9 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 (902.93 KB, 10 trang )
ptg
64 Chapter 2: The HTML Language
<p>My associate thought that the quote originated with the
designer, Aldo Gucci. I thought it came from Benjamin Franklin.
If you have a direct reference source, please contact me at:</p>
<address>
Author Dent<br/>
</address>
</body>
</html>
Figure 2.12: Styling block quotes and address blocks with CSS
e break element, <br/>, is used in the address block in Example 2.12,
where an explicit line break is needed in the text content. It is a self-closing ele-
ment oen used to clear a oating element by including either a clear or style
attribute:
<br clear="both"/>
<br style="clear:both"/>
Example 2.12: CSS styles for paragraphs, block quotes, and address
blocks (continued)
From the Library of Wow! eBook
ptg
Block Elements 65
Two line breaks in a row does not mean twice the vertical space on the
page. A break element calls for a line break to be present in the content ow.
e browser is free to ignore the tag if a line break already exists at that point.
Also, when working with many WYSIWYG and online content editors, the
soware strips extra line breaks from the HTML or adds its own. It is better to
control vertical space using CSS than to try to position things with extra line
breaks or empty paragraphs. Example 2.13 shows how to use line breaks in
formatting lines of a poem.
Example 2.13: Paragraphs and line breaks
<!DOCTYPE html>
<html>
<head>
<title>Example 2.13</title>
</head>
<body>
<h1>Twelve</h1>
<hr/>
<p>The five colors blind the eye.<br/>
The five tones deafen the ear.<br/>
The five flavors dull the taste.<br/>
Racing and hunting madden the mind.<br/>
Precious things lead one astray.</p>
<p>Therefore the sage is guided by what
he feels and not by what he sees.<br/>
He lets go of that and chooses this.</p>
<hr/>
</body>
</html>
e content is from a translation of Lao-Tsu’s Tao Te Ching by Gai Fu Feng
and Jane English. Figure 2.13 shows how it appears in a browser.
From the Library of Wow! eBook
ptg
66 Chapter 2: The HTML Language
Figure 2.13: Using line breaks
e preformatted text element provides another means to control the
spacing of text content. It is sort of an anti-paragraph. Any text between the
starting and ending tags, <pre></pre>, is le essentially as is. Preformatted text
retains all line breaks and redundant blanks. Horizontal tabs are recognized
and expanded as if there were tab stops every eight characters across the page.
is is ideal for text copied from another source, such as an email message,
which needs to keep its line breaks and spacing intact. It can be pasted inside a
preformatted text element. e text is rendered in a monospace font by default,
although this can easily be changed with CSS.
Within the preformatted block no other block elements should be used.
Inline elements, including anchor and image elements, are appropriate. Exam-
ple 2.14 shows a simple example of preformatted text that creates the display
shown in Figure 2.14.
Example 2.14: Preformatted text in HTML
<!DOCTYPE html>
<html>
<head>
<title>Example 2.14</title>
</head>
<body>
<h2>Puzzle</h2>
<pre>
From the Library of Wow! eBook
ptg
Block Elements 67
|\ / Here's one way to
o o o connect all 9
| X dots using only 4
o o o straight lines:
|/ \
o-o-o-
</pre>
</body>
</html>
Figure 2.14: A web page with a preformatted element
LISTS
A list is a block element containing a sequence of list items. HTML provides
several types of lists, including ordered lists, unordered lists, denition lists,
and menus. Ordered lists have sequenced items, whereas unordered lists have
bulleted items. e list item element, which is where the content goes, is also a
block element. A list element may have only list items as its direct descendents.
Ordered lists use the tags
<ol></ol> to enclose and mark the entire list
structure. Unordered lists use <ul></ul> tags. List items are enclosed in the
tags <li></li>. When rendered by the browser, list items are usually indented
from the le margin. Although ordered and unordered lists can contain only
list items as their immediate child elements, list item elements can contain
any content and markup, including other lists. Example 2.15 shows the HTML
markup for nesting an unordered list inside an ordered list. is might be used
in an outline or table of contents, for example.
From the Library of Wow! eBook
ptg
68 Chapter 2: The HTML Language
Example 2.15: Nested ordered and unordered lists
<!DOCTYPE html>
<html>
<head>
<title>Example 2.15</title>
</head>
<body style="margin: 36px">
<h1>The Autobiography Of A Biographer</h1>
<hr/>
<h2>Table of Contents</h2>
<! use headings for major sections >
<ol>
<li>Introduction</li>
<li>Early Years
<ul> <! use bullets for this level >
<li>The Joy of Writing</li>
<li>Meeting Interesting People</li>
</ul>
</li>
<li>The Major Biographical Works</li>
</ol>
</body>
</html>
Figure 2.15 shows how this example appears in a browser.
Figure 2.15: Nested lists
From the Library of Wow! eBook
ptg
Block Elements 69
Ordered lists have two attributes that let you control the appearance of
list items. e start attribute can be used to set the number for the rst item
of the list to a value other than 1. e type attribute controls how the list is
sequenced. type can have any of the following values:
type="1" Normal numeric numbering; the default
type="A" Uppercase letters: A, B, C, D, …
type="a" Lowercase letters: a, b, c, d, …
type="I" Uppercase Roman numerals: I, II, III, IV, …
type="i" Lowercase Roman numerals: i, ii, iii, iv, …
For unordered lists, the type attribute can take the values circle, square,
disc, or none to indicate the type of bullet used. e start attribute is ignored
in unordered lists.
e items of a denition list are enclosed in <dl></dl> tags. Each item of
a denition list is a pair of objects called the denition term and denition
description. e denition term’s HTML tags are <dt></dt>, and the deni-
tion descriptions are <dd></dd>. e default behavior of most browsers is to
treat both the denition terms and descriptions as normal paragraphs, with
the denition element indented from the le margin. No bullets or list num-
bers are added. Denition lists are intended to be used by authors to mark
up content that has a topic-comment structure. is is useful for lists of
frequently asked questions and answers (FAQs), as well as for glossaries and
indexes.
A denition list has no restrictions regarding the use of other HTML ele-
ments within either the dening term or description part. It is common to
nest a heading inside the term part of the element to provide emphasis and
spacing. Authors are encouraged to stick to the semantic use of the element to
mark up short phrases as topics followed by longer comment terms. Denition
lists should not be used just to provide alternating paragraph styles, because
this is what CSS classes do. Example 2.16 shows the HTML for a simple
denitionlist.
Example 2.16: HTML for a definition list
<!DOCTYPE html>
<html>
<head>
continues
From the Library of Wow! eBook
ptg
70 Chapter 2: The HTML Language
<title>Example 2.16</title>
</head>
<body>
<dl>
<dt><h3>Bucky Balls</h3></dt>
<dd>Technically, Buckminster Fullerene, a family of all carbon
molecules named after the great designer-architect-engineer,
Buckminster Fuller. The most stable member, C60, is a hollow
sphere with the same architecture as the geodesic structures
Fuller pioneered a half century ago.</dd>
<dt><h3>Penrose Tiling</h3></dt>
<dd>A method of tiling a plane thought impossible until
discovered by Roger Penrose. Combining two differently shaped
rhomboids, the tiling has five-fold symmetry, yet <em>the pattern
is not periodic!</em>. A mathematical curiosity until it was found
in some natural minerals with rather strange properties.</dd>
</dl>
</body>
</html>
Figure 2.16 shows how this denition list appears in a typical browser.
Figure 2.16: A definition list
Example 2.16: HTML for a definition list (continued)
From the Library of Wow! eBook
ptg
Block Elements 71
Without any attributes, the menu list element, <menu></menu>, has the
same eect as an unordered list element. It should be used where the content
consists of a list of commands, links, or similar navigation or control elements.
Using menu elements in place of unordered lists allows for better styling con-
trol of page navigational elements.
In HTML5, the menu element has an optional
type attribute. e default
value is list, which preserves the behavior of existing code. However, if the
type attribute has a value of context, the element can provide a context menu
for a form input eld or other control on the page. In other words, the menu
list is hidden until the user Alt-clicks the associated control. Context menus
are associated with a control through the use of the
contextmenu attribute,
whose value should be the ID of the menu list element. For example, in the fol-
lowing code snippet
Player Name: <input type="text" contextmenu="namemenu"/>
<menu type="context" id="namemenu">
<command label="Pick random name" onclick="getRandomName();"/>
<command label="Use your real name" onclick="getRealName();"/>
</menu>
the
menu element provides a context menu for the input eld dened above
it. e value of the input element’s contextmenu attribute is the value of the
menu’s id attribute. e command element, two of which appear inside the
menu element just shown, is a new HTML5 element that provides a general-
ized means of generating controls that can respond to user actions. In the
preceding code, when the user clicks the input element while holding down
the Alt or Ctrl key, the browser can display a submenu of the two commands.
Clicking either context menu item calls a function (not dened in this exam-
ple) to ll in the value of the input eld.
e other permissible value of the menu element’s
type attribute is toolbar.
It is intended to provide web authors and developers with a means of specify-
ing a list of items, possibly icons, that HTML5-level browsers can display as a
horizontal toolbar. However, until browsers add support for the toolbar and
context states of a menu element, web authors should continue to use the CSS
float property to create horizontal toolbars and menus. Example 2.17 shows
how the same list can be made to display either vertically or horizontally.
From the Library of Wow! eBook
ptg
72 Chapter 2: The HTML Language
Example 2.17: HTML and CSS for vertical and horizontal lists
<!DOCTYPE html>
<html>
<head>
<title>Example 2.17</title>
<style type="text/css">
body { padding: 36px; }
menu li {
float: left;
list-style: none;
margin-right: 8px;
border: 2px solid;
padding: 4px;
}
</style>
</head>
<body>
<h2>Vertical and Horizontal lists</h2>
<ul>
<li>Gold</li>
<li>Silver</li>
<li>Bronze</li>
</ul>
<menu>
<li>Gold</li>
<li>Silver</li>
<li>Bronze</li>
</menu>
</body>
</html>
In this example, it is not the
menu element that creates the horizontal
toolbar. e CSS rules in the style element operate on each list item in the
menu element, causing it to oat up on the right of the previous list item. e
From the Library of Wow! eBook
ptg
Block Elements 73
CSS statements setting the margin, border, and padding style the list items as
separated buttons. e CSS statement list-style: none; is needed to suppress
the bullets. Figure 2.17 shows how the preceding HTML code appears in a
browser.
Figure 2.17: Vertical and horizontal lists
DIVISION AND SECTION ELEMENTS
Divisions are general-purpose block elements that can contain any other
content and markup, including other divisions. Content marked up with divi-
sion tags, <div></div>, has no special semantic meaning other than that the
separate elements of that content belong together. Divisions are most useful as
containers for CSS properties providing a means of grouping headings, para-
graphs, and other elements for visual styling with backgrounds and borders.
Divisions are also useful as targets of scripting actions. It is common practice
to use a division for content that is hidden or shown by a script responding to
a user’s mouseover or click actions.
In contrast to the division element, the section element, new in HTML5, is
intended for marking up major sections of a larger work, such as the chapters
of a book. For example, a publisher may choose to publish a work online in
two dierent formats: the book as a set of linked pages, one per chapter, and
the entire book as a single web page. Assume that the content is provided by
a content management system that provides all the content and markup to
create a single chapter page. For the all-on-one-page version, each chapter’s
From the Library of Wow! eBook
