Homework

Before posting your assignments, always validate your code.

Assignments must be complete, on time, and your own original work.
You are responsible for knowing the class homework policy.

Please stay current with homework assignments. Late assignments are marked down 2% for each day they are late, and are not accepted more than one week late.


Week Ten (3/10)

Reading: Duckett Chapter 7, Forms Handout, and Formhandler Handout


Assignment 6

Working Form and Thanks Page

Due date: Monday, March 17th at 9:00 AM. (150 points)

Using the techniques covered in class, create and upload a working form page and thanks page for your final project.

Examples:
Example form page
Example thanks page

For this assignment, you will need:


  1. Start with your PHP template from Assignment 5. In the content area of the page, construct a form as shown in class and on the forms handout.
  2. Do not copy and paste from an existing form, including the form we will build together in class. Build a new form from scratch.
  3. Your form must include each of these elements:
    • textfield
    • email (input in this field should be required to submit the form)
    • textarea
    • radio group
    • checkbox group
    • select box
    Important: Your form must include a field with the name of "email" for the form handler to work!
  4. Use the HTML5 email form element to collect the user's email.
  5. Use the HTML5 required attribute to make your email element a required field: the site owner will need it to respond to messages.
  6. Form element names and values must be XHTML-compliant: one word, no spaces, all lowercase.
  7. Use name/value pairs for each form element that are meaningful and appropriate to your site and form.
    In other words, a person reading the name/value pairs in the email your form sends should be able to figure out the form's questions and the site user's answers, without looking at the form itself.
  8. Use <label> tags on your form.
  9. Use "for" attributes as needed to connect the labels to their inputs.
    This adds important accessibility for users with disabilities, and those using mobile devices.
  10. Use the class formhandler file as your form's action. How-to info is in the Formhandler Handout.
  11. Use an HTML table and CSS to format your form as shown in our in-class demo.
  12. Once your form page is formatted and validated, copy and re-name it to make a thanks page. The thanks page should contain:
    • a copy of your form
    • a page-identifying headline, such as "Thank You"
    • text that tells the user their form has been sent
  13. Validate your HTML and CSS on both pages.
  14. Edit the formhandler.php file to send to your own email address for testing. If you are using an SCCC server, you will only be able to send mail to SCCC email addresses. Upload your form page, thanks page, and formhandler.php file, and test both forms extensively. Be sure that your form does the following:
    • Will not submit without a properly formatted email address in the email field
    • Takes you to your thanks page on submit
    • Sends an email to your email address on submit
    • Uses meaningful name/value pairs so the email makes sense when you read it
    Try filling out your form in several different ways, and see whether the emails you receive make sense. For example, check just one checkbox, then two, then all of them. Try selecting more than one radio button at once. I recommend writing notes in the textarea about the input you are testing, so you can compare the input to the results.
  15. Once you have thoroughly tested your form, set your formhandler file to send the results email to me at rgilde01@seattlecentral.edu. Again, note that SCCC servers will not send email to addresses that are not @seattlecentral.edu.
    • Upload your work to a server and update/test your portal page link to Assignment 6.
    • Name your folder first-last-web120-a6 before you zip it.
    • Send me an email with your portal link and an attached zipped folder containing all A6 files. Subject line: Web 120 Assignment 6.

Due date: 9:00 AM on Monday, March 17th.


Week Nine (3/3)

Reading: Duckett pgs 319-322, 413-426, and Week 9 Resources
Work on A5 and your final project


Assignment Five:

Two PHP Templates

Due date: Friday, March 7th at 9:00 AM. (250 points)

  1. Starting with your basic template file, create a valid PHP template (the bones) of your final site's home page. Be sure you have made any needed updates/corrections to your basic template file!
  2. Create a valid PHP template of a lowest-level page of your final site, such as a sub-page of a main section.
  3. Link the two pages together in your nav, so I can easily navigate from one to the other.
  4. Review the final project requirements, your AIA, site map and information architecture, rough comps from A5, and any comments I provide you via email on your A5 designs to be sure you have included all the elements your final site needs.
  5. Elements I'll be looking for within this template assignment:
    1. Your layout and positioning should reflect the techniques we have covered in class.
      You may use tables only to display tabular data (such as your contact form elements).
    2. All presentation and positioning styles must use CSS.
      • Use one external CSS file linked to your header include.
      • Write global styles first, then more specific styles for areas that will differ from the norm.
      • Link the HTML Style Guide to your CSS stylesheet to test your global styles.
    3. A clickable logo image that links back to the main page from each interior page. Use the image replacement technique we learned in class to place hidden headline text within your h1 tag for accessibility and SEO.
    4. Page identification on interior pages. A good way to do this is to use a headline, for example an <h2> that says "About Us" on your About page. Optional page-specific "You Are Here" navigation styles are also nice.
    5. Clear navigation: when looking at your lowest-level page, I should know what page I'm on, what section I'm in, and how to get to other pages in the section.
    6. Include examples of subheads to break up long text on interior pages. Your template should show me how headlines and subheads will be styled in your main content div and in your sidebar.
    7. Your links should be null links (href="javascript:;") that show me your unvisited, hover/focus, and (optional) visited states. Include examples of inline text links within your content and aside, not just site navigation.
    8. Be sure to include styles for headlines, subheads, paragraphs, lists, and links in your sidebars and footer as well as your main content area.
    9. Be sure your pages have a consistent look and feel, so that users know they are still on the same site as they move from one page to another.
    10. One of your templates must show how a long, scrolling, text-heavy page will be handled. Put text navigation and a "back to top" link at the bottom of this template.
    11. Place a copyright and design credit at the bottom of the page. (The content might be copyrighted to your client, while the design copyright is yours.)
    12. You may also want to negotiate placing a link to your contact form or web design URL in the footer as well, to direct future clients to you. No mail-to attributes! Your contact link must go to a web page, such as a portfolio or online form.
    13. Use include files for all elements that will repeat on every page of your site, such as the header, navigation, and footer. Get everything positioned, tested, and validated first, make include files last.
    14. Proper file structure: all files for the finished assignment (web pages, images, includes, stylesheet, and HTML style guide) should be inside an a5 folder which will serve as the root folder for this assignment. Images should be in a folder called images, and includes should be in a folder called includes.
  6. Validate your HTML and your CSS. Place both validation badges on each page, and test them.

Don't worry yet about adding fancy elements such as JavaScript, making or styling a working form, etc. What we're going for here is a simple template you can use as a framework to build each page on your site. Content can be lorem ipsum dummy text, and images within the content area may be placeholders.

Your background images, banner/logo images, font styles, etc. should be the ones you will use on your final site.

Your finished pages should look a whole lot like the images in your design comps assignment, but will be full-sized working web pages.

Don't have much content yet? Don't worry: here's an example of a functional interior page template with dummy text and image placeholder.

Due date: by 9:00 AM on Friday, March 7th, do the following:


↑ Back to top