UNIVERSITY OF WOLLONGONG

Individual Assignment

CSCI110 ASSIGNMENT 1
HTML & CSS

Table of Contents
List of Figures............................................................................................................. 2
1.

About The Organization........................................................................................ 3

2.

My Assumptions................................................................................................... 3

3.

Page Reasons & Descriptions...............................................................................3

3.1 Page 1: Overview.............................................................................................. 3
3.2 Page 2: Committee Profile................................................................................. 4
3.3 Page 3: Species Description..............................................................................7
3.4 Page 4: Schedule............................................................................................... 9
3.5 Page 5: Boarding School.................................................................................... 9
3.6 Page 6: About The President...........................................................................12
3.7 Page 7: Sign Up Form...................................................................................... 13
3.8 Page 8: Contact Us.......................................................................................... 15

4.

List of CSS used.................................................................................................. 17

5.

List of HTML used............................................................................................... 18

6.

List of images used............................................................................................ 19

7.

List of HTML files................................................................................................ 20

8.

Codes................................................................................................................. 20
8.1 To show the White Rose Society Logo..............................................................20
8.2 To show the link between the different pages.................................................21

9.

List of HTML tags & the pages they are used in.................................................21

10.

List of CSS tags & the pages they are used in.................................................22

11.

An overview of the style and layout of the website........................................23

List of Figures
Figure 1: Overview Page........................................................................................ 4

Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure

2 Committee Profile Page.........................................................................6

3: Species Description Page.....................................................................8
4: Schedule.................................................................................................. 9
5: Boarding School................................................................................... 11
6: About The President............................................................................13
7: Sign Up Form........................................................................................ 14
8: Contact Us............................................................................................. 16
9: List of CSS used....................................................................................17
10: List of HTML used..............................................................................18
11: List of Images used...........................................................................19
12: List of HTML & CSS files....................................................................20
13: Code for WRS logo.............................................................................20
14: Floating box to align logo................................................................21
15: Code for linking other pages...........................................................21
16: List of HTML tags...............................................................................22
17: List of CSS tags.................................................................................. 23
18: CSS code part 1.................................................................................. 24
19: CSS code part 2.................................................................................. 25
20: CSS code part 3.................................................................................. 26
21: Overview of all images used............................................................27

1.About The Organization

The world has 13 different species co-existing on earth,
which includes humans. Different species, or races, tend to
avoid mixing with others, fearing that they will be left out or
be the odd one out. We usually hear many such stories
around us every day.

So what is this organisation for? To help them form a single

community by putting aside their differences and learning to
co-exist with one another.
We also organise large scale projects (e.g. Private school)
and events to help with the cause of the organisation.
Why did we choose the symbol as a white rose? Because
white is the mix of all colours, showing the unity between the
different species. Due to our vibrant nature, we became the
worlds largest peace organisation.
More information can be found on the Overview page in the
website

2.My Assumptions
That I am a UOW bachelors and masters graduate
Have been working in the organisation for over 25 years
already
That many other creatures like vampires and angels co-exist
with humans
I am the current president of the organisation

3.Page Reasons & Descriptions

3.1 Page 1: Overview
o Tells about the overview of the organisation
o Gives us an update on the current plans (in this case,
the boarding school)
o Explains the mission and vision of the organisation
o Explain why the organisation is called White Rose
Society

Figure 1: Overview Page

3.2 Page 2: Committee Profile

o Each species has a leader in charge, and each leader
may or may not have sub roles

o There are 13 committee members, all have a bachelor

and master degree, and have contributed to the
organisation for many years
o This page gives the readers some assurance that the
people who lead the organisation are aware of what is
going on, both internally and externally

Figure 2 Committee Profile Page

3.3 Page 3: Species Description

o Since there might be people who might fear other kinds
of people, this site will let them know on what the other
races can or cannot do, giving them a sense of
knowledge, therefore removing the fear before
approaching them
o This will in turn let them be able to work and live
together
o There can be variations for person to person, but the
ones in the website are the ones everyone of that race
have in common

Figure 3: Species Description Page

3.4 Page 4: Schedule

o This page shows all upcoming events and competitions
organised by the organisation
o The annual cultural convention will be very similar to
the real-world global village
o The inter-species sensory and athletic challenge will be
very similar to the real-world Olympics
o All the events allow cultural exchange and a united
celebration

Figure 4: Schedule
3.5 Page 5: Boarding School
o This is one of the large-scale projects written about in
the overview page

o Usually, the ones who join the organisation are

teenagers or adults, so this helps extend our outreach
to children as well
o We chose the name Kiss of Rose Academy is because
we want to show that every student is looked after by
White Rose Organisation
o To increase bond between students, many steps were
thought of
First was deciding it to be a boarding school, so
that they learn how to live together
Second was putting them into five different
houses, to give them a sense of family and
increasing the bond between them as they
participate in competitions and events together
Thirdly was introducing the two main events of the
academy, the beauty pageant and inter-guild
challenge, even before the opening of the school,
is to show parents and future students that they
have opportunities to show their talents
There is also a freedom of choice in choosing their
curriculum, subjects, CCA and other activities,
allowing them to grow in their own pace as well

Figure 5: Boarding School

3.6 Page 6: About The President

o In this case, this is information about me (which is
made up for the assignment)
o I show my achievements and services related to the
organisation, such as the books written and the
previous role of the magazine editor
o This gives the reader an appeal to join the organisation
to a certain extent as people usually want someone
reliable and capable of leading a large organisation
such as White Rose Society

Figure 6: About The President

3.7 Page 7: Sign Up Form

o A form to allow reader to become a part of the
organisation
o Gives them the option between becoming a member or
a volunteer
o The first step to allow the people to reveal their real
identity

Figure 7: Sign Up Form

3.8 Page 8: Contact Us

o A branch in every continent, shown both in the table,
and in the pictures of the globe
o Each picture in the globe shows a continent, which on
click, brings the user to the map of all the countries in
the organisation
o This will tell them on which the closest branch is for
them
o Readers have three ways to contact us, phone number,
e-mail and the address of the physical location

Figure 8: Contact Us

4.List of CSS used

Figure 9: List of CSS used

5.List of HTML used

Figure 10: List of HTML used

6.List of images used

Figure 11: List of Images used

7.List of HTML files

Figure 12: List of HTML & CSS files

8.Codes
8.1 To show the White Rose Society Logo

Figure 13: Code for WRS logo

Figure 14: Floating box to align logo

8.2 To show the link between the different pages

Figure 15: Code for linking other pages

9.List of HTML tags & the pages they are used in

<a>
<article>
<body>
<br>
<div>
<fieldset>
<h1> to <h6>
<head>
<html>
<img>

All pages
All pages
All pages
All except Description page
All pages
Only Form page
All pages
All pages
All pages
All pages

<input>
<li>
<meta>
<nav>
<option>
<p>
<sup>
<table>
<td>
<th>
<title>
<tr>
<ul>
Figure 16: List of HTML tags

10.
in

Only Form page

All pages
All pages
All pages
Only Form page
All pages
Overview & Schedule page
only
Contact Us, Committee Profile
& Boarding School Only
Contact Us, Committee Profile
& Boarding School Only
Contact Us, Committee Profile
& Boarding School Only
All pages
Contact Us, Committee Profile
& Boarding School Only
All pages

List of CSS tags & the pages they are used

Color
Background
Background-color
Border
Border-left
Clear
Display
Float
Height
Margin
Margin-left
Max-width
Overflow
Padding
Padding-top
Padding-bottom

All pages
All pages
All pages
All pages
All pages
All pages
All pages
Committee Profile only
All pages
All pages
All pages
All pages
All pages
All pages
All pages
All pages

Padding-left
Padding-right
Text-align
Font-size
Border-spacing
Cursor
Figure 17: List of CSS tags

All pages
All pages
All pages
All pages
Contact Us, Committee Profile
& Boarding School Only
All pages

11.
An overview of the style and layout of the
website
The overall background colour and design is the same, to
have a flow when the reader goes from one page to the next,
which includes
o The center-aligned White Rose Society logo, using
floating-box
o The <h1> size (300%), colour (purple) and alignment
(center)
o The <nav>, which have the same unordered list and
margin
o All are within <article>, to have the same inner
background (ivory), border (2px solid purple), padding
(1em) and the overflow (hidden)
o The cursor taken from www.zingerbugimages.com
o Whenever tables are used, the <tr> and <th> style are
also the same
<th> font size (150%) and colour (medium purple)
Next few images are of the CSS Style Sheet

Figure 18: CSS code part 1

Figure 19: CSS code part 2

Figure 20: CSS code part 3

Images are used whenever possible, as readers tend to
remember pictures rather than words, some which include
are
o The White Rose Society logo
o The image of the white rose in the Overview page
o The images of the 13 committee members, trying to
portray an image similar to their character (in this case,
their species)
o The images in species description, where the image of
the strongest point of the species is shown

o The images in the Boarding School page, which has the

school logo and the logos of each of the 5 houses or
guilds
o The image of the president (which is supposed to be me
but chose not to use my real photo)
o The images of the globe in Contact Us page, where on
click, each globe will show the map of the whole
continent, to show the reader which branch is closest to
them

Figure 21: Overview of all images used

The colour combinations and layout, which give the overall
design, include
o The body background is the colour, oldlace, which is a
mild colour
o The div style background is ivory, which is also mild,
but has a contrast to oldlace
o The font colour pf the heading, navigation and table
borders are purple, which gives a dark contrast against
a mild background

o The header in each body is mildpurple, which gives a

colour flow, yet different from the main headings