Atelier 18 Octobre 2010
Fil Conducteur

En préambule, dans la feuille de style externe, nous ajouterons à la class .Boites, la propriété padding:20px.

Mise au point sur les dimensions des éléments block

Correctif par rapport à la bêtise que j'ai dite la semaine dernière, on peux bien sûr attribuer des valeurs négatives aux margin mais pas aux padding.

Josette avait donc raison, justice lui soit rendue!

APPLICATION : padding et margin Créons une <div> class="Boites". Dans cette <div> plaçons un élément <p> class="Bloc. Dans la feuille de style, avec deux slash, nous neutraliserons la propriété width de .Bloc.

Maintenant attribuons en ligne à <p> class="Bloc la propriété margin:-20px, ce qui annule les padding de <div> class="Boites".

Centrage horizontal des éléments html

Cette technique de centrage est adapté aux éléments positionnés dans le flux courant. Elle permet de centrer tout bloc dans son conteneur en attribuant à ses marges gauche et droite la valeur "auto".
Pour que cela fonctionne il est indispensable de préciser la largeur du bloc à centrer.

APPLICATION : Dans le code html, sous les <div> précédentes, ouvrez une <div> class .Boites dans laquelle nous placerons 1 élément <p > class : Bloc. Dans la feuille de style, attribuons à .Bloc. une largeur width de 1000px.

Par l'attribut style en ligne, on donnera à cet élément des marges verticales de 20px et des marges horizontales "auto", ceci pourrait s'écrire

soit dans sa forme condensée : margin:20px auto;

L'élément <img />

L'élément <img /> est un élément inline dit remplacé, ce qui signifie que :

Le lien vers l'image d'origine se fait par l'attribut src="......" dont la valeur est l'url de cette image.

Par défaut l'élément <img /> adopte les dimensions de l'image d'origine, mais on peut ajuster ces dimensions à la page en jouant sur width ou height, une seule de ces propriétés suffit, l'image conservant ces proportions d'origine. On peut aussi déformer l'image en attribuant à width et à height des proportions différentes de celles de l'image d'origine.

Attention toutefois, une grande image très réduite conserve son poids en pixels, une petite image très agrandie perd de la définition.

APPLICATION : Dans le code html, créons une <div> class="Boites" dans laquelle nous placerons un titre <h2> "La balise <img />", puis un élément <p> auquel nous attribuerons en ligne la propriété : border:2px solid #f00.
Dans cet élément <p> nous copierons le texte du fichier CanyonsSousMarins.txt, dans lequel nous insèrerons au petit bonheur, trois images et leurs propriétés en ligne :

  1. src="Images/VChapon.jpg" style=""width:90px;"
  2. src="Images/VEspets.jpg" style=""height:120px; margin:0 30px;"
  3. src="Images/VMurene.jpg" style=" width:160px; margin:30px;padding:20px;border:5px solid #0f0"

Intégrer une icône dans l'onglet de la page

L'icône est appelée par la meta-balise <link/> placée dans la partie <head>. Dans ce cas, les attributs de <link/> (qui rappelons-le peut également être uilisée pour établir d'autres types de liens) sont :

APPLICATION : Placer dans la partie <head> de la page la meta-balise <link/> avec ses attributs décrits plus haut. Nous ferons un essai :

Le stylage des arrière-plans

L'arrière-plan, background dans la langue de Bill Gates, peut se voir attribuer quatre propriétés :

L'ensemble de ces propriétés peut s'écrire de façon condensée : background : url(.......) no-repeat xpx ypx #RRVVBB
Ces propriétés peuvent être affichées dans n'importe quel ordre, il faut par contre impérativement les séparer par un espace.

APPLICATION : Dans la feuille de style interne créons une class .ArrierePlan avec les propriétés suivantes :

Dans le code html, créons une <div> class="Boites" dans laquelle nous placerons un titre <h2> "Les images d'arrière-plan", puis six éléments <p class="ArrierePlan">, auxquel, en ligne, nous attribuerons successivement les propriétés :