================================================================= Assignment #12 - HTML, Web pages, Style, CSS ================================================================= - Ian! D. Allen - idallen@idallen.ca - www.idallen.com Available online: Tuesday April 13, 2010 There are two parts to this assignment. One part must be uploaded; the other part is due under "a12" on the Course Linux Server. Upload due date in the Blackboard Assignment Area: Upload "assignment12.txt" before 13:00 (1 pm) on Tuesday April 20, 2010. Do *not* use the DigitalDropbox to submit your answers. Answers will be posted shortly after the due date/time. There are two parts to this assignment. One part must be uploaded: Questions 1, 2, and 3 only: Submission method: Upload via the "Assignments" CST8281_Assignment_12 upload. Use the file name given above. Upload only one single file of plain text, not HTML, not MSWord, not RTF. No fonts, no word-processing. Plain text only. Did I mention that the format is plain text (Notepad)? Due to bugs in Blackboard, you can only submit your Assignment to me *once*. After that, you cannot submit any more times. If you need to re-submit it, you have to email me to ask me to clear your previous submission. Do *not* use EMail or the DigitalDropbox to submit your answers. Answers will be posted after the due date/time so that you can check your answers before coming to labs and ask questions about the answers in the labs. Please check your answers (and my answers!). I go over each assignment in the lab if there are questions about the answers. No questions means no review - I'll presume you know the material. Questions similar to ones on these assignments will appear on your tests and exams. The other part of this assignment must be created in your account on the Course Linux Server: Questions 4 to end only: Submission method: Create pages in the a12 sub-directory on the Course Linux Server before the due date and time. The 12 is the number twelve. 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. Part of this assignment will be marked on the Course Linux Server. Not all assignments will be marked. See the Week 1 Notes for details. ============================================================================== Edit this file and answer the following questions underneath each question, showing how you obtained each answer, if appropriate. Upload the file containing the answers before the due date. Some of the answers below may require reading the URL links published in the weekly notes. ============================================================================== 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 on the Course Linux Server. CLS = "Course Linux Server" ============================================================================== *** Review *** 0. What is the date and room location of your CST8281 Final Exam? 1. Write the simplest IF statement (simplify the Boolean logic) for the following programming problem specification: "An order is classified as "stale" if the cost is more than $10 and the time is more than 90 days. Call the inventory routine if the size is bigger than 10 litres and the order is not stale." 2. Write the simplest IF statement (simplify the Boolean logic) for the following programming problem specification: "An order is classified as "urgent" if the cost is more than $10 or the time is less than 90 days. Call the notify routine if the cost is more than $10 and the order is not urgent." Find the bug in the above logic. What is wrong? As a programmer, what would you tell your boss about this specification? *** Tables *** This work depends on the Tables tutorials given in the weekly notes. 3. Create a new assignment directory "public_html/a12". What is the absolute pathname of this directory on the CLS? 4. Take this "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 a12 directory. Fix the new file so that it has a Strict DOCTYPE, all the required HTML elements, and validates as HTML Strict. This file will be marked on the CLS if it has the correct name. 5. Copy the validated table1.html table from above to "table2.html". See the sample file "assignment12_table2.png" in the Class Notes. 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 over 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. 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. See the sample image file "assignment12_table2.png" in the Class Notes. Make sure the table2.html file still validates. This file will be marked on the CLS if it has the correct name. 6. Copy the validated table1.html table from earlier to "table3.html". See the sample file "assignment12_table3.png" in the Class Notes. 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. What you copied will not. 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%. See the sample image file "assignment12_table3.png" in the Class Notes. Make sure the table3.html file still validates. This file will be marked on the CLS if it has the correct name. 7. Copy the validated table1.html table from earlier to "table4.html". "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. This file will be marked on the CLS if it has the correct name. *** Styles - Presentation - How a page looks *** This work depends on the CSS tutorials given in the weekly notes. 8. In this lesson: http://www.html.net/tutorials/css/lesson2.asp Implement "Method 1: In-line" by creating a file named "inline.html" under the a12 directory. Fix the inline.html file so that it has a correct Strict DOCTYPE line and it passes W3C strict validation. This file will be marked on the CLS if it has the correct name. 9. In this lesson: http://www.html.net/tutorials/css/lesson2.asp Implement "Method 2: Internal" by creating a file named "internal.html" under the a12 directory. Fix the internal.html file so that it has a correct Strict DOCTYPE line and it passes W3C strict validation. This file will be marked on the CLS if it has the correct name. 10. In this lesson: http://www.html.net/tutorials/css/lesson2.asp Implement "Method 3: External" and "Try it yourself" by creating files named "external.html" and "style.css" under the a12 directory. Use the web source given as "default.htm" (but call the file external.html, not default.htm). Use the style file given in the tutorial as "style.css". Fix the external.html file from the tutorial so that it has a correct Strict DOCTYPE line and it passes W3C strict validation. (You will need to remove the self-closing XHTML slash syntax on the link tag.) This file and CSS will be marked on the CLS if named correctly. 11. In this lesson: http://www.w3.org/Style/Examples/011/firstcss copy the given HTML to a12/mypage.html and work through the lesson that gradually builds up the style for this simple page. Refresh the page as you add each style element. The lesson finishes by moving the style elements to a separate "mystyle.css" file. This file and CSS file will be marked on the CLS if named correctly. 12. Copy the web page assignment12_new.html from the course notes into your a12 directory using the file name "new.html". This new.html file uses the same style sheet as your mypage.html file, above. It has one more block element added - a
placed around the main content of the page - and a element placed around the "Updated" entry inside the
block. You can apply styles to these new elements. Without changing the new.html file, make changes to the mystyle.css file to make the new.html page look different. To find out what is possible with CSS, take one of the CSS tutorials. (Links to the CSS and HTML tutorials are in the Class Notes weekly files.) You can use any of the CSS style properties you can find on the Internet. One nice reference to all the style properties is at w3schools.com: http://www.w3schools.com/css/css_reference.asp They have "Try It" buttons that let you experiment with CSS live. 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 to snoop on how other people use CSS, then you can use it to modify your own CSS. When you like the changes, save the new style sheet back to the mystyle.css file. This file and CSS will be marked on the CLS if named correctly. 13. 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 web pages. -- | 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/