CS637 Homework 2, HTML5, CSS, PHP Netbeans project

Due Wednesday, Feb. 21, in class, on paper (Note Mon, Feb. 19 is a holiday).

1.  HTML forms. Study this forms tutorial at http://www.w3schools.com (stop before the HTML5 Attributes part of the HTML Input Attributes chapter) as well as Duckett Chap. 1-7. Note that <input type="image" name="aaa" ...> buttons will send in parameter values aaa.x=x-coord and aaa.y = y-coord (in px) of the image.
2. Visit http://boulter.com/ttt for a tic-tac-toe game with HTML user interface.  
   a. Start playing, and then look at the page source.  Explain how the Xs and Os are displayed.
   b. How does the server know which square you clicked on? Specifically, what parameter names and values are sent back to the server if you click on the upper left corner square as the first move as O? Hint: use "View Page Source" on the page before clicking on the square to see the HTML that will produce the parameters. The image involved is at x=22px, y=19 px. You can get these parameters from Chrome inspect>Network (refresh the page after this). Then select the index.cgi request and the "Headers" tab for it.
   c. How many client-server round trips are needed to display this page? This question can also be answered by looking at Chrome inspect>Network and seeing how many requests are shown.
   d. Observe how the cursor changes shape as you move the mouse around. What software is handling the moment-to-moment cursor painting?  Look at the HTML source. How are the various areas for special cursors specified by the HTML? That is, what HTML elements correspond to what cursor shapes?
  e. Do another move, note that the computer moves right away, but nothing ever happens after that until you do something. You can wait hours, and meanwhile hundreds of other users can be playing.  Where is the knowledge of your current position (X's and O's) kept all this time?  To answer this puzzle, look at the source, after a move and again after another move, and see how about hidden form fields can save state for an application.
  f. Is this HTML in HTML5 format? Find a tag in the body that is now obsolete because it puts presentation in the HTML itself. What is the HTML5 status of the address tag used near the bottom? Find an HTML attribute in the body that is now obsolete because it puts presentation in the HTML itself. Hint: look at slides 50-55 for the second class about "OLD CODE".

3. Use a plain editor like emacs or Wordpad to compose a web page register.html with page title "User Registration", contents entitled "Register for This Website", and a form, specifying name and email addresses in a text boxes, one above the other, with text to the left of each box "Name" and "Preferred Email", and a having a submit button.  Include the text of register.html and its display from a browser in your homework submission.  Note that we can't make this form work yet, just see it display itself. Don't use CSS here, so you can see the problem with alignment caused by the fact that we can't specify the width of the text even if we put it in a <span> or <label> because these inline elements can't have width specified.  This is a well-known problem. See slides 49-56 and 141-147 in class 4's slides. See Duckett example online, which tries and fails (at least with Chrome) to solve this problem using CSS. See Murach's online example, which is successful across several browsers.  With proper CSS, we should be able to fix this. Explain in your own words how your would use CSS to style your form to solve this problem.

4. a. Download all the book apps from Murach book site (see "Free Downloads") and copy them in your XAMPP htdocs directory, so that htdocs/book_apps/ch01_product_discount exists. Verify you can run it with Chrome using the local URL http://localhost/book_apps/ch01_product_discount/. Report on your success or problems.
b. Create a PHP project for this app in Netbeans.  Read M&H pp. 34-39 (either ed.).  Note that these projects come with Netbeans project files, so you can just "Open Project" rather than setting up a project from scratch, although it's good to be able to do that too. Try running the app from Netbeans. Report on your success or problems.

5. CSS Consider the index.html of pg. 17 (either ed), available at http://topcat.cs.umb.edu/book_apps/ch01_product_discount/ , where it is displayed using the book's main.css, shown on pg. 19. I've used a different main.css to display it as follows in Chrome, our standard browser:form_hw2.png
Note the following: different colors, different font styles, different font sizes, wider overall (600px), more space around contents, wider border. Write a CSS file that shows at least approximately this display and show it in your paper. Unfortunately, Linux Chrome does not display the original HTML/CSS correctly (the border is not right), but do your best. Windows and Mac Chrome are OK for this.
b. If you have a Windows system, describe how the original page at http://topcat.cs.umb.edu/book_apps/ch01_product_discount/ shows in your version of Internet Explorer, and give the version of IE in use. If you have Linux, try out Firefox on it, and if a Mac, Safari, and similarly describe the result.

5. Consider the HTML of product_list.php on pg. 177 (either ed.), available at .../book_apps/ch05_... on topcat, or your own copy of book_apps. Simplify it to plain HTML, that is, drop all the PHP and fill in data on the categories and two products right in the HTML, so it looks like the picture on pg. 167. Don't change the CSS for this.
a. Show the HTML in your paper. You can continue to include the header and footer files, shown on pg. 175.
b. On a paper copy or drawing of the page, like what's shown on pg. 167 (either ed.), draw boxes around the in-border areas for the <header>, <footer>, <body>, <aside> and <section> elements, at least roughly to scale. In your picture, show that the aside and section don't completely fill the width of the body. Of these, only <body> has padding. For it, draw cross hatching covering the padding area (note that this is inside the border).
c. Note how the <body> border stays in the middle of the window (horizontally) as you resize the whole window larger than the fixed size of <body>. This behavior is specified by body's CSS rule "margin: 0 auto;" which says this box should be centered horizontally inside the containing box (Duckett, pg. 315).  What is the containing box? What rule (quote it) specifies the color in this area outside the <body> border?
d. How would the display change if we took the <p class="last...> element and moved it below the </section> end-tag?