My web page is basically the same as the one in week 2, or at least the information displayed. The only change I made was styling it a bit.
<!doctype html>
<html>
<head>
<title>Table Tennis</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style3.css" />
</head>
<body>
<div id="intro" >
<h1>Table tennis</h1>
<img src="TableTennis.jpg" alt="TableTennis" width="200" height="200"/>
<p>Table tennis originated in Britain around 1880's as a high-class game, played with books as net and as rackets and with a golf ball. As the years passed, this sport grew in popularity and in 1988 was considered an Olympic sport in the 1988 Olympics in South Korea.</p>
<p>The ball has to weight about 2.7 grams, and have the exact diameter of 40 mm to follow the International Table Tennis Federation rules. It also has to bounce up between 24 to 26 cm when dropped on a steel block from a 30.5 cm height, meaning that its coefficient of restitution is about 0.89 to 0.92. The rackets do not have much restricted rules, as long as at least 85% of it is made of wood, and it has two different sides, each one coloured in red and black. This allows the opponent to know what type of hit is going to recieve as they have the opportunity to inspect eachothers rackets before a match.</p>
</div>
<div id="table" >
<h2>Table information</h2>
<table>
<tr>
<th>Lenght</th>
<th>Width</th>
<th>Height</th>
<th>Net Height</th>
</tr>
<tr>
<td>2.74 m</td>
<td>1.52 m</td>
<td>0.76 m</td>
<td>0.15 m</td>
</tr>
</table>
</div>
<div id="references" >
<h2>References</h2>
<ul><li><a href="http://en.wikipedia.org/wiki/Table_tennis">Wikipedia</a></li></ul>
</div>
</Body>
</html>
And here is the style code:
body {
background-color: #E1EDFF;
text-align : left ;
font-family: Comic Sans, arial, helvetica, sans-serif ;
color: #02456D;
font-size : 1.0em ;
}
h1 {
font-size : 2em ;
font-family: Comic Sans, arial, helvetica, sans-serif ;
font-weight : bold ;
text-align : center ;
}
h2 {
font-size : 1.8em ;
font-family: Comic Sans, arial, helvetica, sans-serif ;
font-weight : bold ;
text-align : center ;
}
a { text-decoration: none; }
td,th { vertical-align : bottom ; }
#intro
{
background-color: #E1FFE3 ;
margin : 20px ;
border : 3px solid #000000 ;
border-radius : 20px ;
padding : 10px ;
width : 100%;
color : #057B05 ;
}
#table
{
background-color: #E1FFE3 ;
margin : 20px ;
border : 3px solid #000000 ;
border-radius : 20px ;
padding : 10px ;
width : 100%;
color : #057B05 ;
}
#references
{
background-color: #E1FFE3 ;
margin : 20px ;
border : 3px solid #000000 ;
border-radius : 20px ;
padding : 10px ;
width : 100%;
font-size : 1.0em ;
color : #057B05 ;
}
#references a:link {color:#2E54FF;}
#references a:visited {color:#2E54FF;}
#references a:hover {color:#FF1E1E ;
text-decoration : bold ; }
#references a:active {color:#FF1E1E;}
It is a very simple styling, using the template given on the lecture, but I didn't want to put to much styling for now. I had some problems with the size of the page, as the browsers I tested, could not display the page completely in the screen, and I need to use the bottom scroll bar to see the right part of the web page, but besides that, everything is as expected. I keep changing the values and see how each one affects the page, the colours I got them from the web site given in the lecture and, once again, as expected, the page does not have errors.
+screen+shot.PNG)
No comments:
Post a Comment