1-24b Apply: Case Problem 1 Data Files needed for this Case Problem: jtc_index_txt.html, jtc_services_txt.html, 2 CSS files, 3 PNG files, 1 TXT file Carol Jedds is the owner and operator of Jedds Tree

1-24b

Apply: Case Problem 1

Data Files needed for this Case Problem: jtc_index_txt.html, jtc_services_txt.html, 2 CSS files, 3 PNG files, 1 TXT file

Carol Jedds is the owner and operator of Jedds Tree Care and tree removal and landscaping company in Lansing, Michigan. She has asked for your help in developing her company's website. She has already written some of the text for a few sample pages and wants you to write the HTML code.  shows a preview of the company's home page that you'll create.

Figure 1-46

Jedds Tree Care home page

© 2016 Cengage Learning; © mary981/Shutterstock.com

The style sheets and graphic files have already been created for you. Your job is to write the HTML markup.

Complete the following:

Using your editor, open the jtc_index_txt.html and jtc_services_txt.html files from the html01 ► case1 folder. Enter your name and the date in the comment section of each file, and save them as jtc_index.html and jtc_services.html respectively.

Go to the jtc_index.html file in your HTML editor. Within the document head, do the following:

a.  Use the meta element to set the character encoding of the file to utf-8.

b.   Set the document title to Jedds Tree Care.

c.    Link the document to the jtc_base.css and jtc_layout.css style sheet files.

Within the document body, insert a header element, an aside element, and an article element.

Within the header element, insert a navigation list with links to jtc_index.html and jtc_services.html file. The text of the links should be home and services respectively.

Go to the jtc_pages.txt file in your text editor. The first section in the file contains comments made by Jedds Tree Care customers. Copy the text of the three reviews including the reviewer names. Then, go to the jtc_index.html file in your HTML editor and paste the copied text within the aside element.

Within the aside element, add the following content and markup:

a.   Directly after the opening  tag, insert an inline image for the jtc_comments.png file. Specify Comments as the alternate text.

b.   Enclose each of the three reviewer comments within a blockquote element, including both the text of the quote and the name of the review.

c. Within each of the three blockquote elements,

i.     mark the review as a paragraph.

ii.    mark the line containing the reviewer name as a cite element.

iii. replace the "---" text with the em dash character (—) using the character reference name mdash.

Go to the article element and insert a header element containing the inline image file jtc_photo1.png with the alternate text Jedds Tree Care.

Return to the jtc_pages.txt file in your text editor and copy the second section of text containing the description of the company and its contact information. Then, go to the jtc_index.html file in your HTML editor and paste the copied text in the article element, directly below the article header.

Mark up the content of the page article as follows:

a.   Mark the first two paragraphs using the  tag.

b.   Enclose the five lines of the contact information within an address element. Insert a line break element at the end of the first four lines so that each part of the address appears on a new line in the rendered page.

c.    Mark the text Jedds Tree Care in the first line of the address as a strong element.

d.   Mark the e-mail address as a hypertext link. Make the telephone number a telephone link, including the international access code.

Save your changes to the jtc_index.html file. Open the page in your browser and verify that the layout and contents of the page resemble that shown in  Note that under the smaller screen widths associated with mobile devices, the text of the reviewer comments is not displayed.

Go to the jtc_services.html file in your HTML editor. Insert the same metadata in the document head to match what you did for the jtc_index.html file except name the page title Jedds Tree Care Services.

Go to the jtc_index.html file in your HTML editor and copy the body header. Then, go to the jtc_services.htmlfile and paste the copied header into the document body so that both files share a common header design.

Return to the jtc_pages.txt file in your text editor and copy the content of the third section, which contains information on the services offered by Jedds Tree Care. Be sure to copy the heading as well. Then, go to the jtc_services.html file in your HTML editor and paste the copied text directly after the header.

Mark the content describing Jedds Tree Care services as follows:

a.   Mark the heading Jedds Tree Care Services as an h1 heading.

b.   Directly after the h1 element, insert an inline image file for the jtc_photo2.png with the alternate text set to empty.

c.    Mark each of the headings associated with individual services as h2 headings.

d.   Mark each service description as a paragraph.

Directly after the text of the last service, insert a footerelement containing the following text:

Jedds Tree Care ♦ 201 Edward Ave. ♦ Lansing, MI 48930

where the ♦ symbol is inserted using the character code 9830.

Save your changes to the file and open the jtc_services.html file in your browser. Verify that the page title is displayed as a major heading and the name of each service is displayed as a second level heading.