Laboratory four: Website Layout

Purpose
The purpose of this lab is to show how the features of HTML and CSS can be used to create
website layout using the div tag.

Resources
Resources consisting of text files and images that support the exercises will be made
available for the lab (see the resources folder).

Solutions
Full solutions to all the exercises for this lab will be made available three days after the lab.

Introduction
Most websites have put their content in multiple columns (formatted like a magazine or
newspaper). Multiple columns are created by using <div> or <table> elements. CSS are used
to position elements, or to create backgrounds or colourful look for the pages Even though it
is possible to create nice layouts with HTML tables, tables were designed for presenting
tabular data - NOT as a layout tool. The div element is a block level element used for
grouping HTML elements. The following example uses five div elements to create a multiple
column layout:

Example
Result in webpage

The example shows how to create website layout using the div tags. Using the example above
as a guide different website layouts can be created for different purpose.

Exercises

Create a web page with the name “funfruit.html”. Use HTML, CSS and div tags to get the
desired effects (see the image at the end for a view of what your result should look like):

1) The background colour of the body should be black, in the body of the document create a
div tag with style="width:940px; height:700; color:white; margin-left:20px; margin-
top:10px;".
2) Next insert another div tag inside the first div tag with style="width:920px; height:700;
color:white; margin-left:20px; margin-top:10px" align="left".
3) Create a div tag with style=" width:400px; height:40; color:white;”. Inside this div tag
insert H1 tag with the text “home Page”.
4) Create a div tag with style="width:350px; height:100; color:white; float:left;". Inside this
div tag insert H2 tag with the text “Fun Fruit Cloth Weights”. Then add the image
“cloth_weights.jpg” from the resource folder, the image width should be 350px with
border 0.
5) Create a div tag with style="width:400px; height:100; color:white; float:right; line-
height:20px;". Inside this div tag, add 6 paragraph tags all justify aligned.
a) The first paragraph should contain the text “Colourful fruit-shaped weights which are
clipped to tablecloths to stop them crumpling or blowing away in the wind.”
b) The second paragraph should contain the text “In packs of four of the same fruit:”
c) Insert an unordered list in the third paragraph. The list should contain the following:
 Cherry
 Grape
 Lemon
 Orange
d) The fourth paragraph should contain the text “J264 Tablecloth Weights £6.95”.
e) The fifth paragraph should contain the text “J265 Two packs of Tablecloth Weights
£11.90 SAVE £2”.
f) The sixth paragraph should contain the text “* fruit cloth weights are not edible and
may be harmful if swallowed”.
6) Create a div tag with style="width:350px; height:200; color:white; float:left; margin-
top:170;". Inside this div tag insert the following:
a) A div tag aligned left with style="vertical-align:top;". Then insert H2 with text
“Order Form”.
b) A div tag aligned left with style="vertical-align:top;". Then insert a form. Inside the
form, insert a table with width="100%" border="0" cellspacing="2" cellpadding="2".
Inside the table insert 6 TR with 2 TD each

In the first TR the first TD should be with width="20%" and contain the text “Name”
and the second TD should be with width="80%" and contain an input field with
type="text" name="cusname".

In the second TR the first TD should be with width="20%" and contain the text
“Address” and the second TD should be with width="80%" and contain an input field
with type="text" name="address".

In the third TR the first TD should be with width="20%" and contain the text
“Quantity” and the second TD should be with width="80%" and contain an input
field with type="text" name="quantity" id="quantity" size="5" maxlength="2".

In the forth TR the first TD should be with width="20%" and contain the text
“Colour” and the second TD should be with width="80%" and contain an input field
with a drop down list to select “cherry, grape lemon or orange”
 In the fifth TR the first TD should be with width="20%" and contain an input field
with type="button" name="Total" value="Total", and the second TD should be with
width="80%" should contain an a div tag with style=" color:#FFFFFF" and text
“&euro; 0.00”, then an input field with type="hidden" name="totalval"

In the sixth TR the first TD should be with width="20%" and contain an input field
with type="submit" name="submit" value="Submit". The second TD should be
empty

The result should look like the image below