left means that the element adheres to the left margin of the containing element and that other HTML elements fol-lowing the floated element wrap around it on the right.. The element sti
Trang 1element 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: They are allowed to float alongside other elements if there is sufficient room The float property can take the values
left, right, or none, which is the default left means that the element adheres
to the left margin of the containing element and that other HTML elements
fol-lowing the floated element wrap around it on the right right does the opposite
The element sticks to the right margin, and the HTML elements following it
wrap around to the left Example 2.6 illustrates a common use of floating
ele-ments to create a page with a leading thumbnail image The 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
Trang 21983 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>
The body of Example 2.6 consists of a division element, with an image tag
inside it, followed by two paragraphs of text The division has a class attribute
with the value "image-left" There 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;
The first rule assigns the value "left" to the float property, which forces
the following paragraph elements to wrap around the division The second
rule provides one em2 of padding on the right of the image to give the page a
professional, typeset look The image is 120 pixels wide That 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 left margin once it extends below the image
2 An em is a typographic unit equal to the width of the letter M.
Trang 3Figure 2.6: A page with a floating image
Left and right floating 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
Trang 4Tower, 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>
The 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 The first statement in the style element centers
the text of the level-two heading The second statement says to block-justify all
paragraphs, reserving 2 percent of the available width (and height) for
pad-ding The final 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 fill the full width of the page, each
floated paragraph must be constrained to a width small enough to provide
enough room for the other Instead of giving these paragraphs a fixed width,
they are each allowed to occupy 46 percent of the document body’s width
Thus, 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
Trang 5Inline 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> The content is an example of computer code
<var></var> The 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
The 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
specification
There 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
These 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 The strong
empha-sis and/or emphaempha-sis elements should always be used when the content to be
marked up is important or needs emphasis
The big and small elements are also from early versions of HTML and are supported by most browsers for backward compatibility:
Trang 6<big></big> Increases the font size somewhat
<small></small> Decreases the font size somewhat
The big element is not in the HTML5 specification The small element has a
semantic purpose in HTML5: It is the element for marking up the “fine print”
of a document—the disclaimers, legal terms, and conditions that nobody ever
reads
The 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 The
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>
The 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 significance 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 The 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>
The 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>
Trang 7This 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 The 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
different 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 specification 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 fingers
The image element is self-closing It has two required attributes specifying the image’s source file 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 left 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,
Trang 8and there is no implied white space before, after, above, or below an image
Unless otherwise specified, the bottom of the image is aligned with the
base-line of the text it is embedded in Unless it is floated, it wraps with the words
immediately before and after 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 The
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 Specifies a unique identifier that references the element in CSS
and scripts class Specifies a semantic class that the element should be
consid-ered a member of style Specifies CSS style rules that should be applied to the element
title Specifies a title for the element
lang Specifies the natural language of the element’s text content
dir Specifies the direction, left-to-right or right-to-left, of the
ele-ment’s text content hidden Specifies whether the user agent should hide the element’s
content The language attribute, lang, affects 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 different 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’s text
The 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 files, and directory listings Internet Explorer was the first
browser to display the title attribute’s value in a Windows tooltip when the
Trang 9user’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 specification extended its
application to all HTML elements
The next two global attributes can be added to any element, but they are most useful when used in user input fields and controls:
accesskey Specifies a shortcut key to be assigned to the element
to give it focus tabindex Specifies the ordering of elements when tabbing
through a document These four HTML attributes are new with HTML5 and are designed to be used with editable web page content:
contenteditable Specifies that the content may be editable if the host
permits such operation contextmenu Specifies a menu that may be presented when the user
Alt-clicks the element draggable Specifies whether the user may reposition the element spellcheck Specifies whether the browser can spell-check the
ele-ment’s content These 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 Specifies that the element is the subject of an element
with a corresponding item attribute item Specifies that the element is an item of an element
with a corresponding subject attribute itemprop Specifies the properties of an element with an item
attribute
A number of HTML attributes existed before CSS These attributes are sup-ported for backward compatibility even though web authors are encouraged to
use CSS in their place
Trang 10The align attribute when used in block elements specifies whether the text
of the element should be aligned with the left or right margin, or centered
within the containing element This 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 left, respectively
Sometimes, it is necessary to stop wrapping content around a floated
ele-ment before all of the available space is used The clear attribute does this
The 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 floating element It
aligns normally with the left or right margin of the containing element The
clear attribute works the same way as the clear CSS property The following
two statements have the same effect:
<h3 clear="left">A heading for this section</h3>
<h3 style="clear:left">A heading for this section</h3>
The second level-three heading is the preferred usage because CSS is more
flexible 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> The 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 specifies the element’s width or
height in pixels A number followed by the percent sign (%) specifies a width