Création & Manipulation de Documents Révision du 26/03/2017 Definitions: Graphes, Arbres, Blaisage, Arbre, Parenthéses.. Création & Manipulation de Documents /net/net4/cip1/cmd 2 versions .ppt à télécharger avec le répertoire DOC/ .pdf à afficher sous votre navigateur pfz@polytech.unice.fr www.polytech.unice.fr/~pfz Objectif pédagogique Introduction aux documents hypertextes: langages de définition, manipulation et édition 26/03/2017

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

Programme des TPs (version 2007_08) HTML - le Balisage HTML - le Style avec la balise <style> CSS - les Feuilles de Style Externes XML - la Structure Logique (introduction) LaTeX Word - Excel - PowerPoint - /net/net4/cip1/cmd Enseignants 2009 Paul Franchi Maria Kulikova Hélène Renard 26/03/2017

Création & Manipulation de Documents Chapître I - Documents Structurés Historique & Standards Lexique Références Modèle de Documents Objectif pédagogique Introduction aux documents hypertextes: langages de définition, manipulation et édition 26/03/2017

Web 2.0 semantic? Introduction Documents et Informatique: (R)évolution ? 1985 1995 2005 26/03/2017

Documents "Electroniques" Fichiers & Répertoires Codages 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 0101 1010 1110 1001 5 A E 9 Z é l'extension ne garantit pas le format 26/03/2017

Codages ASCII - 7 bits (1960) ASCII étendu ANSI - 8 bits ASCII – American Standard Code for Information Interchange ASCII étendu ANSI - 8 bits 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, ...) en pratique: utf-8 iso-8859-1 iso-latin-1-unix iso-latin-1-dos 26/03/2017

Fichiers: Formats, Extensions & Applications .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 .dvi format de sortie impression, visualisation .jpeg .gif .png .pic .tiff .swf image graphique .mp3 .wav .aac .aiff musique multimédia .avi .mov .vob .mpeg video .doc .xls .ppt MS Office Office 26/03/2017

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

Références Web les cours de l'EPU Création & Manipulltion de Document http://www.polytech.unice.fr/~pfz/cmd.html Introduction to Internet http://rainbow.i3s.unice.fr/iai/ Langages & Documents http:www.polytech.unice;fr/~pfz/document.html W3C tutorial : http://www.w3schools.com/ Mozilla Development Center http://developer.mozilla.org/en/docs/Main_Page W3C, http://www.w3.org/ Web Developer's Bookmarks http://antriksh.com/resources/ Biblio: nombreux ouvrages 26/03/2017

Documentation et Manuels Documents du web liste de balises HTML code des couleurs RVB code HTML des caractères ISO liste des extensions de fichiers (formats) Expressions Rationnelles Manuels. Expressions régulières sous Emacs Recherche et remplacement sous Emacs compléments Emacs grep sous Unix Tutoriaux du Web W3C : http://www.w3schools.com/ CSS Play : http://www.cssplay.co.uk/index Zen Garden : http://www.csszengarden.com/tr/francais/ CSS in10 steps : http://www.barelyfitz.com/screencast/html-training/css/positioning/ 10 steps to better CSS: http://shapeshed.com/journal/10_steps_to_better_css/ 26/03/2017

Historique et Standards GML – Generalized Markup Language IBM, 1960’s 3 initiales des inventeurs SGML - Standard Generalized Markup Language norme ANSI, 1983 norme ISO, 1986 HTML – HyperText Markup Language CERN, Genève, 1992 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. 26/03/2017

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" 26/03/2017

Navigateurs ("Web Browsers") Historiques: Mosaîc, I.E. Netscape liste de navigateurs sur Wikipédia Internet Explorer 6 => 7 ss Win, Linux HTML 4.01, XHTML 1.0, XML, CSS2, DOM Safari 3 ss Mac OS, Win Mozilla ss Win, Mac OS, Linux Firefox 2.0.0.20 => 3.0.5 HTML 4.01, XHTML 1.0, XML, CSS2+, DOM Opera 9 ss Win, Mac OS, Linux Konqueror ss KDE 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 26/03/2017

Traitement de Document (modèle SGML) Structure Logique Générique DTD / XSD EDITION Interface H/M S. LOGIQUE Structure Générique Format FORMATAGE (style) S. LAYOUT PRESENTATION (rendu) 26/03/2017

Traitement de document: l’approche hiérachique (ou arborescente) 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) 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) Un format de Présentation (rendu, sortie) .ps, .dvi, etc Visualisation .pdf etc. 26/03/2017

Définitions indispensables en Informatique Graphes: nœud (sommet), arête (arc) orientation, connexité chemin, cycle, circuit Arbres & Arborescences racine hauteur, largeur, profondeur parcours & ordres Langages Formels vocabulaire, mot grammaire, automate analyse syntaxique validation "sémantique" 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 <[^><]+> 26/03/2017 Transparent 17 ESSI - 2 – 2004-05 - Paul Franchi

Un modèle de lettre: une entité (exemplaire) M. Martin Société S. 06150 SA Le 4/11/2002 à M. DURAND Société R. Dpt Informatique Ref: MM25 Objet: à voir Monsieur, J’ai l’honneur de porter à votre attention le premier point aaaaaaaaaaaaaa bbbbbbb le deuxième etc. Sincères salutations, M. X 26/03/2017

Un modèle de lettre: une structure logique arborescente Sincères salutations, M. X Le 4/11/2002 Ref: MM25 Objet: à voir à M. DURAND Société R. Dpt Informatique Monsieur, M. Martin Société S. 06150 SA J’ai l’honneur de porter à votre attention le premier point aaaaaaaaaaaaaa bbbbbbb le deuxième etc. 26/03/2017

Un modèle de lettre: une structure logique générique => DTD + ? ? ? ? ? * ? * ? (0 ou 1) + (1 ou plusieurs) * (0 ou plusieurs) Méta-opérateurs des expressions régulières 26/03/2017

Lettre: structure arborescente de format (« layout ») M. Martin Société S. 06150 SA Le 4/11/2002 à M. DURAND Société R.Dpt Informatique Ref: MM25 Objet: à voir Monsieur, J’ai l’honneur de porter à votre attention le premier point aaaaaaaaaaaaaa bbbbbbb le deuxième etc. Sincères salutations, M. X 26/03/2017

Création & Manipulation de Documents Chap II - HTML Balisage Texte & Style Lien Liste Table Image Cadre Forme Objectif pédagogique Introduction aux documents hypertextes: langages de définition, manipulation et édition 26/03/2017

HTML - Hyper Text Markup Langage On <balise> le texte «source» (ou "contenu" du document) avec un ensemble fini de balises «tags» le formatage initial du texte source établit un ordre entre les éléments du contenu, mais aucune indication d’espacement (lignes, espaces ou tabulations) Les balises HTML jouent un double rôle: structuration logique du document format de présentation (« layout ») Le principe de structuration est celui des systèmes de parenthèses (ou arborescences) mais le parenthésage du balisage n’est pas vérifié.  Le principe de formatage est celui des emboîtements rectangulaires  XML, XHTML avec superposition possible 26/03/2017

Une lettre en HTML (version simpliste) <html><body bgcolor=#CCCCFF> <table> <tr> <td> <p align=left> M. Martin <br> Société S. <br> Avenue A. 06150 SA </p> </td> <td> <p align=right> <i> </i> </td > </table> <p align=right> </p> <p align=left> </p> <p align=center> </p > < balise attribut = "valeur" > Le 4/11/2002 à M. DURAND <br> Société R. <br> Dpt Informatique Ref: MM25 <br> Objet: à voir Monsieur, <ol> J’ai l’honneur de porter à votre attention <li> le premier point <ul> < li > aaaaaaaaaaaaaa <li> bbbbbbb </ul> <li> le deuxième <li> etc. </ol> <p align=center> </body> </html> Sincères salutations, <br> M. X <br> <img src= signature.gif> </p > 26/03/2017

Survol d’HTML (version 4.01) Balisage une balise s’écrit avec < et > 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) Attributs de balises une balise peut comporter 0 ou plusieurs paires attribut = "valeur"  <table border="1" align="center"> sans ou avec (préférer) quotes doubles " " ou simples ' ' 26/03/2017

HTML - source type (version simpliste) <!-- commentaires bienvenus --> <head> <title> Titre de la page dans le navigateur </title> </head> <body > <!-- mettre ici le contenu balisé à afficher --> </body> </html> 26/03/2017

XHTML - source type (version simpliste) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <!-- pour les accents --> <title> Titre de la page dans le navigateur </title> </head> <body > <!-- mettre ici le contenu balisé bien parenthésé à afficher --> </body> </html> DTD obligatoire pour IE  XML, XHTML 26/03/2017

Balisage, Indentation, & Parenthèses <html> <!-- commentaire --> <head> <title> Titre de la page </title> </head> <body > <p > <a href=... > ... </a> <ul> <li> <img src=... /> </li> </ul> </p> </body> </html> ( ( ) ) ( ... ) ( ( ( ) ) 26/03/2017

Balisage & Arborescence html <!--com--> head title body p a ul li img <html> <!-- commentaire --> <head> <title> Titre de la page </title> </head> <body > <p > <a href=... > ... </a> <ul> <li> <img src=... /> </li> </ul> </p> </body> </html> 26/03/2017

Survol d’HTML (version 4.01) Commentaires <!-- contenu du commentaire sur une ou plusieurs lignes sans deux '-' consécutifs --> Structuration & formats <html> <body> le contenu </body> </html> <h1> Grand Titre </h1> <h6> petit titre </h6> <p> paragraphe </p> <br> break (ligne suivante) <hr> séparation horizontale Alignements <h1 align="center"> grand titre à centrer </h1> <p align="left"> paragraphe à gauche </p> <center> texte à centrer </center> 26/03/2017

Mon "premier" HTML <html> <head><title>Mon Premier HTML</title></head> <body> <!-- ne pas oublier les commentaires --> <center><h1>HTML, c'est une affaire de balises!</h1></center> <p> <b>Paragraphe <1></b> sur plusieurs lignes .....</p> <p> <i>Paragraphe <2> </i> sur plusieurs lignes ..... </p> <h3> avec la Couleur, c'est mieux </h3> <font color="#FF0000"> EN ROUGE </font> <br><font color="#00FF00"> EN VERT </font> <br><font color="#0000FF"> EN BLEU </font> <h3> un Logo trés connu ?</h3> <center><img src="../IMAGES/LOGOEPU.gif" /></center> <h3> un (Hyper)lien trés connu ? </h3> <a href="http://www.polytech.unice.fr"> Polytech Sophia </a> </body></html> 26/03/2017

Survol d’HTML - Textes Text Tags : styles & formats <b> Defines bold text <big> Defines big text <em> Defines emphasized text <i> Defines italic text <small> Defines small text <strong> Defines strong text <sub> Defines subscripted text <sup> Defines superscripted text <ins> Defines inserted text <del> Defines deleted text <s> Deprecated. Use <del> instead <strike> Deprecated. Use <del> instead <u> Deprecated. Use styles instead 26/03/2017

Survol d’HTML - Autres textes "Computer Output" Tags <code> Defines computer code text <kbd> Defines keyboard text <samp> Defines sample computer code <tt> Defines teletype text <var> Defines a variable <pre> Defines preformatted text <listing> Deprecated. Use <pre> instead <plaintext> Deprecated. Use <pre> instead <xmp> Deprecated. Use <pre> instead Citations, Quotations, and Definition Tags <abbr> Defines an abbreviation <acronym> Defines an acronym <address> Defines an address element <bdo dir="rtl"> Defines the text direction ("rightToLeft") <blockquote> Defines a long quotation <q> Defines a short quotation <cite> Defines a citation <dfn> Defines a definition term 26/03/2017

Survol d’HTML - Fontes & Styles Font Attributes Attribute Example Purpose 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 Style Tags <style> Defines a style definition <link> Defines a resource reference <div> Defines a section in a document <span> Defines a section in a document <font> Deprecated. Use styles instead <basefont> Deprecated. Use styles instead <center> Deprecated. Use styles instead 26/03/2017

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

La balise <pre> et le source des L.P. <html><body> <h1> Source Java avec la balise < pre > </h1> <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); } </pre> </body> </html> 26/03/2017

Survol d’HTML - Listes List Tags <ul type="square"> <h4>A Definition List:</h4> <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> List Tags <ol> an ordered list <ul> an unordered list <li> a list item <dl> a definition list <dt> a definition term <dd> a definition description <ul type="square"> <li>Coffee</li> <li>Tea <ul type="i"> <li>Black tea</li> <li>Green tea</li> </ul> </li > <li value="3">Milk</li> Attributs de liste type= pour <ol>: disc, circle, square pour <ul>: A, a, I, i, 1 value= pour <li>: un rang de numérotation start= pour <ol>: un rang de numérotation 26/03/2017

Tables - Listes et Section <body> Un Deux Deux-Un Deux-Deux Deux-Deux-Un Deux-Deux-Deux Deux-Deux-Trois Deux-Trois Trois </body> A "baliser" 26/03/2017

Tables - Listes et Section <body> <ol> <li>Un </li> <li>Deux</li> <ul> <li>Deux-Un</li> <li>Deux-Deux</li> <li>Deux-Deux-Un</li> <li>Deux-Deux-Deux</li> <li>Deux-Deux-Trois</li> </ol> <li>Deux-Trois</li> </ul> <li>Trois</li> </body> 26/03/2017

Tables - Listes et Section <body> <ol> <li>Un <li>Deux <ul type="square"> <li>Deux-Un <li>Deux-Deux <li value="221">Deux-Deux-Un <li>Deux-Deux-Deux <li>Deux-Deux-Trois </ol> <li>Deux-Trois </ul> <li>Trois </body> 26/03/2017

Survol d’HTML - Tables Balises de Table <table> a table <th> a table header <tr> a table row <td> a table cell <caption> a table caption <h4>Vertical headers:</h4> <table> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th>Telephone:</th> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>Horizontal headers:</h4> <table> <tr> <th>Name</th> <th>Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> 26/03/2017

Survol d’HTML - Tables Attributs Table align bgcolor border cellpadding cellspacing cols height width <h4>Vertical headers:</h4> <table width="50%" border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th>Telephone:</th> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>With spacing et padding:</h4> <table cellspacing="20" cellpadding="5"> <tr> <td>First</td> <td>Row</td> </tr> 26/03/2017

Tables - le triangle de Pascal <body> <h1> le Triangle de Pascal </h1> 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5 10 10 5 1 </body> A "baliser" 26/03/2017

Tables - le triangle de Pascal <body> <h1> le Triangle de Pascal </h1> <table> <tr> <td>1</td> <td>1</td> </tr> <!-- un peu fastidieux à la main --> <tr> <td>1</td> <td>5</td> <td>10</td> <td>10</td> <td>5</td> <td>1</td> </tr> </table> </body> 26/03/2017

l'ordre des remplacements Tables - le triangle de Pascal L'utilisation des Expressions Régulières (regexp ss Emacs) permet le balisage "automatique" (systématique) <td> … </td> \([0-9]+\)  <td>\1</td> <tr> … </tr> \(.*\)  <tr>\1</tr> ^1  <tr>1 1$  1</tr> Attention au début du remplacement ? remplace TOUTES les lignes ! Attention à l'ordre des remplacements 26/03/2017

Tables - le triangle de Pascal <body> <h1> le Triangle de Pascal </h1> <table align="center" bgcolor="#FFFFCC" border="2" cellspacing="10" width="50%" > <tr align="center"> <td>1</td> <td>1</td></tr> <tr align="center"> <td>1</td> <td>2</td> <td>1</td></tr> <tr align="center"> <td>1</td> <td>3</td> <td>3</td> <td>1</td></tr> <tr align="center"> <td>1</td> <td>4</td> <td>6</td> <td>4</td> <td>1</td></tr> <tr align="center"> <td>1</td> <td>5</td> <td>10</td> <td>10</td> <td>5</td> <td>1</td></tr> </table> </body> 26/03/2017

Tables - le code ASCII <!-- à générer par Exp. Reg. --> <body> <h1>le code ASCII </h1> <table align="center" bgcolor="#FFFFCC" border="solid red 3px"> <tr> <td>HEXA</td> <td>-0</td> <td>-1</td> <td>-2</td> <td>-3</td> <td>-4</td> <td>-5</td> <td>6</td> <td>-7</td> <td>-8</td> <td>-9</td> <td>-A</td> <td>-B</td> <td>-C</td> <td>-D</td> <td>-E</td> <td>-F</td> </tr> <td>0-</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td> </td> <td> </td> <td></td> <td></td> <td> </td> <td></td> <td></td> <!-- à générer par Exp. Reg. --> </table> </body> 26/03/2017

Tables - la palette RVB du Web <body> <h1>RVB 216 couleurs </h1> <table align="center " border="0" cellspacing="5" cellpadding="5"> <tr> <!-- ici la première ligne--> </tr> <tr><td>00--00</td> <td bgcolor="#000000">#000000</td> <td bgcolor="#003300">#003300</td> <td bgcolor="#006600">#006600</td> <td bgcolor="#009900">#009900</td> <td bgcolor="#00CC00">#00CC00</td> <td bgcolor="#00FF00">#00FF00</td> <td>33--00</td> <td bgcolor="#330000">#330000</td> <td bgcolor="#333300">#333300</td> <td bgcolor="#336600">#336600</td> <td bgcolor="#339900">#339900</td> <td bgcolor="#33CC00">#33CC00</td> <td bgcolor="#33FF00">#33FF00</td> <td>66--00</td> <td bgcolor="#660000">#660000</td> <td bgcolor="#663300">#663300</td> <td bgcolor="#666600">#666600</td> <td bgcolor="#669900">#669900</td> <td bgcolor="#66CC00">#66CC00</td> <td bgcolor="#66FF00">#66FF00</td> </tr> <!-- à générer par Exp. Reg. --> </table> </body> 26/03/2017

Survol d’HTML - Liens & Ancres Ancres & Sauts <a name= "destination" > une ancre dans cette page </a> <a href= "#destination" > saut vers cette ancre </a> Liens <a href="tarifs.html" target="_self">Voir les tarifs </a> <a href="http://www.w3schools.com/" target="_blank">Visit W3Schools! </a> <a href="mailto:who@epu.fr?subject=Hello%20again"> EMail Him </a> <a href="ftp://www.w3schools.com/ftp/winzip.exe"> Download WinZip</a> 26/03/2017

Survol d’HTML - Images Images Images & Liens <img src= “image.gif“ width = “160“ heigth= “90“ align= “center”> <body background= “paysage.gif“ > Images & Liens <a href=“image.gif“ > Clicker pour voir l'image </a> <a href=“page.html“> <img src= “FF.png“ heigth= “25“ width= “25“ /> Clicker sur le logo pour afficher la page </a> 26/03/2017

Survol d’HTML - Cadres Cadres <frameset> a set of frames <frame> a sub window (a frame) <noframes> a noframe section for browsers that do not handle frames <iframe> an inline sub window (frame) <frameset> (<frame src= “cadre.html “ >)* </frameset> <html> <frameset cols="25%,50%,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> <noframes> <body> Your browser does not handle frames! </body> </noframes> </frameset> </html> <html> <frameset cols="120,*"> <frame src="cadre_liste.htm"> <frame src= "cadre_vision.htm" name="showframe"> </frameset> </html> 26/03/2017

Cadres - Exemple de "Browser" Accès par rubrique dans un dictionnaire Exploration en multimédia <html> <frameset r ows="21%,*" cols="*" frameborder="YES" border="2" bordercolor="red" framespacing="2"> <!-- 1 cadre et un jeu de cadres adjacents horizontalement en 25% --> <frame name="HH" scrolling="auto" src="dicoIndex.html" id="HH" title="topFrame"> <frameset cols="20%,*" frameborder="YES" border="2" framespacing="2"> <!-- 2 cadres adjacents verticalement en 20% --> <frame name="VG" scrolling="auto" src="dicoTermes.html" id="VG" title="leftFrame"> <frame src="dicoInfo.html" name="CP" id="CP" scrolling="auto" title="mainFrame"> </frameset> <noframes> <body> Your browser does not handle frames! </body> </noframes> </html> 26/03/2017

Survol d’HTML - Formes Form Tags <form> Defines a form for user input <input> Defines an input field <textarea> Defines a text-area (a multi-line text input control) <label> Defines a label to a control <fieldset> Defines a fieldset <legend> Defines a caption for a fieldset <select> Defines a selectable list (a drop-down box) <optgroup> Defines an option group <option> Defines an option in the drop-down box <button> Defines a push button <isindex> Deprecated. Use <input> instead <html> <body> <form name="input" action="html_form_action.asp" method="get"> Type your first name: <input type="text" name="FirstName" value="Mickey" size="20"><br> Type your last name: <input type="text" name="LastName" value="Mouse" size="20"><br> <input type="submit" value="Submit"> </form> <p> If you click the "Submit" button, you will send your input to a new page called html_form_action.asp.</p> </body> </html> 26/03/2017

Survol d’HTML - Entête Head Tags DTD Script Tags <head> Defines information about the document <title> Defines the document title <base> Defines a base URL for all the links on a page <link> Defines a resource reference <meta> Defines meta information DTD <!DOCTYPE> Defines the document type. This tag goes before the <html> start tag. Script Tags <script> Defines a script <noscript> Defines an alternate text if the script is not executed <object> Defines an embedded object <param> Defines run-time settings (parameters) for an object <applet> Deprecated. Use <object> instead 26/03/2017

Les défauts d’ HTML => CSS => XML => XHTML Beaucoup de versions pas toujours compatibles avec des interprétations dépendantes des navigateurs La structure logique n’est pas prise en compte Pas de structure logique générique Le balisage n’est pas strictement arborescent Pas de formatage générique L’évaluation du formatage est strictement lié au texte Pas de séparation style-formatage Le balisage mélange le formatage et le style au contenu du texte L’ensemble des balises est clos (aucune extension) => CSS => XML => XHTML 26/03/2017

Quelques règles d'écriture pour un "meilleur" (X)HTML respecter la validation syntaxique XHTML : balisage fermé, bien parenthésé usage des "" nom de balise en minuscule associer le balisage à la structure logique utiliser <div> et <span> utiliser les attributs "id" et "class" éviter les styles "internes": avec des balises: <b> <em> <u> <i> <font> avec des attributs : align width préférer les styles CSS, notamment en feuilles externes formater avec CSS saut de ligne: pas de <br />, éviter <p>, utiliser display: espace, tabulations: éviter  , utiliser padding: et margin: placement: pas de <table >, utiliser display: float: position: => XHTML  source HTML évolutif et utilisable avec différents "rendus" (styles CSS) 26/03/2017

Création & Manipulation de Documents Chap III - XML - Présentation ("Basic") MetaLangage Norme Lexicale Norme Syntaxique Dialectes : XHTML, MathML, Objectif pédagogique Introduction aux documents hypertextes: langages de définition, manipulation et édition 26/03/2017

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

XML - Une lettre <?xml version="1.0" encoding="ISO-8859-1" ?> <!– pour les accents --> <lettre ref ="Ref: MM25" date="4/10/2004"> <!– balise racine unique obligatoire --> <from soc= "Société S. Avenue A. 06150 SA" > M. Martin </from> <date> </date> <to adr= "Société R. Dpt Informatique" > <TextePrincipal > <pol > </pol > Le 4/10/2004 à M. DURAND </to> <obj> Objet: à voir </obj> Monsieur, <par> J’ai l’honneur de porter à votre attention </par> <par> le premier point aaaaaaaaaaaaaa bbbbbbb </par> <par> le deuxième </par> <par> etc. </par> </TextePrincipal> </lettre> <pol> Sincères salutations, </pol> <sig> M. X <img src= signature.gif /> </sig> 26/03/2017

XML - Le rôle des balises Délimiter le texte (ou éléments) Associer une fonction logique ou des attributs Ordonner les éléments entre eux Hiérarchiser par imbrication Créer des liens <par> J’ai l’honneur de porter à votre attention </par> <lettre ref ="Ref: MM25" date="4/10/2004"> <lettre> <from > </from> <date> </date> </lettre> <pol> Sincères salutations, </pol> <sig> M. X <img src= signature.gif/> </sig> 26/03/2017

Des exemples XML Sur le tutorial W3C http://www.w3schools.com/xml/xml_examples.asp un catalogue de CD xml <?xml version="1.0" encoding="ISO-8859-1" ?> <!– pour les accents --> <CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10.90</PRICE> <YEAR>1985</YEAR> </CD> <TITLE>Hide your heart</TITLE> <ARTIST>Bonnie Tyler</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>CBS Records</COMPANY> <PRICE>9.90</PRICE> <YEAR>1988</YEAR> </CATALOG> => CSS 26/03/2017

Des exemples XML Une carte de Menu <?xml version="1.0" encoding="ISO-8859-1" ?> <!– pour les accents --> <breakfast_menu> <food> <price>$5.95</price> <name>Belgian Waffles</name> <description>two of our famous Belgian Waffles with plenty of real maple syrup</description> <calories>650</calories> </food><food><price>$7.95</price> <name>Strawberry Belgian Waffles</name> <description>light Belgian waffles covered with strawberries and whipped cream</description> <calories>900</calories> </food><food><price>$8.95</price> <name>Berry-Berry Belgian Waffles</name> <description>light Belgian waffles covered with an assortment of fresh berries and whipped cream</description> </food><food><price>$4.50</price> <name>French Toast</name> <description>thick slices made from our homemade sourdough bread</description> <calories>600</calories> </food> </breakfast_menu> 26/03/2017

XML - Norme Lexicale les commentaires XML sont de la forme <!- - tout_sauf - - - -> les CHAINES sont de la forme " tout_sauf " < > & " ou ' tout_sauf ' < > & ' les balises "xml" sont de la forme <?xml tout_sauf " < > & ?> les autres balises "éléments" sont de 3 formes: <NOM attribs > <NOM attribs /> </NOM > 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 : les NOMs sont sensibles à la casse les attributs sont de la forme NOM = chaines les " " \t \n sont permis partout sauf dans les balises entre < ou </ et NOM le reste (le texte pur) ne comprend pas < > & qui sont codés par < > & 26/03/2017

XML - Norme Syntaxique Bien Formé # Valide Un source XML est dit "Bien Formé" ssi 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 le Prologue se compose: d'une balise de déclaration <? xml > puis en option : d'Instructions de Traitement (stylesheet, par ex) d'une déclaration de Type de Document (DTD) de commentaires l'Arborescence forme un système de textes, de balises, de commentaires et d'instructions de traitement bien parenthésé et enraciné 26/03/2017

Valide => Bien Formé XML - Validation Un source XML est dit "Valide" ssi il est "Bien Formé" 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) Outils de validation: DW8 Via loadXML() et le DOM Divers (voir le Web) Valide => Bien Formé 26/03/2017

XML - Quelques Dialectes, parmi des dizaines XHTML XSL & XSL-FO XSD – XML Schéma Définition SMIL – pour le Multimédia MathML – pour les formules mathématiques CML – pour les formules chimiques WML – pour les mobiles (Wap) MusicML – pour la musique 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) 26/03/2017

MathML: un exemple d'insertion dans XML <?xml version="1.0" encoding="iso-8859-1"?> <?xml-stylesheet type="text/css" href="monMathML.css"?> <Racine> <Titre> Formule sous MathML </Titre> <Math xmlns = " http://www.w3.org/1998/Math/MathML "> <mroot> <msup> <mfrac> <mi>A*B</mi> <mi>b</mi></mfrac> <mn> 10 </mn> </msup> <mi>x</mi> </mroot> </Math> </Racine> 26/03/2017

XHTML - Intro => DTD Une version « Xmlisée » de HTML 4.0 Recommandation W3C (Janvier 2000) au remplacement de HTML <html xmlns=‘‘http://www.w3.org/1999/xhtml’’> XHTML 1.0: Compatibilité (presque) totale avec HTML 4.0 les documents doivent être « bien formés » au sens XML racine <html> </html> unique marqueurs de fermeture obligatoires: </p> </li> </td> ou <b /> et <img ….. />, avec un espace devant / balises bien emboîtées (parenthèsées) nom et attribut de balise en minuscule (sensibilité à la casse) valeurs d’attributs entre ‘‘ ’’ et valeurs explicites l’attribut id remplace name XHTML 1.0: Trois niveaux de validation (3 DTDs) strict transitional framseset => DTD 26/03/2017

DTD obligatoire pour IE XHTML- format Source requis en XHTML1.0 Conseils d’utilisation protéger tous les caractères spéciaux: &amp &lt &gt séparer les scripts et les styles <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> le Titre du Document </title> </head> <body> <!-- le Corps du Document --> </body> </html> DTD obligatoire pour IE 26/03/2017

XHML: un exemple d'insertion dans XML <?xml version="1.0" encoding="iso-8859-1"?> <?xml-stylesheet type="text/css" href="xhtml.css"?> <racine> <titre> XHTML et XML</titre> <html xmlns = " http://www.w3.org/1999/xhtml " > <body> <h1> Liens sous XHTML</h1> <p> <a href=" http://www.w3schools.comz "> Visit W3C Tutorial </a> </p> <a href=" http://www.essi.fr/~pfz ">chez Moi </a> </body> </html> </racine> .xhtml obligatoire pour I.E. 26/03/2017

Création & Manipulation de Documents Chap IV - CSS - Feuilles de Style en Cascade CSS 2: Règles, Sélecteurs, Proprirétes La balise <style> en HTML Feuilles de style séparées en HTML Feuilles de style en XML Objectif pédagogique Introduction aux documents hypertextes: langages de définition, manipulation et édition 26/03/2017

Evolution 0: les attributs de style Html "Deprecated. use Styles instead" <html> <body color: black ; font-family: arial > <p text-align: center; color: red; > texte centré en arial (par héritage) en rouge (par masquage) </p> </body> </html> HTML, comme il ne faut plus l'écrire ! car pas évolutif ! 26/03/2017

Evolution 1: les attributs de style Html "Inline Style" <body> <div style=" position: absolute; width: 500px; height: 52px; z-index:1; left: 100px; top: 24px; layer-background-color: #00FFFF; border: 5px solid #00FF00; text-align: center; color:red; text-transform: uppercase; font-size: xx-large; font-weight: bold; "> Grand Titre 1 <div style=" text-transform: capitalize; font-size: x-large; font-weight: normal sous titre 1 </div> </div> </body> Héritage Masquage HTML, peu évolutif ! 26/03/2017

Evolution 2 : la balise <style> en Html "Internal Style Sheet" <head> <style> div#Titre { position: absolute; width: 60%; left: 100px; top: 124px; background-color: #CCFFFF; border: 5px; solid #00FF00; text-align: center; color: red; text-transform: uppercase; font-size: xx-large;font-weight: bold; } div#sousTitre { text-transform: capitalize; font-size: x-large; font-weight: normal; </style> </head> <body> <div id="Titre"> Grand Titre <div id="sousTitre">sous titre avec l'attribut "id" </div> </div> </body> 26/03/2017

Evolution 2: les attributs de style Html <html><head> <style> p {text-align: center; color: red;} p.right {text-align: right} p.center {text-align: center} .center {text-align: center} #green {color: green} p#para1{ text-align: left; color: pink} </style> </head> <body > <p> This paragraph will be center-aligned and red-colored. </p> <p class="right"> This paragraph will be right-aligned and also red. </p> <p class="center"> This paragraph will be center-aligned and also red. </p> <h1 class="center"> This heading will be center-aligned but black. </h1> <p class="center"> This paragraph will also be center-aligned and red.</p> <h2 id="green" class="center" >Subtitle centered in green.</h2> <p id="para1"> This paragraph will be left-aligned and pink-colored.</p> </body> </html> "Internal Style Sheet" 26/03/2017

Les attributs de style Liens en Html <!-- http://www.w3schools.com/css/css_pseudo_classes.asp --> <html> <head> <style type="text/css"> a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF} </style></head> <body> <p><b><a href="default.asp" target="_blank">This is a link</a></b></p> <p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!</p> <p><b>Note:</b> a:active MUST come after a:hover </body></html> "Internal Style Sheet" 26/03/2017

CSS: les feuilles de style séparées Un langage pour définir les styles de balises HTML ou XML des éléments d’une DTD CSS -1 (1996) supporté par Netscape et IE version 4. CSS -2 (1998) supporté par FF (complet) IE 5.5 , SAFARI CSS -3 (2007, en cours) supporté par FF (partiel) Principes Règles de style associées à la structure des documents Feuilles multiples Types de média Attachements alternatifs aux documents "External Style Sheet" 26/03/2017

XML: les feuilles de style 26/03/2017

CSS: les feuilles de style en cascade Feuille CSS Collection de Règles Une règle CSS Sélecteur (balise HTML XML,, élément de DTD) propriétés (paramètres de style) Conception CSS "External Style Sheet" Modularité Importation Héritage Masquage Cascade Résolution des conflits par la règle la plus spécifique 26/03/2017

CSS: Syntaxe (1) une balise Les Règles ( ascendance >? )? selecteur ( [ attr ( = val )? ] ) * { ( prop : val ; ) * } Exemples HTML & XML Attributs /* Xml */ envaleur { font-style : italic ; font-weight : bold } livre > titre {font-size : 24pt } chapitre > titre {font-size : 20pt } section theoreme {font-color : blue } message [priorite = "haute"] { font-size : 18pt ; font-color : red } /* Html */ body { font-style : italic ; color : black } p{ text-align : center ; font-family: arial 26/03/2017

CSS: Syntaxe (2) sélecteurs multiples Groupes de Règles selecteur (, selecteur )* { ( prop : val ; ) * } Les Commentaires : /* blabla */ Exemples HTML & XML /* Xml */ livre>titre, chapitre>titre { font-size : 24pt ; font-color : blue } /* Html */ h1, h2, h3 { text-align : center ; color: red } /* Html */ p+h3 { text-align : left ; } 26/03/2017

CSS: Sélecteurs "Class" & "Id" en HTML permet d'associer plusieurs styles (différents) à un élément HTML sélectionné par la valeur de l'attribut "class" id idem, mais sélectionné par la valeur de l'attribut "id" Exemples HTML #grand{font-size : 20pt } p#central { text-align : center ; color: red } <p id = "grand"> paragraphe en 20 pt </p> <p id = "central"> centré en rouge </p> p.right {text-align : right } p.left {text-align : left } .center {text-align : center } <h1 class ="center"> au centre </h1> <p class ="left"> à gauche </p> 26/03/2017

CSS: les Sélecteurs El Parent El Parent > El El:first-child El + Ef Tous les <E1 > Parent El les <E1> descendant d’un <Parent> Parent > El les <E1> fils d’un <Parent> El:first-child les <E1> premier fils d’un <Parent> El + Ef les <Ef> précédés d’un <El> El[att] Tous les <E1 att = “xxx“ > El[att = “val“] les <E1 att = “val“ > El[att~=“val“] les <E1 att = “val1 val val2“ > El[att |= “val“] les <E1 att = “val-xxx“ > El#nom les <E1 xxx = “nom“ > où xxx est un attribut de type ID El:link les <E1> de type link non encore visités El:visited Idem dèja visités E1:hover Idem avec la souris dessus E1:active Idem après le click E1:lang (fr) les <E1 xml:lang= “ fr “ > * Tous les élements 26/03/2017

CSS en HTML: .class vs #id L'attribut "class" permet de définir une classe de style qui peut peut être partagé par plusieurs éléments (balises) du document L'attribut "id" définit une dénomination unique pour un élément (balise) du document <html> <head> <style> .center { } #navBar { } </style> </head> <body> <div class="center"> </div> <div id="navBar"> </div> <p class="center"> à centrer </p> <div id="navBar" class="center" > </div> </body> </html> Disparaissent en XML ! 26/03/2017

CSS: les Propriétés top margin right left border padding content Mis en Page (Boites) Polices de caractère font-family -style -weight -size Textes text-align -indent -decoration word-spacing Couleurs et Fonds color background Listes List-style-position -image Tableaux Médias top margin right left border padding content bottom 26/03/2017

Exemple: Bibliographie placement sans <table> avec display: ou float: body > h1 { text-align: center; } Livre { display: inline-block; width: 22%; background-color: #99FFFF; border: #0000FF medium ridge; margin: 10px ; } Livre ul { padding-left: 0px; text-align: center; } Livre li { list-style: none; } img { float: right ; } <html> <head> <link rel="stylesheet" href="bib.css" type="text/css" /> </head> <body> <h1> Bibliographie "Documents" </h1> <div class="Livre" > Comprendre XSLT <img src="../../BIBLIO/HTML2841771571.jpg" width="54" height="90"> <ul> <em> Auteurs:</em> <li> <a href="">Bernard Amann</a></li> <li> <a href="">Philippe Rigaux</a></li> </ul> <span>2002</span> <span>Ed: O'REILLY</span> </div> </body> </html> 26/03/2017

Les feuilles de style multiples en Html Le(s) lien(s) vers le style CSS dans HTML ..\XML_CSS\leftnav.html ..\XML_CSS\rightnav.htm ici 2 styles au choix dans le Navigateur <html> <head> <link title="àGauche" rel="stylesheet" href="leftNav.css" type="text/css" /> <link title="àDroite" rel="alternate stylesheet" href="rightNav.css" type="text/css" /> </head> <body> <div id="masthead"> <!-- texte de l'entête --> </div> <div id="navBar"> <!-- texte de la barre de navigation--> </div> </body> </html> 26/03/2017

Les feuilles de style multiples en Html 2 feuilles de style CCS ..\XML_CSS\rightNav.css ..\XML_CSS\leftNav.css 2 External Style Sheets #masthead { padding: 10px 0px 0px 0px; border-bottom: 1px solid #cccccc; width: 100%; } #navBar { float: right; width: 20%; margin: 0px; padding: 0px; background-color: #eeeeee; border-right: 1px solid #cccccc; #masthead { padding: 10px 0px 0px 0px; border-bottom: 1px solid #cccccc; width: 100%; } #navBar { float: left; width: 20%; margin: 0px; padding: 0px; background-color: #eeeeee; border-right: 1px solid #cccccc; 26/03/2017

XML et CSS xml Le style CSS dans XML cd_catalog.xml la feuille de style CCS cd_catalog.css xml <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/css" href="cd_catalog.css"?> <CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10.90</PRICE> <YEAR>1985</YEAR> </CD> CATALOG {background-color: #ffffff; width: 100%;} CD {display: block; margin-bottom: 30pt; margin-left: 0;} TITLE {color: #FF0000; font-size: 20pt;} ARTIST {color: #0000FF; font-size: 20pt;} CATALOG {background-color: #ffffff; width: 100%;} CD {display: block; margin-bottom: 30pt; margin-left: 0;} TITLE {color: #FF0000; font-size: 20pt;} ARTIST {color: #0000FF; font-size: 20pt;} 26/03/2017 Transparent 89

CSS: Propriétés des Boites Boîtes: Dimensions & graphiques valeurs width max-width min-width "largeur" % auto inherit height max- height min- height "hauteur" % auto margin margin-top margin-bottom margin-left margin-right "largeur" % padding padding-top padding-bottom padding-left padding-right border-width -top-width -bottom-width -left-width -right-width "largeur" thin medium thick border-color -top-color -bottom-color -left-color -right-color "couleur" transparent border-style -top-style -bottom-style -left-style -right-style none hidden dotted dashed solid border -top -bottom -left -right 26/03/2017

CSS: Propriétés des Textes valeurs text-indent indentation % text-align left right center justify inherit chaine text-decoration underline overline line-through blink none inherit text-shadow couleur distance1 distance2 distance3 none inherit letter-spacing normal distance inherit word-spacing text-transform capitalize uppercase lowercase none inherit direction ltr rtl white-space normal pre nowrap inherit Utile pour les sources des L.P. 26/03/2017

CSS: Propriétés ("positionning") Boîtes: Positions valeurs display block inline inline-block list-item none compact table table-row table-col table-cell … position static relative absolute fixed top bottom left right "longeur" % auto inherit float left right none inherit clear left right none both inherit overflow visible hidden scroll auto clip rect(,,,,) auto visibility visible hidden collapse inherit 26/03/2017

CSS: Positionnements fixed pas ss I.E. ! <html><head> <style type="text/css"> h2.static { position: static; left: 113;} h2.decGauche { position: relative; left: -20px;} h2.courante { position: relative; left: 113;} h2.centre { position: absolute; top: 50%; left:5 0%;} h2.fixe { position: fixed ; top: 100; left: 200;} div.fond { position: absolute ; top: 0; left: 0; } </style></head> <body style="color:#FF0000"> <div class="fond" > <img src="BandeauVerticalPPT.gif" width="112" /></div> <h2 class="static"> Titre en position STATIC dans le "layout"</h2> <h2 class="courante"> Titre à sa position COURANTE dans le "layout"</h2> <h2 class="decGauche"> Titre DéCALé à gauche de sa position normale</h2> <h2 class="centre"> Titre CENTRé dans la page </h2> <h2 class="fixe"> Titre FIXE dans la page (noScroll)</h2> </body></html> fixed pas ss I.E. ! 26/03/2017

CSS: Modèle de page Web zones fixes zones relatives & absolues <body> <div id="HH"> <div id="G"><img src="LOGOEPU.gif" width="120" height="40"></div> <div id="M"> <p> BANDEAU FIXE HORIZONTAL (HH)</p></div> <div id="D"><p><a href="mailto:one@somewhere"> email </a> </p></div> </div> <!-- fin HH --> <div id="VG"> <p> "fixed" V G </p> <div id="RUBRIQUE"> ..... </div> </div> <!-- fin VG --> <div id="GRDTITRE"><p> Grand Titre </p></div> <div id="PRINCIPAL"> <p> CADRE PRINCIPAL "absolute" </p> <div id="SECTION"> <p> SECTION 1 "relative" </p> </div> <!-- fin SECTION --> </div> <!-- fin PRINCIPAL --> </body> CSS: Modèle de page Web zones fixes zones relatives & absolues 26/03/2017

CSS: Insertion d'images dans un texte: float & clear OK ss I.E. & ss FF ! <html><head> <style type="text/css"> imgdroite{ float:right ; padding-left:20px; } imggauche { float:left ; padding-right:20px; } break { clear:both ; } </style></head> <body> <p> PARAGRAPHE 1 <br/> <img class="droite" src="xpath.gif" width="112" height="84" /> This is some text. This is some text. This is some text. ….</p> <p> PARAGRAPHE 2 <br/> This is some text. This is some text. This is some text. ……</p> <p>PARAGRAPHE 3 <br/> <img class="gauche" src="xpath.gif" width="112" height="84" /> This is some text. This is some text. This is some text. …..</p> <p class="break">Part 3.2: Ici aprés un "clear" This is some text. This is some text. This is some text. This is some text. This is some text. </p> </body> </html> 26/03/2017

CSS: em % overflow :hover :before content -moz opacity CATALOG {display: block; background-color: #cccccc; width: 100%; } CATALOG:before { content: "Ma Liste de CDs"; font-size: 36px; color: #0000FF; text-align: center; } CD { display: inline-block; background-image: url(../IMAGES/cd.gif); margin-bottom: 10px; margin-left: 5px; height: 130px; width: 129px; font-size: 6pt; border: cyan 5px ridge; -moz-border-radius: 50%; } CD:hover { background-image: url(../IMAGES/cd.png); background-position: 0px 4px; height: 248px; width: 246px; font-size: 11pt; } CD>ARTIST, CD>TITLE { display:block ; margin-top: 1em; margin-left: auto; margin-right: auto; padding: 0.5em; background-color: #FFFFFF; font-weight: bold; font-size: 130%; } CD>TITLE { width: 50%; height:2em; overflow: auto ; -moz-border-radius: 30px; color: #00FFFF;font-style:italic; text-align:center ; filter:alpha(opacity=80); opacity:0.8; } 26/03/2017

Fin du cours CIP1 - CMD la suite de ce document est un complément en option pour programmer en CSS 26/03/2017

XML et CSS Le style "Table" CSS dans XML <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/css" href="tableCatalog.css"?> <CATALOG> <Titre> Mon Tableau de CDs </Titre> <CD> … </CD> </CATALOG> CATALOG { display: table; width: 80%; margin-left: 30px; border: 2px solid; padding: 20px 30px 30px 20px; } CD { display: table-cell; background-color: #00FFFF; border: 2px solid; padding: 20px 30px 30px 20px; Titre { display: table-caption; font-size:36px; text-align:center; 26/03/2017

CSS: les Styles Multiples en HTML <head> <link rel="stylesheet" href="Style1.css" type="text/css" /> href="Style2.css" type="text/css" /> <style> @import "Fontes.css" ; @import "Tables.css" ; .center { } #navBar { } </style> </head> <body> <div id="masthead"> </div> <div id="navBar"> </div> </body> </html> style prédéfini des balises balise <style> attribut .class attribut #id CSS par @import CSS par link "stylesheet" Héritage Masquage 26/03/2017

CSS: les Styles Multiples en XML <?xml version="1.0" encoding="iso-8859-1"?> <?xml-stylesheet type="text/css" href="monStyle1.css"?> <?xml-stylesheet type="text/css" href="monStyle2.css"?> <racine> <titre> Styles en XHTML et XML</titre> <html xmlns = " http://www.w3.org/1999/xhtml " > <body> <h1> Liens sous XHTML</h1> <a href=" http://www.essi.fr/~pfz "> Chez Moi </a> </body> </html> </racine> Héritage Masquage styles prédéfinis par xmlns: html, xhtml, etc. CSS par xml-stylesheet 26/03/2017

CSS: Z-Index OK ss I.E. ! Pb ss FF ? <html> <head> <style type="text/css"> img{position:absolute;} img.x1{left:100px; top:100px; z-index:-1} img.x2{left:50px; top:50px; z-index:-2} img.x3{left:0px; top:0px; z-index:-3} </style></head> <body> <h1>This is a Heading</h1> <img class="x1" src="BandeauVerticalPPT.gif" width="112" height="380"> <img class="x2" src="BandeauVerticalPPT.gif" width="112" height="380"> <img class="x3" src="BandeauVerticalPPT.gif" width="112" height="380"> <p>Default z-index is 0. z-index -1 has lower priority.</p> </body> </html> OK ss I.E. ! Pb ss FF ? 26/03/2017

CSS: Z-Index avec "iframe" OK ss I.E. et FF ! <html> <body> <iframe style="width:75%; height:300px; background-color: #FFFF99" name="view" src="CSSzIndex.html"> </iframe> </body> </html> 26/03/2017

Ilot XML dans HTML OK ss I.E. ! Pb ss FF ? <html> <body> <xml id="MonIlotXML" src="data.xml"></xml> <table border="1" datasrc="#MonIlotXML"> <tr> <td><span datafld="NOM"></span></td> <td><span datafld="PRENOM"></span></td> </tr> </table> </body> </html> 26/03/2017

CSS: Propriétés des Tables valeurs display table inline-table table-row-group table-column-group table-header-group table-footer-group table-caption table-row table-cell caption-side top bottm left right inherit table-layout auto fixed inherit border-collapse collapse separate inherit border-spacing dist-horiz dist-vertic inherit empty-cells show hide inherit 26/03/2017

CSS: des Tables sans la balise <table> (v1) idem en XML mais pas ss I.E. ! <html> <head> <style type="text/css"> .grdMere{display: table;} .mere{display: table-row;} .fille{display: table-cell;} </style></head> <body> <div class="grdMere"> <div class="mere"> <p class="fille"> F11</p> <p class="fille"> F12</p><p class="fille"> F13</p> </div> <p class="fille"> F21</p> <p class="fille"> F22</p> </body></html> 26/03/2017

CSS: des Tables sans la balise <table> (v2) idem en XML mais pas ss I.E. ! <html> <head> <style type="text/css"> .grdMere{display: table;} .grdMere>div{display: table-row;} .grdMere>div>p{display: table-cell;} </style></head> <body> <div class="grdMere"> <div> <p> F11</p> <p > F12</p><p> F13</p> </div> <p > F21</p> <p > F22</p> </body></html> 26/03/2017

XML et CSS: divers compléments contenu pseudo-élements :before :after textes :first-line :first-letter white-space compteurs pagination {content:"string" attr(A) url(" ") counter(C);} rien d'autre ! Exercice[ref]:before {content: "Exercice - " attr(ref);} Paragraph:first-line {font-style:"italic";} Paragraph:first-letter {font-size:+200%;} SourceLP {white-space:pre;} OK.ss Mozilla Chapitre {counter(chapnum); counter-increment:chapnum; counter-reset:sectnum;} Chapitre {page-break-after: always;} Exemple{page-break-inside: avoid;} 26/03/2017