Le Conseil de la semaine

Actualités

François Charron

Jean-François Codère

par Chrystian Guy

Ma troisième page web
Mon père est plus fort que le tien!

Bon, bon, bon! Ça va faire la chicane! J'ai reçu des lettres de lecteurs qui voulaient absolument me dire que leur page était bien plus belle que celles des autres, et patati et patata… On va régler ça tout de suite : JE SUIS LE MEILLEUR! Na! Non mais, c'est qui le prof?

Maintenant que ce postulat est accepté, nous pouvons poursuivre notre petite découverte du HTML.

Madame, Monsieur, pitou et minou, nous allons voir cette semaine comment utiliser efficacement les images et aussi comment créer des liens avec d'autres pages et d'autres sites. La semaine dernière, je vous ai induit en erreur en vous disant que nous allions voir les TABLES; nous les verrons plutôt la semaine prochaine… Je suis sûr que vous comprenez.

Insérer une image dans une page web
Pour insérer une image dans une page web, il faut d'abord comprendre que seuls certains types de fichiers graphiques sont lisibles directement par un navigateur : les GIF et les JPG

Pour en savoir plus sur les fichiers graphiques, lisez ma chronique du 27 novembre.

Encore une fois, les inventeurs du HTML ont pensé à une ancre pour permettre l'affichage d'une image. Il s'agit en quelque sorte d'un lien vers un fichier… Voici la recette :

L'argument SRC est la source, c'est à dire le fichier graphique à utiliser. L'ancre IMG peut aussi comprendre d'autres arguments :


width=x		la largeur de l'image

height=y	la hauteur de l'image

border=n	l'épaisseur de cadre quand l'image est un hyperlien

ALT="xyz"	la description de l'image

align=		Left, right, middle… même principe que pour l'ancre <P>

L'argument border est très important notament lorsque vous ne voulez pas voir de cadre (bleu) autour de votre image si celle-ci est un lien cliquable. Exemple :

Je vous conseille d'essayer plusieurs combinaisons, avec entre autres l'argument ALIGN. Il y a des choses très intéressantes à découvrir…

Mon images n'est pas dans le même répertoire!
Maintenant, il se peut que votre image soit dans un autre répertoire que celui de votre fichier HTML; il faudra donc donner le chemin pour atteindre le fichier graphique. Nous verrons lors du dernier cours comment monter une bonne structure de site, mais voici dès maintenant comment pointer sur un fichier graphique qui se trouve dans un sous-répertoire.

Posons que votre fichier HTML se trouve dans le répertoire htdocs et que vos images soient dans le répertoire htdocs/images/ voici comment insérer votre ancre :

Cet ancre ira chercher l'image dans le sous-répertoire images, qui lui-même se trouve déjà dans htdocs.

Mon image n'est pas de la bonne grandeur
Il est très rare de trouver une image qui soit de la bonne grandeur, à moins, bien sûr, de la créer vous-même. Des petits malins ont eu l'idée d'utiliser les arguments WIDTH et HEIGHT de l'ancre IMG pour modifier les dimensiosn d'une image. PAS UNE BONNE IDÉE! Ceci aura pour effet d'altérer la qualité de l'image si vous tentez de l'agrandir et pire, d'imposer une image plus lourde que nécessaire si vous la réduisez ainsi. Et non, vous ne réduisez pas vraiment la taille de l'image avec les arguments WIDTH et HEIGHT de IMG, vous ne faites que paramétrer l'affichage. Pour vraiment modifier la taille d'une image, il faut un éditeur d'image, et c'est pourquoi je vous ai demandé d'installer Paint Shop Pro (ou autre). Pour changer les dimensions d'une image dans PSP, il suffit d'ouvrir l'image, de choisir le menu Image, Resize… Custom. Je vous conseille de sélectionner l'option Maintain Aspect ratio pour ne pas déformer votre image.

Mon image est trop lourde
D'abord, les gens ne s'en rendent même pas compte… c'est une des 7 plaies du web. Une image de 102 Ko est TROP GROSSE! Je vous conjure de lire ma chronique du 11 juillet 1997.

Utiliser une image comme fond de page
Chose promise, chose due. Pour mettre une image dans le fond de votre page web, il faut utiliser l'ancre BODY que nous avons vu au premier cours, mais avec l'argument suivant :

Attention, cette image se multipliera pour occuper tout l'espace de la page. Attention aussi à la taille de cette image qui peut devenir monstrueuse (en nombre de Ko). Pensez à la lisibilité d'abord : un fond psychédélique peut donner mal aux yeux (et au cœur) aux lecteurs non-initiés à votre art…

Faire des liens
Les hyperliens sont le pain et le beurre du Web. Vous ne pouvez pas vous en passer, c'est d'ailleurs grâce à un hyperlien que vous avez accédé à cette page, non? Pour faire un hyperlien, il faut mettre une portion de texte ou une image entre les éléments de l'ancre suivante :

<A HREF="http://www.toile.qc.ca">Lien vers La Toile du Québec</A>

ou encore,

Comme nous l'avons déjà appris, l'ancre <A> se ferme par </A>. Son argument HREF sert à donner la référence de l'hyperlien (Hypertext REFeral). Entre guillemets (comme pour IMG), nous indiquons l'adresse du site (la page) vers lequel pointer; il s'agit d'un lien absolu. Cependant, vous pourriez vouloir pointer vers une seconde page de votre propre site web. Pour ce faire, il suffit d'utiliser un lien relatif, comme ceci :

<A HREF="page2.html">Vers ma deuxième page</A>

C'est tout pour cette semaine, amusez-vous bien et préparez-vous pour le vrai test! La semaine prochaine, là c'est vrai, nous attaquons les tables HTML. On a du pain sur la planche!

Infos | Ajouter un site | Pour nous écrire