La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

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

Présentations similaires


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

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

2 2 PRESENTATION DU COURS 1/2 1 : Rappel du HTML HTML HTML HTML5 HTML5 CSS CSS Javascript 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 3 PRESENTATION DU COURS 2/2 6 : Les APIs XML 7 : XML et les architectures N-tiers 8 : Web Services 9 : Exemples dapplications de XML Sites de référence :

4 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 « Working Draft » public –février 2008 HTML5 est encore en développement. Néanmoins la majorité des navigateurs supportent HTML 5

5 5 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 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 6 Balisesde la structure (1) - balise obligatoire - balise obligatoire - contient les balises qui composent lentête du document - contient les balises qui composent lentête du document - contient lensemble des contenus des balises qui composent le corps dun document - contient lensemble des contenus des balises qui composent le corps dun document donne un titre descriptif dun document, saffiche dans la barre de navigateur donne un titre descriptif dun document, saffiche 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…..

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

8 8 Exemple des Balises de structure(2) 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

  • Désignation
  • Qté item Qté item Prix Unitaire Prix Unitaire
  • Totaux

  • Total HT Total HT Taux de TVA % Taux de TVA %
  • TVA Total TTC Total TTC Exemple « Balises de structure » Exemple « Balises de structure »

    9 9 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; } TD1 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

    10 10 Premier Exemple ExHTML1.html

    11 11 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 dune ligne horizontale - insertion dune ligne horizontale Utiliser les feuilles de style CSS! ….

    12 12 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; } TD1 Deuxième exemple HTML Deuxième exemple HTML Quelques formatages locaux desapprouvés par W3C 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


    Ne rien faire pour le moment Ne rien faire pour le moment Une page statique Une page statique

    13 13 Exemple 2 ExHTML2.html

    14 14 Balises pour formatage local Balise div : signifie « division » ou partie dune page, 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.

  • Exemple div Exemple div

    15 15 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

    16 16 Exemple 3 ……. Troisième exemple HTML Troisième exemple HTML nous commensons nous commensons attributs sont sans effet action1 action1 action2 action2 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 action3 action3

  • action4
  • Les actions sont à specifier Les actions sont à specifier
    Ne rien faire pour le moment Ne rien faire pour le moment Une page statique Une page statique

    17 17 Exemple 3 ExHTML3.html

    18 18 Balises dhyperliens(4) Deux fonctions : 1. associée à lattribut HREF définit un hyperlien 2. associée à lattribut « name » définit un ancre à lintérieur du document - possibilité de naviguer dans des documents volumineux

    19 19 Exemple 4 ….. 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


    ttttttttttttttttt
    ttttttttttttttt
    …..
    Ne rien faire pour le moment Ne rien faire pour le moment Retour Retour aaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaa
    …… Une page statique Une page statique

    20 20 Exemple 4 ExHTML4.html

    21 21 Balises de tableaux (6)

    Balises corrélatives,,,,,,,,,,,,,,

    22 22 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 définit une ligne de tableau définit une ligne de tableau définit une cellule à linterieur de tr définit une cellule à linterieur de tr de même de même Attribut importan :colspan …. ….

    23 23 Exemple 5 …. Tableau de HTML Tableau de HTML

    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

    24 24 Exemple 5 ExHTML5.html

    25 25 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

    26 26 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 dHTML.

    27 27 HTML5 Elément pour le dessin 2D Eléments et pour restitution du média Support pour le stockage local Nouveaux élements spécifiques du contenu, comme,,,, Nouveaux élements spécifiques du contenu, comme,,,, Nouveaux formulaires prédéfinis, comme calendar, date, time, , url, search

    28 28 HTML5 Déclaration: balise Déclaration: balise Title of the document The content of the document Commentaire: si nous ne déclarons pas lattribut « encoding », il faut utiliser les entités é, à…. Title of the document The content of the document Commentaire: si nous ne déclarons pas lattribut « encoding », il faut utiliser les entités é, à…. Exemple1

    29 29 HTML5 Exemple : ( attention ouvrir avec Safari – supporte MP4) Your browser does not support the video tag. file://localhost/Users/benois- p/D/PédagogieBx/XML/Cours2012_2013/C1_HTML_XML/ExHTML5_ Video.html file://localhost/Users/benois- p/D/PédagogieBx/XML/Cours2012_2013/C1_HTML_XML/ExHTML5_ Video.html

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

    31 31 Quelques éléments nouveaux(1) HTML5 propose de nouveaux éléments- balises pour une meilleure structuration des documents:,,,,,,,,,, (text souligné),,,,,, (text souligné) - balises de fragmentation et formatage du texte -bouton –commande qui peut être executée par lutilisateur -bouton –commande qui peut être executée par lutilisateur - navigation - navigation

    32 32 Quelques éléments nouveaux - définit une mesure scalaire avec la dynamique connue - définit une mesure scalaire avec la dynamique connue - définit la date et lheure. - définit la date et lheure. Balise sert à lindexation automatique des pages et à limportation des dates par des robots. Attributs : datetime : associe une date et/ou heure dans un format standardisé ISO8601 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 pubdate : date de publication de son ancêtre « article » ou du document complet

    33 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 latribut « datetime » correspond à la date de publication Publi&ecute le 7 janvier Publi&ecute le 7 janvier 2013.

    34 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). Temps dexécution : 30 minutes Temps dexécution : 30 minutes

    35 35 Elements obsolets : Balise des cadres(HTML4) La balise sert à afficher une page html à lintérieur dune autre page html La configuration de la page courante est effectuée à laide de la balise frameset

    36 36 HTML4/HTML5 Balises obsolettes
    ,,,,

    37 37 FEUILLES DU STYLE CSS Comment modifier dynamiquement laspect du document HTML? solutions : CSS CSS : Cascading Style Sheet le standard adopté par W3C

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

    39 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 dune définition h1, h2, h3 {color:green } La définition de classe permet daffiner un élément element.classe {propriété: valeur } p.droit {text-align: right} Il ne peut y avoir quune classe par élément HTML Dans la cas ou lon ne précise pas lélément de base de la classe celle-ci sapplique à tous les éléments HTML

    40 40 Balises de formattage des pages Balise div : definit « division », partie dun document html à utiliser avec des styles particuliers. Ex ( W3Schools) Ex ( W3Schools) 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.

    41 41 Syntaxe 2/2 Il est possible de spécifier des règles ne sappliquant quà un seul élément en utilisant son id. Le style peut sappliquer 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 42 Utilisation 1/2 Les styles peuvent être définis: 1.Dans un fichier à part, lié à laide de linstruction "/> 2.Directement dans le fichier HTML P {color: blue}

    43 43 Exemple de HTML/CSS Fichier HTML - balise de structure - balise de structure ExCSS 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)

      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
    ExHTML7_CSS.html Attribut rel Specifie la relation entre les fichiers

    44 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 45 Utilisation 2/2 3.Directement dans la définition de lélément La valeur réelle du style est lunion de toutes les définitions. De plus une notion dhéritage existe ainsi la définition de body impacte les paragraphes

    46 46 Priorité Il existe des priorités dans lordre de présence des styles Les styles définis dans un élément HTML sont les plus prioritaires 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 le head du fichier Ensuite viennent les éléments définis dans une feuille de style externe Ensuite viennent les éléments définis dans une feuille de style externe Ensuite viennent les styles par défaut du navigateurs Ensuite viennent les styles par défaut du navigateurs

    47 47 Pratique avancées 2/3 Les pseudos classes : Ce sont des classes prédéfinies ( active, hover, link, visited, :first-child, :lang)/ 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 Les pseudos classes se combinent avec les classes element.classe:pseudo-classe a.red:visited { color: #FFFFFF }

    48 48 Références


    Télécharger ppt "1 Introduction aux Web Services Partie 1. Technologies HTML-XML Cours 1.1 : Rappel HTML Janvier 2013."

    Présentations similaires


    Annonces Google