La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Paul Franchi CIP1 - CMD 2008-09 13/01/2014 Transparent - 1 Création & Manipulation de Documents 2 versions.ppt à télécharger avec le répertoire DOC/.pdf.

Présentations similaires


Présentation au sujet: "Paul Franchi CIP1 - CMD 2008-09 13/01/2014 Transparent - 1 Création & Manipulation de Documents 2 versions.ppt à télécharger avec le répertoire DOC/.pdf."— Transcription de la présentation:

1 Paul Franchi CIP1 - CMD /01/2014 Transparent - 1 Création & Manipulation de Documents 2 versions.ppt à télécharger avec le répertoire DOC/.pdf à afficher sous votre navigateur 2 versions.ppt à télécharger avec le répertoire DOC/.pdf à afficher sous votre navigateur Révision du 13/01/2014 Definitions: Graphes, Arbres, Blaisage, Arbre, Parenthéses..

2 Transparent 2 13/01/2014 Sommaire du Cours n Chap I - Documents Structurés: Historique, Modèle, Codage, Standards et Références Chap I - n Chap II - Le langage (X)HTML: "Hyper Text Markup Language" Chap II n Chap III - Le meta-langage XML: "eXtensible Markup Language" Chap III n Chap IV - Les feuilles de style CSS: "Cascading Style Sheets" Chap IV

3 Transparent 3 13/01/2014 Programme des TPs (version 2007_08) n HTML - le Balisage n HTML - le Style avec la balise n CSS - les Feuilles de Style Externes n XML - la Structure Logique (introduction) n LaTeX n Word - n Excel - n PowerPoint - Enseignants 2009 n Paul Franchi n Maria Kulikova n Hélène Renard

4 Paul Franchi CIP1 - CMD /01/2014 Transparent - 4 Chapître I - Documents Structurés Historique & Standards Lexique Références Modèle de Documents Création & Manipulation de Documents

5 Transparent 5 13/01/2014 Introduction n Documents et Informatique: n (R)évolution ?

6 Transparent 6 13/01/2014 Documents "Electroniques" n Fichiers & Répertoires n Codages n Formats & Extensions & Applications & O.S. binaire ASCII ANSI UNICODE.txt.tex.csv.rtf.ps.pdf.dvi.c.java.js.vb.php.sh.exe.jar.tar.zip.jpg.gif.png.swf.mp3.wav.aac.aiff.avi.mov.vob.mpeg.doc.xls.ppt.htm.html.xml.css

7 Transparent 7 13/01/2014 Codages n UNICODE (UCS, 1991) - UTF-8 & UTF-16 permet de représenter un caractère par un code sur 1 à 4 octets, indépendant de tout système d'exploitation ou langage de programmation. compatible avec le code ASCII (UTF-8) regroupe ainsi la quasi-totalité des alphabets existants (arabe, arménien, cyrillique, grec, hébreu, latin,...) n ASCII - 7 bits (1960) ASCII – American Standard Code for Information Interchange n ASCII étendu ANSI - 8 bits en pratique: n utf-8 n iso n iso-latin-1-unix n iso-latin-1-dos

8 Transparent 8 13/01/2014 Fichiers: Formats, Extensions & Applications ExtensionsFormatsApplications.txt.csv.rtf.c.java.cpp.h.sql.sh.js.php.cgi.htm.html.xml.css.tex texte, source LP, source script, source Doc, éditeurs, compilateurs, env de prog. navigateurs, etc bin.exe.dmg.zip.jar.tar.gz.lnk.tmp.old binaire, compressé, etc. systèmes.ps.pdf.dviformat de sortieimpression, visualisation.jpeg.gif.png.pic.tiff.swfimagegraphique.mp3.wav.aac.aiffmusiquemultimédia.avi.mov.vob.mpegvideomultimédia.doc.xls.pptMS OfficeOffice

9 Transparent 9 13/01/2014 Survol du Domaine n Documents "Electroniques" n Modèles de Documents: SGML, W3C, DTD, XSD n Langages & Balises: TeX, LaTeX, HTML, XML, XHTML n Langages de Style: ODA, DSSL, CSS, XSL n Langages de Script: JavaScript, JScript, VBScript, PHP, ASP n Transformations et Echanges : XSLT, XPath, XLink, etc. n API: DOM, SAX n Editeurs: Emacs, FrontPage, Dreamweaver, Kompozer, Nvu, Office, etc. n Navigateurs: Netscape, I.E, Firefox, Mozilla, Safari, Opéra n Processeurs: Apache, Xalan, Saxon, etc.

10 Transparent 10 13/01/2014 n Web les cours de l'EPU Création & Manipulltion de Document Introduction to Internet Langages & Documents W3C tutorial : Mozilla Development Center W3C, Web Developer's Bookmarks n Biblio: nombreux ouvrages Références

11 Transparent 11 13/01/2014 Documentation et Manuels n Documents du web liste de balises HTML code des couleurs RVB code HTML des caractères ISO code HTML des caractères ISO liste des extensions de fichiers (formats) liste des extensions de fichiers (formats) Expressions Rationnelles n Manuels. Expressions régulières sous Emacs Expressions régulières sous Emacs Recherche et remplacement sous Emacs Recherche et remplacement sous Emacs compléments Emacs grep sous Unix n Tutoriaux du Web W3C : CSS Play : Zen Garden : CSS in10 steps : training/css/positioning/ training/css/positioning/ 10 steps to better CSS: r_css/ r_css/

12 Transparent 12 13/01/2014 Historique et Standards n GML – Generalized Markup Language IBM, 1960s 3 initiales des inventeurs n SGML - Standard Generalized Markup Language norme ANSI, 1983 norme ISO, 1986 n HTML – HyperText Markup Language CERN, Genève, 1992 n Standards du W3C (MIT, Mass, 1994) XML – eXtensible Markup Language, 1998 HTML- 4.01, 1999 XHTML- 1.0, 2000 CSS1 & CSS2 - Cascading Style Sheets DOM – Document Object Model etc.

13 Transparent 13 13/01/2014 Lexique API – Application Programming Interface ANSI – American National Standards Institute ASCII – American Standard Code for Information Interchange (128 car.) AJAX – Asynchronous JavaScript & XML CSS – Cascading Style Sheets DOM – Document Object Model DTD – Document Type Definition HTML – HyperText Markup Language DHTML – Dynamic HTML ISO- International Standards Organization Mozilla - Fondation (global community for free and open Internet software)) RDF - Resource Description Framework RSS- Really Simple Syndication SGML- Standard Generalized Markup Language SOAP- Simple Access Object Protocol SVG - Scalable Vector Graphics UNICODE – World wide Code UCS - Universal Character Set UTF-8/-16 – Unicode Transformation Format - 1 (ASCII) à 4 octets URL / URI – Uniform Resource Locator / Identifier XML – eXtensible Markup Language XBL – XML Binding Language (Mozilla) XForms – XML Forms XHTML – HTML 4 en XML XLink – XML Linking Language XPath – XML Path Language XPointer – XML Pointer Language XSL - eXtensible Stylesheet Language XSLT – XSL Transformations XSL-FO – XSL Formatting Objects XSD – XML Schémas Définition Language XUL – XML User Language (Mozilla) W3C – World Wide Web Consortium Web2.0– Web dit "sémantique"

14 Transparent 14 13/01/2014 Navigateurs ("Web Browsers") n Historiques: Mosaîc, I.E. Netscape liste de navigateurs sur Wikipédia n Internet Explorer 6 => 7 ss Win, Linux HTML 4.01, XHTML 1.0, XML, CSS2, DOM n Safari 3 ss Mac OS, Win HTML 4.01, XHTML 1.0, XML, CSS2, DOM n Mozilla ss Win, Mac OS, Linux n Firefox => HTML 4.01, XHTML 1.0, XML, CSS2+, DOM n Opera 9 ss Win, Mac OS, Linux n Konqueror ss KDE n Google Chrome (le plus récent) Un navigateur supporte la consultation du Web (affichage des ressources). Il comporte: une couche réseau avec des protocoles: http: https: ftp:d'accès à des adresses URL. un moteur de rendu: interpréteur html, css, xml, xsl, script, java, etc. une interface utilisateur: menus, "widgets", historique, signets un gestionnaire de "plugins" pour divers formats

16 Transparent 16 13/01/2014 Traitement de document: lapproche hiérachique (ou arborescente) n Structure logique Une arborescence enracinée des composants ou éléments (I.e. nœuds-balises) "Document Type Definition" (DTD) "XML-schémas" (XSD) "Document Object Model" (DOM) n Structure de format (« layout ») Une attribution de formatage (ODA, DSSL) Un balisage libre (TeX, HTML) Un balisage (LaTeX, XHTML, XML) bien parenthésé (emboîtements) n Un format de Présentation (rendu, sortie).ps,.dvi, etc Visualisation.pdf etc.

17 Transparent 17 13/01/2014 Définitions indispensables en Informatique n Graphes: nœud (sommet), arête (arc) orientation, connexité chemin, cycle, circuit n Arbres & Arborescences racine hauteur, largeur, profondeur parcours & ordres n Langages Formels vocabulaire, mot grammaire, automate analyse syntaxique validation "sémantique" n Expressions Régulières (rationnelles) ss shell, grep, Emacs avec Java, JS, Python, Perl Un graphe est un modèle Entités (nœuds) - Relations (arêtes). Un arbre est un graphe connexe sans cycle. Une arborescence est un arbre enraciné (racine unique) et orienté (ordre partiel père-fils); souvent dessiné (ordre partiel des frères); (ordre total avec un parcours canonique) Un Langage de Programmation (L.P.) ou de Document (HTML, XML) est un Langage Formel défini par une grammaire syntaxique. Un texte source (L.P., HTML, XML) est un mot syntaxiquement valide. Une expression régulière (RegExp) est une expression bien parenthésée (motif, "pattern") validant un ensemble de "mots" (termes) sur un vocabulaire; s'écrit avec des caractères (opérateurs) spéciaux: ( ) [ ] + * ?. \ [a-zA-Z_.]+\.html

18 Transparent 18 13/01/2014 Un modèle de lettre: une entité (exemplaire) M. Martin Société S SA Le 4/11/2002 à M. DURAND Société R. Dpt Informatique Ref: MM25 Objet: à voir Monsieur, Jai lhonneur de porter à votre attention 1.le premier point aaaaaaaaaaaaaa bbbbbbb 2.le deuxième 3.etc. Sincères salutations, M. X

19 Transparent 19 13/01/2014 Un modèle de lettre: une structure logique arborescente M. Martin Société S SA Le 4/11/2002 à M. DURAND Société R. Dpt Informatique Ref: MM25 Objet: à voir Monsieur, Jai lhonneur de porter à votre attention 1.le premier point aaaaaaaaaaaaaa bbbbbbb 2.le deuxième 3.etc. Sincères salutations, M. X Lettre EN TETE auteur nom adr datedestinataire nom soc dpt CORPS pretexte ref obj texte pol intro section sssection PIED politessesignature

20 Transparent 20 13/01/2014 Un modèle de lettre: une structure logique générique Lettre EN TETE auteur nom adr datedestinataire nom soc dpt CORPS pretexte ref obj texte pol intro section sssection PIED politessesignature ? * * ? ? ? ? Méta-opérateurs des expressions régulières ? (0 ou 1) + (1 ou plusieurs) * (0 ou plusieurs) + ?

21 Transparent 21 13/01/2014 Lettre: structure arborescente de format (« layout ») M. Martin Société S SA Le 4/11/2002 à M. DURAND Société R.Dpt Informatique Ref: MM25 Objet: à voir Monsieur, Jai lhonneur de porter à votre attention 1.le premier point aaaaaaaaaaaaaa bbbbbbb 2.le deuxième 3.etc. Sincères salutations, M. X

22 Paul Franchi CIP1 - CMD /01/2014 Transparent - 22 Chap II - HTML Balisage Texte & Style Lien Liste Table Image Cadre Forme Création & Manipulation de Documents

23 Transparent 23 13/01/2014 HTML - Hyper Text Markup Langage n On le texte «source» (ou "contenu" du document) avec un ensemble fini de balises «tags» n le formatage initial du texte source établit un ordre entre les éléments du contenu, mais aucune indication despacement (lignes, espaces ou tabulations) n Les balises HTML jouent un double rôle: structuration logique du document format de présentation (« layout ») n Le principe de structuration est celui des systèmes de parenthèses (ou arborescences) mais le parenthésage du balisage nest pas vérifié. n Le principe de formatage est celui des emboîtements rectangulaires

24 Transparent 24 13/01/2014 Une lettre en HTML (version simpliste) M. Martin Société S. Avenue A SA Le 4/11/2002 à M. DURAND Société R. Dpt Informatique Ref: MM25 Objet: à voir Monsieur, Jai lhonneur de porter à votre attention le premier point aaaaaaaaaaaaaa bbbbbbb le deuxième etc. Sincères salutations, M. X

25 Transparent 25 13/01/2014 Survol dHTML (version 4.01) n Balisage une balise sécrit avec deux caractères spéciaux de début et fin de balise et un identificateur(nom) prédéfini le balisage structure le source en éléments le balisage associe une balise ouvrante et une fermante par paire (non obligatoire). le texte entre une balise ouvrante et une fermante est le contenu de lélément le balisage est insensible à la casse (préférer les minuscules, obligatoires en XHTML) n Attributs de balises une balise peut comporter 0 ou plusieurs paires attribut = "valeur" sans ou avec (préférer) quotes doubles " " ou simples ' '

26 Transparent 26 13/01/2014 HTML - source type (version simpliste) Titre de la page dans le navigateur

27 Transparent 27 13/01/2014 XHTML - source type (version simpliste) Titre de la page dans le navigateur

28 Transparent 28 13/01/2014 Balisage, Indentation, & Parenthèses Titre de la page... ( ( ) ) ( (... ) ( ( ( ) ) )

29 Transparent 29 13/01/2014 Balisage & Arborescence Titre de la page... html head title body p aulliimg

30 Transparent 30 13/01/2014 Survol dHTML (version 4.01) n Commentaires n Structuration & formats le contenu Grand Titre petit titre paragraphe break (ligne suivante) séparation horizontale n Alignements grand titre à centrer paragraphe à gauche texte à centrer

31 Transparent 31 13/01/2014 Mon "premier" HTML Mon Premier HTML HTML, c'est une affaire de balises! Paragraphe <1> sur plusieurs lignes..... Paragraphe <2> sur plusieurs lignes..... avec la Couleur, c'est mieux EN ROUGE EN VERT EN BLEU un Logo trés connu ? un (Hyper)lien trés connu ? Polytech Sophia

32 Transparent 32 13/01/2014 Survol dHTML - Textes n Text Tags : styles & formats Defines bold text Defines big text Defines emphasized text Defines italic text Defines small text Defines strong text Defines subscripted text Defines superscripted text Defines inserted text Defines deleted text Deprecated. Use instead Deprecated. Use styles instead

33 Transparent 33 13/01/2014 Survol dHTML - Autres textes n "Computer Output" Tags Defines computer code text Defines keyboard text Defines sample computer code Defines teletype text Defines a variable Defines preformatted text Deprecated. Use instead n Citations, Quotations, and Definition Tags Defines an abbreviation Defines an acronym Defines an address element Defines the text direction ("rightToLeft") Defines a long quotation Defines a short quotation Defines a citation Defines a definition term

34 Transparent 34 13/01/2014 Survol dHTML - Fontes & Styles n Font Attributes AttributeExamplePurpose size="number"size="2"Defines the font size="+number"size="+1"Increases the font size="-number"size="-1"Decreases the font face="face-name"face="Times"Defines the font-name color="color-value"color="#eeff00"Defines the font color color="color-name"color="red"Defines the font color n Style Tags Defines a style definition Defines a resource reference Defines a section in a document Deprecated. Use styles instead

35 Transparent 35 13/01/2014 Survol dHTML - Codes spéciaux n The Most Common Character Entities: Result Description Entity Name Entity Number non-breaking space   < less than < < > greater than > > & ampersand & & " quotation mark " " ' apostrophe ' (not in IE) ' n Some Other Commonly Used Character Entities: Result Description Entity Name Entity Number ¢ cent ¢ ¢ £ pound £ £ ¥ yen ¥ ¥ § section § § © copyright © © ® regist. trademark ® ® × multiplication × × ÷ division ÷ ÷

36 Transparent 36 13/01/2014 La balise et le source des L.P. Source Java avec la balise < pre > //FIchier Arbralea.java import java.awt.*;//Pour Graphics et Frame public class Arbralea extends Frame { static final int WIDTH = 800; // Taille initiale de la Frame static final int HEIGHT = 1200; static final int max =5 ; // nombre maximum de branches filles static final float proba = (float)0.7; // proba de chaque branche fille static final float div = (float)1.3; // la longeur de la branche fille // est celle de la mere divisee //par un facteur entre div et div +1 public static void main(String args[]) { Arbralea t = new Arbralea(); t.setSize(WIDTH, HEIGHT); t.setVisible(true); t.setBackground (Color.white); }

37 Transparent 37 13/01/2014 Survol dHTML - Listes n List Tags an ordered list an unordered list a list item a definition list a definition term a definition description A Definition List: Coffee Black hot drink Milk White cold drink n Attributs de liste type= pour : disc, circle, square pour : A, a, I, i, 1 value= pour : un rang de numérotation start= pour : un rang de numérotation Coffee Tea Black tea Green tea Milk

38 Transparent 38 13/01/2014 Un Deux Deux-Un Deux-Deux Deux-Deux-Un Deux-Deux-Deux Deux-Deux-Trois Deux-Trois Trois Tables - Listes et Section

39 Transparent 39 13/01/2014 Un Deux Deux-Un Deux-Deux Deux-Deux-Un Deux-Deux-Deux Deux-Deux-Trois Deux-Trois Trois Tables - Listes et Section

40 Transparent 40 13/01/2014 Un Deux Deux-Un Deux-Deux Deux-Deux-Un Deux-Deux-Deux Deux-Deux-Trois Deux-Trois Trois Tables - Listes et Section

41 Transparent 41 13/01/2014 Survol dHTML - Tables n Balises de Table a table a table header a table row a table cell a table caption Horizontal headers: Name Telephone Bill Gates Vertical headers: First Name: Bill Gates Telephone: Telephone:

42 Transparent 42 13/01/2014 Survol dHTML - Tables n Attributs Table align bgcolor border cellpadding cellspacing cols height width With spacing et padding: First Row Vertical headers: First Name: Bill Gates Telephone: Telephone:

43 Transparent 43 13/01/2014 le Triangle de Pascal Tables - le triangle de Pascal

44 Transparent 44 13/01/2014 Tables - le triangle de Pascal le Triangle de Pascal

45 Transparent 45 13/01/2014 L'utilisation des Expressions Régulières (regexp ss Emacs) permet le balisage "automatique" (systématique) … \([0-9]+\) \1 … \(.*\) \1 ^1 1 1$ 1 Tables - le triangle de Pascal

46 Transparent 46 13/01/2014 Tables - le triangle de Pascal le Triangle de Pascal


47 Transparent 47 13/01/2014 Tables - le code ASCII le code ASCII HEXA A -B -C -D -E -F 0- �          

48 Transparent 48 13/01/2014 Tables - la palette RVB du Web RVB 216 couleurs # # # # #00CC00 #00FF # # # # #33CC00 #33FF # # # # #66CC00 #66FF00

49 Transparent 49 13/01/2014 Survol dHTML - Liens & Ancres n Ancres & Sauts une ancre dans cette page saut vers cette ancre n Liens Voir les tarifs Visit W3Schools! Him Download WinZip

50 Transparent 50 13/01/2014 Survol dHTML - Images n Images n Images & Liens Clicker pour voir l'image Clicker sur le logo pour afficher la page

51 Transparent 51 13/01/2014 Survol dHTML - Cadres n Cadres a set of frames a sub window (a frame) a noframe section for browsers that do not handle frames an inline sub window (frame) ( )* Your browser does not handle frames!

52 Transparent 52 13/01/2014 Cadres - Exemple de "Browser" Your browser does not handle frames! n Accès par rubrique dans un dictionnaire n Exploration en multimédia

53 Transparent 53 13/01/2014 Survol dHTML - Formes n Form Tags Defines a form for user input Defines an input field Defines a text-area (a multi-line text input control) Defines a label to a control Defines a fieldset Defines a caption for a fieldset Defines a selectable list (a drop-down box) Defines an option group Defines an option in the drop-down box Defines a push button Deprecated. Use instead Type your first name: Type your last name: If you click the "Submit" button, you will send your input to a new page called html_form_action.asp.

54 Transparent 54 13/01/2014 Survol dHTML - Entête n Head Tags Defines information about the document Defines the document title Defines a base URL for all the links on a page Defines a resource reference Defines meta information n DTD Defines the document type. This tag goes before the start tag. n Script Tags Defines a script Defines an alternate text if the script is not executed Defines an embedded object Defines run-time settings (parameters) for an object Deprecated. Use instead

55 Transparent 55 13/01/2014 Les défauts d HTML n Beaucoup de versions pas toujours compatibles avec des interprétations dépendantes des navigateurs n La structure logique nest pas prise en compte n Pas de structure logique générique n Le balisage nest pas strictement arborescent n Pas de formatage générique n Lévaluation du formatage est strictement lié au texte n Pas de séparation style-formatage n Le balisage mélange le formatage et le style au contenu du texte n Lensemble des balises est clos (aucune extension)

56 Transparent 56 13/01/2014 Quelques règles d'écriture pour un "meilleur" (X)HTML n respecter la validation syntaxique XHTML : balisage fermé, bien parenthésé usage des "" nom de balise en minuscule n associer le balisage à la structure logique utiliser et utiliser les attributs "id" et "class" n éviter les styles "internes": avec des balises: avec des attributs : align width n préférer les styles CSS, notamment en feuilles externes n formater avec CSS saut de ligne: pas de, éviter, utiliser display: espace, tabulations: éviter, utiliser padding: et margin: placement: pas de, utiliser display: float: position:

57 Paul Franchi CIP1 - CMD /01/2014 Transparent - 57 Chap III - XML - Présentation ("Basic") MetaLangage Norme Lexicale Norme Syntaxique Dialectes : XHTML, MathML, Dialectes XHTML MetaLangage Norme Lexicale Norme Syntaxique Dialectes : XHTML, MathML, Dialectes XHTML Création & Manipulation de Documents

58 Transparent 58 13/01/2014 XML - eXtensible Marked up Langage n XML est une recommandation W3C (1998) n XML est un métalangage les balises ne sont pas limitées XML permet de définir des Langages de balisage Dialectes n Le balisage est structurel (Arborescence enracinée dessinée) DOM n Le principe de formatage est celui des boites rectangulaires bien emboîtées (parenthésées) XML bien formé n La DTD ou un XML-schéma définit une structure logique générique de validation XML valide n XML supporte les feuilles de styles séparées (CSS ) n XML supporte les transformations XSL (XSLT)

59 Transparent 59 13/01/2014 XML - Une lettre M. Martin Le 4/10/2004 à M. DURAND Objet: à voir Monsieur, Jai lhonneur de porter à votre attention le premier point aaaaaaaaaaaaaa bbbbbbb le deuxième etc. Sincères salutations, M. X

60 Transparent 60 13/01/2014 XML - Le rôle des balises n Délimiter le texte (ou éléments) n Associer une fonction logique ou des attributs n Ordonner les éléments entre eux n Hiérarchiser par imbrication n Créer des liens Jai lhonneur de porter à votre attention Sincères salutations, M. X

61 Transparent 61 13/01/2014 Des exemples XML n Sur le tutorial W3C un catalogue de CD Empire Burlesque Bob Dylan USA Columbia Hide your heart Bonnie Tyler UK CBS Records xml

62 Transparent 62 13/01/2014 Des exemples XML Une carte de Menu $5.95 Belgian Waffles two of our famous Belgian Waffles with plenty of real maple syrup 650 $7.95 Strawberry Belgian Waffles light Belgian waffles covered with strawberries and whipped cream 900 $8.95 Berry-Berry Belgian Waffles light Belgian waffles covered with an assortment of fresh berries and whipped cream 900 $4.50 French Toast thick slices made from our homemade sourdough bread 600 xml

63 Transparent 63 13/01/2014 XML - Norme Lexicale n les commentaires XML sont de la forme n les CHAINES sont de la forme " tout_sauf " & " ou ' tout_sauf ' & ' n les balises "xml" sont de la forme & ?> n les autres balises "éléments" sont de 3 formes: n les NOMs sont de la forme [a-zA-Z_-][a-zA-Z0-9_-]* éventuellement précédé d'un préfixe de la même forme séparé par : n les NOMs sont sensibles à la casse n les attributs sont de la forme NOM = chaines n les " " \t \n sont permis partout sauf dans les balises entre < ou

64 Transparent 64 13/01/2014 XML - Norme Syntaxique Un source XML est dit "Bien Formé" ssi n il est structuré suivant le schéma: Prologue (facultatif) Arborescence d'Eléments Commentaires et Instructions de Traitement (facultatifs) dans le prologue ou l'Arborescence n le Prologue se compose: d'une balise de déclaration puis en option : d'Instructions de Traitement (stylesheet, par ex) d'une déclaration de Type de Document (DTD) de commentaires n l'Arborescence forme un système de textes, de balises, de commentaires et d'instructions de traitement bien parenthésé et enraciné

65 Transparent 65 13/01/2014 XML - Validation Un source XML est dit "Valide" ssi n il est "Bien Formé" n il est conforme aux règles définies par: une DTD un schéma XSD Des erreurs dans la syntaxe XML stoppent le processus d'excution du programme associé au source XML (affichage, transformations, etc.) (contrairement à HTML) n Outils de validation: DW8 Via loadXML() et le DOM Divers (voir le Web)

66 Transparent 66 13/01/2014 XML - Quelques Dialectes, parmi des dizaines n XHTML n XSL & XSL-FO n XSD – XML Schéma Définition n SMIL – pour le Multimédia n MathML – pour les formules mathématiques n CML – pour les formules chimiques n WML – pour les mobiles (Wap) n MusicML – pour la musique n WordML -- Office vers XML Un dialecte XML est un ensemble (Langage) de documents XML valides par rapport à une DTD ou un schéma XSD (donc bien formés)

67 Transparent 67 13/01/2014 MathML: un exemple d'insertion dans XML Formule sous MathML A*B b 10 x

68 Transparent 68 13/01/2014 XHTML - Intro n Une version « Xmlisée » de HTML 4.0 n Recommandation W3C (Janvier 2000) au remplacement de HTML n XHTML 1.0: Compatibilité (presque) totale avec HTML 4.0 n les documents doivent être « bien formés » au sens XML racine unique marqueurs de fermeture obligatoires: ou et, avec un espace devant / balises bien emboîtées (parenthèsées) nom et attribut de balise en minuscule (sensibilité à la casse) valeurs dattributs entre et valeurs explicites lattribut id remplace name n XHTML 1.0: Trois niveaux de validation (3 DTDs) strict transitional framseset

69 Transparent 69 13/01/2014 XHTML- format n Source requis en XHTML1.0 n Conseils dutilisation protéger tous les caractères spéciaux: & < > séparer les scripts et les styles le Titre du Document

70 Transparent 70 13/01/2014 XHML: un exemple d'insertion dans XML XHTML et XML Liens sous XHTML Visit W3C Tutorial chez Moi

71 Paul Franchi CIP1 - CMD /01/2014 Transparent - 71 Chap IV - CSS - Feuilles de Style en Cascade CSS 2: Règles, Sélecteurs, Proprirétes La balise en HTML Feuilles de style séparées en HTML Feuilles de style en XML Création & Manipulation de Documents

72 Transparent 72 13/01/2014 Evolution 0: les attributs de style Html texte centré en arial (par héritage) en rouge (par masquage) HTML, comme il ne faut plus l'écrire ! car pas évolutif !

73 Transparent 73 13/01/2014 Evolution 1: les attributs de style Html

Grand Titre 1
sous titre 1 HTML, peu évolutif !