Web Development and Design Foundations with XHTML, 5th Edition

(Steven Felgate) #1

(^62) Chapter 2 XHTML Basics
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

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
physical style element) and emphasized font style (use the 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

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.



  1. 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 andtags 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
    element
    to contain each menu item name. Configure the menu item name to display in
    bold text (use the element). Use the
    element to contain the
    menu item description.