Jean-Michel Richer

Transcription

1 1 / 87 Développement Web - XML, DOM, XHTML Jean-Michel Richer jean-michel.richer@univ-angers.fr

2 2 / 87 Plan Plan 1 Rappels SGML, XML, XSL 2 Grammaire et DTD 3 Manipuler des documents XML 4 XHTML 5 DOM et Javascript

3 3 / 87 Rappels SGML, XML, XSL Qu est ce que SGML? Definition (SGML - Standard Generalized Markup Language) langage de description de langages à balises norme ISO 8879 :1986 utilisé par les professionels de l industrie de la documentation et de l édition assez complexe séparation fond / forme

8 8 / 87 Rappels SGML, XML, XSL Qu est ce que XML? Definition (XML - extensible Markup Language) issu de SGML standard qui permet de représenter l information de manière structurée de façon à introduire une certaine sémantique. repose sur un langage de balises non prédéfinies facilite l échange d information entre systèmes hétérogènes

12 12 / 87 Rappels SGML, XML, XSL Avantages de XML Avantages de XML séparation du contenu et de la forme extensible données et méta-données supporté par les applications Web fonctions de recherche et transformation lié à SOAP (Simple Object Access Protocol) pour l invocation de méthodes d objets distants

18 Rappels SGML, XML, XSL Inconvénients de XML Inconvénients de XML verbeux (augmentation de la taille des fichiers) consommateur de ressources (représentation en mémoire, processeur) 18 / 87

19 Rappels SGML, XML, XSL Inconvénients de XML Inconvénients de XML verbeux (augmentation de la taille des fichiers) consommateur de ressources (représentation en mémoire, processeur) 19 / 87

20 20 / 87 Rappels SGML, XML, XSL Qu est ce que XSL? Definition (XSL - extensible Stylesheet Language) langage de feuilles de styles descendant de DSSL langage de mise en forme de SGML conçu pour définir la mise en forme des documents XML XSL est divisé en : XSLT un langage de transformation de structure de document XSL-FO pour la mise en forme (Formatting Objects)

21 21 / 87 Rappels SGML, XML, XSL Exemple de fichier XML bibliotheque.xml 1 <?xml version="1.0" encoding="utf-8"?> 2 <!DOCTYPE bibliotheque SYSTEM "bibliotheque.dtd"> 3 <?xml-stylesheet type="text/xsl" href="bibliotheque.xsl"?> 4 <bibliotheque> 5 <livre> 6 <titre>apprendre XML en 10 mois</titre> 7 <liste auteurs> 8 <auteur nom="escargot" prenom="jean" /> 9 <auteur nom="snail" prenom="brad" /> 10 </liste auteurs> 11 <prix>20</prix> 12 </livre> <livre> 15 <titre>learn Java in 10 seconds</titre> 16 <liste auteurs> 17 <auteur nom="fast" prenom="john" /> 18 </liste auteurs> 19 <prix monnaie="dollars">25</prix> 20 </livre> </bibliotheque>

22 22 / 87 Rappels SGML, XML, XSL Description du fichier XML Explication Sur l exemple précédent on décrit des livre qui composent une bibliotheque. Chaque livre se compose : d un titre d une liste d auteur d un prix pour lequel on peut spécifier l attribut monnaie il est possible de décrire plusieurs livres en les plaçant entre les balises <livre> et </livre>

23 23 / 87 Rappels SGML, XML, XSL Exemple de fichier XSL - Liste bibliotheque.xsl 1 <?xml version="1.0" encoding="utf-8"?> 2 <xsl :stylesheet xmlns :xsl="http :// version="1.0"> 3 <xsl :output method="html"/> 4 <xsl :template match="/"> 5 <html> 6 <body bgcolor="#ffffff"> 7 <ul type="square"> 8 <xsl :for-each select="bibliotheque/livre"> 9 <li> 10 <xsl :value-of select="titre" />,<br /> 11 <xsl :for-each select="liste auteurs/auteur"> 12 <i> 13 <xsl :value-of select="./@prenom" /><xsl :text></xsl :text> 14 <xsl :value-of select="./@nom" /> 15 </i>, 16 </xsl :for-each><br /> 17 <xsl :text>prix </xsl :text><xsl :value-of select="prix" /> 18 <xsl :text></xsl :text> 19 <xsl :value-of select="prix/@monnaie" /> 20 </li> 21 </xsl :for-each> 22 </ul> 23 </body> 24 </html> 25 </xsl :template> 26 </xsl :stylesheet>

24 24 / 87 Rappels SGML, XML, XSL Rendu sous forme de liste

25 1 <?xml version="1.0" encoding="utf-8"?> 2 <xsl :stylesheet xmlns :xsl="http :// version="1.0"> 3 <xsl :output method="html"/> 4 <xsl :template match="/"> 5 <html> 6 <body> 7 <table border="1" cellpadding="4"> 8 <xsl :for-each select="bibliotheque/livre"> 9 <tr valign="top"> 10 <td><xsl :value-of select="titre" /></td> 11 <td> 12 <xsl :for-each select="liste auteurs/auteur"> 13 <i> 14 <xsl :value-of select="./@prenom" /><xsl :text></xsl :text> 15 <xsl :value-of select="./@nom" /> 16 </i><br /> 17 </xsl :for-each> 18 </td> 19 <td><xsl :text>prix </xsl :text><xsl :value-of select="prix" /> 20 <xsl :text></xsl :text><xsl :value-of select="prix/@monnaie" /> 21 </td> 22 </tr> 23 </xsl :for-each> 24 </table> 25 </body> 26 </html> 27 </xsl :template> 28 </xsl :stylesheet> 25 / 87 Rappels SGML, XML, XSL Exemple de fichier XSL - Table bibliotheque table.xsl

26 26 / 87 Rappels SGML, XML, XSL Rendu sous forme de table

27 27 / 87 Grammaire et DTD Grammaire DTD Grammaire DTD

28 28 / 87 Grammaire et DTD Prologue du document bibliotheque.xml <?xml version="1.0" encoding="utf-8"?> Aperçu La première ligne indique : la version du langage utilisé l encodage des caractère (utf-8 ou ISO )

29 29 / 87 Grammaire et DTD Déclaration du type de document bibliotheque.xml <!DOCTYPE bibliotheque SYSTEM "bibliotheque.dtd"> La déclaration du type de document (Document Type Declaration) indique : la grammaire (DTD) à laquelle doit se conformer le document le nom de la première balise : bibliotheque

30 Grammaire et DTD DTD Un fichier XML doit se conformer à une grammaire : Definition (Document Type Definition) Une DTD (Document Type Definition) est une grammaire codée au format XML qui permet de décrire la structure générale à laquelle doit se conformer un document XML. Attention! Ne pas confondre Document Type Definition (DTD) de la Document Type Declaration (DOCTYPE) 30 / 87

31 Grammaire et DTD DTD Un fichier XML doit se conformer à une grammaire : Definition (Document Type Definition) Une DTD (Document Type Definition) est une grammaire codée au format XML qui permet de décrire la structure générale à laquelle doit se conformer un document XML. Attention! Ne pas confondre Document Type Definition (DTD) de la Document Type Declaration (DOCTYPE) 31 / 87

32 32 / 87 Grammaire et DTD Exemple de DTD bibliotheque.dtd 1 <?xml version="1.0" encoding="utf-8"?> 2 3 <!ELEMENT bibliotheque (livre+) > 4 <!ELEMENT livre (titre, liste auteurs, prix?) > 5 <!ELEMENT titre (#PCDATA) > 6 <!ELEMENT liste auteurs (auteur+) > 7 <!ELEMENT auteur EMPTY> 8 <!ATTLIST auteur nom CDATA #REQUIRED > 9 <!ATTLIST auteur prenom CDATA #REQUIRED > 10 <!ELEMENT prix (#PCDATA) > 11 <!ATTLIST prix monnaie CDATA #IMPLIED> 12 13

33 33 / 87 Grammaire et DTD Structure de la DTD bibliotheque.dtd <!ELEMENT bibliotheque (livre+) > La première ligne déclare que la balise bibliotheque contiendra un ensemble de balises livre. On peut spécifier : + : de 1 à plusieurs * : de 0 à plusieurs? : de 0 à 1 (élément optionnel) sans indication, il s agit d une seule occurrence

34 34 / 87 Grammaire et DTD Structure de la DTD bibliotheque.dtd <!ELEMENT livre (titre, liste_auteurs, prix?) > de la même manière, une balise livre contiendra : une balise titre suivie d une balise liste auteurs suivie éventuellement d une balise prix Remarque : a b signifie a ou (exclusif) b

35 35 / 87 Grammaire et DTD Structure de la DTD bibliotheque.dtd <!ELEMENT titre (#PCDATA) > un titre sera composé d une chaîne de caractères (Parsed Character DATA) sans symboles <,>. On peut également utiliser les symboles : CDATA : données brutes entre guillemets non anamysées MIXED : texte et éléments < et > ANY : n importe quoi

36 36 / 87 Grammaire et DTD Structure de la DTD bibliotheque.dtd <!ELEMENT auteur EMPTY> <!ATTLIST auteur nom CDATA #REQUIRED > <!ATTLIST auteur prenom CDATA #REQUIRED > un auteur ne contient pas d information( EMPTY) mais utilise deux attributs nom et prenom composés de caractères alphanumériques. On peut indiquer : #REQUIRED : que l attribut doit être défini explicitement #IMPLIED : optionnel #DEFAULT : possède une valeur par défaut définie par une valeur entre guillemets

37 37 / 87 Grammaire et DTD Entité simple Definition (Entité) nom de substitution pour un morceau texte (équivalent du #define en C) utilisation d une entité simple <!ENTITY progc "programmation en langage C"> <keyword> &proc </keyword>

38 38 / 87 Grammaire et DTD Entité paramètre Definition (Entité paramètre) entité qui peut être réutilisée dans la DTD entité paramètre <!ENTITY % string "(#PCDATA)"> <!ELEMENT titre %string; >

39 39 / 87 Manipuler des documents XML Manipulation des documents XML Manipuler les Documents XML

40 Manipuler des documents XML Manipuler XML : DOM et SAX DOM et SAX il existe 2 principales interfaces de manipulation pour la lecture des documents XML : DOM (Document Object Model) basée sur une représentation hierarchique SAX (Simple API for XML) basée sur des déclencheurs d action 40 / 87

41 41 / 87 Manipuler des documents XML Le DOM Definition (Document Object Model) Le DOM est l interface de programmatiion (API) qui permet au développeur web d accéder et de manipuler le contenu d un document XML. Appliqué aux pages web, il permet notamment : une représentation structurée et orientée objet des éléments et du contenu la modification des propriétés de ces objets par l intermédiaire de méthodes l ajout et la suppression d objets la gestion des évènements du navigateur

42 42 / 87 Manipuler des documents XML Propriétés de l API DOM Caractéristiques de DOM 1 recommandation du W3C 2 spécification générale qui donne lieu à de multiples implantations 3 pas vraiment orienté objet (ou mal conçu) 4 construit une représentation en mémoire du document sous forme d arbre 5 adaptée aux petits fichiers et traitement du document entier

43 43 / 87 Manipuler des documents XML Les normes du DOM Versions du DOM Il existe plusieurs évolutions du DOM standardisées par le W3C : 1 DOM Level 1 (Core + HTML) depuis DOM Level 2 (Core + Event + Style + Views + Traversale and range) depuis DOM Level 3 (En cours de finalisation)

44 Manipuler des documents XML L arbre d éléments Arbre des éléments de part sa structure, un document XML est représenté sous forme arborescente cette arborescence possède : une racine, des noeuds, des feuilles Note visualiation structure du document sous Firefox (+DOM Inspector) ou xmltreenav (+xmldiff) 44 / 87

45 Manipuler des documents XML L arbre d éléments Arbre des éléments de part sa structure, un document XML est représenté sous forme arborescente cette arborescence possède : une racine, des noeuds, des feuilles Note visualiation structure du document sous Firefox (+DOM Inspector) ou xmltreenav (+xmldiff) 45 / 87

46 46 / 87 Manipuler des documents XML Diagramme UML de l API DOM DOMNodeList length : int + item(index : int) : DOMNode DOMNamedNodeMap + getnameditem(item : string) : DOMNode + item(index : int) : DOMNode DomNode + nodename : string + NodeValue : string + parentnode : DOMNode + text_content : string + childnodes : DOMNodeList + appendchild(newnode : DOMNode) : DOMNode + haschildnodes() : bool + hasattributes() : bool DOMText DomCharacterData DomComment DOMElement DOMDocument encoding : string xmlversion : string + createelement(name : string, value : string) + createtextnode(content : string) + getelementbyid(elementid : string) + getelementsbytagname(name : string) : DOMNodeList DOMEntity

47 Manipuler des documents XML Noeud DOM DOMNode Les attributs sont : nodename (string) nom du noeud nodetype (int) type du noeud nodevalue (string) valeur childnodes (DOMNodeList) liste des enfants parentnode (DOMNode) noeud parent firstchild, lastchild (DOMNode) previoussibling, nextsibling (DOMNode) 47 / 87

48 48 / 87 Manipuler des documents XML L API SAX Caractéristiques de SAX 1 basée sur des triggers qui se déclenchent lors de la lecture de balises 2 adaptée au traitement local de gros fichiers 3 adaptée à des langages compilés comme C++, Java

49 49 / 87 Manipuler des documents XML Manipuler des docucments XML sous PHP DOM sous PHP à partir de PHP 5 on peut utiliser l API DOM ou SimpleXML (très simple) l analyseur syntaxique XML (sorte de SAX) dans les versions antérieures (PHP 4) on utilisait DOM XML

50 Manipuler des documents XML Créer un document XML avec DOM sous PHP On précise : la version l encodage des caractères DOMDocument 1 $dom = new DOMDocument( 1.0, iso ) ; 2 echo $dom->savexml() ; 50 / 87

51 51 / 87 Manipuler des documents XML Charger un document XML/HTML Chargement d un document XML load(file) pour un fichier XML loadhtmlfile(file) pour un fichier HTML loadxml(string) à partir d une chaîne loadhtml(string) à partir d une chaîne ces fonctions retournent true en cas de succès et false en cas d erreur

52 52 / 87 Manipuler des documents XML Exemple de chargement exemple de chargement 1 $dom=new DOMDocument(); 2 if ($dom->load( bibliotheque.xml )==false) { 3 die("error load") ; 4 } 5 if ($dom->loadxml( <personnes></personnes> )==false) { 6 die("error loadxml") ; 7 }

53 53 / 87 Manipuler des documents XML Valider un document XML par rapport à une DTD Utilisation de PHP 5 : les erreurs éventuelles seront affichées. La fonction validate retourne true en cas de succès. xml validator.php 1 error reporting(e WARNING) ; 2 $dom=new DomDocument() ; 3 $dom->load("bibliotheque.xml"); 4 if ($dom->validate() == true) { 5 echo "Document valide\n" ; 6 }

54 54 / 87 Manipuler des documents XML Sauvegarder un document XML/HTML Sauvegarde d un document XML/HTML save(file) pour un fichier XML savehtmlfile(file) pour un fichier HTML ces fonctions retournent le nombre d octets écrits en cas de succès et false en cas d erreur string savexml(void) string savehtml(void) ces fonctions retournent une chaîne XML/HTML en cas de succès et false en cas d erreur

55 55 / 87 Manipuler des documents XML Exemple de sauvegarde exemple de sauvegarde 1 $dom=new DOMDocument(); 2 $root=$dom->createelement( bibliotheque, ); 3 $dom->appendchild($root); 4 if ($dom->save( dummy.xml )==false) { 5 die("error save") ; 6 } 7 echo $dom->savexml() ; résultat <?xml version="1.0"?> <bibliotheque></bibliotheque>

56 56 / 87 Manipuler des documents XML Exemple de sauvegarde exemple de sauvegarde 1 $dom=new DOMDocument(); 2 $root=$dom->createelement( bibliotheque, ); 3 $dom->appendchild($root); 4 if ($dom->save( dummy.xml )==false) { 5 die("error save") ; 6 } 7 echo $dom->savexml() ; résultat <?xml version="1.0"?> <bibliotheque></bibliotheque>

57 Manipuler des documents XML Créer d un document XML/HTML Création d un document XML/HTML les fonctions principales sont : DOMElement createelement(string name, string value) DOMText createtextnode(string name) DOMAttr createattribute(string name) appendchild(domnode node) 57 / 87

58 58 / 87 Manipuler des documents XML Exemple de création exemple de création 1 $dom=new DOMDocument( 1.0, iso ) ; 2 $root element=$dom->createelement( bibliotheque, ); 3 $dom->appendchild($root element) ; 4 $livre=$dom->createelement( livre, ); 5 $root element->appendchild($livre); 6 $titre=$dom->createelement( titre, Apprendre XML ) ; 7 $livre->appendchild($titre); 8 $prix=$dom->createelement( prix, 20 ); 9 $livre->appendchild($prix); 10 $monnaie=$dom->createattribute( monnaie ); 11 $montant=$dom->createtextnode( euro ); 12 $monnaie->appendchild($montant); 13 $prix->appendchild($monnaie); 14 echo $dom->savexml() ;

59 Manipuler des documents XML Parcourir un document XML/HTML Parcours d un document XML/HTML les fonctions principales sont : DOMElement getelementbyid(string elementid) DOMNodeList getelementsbytagname(string name) 59 / 87

60 Manipuler des documents XML Exemple de parcours exemple de parcours 1 function parcours attributes($node) { 2 if (!$node->hasattributes()) return ; 3 foreach($node->attributes as $key => $subnode) { 4 echo " $key=".$subnode->nodevalue; 5 } 6 } 7 function parcours($node,$nbr) { 8 if ($node->haschildnodes()) { 9 foreach(range(0,$node->childnodes->length-1) as $index) { 10 $subnode=$node->childnodes->item($index); 11 if ($subnode->nodetype==1) { 12 foreach(range(0,4*$nbr) as $i) echo " " ; 13 echo "+".$subnode->nodename." = ".trim($subnode->nodevalue); 14 parcours attributes($subnode); echo "\n" ; 15 parcours($subnode,$nbr+1); 16 } 17 } 18 } 19 } 20 $dom=new DOMDocument(); 21 $dom->load( bibliotheque.xml ); 22 $liste=$dom->getelementsbytagname( livre ); 23 foreach(range(0,$liste->length-1) as $ndx livre) { 24 $livre=$liste->item($ndx livre) ; 25 echo "livre $ndx livre\n" ; 26 parcours($livre,1) ; 27 } 60 / 87

61 61 / 87 Manipuler des documents XML Exemple de parcours résultat du parcours livre 0 +titre = Apprendre XML en 10 secondes +liste auteurs = +auteur = nom=sanpeur prenom=jean +auteur = nom=pitre prenom=brad +prix = 20 monnaie=euro livre 1 +titre = Apprendre Java en 10 secondes +liste auteurs = +auteur = nom=nofear prenom=john +prix = 25 monnaie=euro

62 62 / 87 Manipuler des documents XML Interrogation d un document avec XPath Definition (XPath) il s agit d un langage d interrogation de fichiers XML : / racine //titre tous les noeuds titre //liste auteurs/auteur tous les noeuds auteur à l intérieur de liste auteurs //prix[@monnaie] tous les noeuds prix qui ont un attribut monnaie //prix[@monnaie= dollars ] tous les noeuds prix qui ont un attribut monnaie égal à dollars

63 Manipuler des documents XML Parcours avec XPath exemple de parcours avec DOMXPath 1 $doc = new DOMDocument() ; 2 $doc->load("bibliotheque.xml"); 3 $xpath = new DOMXpath($doc) ; 4 echo "traiter les titres\n" ; 5 $elements=$xpath->query("//titre"); 6 if (!is null($elements)) { 7 foreach ($elements as $element) { 8 echo "=> ". $element->nodename. " : " ; 9 $nodes = $element->childnodes; 10 foreach ($nodes as $node) echo $node->nodevalue. "\n" ; 11 } 12 } 13 echo "\ntraiter les noms des auteurs\n" ; 14 $elements = $xpath->query("//auteur[@nom]"); 15 if (!is null($elements)) { 16 foreach ($elements as $element) { 17 echo "=>". $element->nodename. " ". $element->getattribute("nom")."\n"; 18 } 19 } 20 echo "\ntraiter les noms et prenoms des auteurs\n" ; 21 $elements = $xpath->query("//auteur"); 22 if (!is null($elements)) { 23 foreach ($elements as $element) { 24 echo "=>". $element->nodename. " ". $element->getattribute("nom"). 25 " ".$element->getattribute("prenom")."\n"; 26 } 27 } 63 / 87

64 64 / 87 Manipuler des documents XML Résultat du parcours avec DOMXPath Résultat parcours avec DOMXPath traiter les titres => titre : Apprendre XML en 10 mois => titre : Learn Java in 10 seconds traiter les noms des auteurs =>auteur Escargot =>auteur Snail =>auteur Fast traiter les noms et prenoms des auteurs =>auteur Escargot Jean =>auteur Snail Brad =>auteur Fast John

65 65 / 87 Manipuler des documents XML Utilitaire xpath Definition (xpath -e query file) xpath est un utilitaire PERL qui permet de sélectionner les balises d un fichier XML. Les options en ligne de commande sont : -e query requête à exécuter -q mode silencieux -s suffix placer le suffixe (par défaut retour chariot) à la fin de chaque ligne -p prefix placer le préfixe (par défaut rien) au début de chaque ligne xpath Sous Ubuntu installer le package libxml-xpath-perl

66 66 / 87 Manipuler des documents XML Utilitaire xpath Definition (xpath -e query file) xpath est un utilitaire PERL qui permet de sélectionner les balises d un fichier XML. Les options en ligne de commande sont : -e query requête à exécuter -q mode silencieux -s suffix placer le suffixe (par défaut retour chariot) à la fin de chaque ligne -p prefix placer le préfixe (par défaut rien) au début de chaque ligne xpath Sous Ubuntu installer le package libxml-xpath-perl

67 67 / 87 Manipuler des documents XML Exemple d utilisation de xpath Exercice trouver le montant total de tous les livres de la bibliothèque : montant des livres en euros montant des livres en dollars

68 68 / 87 Manipuler des documents XML Exemple d utilisation de xpath Solution 1 #!/bin/sh 2 3 cat bibliotheque.xml grep -v "ˆ<?" grep -v "ˆ<\!">bibliotheque2.xml 4 5 total= xpath -e "//prix" -q bibliotheque2.xml cut -d > -f2 \ 6 cut -d < -f1 awk { sum += $1 } ; END { print sum } 7 dollars= xpath -e "//prix[@monnaie= dollars ]" -q bibliotheque2.xml \ 8 cut -d > -f2 cut -d < -f1 awk { sum += $1 } ; END { print sum } 9 10 echo "total = $total" 11 echo "dollars = $dollars" euros= expr $total - $dollars echo "euros = $euros"

69 69 / 87 Manipuler des documents XML Utilisation de SimpleXML Definition (SimpleXML) L extension SimpleXML fournit des outils très simples et faciles à utiliser pour convertir du XML en un objet qui peut être manipulé avec ses propriétés et les itérateurs de tableaux.

70 70 / 87 Manipuler des documents XML Exemple de parcours SimpleXML exemple de parcours avec SimpleXML 1 $xml=simplexml load file("bibliotheque.xml"); 2 print r($xml) ; 3 foreach($xml->livre as $livre) { 4 echo " \n"; 5 echo "titre : ".$livre->titre."\n"; 6 $liste auteurs=$livre->liste auteurs->auteur ; 7 foreach($liste auteurs as $auteur) { 8 echo "auteur : ".$auteur["prenom"]." ".$auteur["nom"]."\n"; 9 } 10 echo "prix : ".$livre->prix." ".$livre->prix["monnaie"]."\n"; 11 }

71 71 / 87 Manipuler des documents XML Résultat du parcours avec SimpleXML résultat (première partie) SimpleXMLElement Object ( [livre] => Array ( [0] => SimpleXMLElement Object ( [titre] => Apprendre XML en 10 mois [liste auteurs] => SimpleXMLElement Object ( [auteur] => Array ( [0] => SimpleXMLElement Object ( [@attributes] => Array ( [nom] => Escargot [prenom] => Jean ) ) [1] => SimpleXMLElement Object ( [@attributes] => Array ( [nom] => Snail [prenom] => Brad ) ) ) ) [prix] => 20 )... ) )

72 72 / 87 Manipuler des documents XML Résultat du parcours avec SimpleXML résultat (deuxième partie) titre : Apprendre XML en 10 mois auteur : Jean Escargot auteur : Brad Snail prix : titre : Learn Java in 10 seconds auteur : John Fast prix : 25 dollars

73 73 / 87 XHTML XHTML XHTML

74 74 / 87 XHTML Intéret de HTML Definition (HTML - HyperText Markup Language) 1 application de SGML 2 créé par Tim Berners-Lee pour le World Wide Web 3 très facile à apprendre 4 création de pages HTML possible pour tout le monde

75 75 / 87 XHTML XHTML Definition (XHTML) 1 mise au format XML de HTML 2 bannir les balises de présentation (comme <b>, <i>, <u>,<font>) 3 rendu (forme) grâce au CSS 4 notion de validité d un document (XHTML / CSS Validator) 5 contrôle par javascript (navigateur)

76 76 / 87 XHTML Conventions XHTML Conventions les tags XHTML doivent être écrits en minuscule tous les tags doivent être fermés <p> </p> pour les tags uniques, on utilise / : <br /> tout document doit débuter par une DTD http ://w3schools.com/xhtml/xhtml dtd.asp les images doivent définir le tag alt tous les caractères spéciaux doivent être encodés (http ://w3schools.com/tags/ref entities.asp) tous les attributs doivent être entourés de double quotes

77 XHTML Conventions XHTML Conventions structure et éléments de texte utilisation des <div id=... > éléments de structure du texte : paragraphe : p tableaux : table, tr, td listes : ul, ol, li éléments de texte : em, strong, blockquote, h1 à h5 77 / 87

78 78 / 87 XHTML Prologue XHTML Prologue XHTML reposant sur XML, il est recommandé d utiliser en début de document la balise : <?xml version="1.0" encoding="iso "?>.

79 79 / 87 XHTML DTD du Document XHTML XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" SYSTEM " XHTML 1.0 Tansitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" SYSTEM " XHTML 1.0 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" SYSTEM "

80 80 / 87 XHTML Entête d un Document XHTML XHTML 1.0 Strict <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" SYSTEM " <html lang="en" xml:lang="en" xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" />... </head>

81 81 / 87 XHTML Un mot dur l habillage des tableaux balises élémentaires : <table> création <caption> légende <tr> ligne <th> cellule entête <td> cellule balises complémentaires : <thead> groupe de cellules entête <tbody> groupe de cellules de contenu <tfoot> groupe de cellules bas de tableau <thead> et <tfoot> doivent être déclarés avant <tbody>

82 82 / 87 DOM et Javascript DOM et Javascript DOM et Javascript

83 83 / 87 DOM et Javascript DOM et Javascript DOM et Javascript Dans le cadre de Javascript on utilise principalement les fonctions suivantes pour accèder aux éléments du document : getelementbyid(string) : retourne l unique élément d identifiant spécifié getelementsbyname(string) : retourne une collection d éléments de nom spécifié getelementsbytagname(string) : retourne une collection d éléments pour la balise donnée Note cela suppose que les éléments à manipuler sont dotés d un id

84 84 / 87 DOM et Javascript DOM et Javascript DOM et Javascript Dans le cadre de Javascript on utilise principalement les fonctions suivantes pour accèder aux éléments du document : getelementbyid(string) : retourne l unique élément d identifiant spécifié getelementsbyname(string) : retourne une collection d éléments de nom spécifié getelementsbytagname(string) : retourne une collection d éléments pour la balise donnée Note cela suppose que les éléments à manipuler sont dotés d un id

85 85 / 87 DOM et Javascript Javascript et les événements du navigateur événements du navigateur On peut associer une fonction javascript lors du déclenchement de certains événements : onload : chargement de la page onclick, ondblclick onfocus, onblur : gain ou perte de focus onchange onmouseover, onmouseout, onmousemove onmouseup, onmousedown

86 86 / 87 DOM et Javascript DOM et Javascript Exemples voir les exemples sur le site web :

87 87 / 87 DOM et Javascript Fin Fin