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

Le langage XHTML 420-S4W-GG Programmation Web Client Session : Hiver 2010 Enseignante : Kerlyne Fostine Courriel :

Présentations similaires


Présentation au sujet: "Le langage XHTML 420-S4W-GG Programmation Web Client Session : Hiver 2010 Enseignante : Kerlyne Fostine Courriel :"— Transcription de la présentation:

1 Le langage XHTML 420-S4W-GG Programmation Web Client Session : Hiver 2010 Enseignante : Kerlyne Fostine Courriel :

2 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 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 4 Éléments, balises et attributs  Les balises commencent par le caractère  Balise d’ouverture  Balise de fermeture  Les attributs d’un élément sont définis dans la balise d’ouverture et sont séparés par une espace Voici un lien vers HTML.net

5 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 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 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 notepad.html

8 8 Structure d’un document XHTML Structure d'un document XHTML Le corps de la page minimale

9 9 Structure d’un document XHTML Structure d'un document XHTML Le corps de la page minimale

10 10 La mise en forme du texte  Les titres à  Les paragraphes  Division en blocs  Blocs de citation

11 11 La mise en forme du texte  Mettre un texte en gras ou  Mettre un texte en italique ou  Modifier la taille du texte ou  Mettre du texte en exposant  Mettre du texte en indice  Créer un retour à la ligne

12 12 Les listes  Listes ordonnées Le langage XHTML Les feuilles de styles Le langage JavaScript  Listes non ordonnées Le langage XHTML Les feuilles de styles Le langage JavaScript

13 13 Les listes imbriquées  Listes ordonnées Le langage XHTML La structure d'un document XHTML La mise en forme du texte Les listes L'insertion des images et du multimédia Les feuilles de styles Le langage JavaScript

14 14 Les listes imbriquées  Listes ordonnées Le langage XHTML La structure d'un document XHTML La mise en forme du texte Les listes L'insertion des images et du multimedia Les feuilles de styles Le langage JavaScript

15 15 Insertion des images  Type d’image : gif, jpeg, png   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 

16 16 Image interactive  href : précise l’URL du document cible alt : fournit un texte comme avec shape : Définit la forme de la zone sensible  rect : pour rectangle  circle : pour un disque  poly : pour un polygone  Default : Pour gérer les clics effectués en dehors des zones sensibles  coords : définit la dimension de la forme choisie

17 17 Image interactive (Suite)

18 18 Image et bouton

19 19 Insertion d’une animation flash Objet flash non affiche

20 20 Insertion d’une vidéo Objet vidéo non affiche

21 21 Insertion d’élément audio Objet Audio non affiche

22 22 Insertion d’une applet java


Télécharger ppt "Le langage XHTML 420-S4W-GG Programmation Web Client Session : Hiver 2010 Enseignante : Kerlyne Fostine Courriel :"

Présentations similaires


Annonces Google