Week 06

In week 6 we had a overall revision of all previous week, including the <figure> tag. We were asked to write a web page in a gallery format containing 9 or more images, using the template given. To position the images in the desire place was a quite a challenging task, but in the end everything was as expected.


<section id="seccao">

<figure class="imagem">
<img src="http://1202236.studentplus.abertay.ac.uk/Week06/cable1.jpg" alt="Ethernet Cable" />
<figcaption>Ethernet Cables</figcaption>
</figure>

<figure class="imagem">
<img src="http://1202236.studentplus.abertay.ac.uk/Week06/cable2.jpg" alt="Earphone Extension Cable" />
<figcaption>Earphone Cables</figcaption>
</figure>

(...)


<figure class="imagem">
<img src="http://1202236.studentplus.abertay.ac.uk/Week06/cable12.jpg" alt="Jumper Cable" />
<figcaption>Car Cables</figcaption>
</figure>

</section>

The HTML file passed in the validator with 0 errors.

http://1202236.studentplus.abertay.ac.uk/Index/Index.html      ----   Index

http://1202236.studentplus.abertay.ac.uk/Week06/MovicelGallery.html      -----   Week 06

Week 05

In this week, we basically learned how to position things instead of the default way of top to bottom. Is very useful to make our aside or to put an image in the left of the web page as a logo. the "text-alignment" tag is also very useful, as it allowed me to put the tittle in the middle of the page instead of being on the standard left side. This week, I almost did not change the actual HTML file, since the CSS positioning relies mostly on the style sheet.

here is some of the new code I used in the style sheet to improve the web page:


#cabeca img    { width: 194.1px;
                          height: 140.1px;
                          float: left;}

(...)

#cabeca h1     { color: #004C67 ;
                         font-family: "Comic", cursive, sans;
                         text-align: center;}
(...)

#rodape1        { background-color: #A7E8FF ;
                          color : #004C67 ;
                          margin : auto ;
                          margin-top: 20px;
                          border : 2px solid #004C67 ;
                          border-radius: 10px;
                          width : 97.25%%;
                          padding : 10px ;
                          font-family: "Comic", cursive, sans;
                          float: left;}



I forgot to mention in last week's post, that I am using some strange id's for the HTML tags, like "cabeca", "rodape", or "lado". These are Portuguese words, because I find a little hard to come up with a good id for <header> besides "header" or "heading", so I tried to translate it into Portuguese, my main language.

This is the translation:
Cabeça = head
Navegação = navigation
Secção = section
Rodapé = footer
Lado = side
I hope there is no problem with these id's.

The aside was very troublesome. In the beginning, I set the width of the Contacts box to 97.5% to match the other boxes in the right end of the page, and I put: "float: right;" to make the box go right. When I tested it on my Opera browser, everything was fine, as shown in the picture, until I tested it in my friend's browser (Google chrome). In his computer, the browser completely ignored the "float: right" tag. I took some hours to discover that all browsers, except Opera, will ignore the float: when we define a specific width. I just had to delete the width in the contacts box to make it work in all other browsers, including mobile phones.



#lado        { background-color: #A7E8FF ;
                   color : #004C67 ;
                   margin-top: 20px;
                   border : 2px solid #004C67 ;
                   border-radius: 10px;
                   padding : 10px ;
                   /* width: 97.5%; */
                   font-family: "Comic", cursive, sans;
                   float: right;}



The HTML file has passed with no Errors in the validator.


http://1202236.studentplus.abertay.ac.uk/Week05/Movicel2.html

Week 04

In this week we learned how to structure our web page using some HTML5 new tags, like:
<header> ; <footer> ; <aside> ; <section> ; <article> ; <figure> and <navigation>.
We were asked to structure our web page using some of these tags so we can have more control over where to put things and divide the web page in logical sections.

These are just some of the tags that I used in my code:

<header id="cabeca">

<img src="blue.jpg" alt="movicel logo"/>

<h1>Movicel</h1>

<h2>Closer to you</h2>

</header>

(...)

<nav id="navegacao">

<a href="http://movicel.co.ao">Mobile phones</a>
<a href="http://movicel.co.ao">Computers</a>
<a href="http://movicel.co.ao">Tablets</a>
<a href="http://movicel.co.ao">Hard Drives</a>
<a href="http://movicel.co.ao">Cables</a>

</nav>

(...)

<section id="seccao">

<p>Movicel is a world-wide company that has set its goals in selling the best technological articles currently avaiable in the market
This page is still under construction, but we promise that in the future, you will be able to purchase, pre-order, or just have a look at our top quality products.</p>

</section>

(...)


And here is some parts of my style sheet:



#cabeca{    background-color: #A7E8FF ;
                  margin : auto ;
                  padding: 10px;
                  border-radius: 10px;
                  border : 2px solid #004C67 ;
                  color : #004C67 ;}

#cabeca img{      width: 194.1px;
                           height: 140.1px;}

#cabeca h1{        color: #004C67 ;
                           font-family: "Comic", cursive, sans;}

#cabeca h2{        color: #004C67 ;
                           font-family: "Comic", cursive, sans;}

(...)

#navegacao{       font-family: "Comic", cursive, sans;
                           background-color: #A7E8FF ;
                           margin : auto ;
                           margin-top: 10px;
                           padding: 10px;
                           border-radius: 10px;
                           border : 2px solid #004C67 ;
                           color : #004C67 ;
                           width : 98.1%;}

#navegacao a:link {        color:#004C67;
                                      padding: 0 20px;}
#navegacao a:visited {    color:#004C67;
                                      padding: 0 20px;}
#navegacao a:hover {     color:#FF0000 ;
                                      padding: 0 20px;}
#navegacao a:active {     color:#E24D08;
                                      padding: 0 20px;}

(...)


The content of the web page is quite poor because I focused more on playing with the style sheet and choosing the colors for the background, borders and text. Initially, it was red, and then green, but in the end I decided to go for the blue style. The structure of it is from top to bottom, but I hope next week I can learn how to move things to the sides and how to move the text and images to put them side by side, like I planned with my heading:

Once again, the HTML file passed in the validator with 0 Errors.

http://1202236.studentplus.abertay.ac.uk/Week04/Movicel.html

Week 03

In this week, we are starting to style our web pages using CSS3. So far we have learned simple styling techniques as changing the font, moving the text to left middle or right, or changing the colour of the background. We also started to use the <div> tag, which allowed us to style our pages much easier and with control of what chunk we are styling.
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.

Week 02

In this week, more tags were used to write a page about my interests, being the most significant one, the <table> tag, along with the <th>, <tr> and <td>. In this page, the topic was "Table Tennis" or, as it is commonly called: "Ping-Pong".
I have described quite shortly some history and used the <table> tag to describe the ping-pong table dimensions, it seemed appropriate.

My code is the following:



<!doctype html>
<html>
<head>
 <title>Table Tennis</title>
 <meta charset="utf-8" />
</head>
<body>
<h1>Table tennis</h1>
<img src="TableTennis.jpg" alt="TableTennis" width="100" height="100"/>
<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 receive as they have the opportunity to inspect each others rackets before a match.</p>
<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>
<h2>References</h2>
<ul><li><a href="http://en.wikipedia.org/wiki/Table_tennis">Wikipedia</a></li></ul>
</Body>
</html>


Once again, this code is quite simple and the topic is not fully explored, but, all the tags were used once again and the code works properly in the 5 browsers given. Important to notice that the validator evaluated this code with 0 errors. A print screen is below: