General Instructions for your Website:

Assignment Instructions

General Instructions for your Website:

During Week 1 through Week 7 of this course, you will be building a personal website on a topic of your choice.  Choose a topic about which you are both knowledgeable and enthusiastic, so that you will be able to easily write about the topic and share your knowledge of the topic through your website.  During Week 1, you will create the home page of your website.  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).  During Week 2, you will add an external style sheet to your website.  During Week 3 through Week 7, you will either add additional pages to your website or you will add new functionality to your home page, as directed in the instructions for each assignment.

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 (or TextEdit on the Mac).  DO NOT use GUI editors, such as FrontPage, Dreamweaver, etc.  You must write the code for your web pages yourself.  If you are using a PC, it is strongly recommended that you download the free Notepad++ text editor (https://notepad-plus-plus.org/) because it contains extra features which assist with debugging, such as line numbering and color coding of different elements of syntax.  Mac users should use the TextEdit text editor that comes with the Mac OS.  However, if you are a Mac user, make sure you set TextEdit to use Plain Text by default.  You can find instructions for this here: https://www.tekrevue.com/tip/textedit-plain-text-mode/

Make sure all of your web pages comply with the HTML 5 standards and CSS standards.  DO NOT use obsolete HTML elements 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 https://validator.w3.org/#validate_by_upload, you can be sure that your code complies with HTML 5.  Starting Week 2, your external style sheet (.css file) must pass validation at the W3C CSS Validation Service: https://jigsaw.w3.org/css-validator/#validate_by_upload.  Make sure you use the “Validate by File Upload” option (and NOT the “Validate by Direct Input” option), on both of these validators since this is the way your instructor will check your pages when grading your assignments.

The home page of your website must 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 file SmithJohnHomePage.html   Starting with Week 2, you will also have a CSS file linked into every HTML page on your website.  Name your CSS file “LastFirstStyleSheet.css” where “Last” is your last name and “First” is your first name.  Your website must only have 1 CSS file and that file should be linked into all HTML pages on your website.  Additional HTML pages created for your website (During Week 3 through Week 5) should be hyperlinked together through a navigation menu that appears on all pages of your website.  Naming conventions for each additional page on your website will be included in each assignment description that requires a new HTML page.

Specific Instructions for Assignment 6:

For this assignment, you will add a video and audio message to your home page:

1) Use any software of your choice, including multimedia software that is built into your operating system, free audio software that you can find online, or even your smartphone to create a short audio recording with a welcome message for your website.

2) Use any software of your choice, including multimedia software that is built into your operating system, free video software that you can find online, or even your smartphone to create a short video with a welcome message for your website.

Note: Make sure you keep both your audio and video short (no more than 2 minutes each).  The Sakai classroom has a file size limit of 50MB for each assignment.  You need to make sure your audio and video are short enough that your zip file containing your entire website will be under the 50MB file size limit.

Note: Also, make sure you remember to include your .mp4 (video) and .mp3 (audio) files in your zip archive!  Your video and audio won’t play on your website when I grade it unless you include the video and audio files in your zip archive.

3) Using the <video> element, embed your video file into your home page.  You can read more about the <video> element here: https://www.w3schools.com/html/html5_video.asp

Note: DO NOT use the <iframe>, <object>, or <embed> elements.  These have been superseded by the <video> element in HTML5!

4) Using the <audio> element, embed your audio file into your home page.  You can read more about the <audio> element here: https://www.w3schools.com/html/html5_audio.asp

Note: DO NOT use the <iframe>, <object>, or <embed> elements.  These have been superseded by the <audio> element in HTML5!

Before submitting your web site:

1. Validate all HTML files at https://validator.w3.org/#validate_by_upload, using the “Validate by File Upload” option, and fix any errors that the validator identifies before submitting your web site for grading.
2. Validate your CSS file at https://jigsaw.w3.org/css-validator/#validate_by_upload, using the “Validate by File Upload” option, and fix any errors that the validator identifies before submitting your web site for grading.

Note: It is critical that you debug and fix ALL errors identified by these two code validators before submitting your assignments.  Contact your instructor for assistance if you are having difficulty debugging and fixing your errors because it is imperative that your code files pass validation.

Submission Instructions: Create a zip file containing all files related to your web page (.html files, .css file, image files, and/or multimedia 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

Webpages (HTML files) validate without errors at https://validator.w3.org/#validate_by_upload10Style sheet (CSS file) validates without errors at https://jigsaw.w3.org/css-validator/#validate_by_upload10Website contains well-written, well-thought-out, creative, attractive, and well-organized content (uses paragraph, line break, heading tags, and horizontal rules appropriately to organize content)10Correct use of all basic elements in a webpage document (Ex: DOCTYPE, html, head, body, meta, title, link, etc.) on every HTML page10Consistent navigation menu on all pages of your website, using local hyperlinks (coded with relative paths)  5CSS style sheet containing appropriate formatting for your website, linked into all HTML pages on your website10Audio welcome message embedded on home page using <audio> element.20Video welcome message embedded on home page using <video> element.20Correctly created zip file that contains all files for webpage (maintaining original folder structure)  5Total100***Note: Your website must include the required audio and video on your home page to receive any credit for this assignment.  Websites submitted without an audio and video message will not receive credit.