Basic page

Objectives

  • Create a valid webpage with separate CSS and JavaScript files
  • Create a working CSS file
  • Create a working JavaScript file
  • Organize files by function using subdirectories
  • Upload files to a remote server
  • Create subdirectories and organize files on a remote server
  • Test and debug a website

Overview

This assignment involves creating a web page on a remote server. The page displays a heading and a couple of lines of text. CSS is used to style the page. JavaScript is used to replace the content of one of the lines of text.

Requirements

  • Create a simple web page with the name basicPage.html. This web page should follow the HTML5 web page template given in the notes and discussed in class. It should include documentation comments and CSS to reset all CSS settings. The document itself should contain no CSS or JavaScript, but should link to files in subdirectories that contain the proper CSS and JavaScript.
  • The HTML document should:
    • follow the format of the web page template given in the notes
    • include a link to the html5shiv JavaScript code for IE versions less than IE 9
    • include a link to Eric Meyer's CSS reset code
    • include a link to a CSS style page made just for this web page
    • include a link to a JavaScript file made just for this web page
    • contain documentation comments including the name of the file, your name, the course, the date, and a short description of the web page
    • contain an h1 element with the name of the assignment
    • contain a div element with a class of content and the text: This is the original content.
    • contain a div element with a class of content, an id of replaceMe and the text: This content should be replaced.
  • Create a CSS file to modify the look of your web page. The CSS file should:
    • be located in a subdirectory named style or css
    • contain documentation comments including the name of the file, your name, the course, the date, and a short description of the file
    • a CSS rule to change the background color of the web page (the body tag)
    • a CSS rule to change the font-size, font-weight, color, margin-top, and margin-bottom of h1 tags
    • a CSS rule to change the color, and margin-top and margin-bottom of div tags which have a class of content
  • Create a JavaScript file which:
    • be located in a subdirectory named scripts or javascript
    • contain documentation comments including the name of the file, your name, the course, the date, and a short description of the file
    • a function which will change the content (innerHTML) of the element with the id of replaceMe with the text: This is content provided by JavaScript.
    • a JavaScript statement which will cause the function in the previous step to run as soon as the web page has finished loading
  • Upload your files (including subdirectories) to the remote server. Test and debug your program. When you are done, let the instructor know via email that your assignment is ready to be graded.

Grading rubric

  • 4 pts: HTML file follows template given in notes (HTML5, separate CSS and JS files, CSS reset, etc.)
  • 3 pts: HTML file has proper documentation comments
  • 5 pts: HTML file has required assignment elements (h1, div elements with class, div element with id)
  • 4 pts: HTML file has correct and working links to CSS and JavaScript code
  • 2 pts: CSS file located in subdirectory
  • 3 pts: CSS file has proper documentation comments
  • 6 pts: CSS file has correct rules for body, h1, and div.content elements
  • 2 pts: JavaScript file located in subdirectory
  • 3 pts: JavaScript file has proper documentation comments
  • 8 pts: JavaScript file has properly working function and code to run the function when the page is done loading

Examples

Basic web page with only CSS reset working
Basic web page with only CSS reset working
Basic web page with all CSS missing
Basic web page with all CSS missing
Basic web page with JavaScript missing
Basic web page with JavaScript missing
Basic web page with everything working
Basic web page with everything working