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 4 : Transformation de documents XML : XPath XSLT 5 : Langages XML
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
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 « Working Draft » public –février 2008 HTML5 est encore en développement. Néanmoins la majorité des navigateurs supportent HTML 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
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 …..
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>
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> <li>Total HT</li> <li>Taux de TVA %</li> <li>TVA</> <li>Total TTC</li> </body> </html> Exemple « Balises de structure »
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>
Premier Exemple ExHTML1.html
Balises de formatage(2) « 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! ….
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>
Exemple 2 ExHTML2.html
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"> </div> </body> </html> Exemple div
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/>
Exemple 3 <body> <h2>Troisième exemple HTML</h2> ……. <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 type="a" compact start= 3> <li> action3 </li> <li>action4</li> <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>
Exemple 3 ExHTML3.html
Balises d’hyperliens(4) 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
Exemple 4 <body> <a name = "sommaire"></a> ….. <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> <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> …… <a name=« Page"> <h3> Une page statique </h3></a> </body> </html>
Exemple 4 ExHTML4.html
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>
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>
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> <td align="center">1.1</td> <td align="right">1.2</td> <td align="center">2.1</td> <td align="center">2.2</td> </tbody> </table> </body> </html>
Exemple 5 ExHTML5.html
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
Nouvelles fonctionnalités HTML5 HTML5 est le résultat de coopération entre World Wide Web Consortium (W3C) et Web Hypertext Application Technology Working 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.
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
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 é, à…. Exemple1
HTML5 Exemple : ( attention ouvrir avec Safari – supporte MP4) <!DOCTYPE html> <html> <body> <video width="720" height="576" controls autoplay> <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
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
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
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
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>
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écution : <time datetime="P30M">30 minutes</time></p>
Elements obsolets : 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>
HTML4/HTML5 Balises obsolettes <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame>, <frameset>, <noframes> <strike> <tt>
FEUILLES DU STYLE CSS Comment modifier dynamiquement l’aspect du document HTML? solutions : CSS CSS : Cascading Style Sheet le standard adopté par W3C
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.
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
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"> </div> </body></html>
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}
Utilisation 1/2 <head> 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>
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
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}
Utilisation 2/2 <p style="color : red;text-align: right"> 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
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
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 }
Références http://www.w3c.org/Style/CSS http://www.w3schools.com/css http://www.websitetips.com/css/index.html