Launch a text editor, and create a web page document 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, “Pacific Trails Resort” 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  Yurts  Activities  Reservations

Code anchor tags so that “Home” links to index.html, “Yurts” links to yurts.html, “Activities” links to activities.html, and “Reservations” links to reservations.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.   Place the following within an h2 element: Enjoy Nature in Luxury

b.   Place the following content in a paragraph:

Pacific Trails Resort offers a special lodging experience on the California North Coast. Relax in serenity with panoramic views of the Pacific Ocean.

c.    Place the following content in an unordered list:

Private yurts with decks overlooking the ocean Activities lodge with fireplace and gift shop Nightly fine dining at the Overlook Cafe Heated outdoor pool and whirlpool Guided hiking tours of the redwoods

d.   Contact information:

Place the address and phone number information within a div below the unordered list. Use line break tags to help you configure this area and add extra space between the phone number and the footer area.

Pacific Trails Resort 12010 Pacific Trails Road Zephyr, CA 95555

888-555-5555

5.     Wireframe Footer Area: Configure the copyright and e-mail address information within a footer element. Also configure small text size (use the element) and italics font style (use the phrase element).

The copyright information is

Copyright © 2014 Pacific Trails Resort

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

The web page in Figure 2.27 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 file in the pacific 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 Pacific Trails Resort index.html.