1 Introduction aux Web Services Partie 1. Technologies XML Cours 1.1 : Rappel HTML Janvier 2013.

1 Introduction aux Web Services Partie 1. Technologies XML Cours 1.1 : Rappel HTML Janvier 2013

2 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

3 Eléments du HTML Balises : 1.Balises de structure du document 2.Balises de formatage 3.Balises de listes 4.Balises des hyperliens 5.Balises des images et des images maps 6.Balises de tableaux 7.Balises de formulaires 8.Balises des cadres 9.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

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

5 Exemple des Balises de structure(1) 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> <title>Facture</title></head>

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

7 Premier exemple HTML – plus complexe 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> <title>TD1</title></head><body> Premier exemple HTML complété Premier exemple HTML complété Installer et configurer Tomcat Installer et configurer Tomcat Réaliser une page html avec quelques contrôles Javascript En guise d'introduction Réaliser une page html avec quelques contrôles Javascript En guise d'introduction Dans cet exemple nous essayons de montrer quelques fonctionnalités simples Dans cet exemple nous essayons de montrer quelques fonctionnalités simples Ne rien faire pour le moment Ne rien faire pour le moment Une page statique Une page statique

8 Premier Exemple ExHTML1.html

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

10 Exemple 2 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> <title>TD1</title></head><body> Deuxième exemple HTML Deuxième exemple HTML Quelques formatages locaux desapprouvés par W3C </font> Installer et configurer Tomcat Installer et configurer Tomcat Réaliser une page html avec quelques contrôles Javascript Réaliser une page html avec quelques contrôles Javascript <hr></hr> Ne rien faire pour le moment Ne rien faire pour le moment Une page statique Une page statique </body></html>

11 Exemple 2 ExHTML2.html

12 Balises pour formatage local Balise div : signifie « division » ou partie d’une page, <html><body> This is a header This is a header This is a paragraph. This is a paragraph. This is a header This is a header This is a paragraph. This is a paragraph. </div></body></html> Exemple div Exemple div

13 Balises de liste (3) HTML4 : Listes de définitions, listes numérotées, listes à puces, compatibilité HTML3.2 texte texte OL – listes numérotées, - OL – listes numérotées, - UL – listes avec les puces

14 Exemple 3 …….<body> Troisième exemple HTML Troisième exemple HTML nous commensons nous commensons attributs sont sans effet action1 action1 action2 action2 </ol> Installer et configurer Tomcat Installer et configurer Tomcat Réaliser une page html avec quelques contrôles Javascript Réaliser une page html avec quelques contrôles Javascript </ol> action3 action3 <li>action4</li></ol> Les actions sont à specifier Les actions sont à specifier </ul><hr></hr> Ne rien faire pour le moment Ne rien faire pour le moment Une page statique Une page statique </body></html>

16 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

17 Exemple 4 …..<body> Balises des hyperliens HTML Balises des hyperliens HTML Installer et configurer Tomcat Installer et configurer Tomcat Réaliser une page html avec quelques contrôles Javascript Réaliser une page html avec quelques contrôles Javascript </ol><hr></hr> ttttttttttttttttt<br>ttttttttttttttt<br>…..</font><hr></hr> Ne rien faire pour le moment Ne rien faire pour le moment Retour Retour aaaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaaaaaaaaa<br>……</font> Une page statique Une page statique </body></html>

19 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,,,,,,,,,,,,,,

20 Balises de tableaux(6) : permet de définir des propriétés communes à un gourpe de colonnes : permet de définir des propriétés communes à un gourpe de colonnes </colgroup> définit une ligne de tableau définit une ligne de tableau définit une cellule à l’interieur de tr définit une cellule à l’interieur de tr de même de même Attribut importan :colspan …. ….

21 Exemple 5 ….<body> Tableau de HTML Tableau de HTML <tbody><tr> Première colonne du premier groupe : centrée Première colonne du premier groupe : centrée Seconde colonne du premier groupe : alignée à droite Seconde colonne du premier groupe : alignée à droite premiere colonne du second groupe : centrée premiere colonne du second groupe : centrée seconde colonne du second groupe : centrée seconde colonne du second groupe : centrée </tr><tr> 1.1 1.1 1.2 1.2 2.1 2.1 2.2 2.2 </tr></tbody></table></body></html>

23 Balises de formulaires Balise Balise 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

24 Javascript(1) Contenu executable : Contenu executable : 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.

25 Javascript(2) Incorporation dans les documents HTML <SCRIPT>…..</SCRIPT> La balise prend l’attribut « LANGUAGE » - fichier à part - fichier à part

26 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 : ( Nettoyer ) -objet form de HTML, méthode reset; -objet document de HTML – indique le document actif. -objet « link » = balise a+attribut href

27 Objets HTML et Javascript Javascript accède aux objets prédéfinis de HTML DocumentFormAppletArgumentHistoryImageLinkOptionPlugin…

28 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()

29 Exemple(1) Source.html Source.html Source.js 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]);}

30 Exemple (2):Javascript //Ajout d'une personne function ajout() {nom = document.formulaire1.nom.value; if (nom.length != 0) if (nom.length != 0) { prenom=document.formulaire1.prenom.value; if (prenom.length != 0) if (prenom.length != 0){anneeNaissance=document.formulaire1.annee.value; if (anneeNaissance.length != 0) if (anneeNaissance.length != 0){ if ( isNaN(anneeNaissance) == false ) {personnes[nbPersonnes]=nom; nbPersonnes ++; affiche_personne(); } else{document.formulaire1.annee.value="";afficheErreur(3);}}else{afficheErreur(2);}}else { afficheErreur(1); } }else { afficheErreur(0); } }

31 Exemple 3: Javascript //Affichage des personnes function affiche_personne() {texte=""; for(i=0;i<nbPersonnes;i++) 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 ) if ( valeur.length != 5 ){document.formulaire1.code.value=""; retour = 4; } if ( isNaN(valeur) == true ) {document.formulaire1.code.value=""; retour = 3; }afficheErreur(retour); return retour; }

32 Balise des cadres La balise sert à afficher une page html à l’intérieur d’une autre page html La configuration de la page courante est effectuée à l’aide de la balise frameset </frameset>

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

34 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.

35 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

36 Balises de formattage des pages Balise div : definit « division », partie d’un document html à utiliser avec des styles particuliers. Ex ( W3Schools) <html><body> This is a header This is a header This is a paragraph. This is a paragraph. This is a header This is a header This is a paragraph. This is a paragraph. </div></body></html>

37 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}

38 Utilisation 1/2 Les styles peuvent être définis: 1.Dans un fichier à part, lié à l’aide de l’instruction "/> 2.Directement dans le fichier HTML P {color: blue}

39 Exemple de HTML/CSS Fichier HTML <head> - balise de structure - balise de structure <title>ExCSS</title></head><body> Definition des chansons Definition des chansons Ma chanson (identification de la définition d'un terme) Ma chanson (identification de la définition d'un terme)<ul> par l'auteur par l'auteur Producteur : Dupond Producteur : Dupond Editeur : Maison edition Editeur : Maison edition Duree : 6:20 Duree : 6:20 Date : 1978 Date : 1978 Artiste : Toto Artiste : Toto </ul></body></html> ExHTML7_CSS.html Attribut rel Specifie la relation entre les fichiers

40 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}

41 Utilisation 2/2 3.Directement dans la définition de l’élément 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

42 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

43 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 }

44 HTML vers XHTML XHTML est le successeur de l’HTML Spécification W3C pour la publication de document sur le World Wild Web HTML 1989 CERN – projet WWW / 1993 Internet Draft for HTML / 1995 HTML 2.0 / 1997 HTML 3.2 et 4.0 XHTML 1.0 (1999) est une reformulation de l’HTML 4.01 respectant la syntaxe XML

45 XHTML 1.0 Successeur de l’HTML XHTML 1.0 = fonctionnalités HTML 4.01 Outils de conversion automatique de code HTML 4.01 en XHTML 1.0 (ex. HTML Tidy) http://tidy.sourceforge.net/ Application XML, avec respect de la syntaxe XML Modularité Support de plates-formes diverses : nouvelles (voitures, téléphones, ultras portables…), de capacités limitées (PDA, téléphones…) ou riches (PC…) Librairies mathématiques, graphiques, applicatives etc.

46 XHTML versus HTML 4 – 1/3 Document bien formés au sens XML Balises correctement imbriquées Correct : Paragraphe avec texte en gras Correct : Paragraphe avec texte en gras Incorrect : Paragraphe avec texte en gras Incorrect : Paragraphe avec texte en gras Balises fermées Correct : Paragraphe Correct : Paragraphe Incorrect : Paragraphe Incorrect : Paragraphe Noms des balises et attributs en minuscules Correct : Hello Correct : Hello Incorrect : Hello Incorrect : Hello

47 XHTML versus HTML 4 – 2/3 Valeurs des attributs entre guillemets Correct : Correct : Incorrect : Incorrect : Valeurs abrégées des attributs interdites Correct : Correct : Incorrect : Incorrect : Attribut "name" remplacé par l'attribut "id" Correct : … Correct : … Incorrect : … Incorrect : …

48 XHTML versus HTML 4 – 3/3 Doit contenir une déclaration de type de document DTD Puis doit commencer par la balise html <head> Titre du document Titre du document </head><body> Corps du document Corps du document </body></html>

49 Exemple : HTML 4.01 versus XHTML 1.0 Exemple HTML 4 Des éléments comme HTML, HEAD et BODY sont implicites, leurs balises ouvrantes et fermantes sont optionnelles. De nombreuses balises fermantes sont optionnelles, notamment pour P (paragraphe) et LI (entrée de liste). Les noms d'éléments et d'attributs peuvent librement mélanger majuscules et minuscules. Certains attributs ont une valeur par défaut. Les guillemets ne sont pas toujours obligatoires autour des valeurs d'attribut. Les éléments vides n'ont pas de syntaxe fermante. Exemple XHTML 1.0 Tous les éléments doivent être explicitement balisés. Les balises fermantes ne sont pas optionnelles. Les noms d'éléments et d'attributs doivent être en minuscules. Tous les attributs doivent avoir une valeur explicite. Les guillemets sont toujours obligatoires autour des valeurs d'attribut. Les éléments vides doivent être fermés. Ex1HTMLEx1XTML

50 DTD XHTML 1.0 définit 3 types de DTD. Transitional Il est possible d’utiliser les éléments de style HTML à l’intérieur du document. Exemple : font, center, bgcolor etc. Strict Les éléments de style doivent être définis dans une feuille CSS. Frameset Identique à Transitional, mais où la balise body est remplacée par la balise frameset, elle-même contenant des balises frame.

51 Validation de document XHTML

52 Conversion HTML en XHTML Exemple : outil libre HTML Tidy http://tidy.sourceforge.net/ A l’invite de commande : tidy.exe --output-xhtml yes old.html > new.html Source et résultat : old.html, new.html old.htmlnew.htmlold.htmlnew.html

53 XHTML 1.1 - Modularité Modularité Support de plates-formes diverses : nouvelles (voitures, téléphones, ultras portables…), de capacités limitées (PDA, téléphones…) ou riches (PC…) : XHTML Basic Librairies mathématiques, graphiques, applicatives etc. XHTML 1.1 est défini à partir de XHTML 1.0 Strict, avec regroupement des balises et attributs par collections – modules (Image, Style, Applet etc.) XHTML 2 a été abandonné au profit de HTML5 – XHTML5

54 XHTML5 – HTML 5 HTML5 (HyperText Markup Language 5) est la dernière révision du principal langage du web, HTML. HTML5 spécifie deux syntaxes d'un modèle abstrait défini en termes de DOM : HTML5 et XHTML5 webHTMLDOMwebHTMLDOM HTML5 W3C Final Recommendation 2014

55 Quelleques différences XHTML5 : utilisation du syntaxe xml plus strict du xml HTML5 peut utiliser la définition du document

56 Exemple

57 Nouvelles fonctionnalités X/HTML 5 des nouveau elements qui partitionnent des pages Web page en sections, ex: :,, :,, : :

58 HTML5 Balises du média définit contenu musical definit conteneur d’applications( plug-ins) définit sources pour vidéo et définit pistes et définit vidéo contenu

59 Balises Média HTML5 Your browser does not support the video tag. Your browser does not support the video tag. http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video

60 Références Page d’accueil du groupe de travail XHTML du W3C http://www.w3.org/MarkUp/ Spécification « XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition) » http://www.w3.org/TR/xhtml1/ Valider un document XHTML http://validator.w3.org/ Exemple de convertisseur d’HTML en XHTML : HTML Tidy http://tidy.sourceforge.net/

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

1 Introduction aux Web Services Partie 1. Technologies XML Cours 1.1 : Rappel HTML Janvier 2013.

Présentations similaires

Présentation au sujet: "1 Introduction aux Web Services Partie 1. Technologies XML Cours 1.1 : Rappel HTML Janvier 2013."— Transcription de la présentation:

Présentations similaires

Notre projet

Feed-back

Entrer

S'autoriser via un réseau social:

1 Introduction aux Web Services Partie 1. Technologies XML Cours 1.1 : Rappel HTML Janvier 2013.

Présentations similaires

Présentation au sujet: "1 Introduction aux Web Services Partie 1. Technologies XML Cours 1.1 : Rappel HTML Janvier 2013."— Transcription de la présentation:

Présentations similaires

Notre projet

Feed-back