CSC 370: Week of 1/25/10

CSC 370: The Week beginning Jan. 25

Homework:
Make a page that includes a table displaying information on a subject of your choosing (possibilities include movies, tv shows, books, sports, stocks, cars). The table should have several columns and several rows. The table should also allow the user to interact, for example, a page with movies would allow a user to rate movies, e.g. using drop-dwon lists or radio buttons). You should have at least one hyperlink and one image. Your page should be styled and have at least twenty distinct element attribute-value pairs in your style section. At least one of these should style the hyperlink. Post your page to the alpha or some other server and send me the link. The page should validate for HTML ansd CSS.

Due: Feb. 2
Tuesday:

Using Visual Studio as an HTML Editor (instructions to make The Bells page) includes margin and font-family.

Instruction for using the W3C's (World Wide Web Consortium's) Validaion Services

Adding images (background and regular) to further style the above page resulting in TheBells2.htm (adding PoeBack.jpg and edgar-allan-poe.gif) includes position, border, and first-letter.

HTML Tables (instructions to make Sixers.htm, uses six_0910_masthead_left_780x130.jpg). Includes text-align, font-weight, cellspacing, etc.

Here's another example of styling a table: PeriodicTable.htm
Thursday:

Preliminaries

The following two examples show buttons and drop-down lists handled by JavaScript.

WebSafeColorSelector.htm
QuoteQuiz.htm

When one views the source of the first example, one sees the HTML code for a button as follows:

<input id="btnDisplayColor" type="button" value="Display Color" onclick="return DisplayColor();" />

Note that onclick attribute is set to a value "return DisplayColor();" DisplayColor() is a function defined between <script> tags in the head.
```
   function DisplayColor() {
        var hexcode;

        hexcode = "#" + document.getElementById("selRed").value;
        hexcode += document.getElementById("selGreen").value;
        hexcode += document.getElementById("selBlue").value;
        document.getElementById("display").style.backgroundColor = hexcode;
        document.getElementById("hexcode").innerHTML = hexcode;
    }
        
```
The arguments "selRed", "selGreen", "selBlue, "display" and "hexcode" are all id attribute values of elements on the page. Note how the id attribute plays an important role in JavaScript and allows one to specify and access an element. It can be used to determine the properties and/or state of the element or to change the properties and/or state of the element.

You may find examples of JavaScript that use the element <form> and the attribute name. However, <form> and name are meant more for server-side scripting and their use should be restricted to the PHP part of this course.

There are events other than click; a list can be found at http://www.w3.org/TR/REC-html40/interact/scripts.html in Section 18.2.3.

The QuoteQuiz example also brings in JaveScript's if to determine whether the user answered the question at all and then whether the user answered the question correctly.

The QuoteQuiz example also uses the notion of arguments in the function. The arguments send information to the function, in this case the number of the question and a code for its correct answer, so that the function can handle all of the questions rather than needed a different function for each question. (We will learn ways to do this better later in the semester so that the answers to the questions are not contained on the page itself. The questions and answers could be in a database on the server; the questions could be placed on the page in a random order, etc.)

Part 1: Manet or Monet quiz Design a page like that shown below

Use images from ManetMonet.zip Instead of textboxes where the user would type "Manet" or "Monet", use a <select> (drop-down list) with those two answers. Use JavaScript's alert method to pop up a message when the user clicks the button without having selected one of the answers. Display a "correct" or "incorrect" message in the cell (<td>) next to the image.

Part 2: Homage to the Square

Design a page like that shown below

I believe that the outer square (<div>) had a width and height of 500px, the next one had a width and height of 400px, and so on. The left side of an inner square is 50px from the square that contains it, while the top side of an inner square is 75px from a square that contains it.

This assignment introduces some JavaScript but is also still about tables and styling. Your pages should validate on both HTML and CSS.

Post your pages (and the images) on the alpha or other web server and send me the hyperlink.