XHTML Basics - Web Development and Design Foundations with XHTML - page 62

Launch Notepad and create a Web page with the following specifications:
● Web page: Use a descriptive page title—the company name is a good choice for
a business Web site.
● Logo area: Use <h1> for the JavaJam Coffee House logo.
● Navigation: Place the following text within a paragraph:
Home Menu Music Jobs
Code anchor tags so that Home links to index.html, Menu links to menu.html,
Music links to music.html, and Jobs links to jobs.html.
● Content: Place the following content in an unordered list:
Specialty Coffee and Tea
Bagels, Muffins, and Organic Snacks
Music and Poetry Readings
Open Mic Night
● Contact information: Place the address and phone number information within
a paragraph below the unordered list. Hint : Use line break tags to help you
configure this area.
12312 Main Street
Mountain Home, CA 93923
1-888-555-5555
● Footer: Place the following information in a small text size (use the <small>
physical style element) and emphasized font style (use the <em> logical style
element):
Copyright © 2011 JavaJam Coffee House
Place your name in an e-mail link on the line under the copyright information.
The page in Figure 2.28 may seem a little sparse, but don't worry, as you gain
experience and learn to use more advanced techniques, your pages will look more
professional. White space (blank space) on the page can be added with <br />
tags where needed. Your page does not need to look exactly the same as the sam-
ple. Your goal at this point should be to practice and get comfortable using
XHTML.
Save your page in the javajam folder and name it index.html.
2. The Menu Page. Create the Menu page shown in Figure 2.29. A productivity tech-
nique is to create new pages based on existing pages—so you can benefit from
your previous work. Your new Menu page will use the index.html page as a start-
ing point.
Open the index.html page for the JavaJam Web site in Notepad. Select File, Save
As, and save the file with the new name of menu.html in the javajam folder. Now
you are ready to edit the page.

Modify the page title. Change the text contained between the <title> and
</title> tags to JavaJam Coffee House Menu.

●

Delete the unordered list and the contact information.

●

Add the menu content to the page using a definition list. Use the <dt> element
to contain each menu item name. Configure the menu item name to display in
bold text (use the <strong> element). Use the <dd> element to contain the
menu item description.

●