Using only text, HTML tags, and Javascript, create a web page that conforms to
TEST #1: Upload it to your folder as a text file named test1-yourname.html"
TEST #2: As a "takehome" exam, revise and improve this web page,
and upload it as a text file named test2-yourname.html", by midnight March 21.
1.) Specify a light yellow background color for the page. 2.) At the top of the browser window, display your full name (First and Last), followed by "CST161 test #1" (for the in-class test, and "test #2" for the takehome). 3.) At the top left, display the date and time when the page is being viewed on the client's browser. (To do this, you will need to use some Javascript.) 4.) In the upper-right corner of your web page, display your name in ORANGE, italic text, of slightly-larger than normal size. -- Underneath your name, display the text "CST161" in GREEN text (with no italics), using the smallest text size possible. -- (NOTE: If you wish, you may reverse these 2 colors, in honor of St. Patrick's Day! ;^) 5.) Now, draw a horizontal line across the page. ------------------------------------------ 6.) On the right side of the page, display some image, with a width of 100 and a height of 80 pixels, and no border. Name it image "P1". -- On the left of the page, display another image, with a width of 150 and a height of 120 pixels, and no border. Name it image "P2". 7.) When the mouse passes over either image (P1, P2), change it to a different image -- Change back to the original image, when the mouse is no longer over the image. (You'll need javascript event-handlers for onMouseOver= and onMouseOut= to do this.) 8.) In the center of the page (between these two images), display the text "Test #1" (or "Test #2" for the takehome version), using the largest-possible font size. -- Underneath this text, display your name in RED, "sans-serif" type of normal size. 9.) Make sure the following stuff starts below the bottom of both images. 10.) Then, draw two horizontal lines across the page (using HTML tags, not text dashes). ------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------- 11.) Make a numbered list (1,2,3,...) of any six tags used for physical markup of text. For each tag, explain what it does (but do NOT display the effect). 12.) Make a list of three "logical" markup tags, using SQUARE bullets for each item. 13.) In a list with LARGE Roman Numerals, list at least four tags used to make a table. 14.) In a list with small Roman Numerals, list 5 properties used within the "TABLE" tag. 15.) Draw another horizontal line across the page. ------------------------------------------------------------------------------------------- 16.) Create a centered, 3-by-3 table, with numbers 1 thru 9 in the cells. Make the background color of each cell a different shade of light green and the numbers in each cell a different shade of dark red. 17.) This table should have a thick border around it, and the numbers in the cells should have plenty of space around them (at least 10 pixels in each direction). 18.) Create another table, aligned to the left side of the screen, looking like THIS: ---------- ---------- ---------- ---------- ---------- ---------- |A1 |B1 |C1 |D1 |E1 |F1 | | | | | | | | | | | | | | | | | | | | | | --------------------- ---------- ---------- --------------------- |A2 SPAN 2 CELLS |C2 |D2 |E2 SQUARE 2x2 | | | | | | | | | | | | | | | | --------------------- ---------- ----------| | | A3 |B3 |C3 |D3 | | | | | | | | | 2 | | | | | | | | | | | | R |---------- ---------- ---------- --------------------- | O |B4 |C4 |D4 |E4 |F4 | | W | | | | | | | S | | | | | | | | | | | | | ---------- ---------- ---------- ---------- ---------- ---------- |A5 |B5 |E5 | | | | | | | | | | | | | ---------- -------------------------------- --------------------- 19.) Find an image that "tiles" nicely and use it as table background. 20.) In the cells of the above table, enter the following:
(IMG SRC="dog.gif") (/IMG)
Hello (BR CLEAR=ALL) (B)Goodbye(/B) (HR SIZE=4)