Assignment 3

Due: Friday. April 30

Objective: Work with HTML tables and Cascading Style Sheets.

Part 1 (Tables)

Create a single HTML document containing only a table. Your goal is to construct a table that looks identical to the one depicted in this table image. You should only use a text editor to construct your HTML table. For your convenience, you can copy the actual text for the cells from various portions of the document table.txt.

The following are the specification for the table (please follow these exactly):

• The caption should be above the table in bold, large font (e.g., using h2 tags).
• The width for the table should be 600 pixels.
• The first column ("Basic Operations") should be exactly 1/2 of the full table width.
• The second and third columns (both under the heading "Resources") should together take up the other 1/2 of table width, and they should have equal widths.
• The table should have a border size of 1 and a border color of blue.
• The table should have cellpadding of 4 and cellspacing of 2.
• The background colors for cells should be the same as indicated in the figure.
• The row and column spans should be as indicated in the figure.
• The table should be centered horizontally on the page.

Hint: First create the basic structure of the table with 7 rows and 3 columns (first row may be the table heading row). Then you can work with row and column spans and modify the rows and columns to get the table to look like the image. You can deal with the background colors, borders, etc, after you have the basic table structure in place. Don't be afraid to experiment. Save your file with the name mytable.html.

Part 2 (CSS)

Modify your index.html page from the previous assignment to use cascading style sheets and add some enhancements using tables. You should save the new page with the same name (index.html), but in your "hw3" folder.  Be sure to modify the URL or file paths so that old links and images are accessible. You may need to copy the image files and place them in the hw3 folder.

First, be sure that your page contains at least 3 separate paragraphs of text, some headings (such as "h1", "h2", etc.), and links. If necessary add some additional content to your old page.

Important: Also, in the My Favorite Web Sites section of your document, include a link to the file mytable.html created above. The anchor text for the link should be "Link to My Table for Assignment 3".

Using Style

Your goal is to redesign your page so that it include only embedded CSS styles (placed in the "head" section of the document). You should avoid using "inline styles" or deprecated HTML styles such as the "font" tag.

Your style section should contain the following definitions:

• A "body" definition specifying your choice of background color, a font-family of "Times new roman, Serif", and a font-size of 14px.
• Definitions for header tags h1 through h4 with font-family "Arial, Helvetica, Sans-serif", a font color of your choice (different from the background and default text colors), and with "left" text alignment.
• A paragraph definition (for the "p" tag) using font-size of 18px, and font-family "Courier new, monospace".
• A special class named "myquote" for the "p" tag using font-size 16px, font-family "cursive", with left and right margins of 30px.
• A standalone class named ".big" specifying a font-family "Times new roman, Serif", a font-size of 24x, a font-weight of 800, and a font-style "italic".
• Define your own link style definitions (for the "a" tag pseudo-classes "link", "visited", and "hover"), so that different colors are used for links, visited links, and for roll-overs (when mouse pointer goes over the link). Your roll-over effect should also involve the link text becoming bold (i.e., the "hover" pseudo-class should have a font-weight "bold").

Important: your new document should demonstrate the use of all of the styles specified above. For an example of embedded styles please see the document: css-sample.html.

Enhance your page with tables

In addition to the modifications using styles, you should modify your old page so that the My Background section and the Contact Information section are placed and organized within two separate tables. For the My Background section, you should include an image of yourself (or some other image that you like). For an example what these two section should look like, see the document: hw3-example1.jpg.

What to Submit

Before uploading the page to the server (students.depaul.edu), test your page on your local computer to make sure everything works and looks as intended. On your student Web space (inside the  public_html folder), navigate to the it130 Folder and create a new subfolder called hw3. Using SSH upload the pages you have created and any associated files (such as images) to this folder on the server, set their permissions for the files and folders, and check them with your browser.  You should create your Web pages using a text editor such as TextPad or PSPad on your local computer before uploading it. Please do not use a WYSIWYG editor such as FrontPage. The link to your page should should look something line the following:

http://students.depaul.edu/~yourlogin/it130/hw3

Note that when the above link is invoked, it is automatically considered a request for the file "index.html", inside the hw3 folder. Any other files must be specified explicitly on the file path name.

Submit this URL via Course Online (type the URL into the comment box).

Please see the syllabus for the policy on late assignments.