TD4 Web

Inspiré du cours de Mr Rey Gaëtan

Voici un schéma exemple de découpage d'une page HTML5.

Nous nous proposons à présent de créer une section de type blog sur votre site web en utilisant ces balises. Pour cela vous vous aiderez de l'exemple suivant et des informations données dans les rubriques ci après.

Plus d'infos sur les différentes balises html utilisées :

• http://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html

En savoir plus

Par exemple,

list-style: none;

Ce style supprime les puces et est utilisé pour structurer la barre de navigation.

Pour placer les élément de la liste sous la forme d'un menu horizontal :

display:inline-block;

Vous pourrez par la suite utiliser les informations se trouvant sur http://deptinfo.unice.fr/~renevier/exemplesCSS/ pour construire par exemple la barre de menu.

Nous utiliserons le positionnement flottant.

Les CSS sont en effet conçues pour afficher les éléments au sein d'un flux : pour simplifier, les éléments en ligne, ou inline, sont affichés les uns à la suite des autres, tandis que les éléments conteneurs, ou block, amènent un retour à la ligne après leur affichage.

Quelques éléments sur les flux et le positionnement relatif :

• http://openweb.eu.org/articles/initiation_flux/

Le positionnement flottant permet de sortir un élément du flux, en cela que l'on peut préciser si l'élément ciblé, par exemple une image ou une colonne de contenu, s'affiche à gauche ou à droite.

float:left; /*Positionnement d'un élément à gauche de la page*/
float:right; /*Positionnement d'un élément à droite de la page*/

Le positionnement flottant s'adapte au contenu et par défaut prend toute la largeur disponible.

Comprendre les float :

• http://openweb.eu.org/articles/initiation_float/

Pour restreindre sa largeur il est possible de donner une taille à l'élément:

width:500px; /*taille fixe en pixels*/
width:50%; /*taille adaptable en pourcentage, 50% de l'espace disponible*/

Vous noterez que dans un positionnement flottant les éléments se positionnent à l'endroit ou il reste de la place disponible ce qui peut provoquer parfois des agencements hasardeux.

clear a été conçue pour préciser que cet élément ne sera pas influencé par le comportement d'un flottant. clear permet de libérer l'élément de l'influence du flottant.

clear: both; /* ou right ou left pour libérer l'influence du float uniquement d'un côté*/

Elements supplémentaires sur les positions fixes et absolues :

• http://openweb.eu.org/articles/initiation_absolue/

Pour en savoir plus sur les possibilités de positionnement vous pourrez voir :

• http://www.alsacreations.com/article/lire/533-initiation-au-positionnement-en-css-partie-1.html
• http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html
• http://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html
• http://www.alsacreations.com/tuto/lire/610-Mise-en-page-CSS-avancee-grace-a-la-propriete-display.html
• Affichage relatif des éléments (bien regarder tous les exemples...
• Placer en dessous (clear)

Il est possible de définir des marges en css:

- les marges autour de l'élément : margin

- les marges à l'intérieur de l'élément : padding

   margin:10px; /* marge de 10 pixels tout autour de l'élément*/
   margin:1%; /*marge de 1% tout autour de l'élément*/
   margin: 5px 6px 7px 8px; /*dans l'ordre : top right bottom left*/
   margin-left:10px;
   padding: 10px;
   padding: 5px 6px 7px 8px;

Quand on passe la souris sur un article, le fond change de couleur :

li:hover{
    /* attributs css */
}

http://www.w3schools.com/cssref/sel_hover.asp

http://www.w3schools.com/cssref/pr_text_text-align.asp

En utilisant les balises HTML 5 article et aside créer la liste des articles de votre blog.

Un article étant caractérisé par : - un titre - une date - un texte - un visuel éventuel

En savoir plus.

Soit le code d'une page contenant une iFrame.

<iframe src="iframe0.htm" id="iframe_0"></iframe>
<p><a href="http://www.w3schools.com" target="iframe_0">W3Schools.com</a></p>
 
<p><b>Note:</b> Parce que la cible du lien correspond au nom de l'Iframe, le lien s'ouvrira dans l'Iframe.</p>

pour le fichier iframe0.htm, par exemple :

<body style="background-color:#F5DEB3">
<h1>Cette page sera  visualisée dans l'IFRAME </h1>
</body>

Voici un exemple classique de code, produit par google map :

<iframe width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.fr/?ie=UTF8&amp;t=h&amp;ll=43.552529,6.987305&amp;spn=0.955471,1.757813&amp;z=9&amp;output=embed"></iframe><br /><small><a href="https://maps.google.fr/?ie=UTF8&amp;t=h&amp;ll=43.552529,6.987305&amp;spn=0.955471,1.757813&amp;z=9&amp;source=embed" style="color:#0000FF;text-align:left">Agrandir le plan</a></small>

Mais ce format n'est pas valide en html5.