Liste d'éléments

Je vais lister ici un certain nombre de types d'éléments. En partant du squelette que vous avez récupéré, vous essaierez de les inclure un peu tous, en n'hésitant pas à les imbriquer les uns dans les autres. Vérifiez au fur et à mesure que votre page s'affiche bien dans konqueror et firefox (enregistrez votre page d'abord, sinon les navigateurs vous en montrerons une vieille version). Vérifiez aussi régulièrement qu'elle est valide, en demandant au validateur, ou en cliquant sur Outils→Valider la page web→Valider le HTML dans Konqueror.

h1, h2, h3, h4, h5, h6

Ces éléments servent à donner des titres, sous-titres, etc. h1 est généralement réservé pour le titre de la page, mais cela laisse encore une profondeur de sous-sous-...-titres plus grande qu'en LaTeX basique, qui s'arrête à \subsubsection. Ces éléments sont souvent pourvus d'un attribut name ou id. Le second est la version officielle, mais le premier est le seul compris par internet explorer. Dans le doute mettez les deux. Ils servent à placer une ancre, vers laquelle on pourra plus tard faire un lien cliquable. Ces deux attributs peuvent être appliqués à la plupart des éléments.

p

Il sert à organiser le texte sous forme de paragraphes. Même si votre texte ne comprend qu'un seul paragraphe, mettez-le dans un élément de ce type. On verra à la prochaine séance que cela permet de gérer de façon simple les indentations, par exemple.

strong, em

Ces éléments servent à mettre en valeur. strong est plus important, et sera généralement rendu par du gras, alors que em sera généralement rendu par de l'italique, mais ce qui compte est le fait de donner de l'importance à ce qui est à l'intérieur, le rendu lui-même sera étudié une autre fois. Il existe aussi un élément i qui sert à mettre en italique, ce qui est utile quand on utilise l'italique pour respecter une règle de typographie (locution étrangère non francisée, comme des pates al dente) et non pour mettre en valeur.

dfn

Cet élément indique que vous être en train de définir son contenu. Par exemple : une application est dite <dfn>injective</dfn> ssi...

cite

Il permet d'indiquer que son contenu est un titre de livre, de film, etc. On peut lui donner un attribut lang avec comme valeur fr, en, it pour indiquer un nom français, anglais ou italien.

code

Il indique un extrait de code informatique. C'est ce que j'utilise pour vous indiquer le contenu non formaté de votre page, par opposition à ce que montre le navigateur (même si c'est un choix contestable, j'aurais parfois mieux fait d'utiliser kbd (texte que l'utilisateur devrait entrer) ou var (instance d'une variable ou d'un argument à un programme)).

pre

Il contient un texte préformaté. Le navigateur respectera tous les espaces et les retours à la ligne que vous mettrez à l'intérieur. Il sert pour des poèmes, du code informatique (code est utilisé pour citer une ligne au milieu d'un texte, par pour citer plusieurs lignes).

abbr, acronym

Ils servent à préciser les abbréviation et acronymes (les acronymes sont des sigles proconçables, comme : ONU). Ils ne sont utiles que munis d'un attribut title, précisant à quoi fait référence ce sigle. Lorsque vous passerez la souris sur ce mot, certains navigateurs afficheront une bulle avec la signification du sigle. Essayez avec l'exemple fourni dans ce paragraphe. Pour vérifier comment j'ai fait, vous pouvez taper CONTROL+U ou cliquer avec le bouton droit et demander à voir le code source du document.

ul, ol, li

Les éléments ul et ol sont des listes d'éléments li. Dans le second cas, les items seront numérotés. Voici un exemple, faites en d'autres, et incluez des listes à l'intérieur de certains items.

<ol>
 <li>
  acheter une demi-baguette
 </li>
 <li>
  téléphoner aux impôts
 </li>
</ol>

dl, dt, dd

Il servent pour donner une liste de définitions. dl est la liste entière, et dedans on trouve en général en alternance des éléments dt (terme à définir) et dd (la définition elle-même).

br, hr

br indique un retour à la ligne, et hr une ligne horizontale. Ni l'un ni l'autre n'a de contenu, on les referme donc immédiatement comme ceci : <br />.

q, blockquote

Ils indiquent une citation. q est utilisé pour un simple morceau de phrase, et blockquote pour quelque chose de plus long. Pour citer un poème, on pourra donc par exemple utiliser un blockquote contenant un pre, ou un blockquote contenant un p, avec des br à la fin de chaque ligne. Pour l'instant, Internet Explorer ignore les éléments q.

address

Cet élément sert à donner les coordonnées de quelqu'un (attention au nombre de « d » dans address).

img

Cet élément sert à inclure une image. Comme br, il n'a pas de contenu et est refermé immédiatement. L'intérêt de cet élément réside dans son attribut src qui est un lien vers l'emplacement de l'image. Si votre image provient d'un autre site que le votre, indiquez son emplacement par : <img src="http://www.mines.inpl-nancy.fr/images/inpl_ac.gif" />. Si l'image est stocké au même endroit que la page que vous êtes en train d'écrire, vous pouvez faire un lien relatif. Par exemple : <img src="maphoto.jpg" /> indique d'inclure l'image du fichier maphoto.jpg qui se trouve dans le même répertoire que votre page. <img src="../images/maphoto.jpg" /> indique que pour trouver le fichier, il faut partir du répertoire où est la page, remonter d'un niveau, et descendre dans le répertoire images. Un autre attribut essentiel de cet élément est : alt. Il permet d'indiquer un texte pouvant être affiché à la place de l'image. Vous pourriez ainsi mettre : <img src="maphoto.jpg" alt="photo d'identité" />. Il est essentiel de mettre un tel attribut, pour les cas où l'on ne peut pas (facilement) afficher l'image (imaginez ce qu'un logiciel de synthèse vocale pour aveugles peut faire avec une page qui contient uniquement une animation flash...). Quand l'image n'a qu'une valeur décorative et n'apporte aucune information, vous pouvez donner à cet attribut une valeur nulle : alt="". Pour finir, faites attention aux images que vous mettez sur votre site, vérifiez que vous en avez le droit. Ce n'est pas parce qu'une image est disponible sur un autre site ou que vous avez pris une photo vous-mêmes que vous avez le droit de les mettre sur votre site.

table

Voyons maintenant comment faire un tableau. Le plus simple est de regarder l'exemple suivant, et de s'en inspirer :

<table border=1>
<caption>Ceci est un tableau</caption>
<tr><th> Colonne gauche </th><th> Colonne droite</th></tr>
<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>

l'élément table est le tableau, chaque ligne est un tr, et chaque cellule un td. Les th servent à donner un nom à une ligne ou colonne. caption est la légende, et on ne peut la mettre qu'au début de l'élément table (ce qui ne veut pas dire qu'elle ne peut pas être affichée sous le tableau).

a

Cet élément n'a aucune signification particulière. Il sert uniquement avec des attributs. On peut par exemple l'utiliser avec l'attribut name pour placer une ancre. On peut aussi l'utiliser pour faire un lien. L'attribut href indique la destination du lien. Le texte (ou l'image, ou ce que vous voulez) que vous mettrez dans l'élément a sera en général représenté d'une couleur un peu différente, et vous pourrez cliquer dessus pour suivre le lien. Voici deux exemples : Vous pouvez <a href="mailto:prenom.nom@compagnie.fr">m'écrire</a> ou regarder <a href="http://www.mines.inpl-nancy.fr/">ma page web</a> . Le début du lien indique le type de lien dont il s'agit (mailto pour envoyer un email, http est le protocole utilisé pour télécharger les pages web, vous avez peut-être aussi entendu parler de ftp). On peut aussi faire des liens relatifs, comme pour les images : href="autrepage.html". J'ai parlé plus haut d'ancres. On peut faire un lien vers une ancre comme ceci : Je place une <a name="ploum">ancre</a> et maintenant je crée un <a href="#ploum">lien</a>. On peut aussi faire un lien vers une ancre sur une autre page, en donnant l'adresse de l'autre page suivie d'un # et du nom de l'ancre. Pour tester les liens, vous aurez besoin de plusieurs fichiers. Le meilleur moyen de créer un nouveau fichier html est de recopier celui que vous avez déjà sous un autre nom et de le modifier.

div

Cet élément n'a pas non plus beaucoup de sens par lui-même, il sert à délimiter une partie de la page (contrairement à a qui sert plus pour quelques mots). Nous verrons son utilité quand nous étudierons les feuilles de style.