COSC 115

Introduction to Web Authoring


Project 2


Due October 12th (Thursday) by 11:59PM

Overview

This project will give you experience with more advanced HTML concepts including links, images, tables, and forms.

To Do

Complete the following steps:

  1. Make a duplicate copy of your previous project, and rename it 'project2'. You will add on to what you did in the previous project.
  2. If you aren't already doing so, move all your images into an 'images' directory within your root directory, and fix all the links on your homepage so they still work.
  3. In addition to your previous html file (index.html) and images, create three new webpages and add them to your website. Each one should be placed in its own directory, and should be named index.html. Name one of the directories 'contact', one of them 'schedule', and the last one 'photo'.
  4. On the webpage in your 'schedule' directory, create an HTML table containing your Wofford course schedule. You can design it in any way you wish, but make sure to have at least one use of either the colspan or rowspan attributes somewhere in your table. Also make use of the th tag in at least one place.
  5. On the webpage in your 'contact' directory, create an HTML form so the viewer of your website can send you some information. Collect at least 5 pieces of information, using at a minimum a text input (single line of text), a text area, a group of radio buttons, at least one checkbox, and a drop down menu control. Make sure your form is working/functional using formspree.io.
  6. Add a third image to your website (also place it in your 'images' directory, and make it appear on the webpage in your 'photo' directory. This can be any image you want, but you'll want to find a image that is fairly big.
  7. Make a copy/clone of your image, but add '_thumbnail' to its name. For example, if your original image was called 'abbeyroad.jpg', then name the duplciate file 'abbeyroad_thumbnail.jpg'
  8. Using any image editor (such as Preview on macOS, Paint on Windows, or GIMP), resize the duplicate image to be very small (less than 100x100 pixels). Add the thumbnail image to your homepage, and make it so that when the thumbnail image is clicked, it brings you to your webpage with the full size version of the photo.
  9. Make sure each page that isn't your homepage has a link back to your homepage.
  10. All link addresses that you use should be relative addresses.
  11. Make sure your all your HTML pages validate.

Submit

To submit, zip/compress your 'project2' directory, name the compressed file 'project2.zip', and submit it to Moodle by the due date.