XHTML XHTML Un document XHTML étant un document XML il commence par une déclaration XML indiquant la version et le jeu de caractère utilisé. Ensuite vous devrez spécifier quelle DTD vous comptez utiliser avec votre document. <?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"> </html> Le contenu de votre document se trouvera alors entre les balises <html> et </html>.
Titre du document et en tête XHTML Titre du document et en tête Le titre est définit à l'aide de l'élément title comme dans l'exemple suivant : <head> <title>Titre de mon document</title> </head> Pour tester ce que nous venons d'expliquer, créez un document test.html dans lequel vous copierez la code suivant : <?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"> <head> <title>Titre de mon document</title> </head> </html> Les navigateurs Web affichent généralement le titre dans la barre de titre de la fenêtre.
Corps du document, titres et paragraphes XHTML Le corps du document est la zone que l'on va trouver après l'en-tête. Il est définit par l'élément body. Les titres sont au nombre de 6, chacun ayant un niveau d'importance. Le plus haut niveau d'importance est le titre h1, suivit de h2 et ainsi de suite jusqu'à h6. Ces niveaux sont largement suffisants pour couvrir l'ensemble de vos besoins les plus courants. Un paragraphe est définit par l'élément p. Il sera affiché avec un espacement avant et après, permettant ainsi une bonne séparation des paragraphes entre eux et avec le reste des éléments du document. <body> <h1>Titre très important</h1> <p>Paragraphe.</p> <h2>Titre moins important</h2> <p>Second paragraphe un peu plus long que le premier.</p> </body>
XHTML Les liens L'aspect le plus intéressant du Web est cette formidable capacité à créer des liens de pages en pages, de sites en sites. Pour créer un lien on utilise l'élément a. Pour créer un lien vers un fichier test2.html se trouvant dans le même répertoire que votre fichier test.html il suffira de faire comme dans l'exemple suivant : <a href="test2.html">Second fichier test</a> Le navigateur affichera généralement le lien en bleu et le soulignera. Pour faire un lien vers un autre site Web on écrira le code suivant : <a href="http://www.w3.org/">Le W3C</a>
XHTML Images Afin de rendre vos documents plus attrayants, vous pouvez y insérer des images à l'aide de l'élément img. le fichier de cette image s'appelant toto.jpg, voici le code à écrire pour insérer l'image dans votre page : <img src="toto.jpg" width="180" height="130" />
XHTML Les listes Les listes sont des outils bien utiles pour présenter des informations. XHTML en offre plusieurs types différents. Le premier type de liste est la liste non ordonnée, autrement appelée liste à puces. Le second exemple affiche un numéro au lieu d'un puce avant le texte de chaque élément. <ul> <li>1er élément</li> <li>2ème élément</li> <li>3ème élément</li> </ul> <ol> <li>1er élément</li> <li>2ème élément</li> <li>3ème élément</li> </ol>
XHTML Tableaux Un tableau XHTML est découpé en lignes contenant des cellules. Le nombre de cellules dans chaque ligne doit être le même. Voici un exemple de tableau très simple : <table> <tr> <td>ligne 1, colonne 1</td> <td>ligne 1, colonne 2</td> <td>ligne 1, colonne 3</td> </tr> <tr> <td>ligne 2, colonne 1</td> <td>ligne 2, colonne 2</td> <td>ligne 2, colonne 3</td> </table> Les balises <tr> et </tr> délimitent les lignes du tableau. Dans les lignes suivantes, <td> spécifie les cellules de données.
Feuille de style (CSS) Séparation du contenu et de la présentation Feuilles de style Feuille de style (CSS) Séparation du contenu et de la présentation Interopérabilité : affichage sur le Web,sur papier, BD, … Réutilisabilité/ durabilité : le document ne devient pas obsolète avec l'évolution des techniques informatiques ; il pourra être traité par des applications inexistantes au départ
Types de média all, aural, braille, embossed, handheld, print, projection, screen, tty, tv @media print {...} @media screen {...} @import « style-print.css » print; @import « style-screen.css » screen;
Feuilles de style Définition d’un style balise { propriété style: valeur; propriété style: valeur } Exemple : H3 { font-family: Arial; font-style: Italic } Le Texte « Cours XML » sera en Arial et en italique. <h3> Cours HML</h3> balise.nom_de_classe { propriété de style: valeur } Exemple p.toto {font-weight: bold; font-color: #000080 } Le texte « exemple1 » sera en gras et bleu mais pas « exemple2 » <p class= " toto" >exemple1</p><p class= " titi">exemple2</p>
Définition style (suite 1) Feuilles de style Définition style (suite 1) .nom_de_classe { propriété de style: valeur } Exemple .toto {color:blue; font-size:12px} Le texte « exemple1 », « exemple2 » et en bleu et de taille 12 mais pas « exemple3 » ni « exemple4 » <h1 class="toto">exemple 1</h1> <p class="toto">exemple2</p> <p>exemple3</p> <h1 class="titi">exemple4</h1>
Définition style (suite 2) Feuilles de style Définition style (suite 2) * { propriété style: valeur; … } Le sélecteur universel « * » agit sur toutes les balises. Exemple * {background-color:red} « exemple1 » et « exemple2 » sont sur fond rouge. <h1>exemple 1</h1> <p class="titi">exemple2</p>
Type de propriété de style Feuilles de style Type de propriété de style Couleur et image d’arrière plan : background-color :red, … Couleur d’avant plan : color:#008000, … Bordure: border:5px dotted:#0000FF, … Largeur, hauteur: width:250px; … Marge, espacement: margin:10px;… Alignement: text-align: center; … Positionnement: fload: left; … Typographie: font-weight: bold; …
Positionnement
Boîte de type bloc en flux normal Feuilles de style Boîte de type bloc en flux normal Par défaut, les boîtes de type bloc seront affichées dans une succession verticale. Prenons par exemple deux blocs différenciés par leur couleur : En HTML : <p class="jaune">Une boîte jaune</p> <p class="verte">Une boîte verte</p> En CSS : .jaune { background-color: #ffff00; } .verte { background-color: #00ff00; } Le résultat :
Marqueurs de boîtes blocs Feuilles de style Marqueurs de boîtes blocs Les principaux éléments créant des boîtes bloc sont : l'élément div ; les titres h1, h2, h3, h4, h5, h6 ; le paragraphe p ; Les listes et éléments de liste ul, ol, li, dl, dd ; Le bloc de citation blockquote ; Le texte pré-formaté pre ; L'adresse address.
Feuilles de style Boîte de type en-ligne Par défaut, les boîtes de type en-ligne sont affichées dans une succession horizontale. Prenons par exemple deux portions de texte différenciées par leur couleur : En HTML : <p> <span class="jaune">Une boîte jaune</span> <span class="verte">Une boîte verte</span> </p> En CSS : .jaune { background-color: #ffff00; } .verte { background-color: #00ff00; } Le résultat :
Marqueurs de boîtes en ligne Feuilles de style Marqueurs de boîtes en ligne Les principaux éléments créant des boîtes en ligne sont : l'élément span ; le lien a ; L'image img ; Les emphases em et strong ; La citation q ; La citation cite ; L'élément code ; Le texte entré par l'utilisateur kbd ; L'exemple samp ; La variable var ; Les abréviations et acronymes abbr, acronym ; Le texte inséré ins ; Le texte supprimé del.
CSS : positionnement relatif Feuilles de style CSS : positionnement relatif Le positionnement relatif permet d'inscrire un contenu en flux normal, puis de le décaler horizontalement et/ou verticalement. Le contenu suivant n'est pas affecté par ce déplacement, qui peut donc entraîner des chevauchements. En HTML : <p> Lorem <span class="jaune"> boîte en position relative </span> ipsum dolor. </p> En CSS : .jaune { position: relative; bottom: 5px; background-color: #ffff00; } Le résultat :
CSS : positionnement flottant Feuilles de style CSS : positionnement flottant Une boîte flottante est retirée du flux normal, et placée le plus à droite (float: right) ou le plus à gauche (float: left) possible dans son conteneur. Le contenu suivant cette boîte flottante s'écoule le long de celle-ci, dans l'espace laissé libre. En HTML: <p class="jaune">Une boîte jaune flottant</p> <p class="verte">Une boîte verte doté d'un contenu plus long…</p> En CSS: .jaune { background-color: #ffff00; float: right; width: 100px; margin: 0; } .verte { background-color: #00ff00; } Le résultat :
une mise en page à deux colonnes Feuilles de style une mise en page à deux colonnes Résultat : En CSS : .content { float: left; width: 70%; } .menu { margin-left: 80%; border: 1px solid #000000; padding: 1em; En HTML … <body> <div class="content"> </div> <div class="menu"> <ul> <li>lien_1</li> <li>lien_2</li> <li>lien_3</li> </ul> </body>
CSS : positionnement fixe et absolue Feuilles de style CSS : positionnement fixe et absolue Le fonctionnement de la position absolue : Le positionnement absolu « retire » totalement du flux le contenu concerné : sa position est déterminée par référence aux limites du conteneur. Celui-ci peut-être : une boîte elle-même positionnée (position relative ou absolue) ; le bloc conteneur initial, à défaut de boîte positionnée, c'est à dire en pratique le plus souvent la fenêtre du navigateur.
CSS : positionnement fixe et absolue Feuilles de style CSS : positionnement fixe et absolue Définissons un conteneur verte en position relative : .verte { position: relative; background-color: #00ff00; width: 15em; } Et un positionnement absolu jaune : .jaune { position: absolute; top: 1em; right: 1em; background-color: #ffff00; HTML : <div class="verte"> <p> … </p> <p class="jaune"> Boîte jaune en position absolue </p> </div> Résultat :
Feuilles de style Images et CSS Beaucoup d'images sont utilisées dans le but unique d'embellir les pages HTML. Ces images n'apportent rien au contenu, et en toute logique ne devrait pas être présentes dans la partie HTML de la page. De plus, si l'on souhaite changer l'apparence de la page, il est plus pratique de n'avoir que le fichier CSS à changer, plutôt que de devoir parcourir le ou les fichiers HTML à la recherche des images de présentation.
Feuilles de style Les images de fond En utilisant un élément div vide, on peut aisément remplacer une image purement décorative par une image de fond. Le principe consiste simplement à dimensionner le div à la même taille que l'image cible, et à lui appliquer l'image à remplacer comme image de fond. Code XHTML : Résultat : <div id="avatar"> </div> Feuille de style : div#avatar { background-image: url(avatar-p.png); background-repeat: no-repeat; width: 80px; height: 103px; padding: 0; }
Création d'une bordure stylée Feuilles de style Création d'une bordure stylée CSS : div.bordure-top { padding-top: 15px; border-left: 1px solid; border-right: 1px solid; background-image: url(borderh.gif); background-position: top; background-repeat: repeat-x; } div.bordure-bottom { padding: 0px 7px 15px 7px; background-image: url(borderh.gif); background-position: bottom; background-repeat: repeat-x; } XHTML <div class="bordure-top"> <div class="bordure-bottom"> Texte d'exemple. </div> Résultat :
Feuilles de style Ou mettre le CSS ? Il est possible d'inclure une feuille de style de deux manières différentes dans un document. La première possibilité, qui est probablement la plus simple, est de mettre la feuille de style directement dans l'entête du document, entre une paire de balises <style type="text/css"> ... </style> La seconde possibilité est de mettre le code dans un fichier séparé, souvent nommé en .css, et de l'inclure avec dans l'entête une balise de la forme <link rel="stylesheet" type="text/css" href="fichier.css">
Exemple de code XHTML de la page http://www.csszengarden.com/ Feuilles de style XML met l’accent sur le contenu et non sur la manière de présenter les données. Exemple de code XHTML de la page http://www.csszengarden.com/ <div id="container"> <div id="intro"> <div id="pageHeader"> <h1>css Zen Garden</h1> <h2>The Beauty of CSS Design</h2> </div> <div id="quickSummary"> <p class="p1">A demonstration of what can be accomplished visually through CSS based design. Select any style sheet from the list to load it into this page. </p> ….
Zen Garden (XHTML Brut) Feuilles de style Zen Garden (XHTML Brut)
Feuilles de style Zen Garden (CSS N°1)
Feuilles de style Zen Garden (CSS 2)
Feuilles de style Zen Garden (CSS N°3)