Mercyhurst UniversityMath DeptDr Williams Home

MIS 370 Client Side Programming

Assignment 0: Site Construction

The first part of this assignment (setting up your server directory) is due before the start of class on Thursday, January 18.
The remaining parts of the assignment are due by noon on Tuesday, January 23.

Goal

In this assignment, you'll review essential HTML and CSS skills that will be used throughout this course by setting up your server directory, creating HTML files with exact specifications, and styling the pages with shared CSS. The pages you create will serve as your personal MIS 370 landing page. You may also choose to reuse these templates for later assignments.

Requirements

Part I: Server Access and Organization

  1. Make sure you are able to access your "public_html" directory on the department server. It is crucial that you resolve any issues before the start of class on Thursday, as we will be making regular use of the server throughout this course.
  2. Within your "public_html" directory, create (if they do not already exist) the following subdirectories. Use the exact names for subdirectories shown here.
    • public_html/projects
    • public_html/includes
    • public_html/courses
    • public_html/courses/MIS_370
    • public_html/courses/MIS_370/includes
    • public_html/courses/MIS_370/images
    • public_html/courses/MIS_370/assignments
    You are free to create other subdirectories as well.
  3. Create files called index.html (or index.php) within "projects", "courses", and "courses/MIS_370". No content needs to be added to these files before January 18, but they should be present and in the proper location to receive full credit for this part of the assignment.

Part II: HTML Structure

Now, you will add HTML content to the three index files you have put in place for Part I. These files will be nearly identical, and should all have the structure shown here:
You may include additional tags and content, but all files should reflect the wireframe above. You may also add IDs and classes to any or all elements.

Content specifications:
  1. Navigation
    • Links in your navigation area should be organized using lists (ul or ol).
    • The navigation should be identical in all three pages.
    • The navigation should include a link to your courses/index page, but any other links are up to you.
    • Always use relative links.
  2. Images
    • Include at least one image in your header. This can be your own personal logo, a Mercyhurst logo, or any other image.
    • There should be at least one image per page, in addition to the header logo.
    • All images should be resized and edited for the page.
    • Again, use relative links to load images.
  3. Table
    • Within the courses/index.html page, create a table that displays your weekly course schedule for this semester.
    • Add a link to this schedule to the courses/MIS_370/index.html page.
    • The table should include, at minimum, caption, thead, tfoot, and tbody tags.
    • This table should be placed in a section area with a class of "mySchedule":
      <section class="mySchedule"> 
      	<!-- table content here --> 
      </section>
      
  4. Course page: courses/MIS_370/index.html
    • Include a link to the course website.
    • Include a short introduction to yourself.

Part III: CSS

Finally, you'll create at least one site-wide CSS file that will be used to style all three of your HTML pages. This file can have any name, but should be stored in your "public_html/includes" directory (or a subdirectory of it, perhaps public_html/includes/css, for instance). All three index pages you've created should include relative links to this css file, so a single change to this file will affect all site pages.

CSS specifications:
  1. Content sections (header, footer, nav, etc) should have either fixed widths (typically 960px or 1200px) or relative widths (as a percentage).
  2. The footer should be "sticky", meaning it will stay at the bottom of the window even with the content does not fill the screen. You can accomplish this using any CSS method you prefer (no JavaScript).
  3. The navigation bar should indicate which page you are on in some way. Use underlining, text colors, background colors, or more creative options.

Part IV: Extras

Most assignments in this class will have a portion of the grade reserved for going beyond the minimum requirements. If your work satisfies the requirements outlined above, you will receive a grade of (at most) 85% on this assignment. To receive a B+ or A, you may put any additional effort into your project that you would like. Suggestions for producing above average work would include: Additional points will be added to your grade based on the complexity of your additional features and overall effort put into the projects.

Additional Notes


Grading

Value Requirement
Part I: Directory Structure - 15%
10 All required subdirectories are present.
5 index.html (or index.php) files are present within required subdirectories.
Part II: HTML Structure - 45%
10 Required HTML structure applied to all index.html files.
10 Navigation requirements satisfied: organized as lists, relative links only, link to courses/index.html included.
5 Logo image included in header, sized and edited appropriately, loaded using relative link.
5 At least one additional image (besides logo in header) added to each index.html page.
10 Schedule table included in courses/index.html, including caption, thead, tfoot, and tbody tags, and found within a section given a class of "mySchedule". A link to this schedule appears on the courses/MIS_370/index.html page.
5 courses/MIS_370/index.html page includes a link to the course website and a brief bio.
Part III: CSS - 25%
10 CSS file located in public_html/includes directory, used across all pages in this assignment.
5 Content sections given fixed or relative widths.
5 Sticky footer.
5 Navigation indicates current page.
Part IV: Extras - 15%
15 Add additional content, HTML structure, and CSS styling to go beyond the minimum requirements.