All together now: creating real pages
Now that you know the basics of marking up different kinds of content, you’ll learn how to put a
whole page together to view it in a browser.
Starting with your index.html file that you created a few sections ago, the first thing you’ll do is begin
filling in some more details for your specific page. Let’s make a home page for Papa Pepperoncini’s
Pizza.
Recall that your document shell looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; å
charset=utf-8"/>
<title>New Document</title>
</head>
<body>
</body>
</html>
First, let’s change the title of your page to “Welcome to Papa Pepperoncini’s Pizza”:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; å
charset=utf-8"/>
<title>Welcome to Papa Pepperoncini's Pizza</title>
</head>
<body>
</body>
</html>
Next, let’s add some content into the <body> of the page. You’ll need to add four main sections to the
page: a header to proudly display Papa Pepperoncini’s name as well as to contain the main navigation
for the site, a place for a welcome message, an area to showcase weekly specials, and finally a footer
for your copyright information. The most logical way to differentiate these sections is to create <div>
elements that will group each one individually and then give each <div> element a descriptive id
value to uniquely identify them:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; å
charset=utf-8"/>
<title>Welcome to Papa Pepperoncini's Pizza</title>
</head>
<body>
<div id="header">
</div>
<div id="welcome">
</div>
<div id="specials">
</div>
<div id="footer">
</div>
</body>
</html>
Now, the content for the footer is easy, so let’s add that quickly:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; å
charset=utf-8"/>
<title>Welcome to Papa Pepperoncini's Pizza</title>
</head>
<body>
<div id="header">
</div>
<div id="welcome">
</div>
<div id="specials">
</div>
<div id="footer">
<p>Copyright © 2008 Papa Pepperoncini's Pizza —
All rights reserved.</p>
</div>
</body>
</html>
Note the use of entity references for the copyright symbol and the dash.
In the header, you’ll want the name of the restaurant to be a headline because it’s a crucially important
piece of your page. You’ll also turn this headline into a link to the home page so that no matter
where visitors are on your website, it will be easy for them to return to the home page.
For your navigation menu, you always want to have a link to the home page, a link to a page that displays
the restaurant’s menu, a link to a page that lists all the locations for Papa Pepperoncini’s Pizza
(maybe it’s a chain, or even if it’s not, this list will still have at least the one location in it!), and some
general information about how Papa Pepperoncini works his magic. Since this navigation menu is
really just a list of links to different pages, you’ll put all these links inside an unordered list and link
them to pages that you’ll create later.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; å
charset=utf-8"/>
<title>Welcome to Papa Pepperoncini’s Pizza</title>
</head>
<body>
<div id="header">
<h3><a href="index.html">Papa Pepperoncini’s Pizza</a> å
</h3>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Our Menu</a></li>
<li><a href="locations.html">Locations</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
</div>
<div id="welcome"></div>
<div id="specials"></div>
<div id="footer">
<p>Copyright © 2008 Papa Pepperoncini’s Pizza —
All rights reserved.</p>
</div>
</body>
</html>
Notice the use of an <h3> element for the restaurant title. You might choose an <h3> here because
even though the company name is important on this page, it might not be quite as important as the
welcome message, which Papa Pepperoncini has decided earlier is to be the main goal of the home
page. As a result, you’ll save your <h1> for the headline inside the welcome section.
Deciding which pieces of content are the most important parts of a page and how to mark them up is
part of the art of web development. Another way to do this would have been to have multiple <h1>s
on this page, but some might argue that this would dilute their importance. Really, there’s no right
answer here. This example just goes to show that you don’t actually have to place <h1> elements
before <h2> elements, and so on. Regardless of how you choose to mark up content like this, the
important thing is to have a reason that makes sense and to stick to whatever method you choose
consistently throughout the entire process of creating pages for the website.
Next, let’s move on to the welcome message. Papa Pepperoncini sent you some text that he wanted to
use for this section, so you’ll mark it up properly by making sure his content is placed inside appropriate
elements and that any special characters (like quotation marks or ampersands) are replaced
with their proper entity references:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; å
charset=utf-8"/>
<title>Welcome to Papa Pepperoncini's Pizza</title>
</head>
<body>
<div id="header">
<h3><a href="index.html">Papa Pepperoncini’s Pizza</a> å
</h3>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Our Menu</a></li>
<li><a href="locations.html">Locations</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
</div>
<div id="welcome">
<h1>Welcome to Papa Pepperoncini’s!</h1>
<p>Please, sit down! Papa Pepperoncini’s Pizza is the
finest Italian Eatery this side of the Atlantic, and
we’re glad you’ve come to visit. Feel free
to look at the menu, browse through our locations, or
read about our history. And if you need anything,
just let us know.
Grazzi!</p>
</div>
<div id="specials">
</div>
<div id="footer">
<p>Copyright © 2008 Papa Pepperoncini's Pizza —
All rights reserved.</p>
</div>
</body>
</html>
The last piece is your display of the weekly specials. These are clearly another list, so you’ll put them
in an <ul> and add a headline to introduce them:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; å
charset=utf-8"/>
<title>Welcome to Papa Pepperoncini's Pizza</title>
</head>
<body>
<div id="header">
<h3><a href="index.html">Papa Pepperoncini’s Pizza</a> å
</h3>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Our Menu</a></li>
<li><a href="locations.html">Locations</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
</div>
<div id="welcome">
<h1>Welcome to Papa Pepperoncini’s!</h1>
<p>Please, sit down! Papa Pepperoncini’s Pizza is the
finest Italian Eatery this side of the Atlantic, and
we’re glad you’ve come to visit. Feel free
to look at the menu, browse through our locations, or
read about our history. And if you need anything,
just let us know.
Grazzi!</p>
</div>
<div id="specials">
<h2>Weekly Specials</h2>
<ul>
<li>Monday: Small Caesar Salad and Eggplant Rollatini</li>
<li>Tuesday: Pasta Gagioli and Gnocchi in a Pesto Cream
Sauce</li>
<li>Wednesday: Spiedini alla Romano with Marinara
Sauce</li>
<li>Thursday: New England Clam Chowder and Grilled Shrimp
Kabob over Rice</li>
<li>Friday: Tracciatella a la Romano and 7" Italian Combo
Hero</li>
</ul>
</div>
<div id="footer">
<p>Copyright © 2008 Papa Pepperoncini's Pizza —
All rights reserved.</p>
</div>
</body>
</html>
This is a great start. Before you get ahead of yourself, though, let’s make sure you haven’t made any
typos or forgot to close any elements by running your markup through the online validator at
http://validator.w3.org, which will ensure you don’t have any errors.
“Congratulations,” the validator tells you; this code indeed validates as XHTML 1.0 Strict markup.
0 comments:
Post a Comment