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