=============================================================== Assignment #13 - HTML, Web pages, Style, CSS =============================================================== - Ian! D. Allen - idallen@idallen.ca - www.idallen.com Available online: Sunday April 3, 2011 Due date: Create all your web pages for this assignment under "public_html/a13" on the Course Linux Server before 23:59 (midnight) on Wednesday April 13, 2011. Late assignments may or may not be marked. Submission method: All of this assignment must be created in your account on the Course Linux Server. There is nothing to submit to Blackboard. Create all your pages in your public_html/a13 sub-directory on the Course Linux Server before the due date and time. The 13 is the number thirteen. Put all your files under your own public_html/a13 For full marks, spell the directory and file names correctly. I will not be able to find or mark pages on the Course Linux Server that are not named correctly. Case matters; the name is all lower-case. This assignment will be marked entirely on the Course Linux Server. Make sure you can log in to the Course Linux Server before you begin. The command-line commands referenced in this lab should be executed in your own account while logged in to the Course Linux Server. CLS = "Course Linux Server" Do not make more changes or additions to these assignment files than are required by the specifications. Do not make changes or additions to the assignment files other than the ones listed here. You can create your own fancy web pages with other style features using your *own* file names. Stick to the exact specifications below for these files. ============================================================================== *** Modifying Tables and Nested Tables *** This work depends on you having done the Tables tutorials given in the weekly notes. 0. In your account on the CLS, create a new web assignment directory "public_html/a13". Put all the files in this assignment under a13. 1. Take the HTML source of the following "Try It" table: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_elements and copy it to a new file "table1.html" under your a13 directory. Fix the new file so that it has the usual HTML 4.01 Strict DOCTYPE, all the *required* HTML elements, and validates as HTML Strict. (Include a content-type line with charset to get rid of the Warnings about missing charset. See the 600_basic_html.ppt file for that line.) The HTML title of the page must be set to "Table 1". The table1.html file will be marked on the CLS if it has the correct name. 2. Copy the validated table1.html table from above to "table2.html". The HTML title of the new table2.html page must be set to "Table 2". Modify the HTML (do not use any CSS style yet) to make table2 look like the sample file "assignment13_table2.png" in the Class Notes. These are the changes to make in the new table2.html file: a) Replace the two sample paragraphs with two short paragraphs about you. b) Change the list to an ordered (numbered) list of your own choosing. (Don't use the given list; use your own list.) Put a

tag heading above the list, explaining what kind of list it is. c) Change the small internal (nested) table containing letters A, B, C, D as follows (make sure you change only the small nested table): i) Replace the four letters with four names that mean something to you. (Use siblings, pets, friends, superheroes, whatever.) ii) Add a tag to the nested table explaining what the four names are. Make the caption text more visible using the tag inside the caption. iii) Set the nested table cell padding to 9 pixels. iv) Add a third row to the bottom of the nested table that spans the entire width of the table (all the columns), that says "Contact me for details". d) Get rid of the two "This cell contains" lines. e) The HTML title of the table2.html page must be set to "Table 2". See the sample image file "assignment13_table2.png" in the Class Notes. Make sure the table2.html file still validates. The table2.html file will be marked on the CLS if it has the correct name. 3. Copy the validated table1.html table from earlier to "table3.html". The HTML title of the new table3.html page must be set to "Table 3". Modify the HTML (do not use any CSS style yet) to make the table look like the sample file "assignment13_table3.png" in the Class Notes. These are the changes to make in the new table3.html file: a) replace the word HELLO inside the table with a full copy of the entire table from table1.html, so that the table appears inside itself. b) Turn off the table borders on the table you just copied and the nested ABCD table inside it. Only the outer table and outer ABCD table in the first row will still have borders. The table you just copied will not have any borders. c) Increase the border on the outer table to 9 and on the ABCD table in the first row to 5. d) Set the width of the ABCD table in the first row to 100%. e) The HTML title of the table3.html page must be set to "Table 3". See the sample image file "assignment13_table3.png" in the Class Notes. Make sure the table3.html file still validates. The table3.html file will be marked on the CLS if it has the correct name. 4. Copy the validated table1.html table from earlier to "table4.html". The HTML title of the new table4.html page must be set to "Table 4". Modify the HTML (do not use any CSS style yet) to make the table look like the sample file "assignment13_table4.png" in the Class Notes. To do this, "invert" the table matrix in the table4.html file. Swap both the rows and the columns of the table, so that what now appears top-left will appear bottom-right, and vice-versa, etc. "Invert" the matrix. Make sure the table4.html file still validates. The HTML title of the table4.html page must be set to "Table 4". The table4.html file will be marked on the CLS if it has the correct name. *** CSS Styles - Presentation - CSS Lesson *** This work depends on you having done the CSS tutorials given in the weekly notes. If you have installed the Web Developer toolbar in Firefox, you can use the "CSS|Edit CSS" tab to modify an in-memory copy of the style sheet for any web page and watch the changes to the page happen in real-time. You can use this toolbar to snoop on how other people use CSS, then you can use it to modify your own CSS. When you like the changes, save your new style sheet back to your own file and add it to your web site. In addition to HTML validation, you must now validate your CSS use using the CSS validator as well: http://jigsaw.w3.org/css-validator/ You can also add a CSS validator button to the bottom of your own web pages. 5. In this lesson: http://www.html.net/tutorials/css/lesson2.php copy and implement "Method 1: In-line" by creating a file of HTML named "method1.html" under your a13 directory. Copy the given HTML. Fix the method1.html file so that it has a correct Strict DOCTYPE line and it passes W3C strict validation. (Include a content-type line with charset to get rid of the Warnings about missing charset. See the 600_basic_html.ppt file for that line.) Change the HTML title to "Method 1". The method1.html file will be marked on the CLS if it has the correct name. 6. In this lesson: http://www.html.net/tutorials/css/lesson2.php Implement "Method 2: Internal" by creating a file named "method2.html" under the a13 directory. Fix the method2.html file so that it has a correct Strict DOCTYPE line and it passes W3C strict validation. (Include a content-type line with charset to get rid of the Warnings about missing charset. See the 600_basic_html.ppt file for that line.) Change the HTML title to "Method 2". The method2.html file will be marked on the CLS if it has the correct name. 7. In this lesson: http://www.html.net/tutorials/css/lesson2.php Implement "Method 3: External" and the later section "Try it yourself" by creating files named "method3.html" and "method3.css" under the a13 directory. Use the web source given as "default.htm", but name the file method3.html, not default.htm. Use the style file given in the tutorial as "style.css", but name the file "method3.css" (and make the corresponding change to the HTML source file to use it). Fix the method3.html file so that it has a correct Strict DOCTYPE line and it passes W3C strict validation for both the HTML and CSS. (You will need to remove the self-closing XHTML slash syntax on the link tag.) (Include a content-type line with charset to get rid of the Warnings about missing charset. See the 600_basic_html.ppt file for that line.) Change the HTML title to "Method 3". The method3.html and method3.css files will be marked on the CLS if named correctly. *** CSS Styles - Presentation - First CSS *** 8. In this lesson: http://www.w3.org/Style/Examples/011/firstcss copy the given "Step 1" HTML code to mypage.html under a13. (Include a content-type line with charset to get rid of the Warnings about missing charset. See the 600_basic_html.ppt file for that line.) Work through the lessons "Step 2", "Step 3", "Step 4", "Step 5", "Step 6", and "Step 7" that gradually build up the internal style sheet for this mypage.html page. Refresh the page as you add each style element to the page. The lesson finishes ("Step 7") by moving all the internal style elements to a separate "mystyle.css" file. Do this. Validate it. For full marks, make sure the mypage.html and mystyle.css files validate for both HTML 4.01 Strict and valid CSS. The mypage.html and mystyle.css files will be marked on the CLS if named correctly. All files must be left under your public_html/a13 directory on the CLS. All submitted files must validate as HTML 4.01 Strict with valid CSS. Do not make more changes or additions to these assignment files than are required by the specifications. Do not make changes or additions to the assignment files other than the ones listed here. You can create your own fancy web pages with other style features using your *own* file names. Stick to the exact specifications above for these files. -- | Ian! D. Allen - idallen@idallen.ca - Ottawa, Ontario, Canada | Home Page: http://idallen.com/ Contact Improv: http://contactimprov.ca/ | College professor (Free/Libre GNU+Linux) at: http://teaching.idallen.com/ | Defend digital freedom: http://eff.org/ and have fun: http://fools.ca/