Le document présente une introduction au XHTML, un langage strict pour structurer des pages web, détaillant les éléments essentiels comme les balises, leur syntaxe, et l'organisation d'un document. Il précise les conventions à suivre pour assurer la conformité aux standards du W3C et explique comment créer une page web à l'aide de balises HTML et CSS. Enfin, il aborde les rôles spécifiques des en-têtes et du corps d'une page, en donnant des exemples de code pour illustrer chaque point.

1. INTRODUCTION AU XHTML

2. Site Web Un Site Web est composé d'un ensemble de documents structurés, nommés pages web , stockés (hébergés) sur un ordinateur (serveur) connecté au réseau mondial (internet). Une page web contient essentiellement du texte, et est souvent enrichie d'images, de sons, de vidéos et de liens vers d'autres pages web.

3. Navigateur Un navigateur web est un logiciel informatique qui permet de consulter des documents sur Internet Les navigateurs web les plus connues sont: Internet explorer Mozilla Firefox Google Chrome.

4. World Wide Web Consortium Le World Wide Web Consortium , abrégé par le sigle W3C , est un organisme de standardisation à but non-lucratif, chargé de promouvoir la compatibilité des technologies du WEB telles que HTML , XHTML , XML , CSS C'est un organisme qui n'émet que des recommandations : les concepteurs de navigateurs restent libres de s'y conformer.

5. World Wide Web Consortium Ces normes ne garantissent pas aujourd’hui un rendu identique sur chaque navigateur. Ainsi il peut apparaître des incohérences dans une page sous Internet Explorer et non sous Firefox, ou inversement. C’est le rôle du programmeur Web de garantir une interface homogène et fonctionnelle quel que soit le navigateur utilisé.

6. HTML Le HTML (HyperText Markup Language) est un format de présentation de données permettant de créer des pages web pouvant être lues dans des navigateurs . C'est un langage de description de données.

7. HTML et CSS le W3C préconise de maintenir une séparation entre la structure et la présentation d’un document. Il adjoint au HTML la notion de feuille de style à travers le langage CSS ( Cascading Style Sheet ).

8. HTML et CSS HTML décrit la structure du document, CSS se charge de la présentation. Ainsi, un même document HTML peut être présenté de différentes façons à l'aide de différentes feuilles de style.

9. XHTML XHTML est une reformulation syntaxique du HTML plus stricte, qui interdit tout élément de présentation dans le corps du document.

10. Concepts généraux d’XHTML XHTML est un langage non permissif qui suit un ensemble de règles. Un fichier écrit en langage XHTML est fichier texte, dont le contenu est structuré à l'aide de repères que l'on appelle des éléments . Chaque élément est constitué de balises et d' attributs qui permettent d'apporter des informations sur son contenu.

11. Balise Une balise ( Markup en anglais) est une « commande » qui permet un certain rendu lors de son interprétation. Une balise est délimitée par un « < » et un « > » respectivement pour ouvrir et fermer la balise.

12. Balise On distingue trois types de balises : - les balises ouvrantes : <mabalise> ; - les balises fermantes : </mabalise> ; - les balises auto-fermantes : <mabalise /> .

13. Balise Chaque balise possède un nom (ici « mabalise ») et peut posséder des attributs ou options. Chaque attribut doit posséder une valeur délimitée par des &quot; &quot; ( double quotes ) ou des ‘ ‘ ( simple quotes ), Les balises fermantes ne possèdent jamais d’attribut.

14. Balise Exemple <mabalise attribut1 =&quot;attribut1&quot; attribut2 =&quot;attribut2&quot; > <mabalise /> .

15. Imbrication des balises Ce principe de formalisme interdit tout chevauchement de balises.

16. Imbrication des balises Exemple (valide) : ... <p> <font color=&quot;red&quot;> Mon texte en rouge </font> </p>

17. Imbrication des balises Exemple (non valide) : ... <p> <font color=&quot;red&quot;> Mon texte en </p> rouge </font>

18. Grammaire du XHTML EN XHTML : - Les noms de balises et attributs sont obligatoirement en minuscule. Exemple (valide) : < mabalise > Exemple (non valide) : <MABALISE>

19. Grammaire du XHTML EN XHTML : - Chaque attribut possède nécessairement une valeur introduite par des ‘ ‘ou des &quot; &quot;. Exemple (valide) : < mabalise attribut1=&quot;1&quot; > Exemple (non valide) : < mabalise attribut1=1 >

20. Grammaire du XHTML EN XHTML : - Tout attribut doit forcement recevoir une valeur. Exemple (valide) : < mabalise attribut1=&quot;1&quot; > Exemple (non valide) : < mabalise attribut1 >

21. Grammaire du XHTML EN XHTML : - Toute balise ouverte doit être fermée. Exemple (valide) : < mabalise > texte < /mabalise > Exemple (non valide) : < mabalise > texte

22. Grammaire du XHTML EN XHTML : - Les balises vides doivent être explicites. Exemple 1 (valide) : < mabalise /> Exemple 1 (non valide) : < mabalise >

23. Grammaire du XHTML EN XHTML : - Les balises doivent respecter la règle d’imbrication. Exemple (valide) : < mabalise > < mabalise2 > texte < /mabalise2 > < /mabalise > Exemple (non valide) : < mabalise > < mabalise2 > texte < /mabalise > < /mabalise2 >

24. Grammaire du XHTML EN XHTML : - Tout document se conformant à ces règles est dit syntaxiquement bien formé.

25. XHTML: structure d’une page La structure d’un document XHTML est soumise à des règles inflexibles.

26. XHTML: structure d’une page La déclaration XML: <?xml version=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot;?> L’encodage correspond au jeu de caractères utilisés par la page ainsi que son format.

27. XHTML: structure d’une page Le doctype permet de définir le langage utilisé par la page ainsi que le jeu de règles voulu. Il existe plusieurs doctype:

28. XHTML: structure d’une page Le XHTML 1.0 Strict qui se résume aux seules options de modélisation de données de façon stricte. Pas d’attribut de mise en forme. Déclaration du doctype XHTML 1.0 strict : <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/XHTML1/DTD/XHTML1-strict.dtd&quot;>

29. XHTML: structure d’une page Le XHTML 1.0 Transitional qui se trouve être un compromis entre le XHTML et l’HTML. Les attributs de mise en forme sont acceptés. Déclaration du doctype XHTML 1.0 transitional : <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/XHTML1/DTD/XHTML1-transitional.dtd&quot;>

30. XHTML: Le Document Un document XHTML se délimite par les balises <html> et </html> . Exemple : … <html> … </html>

31. XHTML: Les en-têtes (headers) Les en-têtes sont délimitées par les balises <head> et </head>: elles ne sont pas directement destinées à l’affichage.

32. XHTML: Les en-têtes (headers)-title Le contenu de l'élément title est le titre du document : il est affiché dans la barre de titre du navigateur. Exemple : … <head> <title> Bientôt notre première page </title> </head> ...

33. XHTML: Les en-têtes (headers)-meta L'élément meta permet de donner des informations supplémentaires sur le document.

34. XHTML: Les en-têtes (headers)-meta Exemple : <head> ... <meta name=&quot; author &quot; content=« Momar Diop &quot;> <meta name=&quot; keywords &quot; content=&quot; HTML, initiation &quot;> <meta name=&quot; description &quot; content=&quot; Cette page fournit une introduction au langage HTML &quot;> ... </head>

35. XHTML: Les en-têtes (headers)-script Cet élément permet d'introduire un script (un petit programme qui s’exécute dans la page). Exemple : <head> <script language=&quot;javascript1.2&quot;> … </script> </head>

36. XHTML: Les en-têtes (headers)-link Cette balise permet de spécifier les URLs (chemins) des fichiers liés au document . Exemple : <head> … <link rel=&quot; stylesheet &quot; type=&quot; text/css &quot; href=&quot; cours.css &quot;> … </head>

37. XHTML: Le corps - body Les balises <body> et </body> délimitent le corps de la page. Exemple : … <body> … </body> …

38. XHTML: Le corps – Commentaires Il est souvent utile de commenter son code source afin d’en faciliter la relecture. Les commentaires ne sont pas interprétés par le navigateur, ils sont invisibles à l’écran . Exemple : <body> <!-- Tout ce qui est ici ne sera pas interprété par le navigateur (invisible à l’écran) ! --> </body>

39. XHTML Exemple : <?xml version=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot;?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/XHTML1/DTD/XHTML1-transitional.dtd&quot;> <html> <head> <title> Notre première page </title> </head> <body> <h1> Titre de niveau 1</ h1> <h2> Titre de niveau 2</ h2> <p> Voici un premier < br /> paragraphe. </ p> <p> Voici un deuxième paragraphe. </ p> </body> </html>

40. Organiser Son Texte – Titre Il existe six niveaux de titres, par ordre d'importance décroissante h1 à h6. <h1> </h1> : En général, on s'en sert pour afficher le titre de la page. <h2> </h2> : utilisé souvent pour donner un titre aux paragraphes. <h3> </h3> : utilisé souvent pour donner un &quot;sous-titre&quot; aux paragraphes. <h4> </h4> : peu utilisé. <h5> </h5> : peu utilisé. <h6> </h6> : peu utilisé.

41. Organiser Son Texte – Titre Exemple : <?xml version=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot;?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/XHTML1/DTD/XHTML1-transitional.dtd&quot;> <html> <head> <title> Notre première page </title> </head> <body> <h1> Titre de niveau 1</ h1> <h2> Titre de niveau 2</ h2> <h3> Titre de niveau 3</ h3> <h4> Titre de niveau 4</ h4> <h5> Titre de niveau 5</ h5> <h6> Titre de niveau 6</ h6> </body> </html>

42. Organiser Son Texte – Paragraphe En XHTML, il est possible de segmenter son texte en paragraphes. Chaque paragraphe se trouve entre les balises <p> et </p>. L'élément < br /> permet d'insérer un saut de ligne à l'intérieur d'un paragraphe. Avant de l'utiliser, il faut se demander s'il n'y a pas lieu de scinder ce dernier en deux éléments p distincts.

43. Organiser Son Texte – Paragraphe Exemple : <?xml version=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot;?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/XHTML1/DTD/XHTML1-transitional.dtd&quot;> <html> <head> <title> Notre première page </title> </head> <body> <h1> Titre de la page</ h1> <h2> Titre du paragraphe 1</ h2> <p> Texte du paragraphe 1 Texte du paragraphe 1 Texte du paragraphe 1 Texte du paragraphe 1 Texte du paragraphe 1 Texte du paragraphe 1 Texte du paragraphe 1 Texte du paragraphe 1 </p>

44. Organiser Son Texte – Paragraphe Exemple (suite) : <h2> Titre du paragraphe 1</ h2> <p> saut de ligne dans le paragraphe <br/> Texte du paragraphe 1 Texte du paragraphe 1 Texte du paragraphe 1 Texte du paragraphe 1 Texte du paragraphe 1 Texte du paragraphe 1 Texte du paragraphe 1 </p> </body> </html>

45. Organiser Son Texte – caractères spéciaux Pour assurer un affichage correct de la page, les caractères spéciaux (accentués, …) sont remplacés par leur code HTML.

46. Organiser Son Texte – caractères spéciaux Caractères particuliers Caractère Code numérique Code HTML Description &quot; &#34; &quot; Guillemets & &#38; &amp; Esperluette < &#60; &lt; Inférieur à > &#62; &gt; Supérieur à

47. Organiser Son Texte – caractères spéciaux Signes diacritiques : u n signe diacritique est un signe graphique qui sert à différencier des mots homographes ou des prononciations différentes d'une même lettre.

48. Organiser Son Texte – caractères spéciaux Caractères diacritiques Caractère Code numérique Code HTML Description à &#224; &agrave; ˆ &#710; &circ; Accent circonflexe circ ˜ &#732; &tilde; Tilde tilde ¸ &#184; &cedil; Cédille ¸

49. Organiser Son Texte – caractères spéciaux Exemple : <?xml version=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot;?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/XHTML1/DTD/XHTML1-transitional.dtd&quot;> <html> <head> <title> Notre première page </title> </head> <body> <h1> Titre de la page</ h1> <p> &#34; <br/> &circ; <br/> &#62; <br/> &tilde; <br/> &#38; </p> </body> </html>

50. Organiser Son Texte – mettre en forme Il existe des balises pour mettre en forme le texte. <em> texte </em> : met en italique le texte. <strong> texte </strong>: met en gras le texte. ^texte: met en exposant le texte. _texte: met en indice le texte.

51. Organiser Son Texte – mettre en forme Exemple : <?xml version=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot;?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/XHTML1/DTD/XHTML1-transitional.dtd&quot;> <html> <head> <title> Notre première page </title> </head> <body> <h1> Titre de la page</ h1> <h2> Titre du paragraphe 1</ h2> <p> <em> Texte du paragraphe 1 Texte du paragraphe 1 </em> </p>

52. Organiser Son Texte – mettre en forme Exemple (suite) : <p> <strong> Texte du paragraphe 1 Texte du paragraphe 1 </strong > </p> <p> Bonjour M^me </p> <p> x _n = x _{n - 1} - 2x _n-2 </p> </body> </html>

53. Organiser Son Texte – Liens Un lien hypertexte est un élément HTML permettant d'envoyer le visiteur vers une nouvelle page (lien externe) ou vers une autre zone de la page courante (lien interne). Un lien sera représenté dans le code par la balise <a>. L'adresse de destination doit se trouver dans l'attribut href. <a href=&quot;chemin/du/fichier/destination.html&quot;>Texte du lien</a>. Il faut indiquer le chemin pour accéder à la page de destination.

54. Organiser Son Texte – Liens Si les 2 pages sont sur le même répertoire, on indique juste le nom de la page. <a href=&quot;destination.html&quot;>Texte du lien</a>. Si la page de destination se trouve par exemple dans un sous dossier. <a href=&quot;sous_dossier/destination.html&quot;>Texte du lien</a>. Lien vers un site externe, on indique l’url complet du site. <a href=&quot; http://www.google.sn &quot;>lien vers google</a>.

55. Organiser Son Texte – Liens L’attribut target permet de spécifier la manière dont la page de destination va s’ouvrir. _ self : remplace la page courante par la nouvelle page. _blank : affiche la page de destination dans une nouvelle page. <a href=&quot;http://www.google.sn&quot; target='_blank'>lien vers google</a>. <a href=&quot;http://www.google.sn&quot; target='_self'>lien vers google</a>.

56. Organiser Son Texte – Liens L’attribut title affiche une bulle d’aide lorsque vous pointerez la souris sur le lien. <a href=&quot;http://www.google.sn&quot; target='_blank' title='lien vers google sur une nouvelle page' >lien vers google</a>. <a href=&quot;http://www.google.sn&quot; target='_self ' title='lien vers google sur la même page' >lien vers google</a>.

57. Organiser Son Texte – Liens Il est possible d’utiliser les liens pour envoyer un email. <a href=&quot;mailto:adressemail&quot;>Ecrivez-moi</a>

58. Organiser Son Texte – Liens Les ancres permettent de naviguer à l'intérieur d'une même page. Pour faire une ancre, il faut utiliser le signe dièse (#) suivi d'un mot-clef. <a href=&quot;#motClef&quot;>Texte de mon ancre</a> [...] <h2 id=&quot;motClef&quot;>Texte vers lequel l'ancre est renvoyée</h2>

59. Organiser Son Texte – Images Pour afficher une image, on utilise la balise <img>. L'attribut src permet de renseigner le chemin de l'image, <img src=&quot;adresse/de/l/image&quot; >

60. Organiser Son Texte – caractères spéciaux Exemple : <?xml version=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot;?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/XHTML1/DTD/XHTML1-transitional.dtd&quot;> <html> <head> <title> Notre première page </title> </head> <body> <h1> Titre de la page</ h1> <p> <img src=&quot; image1.gif&quot; > </p> </body> </html>