Login


A voir

Un problème avec un appareil électroménager ?
Vous cherchez un renseignement ?
Trouvez une réponse sur www.tout-electromenager.fr

Cours

Vous êtes ici : Matières (informatique) > Thèmes (Créer un site web statique) > Cours (Partie 2 : La sémantique avec XHTML)

Cette création est mise à disposition sous un contrat Creative Commons Creative Commons License .

Auteur : E.RAVRAT

Dernière mise à jour : lundi 08 Septembre 2008 à 16:17:10

Créer sa page web 
partie 2 : La sémantique avec XHTML

Lorsqu'un auteur écrit un article, un livre,... l'auteur ne se contente pas d'aligner des mots les uns à la suite des autres. Il crée des paragraphes, des listes, des tableaux,... afin de donner plus de sens au contenu créé et ainsi faciliter sa compréhension.

L'objectif de cette partie est de vous permettre de faire la même chose. Vous allez apprendre à créer un contenu pour votre page web qui a un sens. Ce sens, cette sémantique s'exprime grâce à l'utilisation de balises prévues à cet effet.

Cette partie concerne un chapitre composé de 3 parties :

Table des matières

Introduction

Nous avons vu dans la première partie de ce chapitre la structure de base commune à toutes les pages HTML.
Je vous la rappelle :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title>ma première page web !!!</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
   
    <body>
    </body>
</html>

Mais comme vous aviez pu le constater, la page n'affiche absolument rien !

Mais pourquoi ne s'affiche-t-il rien à l'écran avec ce code (réponse à la question dans la partie 1)? afficher/masquer la réponse

Les éléments qui doivent s'afficher à l'écran doivent être placés entre les balises <body></body>. Or, dans notre code, elles ne contiennent rien !

Cette partie 2 du chapitre va vous apprendre à créer une page web avec un contenu. Le terme contenu est très important car une page web sans contenu n'a aucun intérêt. Un contenu n'a d'intérêt que s'il a un sens. Le texte que vous souhaitez afficher au visiteur doit être significatif. Il faut un contenu SEMANTIQUE !

Le terme sémantique relève de la signification et notamment de la signification des mots en contexte. C'est ce contexte qu'il faut  exprimer à l'aide de balises HTML. Si vous souhaitez écrire quelque chose dans un paragraphe, vous ne le ferez pas dans un tableau ! Et bien c'est cette logique qu'il faut développer pour avoir une bonne sémantique.

C'est une fois seulement après avoir écrit la totalité de votre page en ayant soigné la sémantique que vous pourrez passer à la mise en forme. Effectivement, votre page doit être compréhensible sans aucune mise en forme particulière, seulement grâce à vos balises HTML, sinon, c'est que la sémantique n'est pas bonne.

Il existe de nombreuses balises HTLM mais l'objectif de cette partie est de vous présenter les plus utilisées, celles que l'on retrouve systématiquement dans toutes les pages web. Cela dit, ces balises suffisent pour couvrir 90 % des besoins !

La composition d'un document classique contient généralement les éléments suivants :

  • un titre et des sous titres
  • des paragraphes
  • des liens
  • des listes
  • des tableaux
  • des images

C'est d'ailleurs le cas de ce cours ! Vous pouvez donc constater que l'on peut déjà faire pas mal de choses.

Attention : je considère que vous avez votre page avec la structure de code rappelée précédemment. Les éléments de code nouveaux abordés dans la suite de cette partie doivent être systématiquement placés entre les balises <body></body> comme ceci :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title>ma première page web !!!</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
   
    <body>
   
      placez ici toutes les balises HTML faisant l'objet d'une explication dans la suite de cette partie de cours
     
    </body>
</html>

Remarque : Avant de poursuivre, vérifiez l'encodage de votre fichier contenant votre code. Il doit être encodé en UTF-8. Avec pspad, dans le menu, cliquez sur Format puis sur UTF-8.

Haut de page

Les titres

Les titres sont fondamentaux pour indiquer le contenu d'un document ou d'une partie d'un document.
Concernant le cours que vous êtes en train de lire, le titre "Créer sa page web, partie 2 : la sémantique avec XHTML" informe d'emblée le lecteur sur le contenu de la page.
Ensuite, il y a des sous titres (ex : "Les titres") qui permettent de segmenter le contenu de la page par "idées" abordées. Il s'agit bien là de faire de la sémantique. On donne du sens à sa page en la structurant.

Il existe plusieurs niveaux de titres. Effectivement,  un titre peut contenir des sous titres qui peuvent à leur tour contenir des sous titres et ainsi de suite. Il est alors logique de les distinguer. HTML a prévu ce cas avec la balise suivante :


<h1>Ceci est mon titre utilisant la balise h1</h1>
 

Quelle est l'utilité de la balise "</h1>" ? afficher/masquer la réponse 

La balise </h1> indique la fin du titre.

Ecrivez la ligne de code précédente et visualisez le résultat dans votre navigateur après avoir enregistré les modifications.
Je vous rappelle qu'il faut cliquer sur le fichier que vous avez  créé comme vous le feriez avec un fichier word. De plus, une erreur très courante au début est de ne pas enregistrer les modifications effectuées. Adopter par conséquent le réflexe de sauvegarder votre travail très régulièrement et avant chaque affichage de la page.
Utilisez l'icône suivant sur pspad : icône enregistrer

J'espère que vous obtenez ce résultat : afficher/masquer la réponse

photo écran du résultat de la balise h1

Maintenant, vous allez ajouter le code suivant (toujours entre les balises <body>)

<h1>Ceci est un titre de niveau 1</h1>
<h2>Ceci est un titre de niveau 2</h2>
<h3>Ceci est un titre de niveau 3</h3>
<h4>Ceci est un titre de niveau 4</h4>
<h5>Ceci est un titre de niveau 5</h5>
<h6>Ceci est un titre de niveau 6</h6>

Enregistrez les modifications.

Pour visualiser les modifications effectuées, il n'est pas nécessaire de fermer le fichier puis de l'ouvrir à nouveau avec votre navigateur. Il suffit de cliquer sur l'icone actualiser qui permet de mettre la page affichée à jour.
Généralement, ce bouton représente une flêche qui tourne  :
bouton actualiser sous firefox sur firefox, bouton actualisé sur ie avec internet explorer

Vous devriez obtenir cela : afficher/masquer la réponse

Les six niveaux de titre HTML

D'après vous, quelle est l'utilité d'indiquer 1, 2, ... 6 à dans la balise <h> ? afficher/masquer la réponse

Le chiffre inque le niveau du titre. Cela permet de comprendre qu'un titre de niveau 3 par exemple est un sous titre du titre de niveau 2. Que le titre de niveau 2 est le sous titre du titre de niveau 1.

Les niveaux de titres sont-ils représentés de façon identique ? Pourquoi selon vous ? afficher/masquer la réponse

Non. Cette représentation (du plus gros au plus petit) permet de différencier les niveaux de titres de façon visuelle.

Remarque 1 : Les balises <h1></h1> ne peuvent contenir aucune balise de type "bloc".

Remarque 2 à ranger quelque part dans un endroit de son cerveau pour une utilisation ultérieure : Les balises <h_></h_> sont des balises de type "bloc".

Vous savez désormais structurer votre page avec des titres et des sous titres.

Il s'agit maintenant  de donner un peu de contenu à la page. Pour cela, nous allons écrire des paragraphes.

Haut de page

Les paragraphes

Ecrire le contenu d'une page web revient finalement au même travail que d'écrire un exposé ou un document quelconque sur papier ou traitement de texte. Après avoir donné un titre à votre document ou à votre partie, vous écrivez un paragraphe.

En HTML, la balise qui permet d'écrire un paragraphe est la suivante :

<p>Ceci est mon premier paragraphe et il se situe entre la balise HTML p</p>

Comme toujours, il y a une balise qui indique le début du paragraphe (<p>) et une autre qui indique la fin du paragraphe (</p>).

Recopiez le code ci-dessous (toujours entre les balises <body></body>) et affichez le résultat sur votre navigateur (pensez à enregistrer les modifications et à actualiser votre page web).

<h1>J'apprends à utiliser des balises  HTML</h1>
     <p>Voici mon tout premier paragraphe</p>

Voici le résultat : afficher/masquer la réponse

photo ecran du résultat de la balise p

Maintenant, rentrez le code suivant (enregistrez les modifications, actualisez votre page) :

<h1>J'apprends à utiliser des balises  HTML</h1>
     <p>Voici mon tout premier paragraphe</p><p>Voici un second paragraphe</p>

Les deux paragraphes sont-ils affichés sur la même ligne ? afficher/masquer la réponse

Non. Comme dans un livre, un rapport, etc, les paragraphes se positionnent toujours les uns sous les autres. Ce sont donc bien les balises qui donnent l'indication au navigateur.

Essayez le code suivant en faisant une dizaine de saut de lignes entre les deux paragraphes (à l'aide de la touche entrée) :

<h1>J'apprends à utiliser des balises  HTML</h1>
     <p>Voici mon tout premier paragraphe</p>
     
     
     
     
     <p>Voici un second paragraphe</p>

Les deux paragraphes sont-ils espacés ? afficher/masquer la réponse

Non, ils sont toujours situés l'un sous l'autre comme on peut le voir sur l'image ci-après. Les sauts de lignes créés dans le code source n'ont pas eu d'influence sur l'affichage
photo écran de l'absence de saut de ligne entre les paragraphes

Que pouvez-vous conclure des deux dernières constatations ? afficher/masquer la réponse

La mise en page du code source n'a aucune influence sur la mise en page du contenu affiché. Celle-ci doit se faire à l'aide de balises qui indiquent au navigateur comment afficher les données.

Insérez de nombreux espaces entre les mots du premier paragraphe comme ceci :

<h1>J'apprends à utiliser des balises  HTML</h1>
     <p>Voici      mon       tout      premier       paragraphe</p>
     
     
     
     <p>Voici un second paragraphe</p>

Que constatez vous ? afficher/masquer la réponse

Il n'y a aucun changement comme on peut le voir. Les mots sont toujours séparés par un seul espace.
photo écran de l'absence de saut de ligne entre les paragraphes

Poursuivons notre observation en insérant quelques sauts de ligne à l'aide de la touche entrée au milieu du premier paragraphe :

<h1>J'apprends à utiliser des balises  HTML</h1>
     <p>Voici mon tout premier
     
     
        paragraphe</p>
           
     
      <p>Voici un second paragraphe</p>

 

Que constatez vous ? afficher/masquer la réponse

L'affichage n'est toujours pas influencé.

Que peut-on conclure des observations précédentes ? afficher/masquer la réponse

Les sauts de lignes dans le code source ne génèrent aucun saut de ligne à l'affichage.
Concernant les espaces, le navigateur ne prend en compte qu'un seul espace entre les mots même s'il y en a plusieurs.
La mise en page doit être faite à partir de balises HTML. (pour la mise en forme, voir la troisième partie composant ce chapitre)

Puisque nous venons de conclure que le saut de ligne devait se faire avec une balise, nous allons voir comment procéder.
C'est en fait très simple, il faut utiliser la balise <br /> là où vous souhaitez faire un saut de ligne.

<h1>J'apprends à utiliser des balises  HTML</h1>
     <p>Voici mon tout premier <br />paragraphe</p>
     
     
     
     
     <p>Voici un second paragraphe</p>

Remarque : la balise de saut de ligne n'encadre aucun texte puisqu'elle génère un saut de ligne. Il n'y a donc pas de balise fermante. On dit que c'est une balise orpheline. Au moment où vous ouvrez la balise, il faut la fermer également. C'est pour cela que le slash est à apposer après le br.

Procédez à la modification de votre code et observez le résultat obtenu : afficher/masquer la réponse

Voici le résultat à l'écran :
photo écran montrant un saut de ligne avec la balise br

Important : La balise <br  /> doit toujours être placée à l'intérieur d'autres balises (balise de paragraphe, d'item de liste, de cellule de tableau)

<p> bla bla bla bla bla bla bla bla bla bla bla</p>
<br />    <!-- ceci n'est pas valide car la balise br n'est pas encadrée par une balise ouvrante et fermante. -->
<p>bli bli bli bli bli bli bli bli</p>
 
<p> blo blo blo blo blo <br /> blo blo blo</p> <!-- ceci est valide -->
<!-- cet exemple n'est là que pour illustrer le fait que la balise br doit toujours figurer à l'intérieur d'autres balises. Les balises ul et li sont présentées plus loin dans ce cours -->
<ul>
     <li>blo blo blo blo blo <br /> blo blo blo</li> <!-- ceci est valide -->
</ul>
<!-- cet exemple n'est là que pour illustrer le fait que la balise br doit toujours figurer à l'intérieur d'autres balises. Il est expliqué plus loin dans cette partie -->
<table>
    <tr>
           <th>blou blou blou <br />blou blou </th> <!-- ceci est valide -->
    </tr>
    <tr>
           <td> bli bli bli <br />bli bli bli </td> <!-- ceci est valide -->
    </tr>
</table>

Remarque à ranger quelque part dans un endroit de son cerveau pour une utilisation ultérieure : Les balises <p></p> sont des balises de type "bloc". Elle peuvent par conséquent contenir des balises de type "en ligne".

Haut de page

Les liens

Dans l'acronyme XHTML qui signifie "The Extensible HyperText Markup Language", on retrouve le terme HyperText. Le but de ce langage est de pouvoir lier des pages entre elles. Cela est possible grâce aux liens hypertextes.

Un lien hypertexte se crée avec la balise HTML <a>. Cette balise doit encadrer le texte qui va servir de lien cliquable.

<a>texte qui sert de lien</a>

Important : La balise <a> encadre un élément de texte qui se trouve dans un paragraphe. C'est le cas le plus fréquent. C'est comme en littérature, un livre n'est composé que de titres et de paragraphes. Il en est de même avec une page web.

Pour placer votre lien dans votre texte, vous devez avoir le code suivant :

<h1>J'apprends à utiliser des balises  HTML</h1>
     <p>Voici mon tout premier paragraphe qui contient un lien vers un super <a>site d'électroménager</a></p>
     
     
     <p>Voici un second paragraphe</p>

Affichez le résultat de la modification dans votre navigateur (pensez à enregistrer les modifications et à actualiser votre page web)

Vous devriez obtenir le résultat suivant : afficher/masquer la réponse

Le texte s'affiche comme s'il s'agissait d'un paragraphe contenant du texte sans aucune autre balise particulière.
photo écran d'un lien hypertexte sans attribut

Avec le code précédent, vous pouvez constatez que la balise <a> figure elle même dans la balise <p>. Elle doit TOUJOURS figurer dans une autre paire de balises (paragraphe, cellules de tableau, item de liste, titre) de type bloc (ah vous voyez, je vous avait dit qu'il fallait mettre cette info dans un recoin de son cerveau, et je le redis encore !)

Très important : lorsque vous avez une balise qui contient d'autres balises, il faut veiller à fermer  en premier la dernière balise ouverte.
Dans notre exemple, la balise <a> est la dernière balise ouverte, ce sera donc la première fermée, d'où cette suite de balise :

<p> <a> </a> </p> <!-- ceci est correct -->
<p> <a> </p> </a> <!-- ceci est incorrect et n'est pas valide -->

En réalité, il manque un attribut d'importance à la balise <a>. Dans la partie 1 de ce cours, je vous avais déjà parlé une fois des attributs.
Je vous rappelle donc que les balises HTML peuvent contenir des attributs auxquels on affecte une valeur. Ces valeurs doivent toujours être encadrées de double quotes (touche 3 du pavé alphanumérique)
Exemple :

<nomBalise  attribut1="valeurDeL'attribut" attribut2="valeurDeL'attribut" attribut3... >contenu de la balise</nomBalise>

Concernant notre lien, il manque un attribut qui a pour valeur l'adresse de la page HTML où doit mener le lien. Cette attribut est l'attribut href.
Rentrez le code suivant :

<h1>J'apprends à utiliser des balises  HTML</h1>
      <p>Voici mon tout premier paragraphe qui contient un lien vers un <a href="http://www.tout-electromenager.fr">super site d'électroménager</a></p>

      <p>Voici un second paragraphe</p>
 

Affichez le résultat dans votre navigateur. Observez le résultat visuel. Testez le lien en cliquant dessus.

Que constatez vous ? afficher/masquer la réponse

Le lien est mis en valeur par la couleur bleue et un soulignement. De plus il permet bien d'atteindre le site www.tout-electromenager.fr
photo écran d'un lien avec l'attribut href

La balise HTML <a> peut contenir un second attribut qui ajoute un peu plus de sémantique, il s'agit de l'attribut title. Vous allez ajouter l'attribut title avec la valeur "cliquez ici pour aller sur le site en question" comme cela :

<h1>J'apprends à utiliser des balises  HTML</h1>
      <p>Voici mon tout premier paragraphe qui contient un lien vers un <a href="http://www.tout-electromenager.fr" title="cliquez ici pour aller sur le site en question">super site d'électroménager</a></p>
     
      <p>Voici un second paragraphe</p>

Affichez la page modifiée et survolez le lien sans cliquer dessus.

Que constatez-vous ? afficher/masquer la réponse

Une infobulle s'affiche au survol du lien
photo écran d'une infobulle générée par l'attribut title

A l'issue de cette troisième sous partie, vous détenez enfin les clés pour rédiger le contenu d'une page web de base (sans mise en forme ni besoin particulier).

Quelques autres balises sont souvent utilisées mais un peu moins que les balises <h_>, <p> et <a>. Ce sont les listes et les tableaux.

Remarque à ranger quelque part dans un endroit de son cerveau pour une utilisation ultérieure : Les balises <a></a> sont des balises de type "en ligne". Par conséquent elles doivent obligatoirement être encadrée par des balises de type "bloc".

Haut de page

Les listes

Tout d'abord, pour que les choses soient claires, voici un exemple de liste :

  • premier élément de liste
  • deuxième élément de liste
  • troisième élément de liste

Bon nombre de développeurs font l'erreur de ne pas utiliser une liste pour inscrire une suite de mots les uns sous les autres et se rattachant au même objet.
L'erreur courante est de faire trois paragraphes comme il est montré ici :

<h1>J'apprends à utiliser des balises  HTML</h1>
<p>Le site <a href="http://www.tout-electromenager.fr" title="cliquez sur le lien pour accéder au site">www.electromenager.fr</a> est super parce que :</p>
<p>- il contient de nombreuses informations utiles à tout le monde</p>
<p>- il est totalement gratuit</p>
<p>- il contient un forum d'aide bien utile en cas de panne</p>
<p>- il contient des tutoriaux expliquant comment dépanner son appareil en panne</p>

On pourrait se satisfaire du résultat puisque l'affichage obtenu donne l'impression qu'il s'agit effectivement d'une liste de caractéristiques décrivant le site en question :
fausse liste créée avec des balises p

Mais l'aspect sémantique n'est plus respecté ! Un paragraphe contient une idée. Ici il y a quatres paragraphes, on peut s'attendre à 4 idées différentes, alors qu'en réalité, il s'agit de décrire un seul et même objet.

Dans le respect de la structure de la page et de sa sémantique, il faut utiliser les balises HTML adéquates.

Il existe 3 types de liste selon ce que l'on souhaite exprimer :

  • les listes non ordonnées (les plus courantes)
  • les listes ordonnées
  • les listes de définition

Haut de page

Les listes non ordonnées

Une liste non ordonnée est une liste qui contient une suite de mots ou de phrases à énumérer sans qu'il y ait lieu de se soucier de l'ordre de cette énumération.

En reprenant l'exemple précédent, voici le code d'une liste non ordonnée :

<h1>J'apprends à utiliser des balises  HTML</h1>
<p>Le site <a href="http://www.tout-electromenager.fr" title="cliquez sur le lien pour accéder au site">www.electromenager.fr</a> est super parce que :</p>

<ul>



</ul>

Une liste non ordonnée est marquée par la balise <ul></ul>. De plus, une liste ne peut pas être placée à l'intérieur d'une balise <p>.
Comme d'habitude, la fin de la liste doit être indiquée à l'aide d'un antislash précédant le nom de la balise qui a été ouverte.

<p> <ul> </ul> </p> <!-- ceci n'est pas correcte et est non valide -->
<p> </p> <ul> </ul> <!-- ceci est correcte et valide -->

Une fois la liste créée, il faut ajouter les éléments de la liste que l'on appelle également des items.

<h1>J'apprends à utiliser des balises  HTML</h1>
<p>Le site <a href="http://www.tout-electromenager.fr" title="cliquez sur le lien pour accéder au site">www.electromenager.fr</a> est super parce que :</p>
<ul>
     <li>il contient de nombreuses informations utiles à tout le monde</li>
     <li>il est totalement gratuit</li>
     <li>il contient un forum d'aide bien utile en cas de panne</li>
     <li>il contient des tutoriaux expliquant comment dépanner son appareil en panne</li>
</ul>

Chaque item (élément de liste) est encadré par la balise <li> </li>.

Là encore, vous pouvez constater que la dernière balise ouverte est la première fermée. Ainsi, la dernière balise fermée est la balise <ul> puisqu'elle a été la première ouverte.

Entrez le code et visualisez le résultat. afficher/masquer la réponse

La sémantique est ainsi respectée. Nous avons bien 4 caractéristiques qui décrivent un même objet, ici le site d'électroménager :photo écran d'une liste non ordonnée

Haut de page

Les listes ordonnées

Ce type de liste est utile lorsque les éléments à énumérer doivent respecter un ordre.
Si l'on reprend l'exemple de la structure de ce chapitre.
Il est composé de trois parties :

  • la création de la structure de la page HTML
  • la création du contenu sans mise en forme
  • la mise en forme

Ces trois parties ne sont pas à suivre dans le désordre. Dans ce cas, il convient de préférer une liste ordonnée  pour indiquer au lecteur que les éléments énumérés le sont dans un ordre précis.
L'objectif est d'arriver à se résultat :

  1. la création de la structure de la page HTML
  2. la création du contenu sans mise en forme
  3. la mise en forme

Les traditionnelles puces sont remplacées par des chiffres qui indiquent un ordre.

Une liste ordonnée se crée à l'aide de la balise <ol> :

<h1>J'apprends à utiliser des balises  HTML</h1>
<p>Il y a trois étapes à respecter pour apprendre plus facilement à créer une page HTML</p>

<ol>


</ol>

Comme d'habitude, la fin de la liste doit être indiquée à l'aide d'un antislash précédant le nom de la balise qui a été ouverte.
Une liste ordonnée ne figure jamais dans un paragraphe tout comme les listes non ordonnées.

Ensuite il faut ajouter les items (éléments à énumérer) dans l'ordre qui convient :

<h1>J'apprends à utiliser des balises  HTML</h1>
<p>Il y a trois étapes à respecter pour apprendre plus facilement à créer une page HTML</p>

<ol>
    <li>la création de la structure de la page HTML</li>
    <li>la création du contenu sans mise en forme</li>
    <li>la mise en forme</li>
</ol>

Chaque item est encadré par la balise <li>.

Effectuez les modifications et visualisez le résultat. afficher/masquer la réponse

L'affichage des chiffres est automatique. Le navigateur comprend grâce à la balise <ol> qu'il s'agit d'une liste ordonnée :
photo écran d'une liste ordonnée

Haut de page

Les listes de définition

Ces listes sont peu utilisées mais répondent à un besoin très précis.

Elles permettent de faire une liste de mots avec pour chacun leur définition. L'objectif est d'arriver à ce résultat :
Premier terme
       Première définition
Second terme
      Seconde définition

Une liste de définition se crée à l'aide de la balise <dl> :

<h1>J'apprends à utiliser des balises  HTML</h1>
<p>Ma liste de définitions</p>

<dl>


</dl>

Comme d'habitude, la fin de la liste doit être indiquée à l'aide d'un antislash précédant le nom de la balise qui a été ouverte.
Une liste ordonnée ne figure jamais dans un paragraphe tout comme les listes non ordonnées et ordonnées.

Ensuite chaque terme à définir doit être introduit par la balise <dt>

<h1>J'apprends à utiliser des balises  HTML</h1>
<p>Ma liste de définitions</p>

<dl>
    <dt>premier terme à définir</dt>
    <dt>second terme à définir</dt>
</dl>

Une fois de plus, vous pouvez  constater que la dernière balise ouverte est la première fermée.

Enfin il ne reste plus qu'a placer les définitions de chaque terme avec la balise <dd>:

<h1>J'apprends à utiliser des balises  HTML</h1>
<p>Ma liste de définitions</p>

<dl>
      <dt>premier terme à définir</dt>
            <dd>Définition du premier terme ici</dd>
      <dt>second terme à définir</dt>
            <dd>Définition du second terme ici</dd>
</dl>

Pour résumer, afin de créer une liste de définitions il faut :

  1. Créer la liste avec la balise <dl> en l'ouvrant et en la fermant
  2. ajouter le terme à définir à l'aide du couple <dt></dt>
  3. ajouter la définition du terme avec le couple <dd></dd>
  4. ajouter le terme suivante à l'aide du couple <dt></dt>
  5. ajouter la définition du second terme à l'aide du couple <dd></dd>
  6. et ainsi de suite.

Attention, il faut veiller à l'ordre des balises :

<dl> <!-- début de liste de définitions -->
    <dt> </dt> <!-- terme à définir -->
    <dd> </dd> <!-- définition du terme -->
</dl> <!-- fin de la liste de définitions -->

Remarque à ranger quelque part dans un endroit de son cerveau pour une utilisation ultérieure : Les balises de liste sont des balises de type "bloc". Elles peuvent par conséquent contenir des balises de type "en ligne".

Haut de page

Les tableaux

Les bonnes et mauvaises habitudes

Là encore, tout comme les listes, des mauvaises habitudes ont été prises par  les créateurs de sites web.

Toujours dans l'esprit du respect de la sémantique, il ne faut utiliser un tableau que pour représenter des données tabulaires ! C'est-à-dire que des entêtes de colonnes et/ou de lignes permettent de regrouper plusieurs données s'y rattachant.

Souvent les tableaux HTML sont utilisés à des fins de mises en forme ce qui fausse la sémantique de la page. De plus, cela cache une mauvaise maîtrise de la mise en forme des éléments de la page.

Un exemple classique de mauvaise utilisation d'un tableau est l'affichage de texte en colonnes.
Il est effectivement  attrayant d'opter pour l'utilsation d'un tableau pour obtenir ce résultat :

Lorem ipsum dolor sit amet consectetuer interdum condimentum.
Sapien sem fermentum condimentum consequat Nulla consectetuer eu In.
Et ligula Nam a lobortis metus pretium felis nec velit Vestibulum. Parturient Suspendisse Nam ipsum dictumst elit.

Morbi convallis non dapibus sed ipsum Donec mattis Maecenas Vivamus pellentesque. Tempus tortor dictum ut pellentesque hac tellus convallis Pellentesque diam id. Velit.

 Lorem ipsum dolor sit amet consectetuer interdum condimentum.

Sapien sem fermentum condimentum consequat Nulla consectetuer eu In.
Et ligula Nam a lobortis metus pretium felis nec velit Vestibulum. Parturient Suspendisse Nam ipsum dictumst elit.
Morbi convallis non dapibus sed ipsum Donec mattis Maecenas Vivamus pellentesque. Tempus tortor dictum ut pellentesque hac tellus convallis Pellentesque diam id. Velit.

 Lorem ipsum dolor sit amet consectetuer interdum condimentum.
Sapien sem fermentum condimentum consequat Nulla consectetuer eu In.
Et ligula Nam a lobortis metus pretium felis nec velit Vestibulum. Parturient Suspendisse Nam ipsum dictumst elit.
Morbi convallis non dapibus sed ipsum Donec mattis Maecenas Vivamus pellentesque. Tempus tortor dictum ut pellentesque hac tellus convallis Pellentesque diam id. Velit.

Le tableau n'a ici qu'une seule et unique utilité : la mise en forme. Or un tableau ne sert pas à cela. Il doit donner un sens aux données qu'il contient. Il est d'ailleurs très souvent utilisé pour exprimer des données statistiques. Pour un entête de colonne donné ou une ligne donnée, il regroupe plusieurs données se rattachant à cet entête.

Exemple de tableau utilisé à bon escient :


 2006
Pays Population
(en millions) 		Densité moyenne
(en hab./km2)		 Population urbaine
(en %)
Europe 734,9 32 75
Allemagne 82,4 231 88
Autriche 8,3 99 54
Belgique 10,5 344 97

Haut de page

Créer un tableau HTML

Indiquez au navigateur à l'aide de la balise <table> qu'il doit créer un tableau :

<h1>J'apprends à utiliser des balises  HTML</h1>

<p>Mon premier tableau</p>
<table> <!-- cette balise marque le début du tableau -->


</table> <!-- cette balise marque la fin du tableau -->

Il ne faut pas oublier de fermer la balise <table> avec le slash pour indiquer au navigateur qu'il s'agit de la fin du tableau.

Enregistrez les lignes de codes précédentes et visualisez le résultat à l'aide de votre navigateur. Que constatez-vous ? afficher/masquer la réponse

Mis à part le titre de niveau 1 et le paragraphe, il ne s'affiche rien ! Cela est tout à fait normal.

Nous allons maintenant ajouter une ligne au tableau.
Pour ajouter une ligne au tableau, il faut utiliser la balise <tr> comme ceci :

<h1>J'apprends à utiliser des balises  HTML</h1>

<p>Mon premier tableau</p>
<table>
      <tr> <!-- cette balise marque le début d'une nouvelle ligne dans le tableau -->
      </tr> <!--cette balise marque la fin de la nouvelle ligne -->
</table>

Enregistrez les lignes de codes précédentes et visualisez le résultat à l'aide de votre navigateur. Que constatez-vous ? afficher/masquer la réponse

Mis à part le titre de niveau 1 et le paragraphe, il ne s'affiche toujours rien ! Cela est normal.

Ce qu'il manque à notre tableau ce sont  des cellules, c'est-à-dire une ligne divisée en colonnes.
Pour créer des cellules dans une ligne, la balise <td> remplit ce rôle :

<h1>J'apprends à utiliser des balises  HTML</h1>

<p>Mon premier tableau</p>
<table>
      <tr>
            <td>contenu de ma cellule 1</td>    <!-- première cellule -->
            <td>contenu de ma cellule 2</td>    <!-- deuxième cellule -->
            <td>contenu de ma cellule 3</td>    <!-- troisème cellule -->
      </tr>
</table>

Procédez à la mise à jour de votre code source et visualisez le résultat. afficher/masquer la réponse

Nous avons maintenant un tableau avec nos trois cellules (on ne voit pas les traits séparant les cellules, ceci est normal et est réservé pour la partie 3 de ce chapitre) :
photo écran d'un tableau HTML avec une ligne et 3 cellules

Ajoutez une ligne de trois cellules au tableau. afficher/masquer la réponse

Il suffit d'ajouter une nouvelle ligne avec la balise <tr> juste après la fin de la ligne précédente marquée par la balise </tr> Ensuite, il faut ajouter les cellules avec la balise <td> (sans oublier de la fermer).
<h1>J'apprends à utiliser des balises  HTML</h1>
<p>Mon premier tableau</p>

<table>
     <tr>
          <td>contenu de ma cellule 1</td>    <!-- première cellule -->
          <td>contenu de ma cellule 2</td>    <!-- deuxième cellule -->
          <td>contenu de ma cellule 3</td>    <!-- troisème cellule -->
     </tr>
<tr>
          <td>contenu de ma cellule 2.1</td>    <!-- première cellule -->
          <td>contenu de ma cellule 2.2</td>    <!-- deuxième cellule -->
          <td>contenu de ma cellule 2.3</td>    <!-- troisème cellule -->
     </tr>     
</table>

Haut de page

Le cas particuler des cellules fusionnées

Lorsque l'on surfe sur le net, on voit souvent ce cas de figure :

Tableau numéro 1
cellule 1 cellule 2 et  cellule 3 fusionnées
cellule 4 cellule 5 cellule 6

ou encore celui là :

Tableau numéro 2
cellule 1 cellule 2
cellule 3
cellule 5
fusionnées		 cellule 4
cellule 6

Pour aboutir à ces résultat, vous allez devoir fusionner les cellules.
Dans le premier cas, il faut fusionner deux cellules situant l'une à coté de l'autre, dans le deuxième cas, il faut fusionner une cellule avec celle du dessous.

Voici la technique à adopter dans le premier cas :

Créez d'abord votre tableau numéro 1 sans vous soucier des cellules fusionnées. Vous faites comme si elles ne l'étaient pas. afficher/masquer la réponse

Voici le code source correspondant au tableau 1 (là encore on ne voit aucune bordure):
 <table>
    <tr>
      <td>cellule 1</td>
      <td>cellule 2</td>
      <td>cellule 3</td>
    </tr>
    <tr>
      <td>cellule 4</td>
      <td>cellule 5</td>
      <td>cellule 6</td>
    </tr>
</table>

Nous connaissons les deux cellules à fusionner (la 2 et la 3). Elles sont l'une à côté de l'autre. Il faut donc indiquer à la première cellule  à fusionner (la 2) le nombre de colonnes qu'elle doit couvrir avec l'attribut colspan. La valeur de cet attribut est le nombre de colonnes.

Dans notre cas, la cellule doit couvrir deux colonnes. Deux cellules doivent fusionner. Comme toute fusion, les éléments qui fusionnent disparaissent pour laisser la place à un seul nouvel élément. C'est le cas ici. Deux cellules fusionnent pour n'en devenir qu'une seule.

Voici mise en oeuvre l'utilisation de l'attribut colspan :

<h1>J'apprends à utiliser des balises  HTML</h1>

<p>Mon premier tableau</p>
<table>
      <tr>
          <td>cellule 1</td>
          <td colspan="2">cellule 2 et cellule 3</td> <!-- la cellule fait deux colonnes (cols) -->
      </tr>

      <tr>
            <td>contenu de ma cellule 4</td>
            <td>contenu de ma cellule 5</td>
            <td>contenu de ma cellule 6</td>
      </tr>
</table>

Avant fusion des cellules, il y avait trois cellules sur la première ligne. Le fait de préciser l'attribut colspan="2" indique au navigateur que la cellule fait deux colonnes. La cellule suivante n'a plus lieu d'être.

Testez la modification et affichez le résultat. afficher/masquer la réponse

Voici ce que vous devez obtenir   :
photo écran d'un tableau de cellules fusionnées sans bordure et voici le même tableau avec bordures (afin de mieux se rendre compte du résultat ):photo écran d'un tableau avec des cellules fusionnées

Voici maintenant la technique à adopter dans le deuxième cas :

Créez d'abord votre tableau numéro 2 sans vous soucier des cellules fusionnées. Vous faites comme si elles ne l'étaient pas. afficher/masquer la réponse

Voici le code source correspondant au tableau 2 (là encore on ne voit aucune bordure):
 <table>
    <tr>
      <td>cellule 1</td>
      <td>cellule 2</td>
    </tr>
    <tr>
      <td>cellule 3</td>
      <td>cellule 4</td>
    </tr>
    <tr>
      <td>cellule 5</td>
      <td>cellule 6</td>
    </tr>
</table>

Nous connaissons les deux cellules à fusionner (la 3 et la 6). Elles sont l'une au dessus de l'autre. Il faut donc indiquer à la première cellule  à fusionner (la 3) le nombre de lignes qu'elle doit couvrir avec l'attribut rowspan. La valeur de cet attribut est le nombre de lignes.

Dans notre cas, la cellule doit couvrir deux lignes. Deux cellules doivent fusionner. Comme toute fusion, les éléments qui fusionnent disparaissent pour laisser la place à un seul nouvel élément. C'est le cas ici. Deux cellules fusionnent pour n'en devenir qu'une seule comme c'était déjà le cas dans l'exemple précédent.

Voici mise en oeuvre l'utilisation de l'attribut rowspan:

<table>
      <tr>
            <td>cellule 1</td>
            <td>cellule 2</td>
      </tr>
      <tr>
            <td rowspan="2">cellule 3 et cellule 5</td>
            <td>cellule 4</td>
      </tr>
      <tr>
            <td>cellule 6</td>
      </tr>
</table>

Avant fusion des cellules, il y avait trois cellules dans la première colonne. Le fait de préciser l'attribut rowspan="2" indique au navigateur que la cellule qui reçoit cet attribut doit fait deux lignes. La cellule située au dessous n'a plus lieu d'être.

Testez la modification et affichez le résultat. afficher/masquer la réponse

Voici ce que vous devez obtenir   :
photo ecran d'un tableau HTML avec cellules fusionnées et voici le même tableau avec bordures (afin de mieux se rendre compte du résultat ):photo écran d'un tableau HTML avec cellules fusionnées

Haut de page

Attribuer un titre au tableau

Toujours dans le respect de la sémantique, il convient de donner un titre au tableau. Cela se fait très simplement à l'aide de la balise <caption>.

Attribuons un titre au dernier tableau créé. Le titre sera "mon tableau avec cellules fusionnées"

<table>
      <caption>mon tableau avec cellules fusionnées</caption>
      <tr>
            <td>cellule 1</td>
            <td>cellule 2</td>
      </tr>
      <tr>
            <td rowspan="2">cellule 3 et cellule 5</td>
            <td>cellule 4</td>
      </tr>
      <tr>
            <td>cellule 6</td>
      </tr>
</table>

Comme les autres balises HTML, la balise caption doit être fermée avec le slash (</caption>) pour indiquer au navigateur que le titre s'arrête à la balise.

La position par défaut du titre du tableau est variable selon le navigateur que vous utilisez.

Procédez à la mise à jour de votre code et vérifier le résultat obtenu. afficher/masquer la réponse

Voici ce que j'obtiens avec firefox : (j'ai ajouté une bordure pour une meilleure lisibilité, mais vous, vous n'avez aucune bordure)
photo écran d'un tableau HTML avec un titre

Haut de page

Affecter des entêtes de ligne et/ou de colonne au tableau

En principe un tableau à des entêtes de colonne et:ou des entêtes de ligne comme c'est le cas dans l'exemple suivant (les entêtes sont en gras) :
tableau HTML avec entêtes

Un entête est précisé avec la balise <th>. Cette balise permet de distinguer les données du tableaux qui illustrent l'entête des colonnes. Ainsi la sémantique est respectée.

Mise en oeuvre : Les cellules qui contiennent un entête voient leur balise <td> tout simplement remplacées par <th>. Ce n'est pas plus difficile que cela !

Créez le tableau ci-dessus pour vous entraîner et précisez les entêtes de ligne et de colonne. afficher/masquer la réponse

J'espère que vous avez cherché avant d'afficher la réponse !
<table>
    <tr>
      <th>ETAT </th> <!-- en tete de colonne -->
      <th>Superficie<br />en milliers<br />de km² </th> <!-- en tete de colonne -->
      <th>Densité<br />Hab./km²</th> <!-- en tete de colonne -->
     <th>Population<br />1995<br />en millions</th> <!-- en tete de colonne -->
      <th> Prévision<br />2025<br />en millions </th> <!-- en tete de colonne -->
      <th> Age<br />%<br />15ans/&gt;64ans </th> <!-- en tete de colonne -->
      <th> Espérance<br />de vie<br />(2 sexes) </th> <!-- en tete de colonne -->
    </tr>
    <tr>
      <th>Allemagne </th> <!-- en tete de ligne -->
      <td>349 </td>
      <td>234 </td>
      <td>81,7</td>
      <td>76,1 </td>
      <td>16/15</td>
      <td>76 </td>
    </tr>
    <tr>
      <th>Autriche </th> <!-- en tete de ligne -->
      <td>83 </td>
      <td>97,7</td>
      <td>8,1</td>
      <td>8,3</td>
      <td>18/15</td>
      <td>76</td>
    </tr>
    <tr>
      <th>Belgique</th> <!-- en tete de ligne -->
      <td>30 </td>
      <td>340</td>
      <td>10,2</td>
      <td>10,5</td>
      <td>18/16</td>
      <td>76</td>
    </tr>
</table>

Remarque à ranger quelque part dans un endroit de son cerveau pour une utilisation ultérieure : Les balises permettant de créer un tableau sont des balises de type "bloc". Elles peuvent par conséquent contenir des balises de type "en ligne"

Haut de page

Les images

Depuis le début de cette partie du chapitre, je ne porte de l'importance qu'à la sémantique donnée à la page. Vous pouvez donc vous demander pourquoi je traite le point des images dans cette partie et pas dans la troisième partie qui porte sur la mise en page (faire joli quoi !).

Et bien les images ont un rôle à jouer dans la sémantique. Il faut utiliser les images à partir du moment où elles apportent un plus à la compréhension du contenu de la page. C'est le cas pour ce cours. Les réponses sont souvent illustrées par des images afin de faciliter la compréhension des notions traitées.

A partir du moment  où dès lors que vous supprimez l'image, cela ne nuit pas à la compréhension, cela signigie que votre image n'apportait aucune sémantique. De surcroît, il est pertinent de s'interroger sur l'indispensabilité d'une image car les images d'une page représentent généralement 50 % du poids de la page. Plus une page est lourde et plus elle sera longue à se charger pour le visiteur.

Comment insérer une image ?

La balise qui permet d'insérer une image dans une page est la balise <img>. Cette balise ne peut encadrer aucun texte puisqu'elle ne permet que d'insérer une image. Elle n'a donc pas de balise fermante (comme c'était le cas pour la balise de saut de ligne <br />. A ce titre, la balise <img> doit être fermée en même temps qu'elle est ouverte en mettant un slash à la fin de la balise comme cela :

<br /> <!-- rappel pour la balise de saut de ligne -->
<img /> <!-- balise ouverte et aussitôt fermée -->

De la même façon que la balise <br /> doit figurer obligatoirement dans une balise de paragraphe, de liste ou une cellule de tableau, la balise <img /> doit figurer soit dans un paragraphe, soit dans une liste ou soit dans une cellule de tableau.

La balise <img /> est également une balise orpheline du fait qu'elle n'a pas de balise fermante.

Voici un exemple d'utilisation :

<p> voici une superbe image qui illustre mon propos : <img />, n'est-elle pas belle ?</p>

La balise img utilise un premier attribut qui précise l'endroit où est stockée l'image.
Vous allez donc prendre une petite image et placer le fichier correspondant au même endroit que votre page html. Il faut bien faire attention de la mettre au même endroit, si elle est stockée dans un dossier différent de celui dans lequel votre page HTML figure, votre image ne s'affichera pas.

Dans la ligne de code, vous pouvez maintenant préciser grâce à l'attribut "src" l'endroit où est stockée votre image. L'attribut "src" signifie "source". La valeur de cet attribut est le chemin qui mène à l'image depuis le fichier qui l'appelle. Puisque votre image est maintenant rangée au même endroit que votre ficher HTML, il suffit d'indiquer le nom du fichier image avec son extension (.jpg, .png, .gif,...) comme valeur de l'attribut "src".

Appeler une image pour illustrer une idée : (pour l'exemple, j'utilise une image qui a pour nom de fichier "smiley.png")

<p> voici une superbe image qui illustre mon propos : <img src="smiley.png" />, n'est-elle pas belle ?</p>

 Ce qui donne le résultat suivant :

voici une superbe image qui illustre mon propos : , n'est-elle pas belle ?

Pour en terminer avec les images, vous devez pensez à préciser un texte de remplacement au cas où l'image ne s'afficherait pas (l'image n'existe plus, le chemin menant à l'image est erronné,...)

Si je reprends mon exemple précédent et que je fais une faute dans le nom du fichier :

<p> voici une superbe image qui illustre mon propos : <img src="MSiley.png" />, n'est-elle pas belle ?</p>

Le résultat :

voici une superbe image qui illustre mon propos : , n'est-elle pas belle ?

Le lecteur peut se poser la question "Mais de quelle image pouvait-il bien s'agir ???. Il repart frustré et ennervé !

L'attribut "alt"  permet de préciser un texte alternatif  :

<p> voici une superbe image qui illustre mon propos : <img src="MSiley.png" alt="image d'un gros smiley jaune" />, n'est-elle pas belle ?</p>

Le résultat est maintenant moins frustrant pour le visiteur puisque à défaut d'avoir l'image, il en a une description :

voici une superbe image qui illustre mon propos : image d'un gros smiley jaune, n'est-elle pas belle ?

Enfin, on peut ajouter un attribut que l'on a déjà abordé lors de l'étude de la balise de lien <a>. C'est l'attribut qui permet au survol du lien d'afficher une explication.

Quel est cet attribut ? afficher/masquer la réponse

C 'est l'attibut "title"

Puisque l'on a déjà abordé cet attribut une fois, utilisez le avec la balise <img> pour afficher une infobulle au survol de l'image. afficher/masquer la réponse

<p> voici une superbe image qui illustre mon propos : <img src="smiley.png" alt="image d'un gros smiley jaune" title="clic droit pour enregistrer l'image" />, n'est-elle pas belle ?</p>
Avec l'effet suivant :
voici une superbe image qui illustre mon propos : image d'un gros smiley jaune, n'est-elle pas belle ?

Haut de page

Une image qui sert de lien hypertexte 

Vous savez maintenant créer un lien, vous savez insérer une image, vous êtes donc capable de créer une image qui va servir de lien !

Je vous laisse faire cette prouesse... afficher/masquer la réponse

Voici la solution :
<p>En cliquant sur le smiley <a href="http;//www.tout-electromenager.fr" title="cliquez pour voir un site sympa"><img src="smiley.png" alt="image d'un gros smiley jaune" title="cliquez pour voir un site sympa" /></a>, vous devriez arriver sur un site très utile...</p>
Avec le résultat suivant :
En cliquant sur le smiley image d'un gros smiley jaune, vous devriez arriver sur un site très utile...

Remarque à ranger quelque part dans un endroit de son cerveau pour une utilisation ultérieure : la balise <img /> est une balise de type "en ligne". Par conséquent elle doit obligatoirement être encadrée par des balises de type "bloc".

Cette partie est terminée.

Pour l'instant nous avons vu comment créer une page web sans s'occuper de la mise en forme. C'est l'objet de la partie 3 de ce chapitre : La mise en forme avec css.

Haut de page