Internet Systems Programming

HW1 - Typed or neatly printed copy due Jan 23 (Wednesday) at the start of class

Web Page Design: Begin the design of a course website. Use only elements covered in chapter 2 of the text. Your pages must be XHTML 1.1 compliant and should display the W3C compliance logo. Include comments in each file and meta tags to identify the author and assignment information. You should not use a WYSIWYG editor - this is an HTML coding assignment.

Provide an index page (index.html) in your unix account public_html folder. This page must include some generic information about you (name, email address), a picture of yourself (or cartoon likeness), and some reference to the University of Akron and the course website. Hyperlink to the University, the class website, and your email (lookup the mailto syntax for hyperlinks). The email hyperlink must use only an image as the content - find a free animated GIF for this purpose.

Provide a link to a second page that provides more information about you as a student. You need to include information about classes (at least two classes must be listed) you are currently taking in a table. Show the class name, numbers, textbook, and instructor. Some of these entries should be hyperlinked to appropriate resources on the Internet. Use a caption in the table. Somewhere on the page tell a little bit about yourself, including professional goals and a perhaps a brief resume. Feel free to make stuff up - no need to divulge gobs of personal information if you do not want to.

The third document is a summary of this assignment. Write up what you did and how you accomplished it; tell what tools were used and where you obtained resources needed to complete the assignment; tell what you learned. There should be a hyperlink from the index page to this page - you will create a similar structure for each assignment (hyperlink and assignment summary page). These assignment hyperlinks should be organized as a list of some sort (right now it will have only one item).

Each page should have a link back to the index page.

P130: Review Exercises 7, 10, 11, 12, 17, 22, 25, 27, 28, 29

P131: Exercise 3.6

Enhance your current website by adding some style. Do not use inline or document level stylesheets. Instead, use a stylesheet link (external style sheet) in all of your pages. In the stylesheet, define a style for the body tag that will standardize your documents. In particular: 

• Provide a font-family (use the ideas mentioned in the text)
• Specify a color scheme and overall font
• Specify a background image if desired. Use an image editor (such as IrfanView) to size the image (the image should be at least 640x480 unless it is designed to be tiled) and wash out the contrast or otherwise alter the image so your fonts are easy to read when displayed over the graphic. If the image is not tiled, choose a background color for your pages that blends nicely with the image borders. Be sure that the image filesize is small (<=32K)

Add other style rules for the following

• Define coordinating link styles (specify at least the 4 pseudo classes mentioned in the class notes) and do not make the hover effect obnoxious.
• Specify a coordinating style for the heading tags (based on the general font selected for the body) including font and color
• Add a style definition for ALL unordered lists that changes the default bullet to a gif or png image - select or create some small image that would be appropriate for this use. Ensure that nested lists have a different image or style. You need not worry about more than two levels.
• Add one or more style classes (generic or not) and incorporate them in one or more of your documents. 
• Add one additional page to your website (link to it from the main page with the text 'Program 2'). This page must describe what you did for this assignment. This page should include annotated samples of the styles and style classes you have defined. By this, I mean each style rule should be explained and a sample of its effect shown.

Turn in a printed copy of your documented style sheet. This means to add comments to the style sheet including your name, date, class, and brief explanations of each style rule. Make sure you use the correct comment syntax for style sheets.

Page 187 (Exercises): 2, 3, 8 (put these all in one xhtml document in a script element) The array in 8 should be displayed in a table before and after zero removal)

Page 227 (Review Questions): 1, 9-13, 15

Show how to register an event handler in a form element that will prevent a form from ever being submitted: just complete this element... <form action='doitnot.php' method='POST' ___ >

Program 3 is a javascript enabled web page that will provide the ability to display numbers in different bases. The javascript MUST be in an external file. Be sure to document it well.

The xhtml page must use your style sheet. On the page, provide a textbox that allows any integer to be entered, and a button that when clicked, will display the desired numeric representation in a read-only textbox. The user should choose the desired base from a selection menu offering choices from 2 to 16. The choices on the menu must read Binary, Base Three, Base Four, Base Five, ..., Octal, ..., Decimal, ..., and Hexadecimal. The menu should default to Hexadecimal when the page is loaded. Be sure that the results are displayed whenever the button is clicked, or when the selection menu is changed, or when the input value changes (onchange). If the input field does not have a number in it (empty or illegal), you should display Not A Number as the result.

Page 262 (Review Questions): 2, 3, 7, 8, 10

Page 263 (Exercises): Design a web page with a heading and four paragraphs of text. The paragraphs are all located at the same position. Only one should be initially visible. Just above the paragraphs are four tabs with appropriate labels (use span elements with class="tab") that will change color when the mouse goes over one of them. When the color changes in a tab, the corresponding paragraph is displayed (all other paragraphs are hidden). Use borders around at least some edges of the tabs and paragraphs. Put all your code in a single document.

Program 4 is to practice DXHTML. Your web page will be a simple matching game. Display a grid of at least twelve pictures (all the same size). Each picture should appear exactly twice in the grid. The pictures must actually be hidden until clicked. Clicking one picture will display it. Clicking it again should do nothing. Clicking a different picture will show it and then check to see if the pictures match. If they do, the two pictures are replaced with something that no longer responds to clicks (these squares are now out of the game). Play continues until all matches are found.

Keep score somewhere on the page. The goal is to get all of the matches with the least number of attempts. Provide a way to start over. You could make this a learning game where some pictures are questions and others are answers. In this case, you should use appropriate images for the backgrounds, and place text in the grids as well. Be creative!

You need to devise a way to randomize the locations of the pictures each time the game begins.

Incorporate your style sheet. Feel free to add a second style sheet to this game page. Use an external JS file for most of the script. Avoid inline stylesheets.