tags, and add a link tag. Make sure you set rel, type, and href (you can make this a relative link). If you cannot recall how to do this, see the course notes. Now, when you open your page in a browser, you should see the style changes appear in your document. Kompozer should also display the changes, but sometimes requires closing and re-opening documents to make them display. 6. Go to your remaining webpages and add the <link> tag. 7. Add a definition to the stylesheet for horizontal lines. Make the height of the lines 5 pixels, the width of the lines 65% of the screen width, and set the color to cyan. Not all browsers define color for the lines the same, so you will need to define both a color and background-color property. 8. Add a definition for H2. Set the color to be white, the font-family to be Sans Serif, font-size to be xx-large, font-weight to be bolder and text-transform to uppercase. 9. Add a definition for P. Set the font-style to be italic. 10. Add a defintion for DIV. Make text-align be center. 11. Add a definition for TABLE. Make border be 10 pixels and solid black. Make the width of the table 100% of the screen width. Now add a definition for TD. Make its border be 2 pixels and solid blue. Make text-align center and vertical-align middle. 12. Finally, add a definition for IMG. Make the height and width be 200 pixels. 13. Save and close business.css. You can open a browser and view your website. Changes should be universal across all your pages, giving a unified look to your company. =========================================================================== PART 3. Forms In this part, you will learn to add forms to your site by fleshing out your ordering webpage. 1. Open your ordering page in vi. 2. Under the last <hr> tag, add some line break tags. 3. Next, add a form tag. You will need to define the properties action and method within the tag. action should be set to "ordering.php", which is a script we may begin working on in class. action tells the browser what to do when form information is sent. method should be set to GET. This tells the browser how to send form informtion. Do not forget to create an end form tag as well. 4. Between your form tags you are going to start defining inputs. However, to make everything appear nicely, we are going to embed the inputs into a table. Add the <table> tags between your <form> tags. 5. Add a row to your table (<tr>). This row will have two cells (<td>) which will be used to show the Name input. In the first cell, add in the text 'Name:'. In the second cell, put the <input> tag. The input tag should have a type of 'text', size of 50, maxlength of 250, and name of 'name'. 6. Your next field will be address. This will span two rows, but the first cell will span both rows (to do this, make two cells in the first row and have the first cell have a rowspan property of 2, the second row will have only one cell). In the first cell of the first row, type in the text 'Address:'. In the second cell, add an <input> tag with the same properties as the previous <input> tag but with name='address1'. In the second row, add only one cell and put an <input> tag into it that is identical to the one in the first row but with name='address2'. 7. Repeat the process to add a row for 'City'. Use name='city'. 8. You are going to add Country to the next row, but using a dropdown box instead of a text field. Add the text 'Country: ' to the first cell. In the second cell, add <select> tags with the property name='country'. Between the select tags, add <option> tags with values followed by country names for Canada, USA, France, and Paraguay. Here is an example of how one of the <option> tags would appear. <option value='Canada'>Canada 9. Add a row for 'Postal Code: ' using a text field for input (similar to the other <input> tags) but with size of 10 and maxlength of 20. 10. Add a blank row to your table (with only one cell in it). To do this, you need to create one cell with colspan=2 and put a blank space into it ( ). 11. Add another row to your table. In the first cell, put 'Item: '. In the second cell, add another dropdown box. This one should have the property name='product' and contain options for the various products you listed in the products page (set the value equal to the product name). 12. Finally, add one more row. The first cell should contain the text 'Quantity: ' and the second cell should have an input text field with name='quantity' and size of 5. 13. After the end <table> tag but before the end <form> tag, you need to add a submit button. This is just another <input> tag, but with type='Submit'. To get text to appear on the button, you need to set the value property (to whatever text you want). Put your <input> tag between <div> tags. 14. Save and close your ordering page. You can view it in a browser. It should have a table with the fields (note that the stylesheet will affect how the table appears). You should be able to enter text into the text field and select items from the dropdown boxes. If you hit your submit button, you will be redirected to ordering.php (what you set the form action property to) but since that doesn't exist, you should get an error message in the browser. If there is sufficient time in the class, you will examine how to make a simple php script that reads your ordering information and returns a new webpage. =========================================================================== PART 4. MAKE SURE YOUR FINISHED FILES ARE IN YOUR BUSINESS DIRECTORY 1. Make certain all your webpage files, images, and your stylesheet are inside your business directory. DEADLINE: April 2, 2012 at 11:59pm

HTML - Assignment 2 This assignment will help you get some experience with cascading style sheets, forms, and hands-on HTML coding. You should a business directory from last class which contains the components of your website: - an index.html which should be linked to your home directory - a page for pricing information - a page for product information - a page for ordering - a page for contact information - a page with a short bio about the president (you) - several jpgs for items and a factory.jpg Your assignment will require you turn in completed versions of those pages and images, as well as a completed style sheet business.css All files must be in your business directory and ready for pickup by April 2, 2012 at 11:59pm. =========================================================================== PART 1. Cleaning Up In the coming sections, you will be creating a unified look for your website. Before you can do that, the style information put into your webpages should be removed. This will give you a bit of an opportunity to do some direct coding with HTML. 1. Go to your business directory and open up index.html in Kompozer. Click on the Source tab so that you can edit the source directly. There are several things you need to do to remove the existing formatting in your webpage. First, look for any tags and replace them with

tags without any formatting information. Second look for the tags like

where style information was added and remove the style information (creating just simple tags). Do not remove meta information from the header tags, that should remain. Once you have removed the style information from index.html, save and close the file. 3. Open up your remaining files for pricing, products, ordering, contact information, and about the president and remove the style information from them as well. Make sure you save the files after removing the style information. =========================================================================== PART 2. Style Sheets During this portion of the assignment, you will build a unified look for your website through the use of style sheets. You have removed the style from your webpages, now you will add it back in. 1. Open a new document in vi called "business.css". This file will contain your style sheet information. Stylesheets only contain definitions, no html tags or comments, so do not add any. 2. You are ready to begin adding style sheet definitions. The first will be style information for the tags. To do this, you will need a defintion BODY { }. Define the background-color to be lightblue and the font-size to be x-large. Remember that declarations need to be separated by semicolons and that the format of a declaration is property : value. 5. To see how your style sheet is affecting your webpages, open up index.html in Kompozer. Select the Source tab. Go the section between the tags, just after the tags, and add a link tag. Make sure you set rel, type, and href (you can make this a relative link). If you cannot recall how to do this, see the course notes. Now, when you open your page in a browser, you should see the style changes appear in your document. Kompozer should also display the changes, but sometimes requires closing and re-opening documents to make them display. 6. Go to your remaining webpages and add the <link> tag. 7. Add a definition to the stylesheet for horizontal lines. Make the height of the lines 5 pixels, the width of the lines 65% of the screen width, and set the color to cyan. Not all browsers define color for the lines the same, so you will need to define both a color and background-color property. 8. Add a definition for H2. Set the color to be white, the font-family to be Sans Serif, font-size to be xx-large, font-weight to be bolder and text-transform to uppercase. 9. Add a definition for P. Set the font-style to be italic. 10. Add a defintion for DIV. Make text-align be center. 11. Add a definition for TABLE. Make border be 10 pixels and solid black. Make the width of the table 100% of the screen width. Now add a definition for TD. Make its border be 2 pixels and solid blue. Make text-align center and vertical-align middle. 12. Finally, add a definition for IMG. Make the height and width be 200 pixels. 13. Save and close business.css. You can open a browser and view your website. Changes should be universal across all your pages, giving a unified look to your company. =========================================================================== PART 3. Forms In this part, you will learn to add forms to your site by fleshing out your ordering webpage. 1. Open your ordering page in vi. 2. Under the last <hr> tag, add some line break tags. 3. Next, add a form tag. You will need to define the properties action and method within the tag. action should be set to "ordering.php", which is a script we may begin working on in class. action tells the browser what to do when form information is sent. method should be set to GET. This tells the browser how to send form informtion. Do not forget to create an end form tag as well. 4. Between your form tags you are going to start defining inputs. However, to make everything appear nicely, we are going to embed the inputs into a table. Add the <table> tags between your <form> tags. 5. Add a row to your table (<tr>). This row will have two cells (<td>) which will be used to show the Name input. In the first cell, add in the text 'Name:'. In the second cell, put the <input> tag. The input tag should have a type of 'text', size of 50, maxlength of 250, and name of 'name'. 6. Your next field will be address. This will span two rows, but the first cell will span both rows (to do this, make two cells in the first row and have the first cell have a rowspan property of 2, the second row will have only one cell). In the first cell of the first row, type in the text 'Address:'. In the second cell, add an <input> tag with the same properties as the previous <input> tag but with name='address1'. In the second row, add only one cell and put an <input> tag into it that is identical to the one in the first row but with name='address2'. 7. Repeat the process to add a row for 'City'. Use name='city'. 8. You are going to add Country to the next row, but using a dropdown box instead of a text field. Add the text 'Country: ' to the first cell. In the second cell, add <select> tags with the property name='country'. Between the select tags, add <option> tags with values followed by country names for Canada, USA, France, and Paraguay. Here is an example of how one of the <option> tags would appear. <option value='Canada'>Canada 9. Add a row for 'Postal Code: ' using a text field for input (similar to the other <input> tags) but with size of 10 and maxlength of 20. 10. Add a blank row to your table (with only one cell in it). To do this, you need to create one cell with colspan=2 and put a blank space into it ( ). 11. Add another row to your table. In the first cell, put 'Item: '. In the second cell, add another dropdown box. This one should have the property name='product' and contain options for the various products you listed in the products page (set the value equal to the product name). 12. Finally, add one more row. The first cell should contain the text 'Quantity: ' and the second cell should have an input text field with name='quantity' and size of 5. 13. After the end <table> tag but before the end <form> tag, you need to add a submit button. This is just another <input> tag, but with type='Submit'. To get text to appear on the button, you need to set the value property (to whatever text you want). Put your <input> tag between <div> tags. 14. Save and close your ordering page. You can view it in a browser. It should have a table with the fields (note that the stylesheet will affect how the table appears). You should be able to enter text into the text field and select items from the dropdown boxes. If you hit your submit button, you will be redirected to ordering.php (what you set the form action property to) but since that doesn't exist, you should get an error message in the browser. If there is sufficient time in the class, you will examine how to make a simple php script that reads your ordering information and returns a new webpage. =========================================================================== PART 4. MAKE SURE YOUR FINISHED FILES ARE IN YOUR BUSINESS DIRECTORY 1. Make certain all your webpage files, images, and your stylesheet are inside your business directory. DEADLINE: April 2, 2012 at 11:59pm