INTRODUCTION AU  XHTML
Site Web <ul><li>Un Site Web est composé d'un ensemble de documents structurés, nommés  pages web , stockés (hébergés) sur...
Navigateur <ul><li>Un  navigateur web  est un logiciel informatique qui permet de consulter des documents sur Internet </l...
World Wide Web Consortium <ul><li>Le  World Wide Web Consortium , abrégé par le  sigle   W3C , est un  organisme de standa...
World Wide Web Consortium <ul><li>Ces normes ne garantissent pas aujourd’hui un rendu identique sur chaque navigateur. </l...
HTML  <ul><li>Le  HTML  (HyperText Markup Language) est un format de présentation de données permettant de créer des  page...
HTML et CSS <ul><li>le W3C préconise de maintenir une séparation entre la structure et la présentation d’un document. </li...
HTML et CSS <ul><li>HTML décrit la structure du document, CSS se charge de la présentation. </li></ul><ul><li>Ainsi, un mê...
XHTML <ul><li>XHTML est une reformulation syntaxique du HTML plus stricte, qui interdit tout élément de présentation dans ...
Concepts généraux d’XHTML <ul><li>XHTML est un langage non permissif qui  suit un ensemble de règles.  </li></ul><ul><li>U...
Balise <ul><li>Une balise ( Markup  en anglais) est une « commande » qui permet un certain rendu lors de son interprétatio...
Balise <ul><li>On distingue trois types de balises : </li></ul><ul><li>- les balises ouvrantes :  <mabalise>  ; </li></ul>...
Balise <ul><li>Chaque balise possède un nom (ici « mabalise ») et peut posséder des attributs ou options. Chaque attribut ...
Balise <ul><li>Exemple  <mabalise attribut1 =&quot;attribut1&quot;  attribut2 =&quot;attribut2&quot;  >  <mabalise /> . </...
Imbrication des balises <ul><li>Ce principe de formalisme interdit tout chevauchement de balises. </li></ul>
Imbrication des balises <ul><li>Exemple  (valide) : </li></ul><ul><li>... </li></ul><ul><li><p> </li></ul><ul><li><font co...
Imbrication des balises <ul><li>Exemple  (non valide) : </li></ul><ul><li>... </li></ul><ul><li><p> </li></ul><ul><li><fon...
Grammaire du XHTML <ul><li>EN XHTML : </li></ul><ul><li>-  Les noms de balises et attributs sont obligatoirement en minusc...
Grammaire du XHTML <ul><li>EN XHTML : </li></ul><ul><li>-  Chaque attribut possède nécessairement une valeur introduite pa...
Grammaire du XHTML <ul><li>EN XHTML : </li></ul><ul><li>- Tout attribut doit forcement recevoir une valeur.  </li></ul><ul...
Grammaire du XHTML <ul><li>EN XHTML : </li></ul><ul><li>-  Toute balise ouverte doit être fermée. </li></ul><ul><li>Exempl...
Grammaire du XHTML <ul><li>EN XHTML : </li></ul><ul><li>-  Les balises vides doivent être explicites.  </li></ul><ul><li>E...
Grammaire du XHTML <ul><li>EN XHTML : </li></ul><ul><li>-  Les balises doivent respecter la règle d’imbrication. </li></ul...
Grammaire du XHTML <ul><li>EN XHTML : </li></ul><ul><li>-  Tout document se conformant à ces règles est dit syntaxiquement...
XHTML: structure d’une page <ul><li>La structure d’un document XHTML est soumise à des règles inflexibles. </li></ul>
XHTML: structure d’une page <ul><li>La déclaration XML: </li></ul><ul><li><?xml version=&quot;1.0&quot; encoding=&quot;iso...
XHTML: structure d’une page <ul><li>Le doctype  permet de définir le langage utilisé par la page ainsi que le jeu de règle...
XHTML: structure d’une page <ul><li>Le XHTML 1.0 Strict qui se résume aux seules options de modélisation de données de faç...
XHTML: structure d’une page <ul><li>Le XHTML 1.0 Transitional qui se trouve être un compromis entre le XHTML et l’HTML. Le...
XHTML: Le Document <ul><li>Un document XHTML se délimite par les balises  <html>  et  </html> . </li></ul><ul><li>Exemple ...
XHTML: Les en-têtes (headers) <ul><li>Les en-têtes sont délimitées par les balises  <head>  et  </head>:  elles ne sont pa...
XHTML: Les en-têtes (headers)-title <ul><li>Le contenu de l'élément  title  est le titre du document : il est affiché dans...
XHTML: Les en-têtes (headers)-meta <ul><li>L'élément  meta  permet de donner des informations supplémentaires sur le docum...
XHTML: Les en-têtes (headers)-meta <ul><li>Exemple : </li></ul><ul><li>  <head> </li></ul><ul><li>... </li></ul><ul><li><m...
XHTML: Les en-têtes (headers)-script <ul><li>Cet élément permet d'introduire un script (un petit programme qui s’exécute d...
XHTML: Les en-têtes (headers)-link <ul><li>Cette balise permet de spécifier les URLs (chemins) des fichiers liés au docume...
XHTML: Le corps - body <ul><li>Les balises  <body>  et  </body>  délimitent le corps de la page. </li></ul><ul><li>Exemple...
XHTML: Le corps – Commentaires <ul><li>Il est souvent utile de commenter son code source afin d’en faciliter la relecture....
XHTML <ul><li>Exemple : </li></ul><ul><li><?xml version=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot;?> </li></ul><ul><l...
Organiser Son Texte – Titre <ul><li>Il existe six niveaux de titres, par ordre d'importance décroissante  h1  à  h6. </li>...
Organiser Son Texte – Titre <ul><li>Exemple : </li></ul><ul><li><?xml version=&quot;1.0&quot; encoding=&quot;iso-8859-1&qu...
Organiser Son Texte –  Paragraphe <ul><li>En XHTML, il est possible de segmenter son texte en paragraphes. </li></ul><ul><...
Organiser Son Texte –  Paragraphe <ul><li>Exemple : </li></ul><ul><li><?xml version=&quot;1.0&quot; encoding=&quot;iso-885...
Organiser Son Texte –  Paragraphe <ul><li>Exemple (suite) : </li></ul><ul><li><h2> Titre du paragraphe 1</ h2> </li></ul><...
Organiser Son Texte –  caractères spéciaux <ul><li>Pour   assurer un affichage correct de la page, les caractères spéciaux...
Organiser Son Texte –  caractères spéciaux <ul><li>  Caractères particuliers </li></ul>Caractère Code numérique Code HTML ...
Organiser Son Texte –  caractères spéciaux <ul><li>  Signes diacritiques : u n signe diacritique est un signe graphique qu...
Organiser Son Texte –  caractères spéciaux <ul><li>  Caractères diacritiques </li></ul>Caractère Code numérique Code HTML ...
Organiser Son Texte –  caractères spéciaux <ul><li>Exemple : </li></ul><ul><li><?xml version=&quot;1.0&quot; encoding=&quo...
Organiser Son Texte –  mettre en forme <ul><li>Il existe des balises pour mettre en forme le texte. </li></ul><ul><li><em>...
Organiser Son Texte –  mettre en forme <ul><li>Exemple : </li></ul><ul><li><?xml version=&quot;1.0&quot; encoding=&quot;is...
Organiser Son Texte –  mettre en forme <ul><li>Exemple (suite) : </li></ul><ul><li><p>  </li></ul><ul><ul><li>  <strong>  ...
Organiser Son Texte – Liens <ul><li>Un lien hypertexte est un élément HTML permettant d'envoyer le visiteur vers une nouve...
Organiser Son Texte – Liens <ul><li>Si les 2 pages sont sur le même répertoire, on indique juste le nom de la page. </li><...
Organiser Son Texte – Liens <ul><li>L’attribut target permet de spécifier la manière dont la page de destination va s’ouvr...
Organiser Son Texte – Liens <ul><li>L’attribut title affiche une bulle d’aide lorsque vous pointerez la souris sur le lien...
Organiser Son Texte – Liens <ul><li>Il est possible d’utiliser les liens pour envoyer un email. </li></ul><ul><li><a href=...
Organiser Son Texte – Liens <ul><li>Les ancres permettent de naviguer à l'intérieur d'une même page. </li></ul><ul><li>Pou...
Organiser Son Texte – Images <ul><li>Pour afficher une image, on utilise la balise <img>. </li></ul><ul><li>L'attribut src...
Organiser Son Texte –  caractères spéciaux <ul><li>Exemple : </li></ul><ul><li><?xml version=&quot;1.0&quot; encoding=&quo...
Prochain SlideShare
Chargement dans…5
×

Introduction html

914 vues

Publié le

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
914
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
32
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • 1
  • Introduction html

    1. 1. INTRODUCTION AU XHTML
    2. 2. Site Web <ul><li>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). </li></ul><ul><li>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. </li></ul>
    3. 3. Navigateur <ul><li>Un  navigateur web  est un logiciel informatique qui permet de consulter des documents sur Internet </li></ul><ul><li>Les navigateurs web les plus connues sont: </li></ul><ul><ul><li>Internet explorer </li></ul></ul><ul><ul><li>Mozilla Firefox </li></ul></ul><ul><ul><li>Google Chrome. </li></ul></ul>
    4. 4. World Wide Web Consortium <ul><li>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 </li></ul><ul><li>  C'est un organisme qui n'émet que des  recommandations  : les concepteurs de navigateurs restent libres de s'y conformer. </li></ul>
    5. 5. World Wide Web Consortium <ul><li>Ces normes ne garantissent pas aujourd’hui un rendu identique sur chaque navigateur. </li></ul><ul><li>Ainsi il peut apparaître des incohérences dans une page sous Internet Explorer et non sous Firefox, ou inversement. </li></ul><ul><li>C’est le rôle du programmeur Web de garantir une interface homogène et fonctionnelle quel que soit le navigateur utilisé. </li></ul>
    6. 6. HTML <ul><li>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 . </li></ul><ul><li>C'est un langage de description de données. </li></ul>
    7. 7. HTML et CSS <ul><li>le W3C préconise de maintenir une séparation entre la structure et la présentation d’un document. </li></ul><ul><li>Il adjoint au HTML la notion de feuille de style à travers le langage CSS ( Cascading Style Sheet ).  </li></ul>
    8. 8. HTML et CSS <ul><li>HTML décrit la structure du document, CSS se charge de la présentation. </li></ul><ul><li>Ainsi, un même document HTML peut être présenté de différentes façons à l'aide de différentes feuilles de style. </li></ul>
    9. 9. XHTML <ul><li>XHTML est une reformulation syntaxique du HTML plus stricte, qui interdit tout élément de présentation dans le corps du document. </li></ul>
    10. 10. Concepts généraux d’XHTML <ul><li>XHTML est un langage non permissif qui suit un ensemble de règles.  </li></ul><ul><li>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 . </li></ul><ul><li>Chaque élément est constitué de  balises  et d' attributs  qui permettent d'apporter des informations sur son contenu. </li></ul>
    11. 11. Balise <ul><li>Une balise ( Markup en anglais) est une « commande » qui permet un certain rendu lors de son interprétation. </li></ul><ul><li>Une balise est délimitée par un « < » et un « > » respectivement pour ouvrir et fermer la balise. </li></ul>
    12. 12. Balise <ul><li>On distingue trois types de balises : </li></ul><ul><li>- les balises ouvrantes : <mabalise> ; </li></ul><ul><li>- les balises fermantes : </mabalise> ; </li></ul><ul><li>- les balises auto-fermantes : <mabalise /> . </li></ul>
    13. 13. Balise <ul><li>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 ), </li></ul><ul><li>Les balises fermantes ne possèdent jamais d’attribut. </li></ul>
    14. 14. Balise <ul><li>Exemple <mabalise attribut1 =&quot;attribut1&quot; attribut2 =&quot;attribut2&quot; > <mabalise /> . </li></ul>
    15. 15. Imbrication des balises <ul><li>Ce principe de formalisme interdit tout chevauchement de balises. </li></ul>
    16. 16. Imbrication des balises <ul><li>Exemple (valide) : </li></ul><ul><li>... </li></ul><ul><li><p> </li></ul><ul><li><font color=&quot;red&quot;> </li></ul><ul><li>Mon texte en rouge </li></ul><ul><li></font> </li></ul><ul><li></p> </li></ul>
    17. 17. Imbrication des balises <ul><li>Exemple (non valide) : </li></ul><ul><li>... </li></ul><ul><li><p> </li></ul><ul><li><font color=&quot;red&quot;> </li></ul><ul><li>Mon texte en </li></ul><ul><li></p> </li></ul><ul><li>rouge </li></ul><ul><li></font> </li></ul>
    18. 18. Grammaire du XHTML <ul><li>EN XHTML : </li></ul><ul><li>- Les noms de balises et attributs sont obligatoirement en minuscule. </li></ul><ul><li>Exemple (valide) : </li></ul><ul><li>< mabalise > </li></ul><ul><li>Exemple (non valide) : </li></ul><ul><li><MABALISE> </li></ul>
    19. 19. Grammaire du XHTML <ul><li>EN XHTML : </li></ul><ul><li>- Chaque attribut possède nécessairement une valeur introduite par des ‘ ‘ou des &quot; &quot;. </li></ul><ul><li>Exemple (valide) : </li></ul><ul><li>< mabalise attribut1=&quot;1&quot; >   </li></ul><ul><li>Exemple (non valide) : </li></ul><ul><li>< mabalise attribut1=1 > </li></ul>
    20. 20. Grammaire du XHTML <ul><li>EN XHTML : </li></ul><ul><li>- Tout attribut doit forcement recevoir une valeur. </li></ul><ul><li>Exemple (valide) : </li></ul><ul><li>< mabalise attribut1=&quot;1&quot; >   </li></ul><ul><li>Exemple (non valide) : </li></ul><ul><li>< mabalise attribut1 > </li></ul>
    21. 21. Grammaire du XHTML <ul><li>EN XHTML : </li></ul><ul><li>- Toute balise ouverte doit être fermée. </li></ul><ul><li>Exemple (valide) : </li></ul><ul><li>< mabalise > texte < /mabalise >   </li></ul><ul><li>Exemple (non valide) : </li></ul><ul><li>< mabalise > texte </li></ul>
    22. 22. Grammaire du XHTML <ul><li>EN XHTML : </li></ul><ul><li>- Les balises vides doivent être explicites. </li></ul><ul><li>Exemple 1 (valide) : </li></ul><ul><li>< mabalise /> </li></ul><ul><li>Exemple 1 (non valide) : </li></ul><ul><li>< mabalise > </li></ul>
    23. 23. Grammaire du XHTML <ul><li>EN XHTML : </li></ul><ul><li>- Les balises doivent respecter la règle d’imbrication. </li></ul><ul><li>Exemple (valide) : </li></ul><ul><li>< mabalise > < mabalise2 > texte < /mabalise2 > < /mabalise > </li></ul><ul><li>Exemple (non valide) : </li></ul><ul><li> < mabalise > < mabalise2 > texte < /mabalise > < /mabalise2 > </li></ul>
    24. 24. Grammaire du XHTML <ul><li>EN XHTML : </li></ul><ul><li>- Tout document se conformant à ces règles est dit syntaxiquement bien formé. </li></ul>
    25. 25. XHTML: structure d’une page <ul><li>La structure d’un document XHTML est soumise à des règles inflexibles. </li></ul>
    26. 26. XHTML: structure d’une page <ul><li>La déclaration XML: </li></ul><ul><li><?xml version=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot;?> </li></ul><ul><li>L’encodage correspond au jeu de caractères utilisés par la page ainsi que son format. </li></ul>
    27. 27. XHTML: structure d’une page <ul><li>Le doctype permet de définir le langage utilisé par la page ainsi que le jeu de règles voulu. </li></ul><ul><li>Il existe plusieurs doctype: </li></ul>
    28. 28. XHTML: structure d’une page <ul><li>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. </li></ul><ul><li>Déclaration du doctype XHTML 1.0 strict : </li></ul><ul><li><!DOCTYPE html </li></ul><ul><li>PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; </li></ul><ul><li>&quot;http://www.w3.org/TR/XHTML1/DTD/XHTML1-strict.dtd&quot;> </li></ul>
    29. 29. XHTML: structure d’une page <ul><li>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. </li></ul><ul><li>Déclaration du doctype XHTML 1.0 transitional : </li></ul><ul><li><!DOCTYPE html </li></ul><ul><li>PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; </li></ul><ul><li>&quot;http://www.w3.org/TR/XHTML1/DTD/XHTML1-transitional.dtd&quot;> </li></ul>
    30. 30. XHTML: Le Document <ul><li>Un document XHTML se délimite par les balises <html> et </html> . </li></ul><ul><li>Exemple : </li></ul><ul><li> … <html> </li></ul><ul><li> … </li></ul><ul><li></html> </li></ul>
    31. 31. XHTML: Les en-têtes (headers) <ul><li>Les en-têtes sont délimitées par les balises <head> et </head>: elles ne sont pas directement destinées à l’affichage. </li></ul>
    32. 32. XHTML: Les en-têtes (headers)-title <ul><li>Le contenu de l'élément  title  est le titre du document : il est affiché dans la barre de titre du navigateur. </li></ul><ul><li>Exemple : </li></ul><ul><li>… </li></ul><ul><li><head> </li></ul><ul><li><title> Bientôt notre première page </title> </li></ul><ul><li></head> </li></ul><ul><li>... </li></ul>
    33. 33. XHTML: Les en-têtes (headers)-meta <ul><li>L'élément  meta  permet de donner des informations supplémentaires sur le document. </li></ul>
    34. 34. XHTML: Les en-têtes (headers)-meta <ul><li>Exemple : </li></ul><ul><li> <head> </li></ul><ul><li>... </li></ul><ul><li><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;> </li></ul><ul><li>... </li></ul><ul><li></head> </li></ul>
    35. 35. XHTML: Les en-têtes (headers)-script <ul><li>Cet élément permet d'introduire un script (un petit programme qui s’exécute dans la page). </li></ul><ul><li>Exemple : </li></ul><ul><li><head> </li></ul><ul><li><script language=&quot;javascript1.2&quot;> </li></ul><ul><li> … </li></ul><ul><li></script> </li></ul><ul><li></head> </li></ul>
    36. 36. XHTML: Les en-têtes (headers)-link <ul><li>Cette balise permet de spécifier les URLs (chemins) des fichiers liés au document . </li></ul><ul><li>Exemple : </li></ul><ul><li><head> </li></ul><ul><li> … </li></ul><ul><li><link rel=&quot; stylesheet &quot; type=&quot; text/css &quot; href=&quot; cours.css &quot;> </li></ul><ul><li> … </li></ul><ul><li></head> </li></ul>
    37. 37. XHTML: Le corps - body <ul><li>Les balises <body> et </body> délimitent le corps de la page. </li></ul><ul><li>Exemple : </li></ul><ul><li> … </li></ul><ul><li><body> </li></ul><ul><li> … </li></ul><ul><li></body> </li></ul><ul><li> … </li></ul>
    38. 38. XHTML: Le corps – Commentaires <ul><li>Il est souvent utile de commenter son code source afin d’en faciliter la relecture. </li></ul><ul><li>Les commentaires ne sont pas interprétés par le navigateur, ils sont invisibles à l’écran . </li></ul><ul><li>Exemple : </li></ul><ul><li><body> </li></ul><ul><li><!-- </li></ul><ul><li>Tout ce qui est ici ne sera pas interprété par le navigateur (invisible à l’écran) ! </li></ul><ul><li>--> </li></ul><ul><li></body> </li></ul>
    39. 39. XHTML <ul><li>Exemple : </li></ul><ul><li><?xml version=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot;?> </li></ul><ul><li><!DOCTYPE html </li></ul><ul><li>PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; </li></ul><ul><li>&quot;http://www.w3.org/TR/XHTML1/DTD/XHTML1-transitional.dtd&quot;> </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title> Notre première page </title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1> Titre de niveau 1</ h1> </li></ul><ul><li><h2> Titre de niveau 2</ h2> </li></ul><ul><li><p> Voici un premier < br />   paragraphe. </ p> </li></ul><ul><li><p> Voici un deuxième paragraphe. </ p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
    40. 40. Organiser Son Texte – Titre <ul><li>Il existe six niveaux de titres, par ordre d'importance décroissante  h1  à  h6. </li></ul><ul><li><h1> </h1> : En général, on s'en sert pour afficher le titre de la page. </li></ul><ul><li><h2> </h2> : utilisé souvent pour donner un titre aux paragraphes. </li></ul><ul><li><h3> </h3> : utilisé souvent pour donner un &quot;sous-titre&quot; aux paragraphes. </li></ul><ul><li><h4> </h4> : peu utilisé. </li></ul><ul><li><h5> </h5> : peu utilisé. </li></ul><ul><li><h6> </h6> : peu utilisé. </li></ul>
    41. 41. Organiser Son Texte – Titre <ul><li>Exemple : </li></ul><ul><li><?xml version=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot;?> </li></ul><ul><li><!DOCTYPE html </li></ul><ul><li>PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; </li></ul><ul><li>&quot;http://www.w3.org/TR/XHTML1/DTD/XHTML1-transitional.dtd&quot;> </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title> Notre première page </title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1> Titre de niveau 1</ h1> </li></ul><ul><li><h2> Titre de niveau 2</ h2> </li></ul><ul><li><h3> Titre de niveau 3</ h3> </li></ul><ul><li><h4> Titre de niveau 4</ h4> </li></ul><ul><li><h5> Titre de niveau 5</ h5> </li></ul><ul><li><h6> Titre de niveau 6</ h6> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
    42. 42. Organiser Son Texte – Paragraphe <ul><li>En XHTML, il est possible de segmenter son texte en paragraphes. </li></ul><ul><li>  Chaque paragraphe se trouve entre les balises <p> et </p>. </li></ul><ul><li>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. </li></ul>
    43. 43. Organiser Son Texte – Paragraphe <ul><li>Exemple : </li></ul><ul><li><?xml version=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot;?> </li></ul><ul><li><!DOCTYPE html </li></ul><ul><li>PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; </li></ul><ul><li>&quot;http://www.w3.org/TR/XHTML1/DTD/XHTML1-transitional.dtd&quot;> </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title> Notre première page </title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1> Titre de la page</ h1> </li></ul><ul><li><h2> Titre du paragraphe 1</ h2> </li></ul><ul><li><p> </li></ul><ul><ul><li>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 </li></ul></ul><ul><ul><li></p> </li></ul></ul>
    44. 44. Organiser Son Texte – Paragraphe <ul><li>Exemple (suite) : </li></ul><ul><li><h2> Titre du paragraphe 1</ h2> </li></ul><ul><li><p> </li></ul><ul><ul><li>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 </li></ul></ul><ul><ul><li></p> </li></ul></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
    45. 45. Organiser Son Texte – caractères spéciaux <ul><li>Pour assurer un affichage correct de la page, les caractères spéciaux (accentués, …) sont remplacés par leur code HTML. </li></ul>
    46. 46. Organiser Son Texte – caractères spéciaux <ul><li>  Caractères particuliers </li></ul>Caractère Code numérique Code HTML Description &quot; " &quot; Guillemets & & &amp; Esperluette < < &lt; Inférieur à > > &gt; Supérieur à
    47. 47. Organiser Son Texte – caractères spéciaux <ul><li>  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. </li></ul>
    48. 48. Organiser Son Texte – caractères spéciaux <ul><li>  Caractères diacritiques </li></ul>Caractère Code numérique Code HTML Description à à &agrave; ˆ ˆ &circ; Accent circonflexe circ ˜ ˜ &tilde; Tilde tilde ¸ ¸ &cedil; Cédille ¸
    49. 49. Organiser Son Texte – caractères spéciaux <ul><li>Exemple : </li></ul><ul><li><?xml version=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot;?> </li></ul><ul><li><!DOCTYPE html </li></ul><ul><li>PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; </li></ul><ul><li>&quot;http://www.w3.org/TR/XHTML1/DTD/XHTML1-transitional.dtd&quot;> </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title> Notre première page </title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1> Titre de la page</ h1> </li></ul><ul><li><p> </li></ul><ul><ul><li>" <br/> &circ; <br/> > <br/> &tilde; <br/> & </li></ul></ul><ul><ul><li></p> </li></ul></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
    50. 50. Organiser Son Texte – mettre en forme <ul><li>Il existe des balises pour mettre en forme le texte. </li></ul><ul><li><em> texte </em> : met en italique le texte. </li></ul><ul><li><strong> texte </strong>: met en gras le texte. </li></ul><ul><li><sup> texte </sup>: met en exposant le texte. </li></ul><ul><li><sub> texte </sub>: met en indice le texte. </li></ul>
    51. 51. Organiser Son Texte – mettre en forme <ul><li>Exemple : </li></ul><ul><li><?xml version=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot;?> </li></ul><ul><li><!DOCTYPE html </li></ul><ul><li>PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; </li></ul><ul><li>&quot;http://www.w3.org/TR/XHTML1/DTD/XHTML1-transitional.dtd&quot;> </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title> Notre première page </title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1> Titre de la page</ h1> </li></ul><ul><li><h2> Titre du paragraphe 1</ h2> </li></ul><ul><li><p> </li></ul><ul><ul><li> <em> Texte du paragraphe 1 Texte du paragraphe 1 </em> </li></ul></ul><ul><ul><li></p> </li></ul></ul>
    52. 52. Organiser Son Texte – mettre en forme <ul><li>Exemple (suite) : </li></ul><ul><li><p> </li></ul><ul><ul><li> <strong> Texte du paragraphe 1 Texte du paragraphe 1 </strong > </li></ul></ul><ul><ul><li></p> </li></ul></ul><ul><li><p> </li></ul><ul><ul><li> Bonjour M<sup>me</sup> </li></ul></ul><ul><ul><li></p> </li></ul></ul><ul><li><p> </li></ul><ul><ul><li> x <sub> n </sub> = x <sub> n - 1 </sub> - 2x <sub> n-2 </sub> </li></ul></ul><ul><ul><li></p> </li></ul></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
    53. 53. Organiser Son Texte – Liens <ul><li>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). </li></ul><ul><li>Un lien sera représenté dans le code par la balise <a>. </li></ul><ul><li>L'adresse de destination doit se trouver dans l'attribut href. </li></ul><ul><li><a href=&quot;chemin/du/fichier/destination.html&quot;>Texte du lien</a>. </li></ul><ul><li>Il faut indiquer le chemin pour accéder à la page de destination. </li></ul>
    54. 54. Organiser Son Texte – Liens <ul><li>Si les 2 pages sont sur le même répertoire, on indique juste le nom de la page. </li></ul><ul><li><a href=&quot;destination.html&quot;>Texte du lien</a>. </li></ul><ul><li>Si la page de destination se trouve par exemple dans un sous dossier. </li></ul><ul><li><a href=&quot;sous_dossier/destination.html&quot;>Texte du lien</a>. </li></ul><ul><li>Lien vers un site externe, on indique l’url complet du site. </li></ul><ul><li><a href=&quot; http://www.google.sn &quot;>lien vers google</a>. </li></ul>
    55. 55. Organiser Son Texte – Liens <ul><li>L’attribut target permet de spécifier la manière dont la page de destination va s’ouvrir. </li></ul><ul><li>_ self : remplace la page courante par la nouvelle page. </li></ul><ul><li>_blank : affiche la page de destination dans une nouvelle page. </li></ul><ul><li><a href=&quot;http://www.google.sn&quot; target='_blank'>lien vers google</a>. </li></ul><ul><li><a href=&quot;http://www.google.sn&quot; target='_self'>lien vers google</a>. </li></ul>
    56. 56. Organiser Son Texte – Liens <ul><li>L’attribut title affiche une bulle d’aide lorsque vous pointerez la souris sur le lien. </li></ul><ul><li><a href=&quot;http://www.google.sn&quot; target='_blank' title='lien vers google sur une nouvelle page' >lien vers google</a>. </li></ul><ul><li><a href=&quot;http://www.google.sn&quot; target='_self ' title='lien vers google sur la même page' >lien vers google</a>. </li></ul>
    57. 57. Organiser Son Texte – Liens <ul><li>Il est possible d’utiliser les liens pour envoyer un email. </li></ul><ul><li><a href=&quot;mailto:adressemail&quot;>Ecrivez-moi</a> </li></ul>
    58. 58. Organiser Son Texte – Liens <ul><li>Les ancres permettent de naviguer à l'intérieur d'une même page. </li></ul><ul><li>Pour faire une ancre, il faut utiliser le signe dièse (#) suivi d'un mot-clef. </li></ul><ul><li><a href=&quot;#motClef&quot;>Texte de mon ancre</a> </li></ul><ul><li>[...] </li></ul><ul><li><h2 id=&quot;motClef&quot;>Texte vers lequel l'ancre est renvoyée</h2> </li></ul>
    59. 59. Organiser Son Texte – Images <ul><li>Pour afficher une image, on utilise la balise <img>. </li></ul><ul><li>L'attribut src permet de renseigner le chemin de l'image, </li></ul><ul><li><img src=&quot;adresse/de/l/image&quot;  > </li></ul>
    60. 60. Organiser Son Texte – caractères spéciaux <ul><li>Exemple : </li></ul><ul><li><?xml version=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot;?> </li></ul><ul><li><!DOCTYPE html </li></ul><ul><li>PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; </li></ul><ul><li>&quot;http://www.w3.org/TR/XHTML1/DTD/XHTML1-transitional.dtd&quot;> </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title> Notre première page </title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1> Titre de la page</ h1> </li></ul><ul><li><p> </li></ul><ul><ul><li> <img src=&quot; image1.gif&quot; > </li></ul></ul><ul><ul><li></p> </li></ul></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>

    ×