Introduction au langage HTML
Nous allons présenter quelques concepts
de base concernant le langage HTML. Il ne s'agit pas ici de faire une
description exhaustive du langage, il existe de nombreux ouvrages le
faisant
très bien, mais de montrer "à quoi ressemble" le
langage permettant
de définir une page web. Les informations
apportées ici permettront au lecteur
de créer facilement des pages simples, avec un
éditeur de texte du genre notepad
sous Windows.
Ces
balises sont
toujours exprimées sous la forme d'un mot clé,
encadré par les caractères
"<" et ">". Exemple : <BALISE>. Pour
la plupart des
balises, il existe une balise de fermeture associée,
reprenant le même nom,
mais précédé du caractère
"/". Exemple : </BALISE>. La commande
spécifiée s'applique donc uniquement
au texte situé entre le couple de balises ainsi
formé. Exemple: <HTML> ... </HTML>
· une
balise peut
indifféremment être indiquée en
minuscules ou en majuscules, · le
formatage
"manuel" du document (espaces, sauts de lignes,...) est toujours
ignoré. Par
exemple : <HTML>...</HTML> est
interprété de la même
façon par le navigateur web que la syntaxe sur
plusieurs
lignes indiquée ci-dessus. <HEAD> ... </HEAD> <BODY> ... </BODY> </HTML> Ce
titre est indiqué
entre les balises <TITLE>
et </TITLE>. Exemple:
<TITLE>Ceci est
le titre</TITLE>. <!--
Ceci
est un commentaire -->. Les
commentaires ne sont
jamais affichés à l'écran du
navigateur. <HEAD> <TITLE>Titre du document</TITLE> </HEAD> <BODY> ... ... </BODY> </HTML> Les
principaux styles
gérés en HTML sont le soulignage,
l'italique
et le gras. Ces modificateurs de
styles sont définis par les commandes respectives <U>...</U>, <I>...</I>
et <B>...</B>. Par
exemple, le document
contenant : <U>Souligné</U>,
<I>Italique</I>
et <B>Gras</B> s'affichera
à l'écran du navigateur comme suit : Souligné, Italique et Gras.
Il est également possible de changer la
taille de la
police de caractères, afin de mettre en valeur des titres,
sous-titres etc.
Pour ce faire, on utilise la balise <Hn>...</Hn> où
n peut prendre une valeur
entière comprise entre 1 et 6 (dans l'ordre décroissant
de taille>.
En ce qui concerne les commandes de type
séparateur, le
HTML donne la possibilité de : · revenir
à la ligne
: <BR> · définir
un paragraphe : <P> · afficher
une ligne
horizontale : <HR>.
Vous remarquerez que les séparateurs ne
fonctionnent pas
par paire, contrairement à la majorité des
commandes HTML.
<OL>
<LI>élément
1,
<LI>élément
2,
<LI>élément
3. </OL> Ce qui
donne à l'écran : 1. élément
1, 2. élément
2, 3. élément
3. Exemple
: <UL>
<LI>élément
1,
<LI>élément
2,
<LI>élément
3. </UL> On
obtient cette fois : · élément
1, ·
élément
2, ·
élément
3. Notez
qu'il est tout à
fait possible d'imbriquer des listes du même type ou de types
différents. Exemple
: <UL>
<LI>élément
1 :
<OL>
<LI>sous-élément
A,
<LI>sous-élément
B.
</OL>
<LI>élément
2,
<LI>élément
3. </UL> On
obtient alors : · élément
1, · élément
2, · élément
3.
<DL>
<DT>HTML<DD>HyperText Markup
Language <DT>HTTP<DD>HyperText Transfert
Protocol </DL>
HyperText Markup Language HTTP
HyperText Transfert Protocol o Liens internes et
externes
On définit le point vers lequel pointe un
lien interne en
spécifiant une étiquette, affectée
à une portion de texte, avec les balises
suivantes : <A
NAME="nom_étiquette">...</A>.
Pour indiquer un lien vers cette
étiquette, on utilise la
syntaxe : <A
HREF="#nom_étiquette">...</A>.
Prenons un exemple afin de clarifier les choses : Cliquer
ici pour obtenir
la définition du terme <A
HREF="#def"> HTTP</A><BR> <BR> <DL>
<DT>HTML<DD>HyperText Markup
Language <A
NAME="def"><DT>HTTP<DD>HyperText
Transfert Protocol</A> </DL> On
obtiendra alors dans
la fenêtre du navigateur : Cliquer
ici pour obtenir
la définition du terme HTTP. HTML
HyperText
Markup Language HTTP
HyperText
Transfert Protocol
Notez
que le mot
"HTTP", situé dans le code HTML entre les deux balises <A
HREF...> et </A> est mis en
évidence avec un soulignement (et un
changement de couleur en pratique). En cliquant dessus, le navigateur
va
positionner le texte à la ligne où figure
l'étiquette pointée par le lien, à
savoir ici le mot "HTTP". Il faut également savoir que la
zone
encadrée par les balises <A
NAME...>
et </A>
définissant
l'étiquette n'est pas mise en évidence et n'est
pas cliquable.
Considérons maintenant le cas d'un lien
externe. Il
suffit en fait de reprendre la syntaxe rencontrée ci-dessus
pour définir un
lien, en remplaçant le label par une URL, soit : <A HREF="URL">...</A>. Exemple
: Cliquez
<A
HREF="http://www.ibm.com">ici</A>
pour accéder au serveur web d'IBM. A
l'affichage on obtient
: Cliquez
ici pour
accéder au serveur web d'IBM. En
cliquant sur le mot
"ici", le navigateur va se connecter au serveur web dont on a
indiqué
l'URL et afficher la page d'accueil du serveur.
Comme nous l'avons dit au début de ce
paragraphe, on peut
aussi créer un lien vers un fichier multimédia.
Prenons l'exemple d'une image
GIF[5]. Il est
possible d'<A
HREF="http://www.meteo.fr/cartes/lundi_1200.gif>afficher </A> la
carte du ciel de Lundi dernier à 12H. Donne : Il est
possible d'afficher
la carte du ciel de Lundi dernier à 12H. En
cliquant sur
"afficher", l'image (fictive) ainsi définie sera
affichée à l'écran. Certains
types de
fichiers, comme les animations, ne peuvent être
traités que grâce à un
utilitaire externe au navigateur, pouvant être
lancé automatiquement dès la fin
du transfert du fichier (en examinant son extension).
Enfin, on peut créer un lien vers un
serveur FTP grâce à
une syntaxe du type : <A
HREF="ftp://ftp.sun.com/pub">Répertoire
public du serveur FTP de Sun</A>. Dans
ce cas, le
navigateur affichera à l'écran le contenu du
répertoire ainsi défini. Citons
également le
service mailto:adresse_email, qui peut être
utilisé comme adresse de
destination d'un lien. Dans ce cas, le fait de cliquer sur le mot
désignant ce
lien affiche à l'écran une fenêtre
permettant d'envoyer un E-MAIL à l'adresse
indiquée. Exemple
: <A
HREF="mailto:president@whitehouse.gov">Ecrire
au président des Etats Unis</A>. Nous
allons voir
maintenant comment définir un lien accessible en cliquant
sur une image. o
Inclusion d'images Dans
le paragraphe précédent, nous avons
décrit comment définir un lien vers une page
HTML ou une image. Dans ce dernier cas, l'image ainsi
désignée s'affiche seule
à l'écran du navigateur, sans qu'il ne soit
possible d'y associer du texte,
dans la même page. Nous allons donc voir comment
insérer une image dans
une page HTML.
Pour ce faire, on utilise la balise dont la syntaxe
est
la suivante : <IMG
SRC=/rep/sous-rep/.../image.gif>. On
peut également faire
référence à une image se trouvant sur
un autre
serveur en indiquant son URL. Exemple
: <IMG
SRC="http://www.amiga.de/images/ami_logo.gif">. Mais
attention, ici il
ne s'agit pas d'un lien mais toujours d'une inclusion. La seule
différence par
rapport à la syntaxe précédente est
que dans le dernier cas, l'image ne se
trouve pas sur le même serveur que la page qui y fait appel :
le navigateur
doit donc aller chercher cette image avant de pouvoir l'afficher.
La balise <IMG
SRC...> possède une option permettant de
spécifier une contrainte
d'alignement par rapport au texte de la ligne où l'on
désire insérer l'image.
Cet argument est défini par le mot clé ALIGN=mode,
où mode correspond à TOP
(alignement
sur le haut de l'image), MIDDLE
(sur
le milieu) et BOTTOM (bas). Exemple
: Voici
le logo de
Netscape : <IMG
SRC="images/ns_logo.gif" ALIGN=BOTTOM>
Voyons maintenant comment définir un lien
auquel on
accède en cliquant sur une image plutôt que sur
une portion de texte. En fait,
c'est très simple : il suffit de remplacer le texte
définissant le lien par la
balise d'inclusion d'une image. Exemple: <A
HREF="http://www.netscape.com" ><IMG
SRC=/images/ns_logo.gif></A>. [1] Cette annexe est tirée du document Le langage HTML : une introduction, daté du 11/01/1997, du même auteur et disponible sur Internet (http://www.worldnet.fr/~erlsoft/internet.shtml). [2] Si vous utilisez ce type de logiciel, n'oubliez pas d'indiquer .html comme extension des fichiers que vous créez. [3] Opération qui consiste à décaler, à l'aide d'une ou de plusieurs tabulations, certaines portions de texte, de façon à faciliter la relecture. [4] Rappelez-vous que des retours à la ligne dans le texte lui-même ne sont pas reproduits lors de l'affichage. D'où le besoin de cette balise. [5] GIF est un format d'image très utilisé sur Internet. |