1 Les technologies XML Cours 1.1 : Rappel HTML Janvier 2009.
-
Upload
emmanuel-guyot -
Category
Documents
-
view
106 -
download
1
Transcript of 1 Les technologies XML Cours 1.1 : Rappel HTML Janvier 2009.
1
Les technologies XMLLes technologies XML
Cours 1.1 : Cours 1.1 : Rappel HTMLRappel HTML
Janvier 2009 Janvier 2009
2
PRESENTATION DU COURS 1/2PRESENTATION DU COURS 1/2
0 : Rappel du HTML : pages statiques, styles0 : Rappel du HTML : pages statiques, styles
1 : Introduction au langage XML :1 : Introduction au langage XML : XML DTD XML-Schema
2 : XHTML 2 : XHTML
3 : Transformation de documents XML :3 : Transformation de documents XML : XPath XSLT
4 :Présentation de documents XML :4 :Présentation de documents XML : XSL Fo
5 : Langages XML5 : Langages XMLXqueryXMIXUL
3
PRESENTATION DU COURS 2/2PRESENTATION DU COURS 2/2
6 : Les APIs XML 6 : Les APIs XML
7 : XML et les architectures N-tiers7 : XML et les architectures N-tiers
8 : Technologies liées à XML8 : Technologies liées à XML EJB Web Services
9 : Exemples d’applications de XML9 : Exemples d’applications de XML
4
Du HTML vers XMLDu HTML vers XML
Chapitre 0 : Rappel du HTMLChapitre 0 : Rappel du HTML
HTML – langage de base pour la création des interfaces des HTML – langage de base pour la création des interfaces des services web. services web.
Premier pas vers description de contenuPremier pas vers description de contenu
Spécification HTML 4 – 1999, Spécification HTML 4 – 1999,
Spécification HTML 5 – décembre 2007Spécification HTML 5 – décembre 2007
Premier « Working Draft » public –février 2008Premier « Working Draft » public –février 2008
5
Eléments du HTMLEléments du HTML
Balises : Balises :
1.1. Balises de structure du documentBalises de structure du document
2.2. Balises de formatageBalises de formatage
3.3. Balises de listes Balises de listes
4.4. Balises des hyperliensBalises des hyperliens
5.5. Balises des images et des images mapsBalises des images et des images maps
6.6. Balises de tableauxBalises de tableaux
7.7. Balises de formulairesBalises de formulaires
8.8. Balises des cadresBalises des cadres
9.9. Balises de contenus executablesBalises de contenus executables
Balises possèdent des attributsBalises possèdent des attributs*Ce rappel est loin d’être exhaustif et ne donne que des éléments *Ce rappel est loin d’être exhaustif et ne donne que des éléments nécessaires pour ce coursnécessaires pour ce cours
6
Balisesde la structure (1)Balisesde la structure (1)
<HTML> </HTML> - balise obligatoire<HTML> </HTML> - balise obligatoire
<HEAD> </HEAD> - contient les balises qui composent <HEAD> </HEAD> - contient les balises qui composent l’entête du documentl’entête du document
<BODY> </BODY> - contient l’ensemble des contenus des <BODY> </BODY> - contient l’ensemble des contenus des balises qui composent le corps d’un documentbalises qui composent le corps d’un document
<TITLE> </TITLE> donne un titre descriptif d’un document, <TITLE> </TITLE> donne un titre descriptif d’un document, s’affiche dans la barre de navigateurs’affiche dans la barre de navigateur
<STYLE> </STYLE> - spécifie les propriétés du style <STYLE> </STYLE> - spécifie les propriétés du style relatives au documentrelatives au document
……....
7
Exemple des Balises de Exemple des Balises de structure(1)structure(1)
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr"><html xmlns="http://www.w3.org/1999/xhtml" lang="fr"><!--exemple 1 - Balises de structure----><!--exemple 1 - Balises de structure---->
<!-- --><!-- -->
<style type = "text/css"><style type = "text/css"><!--balise de style à l'intérieur du document--><!--balise de style à l'intérieur du document-->
body { font-family: Helvetica; color: black;font-size: 16px}body { font-family: Helvetica; color: black;font-size: 16px}
h2 {font-family: Arial; color: blue;font-size: 22px}h2 {font-family: Arial; color: blue;font-size: 22px}
h3 {font-family: Arial; color: blue;font-size: 18px}h3 {font-family: Arial; color: blue;font-size: 18px}
</style></style>
<head><head><!--Balise meta : description du document --><!--Balise meta : description du document -->
<meta http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-1"/><meta http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-1"/>
<meta name="auteur" content="Mme Benois-Pineau"/><meta name="auteur" content="Mme Benois-Pineau"/>
<meta name="Mots-clés" content="Rappel,html,pages statiques"/><meta name="Mots-clés" content="Rappel,html,pages statiques"/>
<title>Facture</title><title>Facture</title>
</head></head>
8
Exemple des Balises de Exemple des Balises de structure(2)structure(2)
<body><body><h2>Définition d'une facture</h2><h2>Définition d'une facture</h2>
<ol type "i" compact><ol type "i" compact>
<li><h3>Définition d'une ligne</h3></li><li><h3>Définition d'une ligne</h3></li>
<ol type"i" compact><ol type"i" compact>
<li>Numéro de l'item</li><li>Numéro de l'item</li>
<li>Référence de l'item</li><li>Référence de l'item</li>
<li>Désignation</li><li>Désignation</li>
<li>Qté item</li><li>Qté item</li>
<li>Prix Unitaire</li><li>Prix Unitaire</li>
</ol></ol>
<li><h3>Totaux</h3></li><li><h3>Totaux</h3></li>
<ol type "i" compact><ol type "i" compact>
<li>Total HT</li><li>Total HT</li>
<li>Taux de TVA %</li><li>Taux de TVA %</li>
<li>TVA</><li>TVA</>
<li>Total TTC</li><li>Total TTC</li>
</ol></ol>
</ol></ol>
</body></body>
</html></html>
Exemple « Balises de structure »Exemple « Balises de structure »
9
Premier exemple HTML – plus complexePremier exemple HTML – plus complexe
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tansitional//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tansitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr"><html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<!--exemple 2 avec les elements de formattage et de navigation----><!--exemple 2 avec les elements de formattage et de navigation---->
<style type = "text/css"><style type = "text/css"> body { font-family: Helvetica} body { font-family: Helvetica}
h2 {font-family: Arial; color: blue;font-size: 22px} h3 {font-family: Arial; color: blue;font-size: 16px} .reponse h2 {font-family: Arial; color: blue;font-size: 22px} h3 {font-family: Arial; color: blue;font-size: 16px} .reponse { color:red; font-weight: bold; } { color:red; font-weight: bold; }
</style> </style>
<head> <head>
<meta<meta http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-1" http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-1"/> />
<title>TD1</title> <title>TD1</title>
</head></head>
<body> <body>
<h2>Premier exemple HTML complété </h2> <h2>Premier exemple HTML complété </h2>
<a href="#installation">Installer et configurer Tomcat</a> <br></br> <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 <a href="#td1">Réaliser une page html avec quelques contrôles Javascript</a> <h3>En guise d'introduction</h3> guise d'introduction</h3> <<br>Dans cet exemple nous essayons de montrer quelques fonctionnalités simples </br> br>Dans cet exemple nous essayons de montrer quelques fonctionnalités simples </br>
<a name="installation"></a> <a name="installation"></a>
<h3>Ne rien faire pour le moment</h3> <h3>Ne rien faire pour le moment</h3>
<a name="td1"> <h3> Une page statique </h3></a> <a name="td1"> <h3> Une page statique </h3></a>
</body></body> </html> </html>
10
Premier ExemplePremier Exemple
ExHTML1.htmlExHTML1.html
11
Balises de formatage(2) Balises de formatage(2)
2.2. Balises de formatageBalises de formatage
« Mélange du contenu et du style : « du fond et de la « Mélange du contenu et du style : « du fond et de la forme »forme »
<B> texte </B>, - texte en gras <B> texte </B>, - texte en gras
<font> texte <font>, <font> texte <font>,
<BR>…</BR> - saut de ligne<BR>…</BR> - saut de ligne
<HR></HR> - insertion d’une ligne horizontale<HR></HR> - insertion d’une ligne horizontale
Utiliser les feuilles de style CSS! Utiliser les feuilles de style CSS!
……..
12
Exemple 2Exemple 2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tansitional//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tansitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr"><html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<--exemple 2 avec les elements de formattage en plus----/><--exemple 2 avec les elements de formattage en plus----/><style type = "text/css"><style type = "text/css">
body { font-family: Helvetica}body { font-family: Helvetica}
h2 {font-family: Arial; color: blue;font-size: 22px}h2 {font-family: Arial; color: blue;font-size: 22px}
h3 {font-family: Arial; color: blue;font-size: 16px}h3 {font-family: Arial; color: blue;font-size: 16px}
.reponse { color:red; font-weight: bold; }.reponse { color:red; font-weight: bold; }
</style> </style>
<head><head><meta http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-1"/><meta http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-1"/>
<title>TD1</title><title>TD1</title>
</head></head>
<body><body>
<h2>Deuxième exemple HTML</h2><h2>Deuxième exemple HTML</h2>
<font size=7 color="red" face="Helvetica"><font size=7 color="red" face="Helvetica">
Quelques formatages locaux desapprouvés par W3CQuelques formatages locaux desapprouvés par W3C
</font></font><a href="#installation">Installer et configurer Tomcat</a><br></br><a href="#installation">Installer et configurer Tomcat</a><br></br>
<a href="#td1">Réaliser une page html avec quelques contrôles Javascript</a><a href="#td1">Réaliser une page html avec quelques contrôles Javascript</a>
<hr></hr><hr></hr><a name="installation"></a><a name="installation"></a>
<h3>Ne rien faire pour le moment</h3><h3>Ne rien faire pour le moment</h3>
<a name="td1"> <h3> Une page statique </h3></a><a name="td1"> <h3> Une page statique </h3></a>
</body></body>
</html></html>
13
Exemple 2Exemple 2
ExHTML2.htmlExHTML2.html
14
Balises de liste (3)Balises de liste (3)
HTML4 : Listes de définitions, listes numérotées, HTML4 : Listes de définitions, listes numérotées, listes à puces, compatibilité HTML3.2listes à puces, compatibilité HTML3.2
<li type= « type de liste » start=« valeur <li type= « type de liste » start=« valeur initiale » compact value=3>texte</li>initiale » compact value=3>texte</li>
OL – listes numérotées, - <!--ordered list-->OL – listes numérotées, - <!--ordered list-->
<ol type=i/a/… start=« valeur initiale » <ol type=i/a/… start=« valeur initiale » compact/> compact/>
UL – listes avec les pucesUL – listes avec les puces
<ul type=« disc »/ « square »/ « circle » <ul type=« disc »/ « square »/ « circle » compact/>compact/>
15
Exemple 3Exemple 3
…………..
<body><body>
<h2>Troisième exemple HTML</h2><h2>Troisième exemple HTML</h2>
<li type="i" start= 3 value=4>nous commensons</li><li type="i" start= 3 value=4>nous commensons</li>
attributs sont sans effetattributs sont sans effet
<ol type ="a" compact><ol type ="a" compact>
<li> action1 </li><li> action1 </li>
<li> action2 </li><li> action2 </li>
</ol></ol>
<ol type"i" compact><ol type"i" compact>
<li> <a href="#installation">Installer et configurer Tomcat</a></li><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><li> <a href="#td1">Réaliser une page html avec quelques contrôles Javascript</a></li>
</ol></ol>
<ol type="a" compact start= 3><ol type="a" compact start= 3>
<li> action3 </li><li> action3 </li>
<li>action4</li><li>action4</li>
</ol></ol>
<ul type=disc compact><ul type=disc compact>
<li> Les actions sont à specifier</li><li> Les actions sont à specifier</li>
</ul></ul>
<hr></hr><hr></hr>
<a name="installation"></a><a name="installation"></a>
<h3>Ne rien faire pour le moment</h3><h3>Ne rien faire pour le moment</h3>
<a name="td1"><a name="td1">
<h3> Une page statique </h3></a><h3> Une page statique </h3></a>
</body></body>
</html></html>
16
Exemple 3Exemple 3
ExHTML3.htmlExHTML3.html
17
Balises d’hyperliens(4)Balises d’hyperliens(4)
<a> <a>
Deux fonctions : Deux fonctions :
1. associée à l’attribut HREF définit un hyperlien1. associée à l’attribut HREF définit un hyperlien
2. associée à l’attribut « name » définit un ancre 2. associée à l’attribut « name » définit un ancre à l’intérieur du document à l’intérieur du document
- possibilité de naviguer dans des documents - possibilité de naviguer dans des documents volumineux volumineux
18
Exemple 4 Exemple 4
……....
<body><body>
<a name = "sommaire"></a><a name = "sommaire"></a>
<h2>Balises des hyperliens HTML</h2><h2>Balises des hyperliens HTML</h2>
<ol type"i" compact><ol type"i" compact>
<li> <li> <a href="#installation">Installer et configurer Tomcat</a><a href="#installation">Installer et configurer Tomcat</a></li></li>
<li> <li> <a href="#Page">Réaliser une page html avec quelques contrôles Javascript</a><a href="#Page">Réaliser une page html avec quelques contrôles Javascript</a></li></li>
</ol></ol>
<hr></hr><hr></hr>
<font size=1 color= blue face = Arial><font size=1 color= blue face = Arial>
ttttttttttttttttt<br>ttttttttttttttttt<br>
ttttttttttttttt<br>ttttttttttttttt<br>……....
</font></font>
<hr></hr><hr></hr>
<a name="installation"></a><a name="installation"></a>
<h3>Ne rien faire pour le moment</h3><h3>Ne rien faire pour le moment</h3>
<a href=#sommaire> Retour </a> <br></br><a href=#sommaire> Retour </a> <br></br>
<font size=1 color= green face = Arial><font size=1 color= green face = Arial>
aaaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
…………
</font></font>
<a name=« Page"><a name=« Page">
<h3> Une page statique </h3></a><h3> Une page statique </h3></a>
</body></body>
</html></html>
19
Exemple 4Exemple 4
ExHTML4.htmlExHTML4.html
20
Balises de tableaux (6)Balises de tableaux (6)
<table align=« left/center/right » <table align=« left/center/right » border=« épasseur » bgcolor=« couleur »border=« épasseur » bgcolor=« couleur »
Width=« largeur en %de fenêtre/pels» Width=« largeur en %de fenêtre/pels» cols=« nombre de colonnes »cols=« nombre de colonnes »
……</table></table>
Balises corrélativesBalises corrélatives
<caption>,<thead>, <caption>,<thead>, <tfoot>,<tbody>,<colgroup>,<col>,<tr>,<th,<tfoot>,<tbody>,<colgroup>,<col>,<tr>,<th,<td><td>
21
Balises de tableaux(6)Balises de tableaux(6)
<colgroup> : permet de définir des propriétés <colgroup> : permet de définir des propriétés communes à un gourpe de colonnescommunes à un gourpe de colonnes
<colgroup span=3 align=« center » <colgroup span=3 align=« center » valign=« top »>valign=« top »>
</colgroup></colgroup>
<tr> </tr> définit une ligne de tableau<tr> </tr> définit une ligne de tableau
<td> </td> définit une cellule à l’interieur de tr<td> </td> définit une cellule à l’interieur de tr
<th> </th> de même<th> </th> de même
Attribut importan :colspan Attribut importan :colspan
<tr align= « left » colspan=3>….</tr><tr align= « left » colspan=3>….</tr>
22
Exemple 5Exemple 5
……..
<body><body>
<h2>Tableau de HTML</h2><h2>Tableau de HTML</h2>
<table border 1><table border 1>
<tbody><tbody>
<tr><tr>
<td align="center">Première colonne du premier groupe : centrée </td><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="right">Seconde colonne du premier groupe : alignée à droite</td>
<td align="center">premiere colonne du second groupe : centrée</td><td align="center">premiere colonne du second groupe : centrée</td>
<td align="center">seconde colonne du second groupe : centrée</td><td align="center">seconde colonne du second groupe : centrée</td>
</tr></tr>
<tr><tr>
<td align="center">1.1</td><td align="center">1.1</td>
<td align="right">1.2</td><td align="right">1.2</td>
<td align="center">2.1</td><td align="center">2.1</td>
<td align="center">2.2</td><td align="center">2.2</td>
</tr></tr>
</tbody></tbody>
</table></table>
</body></body>
</html></html>
23
Exemple 5Exemple 5
ExHTML5.htmlExHTML5.html
24
Balises de formulairesBalises de formulaires
Balise <form>Balise <form>
Elle regrouppe les éléments du formulaire : Elle regrouppe les éléments du formulaire : boutons, champs de saisie, etc..boutons, champs de saisie, etc..
Elle possède les attributs: method, Elle possède les attributs: method, action,enctype, name, accept, onsubmit,onreset, action,enctype, name, accept, onsubmit,onreset, accept-charset accept-charset
Attribut Attribut methodmethod – indique comment sont – indique comment sont envoyées les données: POST ou GETenvoyées les données: POST ou GET
Analyse conjointe avec JavascriptAnalyse conjointe avec Javascript
25
Javascript(1)Javascript(1)
Contenu executable : <script>Contenu executable : <script>
Pourquoi un script : ajout des actions aux pages Pourquoi un script : ajout des actions aux pages web statiquesweb statiques
Un script s’exécute coté client Un script s’exécute coté client
Javascript apporte un ensemble assez complet Javascript apporte un ensemble assez complet de « fonction set » de commandes intégrées, de « fonction set » de commandes intégrées, permettant d’effectuer des calculs, de manipuler permettant d’effectuer des calculs, de manipuler les chaînes de caractères, d’emmètre des sons, les chaînes de caractères, d’emmètre des sons, d’ouvrir des nouvelles fenêtres et URL, d’accéder d’ouvrir des nouvelles fenêtres et URL, d’accéder aux informations fournies par l’utilisateur dans aux informations fournies par l’utilisateur dans un formulaire HTML et de les vérifier.un formulaire HTML et de les vérifier.
26
Javascript(2) Javascript(2)
Incorporation dans les documents HTMLIncorporation dans les documents HTML
<SCRIPT><SCRIPT>
……....
</SCRIPT></SCRIPT>
La balise <SCRIPT> prend l’attribut La balise <SCRIPT> prend l’attribut « LANGUAGE »« LANGUAGE »
<SCRIPT LANGUAGE=« JavaScript »></SCRIPT><SCRIPT LANGUAGE=« JavaScript »></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" <SCRIPT LANGUAGE="JavaScript" SRC="fichierSource.js"></SCRIPT> - fichier à SRC="fichierSource.js"></SCRIPT> - fichier à partpart
27
Javascript (3)Javascript (3)
Fonctions et objets Fonctions et objets
Javascript est un langage –objet dérivé de Java Javascript est un langage –objet dérivé de Java
Un objet est ensemble des données et de méthodes. Un objet est ensemble des données et de méthodes.
Javascript opère les objets des navigateurs Web Javascript opère les objets des navigateurs Web
et possède ses propres objets. et possède ses propres objets.
Exemple : Exemple :
<form action="" class="cadre" name="formulaire1"> <form action="" class="cadre" name="formulaire1">
(<a href="#" onClick="document.formulaire1.reset();">Nettoyer</a>)(<a href="#" onClick="document.formulaire1.reset();">Nettoyer</a>)
-objet form de HTML, méthode reset;-objet form de HTML, méthode reset;
-objet document de HTML – indique le document actif.-objet document de HTML – indique le document actif.
-objet « link » = balise a+attribut href -objet « link » = balise a+attribut href
28
Objets HTML et JavascriptObjets HTML et Javascript
Javascript accède aux objets prédéfinis de HTMLJavascript accède aux objets prédéfinis de HTML
DocumentDocument
FormForm
AppletApplet
ArgumentArgument
HistoryHistory
ImageImage
LinkLink
OptionOption
Plugin…Plugin…
29
Objets HTML : propriétés, Objets HTML : propriétés, méthodes, événementsméthodes, événements
Pour chaque objet sont définisPour chaque objet sont définis
(1) Propriétés (attrs)(1) Propriétés (attrs)
(2) Méthodes(2) Méthodes
(3) Evénements(3) Evénements
Exemple : objet InputExemple : objet Input
Propriétés : name, value, defaultValuePropriétés : name, value, defaultValue
Méthodes : focus(), blur(), select(), submit()Méthodes : focus(), blur(), select(), submit()
30
Exemple(1)Exemple(1)
Source .htmlSource .html
Source .Source .jsjs
//Initialisation des tableaux contenant les comptes et leur libelle//Initialisation des tableaux contenant les comptes et leur libelle
personnes = new Array();personnes = new Array();
libelleComptes = new Array();libelleComptes = new Array();
nbPersonnes= 0;nbPersonnes= 0;
//Initialisation du tableau des erreurs//Initialisation du tableau des erreurs
tableauErreurs = new Array(tableauErreurs = new Array(
/* 0 *//* 0 */ 'Le nom doit être renseigné','Le nom doit être renseigné',
/* 1 *//* 1 */ 'Le prénom doit être renseigné','Le prénom doit être renseigné',
/* 2 *//* 2 */ 'L\'année de naissance doit être renseignée','L\'année de naissance doit être renseignée',
/* 3 *//* 3 */ 'L\'année de naissance ne doit comporter que des 'L\'année de naissance ne doit comporter que des chiffres'chiffres'
););
// Affiche le message de l erreur dont le numero est passe en argument// Affiche le message de l erreur dont le numero est passe en argument
function afficheErreur(numeroErreur)function afficheErreur(numeroErreur)
{{
alert(tableauErreurs[numeroErreur]);alert(tableauErreurs[numeroErreur]);
}}
31
Exemple (2):JavascriptExemple (2):Javascript
//Ajout d'une personne//Ajout d'une personne
function ajout()function ajout()
{{ nom = document.formulaire1.nom.value;nom = document.formulaire1.nom.value;
if (nom.length != 0)if (nom.length != 0)
{ prenom=document.formulaire1.prenom.value;{ prenom=document.formulaire1.prenom.value;
if (prenom.length != 0)if (prenom.length != 0)
{{
anneeNaissance=document.formulaire1.annee.value;anneeNaissance=document.formulaire1.annee.value;
if (anneeNaissance.length != 0)if (anneeNaissance.length != 0)
{{
if ( isNaN(anneeNaissance) == false )if ( isNaN(anneeNaissance) == false )
{{
personnes[nbPersonnes]=nom;personnes[nbPersonnes]=nom;
nbPersonnes ++;nbPersonnes ++;
affiche_personne(); }affiche_personne(); }
elseelse
{{
document.formulaire1.annee.value="";document.formulaire1.annee.value="";
afficheErreur(3);afficheErreur(3);
}}
}}
elseelse
{{
afficheErreur(2);afficheErreur(2);
}}
}}
elseelse
{ afficheErreur(1); }{ afficheErreur(1); }
}}
elseelse
{ afficheErreur(0); }{ afficheErreur(0); }
}}
32
Exemple 3: JavascriptExemple 3: Javascript//Affichage des personnes//Affichage des personnes
function affiche_personne()function affiche_personne()
{ {
texte="";texte="";
for(i=0;i<nbPersonnes;i++)for(i=0;i<nbPersonnes;i++)
{{
//Ajout d une nouvelle ligne dans le texte//Ajout d une nouvelle ligne dans le texte
texte += personnes[i]+"\n";texte += personnes[i]+"\n";
}}
//Affichage du texte//Affichage du texte
document.formulaire1.listePersonnes.value=texte;document.formulaire1.listePersonnes.value=texte;
}}
/****************************************************************/****************************************************************
//Verification du code postal//Verification du code postal
//code retour://code retour:
//// 0 : OK0 : OK
//// 3 : presence de lettres dans le code postal3 : presence de lettres dans le code postal
//// 4 : le code postal fait moins de 5 chiffres4 : le code postal fait moins de 5 chiffres
function verification_code_postal()function verification_code_postal()
{ retour = 0;{ retour = 0;
valeur =document.formulaire1.code.value;valeur =document.formulaire1.code.value;
if ( valeur.length != 5 )if ( valeur.length != 5 )
{{
document.formulaire1.code.value="";document.formulaire1.code.value="";
retour = 4;retour = 4;
}}
if ( isNaN(valeur) == true )if ( isNaN(valeur) == true )
{{
document.formulaire1.code.value="";document.formulaire1.code.value="";
retour = 3;retour = 3;
}}
afficheErreur(retour);afficheErreur(retour);
return retour;return retour;
}}
33
Balise des cadresBalise des cadres
La balise <frame> sert à afficher une page htmlLa balise <frame> sert à afficher une page html
à l’intérieur d’une autre page htmlà l’intérieur d’une autre page html
<frame src=« mapage.html »><frame src=« mapage.html »>
La configuration de la page courante est effectuée à l’aide de La configuration de la page courante est effectuée à l’aide de la balise framesetla balise frameset
<frameset cols=« 33%,33%,33% »><frameset cols=« 33%,33%,33% »>
<frameset rows=« 200 »><frameset rows=« 200 »>
<frame src=« mapage.html »/><frame src=« mapage.html »/>
</frameset></frameset>
</frameset></frameset>
34
FEUILLES DU STYLE CSSFEUILLES DU STYLE CSS
Comment modifier dynamiquement l’aspect du Comment modifier dynamiquement l’aspect du document HTML? document HTML?
solutions : CSSsolutions : CSS
CSS : Cascading Style Sheet le standrad adopté CSS : Cascading Style Sheet le standrad adopté par W3Cpar W3C
35
Principes de CSSPrincipes de CSS
Une Feuille de style CSS = liste de règles, Une Feuille de style CSS = liste de règles, chacune indiquant les noms des éléments chacune indiquant les noms des éléments auquelles elles s’appliquent et les paramètres de auquelles elles s’appliquent et les paramètres de style qui doivent être utilisés. style qui doivent être utilisés.
36
Syntaxe 1/2Syntaxe 1/2
La syntaxe de base doit respecter le modèle :La syntaxe de base doit respecter le modèle :element { propriété: valeur }element { propriété: valeur }body {color: blue}body {color: blue}p {font-family: arial}p {font-family: arial}
Il est possible de grouper les éléments lors d’une définitionIl est possible de grouper les éléments lors d’une définitionh1, h2, h3 {color:green }h1, h2, h3 {color:green }
La définition de classe permet d’affiner un élémentLa définition de classe permet d’affiner un élémentelement.classe {propriété: valeur }element.classe {propriété: valeur }p.droit {text-align: right}p.droit {text-align: right}
Il ne peut y avoir qu’une classe par élément HTMLIl 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 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 HTMLclasse celle-ci s’applique à tous les éléments HTML
37
Syntaxe 2/2Syntaxe 2/2
Il est possible de spécifier des règles ne Il est possible de spécifier des règles ne s’appliquant qu’à un seul élément en utilisant s’appliquant qu’à un seul élément en utilisant son id.son id.
Le style peut s’appliquer sur un élément Le style peut s’appliquer sur un élément
element#id { propriété: valeur }element#id { propriété: valeur }
p#par1 {font-family: arial}p#par1 {font-family: arial}
Ou sur le premier id trouvéOu sur le premier id trouvé
*#id { propriété: valeur }*#id { propriété: valeur }
*#par1 {font-family: arial}*#par1 {font-family: arial}
38
Utilisation 1/2Utilisation 1/2
Les styles peuvent être définis: Les styles peuvent être définis:
1.1. Dans un fichier à part, lié à l’aide de l’instructionDans un fichier à part, lié à l’aide de l’instruction<head><link rel="stylesheet" type="text/css"
href="<fichier.css>"/></head>
2.2. Directement dans le fichier HTMLDirectement dans le fichier HTML<head><style type="text/css">P {color: blue}</style></head>
39
Exemple de HTML/CSSExemple de HTML/CSS
Fichier HTMLFichier HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tansitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!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"><html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head><head>
<link rel="StyleSheet" href="styleEx7.css" type="text/css" media="screen"/> <link rel="StyleSheet" href="styleEx7.css" type="text/css" media="screen"/> - balise de structure <link>- balise de structure <link>
<meta http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-1"/><meta http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-1"/>
<title>ExCSS</title><title>ExCSS</title>
</head></head>
<body><body>
<h2>Definition des chansons</h2><h2>Definition des chansons</h2>
<dd> Ma chanson (identification de la définition d'un terme)<dd> Ma chanson (identification de la définition d'un terme)
<ul> <ul>
<li> par l'auteur</li><li> par l'auteur</li>
<li> Producteur : Dupond</li><li> Producteur : Dupond</li>
<li> Editeur : Maison edition</li><li> Editeur : Maison edition</li>
<li> Duree : 6:20</li><li> Duree : 6:20</li>
<li> Date : 1978</li><li> Date : 1978</li>
<li> Artiste : Toto</li><li> Artiste : Toto</li>
</ul></ul>
</body></body>
</html></html>
ExHTML7_CSS.htmlExHTML7_CSS.html
Attribut rel Specifie la relation entre les fichiers
40
Feuille de styleFeuille de style
Fichier .cssFichier .css
body { font-family: Helvetica}body { font-family: Helvetica}
h2 {font-family: Arial; color: blue;font-size: 22px}h2 {font-family: Arial; color: blue;font-size: 22px}
h3 {font-family: Arial; color: blue;font-size: 16px}h3 {font-family: Arial; color: blue;font-size: 16px}
li {font-family:Arial; color:green;fontsize: 14px}li {font-family:Arial; color:green;fontsize: 14px}
41
Utilisation 2/2Utilisation 2/2
3.3. Directement dans la définition de l’élémentDirectement 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
42
PrioritéPriorité
Il existe des priorités dans l’ordre de présence des stylesIl existe des priorités dans l’ordre de présence des styles
Les styles définis dans un élément HTML sont les plus Les styles définis dans un élément HTML sont les plus prioritairesprioritaires
Ensuite viennent les éléments définis dans le Ensuite viennent les éléments définis dans le headhead du du fichierfichier
Ensuite viennent les éléments définis dans une feuille Ensuite viennent les éléments définis dans une feuille de style externede style externe
Ensuite viennent les styles par défaut du navigateursEnsuite viennent les styles par défaut du navigateurs
43
Pratique avancées 2/3Pratique avancées 2/3
Les pseudos classes :Les pseudos classes :
Ce sont des classes prédéfinies ( active, hover, Ce sont des classes prédéfinies ( active, hover, link, visited, :first-child, :lang)/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 classesLes pseudos classes se combinent avec les classes
element.classe:pseudo-classe a.red:visited { color: #FFFFFF }
44
RéférencesRéférences
http://www.w3c.org/Style/CSShttp://www.w3c.org/Style/CSS
http://www.w3schools.com/csshttp://www.w3schools.com/css
http://www.websitetips.com/css/index.htmlhttp://www.websitetips.com/css/index.html