COS60004 Creating Web Applications - Assignment 1 - Develop a simple static website

Purpose of the assignment 

This individual assignment will familiarise you with the techniques and  skills  involved  in  designing and creating static webpages  utilising  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 is to be used in this part of the assignment – we will use JS in Part 2.
The essential requirements for this assignment are listed in the marking guide. In general the web pages must:

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


An IT company wants to develop a website that will enable it to advertise vacant positions. These have a ‘position description’ that sets out the qualifications, skills and knowledge required. Potential applicants for the position will be able to submit an online form to apply for a position.    
In this assignment you will develop a prototype of this website. The website you develop will consist of the following Web pages, accessible from a common menu on each page:  

  • Home page with details of the company (index.html)
  • A page of job descriptions (jobs.html)
  • A job application page (apply.html)
  • A page with your personal details (about.html)
  • A page which lists any enhancements  you have made (enhancements.html)

You will also include

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

Content and presentation of Web Pages

HTML Elements

The website must be developed using HTML5 to describe the content and logical structure.  Web pages should not contain any deprecated elements/attributes.

The following HTML elements must be used in this assignment

• General

      - Comment, Head, Title, Meta, Body As appropriate to each page

• Structure 

       - Header, Navigation, Footer, Section, Aside  Used in most pages

• Content

         - Heading levels, Paragraph

        - Ordered list, Unordered list, Definition list, Table, Image and Anchors

        - Other elements as detailed in the page requirements shown below 

        - A Form, with labelled and grouped form control elements which validate user input

Where “in-house” templates have been defined in this unit (e.g. for meta-data; tables; etc.) these should be followed.

All Web pages should have a consistent layout and navigation.  The HTML in your Web pages must validate against the W3C HTML5 validator .   

Accessibility guidelines should be followed, especially for media, tables and forms.

Elements such as block quotes, strong, emphasis, among others can be used, if deemed necessary and appropriate for the content.

Generic structural elements like div or span should only be used where there is not a more appropriate or meaningful HTML5 element (e.g. section or strong). 

Pages should not contain any deprecated elements/attributes (e.g. <i> , <b>). 

Do not use iframe elements in your assignment.

1. Home page (index.html)

This page should contain appropriate title, a description  and graphic related to the company. It is up to you to make up the details of the company that is advertising the jobs. It should contain a menu that links to the other pages on your Web site. This same menu should be in every page of your website with an email link to your student email.
2. Position Descriptions page (jobs.html) 

You need to write a web page with at least 2 position descriptions. For one of these your tutor will allocate you a job title from the IT industry. For the second position, the choice of IT job type is entirely up to you. Why not write a position for the ideal job you would like to do? Be as imaginative as you like.  
The HTML on this page must contain:

• Hierarchically structured headings of at least 2 levels

• More than one <section>

• An <aside> with appropriate content 

• At least one ordered list

• At least one unordered list

• The page should also have an appropriate footer.
Your job descriptions should be concise but as a minimum include :

• Company’s position description reference number (5  alphanumeric characters)

• Position title 

• Brief description of the position

• Salary range

• The title of the position to whom the successful applicant will report 

• Key responsibilities.  A  list of the specific tasks that are to be performed

• Required qualifications, skills, knowledge and attributes. These should be divided into “essential” and “preferable”. These requirements should include such things as programming languages required, number-of-years of experience required, etc..   The content of the job description should be appropriately structured with headings, sections, subsections, lists etc. using the appropriate HTML elements.  
Sources / References:

• You can use material from other websites but the source of all material must be acknowledged. This acknowledgement should be immediately after the material and include a hyperlinked URL to the original source. The text of the hyperlink reference can be a short name but the hyperlink must work.

• If you are unsure of what is contained in a position description there are many resources on the web.   

3. Job application page (apply.html)

This page has a form that allows a potential candidate to register their interest in the advertised position.  HTML5 data validation should be used to check the user’s input.

4. A page about you (about.html)

It could also include personal profile, such as resume, interests, or information that is related to you. This extra information gives you an opportunity to extend the techniques you apply in your assignment, and could include:

• Demographic information about you

• Description of hometown

• A list of your favourite books, music, films etc.

Order Now