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

1

Introduction aux Web Services

Partie 1. Technologies HTML-XML

Cours 1.1 : Rappel HTML

Janvier 2013

2

PRESENTATION DU COURS 1/2

1 : Rappel du HTMLHTMLHTML5CSSJavascript

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

http://www.w3schools.com/

http://www.w3schools.com/

http://www.w3c.org/Style/CSS

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

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

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



<style type = "text/css">

body { font-family: Helvetica; color: black;font-size: 16px}

h2 {font-family: Arial; color: blue;font-size: 22px}


</style>

<head>

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

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

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

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

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

HTML5Dé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>

<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

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é ISO8601pubdate : 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

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>

</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éfinitionh1, h2, h3 {color:green }

La définition de classe permet d’affiner un élémentelement.classe {propriété: valeur }p.droit {text-align: right}

Il ne peut y avoir qu’une classe par élément HTMLDans 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>



<div style="color:#00FF00">



</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:

1. Dans un fichier à part, lié à l’aide de l’instruction<head><link rel="stylesheet" type="text/css"

href="<fichier.css>"/></head>

2. 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}



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.w3schools.com/css

http://www.websitetips.com/css/index.html


http://www.w3schools.com/css

http://www.websitetips.com/css/index.html

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

Documents

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