HTML and CSS Reference
In-Depth Information
The second is the page containing the information about the countries. Here's the source
for the second page,
countries.html
, which contains information about the countries:
<!DOCTYPE html>
<html>
<head>
<title>
South American Countries
</title>
</head>
<body>
<div id=”uruguay”>
<h2>
Uruguay
</h2>
<p>
Uruguay, officially the Oriental Republic of Uruguay, is a country located
in the southeastern part of South America. It is home to some 3.5 million peo-
ple, of whom 1.4 million live in the capital Montevideo and its metropolitan
area. An estimated 88% of the population are of European descent.
</p>
<p>
Uruguay's only land border is with Rio Grande do Sul, Brazil, to the north.
To the west lies the Uruguay River, to the southwest lies the estuary of Rio de
la Plata, with Argentina only a short commute across the banks of either of
these bodies of water, while to the southeast lies the southern part of the
Atlantic Ocean. Uruguay, with an area of approximately 176 thousand km2, is the
second smallest nation of South America in area after Suriname.
</p>
</div>
<div id=”paraguay”>
<h2>
Paraguay
</h2>
<p>
Paraguay, officially the Republic of Paraguay, is a landlocked country in
South America. It is bordered by Argentina to the south and southwest, Brazil to
the east and northeast, and Bolivia to the northwest. Paraguay lies on both
banks of the Paraguay River, which runs through the center of the country from
north to south. Because of its central location in South America, is sometimes
referred to as Corazon de America, or the Heart of America.
</p>
<p>
As of 2009 the population was estimated at 6.3 million. The capital and
largest city is Asuncion. The official languages are Spanish and Guarani, both
being widely spoken in the country. Most of the population are mestizos.
</p>
</div>
</body>
</html>
For a real application, instead of this simple page, you'd have a more robust service that
could return lots of information about every country in South America on demand. This
example page illustrates the concept without requiring any knowledge of server-side
programming.
Now that the raw information is in place to be used on the page, I'll explain how the
page works. When a link is clicked, the information is retrieved from
countries.html
and displayed on the initial page, as shown in Figure 16.17.
