Web Programming for Non-Programmers

DH 110

Fall 2017

Credits: 4

Requirements Met: SC

Class Meeting Metadata
Meets: MW
R (lab)
2:30 - 3:55pm
8:35 - 10:00am
Classroom: CGL 211 (MW) & CGL 114 (R)
Instructor's Metadata
Instructor: Jason T. Mickel, Ph.D.
E-Mail: mickelj@wlu.edu How to Email a Professor
Phone: (540) 458-8653
Office: Leyburn M33
Office Hours: M 11:15 - 12:15
W & R 1:00 - 2:00
Or by appointment

Programming Assignment #4: Forms and Tables in Your Bio50 points

Due Tuesday, October 10 @ 11:55pm

Overview

This time around, you'll be building a small contact form and adding a table of important classes to your bio page.

Steps to Complete the Assignment

  1. Create a table below your images section that lists courses that you have taken or plan to take that you believe will benefit you for internships, a career, or graduate school.
    1. Directly above the table, add an H2 tag with the contents "Important Coursework".
    2. The table should be 6 rows tall and 4 columns wide.
    3. The cells across row #1 should be table headers with "Course Number", "Course Name", "When Taken", and "Why Important", respectively.
    4. The cells for "Why Important" should contain a sentence or two about the impact it had or you expect it to have on your future prospects.
  2. Using CSS, style your table:
    1. All of the header cells should have a dark blue background with white text.
    2. Each row should have a border above and below, but there should be no borders on the left and right sides of any cell. No space should appear between the borders.
    3. Each cell should have padding on all sides to make the text more readable.
  3. Below the table, create a small form that allows a user to enter their name, a valid e-mail address, the purpose of their contact, and a message for you.
    1. Directly above the form, add an H2 tag with the contents "Contact Me".
    2. For the form element:
      1. Set the action to this exact value (copy and paste it): https://www.jasontmickel.com/dh110/mailform/mail.php
      2. Set the method to "post"
    3. Inside the form, add the following fields:
      1. A label that connects to the "name" field with the initial contents of "Your Name".
      2. An input field of type "text", the name "contact", and the id "contact". The required attribute should be set.
      3. A label that connects to the "email" field with the initial contents of "Your E-mail Address".
      4. An input field of type "email", the name "email", and the id "email". The required attribute should be set.
      5. A label that connects to the "purpose" field with the initial contents of "Nature of the Message".
      6. A select field with the name "purpose" and the id "purpose". The required attribute should be set. It should contain the following options:
        • Question
        • Comment
        • Request
        • Following Up
      7. A label that connects to the "message" field with the initial contents of "Your Message".
      8. A textarea field with the name "message" and the id "message". It should be 50 columns wide and 15 rows tall. The required attribute should be set. The placeholder attribute should have the value "Please limit your message to approximately 1,000 characters".
      9. An input field of type "hidden", the name "email_to", and the value of your W&L email address.
      10. A submit button
    4. All visible fields should appear on separate lines to the right of their respective labels, except for the textarea, which should appear below the label.
    5. Make sure you test the form and receive the email message in your W&L mailbox!
  4. Use CSS to style your form:
    1. Set all labels to the same width of 200 pixels and make them each display on the screen as inline-block.
    2. Make all labels appear in bold text
    3. Add space after each line of the form (including the button) to make it more readable
    4. Set the width of the form to 400 pixels and center the entire form on the screen. Go back to the "Box Model" if you forget how to do this.
  5. Use GitHub desktop to commit and sync your project.

Expectations

HTML and CSS should be properly formatted following their respective coding conventions discussed in class.

You can use the live preview extension in VSCode to test the page as you're building (click Preview Available in the lower left of the VSCode window), but when you're finished, be sure to check the live URL at https://dh110f17.github.io/bio-YOURUSERNAME (e.g. "https://dh110f17.github.io/bio-mickelj") to see that it is completely uploaded and working.

The new portions of your page should look similar to this:

Sample image for how the results of Lab 4 should look

Grading Specifications

You will be graded on:

  1. Accurately meeting all of the specifications above
  2. Following HTML and CSS coding rules and conventions discussed in class and in the textbook
  3. Correcting errors from the last lab

The lab will begin with a full score of 50 points and deductions will be made according to the amount and severity of errors.