Leçon 2: Listes et images

La leçon deux présente quelques commandes utiles, les divers types de listes et l'affichage des images.

Rappel
Commandes utiles
Listes à puces
Listes numérotées
Les images
Mon images n'affiche pas!

Rappel

La dernière leçon nous faisait découvrir l'anatomie d'une page vierge, le squelette d'une page HTML bien formée. Nous y apprenions aussi que le langage HTML permet de donner du caractère et de mettre en forme du texte simple (ASCII) qu'un fureteur, un explorateur internet est capable d'afficher.

Nous avons vu que ces opérations peuvent être réalisées dans un simple éditeur de texte comme le BlocNote (NotePad) mais qu'un éditeur spécialisé est plus approprié nous offrant un certain nombre de fonctionnalités adaptées dont la présence des balises déjà toutes faites.

Nous avons finalement utilisées nos premières balises pour distinguer les paragraphes (P) et marquer les titres et sous-titres (H).

Instructions utiles

Voici quelques instructions utiles:

CENTER: Comme son nom l'indique, cette instruction permet de centrer dans la page tout ce qui s'y trouve inséré. Elle sera jugée désuète et remplacée par les fonctionnalités des feuilles de style dans une leçon ultérieure, mais à cette étape elle fait l'affaire.
HR: Horizontal Ruler. Sert à produire des lignes séparatrices. Dans l'éditeur HTMEd elle est servie avec l'argument WIDTH=400 qui en détermine la longueur (400 pixels) et encadrée entre deux marques de Paragraphes.
PRE: Cette balise est utilisée pour afficher un texte sans mise en page. En utilisant cette balise, il le texte affiché respectera la disposition qu'il tient dans l'éditeur, paragraphes et longueur de lignes inclus. Bien qu'un usage immodéré soit à déconseillé, c'est parfois un expédient rapide et efficace pour un premier jet ou pour répondre à un affichage immédiat d'un message ou d'une note.

Ces instructions sont illustrées dans le Petit Manuel Html à la section Premier Pas/alignements

Listes à puces

Les listes constituent une structure de paragraphe aux propriétés particulières. Cette structure est sans doute l'une des plus vieille que l'on connaisse et mérite à elle seule d'être traitée de façon particuliére. On verra, au moment d'en faire la mise en code, d'appliquer systématiquement les principes décrits ici, ce qui garantira une homogénéit de facture de l'ensemble et rendra plus facile son repérage et son édition ultérieure.

Une liste est une suite d'éléments précédés de la balise LI et enchassée, incluse dans une paire de balise UL (Unordered List: liste non ordonnée);

La façon correcte d'afficher une liste dans l'éditeur est celle-ci:

Une liste est mieux perçue lorsque groupée L'illustration ci-contre présente la façon correcte d'afficher une liste dans l'éditeur.

On évitera l'ajout de BR ou de P utilisé à la seule fin de gagner de l'espace puisque l'ajustement des propriétés de LI et de UL dans la feuille de style s'en occupe très bien limitant le code HTML nécessaire.

Listes numérotées

La liste numérotée répond à la même structure que la liste à puces sauf que les balises du niveau supérieur sont de type 0L (Ordered Type) cette commande supporte aussi un argument : TYPE= où les valeurs permises sont les suivantes: a, A, i, I. Permettant respectivement l'affichage alphabétique minuscule et majuscule et les chiffres romains minuscules et majuscules.

les types de listes ordonnées

Afficher des images

Pour afficher une image il suffit de l'appeler. Dans un premier temps on aura pris soin de la placer dans le dossier voulu, généralement le dossier de travail puis de l'appeler avec l'instruction:

Les principaux formats d'images permis dans les pages Web sont JPEG et GIF. Les images de format JPEG portent l'extension .jpg et les images de format GIF portent l'extension .gif. L'extension peut être en majuscule ou en minuscule mais il faut généralement respecté la casse c'est à dire que si mon image s'appelle abeille.jpg il faut l'appeler avec la commande suivante:

Surveiller la casse...

Plusieurs arguments sont possibles pour l'appel d'image mais celui qu'on verra le plus suivant est BORDER=0 qui supprime le cadre autour de l'image. À l'inverse pour faire apparaître un cadre autour de l'image, il est possible d'entrer une valeur supérieure à 0. Voyez l'exemple suivant:

border=0 border=1 border=2 border=4 border=8

Autre argument couramment utilisé est le ALT="Texte de l'image". Il a double fonction en l'absence de l'image ce texte apparaîtra dans l'espace réservé à l'image, de plus il s'affichera dans une bulle au-dessus de l'image au passage du pointeur de la souris.

ALT=Texte de l'image

Comme l'image est un fichier externe à la page, il convient d'éviter d'utiliser des accents dans le nom de fichier. Remplacez école.jpg par ecole.jpg .

Cette leçon est illustrée en détail dans les premiers pas/couleurs du Petit Manuel HTML.

Mon image n'affiche pas!

Vous étiez pourtant certain(e) que tout fonctionnait puis voilà que l'image attendue n'est pas au rendez-vous!

Voici une liste de points à surveiller pour résoudre ce problème:

L'image est-elle valide? (s'ouvre-t-elle dans MSPaint?) Les formats permis sont .jpg et .gif.
Le nom de fichier de l'image comporte-t-il des accents?
L'image se trouve-t-elle dans le même dossier que la page qui l'appelle?
La page ouverte dans l'éditeur est-elle bien celle que vous croyez?
(il arrive qu'on ait plus d'une version de la même page situées dans des dossiers différents et que les corrections qu'on fait ne soient pas sur la bonne version...) Pour être certain, enregistrez tout (dans l'éditeur) fermez-la page puis ouvrez-la de nouveau en surveillant que c'est bien celle voulue.