STATIC WEB SITES ASSIGNMENT 1Philip Lemmon

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.

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.

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

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.

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 -->

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>

WHAT WEB BROWSERS DOES IT WORK WITH? FIREFOX

WHAT WEB BROWSERS DOES IT WORK WITH? GOOGLE CHROME

WHAT WEB BROWSERS DOES IT WORK WITH?OPERA

WHAT WEB BROWSERS DOES IT WORK WITH?INTERNET EXPLORER

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.

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.

GRID TABLE CSStable.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;

}

GRID TABLE CSS WITH BREAK-DOWN

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.

CHANGE TO CSS

NEW COLOURS IN CSS TABLE

BORDERS AND WIDTH

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

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.

TABLE WITH ALTERED BORDERS

DOES MY CSS WORK WITH OTHER WEB BROWSERS?

I also wrote CSS for the rest of my web page to tidy up the styling.

WHAT WEB BROWSERS DOES IT WORK WITH? FIREFOX

WHAT WEB BROWSERS DOES IT WORK WITH? CHROME

WHAT WEB BROWSERS DOES IT WORK WITH? OPERA

WHAT WEB BROWSERS DOES IT WORK WITH? INTERNET EXPLORER