Table des matières
L'exemple dont vous trouverez le code source ci-dessous n'a pas été construit pour être esthétique, mais comme un catalogue (non exhaustif) de certaines fonctionnalités obtenues par xHTML et CSS.
De plus certains de ces effets ne marchent pas avec Internet Explorer, utilisez de préférence un navigateur qui suit les spécifications du W3C, FireFox par exemple.
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title>Un exemple xHTML-CSS</title> <link rel="stylesheet" type="text/css" href="exemplexhtmlcss.css" /> </head> <body> <h1 title="Une page pour montrer certaines possibilités des feuilles de style"> Une page d'exemple xHTML-CSS </h1> <div class="avantpropos" title="Ce cadre doit contenir un titre. Sinon utilisez un vrai navigateur, Firefox par exemple."> Cette page n'a pas été construite pour être esthétique, mais comme un catalogue (non exhaustif) de certaines fonctionnalités obtenues par xHTML et CSS.<br /> De plus certains de ces effets ne marchent pas avec <em>Internet Explorer</em>, utilisez un <a title="Téléchargez Firefox !" href="http://www.mozilla.com">vrai navigateur</a>. </div> <p style="text-align:center"> Voir cette page <a title="Lien vers une page totalement identique à celle-ci, mais SANS feuille de style" href="exemplexhtmlsanscss.html">sans la feuille de style</a>. </p> <h2 title="Présentation générale de la page, couleurs, texte, etc..."> Présentation de la page </h2> <p> La couleur de fond de la page est <span class="couleur">#9fa0f4</span> (utilisation d'un code héxadécimal de couleur), la couleur du texte est <span class="couleur">blue</span> (utilisation d'un nom de couleur). </p> <p> Les parties de texte de type <span class="balise"><em></span> sont en police <em>sans-serif</em>, le reste en police <em>serif</em>. </p> <p> Les noms et codes de couleur sont écrits en <em>monotype</em>, en <span class="couleur">black</span> sur fond <span class="couleur">#ccc</span>. Les balises sont écrites en <span class="couleur">black</span>, en <em>monotype</em> également. </p> <h2 title="Présentation des titres h1 et h2"> Les titres </h2> <p> Le grand titre est de type <span class="balise"><h1></span> et il a la présentation suivante : </p> <ul> <li> texte <span class="couleur">noir</span> sur fond <span class="couleur">#febadc</span>,</li> <li> bord <span class="couleur">blanc</span> épais,</li> <li> texte centré dans la ligne, texte écrit en <em>sans-serif</em>. </li> </ul> <p> Les autres titres sont de type <span class="balise"><h2></span> et ils ont la présentation suivante : </p> <ul> <li> texte <span class="couleur">rouge</span> sur fond <span class="couleur">blanc</span>,</li> <li> quand on les survole les couleurs s'inversent (texte <span class="couleur">blanc</span> sur fond <span class="couleur">rouge</span>),</li> <li> pas de bord,</li> <li> texte de taille 20 <em>pixels</em>, aligné à droite avec un <em>padding</em> droit de 2 <em>em</em>.</li> </ul> <h2 title="Présentation des liens"> Les liens </h2> <p> Les liens, quand le pointeur de souris n'est pas au-dessus, ne sont pas soulignés, sont de couleur <span class="couleur">#afa</span> (vert clair), et sont suivis d'une petite image (obtenue par <a title="QBullet est un ensemble d'images pour orner vos pages" href="http://www.matterform.com/mac_software/free_web_icons/legend.html">QBullet</a>). </p> <p> Quand le pointeur de souris est au-dessus, ils sont soulignés, de couleur <span class="couleur">#fa0</span> (orange), et la petite image est animée. </p> <h2 title="Comment vérifier que ces pages sont conformes aux normes du W3C ?"> Conformité W3C </h2> <p> Les deux liens suivant permettent de vérifier la conformité de cette page avec les normes du W3C : pour le <a title="Lien vers le validateur xHTML du W3C" href="http://validator.w3.org/check/referer">code xHTML</a>, et pour la <a title="Lien vers le validateur CSS du W3C" href="http://jigsaw.w3.org/css-validator/check/referer">feuille de style</a>. </p> <h2 title="Positionnement fixe à l'écran. Seulement pour les vrais navigateurs."> Positionnement </h2> <p> Une boite de type <span class="balise"><div></span> est positionnée fixée (<em>fixed</em>) en haut à droite de l'écran (<em>Internet Explorer</em>ne sait pas faire ça, utiliser un <a title="Téléchargez Firefox !" href="http://www.mozilla.com">vrai navigateur</a>). Elle contient un lien écrit en <span class="couleur">blue</span> pour le retour au cours, sa taille et la taille de texte augmentent quand le pointeur de souris la survole. </p> <div class="navigation"> <a title="Cliquer ici pour retourner sur la page d'accueil poly de cours" href="..">Retour vers le cours</a> </div> <h2 title="Quelques bulles d'aide qui apparaissent au survol par la souris"> Bulles d'aide </h2> <p> Certains mots possèdent des bulles d'aide qui apparaissent quand la souris les survole, en particulier les liens, les titres, les cases du tableau. </p> <h2 title="Un exemple de tableau"> Un tableau </h2> <p> Le tableau est entouré d'un cadre rouge pointillé. </p> <p> Les cases de type <span class="balise"><td></span> sont centrées, entourées d'un bord fin <span class="couleur">black</span>. Le texte est écrit en <span class="couleur">#eef</span> (bleu très clair) sur fond <span class="couleur">#00f</span> (bleu foncé). </p> <p> Les cases de type <span class="balise"><th></span> sont alignées à droite, entourées d'un bord fin de couleur <span class="couleur">blue</span>. Le texte est écrit en <span class="couleur"></span> sur fond <span class="couleur">#ccf</span> (bleu clair). </p> <p> Le tableau est centré sur la page (<em>Internet Explorer</em> ne sait pas faire ça, utiliser un <a title="Téléchargez Firefox !" href="http://www.mozilla.com">vrai navigateur</a>). </p> <table> <tr> <th class="vide"></th> <th title="Une case de type th (en-tête)">XXXX XX X</th> <th title="Une case de type th (en-tête)">YYY</th> <th title="Une case de type th (en-tête)">ZZZ</th> </tr> <tr> <th title="Une case de type th (en-tête)">Ici</th> <td title="Une case de type td">AA</td> <td title="Une case de type td">BB BBB</td> <td title="Une case de type td">CC</td> </tr> <tr> <th title="Une case de type th (en-tête)">ou là</th> <td title="Une case de type td">3121</td> <td title="Une case de type td">8956 32</td> <td title="Une case de type td">etc.</td> </tr> </table> </body> </html>