Learning Web Design Third Edition- P11 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 (286.35 KB, 10 trang )
Part II: HTML Markup for Structure
86
Generic Elements (div and span)
Generic Elements (div and span)
There are endless types of information in the world, but as you’ve seen, not
all that many semantic elements. Fortunately, (X)HTML provides two generic
elements that can be customized to describe your content perfectly. The div
(short for “division”) element is used to indicate a generic block-level ele-
ment, while the span element is used to indicate a generic inline element. You
give a generic element a name using either an id or class attribute (we’ll talk
about those more in just a moment).
The div and span elements have no inherent presentation qualities of their
own, but you can use style sheets to format the content however you like.
In fact, generic elements are a primary tool in standards-based web design
because they enable authors to accurately describe content and offer plenty
of “hooks” for adding style rules.
We’re going to spend a little time on div and span (as well as the id and class
attributes, also called element identifiers) because they will be powerful tools
once we start working with Cascading Style Sheets. Let’s take a look at how
authors use these elements to structure content.
Divide it up with a div
The div element is used to identify a block-level division of text. You can use
a div like a container around a logical grouping of elements on the page. By
marking related elements as a div and giving it a descriptive name, you give
context to the elements in the grouping. That comes in handy for making the
structure of your document clear but also for adding style properties. Let’s
look at a few examples of div elements.
In this example, a div element is used as a container to group an image and
two paragraphs into a “listing”.
<div class="listing">
<img src="felici.gif" alt="" />
<p><cite>The Complete Manual of Typography</cite>, James Felici</p>
<p>A combination of type history and examples of good and bad type.
</p>
</div>
By putting those elements in a div, I’ve made it clear that they are conceptu-
ally related. It also allows me to style to p elements within listings differently
than other paragraphs on the page.
Here is another common use of a div used to break a page into sections for
context, structure, and layout purposes. In this example, a heading and sev-
eral paragraphs are enclosed in a div and identified as the “news” section.
<div id="news">
<h1>New This Week</h1>
<p>We've been working on </p>
<p>And last but not least, </p>
</div>
<div> </div>
Generic block-level element
<span> </span>
Generic inline element
<div> </div>
Generic block-level element
<span> </span>
Generic inline element
It is possible to nest
div
elements
within other
div
elements, but
don’t go overboard. You should
always strive to keep your markup as
simple as possible, so only add a
div
element if it is necessary for logical
structure or styling.
m A R K U P t I P
Generic Elements (div and span)
Chapter 5, Marking Up Text
87
Now that I have an element known as “news,” I could use a style sheet to
position it as a column to the right or left of the page.
Get inline with span
A span offers all the same benefits as the div element, except it is used for
inline elements that do not introduce line breaks. Because spans are inline
elements, they can only contain text and other inline elements (in other
words, you cannot put block-level elements in a span). Let’s get right to some
examples.
In this example, each telephone number is marked up as a span and classified
as “phone.”
<ul>
<li>Joan: <span class="phone">999.8282</span></li>
<li>Lisa: <span class="phone">888.4889</span></li>
<li>Steve: <span class="phone">888.1628</span></li>
<li>Morris: <span class="phone">999.3220</span></li>
</ul>
You can see how the labeled spans add meaning to what otherwise might be
a random string of digits. It makes the information recognizable not only to
humans but to (theoretical) computer programs that know what to do with
“phone” information. It also enables us to apply the same style to phone
numbers throughout the site.
Element identifiers
In the previous examples, we saw the element identifiers, id and class, used
to give names to the generic div and span elements. Each identifier has a spe-
cific purpose, however, and it’s important to know the difference.
The id identifier
The id identifier is used to identify a unique element in the document. In
other words, the value of id must be used only once in the document. This
makes it useful for assigning a name to a particular element, as though it
were a piece of data. See the sidebar, id and class Values, for information on
providing names for the id attribute.
This example uses the book’s ISBN number to uniquely identify each listing.
No two book listings may share the same id.
<div id="ISBN0321127307">
<img src="felici.gif" alt="" />
<p><cite>The Complete Manual of Typography</cite>, James Felici</p>
<p>A combination of type history and examples of good and bad type.</
p>
</div>
Not Just for divs
The
id
and
class
attributes may
be used with nearly all (X)HTML
elements, not just
div
and
span
.
For example, you could identify an
unordered list as “navigation” instead
of wrapping it in a
div
.
<ul id="navigation">
<li> </li>
<li> </li>
<li> </li>
</ul>
In HTML 4.01,
id
and
class
attributes
may be used with all elements
except
base
,
basefont
,
head
,
html
,
meta
,
param
,
script
,
style
, and
title
. In XHTML,
id
support has
been added to those elements.
Part II: HTML Markup for Structure
88
Generic Elements (div and span)
<div id="ISBN0881792063">
<img src="bringhurst.gif" alt=" /">
<p><cite>The Elements of Typographic Style</cite>, Robert
Bringhurst</p>
<p>This lovely, well-written book is concerned foremost with
creating beautiful typography.</p>
</div>
Web authors also use id when identifying the various sections of a page.
With this method, there may not be more than one “header,” “main,” or other
named div in the document.
<div id="header">
(masthead and navigation here)
</div>
<div id="main">
(main content elements here)
</div>
<div id="links">
(list of links here)
</div>
<div id="news">
(news sidebar item here)
</div>
<div id="footer">
(copyright information here)
</div>
The class identifier
The class attribute is used for grouping similar elements; therefore, unlike
the id attribute, multiple elements may share a class name. By making ele-
ments part of the same class, you can apply styles to all of the labeled ele-
ments at once with a single style rule. Let’s start by classifying some elements
in the earlier book example. In this first example, I’ve added class attributes
to certain paragraphs to classify them as “descriptions.”
<div id="ISBN0321127307" class="listing">
<img src="felici.gif" alt="" />
<p><cite>The Complete Manual of Typography</cite>, James Felici</p>
<p class="description">A combination of type history and examples of
good and bad type.</p>
</div>
<div id="ISBN0881792063" class="listing">
<img src="bringhurst.gif" alt="" />
<p><cite>The Elements of Typographic Style</cite>, Robert
Bringhurst</p>
<p class="description">This lovely, well-written book is concerned
foremost with creating beautiful typography.</p>
</div>
I’ve also classified each div as a “listing.” Notice how the same element may
have both a class and an id identifier. It is also possible for elements to
The
id
attribute is used to
identify
.
The
class
attribute is used to
t I P
id and class Values
The values for
id
and
class
attributes should start with a letter
(A-Z or a-z) or underscore (although
Internet Explorer 6 and earlier have
trouble with underscores, so they
are generally avoided). They should
not contain any character spaces or
special characters. Letters, numbers,
hyphens, underscores, colons, and
periods are okay. Also, the values are
case-sensitive, so “sectionB” is not
interchangeable with “Sectionb.”
Some Special Characters
Chapter 5, Marking Up Text
89
belong to multiple classes. In this example, I’ve classified each div as a “book”
to set them apart from “cd” or “dvd” listings elsewhere in the document.
<div id="ISBN0321127307" class="listing book">
<img src="felici.gif" alt="CMT cover">
<p><cite>The Complete Manual of Typography</cite>, James Felici</p>
<p class="description">A combination of type history and examples of
good and bad type.</p>
</div>
<div id="ISBN0881792063" class="listing book">
<img src="bringhurst.gif" alt="ETS cover">
<p><cite>The Elements of Typographic Style</cite>, Robert
Bringhurst</p>
<p class="description">This lovely, well-written book is concerned
foremost with creating beautiful typography.</p>
</div>
This should have given you a good introduction to how div and span are used
to provide meaning and organization to documents. We’ll work with them
even more in the style sheet chapters in Part III.
Some Special Characters
There’s just one more text-related topic before we move on.
Some common characters, such as the copyright symbol ©, are not part of
the standard set of ASCII characters, which contains only letters, numbers,
and a few basic symbols. Other characters, such as the less-than symbol (<),
are available, but if you put one in an (X)HTML document, the browser will
interpret it as the beginning of a tag.
Characters such as these must be escaped in the source document. Escaping
means that instead of typing in the character itself, you represent it by its
numeric or named character reference. When the browser sees the character
reference, it substitutes the proper character in that spot when the page is
displayed.
There are two ways of referring to a specific character: by an assigned
numeric value (numeric entity) or using a predefined abbreviated name for
the character (called a named entity). All character references begin with a
“&” and end with an “;”.
Some examples will make this clear. I’d like to add a copyright symbol to
my page. The typical Mac keyboard command, Option-G, which works in
my word processing program, won’t work in XHTML. Instead, I must use
the named entity © (or its numeric equivalent ©) where I want the
symbol to appear (Figure 5-12).
<p>All content copyright © 2007, Jennifer Robbins</p>
or:
<p>All content copyright © 2007, Jennifer Robbins</p>
Part II: HTML Markup for Structure
90
Some Special Characters
(X)HTML defines hundreds of named entities as part of the markup lan-
guage, which is to say you can’t make up your own entity. Table 5-4 lists some
commonly used character references. If you’d like to see them all, the complete
list of character references has been nicely assembled online by the folks at
the Web Standards Project at www.webstandards.org/learn/reference/charts/
entities/.
Table 5-4. Common special characters and their character references
Character Description Name Number
Character space (nonbreaking
space)
 
& Ampersand
& &
' Apostrophe
'
(XHTML only)
'
< Less-than symbol (useful for dis-
playing markup on a web page)
< <
> Greater-than symbol (useful for
displaying markup on a web
page)
> &$062;
© Copyright ©
©
® Registered trademark ®
®
™ Trademark
™ ™
£ Pound £
£
¥ Yen ¥
¥
€
Euro
€ €
– En-dash
– –
— Em-dash
— —
‘ Left curly single quote
‘ ‘
’ Right curly single quote
’ ’
“ Left curly double quote
“ “
” Right curly double quote
” ”
• Bullet
• •
Horizontal ellipses
… …
Figure 5-12. The special character is substituted for the character reference when the
document is displayed in the browser.
Character
References in
XHTML
There are a few ways in which
XHTML is different than HTML when
it comes to character references.
First, XHTML defines a character
entity for apostrophe (
'
),
that was curiously omitted from
the HTML spec.
In XHTML, every instance of an
ampersand
must
be escaped
so that it is not interpreted as
the beginning of a character
entity, even when it appears in
the value of an attribute. For
example,
<img src="sno.jpg"
alt="Sifl & Olly Show" />
Non-breaking
Spaces
One interesting character to know
about is the non-breaking space
(
). Its purpose is to ensure that
a line doesn’t break between two
words. So, for instance, if I mark up
my name like this:
Jennifer Robbins
I can be sure that they will always
stay together on a line.
Non-breaking spaces are also
commonly used to add a string of
character spaces to text (remember
that browsers ignore consecutive
character spaces in the source
document). But if it’s space you’re
after, first consider whether a style
sheet margin, padding, or white-
space property might be a better
option than a string of space
characters.
Putting It All Together
Chapter 5, Marking Up Text
91
Putting It All Together
So far, you’ve learned how to mark up elements and you’ve met all of the
(X)HTML elements for adding structure and meaning to text content. Now
it’s just a matter of practice. Exercise 5-3 gives you an opportunity to try out
everything we’ve covered so far: document structure elements, block ele-
ments, inline elements and character entities. Have fun!
N ot e
This text file is available online at www.
learningwebdesign.com/materials. The
resulting markup is in Appendix A.
exercise 5-3
|
Text markup practice
Now that you’ve been introduced to all of the text elements, you can put them to
work by marking up a menu for the Black Goose Bistro. The raw text is shown below.
You can type it in or get the raw text file online (see note). Once you have the raw
content, follow the instructions following the copy. The resulting page is shown in
Figure 5-13.
Black Goose Bistro | Summer Menu
Baker’s Corner Seekonk, Massachusetts, Hours: M-T: 11 to 9, F-S; 11 to
midnight
Appetizers
Black bean purses
Spicy black bean and a blend of mexican cheeses wrapped in sheets of
phyllo and baked until golden. $3.95
Southwestern napoleons with lump crab new item!
Layers of light lump crab meat, bean and corn salsa, and our handmade
flour tortillas. $7.95
Main courses
Shrimp sate kebabs with peanut sauce
Skewers of shrimp marinated in lemongrass, garlic, and fish sauce then
grilled to perfection. Served with spicy peanut sauce and jasmine
rice. $12.95
Grilled skirt steak with mushroom fricasee
Flavorful skirt steak marinated in asian flavors grilled as you like
it*. Served over a blend of sauteed wild mushrooms with a side of blue
cheese mashed potatoes. $16.95
Jerk rotisserie chicken with fried plantains new item!
Tender chicken slow-roasted on the rotisserie, flavored with spicy and
fragrant jerk sauce and served with fried plantains and fresh mango.
$12.95
* We are required to warn you that undercooked food is a health risk.
Part II: HTML Markup for Structure
92
Putting It All Together
Enter the document structure elements first. Give the document the title “Black
Goose Bistro Summer Menu.”
Use
div
elements to divide the page into four unique sections named “header,”
“appetizers,” “main,” and “warnings,” in that order as appropriate.
Identify the first- and second-level headings (
h1
and
h2
). In the first-level heading,
change the vertical bar character to a bullet character.
Make the restaurant information a paragraph. Delete the comma after
“Massachusetts” and start “hours” on a new line with a
br
element.
Choose the best list elements for the menu item listings (Appetizers and Main
Courses). Mark up the lists and each item in them.
Make the footnote at the bottom of the menu a paragraph.
Make the asterisk for the footnote superscript. Make the asterisk in the menu
description superscript as well.
Two of the dishes are new items. Change the double hyphens to an em-dash
character and strongly emphasize “new items!” Classify the title of each new dish
as “newitem”.
Classify each price as “price” using
span
elements.
Label the paragraph in the “warnings”
div
as a “footnote” using a
class
identifier.
Save the file and name it menu_summer. html (you can save it in the bistro directory
you created in Chapter 4). Check your page in a browser.
Markup tips:
Choose the element that best fits the meaning of the selected text.
Don’t forget to close elements with closing tags.
Put all attribute values in quotation marks
“Copy and paste” is your friend when adding the same markup to multiple
elements. Just be sure what you copied is correct before you paste it throughout
the document.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Figure 5-13. The finished menu page.
Want More
Practice?
Try marking up your own résumé.
Start with the raw text, then add
document structure elements, block
elements, then inline elements as
we’ve done in Exercise 5-3. If you
don’t see an element that matches
your information just right, try
creating one using a
div
or a
span
.
Test Yourself
Chapter 5, Marking Up Text
93
Test Yourself
Were you paying attention? Here is a rapid-fire set of questions to find out.
Add the markup to add a quick horizontal rule between these paragraphs.
<p>People who know me know that I love to cook.</p>
<p>I’ve created this site to share some of my favorite
recipes.</p>
What does “deprecated” mean?
What’s the difference between a blockquote and a q element?
What element displays white space exactly as it is typed into the source
document?
What is the difference between a ul and an ol?
How do you remove the bullets from an unordered list? (Be general, not
specific.)
What element would you use to provide the full name of the W3C in the
document? Can you write out the complete markup?
What is the difference between a dl and a dt?
What is the difference between id and class?
Name the characters generated by these character entities:
— ___________ & ___________
___________ © ___________
• ___________ ™ ___________
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Part II: HTML Markup for Structure
94
(X)HTML Review: Text Elements
(X)HTML Review: Text Elements
The following is a summary of the elements we covered in this chapter.
Block-level elements
address author contact address
blockquote blockquote
h1 h6 headings
p paragraph
hr horizontal rule
List elements (block-level)
dd definition
dl definition list
dt term
li list item (for ul and ol)
ol ordered list
ul unordered list
Semantic inline elements
abbr abbreviation
acronym acronym
cite citation
code code sample
del deleted text
dfn defining term
em emphasized text
ins inserted text
kbd keyboard text
q short quotation
samp sample output
strong strongly emphasized
var variable
Presentational inline elements
b bold
big big
br line break
center centered text
font size, color, face
i italic
s strike-through
small small text
strike strike-through
sub subscript
sup superscript
tt teletype
u underlined
Generic elements
div block-level division
span inline span of text
95
IN THIS CHAPTER
Making links to
external pages
Making relative
links to documents
on your own server
Linking to a specific
point in a page
Adding “mailto” links
Targeting new windows
If you’re creating a page for the Web, chances are you’ll want it to point to
other web pages, whether to another section of your own site or to someone
else’s. You can even link to another spot on the same page. Linking, after all, is
what the Web is all about. In this chapter, we’ll look at the markup that makes
links work: to other sites, to your own site, and within a page.
If you’ve used the Web at all, you should be familiar with the highlighted
text and graphics that indicate “click here.” There is one element that makes
linking possible: the anchor (a).
<a> </a>
Anchor element (hypertext link)
The content of the anchor element becomes the hypertext link. Simply wrap
a selection of text in opening and closing <a> </a> tags and use the href
attribute to provide the URL of the linked page. Here is an example that cre-
ates a link to the O’Reilly Media web site:
<a href="">Go to O'Reilly.com</a>
To make an image a link, simply put the img element in the anchor element:
<a href=""><img src="ora.gif" /></a>
The only restriction is that because anchors are inline elements, they may
only contain text and other inline elements. You may not put a paragraph,
heading, or other block element between anchor tags.
Most browsers display linked text as blue and underlined, and linked images
with a blue border. Visited links generally display in purple. Users can change
these colors in their browser preferences, and, of course, you can change the
appearance of links for your sites using style sheets. I’ll show you how in
Chapter 13, Colors and Backgrounds.
When a user clicks on the linked text or image, the page you specify in the
anchor element loads in the browser window. The linked image markup
sample shown previously might look like Figure 6-1.
ADDING LINKS
CHAPTER
6
Anchor Syntax
The simplified structure of the anchor
element is:
<a href="url">linked text or
image</a>
A t A G l A n c e
