Internet Programming Assignment #2 Solution

1 Description

The objective of this assignment is to expose you to more advanced HTML concepts and to introduce page styling through CSS and form generation. In this assignment you will create a weekly calendar schedule based on the courses that you’re taking.  In addition, you will also create a second HTML page. The second page should have a form used for submitting new entries to your calendar. We will leave several of the styling options up to you on this assignment.

 

2 Requirements

Develop a weekly calendar page based on your own schedule and a second webpage with an HTML form and several inputs for submitting weekly calendar events (the links do not have to be functional at this point: set the href attribute to your favorite social media site which should be functional). The form does not have to be functional either, it only needs to display the necessary input fields to add entries to the calendar below (imagine you’re taking a class that meets Tuesday and Thursday afternoon and you want to add it to your schedule) just HTML5 and CSS.  Your styling should be contained within the head element of each page (later on we will explore moving the styling to a separate file).

Figure 1: An example calendar after styling with CSS.

You should test your webpages with either Firefox or Chrome. Tell us which was used at the bottom of your webpage.

 

For the form use new HTML5 input types wherever possible. For instance, in the above example, the Start Time and End Time are of type “time”, which is a new HTML5 input type. HTML5 input types are covered in Chapter 3 of the textbook.

For the “Day of the week” field, make a dropdown list. The dropdown list can have any number of days. For instance, it can have 5 days (Mon-Fri, in case of an academic calendar) or 7 days (Mon-Sun, if it is a personal calendar).

For the form use “GET” request method. You can use a factious website for this

The name fields in the example form are as following:

Event Name: “eventname”

Start Time: “starttime”

End Time: “endtime”

Location: “location”

Day of the week: “day”

 

3 Evaluation

Your submission will be graded on the following items:

 HTML and CSS files pass w3schools validator (http://validator.w3.org) without errors. Warnings are accepted. 20 points

 

 Style the table using CSS. Feel free to get creative here.

 

10 points.

 Styling is present and styles both HTML files in a consistent manner. 10 points

 

Form has the appropriate fields and the action type. 10 points

 

Form has at least one new HTML5 From input type. 5 points

 

Form has at least one new drop down list. 5 points

 

Navigation bar is present and uses <nav tag. 5 points

 

Place day headers in a span to provide special styling, such as boldface or increased font. 5 points

 

You should use at least two div elements on your calendar page. Think about the most logical places to use them. 5 points

 

At the bottom of the webpage, tell us which browsers you used to test your HTML. Should include at least Firefox or Chrome. 5 points

 

No styling is present outside of the head element. 5 points

 

Use CSS to make times appear in italics. 5 points

 

Your submission should be packaged in a zip file. When opened, it must create a directory titled ‘<UMN internet ID’ containing all of your files. 10 points