If you have a direct reference source, please contact me at: Author Dent hitchhiker@gmail.com Figure 2.12: Styling block quotes and address blocks with CSS The break element, , is u
Trang 1<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/>
hitchhiker@gmail.com
</address>
</body>
</html>
Figure 2.12: Styling block quotes and address blocks with CSS
The 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 often used to clear a floating eleele-ment 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)
Trang 2Two 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 flow
The 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
software 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>
The 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
Trang 3Figure 2.13: using line breaks
The 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 left 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
This 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 The 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 simExam-ple examExam-ple 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>
Trang 4|\ / 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
Li STS
A list is a block element containing a sequence of list items HTML provides
several types of lists, including ordered lists, unordered lists, definition lists,
and menus Ordered lists have sequenced items, whereas unordered lists have
bulleted items The 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 left 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 This might be used
in an outline or table of contents, for example
Trang 5Example 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
Trang 6Ordered lists have two attributes that let you control the appearance of
list items The start attribute can be used to set the number for the first item
of the list to a value other than 1 The 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 The start attribute is ignored
in unordered lists
The items of a definition list are enclosed in <dl></dl> tags Each item of
a definition list is a pair of objects called the definition term and definition
description The definition term’s HTML tags are <dt></dt>, and the
defini-tion descripdefini-tions are <dd></dd> The default behavior of most browsers is to
treat both the definition terms and descriptions as normal paragraphs, with
the definition element indented from the left margin No bullets or list
num-bers are added Definition lists are intended to be used by authors to mark
up content that has a topic-comment structure This is useful for lists of
frequently asked questions and answers (FAQs), as well as for glossaries and
indexes
A definition list has no restrictions regarding the use of other HTML
ele-ments within either the defining 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 Definition
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
definition list
Example 2.16: HTML for a definition list
<!DOCTYPE html>
<html>
<head>
continues
Trang 7<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>
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 definition list appears in a typical browser
Example 2.16: HTML for a definition list (continued)
Trang 8Without any attributes, the menu list element, <menu></menu>, has the
same effect 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 The 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 field 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 field defined above
it The value of the input element’s contextmenu attribute is the value of the
menu’s id attribute The 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 defined in this
exam-ple) to fill in the value of the input field
The 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
Trang 9Example 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 The CSS rules in the style element operate on each list item in the
menu element, causing it to float up on the right of the previous list item The
Trang 10CSS statements setting the margin, border, and padding style the list items as
separated buttons The 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
di v i S ion An d S ECTion E LE M E nTS
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 different 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