XHTML les fondamentaux M.DIENG Abdoulaye DTS 1 Réseaux & Données.

Présentation au sujet: "XHTML les fondamentaux M.DIENG Abdoulaye DTS 1 Réseaux & Données."— Transcription de la présentation:

1 XHTML les fondamentaux M.DIENG Abdoulaye DTS 1 Réseaux & Données

2 Les objectifs du module  Formater du texte, des listes et des liens  Afficher une image simple ou cliquable  Établir un tableau  Concevoir un formulaire  Intégrer du son et de la vidéo

3 Le sommaire 1.Introduction 2.Qu’est ce que le XHTML 3.La structure d’un document XHTML 4.Le DocType 5.Les références externes 6.Les métadonnées 7.Les textes 8. Les caractères spéciaux 9. Les listes 10. Les hyperliens 11. Les images 12. Les tableaux 13. Les formulaires 14. Le son et la vidéo

4 Introduction  Le HTML (HyperText Markup Language) est un langage chargé de formaliser l'écriture d'un document (consultable sur le Web) avec des balises (unités sémantiques délimitant les éléments du document) indiquant la façon dont doit être présenté le document et les liens qu'il établit avec d'autres documents.  Après quelques années d’existence, les éditeurs de navigateurs (Netscape et Microsoft principalement) détournent,à des fins commerciales, les balises HTML normalisées par le W3C.  Il fallait alors de nouvelles versions d’HTML susceptibles de résoudre ce problème manifeste qui menaçait la vocation principale du web qui était le libre échange d’informations.  Le XML (eXtensible Markup Language) a apporté de la structure et de l’extensibilité contrôlée à HTML.  HTML + XML => XHTML (eXtensible HyperText Markup Language)

5 XHTML késako? historique  XHTML, successeur d‘HTML, est conçu dans le but d’être utilisé comme un langage de structuration de contenu d’une page web.  XHTML se fonde sur la syntaxe définie par XML, plus allégée, mais plus exigeante que celle définie par SGML(Standard Generalized Markup Language) sur laquelle repose HTML.  Historique: HTML 1 (1992); HTML 2 (1994); HTML 3.2 (1997); HTML 4.x (1999); XHTML 1.0 (2000); XHTML 1.1; (2001) XHTML Basic 1.1 (mini-version pour petits appareils portables); XHTML 2.x (en cours de développement).

6 XHTML késako? avantages/inconvénient  Avantages du XHTML : séparation entre le contenu et sa présentation code simplifié et plus facile à mettre à jour. code plus léger qui a pour avantage d’accélérer le temps de chargement des pages. standard soumis à validation et permet de se décharger des spécificités des différents navigateurs respecte le web sémantique (faciliter l’accessibilité aux humains et aux robots à l’information).  Inconvénient du XHTML : plus rigoureux et ne tolère pas les bidouillages

7 Structure d'un document présentation  Un document XHTML est structuré par des éléments.  Tout élément est matérialisé par une balise (délimitée par les chevrons ) marquant une action pour le navigateur.  Toute balise ouvrante est munie d’attributs prenant des valeurs.  Ces attributs apportent des informations supplémentaires et souvent indispensables pour l’action du navigateur  Les balises et les attributs sont en minuscules et les valeurs sont entre guillemets.  Les éléments de base d’un document XHTML sont: la déclaration de type de document (ou doctype); l'élément html qui délimite le document; l'élément head contenant toutes les données nécessaires à l’affichage ainsi qu'à l’indexation du document; l'élément body contenant la partie « visible » du document.  Les commentaires sont délimités par les signes.

8 Structure d'un document intro.html

9 Les DocTypes  Le "DocType", souvent appelé DTD (Déclaration de Type de Document) sert à indiquer les balises qui seront utilisées et de quelle manière.  Un "DocType" est essentiel pour qu’un document web s'affiche et fonctionne correctement dans des navigateurs conformes aux normes du W3C.  Les différentes DTD sont: XHTML1.0 transitional (permission de quelques balises de présentation) XHTML1.0 frameset (transitional +utilisation des cadres) XHTML1.0 strict (permission exclusive des balises de structure) XHTML 1.1 (du strict amélioré )

10 Les références externes  Les références externes sont utilisées afin d'indiquer qu'un autre document ou fichier est lié à la page web en cours.  Elles sont codées dans l’entête (head) du de la page  Pour faire référence à un script, il faut utiliser l’élément script. Exemple:  L’élément link permet de faire référence à de nombreux types de fichiers, mais les principaux sont les feuilles de style et le 'favicon’. Exemples :

11 Les métadonnées  Les métadonnées permettent de donner des informations à propos du contenu des pages Web.  Elles permettent, entre autres, aux moteurs de recherche d’avoir accès aux pages pour le référencement.  Elles sont à l’intérieur des tags auto-fermants meta, elles mêmes délimitées par l’élément head. (« meta est enfant de head »)  Quelques exemples: NB : Par défaut les robots indexent, suivent les liens et mettent en cache  NB: l’élément title est extrêmement utile dans le référencement

12 Déclaration d’encodage  Certains caractères (é, â, ü, ç, …) ne sont pas toujours bien interprétés par les navigateurs  La déclaration d’encodage: précise comment les caractères du doc. sont codés. permet au doc d’être bien interprété par les navigateurs et de réussir les tests de validation du W3C.  Dans la balise, la valeur XXX de charset peut être: ISO-8859-1 ou ISO-LATIN-1 : langues d’Europe occidentale; ISO-8859-2 : langues d’Europe centrale et orientale windows-1250 équivalent de ISO-8859-2 sous Windows windows-1252 équivalent de ISO-8859-1 sous Windows UTF-8 ou Unicode : le jeu de caractères universel ; etc.

13 Le texte présentation  Un texte peut se composer d'un titre, d'une introduction, de paragraphes et d'une conclusion.  NB : Le titre le plus important d'un document devrait toujours se trouver entre les balises dans l'entête du document.  Un texte peut aussi être délimité par des sous-titres.  Un texte peut aussi contenir une référence à un auteur, un titre de roman ou encore une citation ou l'extrait d'un texte.  Sans oublier les degrés d’importance de certains mots, les abréviations, les acronymes et la mise en indice ou en exposant.

14 Le texte codage  h1, …, h6: délimitent les titres et sous titres dans le document  : effectue un simple retour à la ligne  p: délimite un paragraphe en produisant un double br  : insère un trait horizontal comme séparateur  pre : délimite un bloc de texte pré-formaté  em: délimite une insistance raisonnable (en italique)  strong: délimite une insistance assez forte (en gras)  abbr: délimite une abréviation(explicitée par l’attribut title)  acronym: délimite une abréviation composée des initiales du terme.  q : délimite une citation courte  blockquote : délimite une citation de plusieurs lignes  cite: délimite la source d'une citation.  sub: délimite un texte, généralement très court, en indice.  sup: délimite un texte en exposant.

15 Le texte texte.html

16 Les caractères spéciaux  Pour s’assurer que les caractères spéciaux (lettre accentuée, lettre grecque, symbole mathématique ou tout caractère non ASCII) soient correctement affichés par tous les navigateurs, il faut les coder.  Caractères accentués : &LettreCode_accent; code_accent : acute(aigu), grave(grave), circ(^), uml(¨), tilde(~) Exemples: é (é), â (â), ü (ü)  Autres caractères : ç (ç), © (©), & (&), (espace), " ("), > (>), < (<), «(« ), »(»), œ(œ), &euro(€), °(°), ®(®), etc. http://www.erwanhome.org/web/guide-html/chapitre2.php

17 Les listes présentation Les listes sont utilisées pour présenter des données que l'on peut classer sous forme de liste (comme les menus ). Les listes ne doivent pas être contenues dans un paragraphe mais peuvent être ajoutées à un texte dans lequel des données peuvent être présentées sous cette forme. Il y’a trois types de listes: – Listes non-ordonnées utilisées lorsqu'il n'y a pas d'ordre prédéfini pour leurs items. – Listes numérotées utilisées lorsque les items sont ordonnées. Le type de numérotation se fait via les CSS. – Listes de définitions utilisée pour l'affichage d'une liste possédant des termes accompagnés de leurs définitions respectives.

18 Les listes codage  ul (unordered list) : délimite une liste non numérotée li (list item) : enfant de ul, délimite un élément de la liste  ol (ordered list) : délimite une liste numérotée li : enfant de ol, délimite un élément de la liste  dl (definition list) : délimite une liste de définition dt (definition term) : enfant de dl, délimite un terme de la liste dd (definition description) : enfant de dl, délimite une description d’un terme de la liste

19 Les listes listes.html

20 Les hyperliens présentation  Les liens hypertextes sont l'essence même du World Wide Web, qui n'existerait pas s'il était impossible de naviguer d'un site à l'autre.  Cliquer sur un lien permet de naviguer vers : – un autre endroit du même document ; – un autre document du même site – un document quelconque – un autre site web – un autre service d’Internet  En général, les liens sont indiqués sur une page web par du texte souligné ou par un changement d’apparence du pointeur de la souris.  Dans un navigateur, le passage du pointeur sur un lien fait afficher la cible sur la barre d’état

21 Les hyperliens codage  L’élément a permet de créer un hyperlien.  Principaux attributs: href : précise le chemin de la cible title : explicite la cible (info bulle sur navigateur graphique)  Lien extra-système: libellé pour l’internaute  Lien intra-page: 1.créer le point d’ancrage ou signet en rajoutant à n’importe quelle balise (de la partie qui sera ciblée) l’attribut id avec une étiquette comme valeur. 2.créer le lien vers la partie identifiée par étiquette avec :....  Liens intra-système : … …

22 Les hyperliens application Dans le fichier texte.html: 1.Juste avant, ajouter et tester ce code Aller à Google Message à Babou NB : Ajouter l’attribut title au code ci-dessus 2.a) Répéter 10 fois le code source de la partie en dessous du trait horizontal b) Juste après la dernière copie du code précité, créer un lien permettant d’afficher le premier paragraphe du document 3.Créer un lien permettant d’afficher la liste descriptive de la page listes.html. NB : on rallongera d’abord la page listes.html en répétant par exemple plusieurs fois le code des autres listes juste après celui de la liste descriptive.

23 Les images formats Les quatre principaux formats utilisés sur le Web sont :  JPEG (Joint Photographic Experts Group) qui compresse, avec perte, l’image ; avec ses 16 777 216 couleurs, ce format est adapté pour les photographies.  GIF (Graphics Interchange Format): qui compresse, sans perte, l’image ; avec ses 256 couleurs, ce format est adapté pour les logos et les images animées (une exclusivité).  PNG 8 bits (Portable Network Graphic) : compresse mieux que son concurrent direct le GIF ; avec ses 256 couleurs, ce format est adapté pour les boutons graphiques (avec peu de couleurs), les flèches de navigation et les petites icônes.  PNG 24 bits : à mi-chemin entre le PNG 8 bits et le JPEG, il permet la transparence sur plusieurs niveaux ; avec ses 16 777 216 couleurs, ce format est adapté pour les logos, les boutons graphiques détaillés et les captures d’écran.

24 Les images codage  : Affiche l'image  Autres attributs de img: width=? : largeur (en pixels ou en pourcentages) height=?: hauteur (en pixels ou en pourcentages) alt="texte": texte alternatif obligatoire pour que tout agent (malvoyants, navigateur texte, incidents techniques, robots) ne pouvant voir l’image puisse avoir un texte alternatif. title : expliciter l’image (info bulle sur navigateur graphique)  Image lien:

25 Les images image.html 1.Créer un dossier images dans votre répertoire de travail 2.Mettre une image dans ce dossier. Aller chercher une image dans le dossier Mes Images par exemple 3.Sortir du dossier image et créer, dans le répertoire de travail, le fichier image.html chargé d’afficher l’image par un navigateur NB : on testera tous les attributs de img

26 Les tableaux présentation et codage  Un tableau permet de présenter l’information d’une manière concise  Un tableau (table) est constitué de lignes (rows), elles-mêmes constituées de cellules qui contiennent les données (data).  table : délimite un tableau – border="n": épaisseur du cadre extérieur – align="left|right|center": alignement horizontal du tableau – width="n%": largeur relative du tableau – summary= "texte descriptif du contenu du tableau pour les navigateurs brailles ou vocaux"  tr (table row) : enfant de table, délimite une ligne du tableau – valign="middle|top|bottom": alignement vertical – align="left|right|center": alignement horizontal

27 Les tableaux suite du codage  td (table data) : enfant de tr, délimite une cellule d’une ligne – valign et align (prioritaire sur ) – colspan="n" : fusion horizontale de n cellules – rowspan="n" : fusion verticale de n cellules  Ajouter de la structure à un tableau en : – donnant une légende (ou titre) au tableau avec l’élément caption juste après la balise ouvrante. L’élément caption délimite la légende avec comme attribut align = "top|bottom|left|right" – remplaçant les td qui contiennent des en-têtes (de ligne et/ou de colonne) par des th (table header).

28 Les tableaux tableau.html

29 Les formulaires présentation  Les formulaires permettent d’interagir avec l'internaute.  Parmi leurs utilisations courantes on peut noter : récupérer des informations sur l'utilisateur; procéder à des authentifications ; permettre à l'utilisateur de contribuer à un site ; opérer des recherches ou sélections sur le site ;  L'internaute entre les données en remplissant des champs texte (une ou +sieurs lignes), en cochant une (ou +sieurs) case(s) ou en sélectionnant un (ou des) élément(s) dans une liste.  Ensuite l'internaute soumet les données en cliquant sur un bouton de soumission.  La soumission envoie les données généralement à un script côté serveur sous forme de paires nom/valeur, c'est-à-dire un ensemble de données représentées par le nom de l'élément de formulaire, le caractère "=", puis la valeur associée.

30 Les formulaires élément form form délimite un formulaire et ses principaux attributs sont :  action="adresse_script_cible" script côté serveur qui traitera les données du formulaire.  method="get|post" spécifie la méthode HTTP employée pour envoyer le formulaire à l'agent de traitement. "get", méthode par défaut, correspond à un envoi des données codées dans l'URL du script cible ( ex : script.php?nomChamp1=valeur1&nomChamp2=valeur2&... ) "post" est la valeur qui correspond à un envoi de données stockées dans le corps de la requête HTTP.  enctype="multipart/form-data" si un fichier doit être joint au formulaire

31 Les formulaires élément input input, enfant de form, définit une zone de saisie, une case à cocher, un bouton, etc. Ses principaux attributs sont :  type= "text |password|checkbox|radio|submit|reset|file| hidden|button" qui précise le type de champ.  name: obigatoire car il permettra au script de connaître le champ associé à la paire nom/valeur, c'est-à-dire que le nom du champ sera suivi du caractère "=" puis de la valeur entrée par l'utilisateur, ou dans le cas contraire de la valeur par défaut repéré par l'attribut value.  value: valeur de la donnée transmise obligatoire lorsque type≠ "text|password|file"  checked="checked": pour pré-selectionner un bouton radio

32 Les formulaires autres éléments enfant de form  select: délimite une liste déroulante ou non – name="nom_transmis" – size="n": n options visibles d’une liste non déroulante – multiple = "multiple": permet le choix multiple. ( Dans ce cas, name = "nom_transmis[ ]")  option: enfant de select, délimite un choix dans une liste – value: valeur transmise si l’option délimitée est choisie – selected = "selected": pour pré-sélectionner une option  textarea: délimite une zone de saisie multilignes – name: nom transmis – rows: nbre de lignes visibles – cols: nbre de caractères par ligne  fieldset : organise un formulaire en plusieurs sous parties  legend : enfant de fieldset, permet de donner un titre à chacune des sous parties. Cet élément délimite le titre de la sous-partie

33 Les formulaires formulaire.html

34 Le son et la vidéo présentation Une page XHTML peut intégrer du son et de la vidéo grâce à l’élément object. les navigateurs utilisent des programmes appelés plug-in ou modules externes pour lire ces objets multimédia. Le plug-in dépend des configurations de la machine de l'utilisateur. Quelques exemples de plug-in : – Windows Media Player de Microsoft; – Quicktime Player d’Apple; – Real Player de Real Networks; – Schockwave d’Adobe; – DewPlayer d’Alsacreations; – Flvplayer de flv-player.net

35 Le son et la vidéo quelques attributs de l’élément object  classid : identifiant ou URL d’un programme pouvant assurer le rendu de l'objet; Exemple : classid="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A" contrôle ActiveX qui permet la lecture de fichiers aux formats WAV, AU, MID, AVI,MPEG, etc.  codebase : URL à partir duquel le programme référencé par classid pourra être téléchargé.  codetype : type MIME (Multipurpose Internet Mail Extensions) du programme référencée par classid Exemple : codetype="application/x-shockwave-flash"

36 Le son et la vidéo autres attributs de l’élément object  data : adresse de l'objet à insérer.  type : type MIME de l’objet référencé par data Exemple : type="audio/mpeg"  standby : message d'attente durant le chargement de l’objet  align : aligner le cadre dans lequel est incrusté l'objet  height /width : hauteur /largeur de la zone d’affichage de l'objet  hspace /vspace : espacement horizontal /vertical entre l'objet et le texte

37 Le son et la vidéo l’élément param  l’élément object peut contenir, avant tout autre élément- enfant, des éléments param (muni des attributs name et value) permettant de spécifier un certain nombre de propriétés qui sont transmises aux objets multimédia chargés.  Il existe une infinité de valeurs du couple name/value puisque tout dépend de l'objet et du plugin.  Quelques exemples:

38 Le son et la vidéo media_cote_client.html 1.Créer un dossier nommé media dans votre répertoire de travail (dossier contenant toutes les pages html du cours) 2.Mettre des fichiers audio (mp3, …) et vidéo (flv, mp4, … ) dans le dossier media 3.Créer une page media_cote_client.html pour coder l’exécution de ces fichiers multimédia 4.Tester media_cote_client.html avec plusieurs navigateurs 5.Quel constat fait-on par rapport au comportement des navigateurs

39 Le son et la vidéo media_cote_serveur.html 1.Coller les scripts flash dewplayer.swf et flvplayer.swf dans votre répertoire de travail. Ces scripts servent respectivement à lire des fichiers audio (mp3) et video (flv, mp4) qui leur sont passés en paramètre. 2.Créer une page media_cote_serveur.html pour l’exécution des fichiers multimédia précédents par les scripts flash avec le code suivant :