Assessment 3
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
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.
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:
The website will have a total of six (6) 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/4. First/second/third 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.
5.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 form 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).
6. 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
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 html , head , and body tags must be included and used correctly on every page.
3. Metadata tags
The title tag and at least one meta metadata tag must be included in the head section of every page.
4. Repeating semantic tags
The HTML semantic tags header , nav , main , and footer must be included and used correctly on every page.
5. Other semantic tags
The HTML semantic tags article , section , and aside must be included and used correctly at least once on any page.
6. Navigation bar
All pages must have a navigation bar (with nav ) 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 link tag within the head element on each page. We are specifically asking for an external style sheet, so do not use 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.
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.: table , and not TABLE or Table .
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
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% handcoded 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.
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_assessment3 (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_assessment3 folder as xxx_cse1itx_assessment3.zip when you are ready to submit (below).
Submitting your assignment
When you have completed the website, submit your zip archive via the Assessment 3 Upload link on the LMS system.
8
Marking guide
Requirement Criteria Points
1. Business idea and website implementation. 5
Good business idea and the website meets its aims and objectives.
Website consists of HTML and CSS only.
Viewable across multiple browsers.
Website created with a code editors like Notepad++, Atom, Visual Studio Code, Bracket etc.
2. Presentation and Accessibility 7
Presentation is attractive, well presented, and contemporary throughout
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 content 5
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 8
HTML code consistently uses lowercase characters for tags and attributes throughout and well indented for code readability.
No errors and warnings according to W3C HTML validation service.
In every page:
• DocType tag,
• html , head , title , meta , body
• header , nav , main , and footer
In at least one page:
• article , section , and aside
• 6 of the basic tags ( p , h , a , img ,
table , ol / ul )
All pages have a navigation bar (with nav ) 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 5
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
GET ANSWERS / LIVE CHAT