Search results for 'eco'

Principles of Web Design Sklar Chapter 5 Hands-On Projects CIT-150

1. In the following set of steps, you will learn how to style listitem elements with the list-style properties. As you work through the exercise, refer to Figure 5-27 to see the results you will achieve. Save your file and test your work in the browser as you complete each step.

To apply the list-style properties:
a. Open the file lists.html in your HTML editor, and save it in your work folder as lists1.html.
b. Copy the image file diamond.gif into your work folder.
c. In your browser, open the file lists1.html. When you open the file, it looks like Figure 5-26. Notice that the file contains three lists. You will apply a different liststyle to each list.
d. The first list on the page is a bulleted list that currently displays the default disc (bullet) style. Write a style rule that uses a class selector circle to uniquely select the list. Set the list-style-type property to change the bullet style to circle.
ul.circle {list-style-type: circle;}
e. Now apply the style to the first list by adding the class attribute to the <ul> element.
<!-- Bulleted List -->
<ul class="circle">
<li>Bread</li>
<li>Milk</li>
<li>Cheese</li>
<li>Eggs</li>
</ul>
f. The second list on the page is an ordered list that currently displays the default decimal style. Write a style rule that uses a class selector alpha to uniquely select the list. Set the list-style-type property to change the style to upper-alpha.
ol.alpha {list-style-type: upper-alpha;}
g. Now apply the style to the first list by adding the class attribute to the <ol> element.
<!-- Alphabetical List -->
<ol class="alpha">
<li>Spring</li>
<li>Summer</li>
<li>Fall</li>
<li>Winter</li>
</ol>
h. The third list on the page is an unordered list that currently displays the default bullet style. Write a style rule that uses a class selector image to uniquely select the list. Set the list-style-image property to a URL value, using the image file diamond.gif.
ul.image {list-style-image: url(diamond.gif);}
i. Now apply the style to the first list by adding the class attribute to the <ol> element. Figure 5-27 shows the finished document.
<!-- List Image -->
<ul class="image">
<li>Spruce</li>
<li>Pine</li>
<li>Elm</li>
<li>Birch</li>
</ul>

2. Modify an existing HTML document to use Cascading Style Sheets.
a. Build styles using the existing standard HTML elements in the file.
b. Test the work in multiple browsers to verify that all styles are portable.
c. Remove the files and place them in an external style sheet.
d. Link the HTML file to the style sheet. Test to make sure the file is displayed properly.

New Perspectives on HTML and XHTML Tutorial 5 Case Problem 3

Data Files needed for this Case Problem: blank.gif, bottom.jpg, bottomleft.jpg, bottomright.jpg, dhometxt.htm, dlogo.jpg, domepaper.css, dometxt.css, dtabletxt.css, left.jpg, leftbox.jpg, right.jpg, rightbox.jpg, tableback.jpg, top.jpg, topleft.jpg, and topright.jpg

dHome, Inc. Olivia Moore is the director of advertising for dHome, one of the nation’s newest manufacturers of geodesic dome houses. She’s hired you to work on the company’s Web site. Olivia has provided you with all of the text you need for the Web page, and your job is to design the page’s layout. You’ll start by designing a draft of the company’s home page. Olivia wants the page to include information about dHome’s pricing structure for various dome models. The page should also contain links to other pages on the Web site. A preview of the design you’ll create for Olivia is shown in Figure 5-78.

Complete the following:
1. Use your text editor to open dhometxt.htm, dometxt.css, and dtabletxt.css from the tutorial.05\case3 folder included with your Data Files. Enter your name and the date in the comment section of each file. Save the files as dhome.htm, dome.css, and dtable.css, respectively, in the same folder.
2. Go to the dhome.htm file in your text editor. Create links to the dome.css and dtable.css style sheets.
3. Scroll down to the pageContent div element, and above the paragraphs within that element, insert a table with the class name domeSpecs. Add the table summary, “A table describing six dome models sold by dHome, Inc.” and add the caption, “Building Models”.
4. Create a column group containing three col elements with class names of firstColumn, middleColumns, and lastColumn. The middleColumns element should span
two columns in the table.

This tutorial includes complete steps from 1-22.

New Perspectives on HTML and XHTML Tutorial 3 Case Problem 3

Data Files needed for this Case Problem: banner.jpg, king1.gif – king6.gif, kingtxt.htm, and centertxt.css

Center for Diversity Stewart Tompkins is the project coordinator for the Midwest University Center for Diversity. He is currently working on a Web site titled The Voices of Civil Rights, containing Web pages with extended quotes from civil rights leaders of the past and present. He has asked you to help develop a design for the pages in the series.He has given you the text for one of the pages, which is about Dr. Martin Luther King, Jr.

Complete the following:
1. In your text editor, open the kingtxt.htm and centertxt.css files from the tutorial.03\case3 folder included with your Data Files. Enter your name and the
date in the comment section of each file. Save the files as king.htm and center.css in the same folder. Take some time to study the content and layout of the king.htm file as it appears in your text editor and Web browser.
2. Return to the king.htm file in your text editor. Directly below the opening <body> tag, insert a div element with the id banner. Within the div element, insert an inline image for the banner.jpg graphic file. Give the inline image the id, bannerImage, and specify the alternate text “The Voices of Civil Rights Series.”
3. Enclose the rest of the page content, starting with the h1 heading at the top of the page through the address at the bottom of the file, in a div element with the id, pageContent.
4. Save your changes to the file.
5. In your text editor, go to the center.css file. Create a style for the body element that sets the font color to black, the background color to the value (204, 204, 153), and the margin to 0 em.

This tutorial includes complete steps from 1-20

New Perspectives on HTML and XHTML Tutorial 6 Case Problem 1 Solution

Data Files needed for this Case Problem: parch.jpg, pcg.css, pcglogo.jpg, sformtxt.css, and subtxt.htm
The Park City Gazette Kevin Webber, the editor of the Park City Gazette of Estes Park, Colorado, has asked for your help in developing a subscription page for the newspaper’s Web site. The page includes a form where customers can enter the length of the subscription they want to purchase, their mailing address, and their credit card information. Kevin has already created much of the layout and text of the Web page. Your job is to add the fields and control elements for the subscription form. A preview of the Web page you’ll create for Kevin is shown in Figure 6-60.

The form contains several labels and control elements placed side-by-side in two columns. To create this two-column layout, you’ll float the labels and control elements on the left margin. You’ll identify the labels that are floated by putting them into the float-Label class. The floated control elements will belong to the floatCtrl class.

Complete the following:
1. Use your text editor to open the sformtxt.css and subtxt.htm files from the tutorial.06\case1 folder included with your Data Files. Enter your name and the date in the comment section of each file. Save the files as sform.css and subscription.htm, respectively, in the same folder.
2. Go to the subscription.htm file in your text editor and insert a link to the sform.css style sheet.
3. Scroll down the file and insert a form element with the id subForm, directly below the paragraph in the rightColumn div container.
4. At the top of the form, Kevin wants an option list showing the four different payment plans. Insert a field set with the id subPlans. Within the field set do the following:
• Insert four option buttons belonging to the subplan field.
• Give the option buttons the ids plan1 through plan4 and the values 1 through 4.
• After each option button, insert a label element associated with the preceding option button. The text of the four labels is "6 mo./$24", "12 mo./$45", "18
mo./$64", and "24 mo./$80 (best value)".
5. After the subPlans field set, insert a label containing the text "Name". Associate the label with the cName field and put it in the class floatLabel.
6. After the label, insert an input box for the cName field. Place the input box in the floatCtrl field and set the size of the input box to 50 characters.
7. Insert another label containing the text "Address" associated with the address field and belonging to the floatLabel class. After the label, insert a text area box for the address field. Set the size of the box to six rows by 50 columns and place the text area box in the floatCtrl field.
8. Insert a label with the id agreeLabel associated with the agree field. Place the label in the floatLabel class. Within the label element, insert a check box for the agree field. After the check box, but within the label element, insert the text "Yes, I wish to pay online by entering my credit card information below."
9. Insert a field set with the id payment. At the top of the field set, insert a label belonging to the floatLabel class, containing the text "Credit Card" and associated with the cardType field.
10. Insert a selection list for the cardType field. Do the following for the selection list:
• Place the selection list in the floatCtrl class.
• Set the selection list to display four items.
• Add the following options to the selection list: American Express, Discover, MasterCard, and Visa.
• Set the values of the four options to: Amex, Disc, MC, and Visa.
11. Below the selection list, insert two labels. The first label should contain the text "Name on Card" and should be associated with the cardName field. The second label should contain the text “Card Number” and should be associated with the cardNumber field. Put both labels in the floatLabel class.
12. Directly after each label, insert an input box. The first input box should be for the cardName field; the second input box is for the cardNumber field. For both input boxes, set the width to 30 characters and place the input box into the floatCtrl class.
13. Insert a label belonging to the floatLabel class and containing the text "Expiration Date". After the label, insert two selection lists for the expMonth and expYear field. Do the following for the selection lists:
• Place both selection lists in the floatCtrl class.
• Add 12 options to the expMonth selection list containing the text "01" through "12". The values of the options should range from 1 to 12.
• Add five options to the expYear selection list containing the text "2011" through "2015". Set the values of each option to match the option text.
14. Insert a field set with the id buttons. Within the field set, insert a submit and reset button. Give the submit button the value Subscribe. Give the reset button the value Cancel.
15. Use the CGI script at http://www.theparkcitygazette.com/subscribe with the post method.
16. Save your changes to the file.
17. Go to the sform.css file in your text editor and add the following styles to the style sheet:
• Set the background color of the subPlans field set to white. Set the padding to 5 pixels and the bottom margin to 20 pixels. Center the contents of the field set.
• For label elements within the subPlans fieldset element, set the right margin to 15 pixels.
• Display objects belonging to the floatLabel class as block-level elements, floated on the left margin but only when the left margin is clear. (Hint: Use the clear style.) Set the width to 150 pixels and the bottom margin to 10 pixels. Right-align the label text.
• Display objects belonging to the floatCtrl class as block-level elements, floated on the left margin. Set the left margin to 20 pixels and the bottom margin to 10 pixels.
• Set the width of the agreeLabel label to 600 pixels with top/bottom margins of 20 pixels and left/right margins of 0 pixels. Center the label text.
• Display the payment field set only when the left margin is clear. Set the background color to white. Set the width of the field set to 400 pixels with a left margin of 100 pixels and 5 pixels of padding.
• Center the contents of the buttons field set with top/bottom margins of 10 pixels and left/right margins of 0 pixels. Set the border style to none.
18. Save your changes to the sform.css file and open subscription.htm in your Web browser. Verify that the layout and content of the Web form resemble that shown in Figure 6-60.
19. Submit your completed files to your instructor.

New Perspectives on HTML and XHTML Tutorial 9 Case Problem 2 Solution

Data Files needed for this Case Problem: cassini.jpg, dtd_list.txt, gargtxt.htm, gbar.jpg, glogo.jpg, maa.jpg, and oneil.jpg

Middle Age Arts Nicole Swanson is the head of the Web site team at Middle Age Arts, a company that creates and sells replicas of historical European works of art for home and garden use. She has recently started a project to update the old HTML code in the site’s many pages. She’s asked you to update the page describing the company’s collection of decorative gargoyles. She wants the page to comply with XHTML 1.0 strict standards. Figure 9-30 shows a preview of the completed Web page.

Complete the following:
1. Use your text editor to open gargtxt.htm from the tutorial.09\case2 folder included with your Data Files. Enter your name and the date in the comment section and save the file as gargoyle.htm in the same file.
2. Insert an XML prolog at the top of the file. Use the standard attribute defaults for an XHTML file.
3. After the XML prolog, insert a DOCTYPE declaration for the XHTML 1.0 strict DTD.
4. Set the default namespace of the document to the XHTML namespace.
5. Test the file on the validator. Fix the errors as follows:
• Convert the attributes for the body element into styles in an embedded style sheet.
(Hint: The link, alink, and vlink attributes are used to set the colors of hyperlinks, active links, and visited links in the Web page.)
• Use proper syntax for any empty elements.
• Set the color and text alignment of an h4 element using an inline style.
• Ensure that all two-sided tags are properly closed.
• Use the float style to align all inline images.
• Use an inline style to set a table cell’s width and background color.
• Remove all deprecated elements and attributes.
6. Save your final version of the file once it passes the validation test for XHTML 1.0 strict, and then test it in your browser to ensure that it looks like Figure 9-30.
7. Submit your completed files to your instructor.

WEB 240 Learning Team Assignment Website Evaluation Paper and Prototype for Redesign

Week 4: Website Evaluation Paper and Prototype for Redesign 

Create a redesigned homepage prototype as well as a redesigned secondary page prototype due in Week Five. For the prototype, Adobe® Dreamweaver® is recommended.
Finalize your Website Evaluation Paper due in Week Five, which must include the following:
· The virtual organization being evaluated, their purpose, and intended audience
· The list of design criteria created by the team, including a description of why each was considered to be important
· The results of the comparative review of sites
· A detailed analysis of the selected Virtual Organization site based on the chosen design criteria
· Recommendations for improvements to the site based on the design analysis and the inclusion of metadata to promote the website
A description of proposed changes

Week 5: Website Evaluation Paper and Prototype for Redesign

Submit the Website Evaluation Paper.
Submit the redesigned homepage prototype as well as a redesigned secondary page prototype.

ITCO381 Unit 3 IP assignment

Continue to build on the skills of providing Web page content and structure with HTML and Web page style and layout using CSS. Design and develop an intermediate-level Web page consisting of valid HTML content that includes semantic elements, images, and tables.
• Use Visual Studio to create a New Web Site. Select the ASP.NET Empty Web Site template to create the Web site. Use the File System Web location to create the Web site at the selected location and give the Web site an appropriate name.
• Create a static Web page that includes the basic structure of a valid HTML (not XHTML) document.
o Make sure to include
 the language attribute of the html element and
 the character set attribute of the metadata element.
o Name the Web page Unit3.htm
• Link to the Unit3.css file used to style and layout the Web page.
• Assign “Unit 3 IP” to the title.
• Structure the Web page using the HTML semantic elements
o header
o section
o footer
• Within the structure of the Web page add other HTML elements including at least:
o one level-one heading for the page in the header
o navigation in the header that includes a
 one level-two heading for a table of contents in the header
 list of at least three placeholders that
 navigate to the paragraphs in the section
 implement accessibility guidelines
o one level-one heading for the section
o three paragraphs in the section
 beginning of each paragraph is a placeholder
 additional text to lengthen the document
o three paragraphs in the section
 a return placeholder that navigates back to the table of contents
o one figure element in the section to display
 Image that implements accessibility guidelines
 Copy the image file to the Web site folder.
 Submit the image file along with the document.
 figure caption
o figure element in the section to display
 figure caption
 table with
 table header
 table body
 at least three table rows
 at least three table data
 table footer that spans three columns
• Use of any inline elements should follow current standards
• No style should be applied
• Validate the HTML in the Web page.
Develop an external CSS to provide style, presentation, and layout to the HTML document.
• Select Website > Add New Item from the menu and select Style Sheet from Add New Item dialog box. Name the style sheet Unit3.css.
• Add style rules to Unit3.css to accomplish the following:
o Ensure that the semantic elements format in older browsers.
o Eliminate the default spacing around all elements.
o In the following order, use the Calibri font, Arial font, or any available sans-serif font for the text.
o Set the font size for the body to 85% of the browser’s default font size.
o Set the width of the window to display the document to 950.
o Center the text in the header.
o Set the font size for the level-one heading in the header to two and one-half times the browser’s default font size.
o Set the font size for the level-two heading in the header and the level-one heading in the section to one and three-quarter times the browser’s default font size.
o Set the text to undecorated and one and one-quarter times the browser’s default font size when the user hovers over or focuses on the links in the table of contents.
o Set the width of figures to 300.
o Display figures on the right with the paragraph text flowing to the left of the figures.
o Set the margin for figures to the equivalent of one capital M on all sides.
o Set the padding for figures to the equivalent of one capital M on all sides.
o Display a one pixel black border to the left of figures.
o Bold the text of figure captions.
o Set the size of the font of figure captions to one and one-quarter times the browser’s default font size.
o Center the text of figure captions.
o Set the padding of all paragraphs to the equivalent of one capital M on the top and bottom and zero on the left and right.
o Clear the float of the figures in the paragraphs that return the user to the table of contents.
o Center the text of the paragraphs that return the user to the table of contents.
o Display the footer in the center of the page.
o Set the padding of table data and table headers to zero on the top and bottom and to the equivalent of one-half a capital M on the left and right;
o Display a one pixel black border around all table data and table headers.
o Center the text in the table footer.
o Bold the text in the table footer.
• Validate the CSS style rules.
• Zip (compress) the Visual Studio Web site folder into a .zip file to submit.

Penn foster Graded Project 40206200 HTML Coding

OVERVIEW
After completing the exercises and the examination 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 e-mail 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. 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>
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."
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.
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.
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).
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
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).
10. Underneath this heading, add the following address information as paragraph text: 99 Sycamore St. Portland, ME 04101 (207) 555-1212 Be sure to center the text.
11. Add the following text underneath the address. 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
Macadamia Nut
Oatmeal Raisin
M & M's
White Chocolate
Chocolate Pecan
Chocolate Hazelnut
Cookies are a great gift idea that everybody loves. Just give us a call or send us an e-mail 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 http://dgl.microsoft.com/.) 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 your background of your Web page. Change your background to include this background image.
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.)
17. Save your file and check your e-mail link. Your Web page should look similar to Figure 6.

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
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 e-mail 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.

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.

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 1995. 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 8.
5. Test that the link for “Home” functions correctly. You'll be creating the recipe page next.

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
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.

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.
3. Create your first nested table and add form content and data to your table as shown in Figure 10.
4. Create your second nested table and add form content and data to your table as shown in Figure 11A and Figure 11B.
5. Add the words, "$5.95 for 1–5 boxes, $10 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. Save your file and refresh the Web page in your browser.
8. Check that all links on all pages are functional.

Working with Dynamic Content and JavaScript
This third part of your graded project involves working with dynamic content. You’re going to create transient status bar messages and a pop-up window. Turn to page 741 of your textbook and follow the directions for Case Problem 1.

Penn foster Graded Project 402082 Unix-Based Environments and Apache HTTP Server

OVERVIEW
After installing Apache HTTP Server, you’re now ready to configure it for your website! Throughout this and future graded projects, you’ll be creating a fictional website, configuring it in various web server environments and then uploading it to the Penn Foster web server. There’s no better way to apply your knowledge than by completing a common real-world task!

PROJECT SCENARIO
You’re now asked to test the fan club website on a local Apache HTTP Server. You should have completed the previous graded assignment and have the following files:
• index.html—Contains the band name, current lineup, and a brief history of the band.
• music.html—Contains their music catalog and upcoming tour dates.
• fanclub.html—Contains a form to sign-up for the band’s fanclub.
If not, go back to the previous graded project and create the required files and folders. In addition to these pages, you’ll add the following Perl script in this graded project:
• signup.pl—This script will accept the form data from fanclub.html and display that data on a welcome page.

INSTRUCTIONS
In this graded project, you’ll need to have installed ActivePerl from the previous study unit and installed Apache HTTP Server as directed in the current study unit. In the first section, you’ll configure Apache for your website. In the second section, you’ll add a Perl script, modify the fanclub.html file and then test to see if the website works. To make configuration simpler, you may want to move the band_fan folder with all of its content to the C:\ drive to shorten its path. The location will now be C:\band_fan.

CONFIGURATION
1. Determine the location of the band_fan folder. You can do this through the GUI by right-clicking the folder and choosing the Properties option from the context menu (Figure 7). The folder in which it’s located is the value for the Location field. You can either copy-and-paste the location or write it down. Click the OK button to dismiss the dialog.

Open the Apache configuration file. This can be accessed from the Start menu. Start > All Programs > Apache HTTP Server 2.2 > Configure Apache Server > Edit the Apache httpd.conf Configuration (Figure 8).
2. A dialog may appear indicating that Windows can’t open the file. If so, select the Select a program from a list of installed programs radio button and click
the OK button. You can choose any text editor you prefer.
3. Find the DocumentRoot directive in the httpd.conf file. You can use the CTRL-F shortcut to search for the word without scrolling through the whole file.
# DocumentRoot: The directory out of which you’ll serve your
# documents. By default, all requests are taken from this directory, but
# symbolic links and aliases may be used to point to other locations.
#
DocumentRoot "C:/Apache/htdocs"
4. Modify the DocumentRoot directive for the band_fan folder. Warning: You’ll need to change every backslash (\) in the path to a forward-slash (/). C:\foster\band_fan should now be C:/foster/band_fan.
DocumentRoot "C:/band_fan"
5. Find the second Directory tag in the httpd.conf file. You can use the CTRL-F shortcut to search for the phrase <Directory "C:/Apache/htdocs"> without scrolling through the whole file.
# This should be changed to whatever you set DocumentRoot to.
#
<Directory "C:/Apache/htdocs">
6. Modify the Directory tag for the band_fan folder. Warning: You’ll need to change every backslash (\) in the path to a forward-slash (/).
<Directory "C:/band_fan">
7. Find the Options directive immediately below the Directory tag.
# The Options directive is both complicated and important. Please see
# http://httpd.apache.org/docs/2.2/mod/core.html#options
# for more information.
Options Indexes FollowSymLinks
8. Modify the Options directive to support CGI scripts by adding the option ExecCGI.
Options Indexes FollowSymLinks ExecCGI
9. Find the ScriptAlias directive in the httpd.conf file. You can use the CTRL-F shortcut to search for the word without scrolling through the whole file.
# ScriptAlias: This controls which directories contain server scripts.
# ScriptAliases are essentially the same as Aliases, except that
# documents in the target directory are treated as applications and
# run by the server when requested rather than as documents sent to the
# client. The same rules about trailing "/" apply to ScriptAlias
# directives as to Alias.
ScriptAlias /cgi-bin/ "C:/Apache/cgi-bin/"
10. Modify the ScriptAlias directive for the band_fan folder, including the cgi-bin directory.
ScriptAlias /cgi-bin/"C:/band_fan/cgi-bin/"
11. Find the next Directory tag in the httpd.conf file. You can use the CTRL-F shortcut to search for the phrase <Directory "C:/Apache/cgi-bin"> without scrolling through the whole file.
# "C:/Apache/cgi-bin" should be changed to whatever your ScriptAliased
# CGI directory exists, if you have that configured.
<Directory "C:/Apache/cgi-bin">
12. Modify the Directory tag for the band_fan folder, including the cgi-bin directory.
<Directory "C:/band_fan/cgi-bin">
13. Save and close the configuration file.
14. If Apache is running, close the command-line window in which you ran httpd.exe. Otherwise, the configuration file changes won’t affect the web service.
CGI Scripting and Testing
15. Open a text editor of your choice and type the following
Perl script:
#/perl/bin/perl
use strict;
use warnings;
use CGI;
my $cgi = CGI->new();
print
$cgi->header('text/html'),
$cgi->start_html('Fanclub Signup'),
$cgi->h1('You are now signed up.'),
$cgi->p('Thank you for signing up,' ,
$cgi->strong($cgi->param('name')), '.'),
$cgi->p('The following comment has been submitted:'),
$cgi->blockquote($cgi->param('comments')),
$cgi->end_html;
16. Create a new folder named cgi_bin in the band_fan folder and save the script with the filename signup.pl.
17. Open the fanclub.html file in text or HTML editor and modify the opening form tag as follows:
<form method='post' action='cgi-bin/signup.pl'>
18. Start the Apache web service. Launch the Windows command line and type the following at the commandline prompt:
C:\Apache\bin\httpd.exe
19. Type the URL http://localhost:8080 in your browser. You should see the homepage index.html for the band fan club. Click on the links for the other two pages and verify they work.
20. Test the fanclub.html page by typing in values for the HTML form controls and then clicking the Join button.
21. You should get a resulting page that displays as follows:

PROJECT SUBMISSION
GUIDELINES
To submit your project, you must provide the signup.pl file and modified fanclub.html and httpd.conf files. You should copy the fanclub.html file from the band_fan folder and the signup.pl file from the cgi-bin folder in the band_fan folder. The httpd.conf file should be copied (do not move) from the default location C:\Apache\conf. Move all files to your desktop or another common folder and then select them together by holding down the CTRL key while clicking them. To combine them into a single file for submission, you should right-click on one of the selected files and choose the Send to > Compressed (zipped) folder option in the context menu.
The resulting file should be named apache.zip. Submit this file for grading.