Le langage XHTML 420-S4W-GG Programmation Web Client Session : Hiver 2010 Enseignante : Kerlyne Fostine Courriel : k.fostine@cgodin.qc.ca
Plan de la séance Introduction à XHTML Structure d’un document XHTML Mise en forme du texte Les listes Insertion des images et du multimédia
Introduction à XHTML XHTML : Langage de balisage ou de marquage Langage qui permet de structurer le contenu des pages web dans divers éléments Langage de balisage issus du langage SGML 3
Éléments, balises et attributs Les balises commencent par le caractère < suivi du nom de l’élément et se termine par le caractère > <p> Balise d’ouverture <b> Balise de fermeture </b> Les attributs d’un élément sont définis dans la balise d’ouverture et sont séparés par une espace <a href="http://www.html.net/">Voici un lien vers HTML.net</a> 4
Les attributs de base des éléments XHTML Tous les éléments en XHTML comportent ces attributs id : Sert à identifier un élément de manière unique class : Permet de regrouper plusieurs éléments sous une classe title : Permet de mentionner du texte qui apparaît dans une bulle quand l’utilisateur positionne le curseur sur cet élément style : permet de mentionner un style localement pour un élément donné Les attributs d’internationalisation xml:lang, dir Les attributs de gestion des événements : onclick, ondblclick… 5
Règles de base XHTML Document bien formé Document conforme Les éléments et les attributs sont sensibles à la casse, ils sont écrits en minuscules Les éléments non vides doivent avoir une balise d’ouverture et une balise de fermeture Les éléments vides ne comportent qu’une seule balise et doivent se terminer par les caractères /> Les éléments ne doivent pas se chevaucher et doivent obéir au principe premier-ouvert dernier-fermé Tous les attributs doivent avoir une valeur incluse entre des guillemets doubles À tous les attributs utilisés doit être donnée une valeur Document conforme Un document XHTML doit respecter les règles d’inclusion des éléments les uns dans les autres, telles qu’elles sont définies dans la DTD choisie. 6
Environnement de travail Éditeur de texte : Exemple Bloc Notes de windows Éditeur visuel : Frontpage, dreamweaver Editeur classique : Notepad++, Pspad, textpad, … Navigateur web : Internet explorer, firefox, safari, Netscape, Mozilla, … Éditeur utilisé pour ce cours : Notepad++ http://www.clubic.com/lancer-le-telechargement-7616-0-notepad.html 7
Structure d’un document XHTML <?xml version="1.0" encoding="windows-1250"?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <title> Structure d'un document XHTML </title> </head> <body> <!-- Tout le contenu de la page--> <h1> Le corps de la page minimale </h1> </body> </html> 8
Structure d’un document XHTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <title> Structure d'un document XHTML </title> </head> <body> <!-- Tout le contenu de la page--> <h1> Le corps de la page minimale </h1> </body> </html> 9
La mise en forme du texte Les titres <h1> </h1> à <h6> </h6> Les paragraphes <p> </p> Division en blocs <div> <div> </div> Blocs de citation <blockquote> <blockquote> 10
La mise en forme du texte Mettre un texte en gras <b> </b> ou <strong> </strong> Mettre un texte en italique <i> </i> ou <em> </em> Modifier la taille du texte <big> </big> ou <small></small> Mettre du texte en exposant <sup> </sup> Mettre du texte en indice <sub> </sub> Créer un retour à la ligne <br/> 11
Les listes Listes ordonnées Listes non ordonnées <ol> <li> Le langage XHTML </li> <li> Les feuilles de styles </li> <li> Le langage JavaScript </li> </ol> Listes non ordonnées <ul> </ul> 12
Les listes imbriquées Listes ordonnées <ol> <li> Le langage XHTML <li> La structure d'un document XHTML </li> <li> La mise en forme du texte </li> <li> Les listes </li> <li> L'insertion des images et du multimédia </li> </ol> </li> <li> Les feuilles de styles </li> <li> Le langage JavaScript </li> 13
Les listes imbriquées Listes ordonnées <ol> <li> Le langage XHTML <ul> <li> La structure d'un document XHTML </li> <li> La mise en forme du texte </li> <li> Les listes </li> <li> L'insertion des images et du multimedia </li> </ul> </li> <li> Les feuilles de styles </li> <li> Le langage JavaScript </li> </ol> 14
Insertion des images Type d’image : gif, jpeg, png <img/> src : precise l’adresse absolue ou relative du fichier image à afficher alt : fournit un texte descriptif de l’image height : Définit la hauteur de l’image Width : definit la largeur de l’image <img src=«image.jpg» height=«200»/> 15
Image interactive <map> </map> <area/> href : précise l’URL du document cible alt : fournit un texte comme avec <img/> shape : Définit la forme de la zone sensible rect : pour rectangle circle : pour un disque poly : pour un polygone Default : Pour gérer les clics effectués en dehors des zones sensibles coords : définit la dimension de la forme choisie 16
Image interactive (Suite) <map id="regions"> <area href="http://www.site.com" alt="region centrale" shape="rect" coords="142, 118, 188, 180"/> <area href="http://www.site1.com" alt="region Sud-est" shape="circle" coords="180, 98, 16"/> </map> <img usemap="#regions" src="imageCarte.jpg" alt="Carte des regions" width="300" height="350"/> 17
Image et bouton <button> <img src"image.gif" alt="texte"> 18
Insertion d’une animation flash <object data="nav.swf" title="FLASH" type="application/x-shockwave-flash" width="880" height="165" standby="Menu en Flash"> <h1> Objet flash non affiche</h1> </object> 19
Insertion d’une vidéo <object data="jacs.mpg" title="jacs" type="video/mpeg" width="880" height="165" standby="Vidéo Mpeg"> <h1> Objet vidéo non affiche</h1> </object> 20
Insertion d’élément audio <object data="respire.mp3" title="respire" type="audio/mp3" width="880" height="165" standby="Respire"> <h1> Objet Audio non affiche</h1> </object> 21
Insertion d’une applet java <object classid="fichier.class" codetype="application/java" width="880" height="165" standby="Respire"> </object> 22