COS10011 Develop a Simple Static Web Site Assignment

Purpose

This individual assignment will familiarize you with the techniques and skills involved in designing and creating static webpages utilizing validated HTML and CSS created with a standard text editor. You will deploy these Web pages on a Unix / Apache server. This should be done in a way that keeps HTML content and CSS presentation separate, as discussed in the lectures.

No JavaScript to be used in this part of the assignment – we will use JS in Part 2.

Essential Requirements

The Web site you will develop will describe a product/service for sale or hire.

Each student will be allocated a different type of product or service by their tutor.

It is up to you to provide details of the particular product or service and its features.

Your Web site will have the following web pages linked by a common menu:

• An introductory / home page (index.html)
• A product description page (product.html)
• A product enquiry page (enquire.html)
• A page about your assignment (about.html)
• A page that lists any enhancements you have made (enhancements.html)

You will also include

• A CSS file that styles your website (style.css).

The essential requirements for this assignment are listed in the marking guide.

In general the web pages must:

with Title, Meta tags as specified in template (including author) be styled by a validated CSS3 file

• have relevant content
• include the HTML markup specified in the marking guide
• validate to HTML5 without errors
• have a
• be linked to each other via a menu
• be deployed on Mercury.

All web pages in your website should have a consistent layout and navigation. Where “in-house” templates have been defined in this unit (e.g. for meta-data; tables; etc.) these should be followed.

These include accessibility alternatives.

The HTML in your Web pages must validate against the W3C HTML5 validator (http://validator.w3.org/nu) .

Pages should not contain any deprecated elements/attributes (e.g. , ). Do not use iframe elements in your assignment.

Note: Generic structural elements like div or span should only be used where there is no more meaningful HTML5 element (e.g. section) that is appropriate.

1. Introductory home page (index.html)

This page should contain appropriate header and graphic related to your allocated product, and should contain a menu that links to the other pages on your Web site.

This common menu should appear on every page of your website.

2. Product range page (product.html)

Your tutor will allocate you a product type. For example, the product you are allocated might be “restaurant meal”; or “SLR Camera”; or a “university course”.

The page must contain:

• Hierarchically structured headings of at least 2 levels
• More than one
• An with appropriate content
• At least one appropriate image related to your product
• This image should be less 100kb so it does not take too long to load.
• A table containing some data related to your product.
• At least one ordered list
• At least one unordered list
• At least one image

Your web page should describe a small range of products of this type (say 3 or 4). It is up to you to describe the details of the products. The products you describe can be real or imaginary.

The products you describe must have a range of optional features from which the purchaser can select.

For example, a restaurant meal could consist of a range of courses, with dine-in or take-away options etc. A camera might come in a number of models, with options of colours, lenses, etc. You should write at least 150 words on the allocated product and its options. Appropriately structure the content with headings, paragraphs, lists etc. At least one product image must be included.

3. Product enquiry page (enquire.html)

This page has a form where a user can lodge an enquiry about a particular product.

The form will have the following form controls: <!--/p-->

1. First name: type text , maximum of 25 characters, alphabetical only
2. Last name: type text, maximum of 25 characters, alphabetical only
3. Email address: type email
4. Address (group these inputs with a fieldset and label)
   1. Street address: type text, maximum of 40 characters
   2. Suburb/town: type text, maximum of 20 characters
   3. State: use a select list with options VIC,NSW,QLD,NT,WA,SA,TAS,ACT
   4. Postcode: exactly 4 digits
5. Phone number: type text, maximum of 10 digit. Use a placeholder
6. Preferred contact: (email, post, phone). use radio.
7. Product - from the range the user wants to enquire about. use select.
8. Product features: use checkboxes
9. Comment field, for example, allowing the reader to specify particular aspect they are interested in: use textarea, use a placeholder

All inputs should have labels. All form values, except the comment textarea are ‘required’ or have a default value (e.g. select, checkbox, radio). The user should not be able to submit the form if any of these required fields are blank. Use HTML5 validation to check the format.

Are you struggling to keep up with the demands of your academic journey? Don't worry, we've got your back! Exam Question Bank is your trusted partner in achieving academic excellence for all kind of technical and non-technical subjects.

Our comprehensive range of academic services is designed to cater to students at every level. Whether you're a high school student, a college undergraduate, or pursuing advanced studies, we have the expertise and resources to support you.

To connect with expert and ask your query click here Exam Question Bank