CST 161 -- Final Exam

To complete this final exam, create three web pages as specified below, and upload them to your folder (on the suffolk.li website) with file names that use your own two or three initials, in lower case.
If you happen to have the initials "XYZ", then your files should be named:
		-- xyz1final.html
		-- xyz2final.html
		-- xyz3final.html
On each page, your full name should appear at the upper-right,
in very large letters, with "CST 161" below your name in tiny letters.
Xample Your Zname
CST 161
NOTES (DO's and DON'T's): 
	-- Do NOT use any color NAMES -- use hex numbers only, to specify colors.
	-- Do NOT include any CSS descriptors in the first two files.
	-- Be sure to use YOUR own initials (not "xyz" !) in file names.

Follow the specifications below for each of these pages.


1. Specifications for the first web page ("xyz1final.html")

1.1. Begin with an ordered list containing hyperlinks to all three pages.
For example, your list might begin something like this:
    	    Links to all three parts of the final:

[ ----- ]	1.  Click for FINAL EXAM PART 1 	[ ----- ]
[ IMG 1 ]	2.  Click for FINAL EXAM PART 2 	[ IMG 2 ]
[ ----- ]	3.  Click for FINAL EXAM PART 3 	[ ----- ]
Also place two images on the sides of the page, one on the left and one on the right.
Get one local image from your own folder, but link the other to an absolute URL on another server.

1.2. Since "text markup tags" modify the appearance of text on a web page, make an ordered list of the names of twelve different "text markup" tags that are used for for text markup, each followed by a brief description of what that tag does to the text. Include both "physical" and "logical" markup tags in your list.
Each item in this list should be preceded by an UPPER-CASE Roman Numeral.
For example, your list might begin something like this:
    Markup tags:

	I.	The B tag makes bold text.
	II.	Italics are produced by the I tag.
	III.	...
	...	...
	XII.	...

1.3. Make an ordered list of the different kinds "heading" tags, using lower-case roman numbers for each list item. For example:
    Heading tags:

	i.   The biggest heading uses a _____ tag
	ii.  The next biggest heading uses a _____ tag
	iii. The third biggest heading uses a _____ tag
	...  ...
	...  The smallest heading uses a _____ tag

1.4. Make an ordered list of the three different kinds of "list tags" (ordered, unordered, dictionary).

 
	After the list item for the "ordered list" add a nested list (unordered,)
	listing the different "types" that are allowed for an ordered list.

	After the list item for the "unordered list" add a nested list (ordered,)
	listing the different "types" allowed for an unordered list.
	(Lists should automatically use numbers 1, 2, 3 to identify items;
	do NOT type in numbers 1, 2, 3.)

	After the "dictionary list" item, add a nested list showing the other
	tags that also appear within "dictionary" lists; use lower-case letters 
	to identify each of these DL tags.

For example:

	Different kinds of list:

	    1. Ordered list is introduced by a FOO tag; types:
		* TYPE=P
		* TYPE=Q
		* TYPE=R
		* TYPE=S
		* TYPE=Z

	    2. Unordered list is introduced by a GOO tag; types:
		1. TYPE=X
		2. TYPE=Y
		3. TYPE=Z

	    3. Dictionary list begins with DL tag, and also uses these tags:
		a. TWEEDLEDEE
		b. TWEEDLEDUM

Replace FOO, GOO, TWEEDLES, and type names with the correct strings!

1.5. Create a table that looks like a digital telephone "dial" (see below).
Use table properties to make a thick (4-pixel border), to center the table on the page, and to center the text in each datacell both horizontally and vertically.
______________________________
||--------------------------||
||        |        |        ||
||   1    |  ABC   |  DEF   ||
||        |        |        ||
||--------------------------||
||        |        |        ||
||  GHI   |  JKL   |  MNO   ||
||        |        |        ||
||--------------------------||
||        |        |        ||
||  PRS   |  TUV   |  WXY   ||
||        |        |        ||
||--------------------------||
||        |        |        ||
||   *    |   Z    |   #    ||
||        |        |        ||
||--------------------------||
||                 |        ||
||      CALL       |  END   ||
||                 |        ||
||_________________|________||
------------------------------


2. Specifications for the second web page ("xyz2final.html")

To create the second page (xyz2final.html), begin with a copy of the first one (xyz1final.html), then add markup tags to accomplish the following.
DO NOT USE ANY CSS RULES ON THIS WEB PAGE (#2) -- use TAGS only!

2.1:  Add some JavaScript to make the imagess change places when the user clicks on the left one.

2.2:  For each item in "Markup Tags" list, illustrate that tag by using it on that line. For example:
Heading tags:
     I. The B tag makes bold text.
     II. Italics are produced by the I tag.
     ...
     XII. ...

2.3:  In the list of "Heading Tags", show most of the list items in red (using hex numbers, not color names!), but make the two biggest items green.

2.4:  For the list of different kinds of list:

2.5:  For the "telephone dial", make the table background a shade of light yellow.
Make the cell background light blue for any cell that does NOT contain a vowel (aeiou).
Change each of the five vowels to display in RED (but do not make any other letters red).
Make the word "CALL" blink, and make the word "END" link to bottom of the page if the user clicks on it.


3. Specifications for the third web page ("xyz3final.html")

To create the third page (xyz3final.html), begin with a copy of the FIRST page.
(Copy "xyz1final.html" -- NOT the second page, "xyz2final.html").

Then add CSS rules to accomplish the same things you did for page 2.
Use a STYLE block (surrounded by STYLE and /STYLE tags for your style rules, wherever possible. Use "local style" (within a STYLE="..." property) ONLY where necesasary (i.e. when the style rule applies to this one tag, only!)
3.3:  For ALL unordered lists, display the list items in red (using hex numbers, not color names!). However, in the list of "Heading Tags", make the two biggest items different shades of green.
3.4:  For ALL ordered lists that are nested inside an ordered list, make all text magenta. However, in the sublist of types of ordered list, display the default type in cyan.

DO NOT USE ANY TEXT MARKUP TAGS ON THIS WEB PAGE (#3):   use CSS RULES instead.