Create a Simple Markup Language Document

Assessment Task

Instructions:

You are to demonstrate your hand-coding knowledge and skills to build a simple markup language document to specification using a plain text editor such as Notepad++.

You are not to use commercial packages such as for example Adobe Dreamweaver or Microsoft Front Page.

Your page is to be coded using HTML5 and associated Doctype definition and Character encoding. Your Assignment is to be completed in accordance with the instructions and specifications provided below.

Your assignment web page should be named as: yourname-webpage.html and saved into a folder called yourname.

The screen shot of your page validation report should be named as: yourname-validation.docx also saved into the folder called yourname.

Your compatibility report should be named as: yourname-report.docx and also saved into the folder called yourname.

On completion of the assignment, use compression software (i.e. Winzip, Winrar) to zip the yourname folder and upload the zip file to the designated area on the Moodle website.

Duration: 2 weeks

Part 1:

Using a plain text editor such as Notepad++ and HTML5 hand-coding only, create a web page based on: A Topic of Your Choice

Save your assignment web page as yourname-webpage1.html into a folder called yourname.

Your web page must include the following elements:

1. Include a logical heading structure with at least three (3) different heading levels;

2. At least two (2) paragraphs of relevant text under each heading using elements;

3. The tag;

4. The tag;

5. Nested tags (for example combining the and tags, or and );6. The horizontal rule tag ;7. The break tag
;8. At least one (1) ordered list ;9. At least one (1) unordered list ;10. At least one (1) nested list (for example an ordered list within and unordered list);11. Use the Copyright special character to place a copyright statement at the bottom of your page, for example: Copyright [yourname] [date].11. Use the Copyright special character to place a copyright statement at the bottom of your page, for example: Copyright [yourname] [date].12. An image of yourself less than 50kb.13. Link to another page (at least 2 pages).14. Link to an external website for example HBHS homepage.Part 2:1. Validate your document using W3C online validation service at: http://validator.w3.org and validate your page using the Validate by File Upload option.2. Ensure the page DOES validate for the HTML5 standard. If it doesnt, rectify your hand-coded HTML and submit to the Validation tool again.3. Once the page is successfully validated, make a screen capture of the validation report that W3C provided you and paste it in a Word document to be saved as yourname-validation.docx into the folder called yourname.Part 3:1. Test your page for browser-compatibility by viewing it in at least two (2) browsers (for example Internet Explorer and Firefox, or Chrome or Safari, to verify it is displaying correctly and consistently across different browsers.2. Paste a screen capture of each browser view into a Word document to demonstrate that your webpage displays correctly and consistently in multiple browsers.3. Explain any obvious differences in the way your page displays in each of the browsers.4. Name your Word document yourname-report and save it into the yourname folder.Feedback SheetCreate a Simple Markup Language DocumentStudent Name:Marking Guide:Assessment CriteriaResultComment1. Create document structure. Evidence of well structured and consistent pages following HTML5 standards. (12)a) Doctype + Character encoding usedb) image c) link to other pages d) link to external website e) f) Relevant page titleg) Basic elements of the document assigned correctly.h) Headingsi) Paragraphs j) Listsk) Copyright evidence2. Validate document (8)a) Document validates using W3C HTML Validator Service.b) Screen shot of validation report providedc) Document views correctly in multiple browsers. Evidence of browser compatibility provided.