Make Sure All Your Web Pages Comply With The 5 Standards

Make Sure All Of Your Web Pages Comply With The Html 5 Standards And C

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 here, 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. 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 2: For this assignment, you will create an external CSS style sheet and link it into the HTML page that you created in Assignment 1. Remember that you are continuing to build on the website you created during Week 1. After completing this assignment, you will create another zip archive containing your HTML file from last week (with the link tag added), the CSS file you will create in this assignment, and all image files that are part of your website.

Before proceeding with this assignment, make sure you have read the Week 2 module in the Content area, where the basics of CSS are explained to you. Note that although the Week 2 Content also briefly covers inline CSS and internal style sheets, this assignment only requires you to create an external style sheet. The other methods of incorporating CSS into your website are covered in the content for your information only and are not required to be used in this class. Complete the following steps for this week's assignment:

1) Open the HTML file that you created and add the following line of code to the head section of the file, replacing "mystyle.css" with the name you will be giving to your own CSS file, which should be in the form of LastFirstStylesheet.css (E.g., John Smith's style sheet would be named SmithJohnStylesheet.css). Save your HTML file and then upload it to the HTML validator and check to make sure it still passes validation.

2) Create a new file in your text editor (Notepad++ for PC users, and TextEdit for Mac users). Name your new file LastFirstStylesheet.css replacing Last with your last name and First with your first name (E.g., John Smith's style sheet would be named SmithJohnStylesheet.css).

3) Copy the following text into your file:

body { background-color: lightblue; }

h1 { color: darkblue; text-align: center; }

Save your file and then upload it to the CSS Validator and make sure it passes validation. Open your HTML file in the browser and see how it looks with this new stylesheet linked in. If you have properly created your CSS file and linked it correctly into your HTML file, your webpage should now have a light blue background and your main heading should be dark blue and centered.

4) Change the page background color to another color of your choice besides light blue and change the color of your main heading to another color of your choice besides dark blue. Find additional color names here. Save your CSS file, re-validate it, and view your page in the browser to see the results of your changes.

5) In your CSS file, create a declaration block for the paragraph element and set the font-family and font-size properties. Choose fonts and sizes that suit your website design.

6) Create a CSS class called "boldtext" which can only be applied to elements. In its declaration block, set the font-weight to bold.

7) Create a CSS class called "italictext" which can only be applied to elements. In its declaration block, set the font-style to italic.

Save your CSS file and re-validate it.

8) Open your HTML file for editing. Use the element with the class attribute to apply the "boldtext" and "italictext" classes to a few words of text. Apply "boldtext" only to some text, "italictext" only to other text, and both classes to some other text. Ensure "boldtext" is not used inside headings. Save your HTML file and re-validate it.

Validation Requirements: Validate your HTML and CSS files before submitting. Fix all errors identified by the validators. If needed, seek help from your instructor to debug errors.

Submission Instructions: Create a zip archive containing all files related to your web page—HTML file, CSS file, images, etc.—maintaining the folder structure. Submit only this zip file for grading.

Related Assignments