Static websites

STATIC WEBSITES
ASSIGNMENT 1

MY ELEMENT: THE TABLE

The Oxford Dictionary Defines a table as “a set of
facts or figures systematically displayed, especially in
columns”
It is often utilised to demonstrate a relationship
between different data types. In my assignment, I
have used a table to represent a hypothetical set of
grades that Albert Einstein could have received at
school.


Below Is the table that I have used on my page. It
consists of a heading, two rows and five columns.


You can see that my table efficiently depicts the
relationship between the four different sets of marks
Einstein received, and the four subjects he was
enrolled in.
A table and this inherent efficiency, saves the author
space on the screen, and increases the amount of
information that can be displayed on one page.

CSS USABILITY

I have made two key format decisions inside my CSS
that has greatly improved usability.
The first is the interior spacing within the table itself. It is
described by these five lines of code:

tr,td{
padding:5px;
padding:5px;
padding:5px;
padding:5px;}

CSS USABILITY
With Code:

Without Code:

When these two approaches are compared, you can
see how this small tweak vastly improves readability.

CSS USABILITY

The second key format decision I made was the use of
colour on my page.
I picked 3 complementary colours to form my colour
scheme. They are as follows:

#8D8D8D
#C4C4C4
#404040

CSS USABILITY

The image below demonstrates this colour scheme
visually:

This scheme was chosen for its subtlety, but also to
help define the 3 specific areas of the page.
Additionally, it does not conflict with the black text.

USE IN DIFFERENT BROWSERS:
GOOGLE CHROME

OPERA

INTERNET EXPLORER

MOZILLA FIREFOX

CSS APPLICATION

CSS can be used in conjunction with the Table
element to create a diverse range of results. In
addition to its broad range of functionality, in can be
applied differently, with the use off the different CSS
Styles. This is demonstrated in the following slides.
Examples have been reproduced from:
http://www.w3schools.com

CSS APPLICATION:
INTERNAL STYLE SHEET

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {backgroundimage:url("images/back40.gif");}
</style>
</head>

CSS APPLICATION:
INLINE STYLE

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

NOTES ON CSS APPLICATION OPTIONS

The external style sheet approach is ideal. This
methodology clearly separates the context of “Style”
and “Content”
Other options complicate development, and
heighten the risk of syntax errors occurring during the
coding process.

Static websites

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (6)

Ähnlich wie Static websites

Ähnlich wie Static websites (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Static websites