Le langage XHTML 420-S4W-GG Programmation Web Client Session : Hiver 2010 Enseignante : Kerlyne...
22
Le langage XHTML 420-S4W-GG Programmation Web Client Session : Hiver 2010 Enseignante : Kerlyne Fostine Courriel : [email protected]
-
Upload
eveline-doucet -
Category
Documents
-
view
115 -
download
6
Transcript of Le langage XHTML 420-S4W-GG Programmation Web Client Session : Hiver 2010 Enseignante : Kerlyne...
Le langage XHTML
420-S4W-GG Programmation Web ClientSession : Hiver 2010
Enseignante : Kerlyne FostineCourriel : [email protected]
2
Plan de la séance
Introduction à XHTML Structure d’un document XHTML Mise en forme du texte Les listes Insertion des images et du multimédia
3
Introduction à XHTML
XHTML : Langage de balisage ou de marquage
Langage qui permet de structurer le contenu des pages web dans divers éléments
Langage de balisage issus du langage SGML
4
Éléments, balises et attributs Les balises commencent par le caractère <
suivi du nom de l’élément et se termine par le caractère > <p>
Balise d’ouverture <b>
Balise de fermeture </b>
Les attributs d’un élément sont définis dans la balise d’ouverture et sont séparés par une espace <a href="http://www.html.net/">Voici un lien vers
HTML.net</a>
5
Les attributs de base des éléments XHTML Tous les éléments en XHTML comportent ces attributs id : Sert à identifier un élément de manière unique class : Permet de regrouper plusieurs éléments sous une
classe title : Permet de mentionner du texte qui apparaît dans
une bulle quand l’utilisateur positionne le curseur sur cet élément
style : permet de mentionner un style localement pour un élément donné
Les attributs d’internationalisation xml:lang, dir Les attributs de gestion des événements : onclick,
ondblclick…
6
Règles de base XHTML Document bien formé
Les éléments et les attributs sont sensibles à la casse, ils sont écrits en minuscules
Les éléments non vides doivent avoir une balise d’ouverture et une balise de fermeture
Les éléments vides ne comportent qu’une seule balise et doivent se terminer par les caractères />
Les éléments ne doivent pas se chevaucher et doivent obéir au principe premier-ouvert dernier-fermé
Tous les attributs doivent avoir une valeur incluse entre des guillemets doubles
À tous les attributs utilisés doit être donnée une valeur Document conforme
Un document XHTML doit respecter les règles d’inclusion des éléments les uns dans les autres, telles qu’elles sont définies dans la DTD choisie.
7
Environnement de travail Éditeur de texte : Exemple Bloc Notes de
windows Éditeur visuel : Frontpage, dreamweaver Editeur classique : Notepad++, Pspad,
textpad, … Navigateur web : Internet explorer, firefox,
safari, Netscape, Mozilla, … Éditeur utilisé pour ce cours : Notepad++
http://www.clubic.com/lancer-le-telechargement-7616-0-notepad.html
8
Structure d’un document XHTML<?xml version="1.0" encoding="windows-1250"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml"><html> <head> <title> Structure d'un document XHTML </title> </head> <body> <!-- Tout le contenu de la page--> <h1> Le corps de la page minimale </h1> </body></html>
9
Structure d’un document XHTML<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml"><html> <head> <meta http-equiv="content-type" content="text/html;
charset=windows-1250"> <title> Structure d'un document XHTML </title> </head> <body> <!-- Tout le contenu de la page--> <h1> Le corps de la page minimale </h1> </body></html>
10
La mise en forme du texte
Les titres <h1> </h1> à <h6> </h6>
Les paragraphes <p> </p>
Division en blocs <div> <div> </div>
Blocs de citation <blockquote> <blockquote>
11
La mise en forme du texte Mettre un texte en gras
<b> </b> ou <strong> </strong> Mettre un texte en italique
<i> </i> ou <em> </em> Modifier la taille du texte
<big> </big> ou <small></small> Mettre du texte en exposant
<sup> </sup> Mettre du texte en indice
<sub> </sub> Créer un retour à la ligne
<br/>
12
Les listes Listes ordonnées
<ol> <li> Le langage XHTML </li> <li> Les feuilles de styles </li> <li> Le langage JavaScript </li></ol>
Listes non ordonnées<ul> <li> Le langage XHTML </li> <li> Les feuilles de styles </li> <li> Le langage JavaScript </li></ul>
13
Les listes imbriquées Listes ordonnées
<ol> <li> Le langage XHTML <ol> <li> La structure d'un document XHTML </li> <li> La mise en forme du texte </li> <li> Les listes </li> <li> L'insertion des images et du multimédia </li> </ol> </li> <li> Les feuilles de styles </li> <li> Le langage JavaScript </li></ol>
14
Les listes imbriquées Listes ordonnées
<ol> <li> Le langage XHTML <ul> <li> La structure d'un document XHTML </li> <li> La mise en forme du texte </li> <li> Les listes </li> <li> L'insertion des images et du multimedia </li> </ul> </li> <li> Les feuilles de styles </li> <li> Le langage JavaScript </li></ol>
15
Insertion des images Type d’image : gif, jpeg, png <img/> src : precise l’adresse absolue ou
relative du fichier image à afficher alt : fournit un texte descriptif de l’image height : Définit la hauteur de l’image Width : definit la largeur de l’image <img src=«image.jpg» height=«200»/>
16
Image interactive <map> </map> <area/>
href : précise l’URL du document cible alt : fournit un texte comme avec <img/> shape : Définit la forme de la zone sensible
rect : pour rectanglecircle : pour un disquepoly : pour un polygoneDefault : Pour gérer les clics effectués en dehors des
zones sensibles coords : définit la dimension de la forme choisie
17
Image interactive (Suite)<map id="regions"> <area href="http://www.site.com"
alt="region centrale" shape="rect" coords="142, 118, 188, 180"/>
<area href="http://www.site1.com" alt="region Sud-est" shape="circle" coords="180, 98, 16"/>
</map><img usemap="#regions"
src="imageCarte.jpg" alt="Carte des regions" width="300" height="350"/>
18
Image et bouton
<button> <img src"image.gif" alt="texte"></button>
19
Insertion d’une animation flash
<object data="nav.swf" title="FLASH" type="application/x-shockwave-flash" width="880" height="165" standby="Menu en Flash">
<h1> Objet flash non affiche</h1></object>
20
Insertion d’une vidéo
<object data="jacs.mpg" title="jacs" type="video/mpeg" width="880" height="165" standby="Vidéo Mpeg">
<h1> Objet vidéo non affiche</h1></object>
21
Insertion d’élément audio
<object data="respire.mp3" title="respire" type="audio/mp3" width="880" height="165" standby="Respire">
<h1> Objet Audio non affiche</h1></object>
22
Insertion d’une applet java
<object classid="fichier.class" codetype="application/java" width="880" height="165" standby="Respire">
</object>
