Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
1
Introduction aux Web Services Partie 1. Technologies XML
Cours 1.1 : Rappel HTML Janvier 2013 (-)
2
PRESENTATION DU COURS 1/2
0 : Rappel du HTML : pages statiques, styles 1 : Introduction au langage XML : XML DTD XML-Schema 2 : XHTML 3 : Transformation de documents XML : XPath XSLT 4 :Présentation de documents XML : XSL Fo 5 : Langages XML
3
PRESENTATION DU COURS 2/2
6 : Les APIs XML 7 : XML et les architectures N-tiers 8 : Technologies liées à XML EJB Web Services 9 : Exemples d’applications de XML
4
Du HTML vers XML Chapitre 0 : Rappel du HTML
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
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 executables 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=" 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 "/> <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> <li>Total HT</li> <li>Taux de TVA %</li> <li>TVA</> <li>Total TTC</li> </body> </html> Exemple « Balises de structure »
9
Premier exemple HTML – plus complexe
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tansitional//EN" " <html xmlns=" 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 "/> <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)
« 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" " <html xmlns=" 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 "/> <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"> </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>
……. <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>
17
Exemple 3 ExHTML3.html
18
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
19
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>
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> <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>
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
Javascript(1) Contenu executable : <script>
Pourquoi un script : ajout des actions aux pages web statiques Un script s’exécute coté client Javascript apporte un ensemble assez complet de « fonction set » de commandes intégrées, permettant d’effectuer des calculs, de manipuler les chaînes de caractères, d’emmètre des sons, d’ouvrir des nouvelles fenêtres et URL, d’accéder aux informations fournies par l’utilisateur dans un formulaire HTML et de les vérifier.
27
Javascript(2) Incorporation dans les documents HTML <SCRIPT> …..
La balise <SCRIPT> prend l’attribut « LANGUAGE » <SCRIPT LANGUAGE=« JavaScript »></SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="fichierSource.js"></SCRIPT> - fichier à part
28
Javascript (3) Fonctions et objets
Javascript est un langage –objet dérivé de Java Un objet est ensemble des données et de méthodes. Javascript opère les objets des navigateurs Web et possède ses propres objets. Exemple : <form action="" class="cadre" name="formulaire1"> (<a href="#" onClick="document.formulaire1.reset();">Nettoyer</a>) -objet form de HTML, méthode reset; -objet document de HTML – indique le document actif. -objet « link » = balise a+attribut href
29
Objets HTML et Javascript
Javascript accède aux objets prédéfinis de HTML Document Form Applet Argument History Image Link Option Plugin…
30
Objets HTML : propriétés, méthodes, événements
Pour chaque objet sont définis (1) Propriétés (attrs) (2) Méthodes (3) Evénements Exemple : objet Input Propriétés : name, value, defaultValue Méthodes : focus(), blur(), select(), submit()
31
Exemple(1) Source .html Source .js
//Initialisation des tableaux contenant les comptes et leur libelle personnes = new Array(); libelleComptes = new Array(); nbPersonnes= 0; //Initialisation du tableau des erreurs tableauErreurs = new Array( /* 0 */ 'Le nom doit être renseigné', /* 1 */ 'Le prénom doit être renseigné', /* 2 */ 'L\'année de naissance doit être renseignée', /* 3 */ 'L\'année de naissance ne doit comporter que des chiffres' ); // Affiche le message de l erreur dont le numero est passe en argument function afficheErreur(numeroErreur) { alert(tableauErreurs[numeroErreur]); }
32
Exemple (2):Javascript
//Ajout d'une personne function ajout() { nom = document.formulaire1.nom.value; if (nom.length != 0) { prenom=document.formulaire1.prenom.value; if (prenom.length != 0) { anneeNaissance=document.formulaire1.annee.value; if (anneeNaissance.length != 0) if ( isNaN(anneeNaissance) == false ) personnes[nbPersonnes]=nom; nbPersonnes ++; affiche_personne(); } else document.formulaire1.annee.value=""; afficheErreur(3); } afficheErreur(2); { afficheErreur(1); } { afficheErreur(0); }
33
Exemple 3: Javascript //Affichage des personnes
function affiche_personne() { texte=""; for(i=0;i<nbPersonnes;i++) //Ajout d une nouvelle ligne dans le texte texte += personnes[i]+"\n"; } //Affichage du texte document.formulaire1.listePersonnes.value=texte; /**************************************************************** //Verification du code postal //code retour: // 0 : OK // 3 : presence de lettres dans le code postal // 4 : le code postal fait moins de 5 chiffres function verification_code_postal() { retour = 0; valeur =document.formulaire1.code.value; if ( valeur.length != 5 ) document.formulaire1.code.value=""; retour = 4; if ( isNaN(valeur) == true ) retour = 3; afficheErreur(retour); return retour;
34
Balise des cadres 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>
35
FEUILLES DU STYLE CSS Comment modifier dynamiquement l’aspect du document HTML? solutions : CSS CSS : Cascading Style Sheet le standard adopté par W3C
36
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.
37
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
38
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>
39
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}
40
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>
41
Exemple de HTML/CSS Fichier HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tansitional//EN" " <html xmlns=" 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 "/> <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
42
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}
43
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
44
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
45
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 }
46
Références http://www.w3c.org/Style/CSS http://www.w3schools.com/css
Présentations similaires
