=================================================================
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/