Launch a text editor, and create a web page with the following specifications:

1. Web Page Title: Use a descriptive page title. The company name is a good choice for a business website.

2. Wireframe Header Area: Code the header element with the text, “JavaJam Coffee House” contained within a heading 1 element.

3. Wireframe Navigation Area: Place the following text within a nav element with bold text (use the element):

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. Add extra blank spaces between the hyperlinks with the   special character as needed.

4. Wireframe Content Area: Code the main page content within a div element. Use Hands-On Practice as a guide.

a. Configure the following content in an unordered list:

Specialty Coffee and Tea

Bagels, Muffins, and Organic Snacks

Music and Poetry Readings

Open Mic Night Every Friday Night

b. Code the following address and phone number contact information within a div element. Use line break tags to help you configure this area and add extra space between the phone number and the footer area.

54321 Route 42

Ellison Bay, WI 54210

1-888-555-5555

5. Wireframe Footer Area: Configure the following copyright and e-mail link information within a footer element. Format it with small text size (use the tag) and italics font style (use the tag).

Copyright © 2014 JavaJam Coffee House

Place your name in an e-mail link on the line under the copyright.

The page in Figure 2.31 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 sample. Your goal at this point should be to practice and get comfortable using HTML. Save your page in the javajam folder, and name it index.html.

In this Hands-On Practice you will practice using structural elements as you create the Trillium Media Design home page, shown in Figure 2.18. Launch a text editor, and open the template.html file from the chapter1 folder in the student files. Edit the code as follows:

1. Modify the title of the web page by changing the text between the tags to Trillium Media Design.

2. Position your cursor in the body section and code the header element with the text, ?Trillium Media Design? contained in an h1 element:

Trillium Media Design

3. Code a nav element to contain text that will indicate the main navigation for the website. Configure bold text (use the b element) and use the   special character to add extra blank space:

4. Code the content within a div element that contains the h2 and paragraph elements:

New Media and Web Design
Trillium Media Design will bring your company’s Web presence to the next level. We offer a comprehensive range of services.
Meeting Your Business Needs
Our expert designers are creative and eager to work with you.

5. Configure the footer element to contain a copyright notice displayed in small font size (use the small element) and italic font (use the i element). Be careful to properly nest the elements as shown here:

Save your page as structure2.html. Test your page in a browser. It should look similar to Figure 2.18. You can compare your work to the sample in the student files (chapter2/structure.html).

Figure JavaJam index.html.