Web Development Fundamentals Assignment

Assignment Instructions

You must write the code files by hand for all assignments in this class.  A simple text editor, such as Notepad or Notepad++ will suffice.  DO NOT use web page programs, such as FrontPage, Dreamweaver, etc.  You must write the code for your web pages yourself.

 

Make sure all of your web pages comply with the HTML 5 standards and CSS standards.  DO NOT use deprecated (outdated) tags and attributes from previous versions of HTML.  By including the HTML 5 DOCTYPE declaration in your webpages, and validating all of your HTML files at  http://validator.w3.org , you can be sure that your code complies with HTML 5.  Your external style sheet (.css file) must pass validation at the W3C CSS Validation Service:  http://jigsaw.w3.org/css-validator/

 

Create your HTML and CSS files using a text editor, such as Notepad or Notepad++.  Your home page (which you created during Week 1) should still be named "LastFirstHomepage.html" where "Last" is your last name and "First" is your first name.  For example, if your name is John Smith, you would name your home page SmithJohnHomepage.html  The other pages of your website should be named descriptively according to the content on each page.  All pages will be linked together using appropriate navigation so that I can navigate to and from each page of your website from your home page.

 

Instructions:

 

For this assignment, you should continue to build on the website that you started last week.  You are creating an informative web site about a topic that interests you.  Use this as an opportunity to teach me something new about a topic which you are knowledgeable about!  Make sure that you write the content (the paragraphs of information about your topic) yourself.  Do not copy content from other web pages.  Your website should contain at least 4-6 paragraphs of information, arranged in a logical manner (using headings and sub-headings appropriately), and it should contain at least 2 HTML pages by this week.  However, at no time may your website contain more than a maximum of 10 HTML pages (this is the limit that I will be able to validate and grade each week).

 

The HTML pages of your web site must include all of the following:

 

1 Contains the HTML 5 DOCTYPE declaration on each page

2 Correctly uses html, head, and body tags on each page

3 Includes charset, author, keywords, and description meta tags on each page

4 Use title tags to give each page an appropriate title

5 Link all pages to an external style sheet (.css file)

6 Use paragraph, line break, heading tags, and horizontal rules appropriately to format your pages and make them readable and well-presented

7 Three images that are relevant to your website's theme (the images can go on any of the pages of your website that you like).

8 One of your images needs to be embedded in a hyperlink, making it a clickable image.

9 A hyperlink to an external webpage (a page that is not part of your website). The webpage should be relevant to your website's theme.

10 Local hyperlinks (coded with a relative path). Use these to link from one page of your website to another page of your website.

11 An internal hyperlink (that takes you to a different spot on the same webpage where you code the link).

12 Copyright statement at bottom of all HTML pages, with correctly coded HTML entity code for copyright symbol

 

Your external style sheet (.css file) must include all of the following:

 

1 Move all inline CSS you created in your HTML file last week to your external style sheet (.css file), creating the appropriate CSS file entries in your external style sheet and removing the inline CSS code from your HTML files.

2 Set page background color and text color for the body element in your external CSS style sheet (make sure to delete the existing background color and text color attributes from the body tag in your HTML files).

3 Set the font-family and font-size for the body element in your external CSS style sheet

4 Create a declaration in your style sheet to set the font-family, font-color, and font-size properties of level-one headings (h1 elements).  Additionally, you may choose to create similar CSS declarations for other levels of headings, as well.

5 Create a declaration in your style sheet to set the width and height properties for your horizontal rules (hr elements)

6 Create a  CSS class  in your style sheet to float images to the left, using float and margin properties.  Apply this class to at least one of the images on your website.   Make sure you understand what a class is in CSS and that you actually create a class and apply the class to an image on your webpage (don't just float all images to the left).

 

Note: Keep in mind that you may only have one CSS file for your website in this class.  All CSS code will go in one file which you will link into each of your HTML pages.  By using only one CSS file you harness the power of CSS by ensuring that your entire website has a consistent look and feel, and you make your website easier to maintain since you will only have to update one file in order to make a change to the formatting and appearance of your entire website.  If you have formatting that you wish to apply only to certain pages, it is recommended that you create CSS classes in your CSS file for that formatting so that you can apply those specific classes to specific elements on specific pages of your website.

 

Before submitting your web site:

 

1 You must validate  all  HTML files at  http://validator.w3.org/  and you must fix any errors that the validator identifies before submitting your web site for grading.  All files that you submit are required to pass validation without any errors.   Note:  Keep in mind that the points allocated in the rubric below for HTML validation are "all or nothing."  In order to receive the points for passing validation, all HTML files submitted as part of your website must pass validation against the HTML5 standard without any errors.  Thank you for your compliance with this important requirement!

2 You must validate  all  CSS files at  http://jigsaw.w3.org/css-validator/  and you must fix any errors that the validator identifies before submitting your web site for grading.  All CSS files that you submit for grading are required to pass validation without any errors.   Note:  Keep in mind that the points allocated in the rubric below for CSS validation are "all or nothing."  In order to receive the points for passing validation, your CSS file submitted as part of your website must pass validation against the CSS3 standard without any errors.  Thank you for your compliance with this important requirement!

 

Submission Instructions: Create a zip file containing all files related to your web page (.html files, .css files, and/or image files).  Make sure you maintain the necessary directory structure in your zip file so that your webpages will view correctly when unzipped.  In other words, if your images are in a sub-folder on your computer, in relation to the folder containing your .html file, then you need to maintain that same directory structure in your zip file, too.  Submit only the zip file for grading.

Rubric for Grading Assignment	Points
1. Webpages (HTML files) validate without errors at  http://validator.w3.org/	10
2. Style sheets (CSS files) validate without errors at  http://jigsaw.w3.org/css-validator	10
3. Website contains well-written, well-thought-out, creative, and well-organized content (uses paragraph, line break, heading tags, and horizontal rules appropriately to organize content)	5
4. Correct use of all basic elements in a webpage document (DOCTYPE, html, head, body, meta, title, link) on every HTML page	5
5. Copyright statement at bottom of all HTML pages, with correctly coded HTML entity code for copyright symbol	6
6. Website includes three images	6
7. One image is a clickable (hyperlinked) image	6
8. Website includes external hyperlinks	6
9. Website includes local hyperlinks	6
10. Website includes internal hyperlinks	6
11. Page background color and text color correctly set in external style sheet	6
12. Font-family and font-size for body text correctly set in external style sheet	6
13. Font-family, color, and font-size of level-one headings correctly set in external style sheet	6
14. Width and height properties for horizontal rules correctly set in external style sheet	6
15. Correctly created CSS class to float images to the left and applied class to at least one image on your website	6
16. Correctly created zip file that contains all files for webpage (maintaining original folder structure)	4
	100
***Note: Your website must include the required images, hyperlinks, and external CSS file in order to receive any credit for this assignment.