HTML and CSS Reference
In-Depth Information
Task:
Exercise 6.4: Linking Sections Between Two Pages
▼
Now let's create an example with two pages. These two pages are part of an online refer-
ence to classical music, in which each web page contains all the references for a particu-
lar letter of the alphabet (
a.html
,
b.html
, and so on). The reference could have been
organized such that each section is its own page. Organizing it that way, however, would
have involved several pages to manage, and many pages the readers would have to load if
they were exploring the reference. Bunching the related sections together under lettered
groupings is more efficient in this case. (Lesson 18, “Writing Good Web Pages: Do's and
Don'ts,” goes into more detail about the trade-offs between short and long pages.)
The first page you'll look at is for M; the first section looks like the following in HTML:
Input
▼
<!DOCTYPE html><html>
<head>
<title>
Classical Music: M
</title>
</head>
<body>
<h1>
M
</h1>
<h2>
Madrigals
</h2>
<ul>
<li>
William Byrd,
<em>
This Sweet and Merry Month of May
</em></li>
<li>
William Byrd,
<em>
Though Amaryllis Dance
</em></li>
<li>
Orlando Gibbons,
<em>
The Silver Swan
</em></li>
<li>
Claudio Monteverdi,
<em>
Lamento d'Arianna
</em></li>
<li>
Thomas Morley,
<em>
My Bonny Lass She Smileth
</em></li>
<li>
Thomas Weelkes,
<em>
Thule, the Period of Cosmography
</em></li>
<li>
John Wilbye,
<em>
Sweet Honey-Sucking Bees
</em></li>
</ul>
<p>
Secular vocal music in four, five and six parts, usually a capella.
15th-16th centuries.
</p>
<p><em>
See Also
</em>
Byrd, Gibbons, Lassus, Monteverdi, Morley, Weelkes, Wilbye
</p>
</body
</html>
6
