1. STATIC WEB SITES ASSIGNMENT 1
Philip Lemmon

2. WHY AND WHAT AM HAVE I CREATED!?
 I am creating a slide show presentation for my static website
assignment.
 I have decided to use html5 to code in because it:
 - Makes sites more accessible
 - Has video and audio support
 - Works with mobile browsers
 - Clean and easy to read code
 - Works on all popular browsers
 - Has a simple DTD which goes at the start of the code.

3. THIS IS THE BASIC STRUCTURE OF MY HTML5 DOCUMENT.
YOU CAN SEE I HAVE USED THE BASIC ELEMENTS OF HTML5 AND
COMMENTED MY CODE SO IT IS EASIER TO READ.

4. BUT AS YOU CAN SEE, MY PAGE STILL HAS NO STYLE.

5. TABLE
 The element I have chosen to focus on is a table.
A table is used so that data can be well defined and
seen clearly.
 The type of table I have decided to include in my
website is a grid table.

6. HOW TO CODE A GRID TABLE
To code a grid table is very simple as you can see below (anything after
“<-- ” is a comment:
<table class="gridtable"> <-- Defines the table class -->
<tr> -- defines table row
<th>Strength</th><th>Agility</th><th>Intelligence</th> <--
<th> and </th> start and end table header cells -->
</tr> <-- ends table row -->
<tr>
<td>Sven</td><td>Sniper</td><td>Zues</td> <--
<td> and </td> start and end basic table cells -->
</tr>
<tr>
<td>Pudge</td><td>Viper</td><td>Pugna</td>
</tr>
</table> <-- Ends table -->

7. WITHOUT COMMENTS IT LOOKS LIKE THIS
<table class="gridtable">
<tr>
<th>Strength</th><th>Agility</th><th>Intelligence</th>
</tr>
<tr>
<td>Sven</td><td>Sniper</td><td>Zues</td>
</tr>
<tr>
<td>Pudge</td><td>Viper</td><td>Pugna</td>
</tr>
</table>

8. WHAT WEB BROWSERS DOES IT WORK
WITH? FIREFOX

9. WHAT WEB BROWSERS DOES IT WORK
WITH?
GOOGLE CHROME

10. WHAT WEB BROWSERS DOES IT WORK
WITH?
OPERA

11. WHAT WEB BROWSERS DOES IT WORK
WITH?
INTERNET EXPLORER

12. CODE WORKS AS EXPECTED
As you can see the code for the website works as
expected.
The table has no outlines/cells that you can see
visibly yet because I have not yet added the style
sheet.

13. GRID TABLE CSS
I have decided to make to style the table within the
CSS. Without the CSS the table does not have
visible cells or header cells dividing the information.
When the CSS sheet is complete, I will be able to
change the colour, size and border of the cells. I
will also be able to change the font, colour and size
of the text that I use.

14. GRID TABLE CSS
table.gridtable {
font-family: Impact, Charcoal, sans-serif;
font-size:20px;
color:#336666;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}

15. GRID TABLE CSS WITH BREAK-DOWN

16. WHAT TABLE NOW LOOKS LIKE WITH CSS
The colours are still a bit boring, so I will alter my
CSS to change it to something a bit more exciting.

17. CHANGE TO CSS

18. NEW COLOURS IN CSS TABLE

19. BORDERS AND WIDTH
Now the colours look good, I will now demonstrate how to alter the
size of the table using the CSS code.

20. The code is altered to make the space around the text larger and
the border thicker.
I gave the header cells more space so they stood out a bit more.

21. TABLE WITH ALTERED BORDERS

22. DOES MY CSS WORK WITH OTHER WEB
BROWSERS?
I also wrote CSS for the rest of my web page to tidy
up the styling.

23. WHAT WEB BROWSERS DOES IT WORK
WITH? FIREFOX

24. WHAT WEB BROWSERS DOES IT WORK
WITH? CHROME

25. WHAT WEB BROWSERS DOES IT WORK
WITH? OPERA

26. WHAT WEB BROWSERS DOES IT WORK
WITH? INTERNET EXPLORER