Objectives:

• At the end of the lesson, the students are expected to:

• Layout pages using CSS properties
• Apply the span and div HTML tags
• Adjust margins and padding
Review
• What are the different image formats that are used in
HTML documents?

• What are the two different ways an image can be used in

HTML documents?
• Use it as background
• Use it to attach photos
Question:
• How can we give more creative emphasis on certain
elements of the Web page?
Page Layout
• Data Tables – tables with data organized into rows and
columns.

• Layout Tables – tables containing data presented thru

hidden tables in such a way that information in a
particular cell does not necessarily imply a relationship
with information in other cells.
CSS Positioning Properties
• Absolute – the element stays in one place. Even if you
resize the browser windows, it will remain in the part of
the page you assigned it to.

Values: Left .absolute

Right {
Top position:absolute;
Bottom top:0;
right:0;
width:200px;
}
CSS Positioning Properties
• Relative – its position depends on other elements. Even if
you resize the browser window, it will not overlap into
other elements.

Values: Left .relative

Right {
Top position:relative;
Bottom top:0;
right:0;
width:200px;
}
CSS Positioning Properties
• static – the default position.

.static
{
position: static;
top:0;
right:0;
width:200px;
}
CSS Positioning Properties
• Fixed – the element stays in place even if you scroll up
or down, left or right. Its position depends on the browser
windows and not on the page itself.

Values: Left .fixed

Right {
Top position: fixed;
Bottom top:0;
}
CSS Positioning Properties
• Float – its position it either to the left or right of another
element, with all the other contents enclosing it.

Values: Left
.left
Right
{
float: left;
top:0;
}
CSS Positioning Properties
• Clear – So that the element will not have any other
contents arount it.

Values: Left
.right
Right
{
Both
clear: right;
top:0;
}
WORKING WITH BOX
MODEL
Box model properties:
• Width
• Height
• Padding
• Border
• Margin
The Box Model