INFO1311 Assignment 2

INFO 1311 - Web Page Creation

Assignment 2 (50 points)

CSS

For this assignment, you will use the skills you have learned in Chapter 3 to create an external CSS file to style your class home page that you created in Assignment 1 (default.htm). You will also be uploading your default.htm file and your assignment2.css file to your web site on the MCC student web server. Be sure to review the FTP Information that was linked in Module 2.

Create External CSS Page:

Use the following information to help you create the CSS page:

Using a text editor, create a new external CSS page. Save the page as assignment2.css in your module2 folder.
Create a rule to control the body element as follows:
- use Arial, Helvetica, sans-serif as the group of font families
- set the background color to be any color but white
- all margins to 0px
Create an id selector named #wrapper as follows:
- define the width to be 900 pixels
- define the background color to be white
- set the left and right margin to auto (this will center the #wrapper)
Create a rule for the header element
- define the background color to be something other than white
Create a rule for the h1 element:
- use Trebuchet MS and sans-serif as the group of font families
- define the text color to be something other than black (make sure there is enough contrast to the background color used for the header element)
- add text-shadow
Create a rule for the h2 element
- define the text color to be something other than black (make sure there is enough contrast to the background color used for the header element)
- define the top margin to be -20 pixels
- define the left margin to be 30 pixels
Create a rule for the h3 element using the properties you want to use
Create a rule for the footer element
- define the background color to be something other than white
- if necessary, define the text color to be sure there is enough contrast to the background color used
- align the text to the right
- define the font size to be .8em
- text should be italic

HTML Page:

Open your default.htm file created in Assignment 1. Link the external CSS file named assignment2.css to your course home page (default.htm) created in Assignment 1 using the <link> tag.
(HINT: Since the file assignment2.css is not in the same folder as the default.htm page, you should use the path "module2/assignment2.css" as the value of the href attribute in the <link> tag.)
The #wrapper style should be applied to all of the content on the page using the div tag. The opening div tag should be placed right after the opening body tag and the closing div tag should be placed right before the closing body tag. All the content on in the body is nested within the opening and closing div tags.
To give you more practice creating hypertext links and to provide quick access to your CSS code for grading, please create a hypertext link using the anchor tag to the assignment2.css file using the label Assignment 2 that is already part of the unordered list. A relative path can be used for this link as shown below:

<li><a href="module2/assignment2.css">Assignment 2</a></li>

If you didn't include the opening comment in your HTML code that was explained in the Style Guide back in Module 1 when completing Assignment 1, please add it now. This is required in all HTML files from now on. Using an HTML comment, add the information requested in the Opening Comment as shown below on the left. You should also include an opening comment at the top of your CSS file as shown below on the right:

/*
   Student Name
   filename
   Course number and section
     Instructor Last Name
   Date Created
*/

The illustration below is an example of what your default.htm page should look like once you have applied the CSS styles. You get to choose your own colors, but the layout and other formatting will be similar to this illustration.
Save the default.htm file in the public_html folder on your local drive to update the file with your changes.
All HTML pages you create this quarter must validate as a valid HTML5 file. Be sure to use the W3C Validator tools to validate both your HTML and CSS files. Make corrections to your code if necessary until they validate.

When Finished...

All students need to upload your assignment to the server:

Using FTP (FileZilla), upload the module2 folder into the public_html folder on the server. Make sure that the folders and files stay organized on the server exactly the same as they are organized on your local drive. (Review the information in Module 2 titled "Using FTP to Access your Student Site")
Upload the default.htm file into the public_html folder on the server. To make sure your file is uploaded correctly and your CSS is working, I recommend that you open your revised INFO1311 Home Page that you uploaded to the server in the browser and test your links to your Assignments. In the browser, go to the address http://student.mccinfo.net/~username (replace username with your actual username). Your default.htm file should automatically load and your CSS file should be formatting your home page. You can also test the link to your CSS by clicking the Assignment 2 link in the list of assignments.
Copy the URL to your assignment on the server into the Assignment 2 dropbox in Canvas.