Web Site Design Value: 25% Due date: 27-May-2016 Return date: 20-Jun-2016 Submission method options Alternative submission method Task You may have a personal portfolio website for a number of reasons. If you're a freelancer, then you'd need one to showcase your work and allow people to contact you. For a student (or unemployed), then you'd need one to show prospective employers how good you are and what you can do, so that they might hire you. If you're part of a studio, then you might use one to blog about your design life, show people what you're doing and build your online presence. A personal portfolio website is all about promoting you. You are a brand, and your name is a brand name. No one is going to know about your brand unless you get it out there; and if you're a Web designer, developer, writer, gamer or any other type of creative, then it's essential that you have a good portfolio website. Complete the following: 1. Create a new HTML5 file named index.htm and save it in a folder with your Data Files. 2. Add the appropriate doctype for HTML5 to the beginning of the file. 3. Add a comment to the document head describing the document's content and containing your name and the date. 4. Add an appropriate page title to the document head. 5. Set the character set of the file to UTF-8. 6. Include at least one example of each of the following: • structural elements such as the header, footer, section and aside elements • grouping elements including a heading and a paragraph • a text-level element • an inline image • a character entity reference or a character encoding number • ordered or unordered list 7. Include an Internal Style Sheet which provides at least 2 type selectors and a universal selector 8. Structure your HTML5 code so that it's easy for others to read and understand. 9. Save your changes to the file, and then open it in your Web browser to verify that is readable. 10. Upload your files to the web server account you have created on CSU web server. Verify that the web page you have created is linked to your own homepage e.g. http://csusap.csu.edu.au/~student 11. Submit all your completed files in a zip folder using Turnitin submission system along with the web address of your homepage. Make sure you write the web address in a separate MS Word document and include that in the zip folder along with other files. Getting Web Server Account on CSU Web Servers 1. Go to the web site http://www.csu.edu.au/webpublishing/personal.htm 2. Go to "Students? Your personal publishing information is here" link and follow the instruction to get the web server account and how to publish your information. 3. Keep in mind that CSU web server allows maximum size of data files up to 20 MB. So your data files should be within this limit. 4. At the completion of registration process, you should have a webpage address similar to http://csusap.csu.edu.au/~student Rationale This assessment covers the following learning objectives: • be able to apply basic knowledge of creation of web pages using HTML5 and CSS; and • be able to describe and analyse the role and importance of Internet technologies in the modern world Marking criteria Question Marks Question 1 - Create Index.htm 1 Question 2 - Upload to Server 1 Question 3 - Add a feature 10 Question 4 - CSS formats 5 Question 4 - Document and Organise Code 4 Question 5 - Verification 4 Total 25 The following marking criteria will be used while assessing this assignment. Assessment Component HD DI CR PS FL HD (>84%) DI (75% - 84%) CR (65% - 74%) PS (50% - 64%) FL (<49%) A new HTML5 file named index.htm has been created, uploaded and linked to the homepage Successfully created index.htm file Did not create index.htm as specified index.htm is uploaded and linked to the homepage Successfully uploaded index.htm file to server Did not upload index.htm as specified At least one example of each of the following has been included: • structural elements such as header, footer, section, and aside • grouping elements including a heading and a paragraph • ordered or unordered list • text-level element • inline image • character entity reference or a character encoding number Be able to add at least one example of each correctly Be able to at least add one example of each correctly with minor formatting &/or spelling mistake made OR missing 1 of the supplied examples Be able to at least add one example of each correctly with formatting &/or spelling mistakes made OR missing 2 of the supplied examples Partially able to add at least one example of each OR only half of requested examples correctly given Less than half the examples were provided OR unsuccessfully implemented Your HTML5 code has been structured so that it's easy to read/understand HTML5 code has been structured so that it's easy to read/understand correctly HTML5 code has been structured so that it's easy to read/understand, correctly with minor formatting &/or spelling mistake made HTML5 code has been structured so that it's easy to read/understand correctly, with formatting &/or spelling mistakes made HTML5 code has partially been structured so that it's easy to read/understand HTML5 code has not been structured so that it's easy to read/understand as specified Add CSS Formats CSS Style has been Included using an Internal Style Sheet which provides at least 2 type selectors and a universal selector CSS Style has been Included using an Internal Style Sheet which provides at least 2 type selectors and a universal selector, correctly with minor formatting &/or spelling mistake made CSS Style has been Included using an Internal Style Sheet which provides at least 2 type selectors and a universal selector, correctly with formatting &/or spelling mistake made CSS Style has been partially Included using an Internal Style Sheet which provides at least 2 type selectors and a universal selector CSS Style has not been Included using an Internal Style Sheet which provides at least 2 type selectors and a universal selector Changes have been saved, and the file viewed to verify that it is readable The file viewed and verified correctly The file viewed and verified correctly with minor formatting &/or spelling mistake made The file viewed and verified correctly with, formatting &/or spelling mistakes made The file viewed and verified and partially correct The file not viewed and verified correc