All HTML code in this class must pass HTML5 validation using the W3C validator. CSS and links must also be checked with these tools.

When you are done, notify the instructor of your submission by filling out the Homework submission form link at the end of the homework.

• Improve the slide show example from the lectures by modifying it to have a thumbnail strip that scrolls left/right when the user clicks on one of the arrow icons.
• Each scrolling operation will smoothly move a number of off-strip pictures into view then stop (a part of an old picture should still be in view). We do not want newly visible pictures to move off the strip until the next scrolling operation.
• The scrolling stops automatically after the last picture, on either end, moves fully into view.
• The strip also has a space where a full size picture may be displayed.
• On clicking on a thumbnail it makes the picture the current picture.

• The current picture in the thumbnail strip is highlighted by a border and the original-size picture is displayed in the area above the thumbnail strip, nicely positioned and formatted.

• On mouseover, a thumbnail displays the
• Add a caption to each picture and on mouseover of the thumbnail display the caption as a tooltip on the thumbnails and when the full-size picture is displayed, add it as an actual caption for the picture.
• Your Javascript code should be easily customizable with parameters: width, height, background color of the strip, size of the thumbnails, the arrays of the image URLs and the picture captions, and the arrow icons.

• Your solution must contain at least 12 pictures of your choice.

• Once you have validated the webpages on webdev and they are free of errors, the homework information using the Homework submission form.

• Create a form to input information as follows for a survey of graduating students:

  • Use only HTML5, CSS3, Javascript and php to create the form and script to process the output.
  • Set defaults where appropriate and give hints where useful. Use browser verification (using HTML, CSS or Javascript as appropiate) and server verification to ensure that correct formats are entered, where possible. Note: This is required and there will be a penalty for failure to do this.
  • Decide which fields should be required. Most should be.
  • Two fields Lastname and Firstname.
  • An email field which you check as well as you can for a valid email address.
  • Groups the next set of entries as Degree History
  • Input major using radio buttons named CS, Digital Sciences, JMC, Other. Provide a text box to be filled out in case Other is selected.
  • Input degree using radio buttons named BS, BA.
  • Input Year of entry to Kent State and planned year of graduation. Check for valid years and that year of graduation is not less than year of entry.
  • Create a group Additional Activities. Provide radio boxes to indicate Honors College (Y/N) and Internship (Y/N)
  • Create a group Desired Position and Location
  • Create a text box for Position, and a pull-down menu Location with entries Cleveland, Akron, NE Ohio, Ohio, East Coast, Mid-west, West coast, and an instruction to pick the most specific.

  • Write a PHP program process.php to receive and process your form.

  • When each input is received the PHP checks for correct input, echos the input to the screen if correct, or requests correction if incorrect. If correct, it also sends back appropriate email confirmation to the end user who submitted the form.

  1. Please read the instructions carefully.
  2. Test your form, and PHP program carefully on webdev.
  3. All HTML code must pass HTML5 validation using the W3C validator. Any validation errors, will result in a penalty of at least 10 points.
  4. The CSS files must pass CSS level 3 validation.
  5. Once you have validated the webpages on webdev and they are free of errors, the homework information using the Homework submission form.

• Create a subdirectory "hw2" in your course home directory "/var/www/html/username" on webdev.
• Create three pages.
• For the first two, rename the two files "index.html" and "imagemap.html" created in Homework 1 to "index.php" and "imagemap.php", and modify them as follows:
  • Instead of the HTML defining the header and top buttons, the left nav panel on the "index.php" page , and the right aside buttons, include 3 files called "head.php", "nav.php" and "aside.php" using php. If you find you need more include files or css files, use them.
  • Replace all the styling commands in ALL the files including those included with CSS contained in seperate files, titled "index.css", "head.css", etc.
  • Use tables to format the pages as two or three columns rather than floats.
  • Replace the style for the top banner with one with a dark blue background and right adjusted yellow text which starts at the very top of the page. Make the links on the top banner white with no decoration (not underlined), which go grey when visited, and bold yellow when the mouse is over the link. Use the same color scheme for the links in the left.
  • For the external links in the right aside, use the same color scheme except make the link red when the mouse is over them, and display the external page in a different tab when clicked.
  • The page contents for "index.php" should be the same as those in homework 1. On clicking any homework link on the left nav bar the homwork page with the right aside bar should be displayed as before but the contents of the homework page (imagemap.php") should be displayed in an iframe which scrolls under the top banner.
  • Ensure that the page is optimized for a standard browser window size, and that it works in Firefox and Chrome.

• For the third page "hw2.php" create a page with both of the following:
• Modify http://www.cs.kent.edu/~farrell/wp1/csnotes/dwph5/ex/exc04/Circle.html to make it an ellipse with ratio 2:1 for horizontal:vertical axes.
• Modify http://www.cs.kent.edu/~farrell/wp1/csnotes/dwph5/ex/exc04/Rainbow.html and add a linear-gradient sky background for it. Hint: Use transparency.
• Link the page into the left nav menu as "Homework 2"

1. All HTML code must pass HTML5 validation using the W3C validator. Any validation errors, will result in a penalty of at least 15 points.
2. The CSS files must pass CSS level 3 validation.
3. Once you have validated the webpages and they are free of errors, submit the homework information using the Homework submission form.

Review the slides and read Chapter 2 of the textbook .

Each student will create his/her wp1 course page and a page with an image map and place them on your course web space (/var/www/html/USER_NAME) on the machine webdev.cs.kent.edu in the file index.html and imagemap.html. (They will be accessible as http://webdev.cs.kent.edu/USER_NAME/index.html etc.) Your course home page should be titled "Your Name Web Programming I Class Home Page".

1. Create a template for your homepage of the form
   index.html. Call it index.html. The content part should contain:
   • A photo of you left adjusted with text to the right of it.
   • Basic personal info such as your name, ugrad/grad, major, class rank
2. The links on the header should link to the Kent State home page, the Computer Science home page, the WP1 course home page and YOUR WP1 home page.
3. Link the Image Map entry on the main navigation bar to a second (Homework) page of the form imagemap.html.
4. Link the aside links on the right navigation panel back to the relevant pages in the course site.
5. On the imagemap.html page
   • Make the zodiac into a clickable imagemap which for each segment leads to the wikipedia entry for the relevant sign, such as http://en.wikipedia.org/wiki/Capricorn_(astrology).
   • Make the links on the header and the right panel the same as on the homepage above.

You may use this sample HTML5 file to get started.

See website access page for how to access your course account and set up your web space.

Then you can access your pages (say wp1.html) from your browser and verify the appearance with http://webmail.cs.kent.edu/your_userid/wp1/filename.html

To submit

1. Validate the HTML5 of each page using the link below.
   HTML5 validation: URL=   
   If there are errors or warning correct the page.
2. Once you have validated the webpages and they are free of errors, submit the homework information using the Homework submission form.

---