|
Sommaire
Avant propos
Je ne suis pas l'auteur de cet
article.
Cela dit ces document sont intéressants. Ils donnent toutes les informations de
base vous permettant de mieux appréhendez la création de votre site Web.
Merci
à ZIP DAVIS et ZD NET FRANCE pour ces Informations.
1) Introduction
2) La structure du langage
HTML
3) Les listes
4) Insérer des
images dans une page HTML
5) Les liens
6) Personnaliser une page
HTML : la commande <BODY>
7) Travailler l'apparence
du texte
Apprendre
le langage HTML
Le langage HTML est la base des
pages Web. Comprendre et assimiler sa syntaxte et sa structure, est capital pour réussir
votre page personnelle ou bien le site de votre entreprise. Bien sûr, vous pouvez
utiliser des éditeur Wysiwyg, mais vous aurez alors sans quelques ajustements à apporter
pour adapter le résultat à vos besoins spécifiques.
Avant d'entrer dans le vif du
sujet, il convient de clarifier deux appellations tellement proches que l'on a souvent
tendance à les confondre : Internet et World Wide Web (WWW). Internet est le moyen
“ physique ” qui permet de véhiculer des informations, alors que le
WWW désigne la partie multimédia et hypertexte d'Internet. Différentes notions sont
ainsi regroupées : URL, HTTP et HTML. URL désigne l'adresse (adresse IP) d'un
serveur par son alias (le nom en clair), HTTP désigne le protocole de transfert des
données et HTML est le langage de description des pages qui n'est rien moins qu'un
langage de programmation interprété comme les premiers Basic.
Tout commence au CERN de Genève en 1989. Tim Berner-Lee développe alors la première
plate-forme hypertexte. Mais ce n'est qu'en 1992 que vont apparaître les premières
versions accessibles au public. Le Web est né.
En 1993, MOSAIC, le premier logiciel de navigation pour le Web, fait son apparition. Il
permet de visualiser aisément les pages définies à l'aide du langage HTML, que l'on
nomme dès lors “ pages HTML ”. Relativement limité, MOSAIC va
rapidement se confronter à un concurrent de taille. Le très célèbre Navigator de
Netscape débarque en force à la fin de l'année 1993. Les améliorations apportées par
ce nouveau navigateur sont considérables. Une grande partie de la communauté Internet
l'adopte rapidement et on estime que, courant 1994, plus de 80 % des internautes naviguent
sur le Web à l'aide du navigateur de Netscape. Depuis, tous les grands éditeurs de
logiciels se sont lancés dans le développement de leur propre navigateur. Microsoft tout
d'abord avec son Internet Explorer, IBM avec WebExplorer, etc.
Pour vous assurez que le résultat des exemples donnés tout au long de cette série
d'articles soit conforme à ce qui est annoncé, nous vous engageons à adopter, si cela
n'est pas déjà le cas, l'un des deux navigateurs dominant le marché. Microsoft Explorer
en version 3.02 ou supérieure que vous trouverez à l'adresse suivante : http://www.microsoft.com/france/ie, ou
Netscape Navigator, en version 3.0 ou supérieure, accessible par téléchargement à
l'adresse suivante : http://home.netscape.com/fr/.
Pour mettre en pratique ces exemples, munissez-vous d'un éditeur de texte comme Notepad
ou d'un éditeur de page HTML comme Webexpert. Pour vous placer dans les
“ conditions du direct ”, utilisez un serveur Web personnel comme
Frontpage Personal Web Server de Microsoft ou OmniHttpd de Omnicron que vous pouvez
télécharger sur le site http://www.fas.harvard.edu/~glau/httpd/.
Ces programmes transforment votre PC sous Windows 95 en serveur Web, même s'il n'est pas
connecté. À l'idéal, vous devez disposer d'un serveur Web d'accueil sur lequel votre
public pourra vous visiter. La plupart des fournisseurs d'accès vous proposent ce service
d'hébergement : AOL, Compuserve, msn et Wanadoo en tête.
La
structure du langage HTML
Le langage HTML fonctionne un peu
comme les langages de description de page utilisés par les imprimantes laser. Son
principe consiste à décrire pas à pas la structure et le contenu de la page. On trouve
ainsi des commandes qui définissent la forme de la page, la forme des paragraphes, le
type des caractères, la référence à une image ou un élément multimédia, bref
l'ensemble des éléments qui constituent un document.
Les commandes HTML
Chaque commande HTML, appelée
également balise ou tag, débute par le signe < et se termine par le signe >. Les
commandes peuvent être saisies en majuscules ou minuscules. La plupart des commandes
comportent deux blocs différents. Le premier précise le début de l'action, le second
localise la fin de cette action.
Exemple : <ACTION> débute une action. </ACTION> termine l'exécution de
cette action. Notez que la différence entre les deux blocs de la commande se résume à
l'introduction du signe “ / ” en début de bloc.
L'écriture de pages HTML nécessite un peu de méthode. Le langage HTML est finalement
assez proche des langages de programmation et nécessite presque autant de rigueur.
L'idéal serait de coucher sur papier la maquette des pages, c'est-à-dire une
représentation schématique de la page, puis de passer à la programmation proprement
dite.
Premier conseil : structurez le plus possible l'architecture du code de vos pages
HTML. Programmer au kilomètre est certes plus rapide, mais après quelque temps on ne s'y
retrouve plus et l'on passe souvent de longues minutes à rechercher le chaînon manquant
ou fautif.
Deuxième conseil : introduisez un maximum de commentaires dans vos pages HTML. Vous
pouvez les placer n'importe où dans un document HTML à condition que ceux-ci soient
placés dans une pseudo-commande qui respecte la syntaxe suivante :
<! ceci est un commentaire >
Si vous souhaitez placer un commentaire sur plusieurs lignes, vous devez adopter la
syntaxe suivante :
<!-- Ceci
est un commentaire
sur plusieurs lignes -->
Déclarations
DOC TYPE : <! >
Cette mention permet d'identifier le document comme étant de type HTML. Cette commande
est facultative, mais vous la verrez souvent apparaître lors de la création d'un nouveau
document HTML avec un éditeur spécialisé.
<!doctype html public " -//IEFT//DTD HTML//EN ">
HTML :
<HTML></HTML>
Chaque document doit débuter en qualifiant ce qui va suivre, à savoir, dans notre cas,
du code HTML. Nous insérerons donc un bloc <HTML> en début de document. Bien
entendu, nous placerons le bloc de fin </HTML> en bas de page.
En-tête : <HEAD>
L'en-tête du document est réservé aux informations générales relatives à la page
HTML. Seule la définition du titre du document est réellement importante.
<HEAD>
<TITLE> Ceci est le titre de ma page HTML </TITLE>
</HEAD>
Le titre ainsi défini est celui affiché dans la barre de titre de la fenêtre du
navigateur.
Corps du document :
<BODY>
Le corps du document, c'est-à-dire ce qui sera affiché dans le navigateur, est balisé
par la commande <BODY>. Cette action permet de déterminer la couleur de fond de la
page ainsi que la couleur du texte, des liens, etc.
Exemple d'un début de page complet :
< !doctype hml public " -//IEFT//DTD HTML//EN ">
<HTML>
<HEAD>
<TITLE> ma première page HTML </TITLE>
</HEAD>
<BODY>
......................................
</BODY>
</HTML>
Séparateurs
Contrairement aux éditeurs de texte, le retour chariot n'a
aucune incidence dans l'environnement HTML. Afin d'effectuer des passages à la ligne vous
devez insérer une commande simple,
<BR>, qui ne nécessite pas de bloc de fin de commande. Vous la placez exactement à
l'endroit où le passage à la ligne doit s'effectuer.
Notez que si vous ne placez aucune commande <BR> dans votre texte, le navigateur se
chargera d'en placer lui-même aux positions nécessaires pour que l'on puisse voir tout
le texte. La commande <BR> ne sert donc qu'à “ forcer ” un
passage à la ligne.
Comme dans les traitements de texte, HTML distingue les notions de ligne et de paragraphe,
c'est-à-dire un bloc de texte. Ainsi, une rupture de ligne de type <BR> n'introduit
pas le début d'un nouveau paragraphe.
La définition d'un paragraphe utilise la commande : <P> </P>. Le bloc
</P> est facultatif, mais sa présence facilite la lecture du code HTML. En fait, un
nouveau bloc <P> implique le bloc </P> qui devrait se trouver avant. La
commande <P> définit donc le début d'un nouveau paragraphe. Il permet en outre de
définir la justification, c'est-à-dire l'alignement, du paragraphe. Un paragraphe peut
être aligné à gauche, à droite ou au centre, mais il n'est pas possible de l'aligner
à gauche ET à droite comme dans un traitement de texte.
Ainsi :
<P ALIGN="LEFT"> ou <P> : déclarent un paragraphe aligné à
gauche,
<P ALIGN="RIGHT"> : déclare un paragraphe aligné à droite,
<P ALIGN="CENTER"> : déclare un paragraphe centré.
Un dernier séparateur est disponible, la ligne horizontale dont la commande est :
<HR>
Cette commande trace une ligne horizontale en relief sur toute la largeur de la page. La
commande <HR> dispose de paramètres pour l'adapter à vos besoins :
<HR WIDTH="150"> : trace une ligne de 150 pixels
<HR WIDTH="50%"> : trace une ligne sur 50 % de la largeur de la page
<HR SIZE="10"> : trace une ligne de 10 pixels d'épaisseur
<HR NOSHADE> : trace une ligne sans relief
On peut évidemment combiner ces paramètres.
Exemple : <HR WIDTH="50%" SIZE="5">
Une ligne est centrée et il ne peut en être autrement.
Les listes
Pour préciser un discours ou une
présentation, on est souvent amené à énumérer des informations de même type. Dans ce
cas, présenter des listes à puces ou numérotées est une méthode efficace.
HTML propose de nombreuses
solutions pour mettre au point et présenter vos listes. Les listes sont constituées de
deux parties. La première définit le type de liste, numérotée ou non, de
définitions..., l'autre précise les éléments de la liste.
Chaque partie utilise une commande HTML spécifique. Les éléments d'une liste
apparaissent à l'écran avec une indentation (marge gauche du paragraphe) fonction du
navigateur et non réglable. Les listes peuvent être imbriquées les unes dans les
autres, ce qui permet, par exemple, de créer des tables des matières.
La commande HTML d'élément d'une liste est <LI> élément </LI>. Le bloc de
fin est facultatif. Dans la plupart des navigateurs, la commande <LI> insérée en
dehors d'une liste ajoute simplement une puce au paragraphe.
Listes numérotées
Ce type de liste a la
particularité de numéroter automatiquement les éléments. Par exemple :
Personnes présentes à la
réunion :
<OL>
<LI> Pierre
<LI> Paul
<LI> Jacques
</OL>
donne le résultat suivant :
Personnes présentes à la
réunion :
1. Pierre
2. Paul
3. Jacques
Listes non
numérotées(/h1
Il s'agit de listes simples, par
exemple :
Personnes présentes à la réunion :
<UL>
<LI> Pierre
<LI> Jacques
<LI> Paul
</UL>
donne le résultat suivant :
Personnes présentes à la
réunion :
o Pierre
o Jacques
o Paul
Listes d'énumération
Ces listes ont strictement le
même comportement que les listes non numérotées :
<DIR>
<li>Objet a</li>
<li>Objet b</li>
</DIR>
Listes de menus
Là encore, ces listes ont
strictement le même comportement que les listes non numérotées :
<MENU>
<LI>menu 1</LI>
<LI>menu 2</LI>
</MENU>
Listes de définitions
Ces listes sont très pratiques.
Elles permettent de réaliser des énumérations d'éléments agrémentées de
descriptifs. Elles sont donc constituées de Titres et de Descriptions, par exemple :
Les catégories de
végétaux :
<DL>
<DT> Fleurs
<DD> Non comestibles dans la plupart des cas, elles se destinent à la décoration
et au romantisme
<DT> Légumes
<DD> Comestibles, les légumes sont les amis de ceux qui font attention à leur
ligne
<DT> Fruits
<DD> Comestibles et sucrés lorsqu'ils sont mûrs, les fruits sont, surtout en
été, les rois des desserts
</DL>
donne pour résultat :
Les catégories de
végétaux :
Fleurs
Non comestibles dans la plupart des cas, elles se destinent à la décoration et au
romantisme
Légumes
Comestibles, les légumes sont les amis de ceux qui font attention à leur ligne
Fruits
Comestibles et sucrés lorsqu'ils sont mûrs, les fruits sont, surtout en été, les rois
des desserts
Insérer des images dans une page HTML
Pour agrémenter les pages HTML,
il ne suffit pas de mettre en page le texte. Ajouter des images, de préférence pas trop
lourdes en kilo-octets, est un moyen rapide et facile de donner du caractère à la page
ou d'illustrer une information.
Insertion d'une image
La commande d'insertion d'image
peut être complexe, mais ne comprend qu'un seul bloc de type :
<IMG SRC="nomimage">
nomimage précise le chemin et le nom du fichier image à afficher. Vous pouvez afficher
les images au format GIF, JPEG, et GIF animé. Grâce à des plug-in (modules
d'extension), les navigateurs peuvent afficher d'autres formats d'image, mais dans un
premier temps, mieux vaut se limiter à ceux-là.
Alignement
Il est possible de positionner
l'image par rapport à la page (ou la cellule de tableau) à l'aide des attributs ALIGN
pour l'alignement horizontal et VALIGN pour l'alignement vertical. Sans ces attributs,
l'image est considérée comme un caractère et se positionne dans le texte comme tel. Si
ces attributs sont précisés, l'image est considérée comme un objet indépendant et le
texte se place autour en fonction de sa propre mise en page. Ainsi, il convient de faire
des essais pour vérifier si le résultat correspond aux attentes.
ALIGN= LEFT (gauche) ou CENTER (centré) ou RIGHT (à droite)
VALIGN= TOP (en haut) ou MIDDLE (centré verticalement) ou BOTTOM (en bas)
Dimensionnement
Une image a des dimensions
définies (par exemple 100 x 50 pixels). Si vous ne précisez rien, l'image sera
affichée dans ses dimensions d'origine. Si vous précisez une hauteur et une largeur,
l'image sera déformée pour être affichée selon les dimensions que vous aurez
définies. Si vous ne précisez qu'une seule de ces dimensions, l'autre sera déduite
automatiquement par homothétie.
HEIGHT = hauteur en pixels
WIDTH = largeur en pixels
Équivalent texte
Certains navigateurs ne peuvent
pas afficher les images ou bien l'utilisateur peut avoir désactivé l'affichage des
images pour améliorer les performances. Ces cas peuvent rendre la page incompréhensible.
Pour pallier à ce problème, il est possible de définir un équivalent texte à l'image,
qui sera affiché en lieu et place de l'image. Notez que les navigateurs modernes comme
Explorer 3 affichent ce texte dans une bulle lorsque la souris passe au dessus de
l'image.
ALT = "texte"
Marges et bordure
Pour ménager un espace
autour de l'image, pour que le texte ou les autres images ne
“ collent ” pas, on dispose de trois attributs :
BORDER = n où n est l'épaisseur en pixels de la bordure. Cette bordure est transparente
et prend la couleur des liens si elle est cliquable. Dans ce cas, vous pouvez préciser
une valeur 0 pour ne pas voir le cadre.
HSPACE = n en pixels. Un espace horizontal de n pixels est ménagé entre l'image et le
texte.
VSPACE = n en pixels. Un espace vertical de n pixels est ménagé entre l'image et le
texte.
Ainsi une commande HTML d'insertion d'image peut ressembler à :
<IMG SRC="www.zdnet.com/fr/graphics/image.gif" BORDER=0 HSPACE=3 VSPACE=5
WIDTH=100 HEIGHT=50 ALT="Une jolie Image" ALIGN=LEFT VALIGN=MIDDLE>
Les liens
Un lien hypertexte dans une page
HTML est également appelé hyperlien. Il s'agit d'un accès à un élément d'Internet
(un site, une page HTML, une image, un fichier, un son, etc.) intégré ou non à la page
HTML courante. Cet accès est activé par un clic de la souris sur l'élément de la page
HTML choisi pour le représenter. Ainsi, un lien peut prendre la forme d'un texte, d'une
image ou d'une animation.
Définition d'un lien
La commande HTML qui définit un
lien est constituée de deux blocs qui encadrent l'élément de la page qui fera office de
zone cliquable :
<A attributs> élément </A>
Ce sont bien sûr les attributs du bloc de début qui vont définir la nature du lien.
La référence du lien HREF
La référence du lien est
l'attribut le plus important puisqu'elle définit vers quel élément d'Internet pointe le
lien.
En général, il s'agit de l'URL d'une page HTML, par exemple :
<A HREF="http://www.zdnet.com/fr/">Accédez à ZDNet France</A>
Notez que la référence est encadrée par des " . Très souvent, l'oubli d'un "
est à l'origine de comportements pour le moins surprenants d'une page HTML. La cible peut
être définie de manière absolue, comme dans l'exemple précédent, directe ou relative.
Par exemple, à partir de la racine du site ZDNet (www.zdnet.com), le lien direct :
<A HREF="/fr/espace/welcome.html">Accédez à l'espace</A>
fonctionnera parfaitement, alors qu'il ne fonctionnerait pas à partir d'une page de
Yahoo! France.
De même, à partir de la page www.zdnet.com/fr/espace/welcome.html, le lien
relatif :
<A HREF="../welcome.html">Accédez à ZDNet France</a>
fonctionnera parfaitement, alors qu'il ne fonctionnerait pas à partir de la page
www.zdnet.com/welcome.html
La cible du lien TARGET
La cible du lien indique dans
quel cadre ou fenêtre du navigateur Internet, le lien doit être chargé. Lorsque
l'attribut TARGET n'est pas utilisé, le lien s'effectue simplement dans le cadre courant.
La cible n'est en fait précisée que dans deux cas bien précis.
Vous souhaitez que la page pointée par le lien se charge dans une nouvelle fenêtre
appelée Nouvelle, par exemple :
<A HREF="www.yahoo.fr" TARGET="Nouvelle">Accédez à Yahoo
France</a>
Dans le cas d'une interface multifenêtrée, ou plutôt multicadre, les boutons du cadre
de gauche viennent changer le contenu du cadre de droite, par exemple :
<A HREF="/fr/interlig/actualites/actus.html"
TARGET="Droite">Actualité</a>
où Droite est le nom du cadre de droite.
Attention, le nom du cadre ou de la fenêtre doit être orthographié correctement en
tenant compte des majuscules et des minuscules. Si le nom de la fenêtre ou du cadre
n'existe pas, le navigateur ouvrira une nouvelle fenêtre pour charger l'élément du
lien. Cette nouvelle fenêtre portera le nom désigné.
Tout type d'élément peut servir de référence pour un lien : Web (http), fichier
(ftp), RealAudio (ra), mais aussi des personnes pour l'envoi de message, par exemple pour
donner la possibilité d'écrire au webmaster. Dans ce cas on utilisera le préfixe
“ mailto: ” :
<A HREF="mailto: webmaster@zdnet.fr">Ecrire au Webmaster</A>
Créer une
“ ancre ” dans une page HTML, NAME
Dans les pages HTML très
longues, il peut être utile de permettre à l'utilisateur de
“ sauter ” à l'information qui l'intéresse. Pour cela, on insère
dans la page des “ ancres ” sur lesquelles les liens pourront pointer
directement. On crée une ancre à l'aide de la commande suivante :
<A NAME="nom_de _l_ancre"></A>
Pour qu'un lien pointe sur cette ancre, on emploiera la syntaxe suivante :
<A HREF="#nom_de_l_ancre">Texte du lien</A>
Il est aussi possible de pointer une ancre dans une autre page HTML :
<A HREF="page_html#nom_de_l_ancre">
Notez que le # indique que l'on pointe sur une ancre. Si aucune page HTML n'est
précisée, cette ancre doit faire partie de la page courante. Si l'ancre n'existe pas, le
navigateur viendra se placer en tête de page, mais ne provoquera pas d'erreur.
Lorsqu'un lien est déclaré sur un élément de page, celui-ci est mis en évidence.
Ainsi, un texte prendra une autre couleur et sera souligné, et un élément graphique
sera affublé d'une bordure de couleur. Si vous ne souhaitez pas que cette bordure
apparaisse (c'est rarement joli), vous devez ajouter l'attribut BORDER=0 à l'élément
graphique. Par exemple :
<A HREF="mailto: webmaster@zdnet.com"><IMG SRC="photo.jpg"
BORDER=0></A>
Personnaliser
une page HTML
La commande <BODY> permet
de fixer l'essentiel des paramètres qui régissent l'aspect général de la page HTML.
Grâce à ces nombreux attributs, elle vous permet de préciser les couleurs des textes,
des liens, des liens visités, etc. ainsi que la couleur de fond ou bien une image qui
fera office de fond.
La commande Body
La commande Body est composée
d'un bloc de début <BODY> et d'un bloc de fin </BODY> qui encadrent la
description du contenu de la page :
<BODY attributs>
.
. description de la page
.
</BODY>
Les attributs disponibles
sont :
BGCOLOR : couleur de fond
BACKGROUND : image de fond
TEXT : couleur des textes
LINK : couleur des liens
VLINK : couleur des liens visités
ALINK : couleur des liens actifs
Définition d'une couleur en HTML
Les couleurs en HTML sont
définies selon le standard RVB (Rouge, Vert et Bleu) en hexadécimal (2 caractères
– 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E ou F – par couleur de
base). Par exemple, le rouge 100 % est défini par FF0000, le blanc par FFFFFF et le noir
par 000000. Pour les attributs de couleurs dans les commandes HTML, il convient d'utiliser
la syntaxe suivante :
attribut = "#RRVVBB"
N'oubliez pas que tous les cybernautes ne disposent pas d'un affichage en 16 millions de
couleurs. Nombreux sont ceux qui ne profitent que de 256 couleurs. Alors adoptez des
couleurs standards de la palette "Netscape" qui en compte 216. Ces couleurs sont
définies par palier de 51 (33 en notation hexadécimale), 255 (FF) étant la valeur
maximale. Vous pouvez donc utiliser pour le rouge, le vert et le bleu, les valeurs 00, 33,
66, 99, CC et FF. Comptez le nombre de combinaisons, il y en a bien 216 !
La couleur de fond de page
BGCOLOR
La couleur par défaut des pages
HTML est le gris standard. Vous pouvez définir la couleur que vous souhaitez avec
l'attribut BGCOLOR. Par exemple :
<BODY BGCOLOR="#FFFFFF">
vous donnera un fond de page blanc.
L'image de fond de page
BACKGROUND
Vous pouvez choisir une image
pour faire office de fond de page. Cette image sera répétée horizontalement et
verticalement autant de fois que nécessaire pour couvrir toute la surface de la page.
Vous pouvez ainsi utiliser des textures ou bien des motifs pour agrémenter votre page.
Attention toutefois à ne pas choisir une image très volumineuse et donc longue à
télécharger. Par exemple :
<BODY BACKGROUND="www.zdnet.com/fr/graphics/fond.gif">
Les attributs de couleurs des
textes TEXT, LINK, VLINK et ALINK
Vous pouvez bien évidemment choisir comme vous le voulez la couleur des textes et des
liens de votre page. Vous pourrez ainsi harmoniser les couleurs à votre goût ou à celui
des personnes à qui vous destinez vos pages.
Ainsi une commande Body type doit ressembler à ceci :
<BODY TEXT="#000000" LINK="#9933CC" VLINK="#CC3333"
BACKGROUND="/fr/graphics/fond.gif">
Travailler
l'apparence du texte
Nous allons nous intéresser ici
à la typographie des pages HTML. Le jeu consiste à améliorer la présentation ou la
lisibilité de la page grâce aux artifices qu'il est possible d'appliquer aux
caractères.
Les polices de caractères et
leurs attributs
Qu'il soit au format HTML ou non,
un texte est inévitablement composé de caractères. La police de caractères (l'Arial,
le Times, etc.), également appelée la fonte, est la famille à laquelle appartient le
caractère. Elle est définie par le dessin des caractères. Un caractère est non
seulement affiché dans une certaine police, mais il peut aussi être écrit en gras, en
italique ou souligné. Enfin, sa taille (on dit son corps) et sa couleur sont également
modifiables.
Si la liberté de manœuvre sur les caractères s'est élargie avec la version 3.2 du
langage HTML, elle n'en reste pas moins limitée par rapport à celle offerte par le
format RTF (Rich Text Format) utilisé dans de nombreux logiciels de traitement de texte.
La commande <FONT>.
Pour travailler, les navigateurs
Internet s'appuient sur une configuration par défaut qui exploite deux polices de
caractères. L'une est dite “ proportionnelle ”, c'est-à-dire que
l'espacement entre les caractères varie en fonction de leur dessin (c'est la police Times
qui est en général présente par défaut, avec des caractères en corps 12). L'autre est
non proportionnelle, c'est-à-dire que les espaces entre les caractères sont fixes (c'est
la police Courier qui est souvent indiquée, avec des caractères en corps 10).
L'utilisateur qui ouvre une page HTML peut modifier à sa guise la police et le corps des
caractères. C'est pourquoi on ne peut jamais être certain du résultat d'une mise en
pages sur l'écran des utilisateurs. Heureusement, grâce à la commande <FONT>, il
est possible d'imposer la police qui sera utilisée lors de l'ouverture du texte. Cette
commande, composée de blocs qui encadrent le texte à traiter, propose plusieurs
attributs :
Le nom de la police : FACE
La couleur de la police : COLOR
La taille de la police : SIZE
L'attribut FACE .
L'attribut FACE permet d'indiquer
quelle police sera utilisée pour afficher le texte. Par exemple, FACE="Arial".
Bien qu'étant identiques, certaines fontes ne portent pas le même nom sur les
différentes plates-formes. Il est possible d'indiquer plusieurs intitulés correspondant
à des polices équivalentes. Par exemple, on indiquera FACE="Arial, Helvetica",
sachant que la police Arial de Windows s'appelle Helvetica dans les mondes Macintosh et
Unix.
En revanche, mieux vaut éviter d'utiliser des polices “ exotiques ”
car ces dernières risquent d'être absentes des micro-ordinateurs des utilisateurs :
elles ne pourront par conséquent pas être affichées. Lorsque les textes sont définis
avec une police introuvable sur la machine de l'utilisateur, ils sont affichés avec la
police par défaut du navigateur.
L'attribut SIZE .
En langage HTML, on n'indique pas
le corps des caractères comme on le ferait dans un traitement de texte. C'est une
échelle spécifique comprenant 7 niveaux qui définit le corps des caractères. Le niveau
3 correspond à la taille définie par défaut dans le navigateur. Ainsi, si le corps par
défaut est de 12 points, le niveau 3 (SIZE=3) correspond à une taille de caractères de
12 points. Le niveau 7 (SIZE=7) correspondra alors de façon arbitraire à un corps de 36
et le niveau 1 (SIZE=1) à un corps de 8 points.
Outre cette façon de définir le corps des caractères, il est également possible
d'attribuer une taille en se situant par rapport à la base (par défaut, le niveau 3). On
peut, par exemple, demander un corps SIZE=-1 (ce qui correspond ici au niveau 2) ou
SIZE=+2 (ce qui correspond ici au niveau 5).
Notez que lorsqu'une commande <FONT SIZE=X> est insérée dans un titre
(<H1></H1>, par exemple), les définitions de caractères liées au titre ne
sont plus prises en compte.
L'attribut COLOR.
L'attribut COLOR de la commande
<FONT> fonctionne comme l'attribut BGCOLOR de la commande <BODY>. Je vous
invite donc à vous y reporter.
Les commandes d'enrichissement
<B>, <I> et <U>
Il est possible d'enrichir les
caractères par des attributs de type “ gras ” (<B>),
“ italique ” (<I>) ou “ souligné ”
(<U>). Attention à l'utilisation de ce dernier attribut. En effet, étant donné
qu'il est normalement réservé aux liens dynamiques, certains navigateurs ignoreront tout
simplement cette commande.
Les commandes d'enrichissement sont composées de blocs qui encadrent le texte à
modifier. Elles peuvent se combiner sans aucun problème.
Par exemple :
<B>Le texte</B> donne Le texte
<I>Le texte</I> donne Le texte
<B><I>Le texte</I></B> donne Le texte
Par Bruno
Villacampa Parution : septembre 1997
| 
Les Bons Plans Gratuits
