1 / 48

Introduction aux Web Services Partie 1. Technologies HTML-XML

Introduction aux Web Services Partie 1. Technologies HTML-XML. Cours 1.1 : Rappel HTML Janvier 2013. PRESENTATION DU COURS 1/2. 1 : Rappel du HTML HTML HTML5 CSS Javascript 2 : XHTML 3 : Eléments fondamentaux du langage XML : XML DTD XML- Schema

hetal
Download Presentation

Introduction aux Web Services Partie 1. Technologies HTML-XML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction aux Web ServicesPartie 1. Technologies HTML-XML Cours 1.1 : Rappel HTML Janvier 2013

  2. PRESENTATION DU COURS 1/2 • 1 : Rappel du HTML • HTML • HTML5 • CSS • Javascript • 2 : XHTML • 3: Eléments fondamentaux du langage XML : • XML • DTD • XML-Schema • 4 : Transformation de documents XML : • XPath • XSLT • 5 : Langages XML

  3. PRESENTATION DU COURS 2/2 • 6 : Les APIs XML • 7 : XML et les architectures N-tiers • 8 : Web Services • 9 : Exemples d’applications de XML • Sites de référence : • http://www.w3schools.com • http://www.w3c.org

  4. HTML • Ce chapitre a comme objectif de donner une vue synthétique du langage HTML et présenter ses évolutions. HTML – langage de base pour la création des interfaces des services web. Premier pas vers description de contenu • Spécification HTML 4 – 1999, • Spécification HTML 5 – décembre 2007 • Premier « WorkingDraft » public –février 2008 • HTML5 est encore en développement. Néanmoins la majorité des navigateurs supportent HTML 5

  5. Eléments du HTML* Balises : • Balises de structure du document • Balises de formatage • Balises de listes • Balises des hyperliens • Balises des images et des images maps • Balises de tableaux • Balises de formulaires • Balises des cadres • Balises de contenus exécutables Balises possèdent des attributs *Ce rappel est loin d’être exhaustif et ne donne que des éléments nécessaires pour ce cours

  6. Balisesde la structure (1) <HTML> </HTML> - balise obligatoire <HEAD> </HEAD> - contient les balises qui composent l’entête du document <BODY> </BODY> - contient l’ensemble des contenus des balises qui composent le corps d’un document <TITLE> </TITLE> donne un titre descriptif d’un document, s’affiche dans la barre de navigateur <STYLE> </STYLE> - spécifie les propriétés du style relatives au document …..

  7. Exemple des Balises de structure(1) <html xmlns="http://www.w3.org/1999/xhtml" lang="fr"> <!--exemple 1 - Balises de structure----> <!-- --> <style type = "text/css"> <!--balise de style à l'intérieur du document--> body { font-family: Helvetica; color: black;font-size: 16px} h2 {font-family: Arial; color: blue;font-size: 22px} h3 {font-family: Arial; color: blue;font-size: 18px} </style> <head> <!--Balise meta : description du document --> <meta http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-1"/> <meta name="auteur" content="Mme Benois-Pineau"/> <meta name="Mots-clés" content="Rappel,html,pages statiques"/> <title>Facture</title> </head>

  8. Exemple des Balises de structure(2) <body> <h2>Définition d'une facture</h2> <ol type "i" compact> <li><h3>Définition d'une ligne</h3></li> <ol type"i" compact> <li>Numéro de l'item</li> <li>Référence de l'item</li> <li>Désignation</li> <li>Qté item</li> <li>Prix Unitaire</li> </ol> <li><h3>Totaux</h3></li> <ol type "i" compact> <li>Total HT</li> <li>Taux de TVA %</li> <li>TVA</> <li>Total TTC</li> </ol> </ol> </body> </html> • Exemple « Balises de structure »

  9. Premier exemple HTML – plus complexe <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tansitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr"> <!--exemple 2 avec les elements de formattage et de navigation----> <style type = "text/css"> body { font-family: Helvetica} h2 {font-family: Arial; color: blue;font-size: 22px} h3 {font-family: Arial; color: blue;font-size: 16px} .reponse { color:red; font-weight: bold; } </style> <head> • <meta http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-1"/> • <title>TD1</title> </head> <body> • <h2>Premier exemple HTML complété </h2> • <a href="#installation">Installer et configurer Tomcat</a> <br></br> • <a href="#td1">Réaliser une page html avec quelques contrôles Javascript</a> <h3>En guise d'introduction</h3> • <br>Dans cet exemple nous essayons de montrer quelques fonctionnalités simples </br> • <a name="installation"></a> • <h3>Ne rien faire pour le moment</h3> • <a name="td1"> <h3> Une page statique </h3></a> </body></html>

  10. Premier Exemple • ExHTML1.html

  11. Balises de formatage(2) 2. Balises de formatage « Mélange du contenu et du style  : « du fond et de la forme » <B> texte </B>, - texte en gras <font> texte <font>, <BR>…</BR> - saut de ligne <HR></HR> - insertion d’une ligne horizontale Utiliser les feuilles de style CSS! ….

  12. Exemple 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tansitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr"> <--exemple 2 avec les elements de formattage en plus----/> <style type = "text/css"> • body { font-family: Helvetica} • h2 {font-family: Arial; color: blue;font-size: 22px} • h3 {font-family: Arial; color: blue;font-size: 16px} • .reponse { color:red; font-weight: bold; } </style> <head> <meta http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-1"/> • <title>TD1</title> </head> <body> • <h2>Deuxième exemple HTML</h2> • <font size=7 color="red" face="Helvetica"> • Quelques formatages locaux desapprouvés par W3C • </font> • <a href="#installation">Installer et configurer Tomcat</a><br></br> • <a href="#td1">Réaliser une page html avec quelques contrôles Javascript</a> • <hr></hr> • <a name="installation"></a> • <h3>Ne rien faire pour le moment</h3> • <a name="td1"> <h3> Une page statique </h3></a> </body> </html>

  13. Exemple 2 • ExHTML2.html

  14. Balises pour formatage local • Balise div : signifie « division » ou partie d’une page, • <html> • <body> • <h3>This is a header</h3> • <p>This is a paragraph.</p> • <!-- Application de la balise div --> • <div style="color:#00FF00"> • <h3>This is a header</h3> • <p>This is a paragraph.</p> • </div> • </body> • </html> • Exemple div

  15. Balises de liste (3) • HTML4 : Listes de définitions, listes numérotées, listes à puces, compatibilité HTML3.2 • <li type= « type de liste » start=« valeur initiale » compact value=3>texte</li> • OL – listes numérotées, - <!--ordered list--> • <ol type=i/a/… start=« valeur initiale » compact/> • UL – listes avec les puces • <ul type=« disc »/ « square »/ « circle » compact/>

  16. Exemple 3 • ……. • <body> • <h2>Troisième exemple HTML</h2> • <li type="i" start= 3 value=4>nous commensons</li> • attributs sont sans effet • <ol type ="a" compact> • <li> action1 </li> • <li> action2 </li> • </ol> • <ol type"i" compact> • <li> <a href="#installation">Installer et configurer Tomcat</a></li> • <li> <a href="#td1">Réaliser une page html avec quelques contrôles Javascript</a></li> • </ol> • <ol type="a" compact start= 3> • <li> action3 </li> • <li>action4</li> • </ol> • <ul type=disc compact> • <li> Les actions sont à specifier</li> • </ul> • <hr></hr> • <a name="installation"></a> • <h3>Ne rien faire pour le moment</h3> • <a name="td1"> • <h3> Une page statique </h3></a> • </body> • </html>

  17. Exemple 3 • ExHTML3.html

  18. Balises d’hyperliens(4) • <a> • Deux fonctions : • 1. associée à l’attribut HREF définit un hyperlien • 2. associée à l’attribut « name » définit un ancre à l’intérieur du document • - possibilité de naviguer dans des documents volumineux

  19. Exemple 4 • ….. • <body> • <a name = "sommaire"></a> • <h2>Balises des hyperliens HTML</h2> • <ol type"i" compact> • <li> <a href="#installation">Installer et configurer Tomcat</a></li> • <li> <a href="#Page">Réaliser une page html avec quelques contrôles Javascript</a></li> • </ol> • <hr></hr> • <font size=1 color= blue face = Arial> • ttttttttttttttttt<br> • ttttttttttttttt<br> • ….. • </font> • <hr></hr> • <a name="installation"></a> • <h3>Ne rien faire pour le moment</h3> • <a href=#sommaire> Retour </a> <br></br> • <font size=1 color= green face = Arial> • aaaaaaaaaaaaaaaaaaaaa<br> • aaaaaaaaaaaaaaaaaaaaaaaaaaa<br> • …… • </font> • <a name=« Page"> • <h3> Une page statique </h3></a> • </body> • </html>

  20. Exemple 4 • ExHTML4.html

  21. Balises de tableaux (6) • <table align=« left/center/right » border=« épasseur » bgcolor=« couleur » • Width=« largeur en %de fenêtre/pels» cols=« nombre de colonnes » • …</table> • Balises corrélatives • <caption>,<thead>, <tfoot>,<tbody>,<colgroup>,<col>,<tr>,<th,<td>

  22. Balises de tableaux(6) • <colgroup> : permet de définir des propriétés communes à un gourpe de colonnes • <colgroup span=3 align=« center » valign=« top »> • </colgroup> • <tr> </tr> définit une ligne de tableau • <td> </td> définit une cellule à l’interieur de tr • <th> </th> de même • Attribut importan :colspan • <tr align= « left » colspan=3>….</tr>

  23. Exemple 5 • …. • <body> • <h2>Tableau de HTML</h2> • <table border 1> • <tbody> • <tr> • <td align="center">Première colonne du premier groupe : centrée </td> • <td align="right">Seconde colonne du premier groupe : alignée à droite</td> • <td align="center">premiere colonne du second groupe : centrée</td> • <td align="center">seconde colonne du second groupe : centrée</td> • </tr> • <tr> • <td align="center">1.1</td> • <td align="right">1.2</td> • <td align="center">2.1</td> • <td align="center">2.2</td> • </tr> • </tbody> • </table> • </body> • </html>

  24. Exemple 5 • ExHTML5.html

  25. Balises de formulaires • Balise <form> • Elle regrouppe les éléments du formulaire : boutons, champs de saisie, etc.. • Elle possède les attributs: method, action,enctype, name, accept, onsubmit,onreset, accept-charset • Attribut method – indique comment sont envoyées les données: POST ou GET • Analyse conjointe avec Javascript

  26. Nouvelles fonctionnalités HTML5 • HTML5 est le résultat de coopération entre World Wide Web Consortium (W3C) et Web Hypertext Application TechnologyWorking Group (WHATWG). • WHATWG travaillait avec les formulaires et applications web, and W3C travaillait avec XHTML 2.0. En 2006, ils ont décidé de coopérer et de créer une nouvelle version d’HTML.

  27. HTML5 • Elément <canvas> pour le dessin 2D • Eléments <video> et <audio> pour restitution du média • Support pour le stockage local • Nouveaux élements spécifiques du contenu, comme <article>, <footer>, <header>, <nav>, <section> • Nouveaux formulaires prédéfinis, comme calendar, date, time, email, url, search

  28. HTML5 • Déclaration: balise <!DOCTYPE> • <!DOCTYPE html><html><head><title>Title of the document</title></head><body>The content of the document......</body></html> Commentaire: si nous ne déclarons pas l’attribut « encoding », il faut utiliser les entités &eacute, &agrave…. • Exemple1

  29. HTML5 Exemple : ( attention ouvrir avec Safari – supporte MP4) <!DOCTYPE html> <html> <body> <videowidth="720" height="576" controlsautoplay> <source src="DCZD.mp4" type="video/mp4 »> Your browser does not support the video tag. </video> </body> </html> file://localhost/Users/benois-p/D/PédagogieBx/XML/Cours2012_2013/C1_HTML_XML/ExHTML5_Video.html

  30. Intégration du média HTML5 • <audio> définit le contenu audio • <video> définie le contenu vidéo • <source> définit les ressources multiples pour <video> et <audio> • <embed> définit un conteneur pour un eapplication externe (a plug-in) • <track> défini pistes pour les contenus vidéo et audio

  31. Quelques éléments nouveaux(1) • HTML5 propose de nouveaux éléments- balises pour une meilleure structuration des documents: • <article>,<aside> <bdi>, • <details>, <summary>, <figure>,<figcaption> <footer>,<header>, <hgroup>, <mark> (text souligné) • - balises de fragmentation et formatage du texte • <command> -bouton –commande qui peut être executée par l’utilisateur • <nav> - navigation

  32. Quelques éléments nouveaux • <meter> - définit une mesure scalaire avec la dynamique connue • <time> - définit la date et l’heure. • Balise <time> sert à l’indexation automatique des pages et à l’importation des dates par des robots. • Attributs : • datetime : associe une date et/ou heure dans un format standardisé ISO8601 • pubdate : date de publication de son ancêtre « article » ou du document complet

  33. Balise « time » • datetime = « YYYY-MM-DD  hh:mm:ss» format complet, • datetime = « YYYY-MM-DD hh:mm »,… « YYYY » • - formats incomplèts • pubdate – sa présence signifie que la valeur de l’atribut « datetime » correspond à la date de publication • <p>Publi&ecute le <time datetime="2013-01-07" pubdate>7 janvier 2013</time>.</p>

  34. Balise « time » • Exemple • Il est également possible de spécifier le décalage horaire, la zone horaire • Il est possible de spécifier la période /durée dans la balise “time“ • P – période, W, D, H, M, S – unités de temps (semaine, jours, heures, minutes, secondes). • <p>Temps d’ex&eacutecution : <time datetime="P30M">30 minutes</time></p>

  35. Elementsobsolets : Balise des cadres(HTML4) • La balise <frame> sert à afficher une page html à l’intérieur d’une autre page html <frame src=« mapage.html »> La configuration de la page courante est effectuée à l’aide de la balise frameset <frameset cols=« 33%,33%,33% »> <frameset rows=« 200 »> <frame src=« mapage.html »/> </frameset> </frameset>

  36. HTML4/HTML5Balises obsolettes • <acronym> • <applet> • <basefont> • <big> • <center> • <dir> • <font> • <frame>, <frameset>, <noframes> • <strike> • <tt>

  37. FEUILLES DU STYLE CSS • Comment modifier dynamiquement l’aspect du document HTML? • solutions : CSS • CSS : Cascading Style Sheet le standard adopté par W3C

  38. Principes de CSS • Une Feuille de style CSS = liste de règles, chacune indiquant les noms des éléments auquelles elles s’appliquent et les paramètres de style qui doivent être utilisés.

  39. Syntaxe 1/2 • La syntaxe de base doit respecter le modèle : element { propriété: valeur } body {color: blue} p {font-family: arial} • Il est possible de grouper les éléments lors d’une définition h1, h2, h3 {color:green } • La définition de classe permet d’affiner un élément element.classe {propriété: valeur } p.droit {text-align: right} • Il ne peut y avoir qu’une classe par élément HTML • Dans la cas ou l’on ne précise pas l’élément de base de la classe celle-ci s’applique à tous les éléments HTML

  40. Balises de formattage des pages • Balise div : definit « division », partie d’un document html à utiliser avec des styles particuliers. • Ex ( W3Schools) • <html> • <body> • <h3>This is a header</h3> • <p>This is a paragraph.</p> • <div style="color:#00FF00"> • <h3>This is a header</h3> • <p>This is a paragraph.</p> • </div> • </body></html>

  41. Syntaxe 2/2 • Il est possible de spécifier des règles ne s’appliquant qu’à un seul élément en utilisant son id. • Le style peut s’appliquer sur un élément element#id { propriété: valeur } p#par1 {font-family: arial} • Ou sur le premier id trouvé *#id { propriété: valeur } *#par1 {font-family: arial}

  42. Utilisation 1/2 • Les styles peuvent être définis: • Dans un fichier à part, lié à l’aide de l’instruction <head> <link rel="stylesheet" type="text/css" href="<fichier.css>"/> </head> • Directement dans le fichier HTML <head><style type="text/css"> P {color: blue} </style> </head>

  43. Exemple de HTML/CSS • Fichier HTML • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tansitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> • <html xmlns="http://www.w3.org/1999/xhtml" lang="fr"> • <head> • <link rel="StyleSheet" href="styleEx7.css" type="text/css" media="screen"/> - balise de structure <link> • <meta http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-1"/> • <title>ExCSS</title> • </head> • <body> • <h2>Definition des chansons</h2> • <dd> Ma chanson (identification de la définition d'un terme) • <ul> • <li> par l'auteur</li> • <li> Producteur : Dupond</li> • <li> Editeur : Maison edition</li> • <li> Duree : 6:20</li> • <li> Date : 1978</li> • <li> Artiste : Toto</li> • </ul> • </body> • </html> • ExHTML7_CSS.html Attribut rel Specifie la relation entre les fichiers

  44. Feuille de style • Fichier .css body { font-family: Helvetica} h2 {font-family: Arial; color: blue;font-size: 22px} h3 {font-family: Arial; color: blue;font-size: 16px} li {font-family:Arial; color:green;fontsize: 14px}

  45. Utilisation 2/2 3. Directement dans la définition de l’élément <p style="color : red;text-align: right"> La valeur réelle du style est l’union de toutes les définitions. De plus une notion d’héritage existe ainsi la définition de body impacte les paragraphes

  46. Priorité • Il existe des priorités dans l’ordre de présence des styles • Les styles définis dans un élément HTML sont les plus prioritaires • Ensuite viennent les éléments définis dans le head du fichier • Ensuite viennent les éléments définis dans une feuille de style externe • Ensuite viennent les styles par défaut du navigateurs

  47. Pratique avancées 2/3 • Les pseudos classes : • Ce sont des classes prédéfinies ( active, hover, link, visited, :first-child, :lang)/ Element:pseudo-classe { propriété: valeur } a:link {color: #FF0000 } a:visited { color:#FFFF00 } • Les pseudos classes se combinent avec les classes element.classe:pseudo-classe a.red:visited { color: #FFFFFF }

  48. Références • http://www.w3c.org/Style/CSS • http://www.w3schools.com/css • http://www.websitetips.com/css/index.html

More Related