Graded Project. HTML Coding

Size: px

Start display at page:

Download "Graded Project. HTML Coding"

Edith Lynch
5 years ago
Views:

1 Graded Project HTML Coding

2 OVERVIEW 1 INSTRUCTIONS 1 SUBMITTING YOUR PROJECT 17 Contents iii

3 HTML Coding OVERVIEW After completing the exercises for your HTML Coding study guide, you re now ready to complete the graded project. For the graded project, you ll use HTML and JavaScript to create a new Web page by using many of the new Web designing skills you ve learned. You ll then upload the project to the student Web hosting site. INSTRUCTIONS For the graded project, you ll create a Web page from scratch using many of the HTML commands you ve learned. Follow each step and add each of the presentation elements as instructed. Laura Cameron, owner of Cameron Cookies in Portland, Maine, asks you to create a Web page for her. She wants her customers to be able to view her contact information, a listing of some types of cookies she sells, and an link to contact her at the store. She also wants you to link this page to a Web form where customers can order cookies. Follow the instructions below to create these Web pages for Laura. 1

4 1. Open a text editor, such as Windows Notepad. 2. Type the following lines of code into your document as shown below (Figure 1): <html> <head> <title> Cameron Cookies </title> </head> <body> </body> </html> FIGURE 1 Your code should appear in your text editor as shown here. 3. Add a welcome message to your Web page by typing Heading 1 tags under the <body> tag as follows: <h1> Cameron Cookies </h1> 4. Save the file as index.htm. 2 HTML Coding

5 5. Open a Web browser to view how your Web page looks. From the File menu, click Open and locate where you saved the file index.htm before clicking OK. Your Web page should look like Figure 2. FIGURE 2 Your Web Page Titled Cameron Cookies 6. Change the color and positioning of your heading by Aligning the heading in the center Changing the font color to red Changing the font face to Arial. If Arial isn t available, then use Helvetica. If Helvetica isn t available, then use Sans Serif. Graded Project 3

6 7. Save your changes and return to your Web browser. Press F5 to refresh the page to view your changes on your Web page (Figure 3). FIGURE 3 Your Updated Web Page 8. Underneath the heading, add the following text: The best homemade cookies in New England. Be sure to format this text as Heading 2 Italicized (if Heading 2 isn t already italicized) Centered 4 HTML Coding

7 9. Save your changes and return to your Web browser. Press F5 to refresh the page to view your changes in your Web page (Figure 4). FIGURE 4 Your Updated Web Page with New Text 10. Underneath this heading, add the following address information as paragraph text: 99 Sycamore St. Portland, ME (207) Be sure to center the text. 11. Add the following text underneath the address. Graded Project 5

8 Welcome to Cameron Cookies, which has been voted the best homemade cookies in New England in a recent poll. At Cameron Cookies, you re sure to find a cookie you ll love. Here s a sampling of our many varieties: Chocolate Nut Chocolate Chip Macadamia Nut Oatmeal Raisin Chocolate Dessert Butter Cookies are a great gift idea that everybody loves. Just give us a call or send us an 24 hours in advance and we ll create a lovely gift bag or basket filled with an assortment of fresh, homemade cookies. Thanks for visiting our web site and be sure to come visit us in person here in Portland, Maine. To place an order, click here. 12. Take your own photos or search through the Web to find photos of cookies to illustrate your Web pages. Create a table to display photos of each type of cookie to the left of the cookie name as in Figure 6. (Make sure your images don t have copyright restrictions. One source of free clip art is Right-click the image and save it to the same folder where your Web page is located. Insert the photos in your HTML document to the left of each cookie name. Note: You may have to create a table for your images to appear correctly. 13. Find an image to use as the background of your Web page. Change your background to include this background image. 6 HTML Coding

9 14. Save your changes in your text file and refresh your Web page in your browser. 15. Go back to the text you just entered in your HTML document and find the words click here. Create a link from the words click here to a new Web page that you haven t created yet called orderform.htm, which you ll save to the same folder as Cameron Cookies. 16. Save your changes in your text file and refresh your Web page in your browser. The words click here should now appear as a hyperlink, similar to Figure 5. (Don t click on the hyperlink; it s not yet fully functional.) FIGURE 5 Click here now appears as a hyperlink. 17. Save your file and check your link. Your Web page should look similar to Figure 6. Graded Project 7

FIGURE 6 Your Home Page Adding Links Now you re going to add more links to your home page for Cameron Cookies. 1. If you closed your HTML document for index.htm, reopen it now. 2.

10 FIGURE 6 Your Home Page Adding Links Now you re going to add more links to your home page for Cameron Cookies. 1. If you closed your HTML document for index.htm, reopen it now. 2. Under the address line for Cameron Cookies, insert a table with the following elements: Table width = 500 One row Four columns No border Table row data is centered 8 HTML Coding

11 3. Within each table cell, type the following text: About Us Contact Us Place an Order Sample Recipe 4. You re going to add a link for the text you just added. Follow the directions below for the destination of each link: Link About Us to the page about.htm. You haven t created this page yet, so the link won t be active until you create the About Us page. However, create the link to this page now. Link Contact Us to the address cookiemaster@cameroncookies.com. Link Place an Order to the page orderform.htm. You haven t created this page yet, so it won t be active until you create the Order Form page. Link Sample Recipe to the page recipe.htm. You haven t created this page yet, so it won t be active until you create the recipe page. 5. Save your changes and check your Web file in a browser. Your Web page should look similar to Figure 7. You re now finished with the index.htm page. Graded Project 9

12 FIGURE 7 Your Updated Web Page for Cameron Cookies Creating Your Other Pages 1. Copy your index.htm page and save it as about.htm. You re going to use some elements of the main page in all your other pages, so you don t have to retype them. 2. Scroll down your HTML code to find the text Welcome to Cameron Cookies. Now delete all the text from Welcome to the end of the page. 3. Make a copy of your about.htm file and save it as recipe.htm. 4. Make another copy and save it as orderform.htm. 5. Open the Web page for each new page created in your browser. Your Web pages should have your image, headers, address, and links; however, the remaining text should be gone. 10 HTML Coding

13 Modifying the About Us Page 1. Type the following text and format it to look like the text in Figure 8. Cameron Cookies was created by Bill and Laura Cameron in The Camerons began selling homemade cookies around their neighborhood using a family recipe passed down by Bill s grandmother, Stella Cameron. Their cookies were so popular that Bill and Laura had to expand their business, and in 1996 they moved to their current location in Portland, Maine. Cameron Cookies continues to sell off the shelves. Visitors to Maine drive out of their way to sample these wonderful, rich cookies that they ve heard so much about. We hope to see you soon! Bill and Laura 2. Change your link About Us to Home. 3. Change the destination of the link Home to index.htm. 4. Save your changes to your file and open the Web page for about.htm in your browser. Your page should look similar to Figure Test that the link for Home functions correctly. You ll be creating the recipe page next. Graded Project 11

FIGURE 8 The Web Page for About.htm Modifying the Recipe Page 1. Type Chocolate Chip Cookies in a Heading 2 format. 2. Type Ingredients in a Heading 3

14 FIGURE 8 The Web Page for About.htm Modifying the Recipe Page 1. Type Chocolate Chip Cookies in a Heading 2 format. 2. Type Ingredients in a Heading 3 format. 3. Type the following list of ingredients in an unordered list: 1/2 cup butter, softened 1 cup light brown sugar 3 tablespoons sugar 1 large egg 2 teaspoons vanilla extract 1-3/4 cups flour 12 HTML Coding

15 1/2 teaspoon baking powder 1/2 teaspoon baking soda 1/2 teaspoon salt 1-1/2 cups chocolate chips 4. Type Directions in a Heading 3 format. 5. Type the following in an ordered list format: 1. Preheat oven to 300 degrees. Cream butter with sugars. 2. Beat in egg and vanilla extract. 3. Mix dry ingredients in bowl. Add slowly to butter mixture. Stir in chocolate chips. 4. Drop cookie dough using a spoon onto a greased cookie sheet. Bake for 20 minutes or until browned. Type the following: Yield: 2 dozen cookies 7. Save your Web page and view it in a browser. It should appear similar to Figure 9. Graded Project 13

16 FIGURE 9 Your Completed Recipe.htm Page Modifying the Web Order Form 1. Add the form tags to your HTML document. After your links, create a table for your order form with the following elements: Width = 65% Border = 0 Cellpadding = 2 2. Within this table, you re going to create nested tables for your order form. The first table will contain personal information, the second will contain order information, and the third will contain payment information. 14 HTML Coding

3. Create your first nested table and add form content and data

FIGURE 10 Here s your first nested table with payment

Create your second nested table and add form content and data to

17 3. Create your first nested table and add form content and data to your table as shown in Figure 10. FIGURE 10 Here s your first nested table with payment information. 4. Create your second nested table and add form content and data to your table as shown in Figure 11A and Figure 11B. (A) (B) FIGURE 11A and 11B Here s your second nested table with payment information. Graded Project 15

5. Add the words, $5.95 for 1 5 boxes, $10.95 for five or more boxes to the second column. 6. Create your third nested table and add form content and data to your table as shown in Figure 12. 7.

18 5. Add the words, $5.95 for 1 5 boxes, $10.95 for five or more boxes to the second column. 6. Create your third nested table and add form content and data to your table as shown in Figure Save your file and refresh the Web page in your browser. 8. Check that all links on all pages are functional. FIGURE 12 Here s your third nested table with payment information. Working with Dynamic Content and JavaScript This third part of your graded project involves working with dynamic content. You re going to add a rollover effect to one of your Web pages. 1. Open the index.htm file in a text editor, such as Notepad. 2. You re going to create a rollover effect to the link, click here. When the mouse is over the link, the color of the link will change to red. 3. Save your changes and view the page in your Web browser. When your mouse hovers over the link click here, the text should appear in red font. Note: Be sure to note which browser you re using when you send in your project. 16 HTML Coding

19 SUBMITTING YOUR PROJECT Inspecting Your Work and Posting It to the Web Site Congratulations! All you have left to do with the project is to inspect your completed files one last time before you upload them to the web site for grading. Inspecting Your Completed Files 1. Proofread your work. Check your files for errors. Your project grade will be based on the accuracy with which you entered and edited the information. Make sure your final Web page is free of errors, and that you ve closely followed the instructions for any changes. 2. When you ve completed your graded project, log on to the Penn Foster web site and go to My Courses. 3. Click Take Exam next to your course. 4. Attach your file or files as follows: a. Click the Browse box. b. Locate the file you wish to attach. c. Double-click on the file. d. Click Upload File. e. If you have more than one file to attach, click the Browse box again, and repeat steps b, c, and d for each file. 5. Enter your address in the box provided. (Note: This information is required for online submission.) 6. If you wish to tell your instructor anything specific regarding this assignment, enter it in the Message box. 7. Click Submit File. Graded Project 17

20 The grading criteria for the project are as follows. Creating a Web Page (Refer to Figures 7, 8, and 9) Heading for index.htm centered and in red font Cookie images inserted correctly (allow for different cookie images; however, it should be to the left of the cookie name and in table) Layout of page formatted correctly, including items in a bulleted list link and hyperlink appear functional (hyperlink that redirects you to order form page) Created about.htm page correctly Created recipe page correctly with unordered and ordered lists 5 points 5 points 5 points 5 points 5 points 5 points Creating a Web Order Form (Refer to Figures 11, 12, and 13) Layout of page formatted correctly in table columns (each column appears lined up) Input boxes appear correctly Radio buttons for credit card choices appear correctly Selection lists for month and year of credit card expiration date appear correctly Submit button appears correctly Gift wrap check box appears correctly 10 points 10 points 10 points 5 points 5 points 5 points 18 HTML Coding

21 Working with Dynamic Content Hyperlink click here appears in red font when the mouse hovers over the link Hyperlinks at the bottom of each page are functional About Us page formatted correctly 5 points 10 points 10 points Graded Project 19

Graded Project. Microsoft Excel

Graded Project. Microsoft Excel Graded Project Microsoft Excel INTRODUCTION 1 PROJECT SCENARIO 2 CREATING THE WORKSHEET 2 GRAPHING YOUR RESULTS 4 INSPECTING YOUR COMPLETED FILE 6 PREPARING YOUR FILE FOR SUBMISSION 6 Contents iii Microsoft