Les outils de mise en page HTML

• Définir l'apparence d'un texte
• L'alignement d'un paragraphe
• Balises de gras, italique, soulignement
• Définir un lien hypertexte
• Le lien relatif
• Le lien absolu
• Les liens hypertextes munis d'ancres
• Effets particuliers sur un lien : Le paramètre target
• L'insertion d'une image dans une page Web
• L'image à zones réactives, l'imagemap
• Système de coordonnées d'une image

Définir l'apparence d'un texte

L'apparence d'un texte se définie selon les paramètres suivants.

• La police de caractère (Arial, Verdana, Courier, etc..)

• La taille (allant de 1 à 6 ; 6 étant la plus grande)

• La couleur (code Hexadécimale ou nom anglais : blue, green, red, etc..) - Consultez notre générateur de couleurs hexadécimale

<font face="Verdana" size="2" color="#000000"> Texte en Verdana, de taille 2 et de couleur noire.</font>

L'alignement d'un paragraphe

Un paragraphe, par défaut, est aligné à gauche. Cependant, il est possible de le centrer, de l'aligner à droite, encore de le justifier (conseillé).

<p align="left"> Mon paragraphe aligné à gauche </p>
<p align="center"> Mon second paragraphe centré </p>
<p align="right"> Mon troisième paragraphe aligné à droite </p>
<p align="justify"> Mon dernier paragraphe en justifié </p>

Notez que le navigateur espace volontairement les paragraphes entres eux. Pour effectuer un simple retour à la ligne dans un paragraphe, utilisez cette balise : <br> pour break. Cette balise est particulière, elle n'a pas de fermeture. Mais comme nous l'avons souligné, nous nous dirigeons vers un langage de transition, le XHTML, pour attendre l'objectif final, le XML. Or, toutes les balises doivent obligatoirement se fermer. Ainsi, les balises sans fermetures devront systématiquement s'écrire de la manière suivante : <br />.

Vous pouvez structurer votre document HTML en blocs. Ces mêmes blocs intègreront plusieurs paragraphes ou un ensemble plus vaste d'éléments.

<div align="left"> </div>

Notez qu'il est possible de définir l'orientation du texte. Par défaut, celle ci est de gauche à droite ( Left To Right ). Mais il peut aussi s'orienter dans le sens inverse, c'est à dire de la droite àvers la gauche ( Right To Left ). Voici comment définir l'orientation d'un paragraphe :

<p align="justify" dir="ltr"> Paragraphe en justifié, allant de la gauche vers la droite. </p>
<p align="justify" dir="rtl"> Paragraphe en justifié, allant de la droite vers la gauche. </p>

Balises de gras, italique, soulignement

<b> Texte en gras </b>
<i> Texte en italique </i>
<u> Texte en souligné </u>

Notez que les effets se cumulent : <div align="center"><font face="Arial" size="5" color="gray"><b><i><u> Texte gras, italique et souligné et centré ; en Arial, taille 5, et de couleur gris </u></i></b> </font></div>
 

Définir un lien hypertexte

Un lien hypertexte permet au visiteur de se rendre sur une autre page Web en cliquant sur un mot. On appelle page mère, la page contenant le lien, et page cible, la nouvelle page à charger. Un lien hypertexte se définie selon les paramètres suivants.

• L'adresse de destination local ou absolue (et si besoin est, l'ancre de destination séparée par un dièse)

• Le cadre de destination, pour produire des effets particuliers.

Les couleurs particulières des liens non visités et visité, sont définies dans les paramètres du BODY.

<A HREF="page.htm"> Lien vers page.htm </A>

Il existe deux types de destinations.

• La destination local ou relative. L'adresse de destination est relative à l'emplacement de la page mère.

• La destination absolue. L'adresse de destination est complète, et ne dépend pas de l'emplacement de la page mère.

Le lien relatif

Mise en situation :

Vous changez le nom de domaine de votre site. Cependant, vous gardez strictement les mêmes pages Web. Dans le cas où vous avez adopté des liens relatifs, aucune modification n'est à apporter sur votre site : vos liens pointent toujours vers une cible existante et correcte. Malheureusement, si vous avez adopté des liens absolus, il vous faudra mettre à jour l'ensemble de votre site, car ceux ci pointent toujours vers votre ancienne adresse Web.

Un lien relatif prend pour référence l'emplacement de la page mère, au sein de l'arborescence des répertoires. Le chemin relatif prend pour point de départ cet emplacement de référence, pour mener la visiteur vers sa destination finale. Vous pouvez alors être amené à monter dans l'arborescence des répertoires supérieurs, ou à descendre dans les sous répertoires. Un répertoire contient au minimum deux répertoires, même si vous n'avez créé aucun répertoire.

Imaginez que MonPremierRepertoire/ est le seul répertoire que vous ayez créé. Même si celui ci est le seul visible à vos yeux, il en existe en réalité trois. ../ permet de remonter au niveau supérieur, et ./ représente le répertoire courant. C'est sur ces répertoires invisibles que se base le fonctionnement des liens relatifs. Le lien suivant est donc un lien relatif, pointant vers une page du même répertoire.

<A HREF="page.htm"> Lien vers page.htm </A>

Equivaut à

<A HREF="./page.htm"> Lien vers page.htm </A>

Nous voulons maintenant pointer vers page.htm contenue dans un sous répertoire nommé doc/

<A HREF="doc/page.htm"> Lien vers page.htm </A>

Pointons vers page.htm, mais appartenant cette fois ci au répertoire supérieur nommé racine/

<A HREF="../page.htm"> Lien vers page.htm </A>

Il est obligatoire de nommer le nom du répertoire lorsque l'on descend dans l'arborescence. En revanche, lorsque l'on remonte dans l'arborescence, il est inutile de nommer le répertoire. Nous utilisons simplement ../

Quelques exemples :

<A HREF="../../page.htm"> Nous montons ici de 2 répertoires </A>
<A HREF="sous_rep_1/sous_rep_2/page.htm"> Nous descendons ici de 2 répertoires </A>

Le lien absolu

Mise en situation :

Vous voulez transporter votre visiteur vers un autre site Web. Le lien relatif en est incapable, car limité au sein de l'arborescence de votre propre site Web. Le lien absolu est dans ce cas obligatoire.

Le lien absolu est une adresse Web complète. Un lien relatif peut être remplacé par un lien absolu, mais l'inverse n'est pas valable, comme le montre la mise en situation précédente. Le lien absolu ne tient pas compte de l'emplacement de la page mère au sein de l'arborescence des répertoires. Une adresse Web, ou URL Uniform Resource Locator se décompose de la manière suivante.

• Le protocole (obligatoire)

• Un couple d'identification / mot de passe, le mot de passe est visible dans l'URL. (optionnel)

• Le serveur (nom de domaine ou adresse IP) (obligatoire)

• Le numéro de port (optionnel sur port 80)

• Le chemin d'accès au fichier, chemin relatif prenant pour point de référence, le répertoire racine du serveur.

Exemple d'URL complète :

http://MonID:MonPassword@www.onwebcreations.net:80/repertoire/fichier.htm

Le protocole FTP utilisé pour mettre vos pages Web à jour nécessite une identification : Votre ID, PASS, et l'adresse du serveur serveur. Si votre navigateur Web permet une connexion FTP, le webFTP sous MS Internet Explorer, vous pouvez directement mettre à jour votre site en utilisant un lien de ce type :

ftp://id:pass@serveur.com:21

Pour transmettre des fichiers sur le serveur, utilisez le copier/coller, ou le glisser/déplacer sous MS Windows XP. Pour rapatrier un fichier sur votre disc dur, effectuez la même manipulation, mais dans l'autre sens.

Quelques exemples :

<A HREF="http://www.onwebcreations.net/index.php" > Page d'accueil Onwebcreations.Net </A>
<A HREF="ftp://anonymous:anonymous@MonServeurFTP.com:21"> Connectez vous sur mon serveur FTP en anonyme !</A>

Les liens hypertextes munis d'ancres

Une ancre est comparable à un signet de page dans MS Word. Si vous voulez conduire le visiteur à un paragraphe précis et non en début de page, placez une ancre à cette endroit à l'aide de l'instruction <A NAME="ancre1"></A> puis pointez le lien local ou absolu de la manière suivante.

<A HREF="page.htm#ancre1"> Ceci est un lien hypertexte vers la page.htm à l'ancre1 </A>

Exemples : testez les liens ci dessous :

page_12.php
page_12.php#c
page_12.php#d

Notez que l'on sépare l'adresse de destination et l'ancre par un dièse.

Effets particuliers sur un lien : Le paramètre target

Du mot anglais Target, signifiant cible, ce paramètre dote le lien de propriétés particulières.

Exemple :

<A HREF="page.htm" target="_blank"> Ouvrir page.htm dans une nouvelle fenêtre </A>

Dans les structures de frames, ce paramètre permet d'activer le lien dans une frame voisine, dont le nom doit figurer dans la valeur du target.

L'insertion d'une image dans une page Web

JPG et GIF sont des formats bitmap et non des formats vectoriels, parfaitement adaptés aux sites Web. Ce sont des formats fortement compressés, ils diminuent ainsi la durée de chargement d'une page Web.

Le format GIF

Disposant d'une gamme de 256 couleurs, le format GIF repose sur une définition par couches ou entrelacées. L'image est d'abord chargée en sa totalité, puis sa définition s'améliore couches après couches. D'autre part, le GIF permet de rendre une couleur transparente et de réaliser des séquences animées.

Le format JPG

Disposant d'une gamme de 16,7 millions de couleurs, le format JPG est moins volumineux que le format GIF. Vous l'utiliserez en priorité pour vos illustrations.

Notez qu'un réglage permettant de désactiver le chargement des images est prévu dans les navigateurs Web, ce qui améliore la navigation sur une connexion Internet à faible débit. A cet égard, il est prévu un texte de substitution au cas où l'image ne se charge pas.

<img src="image.jpg" border="0" alt="texte de remplacement" width="100" height="100">

image.jpg  Il s'agit de l'adresse local ou absolue de l'image.
border spécifie la largeur de la bordure de l'image en pixels.
ALT permet de spécifier le texte de remplacement. Par ailleurs, ce texte s'affichera en Info Bulle lors du survol de l'image par la souris.

width et height définissent respectivement la largeur de l'image et la hauteur en pixels. En cas d'omission de ces informations, l'image se charge en taille réelle. Vous pouvez effectuer un dimensionnement mais qui n'aura aucune influence sur le poids de l'image à charger. Le fait de renseigner les dimensions de l'image permet un chargement de la page Web plus rapide. En effet, le navigateur peut déjà réserver un emplacement libre pour les images dans la page, avant même que celles-ci soient complètement chargées. Dans le cas contraire, il devra constamment réajuster sa mise en page, ce qui allongera nécessairement le temps de chargement.

Pour ajouter un lien sur une image, procédez comme de la manière suivante :

<A HREF="page.htm"> <img src="image.jpg" border="0" width="100" height="200" ALT="texte si l'image ne se charge pas.."> </A>

L'image à zones réactives, l'imagemap

L'image à zones réactives consiste à insérer plusieurs liens dans une même image. Certaines zones seulement sont affectées d'un lien : les zones réactives.

Cherchez les trois zones réactives dans l'image ci dessous en parcourant la surface avec votre souris.

Une image à zones réactives
Montagnes émergeant des nuages, vue aérienne - Une splendide mer de nuages..

Il est possible d'intégrer dans une même page Web, plusieurs images réactives. Pour ce faire, il faut d'une part définir les zones réactives à l'aide de coordonnées, et d'autre part, affecter cet ensemble de définitions sur l'image.

Définir les zones réactives à l'aide des coordonnées

Vous avez à votre disposition trois types de zones réactives. Les rectangles, les cercles, et les polygones. Il faut définir de manière très précise, au pixel près, les coordonnées de ces surfaces..

Vous pouvez maintenant éditer votre carte de coordonnées définissant vos zones réactives à l'aide de la balise <MAP>. L'idéal est de placer cette définition dans la partie <HEAD> de votre document.

<map name="MaCarte">
<area href="page1.htm" shape="rect" coords="306, 55, 426, 123">
<area href="page2.htm" shape="circle" coords="184, 121, 29">
<area href="page3.htm" shape="polygon" coords="106, 192, 61, 234, 116, 271, 160, 229, 225, 269, 242, 206, 203, 172, 178, 201, 129, 148, 130, 188, 82, 157, 83, 181, 93, 191">
</map>

Appliquez maintenant cette définition sur votre image.

<img border="0" src="img/ImgReactives.jpg" usemap="#MaCarte" width="480" height="309">

Système de coordonnées d'une image

Système de coordonnées d'une image.

Vous pouvez bien évidemment utiliser votre logiciel de traitement d'images pour déterminer les coordonnées d'un point. Habituellement, il suffit de survoler le point à l'aide la souris, pour voir apparaître dans la barre de statut, les coordonnées du point survolé. L'illustration ci dessus vous montre la signification d'un couple de valeurs x, y d'un point au sein d'une image.