Swinburne University of Technology

Faculty of Information and Communication Technologies

Web Development
HIT1091/5091/1091E
The Internet and WWW1
HET113/773
Teaching Period: Semester One, 2011
Due date: 8th April 2011, 12.00 PM
Assignment 1: Contribution to final assessment is: 10%
Purpose of the assignment: It is an individual assignment to familiarise students with the
techniques and skills involved in developing simple webpages utilising validated HTML, validated
XHTML and validated CSS using a standard text editor. Moreover, it is to provide you with an
appreciation in the separation of presentation and structure which has been discussed in the
lecture series. In order to highlight the separation of structure and presentation the assignment is
broken into two sections.

 The first section is the development of a basic validated HTML 4.01 Strict web page.
 The second section is a redevelopment of the basic webpage developed in the first
section but utilising validated CSS and XHTML to extend the structure and presentation
of the web page.

Information in these webpages will be developed by you and contain information that is related to
you and about you. It is hoped from these webpages that we will gain more information about you
and why you are studying at Swinburne University and completing this course: Web development.
There will be six topic areas, listed below.

 Demographic information about you

 Description of hometown
 Why you are doing your course at Swinburne university
 Provide a list of your favourite books, music and films
 Provide your Swinburne timetable
 Google Search box for Swinburne

Please review the example web page in appendix A and use it as guide line to the overall
requirement for the assignment. The overall intention of this assignment is to allow you to show
your skills in building a basic webpages.

Submission Protocol
Before submitting the assignment, please ensure that you have completed or considered the
following:
 Submission via the online submission system (ESP): https://esp.ict.swin.edu.au;
 Check the subject website for announcements;
 Please ensure that you submit before the submission time to avoid automatic penalties; and
 Finally, if you are having trouble is completing the assignment on time and make sure you
contact your tutor before the due date.

Version 0.2
Section One: HTML 4.0 Strict Web Page
`This webpage must be developed using pure structure that is provided through using HTML 4.01
Strict. This page must be constructed only with validated HTML elements. You must not use any
CSS in the development of this page and penalties will apply. Objectives of this section of the
assignment: Demonstrate Web development skills to create good HTM structure. The overview of
the page is outline in appendix A. In developing a solution to section one make sure it is called
html_index.html.

 Page Heading with your name and Assignment One, Web Development
o Under this there should be a menu that has hyperlinks to sections in the page
o Phil Joyce Details  Phil Joyce Details Section on the page,
o Home Town Phil Joyce  Home Town Phil Joyce Section on the page, and so
on.
 Demographic information about you
o Show a suitable heading
o Show the following details about yourself:
 Name
 Student identification number. (Use the abbr element?)
 Swinburne student email address as an email link.
1234567@swin.edu.au
 Authorship declaration. “I declare that this assignment is my individual
work. I have not worked collaboratively nor have I copied from any other
student's work or from any other source.”
o Use appropriate logical markup. Consider using a definition list (dl), blockquote,
abbr or acronym elements etc. (There is more than one way to markup your
details, but you must use logical markup!)
 Description of hometown
o Provide two paragraphs of information about your home town.
o Provide two pictures of your home town.
 Why you are doing your course at Swinburne university
o Provide a paragraph on the course you are currently completing and what you
think it will achieve for you.
 Provide a list of your favourite books, music and films. The top level list is an unordered
list. Books should have an Ordered  Order List. Music should have an Ordered 
Unordered list.
o Books
 Sub category
 Sub Sub category
o Music
 Sub category
 Sub Sub category
o Films
 Sub category
 Provide your Swinburne timetable
o At the top of the table a row should span all columns with your name.
o As a caption you should have the Swinburne Timetable
o Provide a table with a column for every day of the week and a time column
o Provide a row for every hour starting from 8:30 until 21:30 in one hour block
o If the tutorial or lecture goes longer than an hour please span that row
 Search form
o This should be a Google search form that allows you to search the Swinburne
University site for information or the Web. For example web development @
Swinburne.
 text input element for the search words

Version 0.2
  submit input showing the words “Google Search”
 The search must work, so you will need appropriate action, method and
input names
 The search should have radio button control for searching Swinburne or
the Web
 Signature of the page (footer)
o Provide the date of development, date the page was validated and the date the
page was last updated
 Show a link back to the menu (eg “menu” or “top”) after every section.

Assignment requirements
The final HTML page must be of a very similar structure as to the one shown in the appendix A of
this assignment. You need to create a HTML file called html_index.html. In the assessment
section is an indication of the marking scheme that will be used in this assignment. You will be
awarded marks for completing the tasks outlined in this assignment. Marks are deducted for
failing to use the required coding standards. Please see section Submission of Assignment in
Section Two.

Notes
 If items will be marked according to the quality of implementation – just adding a feature
does not guarantee full marks
 Students are strongly encouraged to use a simple text editor such as notepad and
notepad++, for this assignment as it provides a deeper understanding into the details of
HTML.
 Students who exceed the number of pages/files required will have their marks reduced
 Use of original images is encouraged. Do not use links to images on other websites.
 Do not install illegal software on any computers in the Swinburne labs.

Version 0.2
Marking Scheme:
The following is an indication of the marking scheme used. You will be awarded marks for
completing the demonstration tasks. Marks are deducted for failure to use the required standards.

The section of the assignment is out of 50 marks (subject to moderation).

Section A: Marking Scheme HTML

Demographic information about you 7
Heading, required information, logical markup, Functional Swinburne
mailto links to student ID, Authorship declaration present
Description of hometown 7
Heading, 2 paragraphs, 2 images, information, menu link
Why you are doing your course at Swinburne university 4
Heading, 1 paragraphs, information, menu link
Your favourite books, music and films 7
Heading, 3 levels, 3 list types used, unique content, correctly nested,
menu link
Your Swinburne timetable 7
Heading, table and colour configuration, rowspan, colspan, summary,
caption, class, menu link
Search Form Demonstration 7
Form, fieldset, legend, text input, submit input, method, action, element
names, id, menu link
Footer 4
Required information shown, opt. author details and icons
HTML Structure 7
Comments and overall structure of the Page, Appropriate heading
element(s) used, Logical elements used to structure text.
Sub totals 50

Possible Deductions:
If file html_index.html is not valid HTML 4.01 Strict -15
File contain CSS -50
File contains physical elements -50
Failure to use Swinburne HTML Coding Standards (title, comments, -10
meta etc.)
Failure to follow submission requirements (file/folder names, zip etc.) -10
Not submitted through ESP -50

Version 0.2
Section Two: xHTML 1.0 Strict and CSS Web Page
Purpose of Assignment: An individual assignment to familiarise students with the techniques
and skills involved in developing a web page with validated xHTML 1.0 Strict and validated CSS,
using a standard text editor.

The main focus, in this section of the assignment, is on the use of style sheets. The example
provided at in the appendix B should only be a suggestion of how you could style this
assignment. However, the structure must not change. Everyone is encouraged experiment with
style in any way that pleases you.

Objectives: Demonstrate web development skills required to create valid XHTML pages
including the use of lists, tables, forms, links, images and styled using a valid external cascading
style sheet based on the HTML page from Section One.

Overview
For this section of the assignment you will need to copy the single web page called
html_index.htm that you created in Section A to xhtml_index.html. The single file
xhtml_index.html will be styled with a CSS file called style.css. The xhtml_index.htm file will
demonstrate your ability to create: nested lists, tables, forms, paragraphs, headings, links, divs
etc. The xhtml_index.htm file you create must be valid XHTML 1.0 Strict. So before you start this
next section ensure that your page validates to xHTML 1.0 Strict.

The CSS file that you will create will demonstrate your ability to separate and control presentation
using CSS rules. The CSS file style.css you create must be valid CSS.

 Original Work: This assignment is designed to allow you to demonstrate your web
development abilities and requires you to add your own unique content. Your work should
be different from other students and you will be asked to explain any similarities between
your work and others.

 Individual Tasks: You have been individually allocated specific table configuration and
colours for the table demonstration. See the subject web site for your allocation. Make
sure you do your allocated tasks.

You have to use images in your assignment but prefer that you have created them yourself. If you
use other peoples graphics make sure you cite the image. You may prefer to create your own
images to match the style of your website, using any simple image editing program. Make sure
any images you make are saved in a suitable format for the web (jpeg, gif or png) and are a
suitable size (height and width) for your use. Note: This assignment is about good xHTML and
CSS, not images! You are not marked on the quality of your images, only the qualities of your
HTML markup and CSS, so don’t worry about images too much.

xHTML Structure
Please examine Appendix B for an understanding of the structure that is required. The content of
your xhtml_index.html file needs to be divided into the following sections:
 Heading
 Menu section with links to the other sections in the page
 Demographic information about you: student information section with your details and
authorship declaration
 Description of hometown: demonstration of floated image elements (using CSS) amongst
paragraphs of flowing text.

Version 0.2
  Why you are doing your course at Swinburne university: demonstration of the information
 Provide a list of your favourite books, music and films: demonstration of nested list and
using CSS to change the presentation
 Provide your Swinburne timetable: demonstration of tables, rowspan, colspan, caption,
presented with CSS
 Google Search box for Swinburne: demonstration of a styled search box (linked to
Google)
 Footer section with “created, last updated and validated” page details.

Your xhtml_index.htm file should link to the CSS file style.css (rel=”stylesheet”) and use a title
value that you think is suitable for your style. It is strongly recommended that you work on most of
the HTML structure and content first, then develop the CSS. As you develop your CSS files you
may want to change your HTML slightly, but it is still better to get the HTML content right to start
with. Remember to show a link back to the menu (eg “menu” or “top”) after every section in the
body of the page.

Heading Section (#heading)

 Show two sections of text with the words “Some Heading Information” and “Assignment
1”
 Use CSS positioning to move/overlay one of the sections of text in a noticeable way.
 You can add other “heading” text if you wish that is appropriate for your content.
 Do not use an image that contains the words! Use only CSS positioning for the heading
effect.
 You can use your own image for a background-image if you want. (Optional, not required
– but fun!)
 Use suitable block level logical markup. (h1, div, h2, p ?)

Menu Section (#menu)

 Show a heading of suitable level (2?)
 Display a list (unordered) of links to the different sections of your page. Your link text will
depend on your content (See Order below). For example,
o “Student Details” links to “#details”
o “Home Town information” links to “#home_town_float”
o “My Course at Swinburne” links to “#course”
o “Favourite books, music and films” links to “#listdemo”
o “Student Timetable” links to “#tabledemo”
o “Google Search” links to #formdemo
 Your link href values must be relative – they must not be absolute.
 ie. there should not be “http:” or “file:” anywhere in the href value of your menu links.
 Surround the menu section with a div tag and give it an id value of “menu”.
 Use this id with CSS rule selectors and #menu link use!
Style your menu using either CSS float or CSS positioning to place the menu across the top, or
to place the menu to the right of the page, or styled to show off your CSS skills. You should also
use CSS to change presentation of links when the mouse hovers over them (using CSS “pseudo
class” selectors such as a:hover { ... } etc).

Student Information Section (#details)

 Show a suitable heading
 Show the following details about yourself:
 Name
 Student identification number. (Use the abbr element?)
 Swinburne student email address as an email link. 1234567@swin.edu.au

Version 0.2
  Authorship declaration. “I declare that this assignment is my individual work. I have not
worked collaboratively nor have I copied from any other student's work or from any other
source.”
 Use appropriate logical markup. Consider using a definition list (dl), blockquote, abbr or
acronym elements etc. (There is more than one way to markup your details, but you must
use logical markup!)
 Surround the student information section (heading and details) with a div element that
has an id value of “info” and use this with your CSS rule selectors, and as the menu link
with “#info”.

Home Town information (#home_town_float)

 Provide a suitable heading for your home_town_float demo.
 Create two (2) paragraphs of text (to demonstrate the floated images).
 Provide your own content paragraphs. Talk about your home town from where you live.
 Include among your text two (2) images.
 One image must be floated to the right, the other floated to the left, using CSS
 eg. Give each image an id or class value and create a style rule with the appropriate float
properties and values.
 Show a link back to the menu (eg “menu” or “top”).
 Add a div section around the heading, your paragraphs and images, with an id of
home_town_float and use this with your CSS, and as a menu link.

My Course at Swinburne (“#course)

 Provide a suitable heading for your #course demo.
 Provide your own content paragraphs. Talk about the course your are doing at Swinburne
and why.
 Place an image in this section if you wish.
 Show a link back to the menu (eg “menu” or “top”).

Student Timetable (#listdemo)

 Provide a suitable heading for your listdemo content.
 Provide your own list item content for your Favourite books, music and films
 The top level list is an unordered list. Books should have an Ordered  Order List. Music
should have an Ordered  Unordered list.
 Demonstrate a nested list with three (3) or more levels of nesting. You can have more
levels if you want, but that is up to you.
 You must demonstrate at least three (3) different kinds of list style (a mix of ordered and
unordered). For example: disc, circle, square, upper-alpha, lower-alpha, upper-roman,
lower-roman.
 Note: You may need to set the list image to none for the nested children lists.
 Show a link back to the menu (eg “menu” or “top”).
 Again add a surrounding div with id value of listdemo and use this with your CSS, and as
a menu link.

Table Demonstration (#tabledemo)

 Show a suitable heading
 Create your table based on your current timetable. You will need to use both rowspan
and colspan cell attributes.
 At the top of the table a row should span all columns with your name.
 As a caption you should have the Swinburne Timetable
 Provide a table with a column for every day of the week and a time column

Version 0.2
  Provide a row for every hour starting from 8:30 until 21:30 in one hour block
 If the tutorial or lecture goes longer than an hour please span that row
 Provide one colur for Lectures, One colour for Labs and One colour for tutorials of your
own choosing.
 Your table must contain a caption element styled with CSS.
 Allocate a class to each cell so that they will show the background colour required. (Your
allocated colours)
 Use CSS border, margin and padding properties in the table.
 Show a link back to the menu with the text “menu” or “top” (user navigation feature).
href=”#menu”.
 Surround your heading, table demonstration with a div tag that has an id value of
tabledemo and use this with your CSS rule selectors, and as a menu link.

Search Form Demo (#formdemo)

 Create a search form that will send a query to Google from your page.
 This should be a Google search form that allows you to search the Swinburne University
site for information or the Web. For example web development @ Swinburne.
o text input element for the search words
o submit input showing the words “Google Search”
o The search must work, so you will need appropriate action, method and input
names
o The search should have radio button control for searching Swinburne or the Web
 Your form must include:
o fieldset and legend elements. (The legend is your “heading” in this demo).
o text input element for the search words
o The search must work, so you will need appropriate action, method and input
names.

Footer Section
Footer section with “created, last updated and validated” page details.

Standards
Coding Standards:
 Use the Swinburne HTML Coding Standards. The standards can be downloaded from
the subject web site. Importantly, all pages must have:
o an appropriate title in the head element.
o the required HTML header comments,
o meta elements for the author, the page description and keywords about the page
content.
o ... see the standards for full details!
 Layout and Presentation:
o Use CSS and logical markup.
o Do not use physical markup elements or physical attributes.
o Do not use the <font>, <b>, <u> or <i> elements
o Tables should only be used in the “table” demonstration and nowhere else.
o Use only the external file style.css for your CSS information.
o Do not use inline or embedded style.

 HTML Validation: Your xhtml_index.htm file must be Valid XHTML 1.0 Strict.
o We use the W3C HTML validator located at http://validator.w3.org/ to test your
pages.

Version 0.2
 o Update the comments of your HTML page with the date your page was last
validated.
 CSS Validation: Your style.css file must be Valid CSS.
o We use the W3C CSS validator located at http://jigsaw.w3.org/css-validator/

Tidy is good to help you “Tidy” your HTML, but Tidy is not a full validator, and so should not be
used as your final HTML validation check as it will miss some important errors!

Submission
1. Submission Instructions:
Important – These details are required for the automatic marking process, so be
exact!
 Create a folder called “assign1” for all your assignment files. That is you should have
html_index.html and xhtml_index.html
o Create a sub-folder called “images” and place all images you use in this folder.
o Create a sub-folder called “css” and place css you use in this folder.
o Do not create any other folders.
 Compress the folder “assign1” into a single zip file.
o Do not use rar – only zip will be accepted and processed.
o A rar file will not be marked and will get a mark of zero.
 Do not include any file that is not part of your assignment.
o Remove “thumbs.db” files - please!
 Rename the zip file with the 7 digits of your student ID number.
 eg. Rename “assign1.zip” to “1234567.zip”.
 This is the single file you need to upload through the ESP system.

Further submission instructions will be placed on the BlackBoard Subject Web site only if
required.
 Late penalties are automatically applied (10% per day).
 More than five days late results in a zero (0%) mark.
 Please submit well before the due time to avoid any problems.
 Results from ESP are always provisional and subject to moderation.

Version 0.2
Marking Scheme:
The following is an indication of the marking scheme used. You will be awarded marks for
completing the demonstration tasks. Marks are deducted for failure to use the required
standards. The majority of the marks are for CSS.

The section of the assignment is out of 50 marks (subject to moderation).

Marking Scheme CSS, xHTML

Header 5
2+ lines of text using suitable markup and CSS positioning
Link Menu 6
Heading, required links shown, list, div, CSS,
Demographic information about you 6
Heading, required information, logical markup, menu link, div, CSS
Description of hometown 6
Heading, 2 paragraphs, 2 images, CSS float right and left (via id or
class), menu link, div, CSS.
Why are doing your course at Swinburne university 5
Heading, paragraphs, information, menu link, div, CSS
Your Swinburne timetable 6
Heading, table and colour configuration, rowspan, colspan, summary,
caption, class, menu link, div, CSS.
Search Form Demonstration 6
Form, fieldset, legend, text input, submit input, method, action, element
names, id, appropriate CSS.
Footer 4
Required information shown, opt. author details and icons, CSS.
CSS Structure 6
Comments and overall structure of the CSS and xHTML, Appropriate
heading element(s) used, Logical elements used to structure text. Usage
of CSS Selectors
Sub totals 50
Total

Deductions
If file xhtml_index.htm is not valid XHTML 1.0 Strict -15
If style.css is not valid CSS -15
Failure to use Swinburne HTML Coding Standards (title, comments, -10
meta etc.)
Failure to follow submission requirements (file/folder names, zip etc.) -10
Not submitted through ESP -50
File contains physical elements -50

Version 0.2
APPENDIX A

Version 0.2
 Appendix A: HTML Page

Version 0.2
APPENDIX B

Version 0.2
 Appendix B:
Section Two Web Site

Version 0.2
Version 0.2