HTML cơ bản - p 7 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 (807.5 KB, 10 trang )
ptg
44 Chapter 2: The HTML Language
element occupies the full width of its container minus whatever is needed for
the element’s margins, borders, and the padding of the containing element.
Block elements also have a float property: ey are allowed to oat alongside
other elements if there is sucient room. e float property can take the values
left, right, or none, which is the default. left means that the element adheres
to the le margin of the containing element and that other HTML elements fol-
lowing the oated element wrap around it on the right. right does the opposite.
e element sticks to the right margin, and the HTML elements following it
wrap around to the le. Example 2.6 illustrates a common use of oating ele-
ments to create a page with a leading thumbnail image. e contents are from a
Wikipedia article on the America’s Cup regatta.
Example 2.6: Flowing text around an image
<!DOCTYPE html>
<html>
<head>
<title>Example 2.6</title>
<style type="text/css">
body { padding: 2em; }
.image-left { float: left; padding-right: 1em; }
</style>
</head>
<body>
<div class="image-left">
<img src="images/Americas_Cup.jpg" alt="The America's Cup
trophy">
</div>
<p>
The America's Cup is a trophy awarded to the winner of the
America's Cup sailing regatta match. It is the oldest active
trophy in international sport, predating the Modern Olympics
by 45 years. Originally named the Royal Yacht Squadron Cup, it
became known as the "America's Cup" after the first yacht to
win the trophy, the schooner America. The trophy remained in
the hands of the New York Yacht Club (NYYC) from 1857 (when the
syndicate that won the Cup donated the trophy to the club) until
From the Library of Wow! eBook
ptg
HTML5 Semantics 45
1983 when the Cup was won by the Royal Perth Yacht Club, with
their yacht, Australia II, ending the longest winning streak in
the history of sport.
</p>
<p>
The America's Cup regatta is a challenge-driven series of match
races between two yachts which is governed by the Deed of Gift
which was the instrument used to convey the cup to the New York
Yacht Club. Any yacht club that meets the requirements specified
in the Deed of Gift has the right to challenge the yacht club
that holds the Cup. If the challenging yacht club wins the match,
the cup's ownership is transferred to that yacht club.
</p>
</body>
</html>
e body of Example 2.6 consists of a division element, with an image tag
inside it, followed by two paragraphs of text. e division has a
class attribute
with the value "image-left". ere is nothing special about that name.
"Garfield" would have worked as well, but image-left is more helpful. In the
style element in the document’s head, two CSS rules, in curly braces, are
assigned to the division with the image-left class attribute value:
float: left;
padding-right: 1em;
e rst rule assigns the value "left" to the float property, which forces
the following paragraph elements to wrap around the division. e second
rule provides one em
2
of padding on the right of the image to give the page a
professional, typeset look. e image is 120 pixels wide. at plus the one em
of padding leaves plenty of room for the text.
Figure 2.6 shows the page in a browser window. Notice how the paragraph
text returns to the le margin once it extends below the image.
2. An em is a typographic unit equal to the width of the letter M.
From the Library of Wow! eBook
ptg
46 Chapter 2: The HTML Language
Figure 2.6: A page with a floating image
Le and right oating elements can be used together to create a two-
column page. Example 2.7 uses CSS classes named floatleft and floatright.
Example 2.7: Using floating elements to create columns
<!DOCTYPE html>
<html>
<head>
<title>Example 2.7</title>
<style type="text/css"> <! styles for two columns >
h2 { text-align: center; }
p { text-align: justify; padding: 2%;}
p.floatleft { float: left; width: 46%; }
p.floatright { float: right; width: 46%; }
</style>
</head>
<body>
<h2>Points Of Interest</h2>
<p class="floatleft">Notable buildings in the district include
the Flatiron Building, one of the oldest of the original New York
skyscrapers, and just to east at One Madison Avenue is the Met Life
From the Library of Wow! eBook
ptg
HTML5 Semantics 47
Tower, built in 1909 and the tallest building in the world until 1913.
</p>
<p class="floatright">Nearby, on Madison Avenue between 26th and
27th Streets, on the site of the old Madison Square Garden, is
the New York Life Building, built in 1928 and designed by Cass
Gilbert, with a square tower topped by a striking gilded pyramid.
</p>
</body>
</html>
e content of the
body element in Example 2.7 is simple—one level-two
heading followed by two paragraphs. All the magic happens in the CSS style
element in the document head. e rst statement in the style element centers
the text of the level-two heading. e second statement says to block-justify all
paragraphs, reserving 2 percent of the available width (and height) for pad-
ding. e nal two statements apply only to paragraph elements having the
class attribute with values of
floatleft and floatright, respectively. Because
each paragraph has enough content to ll the full width of the page, each
oated paragraph must be constrained to a width small enough to provide
enough room for the other. Instead of giving these paragraphs a xed width,
they are each allowed to occupy 46 percent of the document body’s width.
us, with the 2 percent padding, the two columns occupy the full width of
readers’ browsers, neatly dividing the page. Figure 2.7 shows the result.
Figure 2.7: A web page with two columns and block-justified text
From the Library of Wow! eBook
ptg
48 Chapter 2: The HTML Language
Inline elements provide the content with the semantic meaning that makes
for interesting reading. Browsers interpret inline markup by changing the
typography of the text. Browsers for the visually impaired respond to inline
markup with changes in tone or volume. Inline HTML elements include
markup for explicit semantic purposes:
<em></em> Emphasis; the content has some importance.
<strong></strong> Strong emphasis; the content is very important.
<abbr></abbr> Abbreviation of a term in the content.
<cite></cite> Citation—the title of another work.
<code></code> e content is an example of computer code.
<var></var> e content is a computer variable.
<q> </q> Inline quotation.
<sup> </sup> Superscript; reduce the size and raise the content.
<sub> </sub> Subscript; reduce the size and lower the content.
e strikeout text element, <strike> </strike>, used to designate deleted
text in edited documents, may be recognized by many browsers for backward
compatibility with earlier versions of HTML. But it is not in the HTML5
specication.
ere is a set of inline markup elements for typographic styles that are
inherited from earlier versions of HTML:
<b></b> Bold text; increase the font weight.
<i></i> Italics; change the font style to italic.
<u></u> Underline the content.
ese typographic elements say nothing about the content they enclose,
other than that the author wants the text underlined or displayed with a
bold or italic font. No special importance or emphasis should be given to the
content, although it may look that way to a human reader. e strong empha-
sis and/or emphasis elements should always be used when the content to be
marked up is important or needs emphasis.
e big and small elements are also from early versions of HTML and are
supported by most browsers for backward compatibility:
From the Library of Wow! eBook
ptg
HTML5 Semantics 49
<big></big> Increases the font size somewhat.
<small></small> Decreases the font size somewhat.
e big element is not in the HTML5 specication. e small element has a
semantic purpose in HTML5: It is the element for marking up the “ne print”
of a document—the disclaimers, legal terms, and conditions that nobody ever
reads.
e
time element is new with HTML5. Its purpose is to provide machine-
readable publication dates and times of articles and indexes of articles, as
found on the front pages of online magazines and blogs. If a document has
multiple
article elements, there should be no more than one time element per
article. If a document has no article elements, there should be only one time
element. It provides the publication date and time of the document itself. e
time element’s datetime attribute holds the machine-readable value, and the
element’s content can hold the human-readable version. For example:
<time datetime="2003-03-13">March 13th</time>
e mark element is also new in HTML5. Its purpose is to highlight words
or phrases in a quotation that were not given emphasis by the quote’s author
but that have signicance in the current context. You would use the mark ele-
ment to highlight an important point in quoted text, for example:
<blockquote> nor be deprived of life, liberty, or property,
without
<mark>due process</mark> of law;</blockquote>
Or you would use the
mark element in a passage copied from a historic or
religious text to indicate phrases where the translation is in dispute among
scholars. e emphasis element used in Example 2.5 could be replaced with
the
mark element; however, consideration should be given to readers with older
browsers that do not recognize this HTML5 element. You could do this by
using both elements, for example:
<mark><em>due process</em><mark>
e span element is a general-purpose inline element that is semantically
neutral. It is very useful when given a class or style attribute:
wishing you a <span style="color:red">Happy Valentine's Day</span>
From the Library of Wow! eBook
ptg
50 Chapter 2: The HTML Language
is is particularly useful when you need to post some temporary content
quickly and do not want to bother editing the CSS style sheet.
Note: Netscape introduced a special inline element for text formatting
before its Navigator browser supported CSS. Known as the font element,
it takes three attributes: size, which is required, and face and color. The
blink element was another Netscape innovation. Guess what that does?
Both elements are now deprecated, although they are still supported by
many browsers for backward compatibility. The
blink element is especially
annoying and almost universally hated.
Two inline HTML elements are especially important. e anchor element,
<a></a>, creates hyperlinks to other pages on the Web, and the image element,
<img/>, inserts images into the content.
To give the links on a page a consistent look, the anchor element should
be the innermost nested element. It can contain other inline elements, such
as images, but it should not contain any elements that change the color or
typographic styles of the linked text in a way that suggests that some links are
dierent from others. If a heading is to be hyperlinked to another web page,
the anchor element should be nested inside the heading:
<h3><a href="chapter_5.html">Chapter 5, Building A Website</a></
h3>
However, the HTML5 specication allows the
anchor element to enclose any
other content as long as that content does not itself contain interactive items—
links or buttons that are sensitive to the actions of mice and ngers.
e
image element is self-closing. It has two required attributes specifying
the image’s source le and the alternative text to be used if the image itself
cannot be displayed. Here’s a typical image element:
<img src="logo.png" alt="The Logo Corporation"/>
Although the alt attribute is required, it can be le empty for image elements
that are solely decorative. Not every image needs to have a tooltip window pop up
when you hover over it.
<img src="blue_square.gif" alt=""/>
It is important to remember that images are not block elements. Even
though each image has its own height and width, it is still an inline element,
From the Library of Wow! eBook
ptg
HTML Attributes 51
and there is no implied white space before, aer, above, or below an image.
Unless otherwise specied, the bottom of the image is aligned with the base-
line of the text it is embedded in. Unless it is oated, it wraps with the words
immediately before and aer the image tag.
You’ll read more about images, anchors, and links later in this chapter.
HTML Attributes
A number of HTML attributes can be used with any HTML element. e
class and style attributes, used earlier in this chapter, belong to this set of
global attributes. Here are a few global attributes recognized by most HTML4
and HTML5 browsers:
id Species a unique identier that references the element in CSS
and scripts
class Species a semantic class that the element should be consid-
ered a member of
style Species CSS style rules that should be applied to the element
title Species a title for the element
lang Species the natural language of the element’s text content
dir Species the direction, le-to-right or right-to-le, of the ele-
ment’s text content
hidden Species whether the user agent should hide the element’s
content
e language attribute, lang, aects how punctuation is applied to an ele-
ment’s content, including hyphenation and the choice of ligatures and quota-
tion marks. Content enclosed in the quote element shows a dierent pair of
quotation marks, depending on the value of the language attribute set for
that element or inherited from one of its enclosing containers. An element’s
language is a concept separate from the character set that is used to display the
page’stext.
e
title attribute’s original purpose was to provide a window title for
links created by anchor and area elements that would display non-HTML data
such as images, text les, and directory listings. Internet Explorer was the rst
browser to display the title attribute’s value in a Windows tooltip when the
From the Library of Wow! eBook
ptg
52 Chapter 2: The HTML Language
user’s mouse hovered over the linked element. Users seemed to like tooltips,
and web developers provided them by enclosing elements in anchor tags with
null links just so that the tooltip would appear. Seeing the usefulness of the
title attribute to search engine robots, the HTML4 specication extended its
application to all HTML elements.
e next two global attributes can be added to any element, but they are
most useful when used in user input elds and controls:
accesskey Species a shortcut key to be assigned to the element
to give it focus
tabindex Species the ordering of elements when tabbing
through a document
ese four HTML attributes are new with HTML5 and are designed to be
used with editable web page content:
contenteditable Species that the content may be editable if the host
permits such operation
contextmenu Species a menu that may be presented when the user
Alt-clicks the element
draggable Species whether the user may reposition the element
spellcheck Species whether the browser can spell-check the ele-
ment’s content
ese last three HTML5 global attributes provide a means for HTML ele-
ments to be related to each other across the DOM in scripting applications:
subject Species that the element is the subject of an element
with a corresponding item attribute
item Species that the element is an item of an element
with a corresponding subject attribute
itemprop Species the properties of an element with an item
attribute
A number of HTML attributes existed before CSS. ese attributes are sup-
ported for backward compatibility even though web authors are encouraged to
use CSS in their place.
From the Library of Wow! eBook
ptg
HTML Attributes 53
e align attribute when used in block elements species whether the text
of the element should be aligned with the le or right margin, or centered
within the containing element. is is similar to how the CSS text-align
property is used. However, when the align attribute is used in an image (img)
or table (table) element with a value of left or right, it acts like the CSS float
property. It causes the content following the image or table to wrap around the
element on the right or le, respectively.
Sometimes, it is necessary to stop wrapping content around a oated ele-
ment before all of the available space is used. e
clear attribute does this.
e valid values for the clear attribute are left, right, and both. Adding this
attribute to an HTML element causes the browser to add enough vertical white
space before rendering the element to clear it from any oating element. It
aligns normally with the le or right margin of the containing element. e
clear attribute works the same way as the clear CSS property. e following
two statements have the same eect:
<h3 clear="left">A heading for this section</h3>
<h3 style="clear:left">A heading for this section</h3>
e second level-three heading is the preferred usage because CSS is more
exible. For example, if a page had many such level-three heading elements,
instead of adding the clear attribute to each, the web author could just add a
class attribute to accomplish the same thing using CSS. An example would be
<h3 class="clearfloat"> </h3>. e CSS statement to clear all h3 elements in
the clearfloat class would go in a style element in the document head, along
with any other styling needed for the headings:
<style type="text/css">
h3.clearfloat {
clear: left;
margin-top: 1.5em; /* provide extra space before each heading
*/
}
</style>
HTML block elements can have
width and height attributes. If the value of
one of these attributes is a positive integer, it species the element’s width or
height in pixels. A number followed by the percent sign (%) species a width
From the Library of Wow! eBook
