THIS PAPER HAS BEEN DONE AT ESSAYLINK.NET; CONTACT US FOR A SOLUTION
Assessment 2
HTML5 and CSS
CSE1ITX Information Technology Fundamentals
Before you begin
Objectives
This is an individual assignment. Students are not permitted to work in a group when writing this assignment.
Copying and Plagiarism
This is an individual assignment. Students are not permitted to work in a group when writing this assignment. Plagiarism is the submission of another person’s work in a manner that gives the impression that the work is their own. La Trobe University treats plagiarism seriously. When detected, penalties are strictly imposed.
Further information can be found on http://www.latrobe.edu.au/students/academic
integrity/explanation/plagiarism
Submission Guidelines
Your assignment submission should be typed, not written/drawn by hand. Submit the electronic copy of your assignment through the subject LMS.
Submission after the deadline will incur a penalty of 5% of the available assignment mark per day capped at 5 days. No assignment will be accepted after 5 days. If you have encountered difficulties that lead to late submission or no submission, you should apply for special consideration.
2 © Didasko 2020. All rights reserved. 2
Background
You are asked to develop a web site with a business theme that you must decide upon. Your website should be designed to suit its target audience and meet the target audiences’ purpose of the site. The website will comprise HTML and CSS code only.
Requirement 1 – The Business Idea
You must choose an appropriate business idea for your site. A popular (but optional) choice is to choose a scenario that you have a personal connection with, either through yourself, family, employment or friends.
It is recommended that you discuss your ideas and plans for this website with an academic before the actual coding and development. Please lodge a support request for this.
Some ideas are below:
Bakery Computer store Gymnasium Bank Fishing tour company
Furniture store Craft store Computer games
store Travel agency Toy store
Hair salon Hobbies store Motorcycle store Flower shop Trekking tour company
Car sales yard Tattoo parlour Indian restaurant Bicycle store Flying school Clothes store Sports store Chinese
restaurant Cake shop Gliding school
Shoe store Parachuting club Cafe Jewellery store Window washing Music store Pizza shop Video hire store Barber shop Outdoors equipment store
Hotel Car repair shop Magic shop Book shop Golf club with “pro store”
Caravan supplier Optometrist Car spare parts
shop Hardware store Tennis club with
“pro store”
Fast food shop Apple store Women’s fashion
store Magic shop Computer games
store
Movie theatre Pet store Plant nursery Electrical store White goods store
Camera shop Event planner Men’s fashion
store Lollies shop Sportswear shop
Bar/pub Driving school A fan club Bridal wear shop Specialty cheese shop
Reception centre A casino A gadgets Store Tourist resort Real estate agency
Locksmith Surf shop Hot air ballooning Art gallery Landscape gardening
Greek restaurant
Taxi company
Solar panel
company
Fencing company
Mobile phone
store
You must also note the restrictions below:
1. The website cannot be a modification of an existing website. It must be a new website. 2. The website cannot be of a business that has dealings that could be considered to be controversial (
3. The website cannot be of business from your previous enrolment if you are a repeating student for this subject.
© Didasko 2020. All rights reserved. 3
4. The website cannot include copyrighted materials; however, you are welcome to use images with an open licence that come under the Creative Commons licence as per a Google image search, or equivalent (e.g. pixabay.com). See picture below:
Requirement 2 – Website pages
The website will have a total of six (5) pages, comprising of the following:
1. Home page (index.html)
This page will be an attractive homepage design for the business with a combination of text and images.
2/3. First/second content pages (names of your choice)
These three pages will be the main content pages. They will have enough content to be roughly equivalent to 4-6 large paragraphs of text, or equivalent with images, tables, and/or other elements. Ideas for these pages could be information about the business, products, services, and so on.
One of the pages should include a table showing either:
the opening hours of the business across the week or
the hours during the week direct contact can be made with the business for support/advice. 4.Contact form page (contact.html)
This page will be a contact form for the business. It will include appropriate form fields to collect information about the user completing the form so that the business can get back in touch.
The contact form includes a
tag that is comprised of the following components:
a method attribute,
an action attribute,
appropriate form controls (minimum of four),
validation of form controls using HTML5 attributes (not JavaScript, jQuery, etc.),
a submit button
The submit button will take the user to the response page (below).
5. Contact form response page (response.html)
This will be a page that acknowledges the submission of the form with the message “Thank you for submitting the form”. Note that the contact form (and response page) do no real processing with the submitted data, but rather “simulate” the form submission process.
4 © Didasko 2020. All rights reserved. 4
Requirement 3 – HTML and HTML5 programming The following HTML and HTML5 features will be included as follows:
1. DocType tag
DOCTYPE declaration tag must be included and used correctly on every page.
2. Document structure tags
The , , and tags must be included and used correctly on every page.
3. Metadata tags
The tag and at least one metadata tag must be included in the section of every page.
4. Repeating semantic tags
The HTML semantic tags
,
, , and
must be included and used correctly on every page.
5. Other semantic tags
The HTML semantic tags
,
, and
must be included and used correctly at least once on any page.
6. Navigation bar
All pages must have a navigation bar (with
) that has links to the five main pages (all except response.html). The links must be relative links (not absolute links).
Basic tags
The following tags must be included and used correctly anywhere in the website: paragraphs, headings, lists, links, images, and tables.
Requirement 4 – CSS and CSS3 programming The following CSS and CSS3 features will be included as follows:
1. CSS linkage
All CSS code must be in a single external style sheet that is referenced with a tag within the element on each page. We are specifically asking for an external style sheet, so do notuse embedded or inline styles, unless there is a good reason to do so.
2. Styling for content
A series of CSS and CSS3 styling should be applied for the content components of the website, such as colours, font attributes, etc.
3. Styling for structure
A series of CSS and CSS3 styling should be applied for the structural components of the website, such as positions, height, width, borders, margins, padding, etc.
4. Referencing elements
The HTML elements should be referenced with a combination of type selectors, ID selectors, and class selectors.
© Didasko 2020. All rights reserved. 5
Requirement 5 – Big picture
Some marks are awarded to judge your site overall, in terms of its presentation, consideration towards accessibility, and meeting the business goals.
1. Presentation
Is the website subjectively attractive, well presented, and contemporary in nature?
2. Accessibility
Is the website considerate towards users with a disability, regarding aspects such as choosing colour combinations with good contrast, reasonable fonts (sans serif and web safe), and using the alt attribute with images to provide alternate text for screen readers?
3. Business goals
Have the aims and objectives of the site been met through the final product? How useful and realistic is the site in its current form for a real-life business considering the restrictions of this assignment?
Requirement 6 – Code quality
Your code must be in good shape in terms of presentation and validity. The following guidelines apply as a minimum:
1. Case consistency
The HTML and CSS code must use lowercase characters for tags and attributes, rather than uppercase or a mixture. I.e.:
, and not or .
2. Indentation
Each “block” of HTML or CSS code must be indented consistently by one level. A level may be 3-4 spaces or one tab, depending on the preferences you have set in NotePad++. Most importantly, you must be consistent.
3. HTML validation
All HTML files must validate cleanly when validated by the “direct input” method on the W3C HTML validation service (https://validator.w3.org). Zero errors and zero warnings are expected.
4. CSS validation
The CSS file must validate cleanly when validated by the “direct input” method on the W3C CSS validation service (https://jigsaw.w3.org/css-validator). Zero errors and zero warnings are expected.
6 © Didasko 2020. All rights reserved. 6
Requirement 7 – Software and technology Please note the following technology-related requirements of this assignment:
1. Browser compatibility
The final product should be viewable on a variety of browsers such as Chrome, Edge, and Firefox. The code should be developed in a way that gives the website a consistent appearance across these browsers.
2. Programmer’s editor
The website will be created with a code editor like NodePad++ (https://notepad-plus-plus.org), Atom, Visual Studio Code, Bracket etc., as the programmer’s editor.
Based on the above, it is therefore clear that you must NOT use a WYSIWYG-style integrated development environment (DreamWeaver, etc.). The code of your solution must be 100% hand coded in any of the above mentioned editors. This is important whilst learning HTML and CSS for the first time.
3. Client-side web development technology
Regarding client-side web development technologies, the website will comprise HTML and CSS only. Therefore, do not include JavaScript, jQuery or another client-side technology. In addition, do not use any third-party templates (Bootstrap, etc.) as a substitute for parts of your development work.
© Didasko 2020. All rights reserved. 7
Submission information
Please note the following details about the submission size, submission organisation and submitting your assignment:
Submission size
Your submission must be less than 10 megabytes when compressed as a single Zip file and should really be much less than this. The learning management system will not accept submissions that exceed this limit.
Here are some tips to keep your submission size manageable:
1. If you decide to do something like include original photos from your camera (completely up to you), they may be several megabytes each, therefore they may require post-processing to reduce them in size.
2. If you physically shrink images on your file system, your website will be smaller. If you dynamically shrink images with HTML height and width attributes in your code, your files sizes may be larger than needed.
Submission organisation
Create a folder called xxx_cse1itx_assessment2 (where xxx is your student number) to hold all your work:
HTML files
CSS style file
A subfolder called “images” for all graphic assets
Zip your xxx_cse1itx_assessment2 folder as xxx_cse1itx_assessment2.zip when you are ready to submit (below).
Submitting your assignment
When you have completed the website, submit your zip archive via the Assessment 2 Upload link on the LMS system.
8 © Didasko 2020. All rights reserved. 8
Marking guide
Requirement Criteria Points1. Business idea and website
4
implementation.
Good business idea and the website meets its aims and
objectives.
Website consists of HTML and CSS only.
All images in ‘image’ folder and linked properly in HTML
documents.
Website created with a code editors like Notepad++, Atom,
Visual Studio Code, Bracket etc.
2. Presentation and Accessibility 5
Presentation is attractive, well presented, and contemporary throughout
Viewable across multiple browsers.
Website has colour combinations with good colour
contrast, reasonable fonts (sans serif and web safe), and
uses the alt attribute with images to provide alternate text
for screen readers.
The site overall is intuitive and is straightforward to
navigate
3. Quantity and quality of page
5
content
The home page contains a combination of text and images.
Content consists of 4-6 large paragraphs of text or
equivalent with images, tables, and/or other elements.
A table displaying contact hours has been implemented
that displays information clearly and correctly
4. Use of HTML tags 7
HTML code consistently uses lowercase characters for tags and attributes throughout and well indented for code readability.
© Didasko 2020. All rights reserved. 9
No errors and warnings according to W3C HTML
validation service.
In every page:
DocType tag,
,
, , ,
,
, , and
In at least one page:
,
, and
6 of the basic tags (
, , , ,
,
/
)
All pages have a navigation bar (with
) that has links
to the five main pages (all except response.html).
5. Use of CSS 5
CSS code consistently uses lowercase characters for tags and attributes throughout and well indented for code
readability.
CSS styling is applied appropriately for the structure
components of the website (such as positions, height,
width, borders, margins, padding etc.) on all pages.
CSS styling is applied appropriately for the content
components of the website (such as colours, font
attributes etc.) on all pages.
No errors and warnings according to W3C HTML
validation service.
6. Contact form implementation 4
The contact form page has been implemented and contains a correctly implemented form tag with method and action attributes.
The Contact form contains three appropriate form controls (buttons, multiple inputs, checkboxes etc).
Three form control types (of buttons, inputs,
checkboxes) have been appropriately validated
using HTML 5 attributes.
Users taken to the response page with a response message when the form is submitted.
10 © Didasko 2020. All rights reserved. 10
GET ALL YOUR ACADEMIC HELP AT ESSAYLINK.NET
