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,
Eric Meyer's CSS reset code, and the
html5shiv link. 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, html5shiv, 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