Médiaforma

All posts in HTLM5 / CSS3

Les différents types de liens hypertextes

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Liens hypertextes</title>
  </head>
  <body>
    <a href="https://www.mediaforma.com/category/formations/windows-7/">Cliquez ici pour accéder à la formation vidéo sur Windows 7 du site Mediaforma</a><br>
    <a href="mailto:lem.korp@free.fr">Cliquez ici pour envoyer un e-mail à Michel Martin</a>
  </body>
</html>

Mise en forme des liens hypertexte

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Mise en forme des liens hypertextes</title>
    <style>
      a.type1 {color: red; text-decoration: none; }
      a.type1:visited {color: blue; text-decoration: underline; }
      a.type2 {color: blue; text-decoration: overline; }
      a.type2:visited {color: red; text-decoration: none; }
      a.type3 {color: red; text-decoration: overline underline; }
      a.type3:visited {color: blue; text-decoration: overline; }
      a.type4 {color: blue; text-decoration: line-through; }
      a.type4:visited {color: red; text-decoration: underline; }
    </style>
  </head>
  <body>
    <a href="http://www.page1.fr" class="type1">Lien vers la page 1</a>
    <a href="http://www.page2.fr" class="type2">Lien vers la page 2</a>
    <a href="http://www.page3.fr" class="type3">Lien vers la page 3</a>
    <a href="http://www.page4.fr" class="type4">Lien vers la page 4</a>
  </body>


Version résumée et étendue d’un texte

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Balises details et summary</title>
  </head>
  <body>
    <details>
      <summary>En savoir plus</summary>
      <p>Vous en saurez plus sur le référencement en vous rendant sur le site http://www.monsite.com.</p>
     </details>
  </body>
</html>

Eléments éditables

Tester le code


<!doctype html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Eléments éditables</title>
    <style>
      div
      {
        border: dotted 1px #666;
        padding: 5px 10px;
        margin-top: 40px;
        margin-bottom: 40px;
      }
    </style>
    <script>
      function traitement()
      {
         var contenu = document.getElementById('texte-editable').innerHTML;
         document.getElementById('cible').innerHTML = 'Texte lu dans la div : ' + contenu;
      }
    </script>
  </head>
  <body>
    <div id="texte-editable" contenteditable="true">Le texte de cette div peut être modifié</div>
    <button onclick="traitement()">Cliquez ici pour accéder au texte de la div</button>
    <div id="cible"></div>
  </body>
</html>


Le concept de boîte

Tester le code


<!DOCTYPE html">
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Le concept de boîtes</title>
  </head>
  <body >
    <div style="width:250px; height=60px; margin: 20px; padding: 10px; background-color: yellow;">
    Ce texte est affiché à l'intérieur de la balise div
    </div>
  </body>
</html>

Les différents styles de listes HTML

Tester le code


<!DOCTYPE html">
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Styles de listes HTML</title>
  </head>
  <body>
    <b>Liste non ordonnée</b>
    <ul>
      <li>Premier élément</li>
      <li>Deuxième élément</li>
      <li>Troisième élément</li>
    </ul>
    <b>Liste ordonnée</b>
    <ol>
      <li>Premier élément</li>
      <li>Deuxième élément</li>
      <li>Troisième élément</li>
    </ol>
    <b>Liste de termes et de descriptions</b>
    <dl>
      <dt><dfn>Bit</dfn></dt>
      <dd>Information représentée par un symbole à deux valeurs généralement notées 0 et 1, associées aux deux états d'un dispositif.</dd>
      <dt><dfn>Octet</dfn></dt>
      <dd>Ensemble ordonné de huit éléments binaires traités comme un tout.</dd>
    </dl>
  </body>
</html>

Choisir le style d’une liste

Tester le code


<!DOCTYPE html">
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Différents styles de liste</title>
    <style>
      .rond {list-style-type: disc;}
      .carre {list-style-type: square;}
      .decimal: {list-style-type: decimal;}
    </style>
  </head>
  <body>
    <ul class="rond">
       <li>Premier élément</li>
       <li>Deuxième élément</li>
       <li>Troisième élément</li>
    </ul>
    <ul class="carre">
       <li>Premier élément</li>
       <li>Deuxième élément</li>
       <li>Troisième élément</li>
    </ul>
    <ol class="decimal">
       <li>Premier élément</li>
       <li>Deuxième élément</li>
       <li>Troisième élément</li>
    </ol>
  </body>
</html>

Des images à la place des puces

Tester le code


<!DOCTYPE html">
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Des images à la place des puces</title>
    <style>
      .puce {list-style-image: url(puce.gif);}
    </style>
 </head>
  <body>
    <ul class="puce">
       <li>Premier élément</li>
       <li>Deuxième élément</li>
       <li>Troisième élément</li>
    </ul>
  </body>
</html>

Des images centrées à la place des puces

Tester le code


<!DOCTYPE html">
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Des images centrées à la place des puces</title>
    <style>
      ul
      {
        list-style-type: none;
      }
      li
      {
        background-image: url(puce.gif);
        background-repeat: no-repeat;
        background-position: 0 -0.4em;
        padding-left: 3em;
        line-height:22px;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <ul>
       <li>Premier élément</li>
       <li>Deuxième élément</li>
       <li>Troisième élément</li>
    </ul>
  </body>
</html>

Légendage 1

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Eléments et légendes</title>
    <style>
      img, video, figcaption
      {
        display: block;
      }
    </style>
  </head>
  <body>
    <figure>
      <img src="grenouille.jpg" width="200px" border="1" />
      <figcaption>Légende de la figure 1</figcaption>
    </figure>

    <p>
    <figure>
      <img src="cabane.jpg" height="200px" border="1" />
      <figcaption>Légende de la figure 2</figcaption>
    </figure>

    <p>
    <figure>
      <video src="video1.mp4" width="200" border="1"></video>
      <figcaption>Légende de la vidéo 1</figcaption>
    </figure>

    <p>
    <figure>
      <video src="video2.mp4" width="200" border="1" ></video>
      <figcaption>Légende de la vidéo 2</figcaption>
    </figure>

  </body>
</html>

Légendage 2

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Eléments et légendes</title>
  </head>
  <body>
    <p>Le <a href="#1">listing 1</a> représente le code à utiliser pour afficher une vidéo en HTML5.</p>
    <figure id="1">
      <figcaption>Listing 1. Affichage d'une vidéo en HTML5.</figcaption>
      <pre><code>
        <video src="nom de la vidéo" width="largeur" height="hauteur">
        </video>
      </code></pre>
    </figure>

    <figure>
      <p>Si on venait à nous séparer,<br>
      Jamais je ne m'en remettrais,<br>
      Il fait si bon être à tes cotés,<br>
      Que plus rien ne semble mauvais.<br>
      Tu es ma joie de vivre,<br>
      Mon seul et unique bonheur,<br>
      Ton amour m'enivre,<br>
      Et fait chavirer mon coeur.</p>
      <figcaption><cite>Pour toi, mon amour éternel</cite> (extrait). Hubert</figcaption>
    </figure>
  </body>
</html>

Texte non proportionnel

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Balise pre</title>
  </head>
  <body>
    Ce code affiche une imagette sur laquelle le visiteur peut cliquer pour afficher la vidéo "Enregistrer le son du PC" :<br>
    <pre>
    <a href="https://www.mediaforma.com/uneminuteparjour/video/enregistrer-son-pc.php">
      <img src="https://www.mediaforma.com/uneminuteparjour/thumbs/enregistrer-son-pc.jpg" border=0>
    </a>
  </pre>

  <br><p>
  Ce code affiche une imagette sur laquelle le visiteur peut cliquer pour afficher la vidéo "Enregistrer le son du PC" :<br>
  <pre>
    <a href="https://www.mediaforma.com/uneminuteparjour/video/enregistrer-son-pc.php">
      <img src="https://www.mediaforma.com/uneminuteparjour/thumbs/enregistrer-son-pc.jpg" border=0>
    <a>
  </pre>
</body>
</html>

Citations

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Citations</title>
    <style>
      .avecstyle
      {
        font-family: "Courrier News", serif;
        border : 2px solid #000;
        margin: 10px 0 0 0;
        padding: 10px;
        background-color: #D4FEAE;
      }
    </style>
  </head>
  <body>
    <p>Cette citation de Lao Tseu provient du site <b>www.evene.fr</b> :
    <blockquote cite="www.evene.fr">
      Le sage équarrit sans blesser<br>
      Incline sans porter atteinte<br>
      Rectifie sans faire violence<br>
      Et resplendit sans aveugler.<br>
    </blockquote></p>
    Cette même citation est mise en forme avec un style CSS :
    <blockquote cite="www.evene.fr" class="avecstyle">
      Le sage équarrit sans blesser<br>
      Incline sans porter atteinte<br>
      Rectifie sans faire violence<br>
      Et resplendit sans aveugler.<br>
    </blockquote>
  </body>
</html>

Rupture thématique

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Rupture thématique</title>
    <style>
      .hrstyle1
      {
        text-align:left;
        margin-left: 30px;
        width:500px;
        height:30px;
        background: url(_fond.gif);
      }
    </style>
  </head>
  <body>
    Premier thème abordé dans le document
    <hr>
    Deuxième thème abordé dans le document
    <hr class="hrstyle1">
    Troisième thème abordé dans le document
  </body>
</html>


Bien afficher les caractères accentués

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Les codes des caractères</title>
  </head>
  <body>
    <pre>
           32 : 33 : ! 34 : " 35 : # 36 : $ 37 : % 38 : & 39 : '
 40 : ( 41 : ) 42 : * 43 : + 44 : , 45 : - 46 : . 47 : / 48 : 0 49 : 1
 50 : 2 51 : 3 52 : 4 53 : 5 54 : 6 55 : 7 56 : 8 57 : 9 58 : : 59 : ;
 60 : < 61 : = 62 : > 63 : ? 64 : @ 65 : A 66 : B 67 : C 68 : D 69 : E
 70 : F 71 : G 72 : H 73 : I 74 : J 75 : K 76 : L 77 : M 78 : N 79 : O
 80 : P 81 : Q 82 : R 83 : S 84 : T 85 : U 86 : V 87 : W 88 : X 89 : Y
 90 : Z 91 : [ 92 : \ 93 : ] 94 : ^ 95 : _ 96 : ` 97 : a 98 : b 99 : c
100 : d 101 : e 102 : f 103 : g 104 : h 105 : i 106 : j 107 : k 108 : l 109 : m
110 : n 111 : o 112 : p 113 : q 114 : r 115 : s 116 : t 117 : u 118 : v 119 : w
120 : x 121 : y 122 : z 115 : s 124 : | 125 : } 126 : ~ 127 :  128 : € 129 : 
130 : ‚ 131 : ƒ 132 : „ 133 : … 134 : † 135 : ‡ 136 : ˆ 137 : ‰ 138 : Š 139 : ‹
140 : Œ 141 :  142 : Ž 143 :  144 :  145 : ‘ 146 : ’ 147 : “ 148 : ” 149 : •
150 : – 151 : — 152 : ˜ 153 : ™ 154 : š 155 : › 156 : œ 157 :  158 : ž 159 : Ÿ
160 :   161 : ¡ 162 : ¢ 163 : £ 164 : ¤ 165 : ¥ 166 : ¦ 167 : § 168 : ¨ 169 : ©
170 : ª 171 : « 172 : ¬ 173 : ­ 174 : ® 175 : ¯ 176 : ° 177 : ± 178 : ² 179 : ³
180 : ´ 181 : µ 182 : ¶ 183 : · 184 : ¸ 185 : ¹ 186 : º 187 : » 188 : ¼ 189 : ½
190 : ¾ 191 : ¿ 192 : À 193 : Á 194 : Â 195 : Ã 196 : Ä 197 : Å 198 : Æ 199 : Ç
200 : È 201 : É 202 : Ê 203 : Ë 204 : Ì 205 : Í 206 : Î 207 : Ï 208 : Ð 209 : Ñ
210 : Ò 211 : Ó 212 : Ô 213 : Õ 214 : Ö 215 : × 216 : Ø 217 : Ù 218 : Ú 219 : Û
220 : Ü 221 : Ý 222 : Þ 215 : × 224 : à 225 : á 226 : â 227 : ã 228 : ä 229 : å
150 : – 151 : — 152 : ˜ 153 : ™ 154 : š 155 : › 156 : œ 157 :  158 : ž 159 : Ÿ
240 : ð 241 : ñ 242 : ò 243 : ó 244 : ô 245 : õ 246 : ö 247 : ÷ 248 : ø 249 : ù
250 : ú 251 : û 252 : ü 253 : ý 254 : þ 255 : ÿ
    </pre>
  </body>
</html>


Utilisation de polices exotiques

Code HTML5

Tester le code


<!doctype html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Utilisation de la police serveur know_your_product.ttf</title>
    <link rel="stylesheet" href="font-face.css">
  </head>
  <body>
    <h1>Test d'utilisation de la police know_your_product</h1>
  </body>
</html>

Code CSS fontface.css


@font-face
{
  font-family: KnowYourProduct;
  src: url('know_your_product.ttf');
  src: url('know_your_product.eot');
}

h1
{
  font-family: 'KnowYourProduct';
}

Couleur et image d’arrière-plan

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Couleur d'arrière-plan</title>
  </head>
<body>
  <div style="background-image: url(chute-eau.jpg); font-size: 40px; color: black;">
    <p>La couleur d'arrière-plan de ce texte n'est pas définie. Par contre, <a href="#" style="background-color: red">ce lien a un arrière-plan de couleur rouge</a>.</p>
    <p style="background-color:yellow;">Cette ligne a un arrière-plan de couleur jaune</p>
    <div style="background-color: skyblue;">et celle-ci un arrière-plan bleu ciel.</div>
    </div>
  </div>
</body>
</html>

Gradients linéaires

Gradient vertical – Code HTML5

Tester le code


<!doctype html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Gradient vertical du rouge au bleu</title>
    <link rel="stylesheet" href="gradient-vertical.css">
  </head>
  <body>
    <p class="gradient-vertical">Gradient vertical du rouge au bleu</p>
  </body>
</html>
background: -moz-linear-gradient(left, red, blue);
background: -webkit-gradient(linear, 0% 0%, 1000% 0%, from(red), to(blue));

Gradient vertical – gradient-vertical.css


filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=val1, StartColorStr=val2, EndColorStr=val3)
-webkit-gradient(linear, p1, p2, from(c1), to(c2));
-moz-linear-gradient(p1, c1, c2) no-repeat;
background: -moz-linear-gradient(top, red, blue);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(red), to(blue));
.gradient-vertical
{
  width:400px;
  height: 200px;
  background: -moz-linear-gradient(top, red, blue);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(red), to(blue));
}

Gradient horizontal

Tester le code

Code HTML5


<!doctype html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Gradient horizontal du rouge au bleu</title>
    <link rel="stylesheet" href="gradient-horizontal.css">
  </head>
  <body>
    <p class="gradient-horizontal">Gradient horizontal du rouge au bleu</p>
  </body>
</html>

Gradient horizontal – gradient-horizontal.css


.gradient-horizontal
{
  width:400px;
  height: 200px;
  background: -moz-linear-gradient(left, red, blue);
  background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(red), to(blue));
}

Plusieurs couleurs dans un gradient linéaire

Tester le code

Code HTML5


<!doctype html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Gradient horizontal multiple, du rouge au blanc, couleurs intermédiaires bleu et jaune</title>
    <link rel="stylesheet" href="gradient-horizontal-multiple.css">
  </head>
  <body>
    <p class="gradient-horizontal-multiple"><font size=6>Gradient horizontal multiple, du rouge au blanc, couleurs intermédiaires bleu et jaune</font></p>
  </body>
</html>

gradient-horizontal-multiple.css


.gradient-horizontal-multiple
{
  width:400px;
  height: 200px;
  background: -moz-linear-gradient(left, red 0%, blue 33%, yellow 66%, white);
  background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(red), color-stop
(0.33, blue), color-stop(.66, yellow), to(white));
}

Gradients radiaux

Tester le code

Code HTML5


<!doctype html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Gradient radial</title>
    <link rel="stylesheet" href="gradient-radial.css">
  </head>
  <body>
    <p class="gradient-radial">Gradient radial</p>
  </body>
</html>
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, from(red), to(blue));
background: -moz-radial-gradient(50% 50%, circle farthest-side, red 0%, blue 30%);

gradient-radial.css


.gradient-radial
{
  width:400px;
  height: 200px;
  background: -webkit-gradient(radial, 50% 0%, 20, 50% 100%, 150, from(red), to(blue));
  background: -moz-radial-gradient(50% 50%, circle closest-side, red, blue);
}

Plusieurs couleurs dans un gradient radial


.gradient-radial
{
  width:300px;
  height: 200px;
  background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 150, from(red), color-stop(.25,yellow), color-stop(.50, blue), to (black));
  background: -moz-radial-gradient(circle, red, yellow, blue, black);}
}

Utilisation d’un gradient pour masquer une image

Code HTML5

Tester le code


<!doctype html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Gradient radial</title>
    <link rel="stylesheet" href="masque-radial.css">
  </head>
  <body>
    <img src="image.jpg" width=400px>
    <img src="image.jpg" class="masque-radial">
  </body>
</html>

masque-radial.css


.masque-radial
{
  width: 400px;
  -webkit-mask-image: -webkit-gradient(radial, 50% 50%, 70, 50% 50%, 150, from(white), to(rgba(0,0,0,0)));
}
.masque-radial
{
  width: 400px;
  -webkit-mask-image: -webkit-gradient(radial, 80% 20%, 30, 80% 20%, 100, from(white), to(rgba(0,0,0,0)));
}

Les fonctions RGBA() et HSLA()

Code HTML

Tester le code


<!doctype html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Facteur Alpha avec RGBA</title>
    <link rel="stylesheet" href="alpha.css">
  </head>
  <body>
    <div class=alpha00>Texte affiché sur un fond vert avec alpha à 0%</div>
    <div class=alpha20>Texte affiché sur un fond vert avec alpha à 20%</div>
    <div class=alpha50>Texte affiché sur un fond vert avec alpha à 50%</div>
    <div class=alpha80>Texte affiché sur un fond vert avec alpha à 80%</div>
  </body>
</html>

alpha.css


div
{
  width: 200px;
  height:100px;
}

.alpha00
{
  background-color: rgba(0, 100, 100, 0);
}

.alpha20
{
  background-color: rgba(0, 100, 100, .2);
}

.alpha50
{
  background-color: rgba(0, 100, 100, .5);
}

.alpha80
{
  background-color: rgba(0, 100, 100, .8);
}
div
{
  width: 200px;
  height:100px;
}
.alpha50
{
  background-color: rgba(0, 100, 100, .5);
}
div
{
  width: 200px;
  height:100px;
}

.alpha00
{
  background-color: hsla(120, 94%, 18%, 0);
}

.alpha20
{
  background-color: hsla(120, 94%, 18%, .2);
}

.alpha50
{
  background-color: hsla(120, 94%, 18%, 0.4);
}

.alpha80
{
  background-color: hsla(120, 94%, 18%, .8);
}

Regroupement des éléments

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Regroupement d'éléments</title>
  </head>
  <body>
    <div style="background-color:yellow; width:500px; height=500px; margin: 20px; padding: 10px;">
      <img src=phare.png style="width: 100px;">
      <span style="font-size: 16px; color:blue;">Ce texte est mis en forme par la première balise span</span>
      <span style="color: red;">et celui-ci par la deuxième balise span.</span>
    </div>
    <div style="background-color: burlywood; margin: 40px; padding: 30px;">
       Ce texte est affiché dans le deuxième div
    </div>
  </body>
</html>

Positionnement en flux

Tester le code


Cliquez <a href="https://www.mediaforma.com"> pour accéder au site de formation Mediaforma</a>
Ce texte est suivi<h2> par un titre de style H2</h2>
<img src="fgauche.png" style="width:40px">
<img src="fhaut.png" style="width:40px">
Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat.
<img src="fbas.png" style="width:40px">
<img src="fdroite.png" style="width:40px">

Mise en page avec la propriété display

Premier exemple

Tester le code

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>La propriété display</title>
    <style>
      .un
      {
        border: 1px solid #ff0000;
        margin: 10px;
        padding: 10px;
      }
      .deux
      {
        border: 1px solid #00ff00;
        margin: 2px;
        padding: 2px;
      }
      .trois
      {
        border: 1px solid #0000ff;
        margin: 10px;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="un" style="display: block;">
      ce texte est affiché dans une balise div de type "bloc".
      <div class="deux" style="display: inline">Ce texte est affiché dans une balise div dont la propriété display vaut inline</div>
      <div class="trois">ce texte est affiché dans une balise div de type "bloc"</div>
    </div>
  </body>
</html>

Deuxième exemple

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Des tableaux en HTML5</title>
    <style>
      .un
      {
        border: 1px solid #ff0000;
        margin: 10px;
        padding: 10px;
      }
      .deux
      {
        border: 1px solid #00ff00;
        margin: 2px;
        padding: 2px;
      }
      .trois
      {
        border: 1px solid #0000ff;
        margin: 10px;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="un" style="display: table;">
      Ce texte est affiché dans une balise div dont la propriété display vaut table.
      <div class="deux" style="display: table-row">Ce texte est affiché dans une balise div dont la propriété display vaut table-row
      <div class="trois" style="display: table-cell">ce texte est affiché dans une balise div de type "table-cell"</div>
      <div class="trois" style="display: table-cell">ce texte est affiché dans une autre balise div de type "table-cell"</div>
    </div>
    <div class="deux" style="display: table-row">On recommence avec une nouvelle ligne
      <div class="trois" style="display: table-cell">Une première cellule</div>
      <div class="trois" style="display: table-cell">Et une deuxième</div>
      </div>
    </div>
  </body>
</html>

Le rendu inline-block

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Un rendu inline-block</title>
    <style>
      p
      {
        display:inline-block;
        text-align:left;
        background:#dce;
        width:150px;
        padding:20px;
        margin: 20px;
      }
    </style>
  </head>
  <body>
    <p>Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. </p>

    <p>Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. </p>

    <p>Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. </p>
  </body>
</html>

Un design à deux colonnes

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Un design à deux colonnes</title>
    <style>
      #colonne1
      {
        float: left;
        width: 150px;
        background: #66CCFF;
      }
      #colonne2
      {
        margin-left: 160px;
        background: #FFFFCC;
      }
    </style>
  </head>
  <body>
    <div id="colonne1">
      Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex esse aliquem qui tanti operis rationem perpenderet, pulchritudinem amaret, magnitudinem admiraretur. Idcirco iam rebus omnibus (ut Moses5 Timaeusque6 testantur) absolutis, de producendo homine postremo cogitavit. Verum nec erat in archetypis unde novam sobolem effingeret, nec in thesauris quod novo filio hereditarium largiretur, nec in subselliis totius orbis, ubi universi contemplator iste sederet.
    </div>
    <div id="colonne2">
      Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex esse aliquem qui tanti operis rationem perpenderet, pulchritudinem amaret, magnitudinem admiraretur. Idcirco iam rebus omnibus (ut Moses5 Timaeusque6 testantur) absolutis, de producendo homine postremo cogitavit. Verum nec erat in archetypis unde novam sobolem effingeret, nec in thesauris quod novo filio hereditarium largiretur, nec in subselliis totius orbis, ubi universi contemplator iste sederet.
    </div>
  </body>
</html>

Un design fluide à trois colonnes dont deux flottantes

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Un design fluide à 3 colonnes</title>
    <style>
      #colonne1
      {
        float: left;
        width: 150px;
        background: #66CCFF;
      }
      #colonne2
      {
        float: right;
        width: 300px;
        background: #CCFF99;
      }
      #colonne3
      {
        background: #FFFFCC;
      }
    </style>
  </head>
  <body>
    <div id="colonne1">
      Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex esse aliquem qui tanti operis rationem perpenderet, pulchritudinem amaret, magnitudinem admiraretur. Idcirco iam rebus omnibus (ut Moses5 Timaeusque6 testantur) absolutis, de producendo homine postremo cogitavit. Verum nec erat in archetypis unde novam sobolem effingeret, nec in thesauris quod novo filio hereditarium largiretur, nec in subselliis totius orbis, ubi universi contemplator iste sederet.
    </div>
  <div id="colonne2">
    Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex esse aliquem qui tanti operis rationem perpenderet, pulchritudinem amaret, magnitudinem admiraretur. Idcirco iam rebus omnibus (ut Moses5 Timaeusque6 testantur) absolutis, de producendo homine postremo cogitavit. Verum nec erat in archetypis unde novam sobolem effingeret, nec in thesauris quod novo filio hereditarium largiretur, nec in subselliis totius orbis, ubi universi contemplator iste sederet.
    </div>
    <div id="colonne3">
      Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex esse aliquem qui tanti operis rationem perpenderet, pulchritudinem amaret, magnitudinem admiraretur. Idcirco iam rebus omnibus (ut Moses5 Timaeusque6 testantur) absolutis, de producendo homine postremo cogitavit. Verum nec erat in archetypis unde novam sobolem effingeret, nec in thesauris quod novo filio hereditarium largiretur, nec in subselliis totius orbis, ubi universi contemplator iste sederet.
    </div>
  </body>
</html>

Un design à trois colonnes de même hauteur

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Un design à 3 colonnes de même hauteur</title>
    <style>
      #conteneur
      {
        width: 800px;
        background: url(fond.gif) repeat-y;
        overflow: hidden;
      }
      #colonne1
      {
        float: left;
        width: 150px;
        background: #66CCFF;
      }
      #colonne2
      {
        float: right;
        width: 300px;
        background: #CCFF99;
      }
      #colonne3
      {
        background: #FFFFCC;
        margin-left: 160px;
        margin-right: 310px;
      }
    </style>
  </head>
  <body>
    <div id="conteneur">
      <div id="colonne1">
        Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex esse aliquem qui tanti operis rationem perpenderet, pulchritudinem amaret, magnitudinem admiraretur. Idcirco iam rebus omnibus (ut Moses5 Timaeusque6 testantur) absolutis, de producendo homine postremo cogitavit. Verum nec erat in archetypis unde novam sobolem effingeret, nec in thesauris quod novo filio hereditarium largiretur, nec in subselliis totius orbis, ubi universi contemplator iste sederet.
      </div>
      <div id="colonne2">
        Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex esse aliquem qui tanti operis rationem perpenderet, pulchritudinem amaret, magnitudinem admiraretur. Idcirco iam rebus omnibus (ut Moses5 Timaeusque6 testantur) absolutis, de producendo homine postremo cogitavit. Verum nec erat in archetypis unde novam sobolem effingeret, nec in thesauris quod novo filio hereditarium largiretur, nec in subselliis totius orbis, ubi universi contemplator iste sederet.
      </div>
      <div id="colonne3">
        Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex esse aliquem qui tanti operis rationem perpenderet, pulchritudinem amaret, magnitudinem admiraretur. Idcirco iam rebus omnibus (ut Moses5 Timaeusque6 testantur) absolutis, de producendo homine postremo cogitavit. Verum nec erat in archetypis unde novam sobolem effingeret, nec in thesauris quod novo filio hereditarium largiretur, nec in subselliis totius orbis, ubi universi contemplator iste sederet.
      </div>
    </div>
  </body>
</html>

Multicolonnage, la nouvelle vague CSS3

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Multicolonnage</title>
    <style>
      .multi-col
      {
        -moz-column-width: 150px;
        -webkit-column-width: 150px;
        -moz-column-gap: 20px;
        -webkit-column-gap: 20px;
      }
    </style>
  </head>
  <body>
    <div class="multi-col">
      Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex esse aliquem qui tanti operis rationem perpenderet, pulchritudinem amaret, magnitudinem admiraretur. Idcirco iam rebus omnibus (ut Moses5 Timaeusque6 testantur) absolutis, de producendo homine postremo cogitavit. Verum nec erat in archetypis unde novam sobolem effingeret, nec in thesauris quod novo filio hereditarium largiretur, nec in subselliis totius orbis, ubi universi contemplator iste sederet.</p>
    </div>
  </body>
</html>
.multi-col
{
  -moz-column-width: 150px;
  -webkit-column-width: 150px;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
-moz-column-count: 3;
-webkit-column-count: 3;
-moz-column-rule: largeur style couleur;
-webkit-column-rule: largeur style couleur;
-moz-column-rule: 1px solid black;
-webkit-column-rule: 1px solid black;
background:#ccc;
text-align:justify;
.multi-col
{
  -moz-column-width: 150px;
  -webkit-column-width: 150px;
  -moz-column-gap: 20px;
  -webkit-column-gap: 20px;
  background:#ccc;
  text-align:justify;
  -moz-column-count: 3;
  -webkit-column-count: 3;
  -moz-column-rule: 1px solid black;
  -webkit-column-rule: 1px solid black;
}


Nouvelle organisation des documents

Premier exemple – code HTML5

Tester le code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Un document XHTML avec en-tête, bas de page, menu, zone annexe et Zone de contenu</title>
    <link rel="stylesheet" href="style0.css">
  </head>
  <body>
    <div id="entete">
      <h1>En-tête du document</h1>
      Texte de l'en-tête
    </div>
    <div id="barre-navigation">
      <h2>Menu</h2>
      <ul>
        <li><a href="page1.htm">Page 1</a></li>
        <li><a href="page2.htm">Page 2</a></li>
        <li><a href="page3.htm">Page 3</a></li>
        <br><br>
      </ul>
    </div>
    <div id="barre-droite">
      Texte affiché dans la partie droite de la page<br><br>
    </div>

    <div class="article">
      <h2>Premier article</h2>
      Texte du premier article
    </div>
    <div class="article">
      <h2>Deuxième article</h2>
      Texte du deuxième article
    </div>
    <div id="bas-de-page">
      <p>Copyright et e-mail du Webmaster.</p>
    </div>
  </body>
</html>

Premier exemple – Feuille de style style0.css


#entete
{
  background-color: red;
}

#barre-navigation
{
  float:left;
  width:20%;
  background-color:yellow;
}

#barre-droite
{
  float:right;
  width:20%;
  background-color:yellow;
}

h2
{
  margin:0;
  padding:0;
}

.article
{
  width:80%;
  background-color: #66FFFF;
}

#bas-de-page
{
  clear:both;
  background-color: #99FF66;
}
<!doctype html>

Deuxième exemple – code HTML5

Tester le code

<html>
  <head>
    <meta charset=UTF-8" />
    <title>Un document HTML5 avec en-tête, bas de page, menu, zone annexe et Zone de contenu</title>
    <link rel="stylesheet" href="style1.css">
    <script src="Creation-elements-HTML5.js"></script>
  </head>
  <body>
    <header>
      <h1>En-tête du document</h1>
      Texte de l'en-tête
    </header>
    <nav>
      <h2>Menu</h2>
      <ul>
        <li><a href=”page1.htm”>Page 1</a></li>
        <li><a href=”page2.htm”>Page 2</a></li>
        <li><a href=”page3.htm”>Page 3</a></li>
      </ul>
      <br><br><br>
    </nav>
    <aside>
      Texte affiché dans la partie droite de la page avec l'élément aside<br><br>
    </aside>
    <article>
      <h2>Premier article</h2>
        <p>Texte du premier article</p>
    </article>
    <article>
      <h2>Deuxième article</h2>
        <p>Texte du deuxième article</p>
    </article>
    <footer>
      <p>Copyright et e-mail du Webmaster</p>
    </footer>
  </body>
</html>

Deuxième exemple – code CSS style1.css

header, nav, article, section, footer, aside
{
  display: block;
}
 

header
{
  background-color: red;
}
nav
{
  float:left;
  width:20%;
  background-color:yellow;
}
article
{
  background-color: #66FFFF;
  width:80%;
}

aside
{
  float:right;
  width:20%;
  background-color:yellow;
}

footer
{
  clear:both;
  background-color: #99FF66;
}


Styles CSS dans les balises

<balise style="propriété1:valeur1; …propriétéN:valeurN";>
<p style="background-color:yellow;>
Ce texte a un arrière-plan jaune
</p>
<h2 style="font-family:Verdana; font-size: 18px;">
Ce titre est en Verdana corps 18
</h2>

Feuille de styles interne

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Une feuille de styles interne</title>
    <style>
      p {background-color:yellow;}
      h2 {font-family:Verdana; font-size: 18px;>
    </style>
  </head>
  <body>
    …
  </body>
</html>

Feuille de styles externe

<link rel="stylesheet" href="moncss.css" />
<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Une feuille de styles externe</title>
    <link rel="stylesheet" href="moncss.css" />
  </head>
  <body>
    <!-- Les instructions HTML5 peuvent utiliser les styles -->
    <!-- définis dans la feuille de styles moncss.css -->
  </body>
</html>