Le langage HTML fonctionne selon le
principe suivant :
- des commandes
HTML entourent des blocs de texte dans un document pour décrire l'apparence de celui-ci
Lorsqu'un navigateur traite le document en question, il
formate le texte suivant la signification des commandes HTML.
Il y a donc des commandes qui indiquent qu'il s'agit d'un
titre, d'une liste d'éléments ou d'un simple paragraphe. Il est également possible
d'inclure des objets de nature autre que du texte, tels des images, de l'animation et du
son.
Un document HTML peut être créé à l'aide d'un simple
éditeur de texte ou encore en employant un éditeur spécialisé qui vous offre une gamme
complète d'outils, vous rendant ainsi la tâche beaucoup plus facile.
Retour
REGLES DE
BASE POUR L'ÉCRITURE EN LANGAGE HTML
Un document html "standard" doit impérativement
commencer par <HTML> et finir par </HTML>.
Les commandes HTML ont une marque de début et une marque
de fin. Certaines marques de fin sont facultatives.
Les commandes HTML utilisent les caractères < et
> comme délimiteurs.
Les commandes HTML peuvent être écrites en minuscules ou
en majuscules.
Tout ce qui n'est pas compris entre "<"
et ">" est tout simplement considéré comme du texte à
afficher.
Retour
STRUCTURE
D'UN DOCUMENT HTML
<HTML> <HTML/>
: Commandes de début et de fin de document
<HEAD> </HEAD>
: Informations non affichées concernant le document (Date et auteur par
exemple)
<TITLE> </TITLE>
: Titre du document. Cette information apparaît dans la barre
de titre du client WWW.
<BODY> </BODY>
: Corps du document. Toutes les informations affichées par le client WWW y
sont contenues.
Exemple d'une structure de document HTML :
<HTML>
<HEAD>
<TITLE>Exemple de
structure de document HTML</TITLE>
</HEAD>
<BODY>
Les données propres au document HTML
</BODY>
</HTML>
Retour
TITRE DE LA
PAGE
Ce texte apparaîtra dans la barre de titre du navigateur
lorsqu'un utilisateur affichera votre page sur son écran.
Exemple
:
pour cette page il s'agit de Guide HTML.
<HEAD><TITLE>Guide HTML</TITLE>
</HEAD>
Retour
BODY
Tout ce qui est contenu entre <BODY> et </BODY>
sera affiché à l'écran, c'est la partie intégrante de votre document, c'est là
que vous saisirez votre texte, insérerez vos images et établirez vos liens.
OPTIONS DE BODY
BACKGROUND
Permet de mettre une image dans le fond de la page.
Attention à la couleur d'écriture et celle des liens, en fonction de
la couleur du fond. On peut également choisir une couleur de fond proche de celle de
l'image.
<BODY BACKGROUND="nom_de_fichier.ext">
Exemple :
<BODY BACKGROUND="cahier.gif">
Retour
-
BGCOLOR
Permet de changer la couleur de l'arrière plan sans avoir
à charger une image, là aussi, il faudra veiller à ce que le texte et les liens soient
visibles dans tous les cas.
Par défaut, le fond de page est en blanc, le texte en
noir, les liens en bleu souligné, les liens activés en rouge et les liens visités en
violet.
TEXT
Permet de changer la couleur du texte, par défaut cette couleur est en
principe le noir, mais elle peut-être changée dans les préférences du browser.
LINK
Permet de changer la couleur des liens.
ALINK
Permet de changer la couleur des liens sélectionnés.
VLINK
Permet de changer la couleur des liens déjà visités.
<BODY BGCOLOR="couleur" TEXT="couleur"
LINK="couleur" ALINK="couleur"> VLINK="couleur">
Retour
COULEUR
La couleur que vous voulez obtenir peut être décrite de
deux façons:
- avec le nom anglais de la couleur,
- ou beaucoup plus précisément au moyen d'un symbole # et de
6 chiffres (en hexadécimal - base16).
Tout d'abord le format de la commande de couleur est:
"#RRVVBB"
# est le symbole qui permet de différencier une valeur d'un nom de
couleur.
RR
la quantité de
rouge contenue dans la couleur.
VV
la quantité de
vert contenu dans la couleur.
BB
la quantité de
bleu contenu dans la couleur.
La couleur: #000000 correspond au noir (00 de rouge,
00 de vert et 00 de bleu).
La couleur: #FFFFFF au blanc (le chiffre FF est le maximum possible)
La séquence de numérotation hexadécimale est (de min. à
max.): 0 1 2 3 4 5 6 7 8 9 A B C D E F.
Exemple:
<BODY BGCOLOR="#000000" TEXT="#FFFFFF"
LINK="#FF00FF">
Le fond sera noir, le texte blanc et les liens en rose.
Retour
SON
Insérer
un son en fond de page
<EMBED SRC="son.wav" AUTOSTART="true"
LOOP="-1">
<BG SOUND="son.wav" AUTOSTART="true"
LOOP="-1">
AUTOSTART="True or False" : permet de
déclarer le lancement du son à l'ouverture de la page.
LOOP=" " permet de déterminer le nombre
de fois où le son va être joué. La valeur -1 signifie que le son sera répété à
l'infini.
Retour
MISE ENFORME
Le texte peut avoir plusieurs polices et attributs.
Retour
Mise en forme de caractères
Option Style B (gras), I (italique), U
(souligné), S (barré)...
Option FONT SIZE pour gérer la taille de la police
Exemple :
Bienvenue sur ma page
<B><FONT SIZE=+1>Bienvenue
.</FONT></B>
Le texte est centré, en gras avec une police d'une
taille supérieure à la taille standard.
Aucune police n'est spécifié ce qui signifie que c'est la
police choisie par défaut dans le menu Préférences qui sera affichée.
<FONT> Ce marqueur permet de changer la fonte,
et aussi d'autres paramètres, comme la taille et la couleur.
Exemple :
<FONT FACE="arial" SIZE="3">
: type et taille de police
<FONT COLOR="YELLOW">ou COLOR="#RRVVBB"
</FONT> : couleur de police
<FONT SIZE="-1">Ou +2, +3, -2, -3,
ou encore 3, 4, 5</FONT> : La taille des caractères en pixels
<FONT SIZE="x">) : taille de
police
Retour
Mise en forme de paragraphes
Le texte peut être positionné à gauche, au centre, ou à
droite de l'écran.
Option ALIGN avec RIGHT (droit), CENTER (centre) et
LEFT (gauche).
Bienvenue sur ma Page.
<ALIGN=right><B><FONT SIZE=+1>Bienvenue
.</FONT></B></CENTER></ALIGN>
Le texte est aligné à droite avec une police d'1 taille
supérieure et en gras.
Retour
Insérer une image
IMG SRC : insertion d'image
-
<CENTER><IMG SRC="a64.gif"></CENTER>
Marqueur CENTER , RIGHT ou LEFT pour
positionner l'image horizontalement.
On peut modifier la taille initiale d'une image :
HEIGHT ="valeur" pour modifier la hauteur
WIDTH="valeur" pour modifier la largeur
Retour
Pour plusieurs images et texte
Bienvenue
<CENTER><IMGSRC="tv.gif" HEIGHT="39"
WIDTH="50"> <ALIGN=ABSCENTER>Bienvenue <IMG SRC="zik007.gif"
HEIGHT="39" WIDTH="50"> ALIGN=ABSCENTER
</CENTER>
On peut contrôler l'alignement vertical grâce aux valeurs
TOP (haut), MIDDLE (centre) et BOTTOM (bas) de l'option ALIGN.
Retour
LE RESTE DU DOCUMENT
Le texte se saisit comme sur un traitement de texte
le passage à la ligne est automatique.
Marqueur <BR> : Pour créer un nouveau
paragraphe
Marqueur <P> : Changer l'alignement du
paragraphe avec les options d'alignement:
<P ALIGN="RIGHT"> (ou LEFT
CENTER JUSTIFY) gauche/centre/aligné.
Retour
MARQUEURS
DIVERS
<B> et </B> : Caractères gras
(<STRONG> </STRONG> aussi).
<I> et </I> : Italiques
(<EM> </EM> aussi).
<U> et </U> : Souligné
<S> et </S> : Barré (ne
fonctionne pas avec tous browsers).
<SUB> et </SUB> : indice.
<SUP> et </SUP> : exposant.
<CENTER> et </CENTER>
: Centrage horizontal (texte et images).
<DIV ALIGN=""> et </DIV>
: Positionnement horizontal,
ALIGN peut valoir
LEFT/CENTER/RIGHT/JUSTIFY
(gauche/centre/droite/aligné).
<BLINK> et </BLINK> Clignotant
<IMG ALIGN="position">
SRC="fichier"
ALT="nom de l'image"
HEIGHT="hauteur">
WIDTH="largeur">
Retour
Lien vers
une page en local
LES LIENS
Un lien vers une autre partie du document ou vers un
autre document peut être de plusieurs nature, du texte, de l'image, une partie d'une
image voire même le document tout entier...
<A HREF="xxx">
Début de lien qui finit par </A>
Tout ce qui se trouve entre les deux est considéré comme
zone sensible, et un click sur les objets situé entre ces deux bornes provoquera l'action
contenue dans "xxx" (ou la lecture du fichier "xxx" comme nouvelle
page)
Exemples :
Pour
retourner au sommaire de ce site
<A HREF="index.html">Sommaire</A>
Retour
Lien vers un site
extérieur
Exemple :
Pour aller
sur le site Netscape
<A HREF="http://www.netscape.com/index.html">Allez voir ce site</A>
Retour
Lien
vers un e-mail
Exemple : Pour m'envoyer un courrier électronique
<A HREF="mailto:showtime@ifrance.com">Écrivez-moi</A>
Pour faire un lien à partir d'une image remplacez le texte
par le marqueur IMG SRC="image.gif".
<A HREF="planetenat@club-internet.fr"><IMG
SRC="mail.gif" BORDER="0"></A>
Petite astuce, si vous ne voulez pas qu'un lien image ait
une bande de couleur autour de lui, mettez l'option border du marqueur image à zéro.
Retour
Lien dans la même
page
Il faut utiliser les cibles ou ancrages.
Positionnez vous à l'endroit que vous souhaitez atteindre,
dans cet exemple le haut de cette page.
Identifier la cible avec <A NAME="titre">Texte
ou image</A>
et utiliser le marqueur: <A HREF="#Titre">pour y aller</A>
Pour sauter dans une section particulière d'une autre page
Web, il suffit tout simplement de rajouter le nom de la section après le nom de la page
dans le lien, exemple:
<A HREF="page2.html#sectionX"> Texte</A>
Modifier
l'apparence des liens
Il est possible de modifier l'apparence des liens de façon
à ne pas les faire apparaître en bleu souligné et modifier la couleur au survol.
Vous devez incorporer les lignes de commande suivante dans
la partie <HEAD> de votre page :
<STYLE>
A:LINK { color:
#000000; text-decoration: none }
A:VISITED { color:
#000000; text-decoration: none }
A:HOVER { color:
#ffffff; text-decoration: none }
</STYLE>
Dans cet exemple les liens apparaissent en noir non
souligné, au survol ils se transforment en blanc et ils restent en noir après avoir
été visités.
Retour
LES LISTES
Il est possible de créer des listes d'objets numérotées
ou non avec quelques marqueurs.
Liste non numérotée :
<UL>
<LH>Entête en option</LH>
<LI>Point numéro1
<LI>Point numéro2
<LI>Point numéro3
<LI>Point numéro4
</UL>
Retour
Liste numérotée
<OL>
<LH>Entête en option</LH>
<LI>texte
<LI>texte
</OL>
Le type de numérotation peut être changé avec: <OL
TYPE=""> avec a et A, la numérotation est alphabétique, avec i et I, elle
est romaine (majuscules ou minuscules dans les deux cas).
Pour continuer ou changer la numérotation:
<OL START="x">
<LH>Entête en option</LH>
<LI>texte
<LI VALUE="y">texte>
</OL>
Retour
TABLEAUX
C'est la seule façon de gérer convenablement la
présentation.
Les tableaux permettent de diviser la page en zones
d'espace et de remplir ces zones avec des objets (textes, images, couleurs), permettant un
contrôle amélioré de la position des objets.
Ces tables peuvent avoir un fond et des bords visibles ou
non.
Retour
Insérer un
tableau
<TABLE> et </TABLE> : pour
définir un tableau
<TR> et </TR> : pour définir une
rangée
<TH> et </TH> : pour les cellules
de haut de colonne (facultatif)
<TD> et </TD> : pour une cellule
Exemples :
|
Bienvenue |
<TABLE WIDTH=50%><TR><TD><IMGSRC="tv.gif"></TD><TD>Bienvenue</TD>
</TR></TABLE></CENTER>
Le tableau occupe 50% de la largeur totale de la page
sur une ligne avec dans la première cellule l'image et dans la seconde le texte, le tout
étant centré.
|
Bienvenue |
<TABLE BORDER COLS=2 WIDTH="100%"
>
<TR>
<TD>
<CENTER><IMG SRC="tv.gif" HEIGHT=39 WIDTH=50></CENTER>
<TD>
<CENTER>Bienvenue</CENTER>
</TD>
</TR>
</TABLE>
Retour
Mise en
forme d'un tableau
A l'intérieur d'une cellule (entre <TD> et </TD>)
tout est bien sûr possible, comme mettre plusieurs lignes de texte (avec <BR>,
<P> ou autre), changer la couleur des caractères, celle du fond de la
cellule, de mettre des liens, des images, modifier les couleurs et les épaisseurs de
bordure, etc...
<TABLE BORDER="2" CELLPADING="2"
cellspacing="3" width="50%" bordercolor="#000080">
<tr>
<td width="50%"
align="left" bgcolor="#008080" bordercolor="#FF0000"> </td>
<td width="50%"
align="left" background="fonkraft.jpg"> </td>
</tr>
</table>
<table bgcolor="#008080">
: mettre un fond de couleur
<table width="50%"> :
Occupation en % de la page
<table border="1"> Taille des
bords (0=pas de bords)
border color="#FF0000" couleur des bordures
cellpadding="2" Marge intérieure des cellules
cellspacing="3" Espacement entre les cellules
Il est aussi possible de définir le nombre de rangées et
de colonnes d'une table et d'attribuer à une cellule plusieurs rangées
(rowspan="") ou colonnes (colspan=""), ou les deux.
Retour
CADRES
Il est possible de scinder verticalement ou horizontalement
une fenêtre en 2 ou plusieurs parties.
Dans chacune de ces parties viendra s'insérer un fichier
html.
Retour
Création
d'un fichier Cadre à division verticale
<HEAD>
<TITLE>Guide
HTML de base</TITLE>
</HEAD>
<FRAMESET
COLS="20%,80%">
<NOFRAMES>
<FRAME SRC="sommhtm.htm">
<FRAME SRC="guidehtml.htm"
NAME="droite">
</FRAMESET>
</HTML>
<FRAME SRC="fichier.htm"> permet
d'insérer un fichier dans les cadres créés précédemment.
Retour
Création d'un fichier Cadre à division
horizontale
L'attribut COLS peut être remplacé par ROWS
pour avoir une séparation horizontale. La valeur attribuée correspond à la taille du
cadre par rapport à la largeur de la page.
<FRAMESET
ROWS="20%,80%">
<NOFRAMES>
<FRAME SRC="fichier1.htm">
<FRAME SRC="fichier2.htm"
NAME="bas">
</FRAMESET>
</HTML>
Retour
Création d'un
cadre avec bannière et sommaire
<FRAMESET
ROWS="64,*">
<FRAME NAME="banniere" SCROLLING="no"
NORESIZE TARGET="sommaire">
<FRAMESET COLS="150,*">
<FRAME NAME="sommaire" TARGET="principal">
<FRAME NAME="principal">
</FRAMESET>
La commande Scrolling avec l'attribut Yes ou No permet
d'autoriser ou non une barre de défilement.
Retour
Création d'un cadre
avec hiérarchie imbriquée
<FRAMESET
COLS="150,*">
<FRAME NAME="gauche" SCROLLING="no"
NORESIZE TARGET="haut_droite" SRC="fichier.htm">
<FRAMESET ROWS="20%,*">
<FRAME NAME="haut_droite" TARGET="bas_droite"
SRC="fichier.htm">
<FRAME NAME="bas_droite" SRC="fichier.htm">
</FRAMESET>
Retour
Attribuer un nom à un
cadre
Pour pouvoir faire des liens d'un cadre vers un autre, il
faut leur donner des noms. Il est conseillé d'attrbuer un nom significatif (haut, bas,
gauche, droite...).
<FRAME SRC="fichier.htm" NAME="droite">
Retour
Liens entre
cadres
Par défaut un navigateur ouvrira la page correspondant au
lien dans la même fenêtre que celle du lien.
Pour forcer cette commande il faut utiliser l'attribut TARGET
dans le tag du lien.
Exemple :
<A HREF="fichier.htm"
TARGET="droite">
TARGET indique le nom du cadre cible où devra
s'afficher le fichier html.
_blank : ouvre une nouvelle fenêtre pour afficher
la page
_self : affiche dans la même fenêtre (par défaut)
_parent : affiche dans le cadre supérieur.
Retour
ASTUCES
Afficher un message
d'alerte
Pour afficher un message d'alerte en cliquant sur l'image
qui sert de lien.
Exemple :
<A HREF ="fichier.htm" TARGET=""
ONCLICK="window.alert('Encore un peu de
patience!')">
<IMG SRC="image.gif" BORDER=0 ALIGN=
middle START="fileopen">
</A>
Créer une
image à zone sensible
Cette image s'appelle également une image mappée c'est à
dire que chacune des zones est sensible et permet d'accéder par un lien vers d'autres
pages.
<P><MAP
NAME="FPMap0">
<AREA
HREF="unlien.htm" SHAPE="rect" COORDS="133,
261, 199, 320">
<AREA
HREF="unlien.htm" SHAPE="rect" COORDS="27, 261,
89, 319">
<AREA
HREF="unlien.htm" SHAPE="rect" COORDS="256,
172, 334, 240">
<AREA
HREF="unlien.htm" SHAPE="rect" COORDS="125,
168, 217, 241">
<AREA
HREF="unlien.htm" SHAPE="rect" COORDS="17, 170,
91, 237">
<AREA
HREF="unlien.htm" SHAPE="rect" COORDS="351, 87,
434, 145">
<AREA
HREF="unlien.htm" SHAPE="rect" COORDS="255, 88,
317, 149">
<AREA
HREF="unlien.htm" SHAPE="rect" COORDS="129, 89,
218, 154">
<AREA
HREF="unlien.htm" SHAPE="rect" COORDS="20, 89,
99, 155">
</MAP><IMG
RECTANGLE="(256,172) (334,240) unlien.htm" RECTANGLE="(125,168)
(217,241) unlien.htm" RECTANGLE="(17,170) (91,237) unlien.htm"
RECTANGLE="(351,87) (434,145) unlien.htm"
RECTANGLE="(255,88) (317,149) unlien.htm"
RECTANGLE="(129,89) (218,154) unlien.htm"
RECTANGLE="(20,89) (99,155) unlien.htm"
SRC="menuv.gif"
X-SAS-USEIMAGEWIDTH X-SAS-USEIMAGEHEIGHT BORDER="0" ALIGN="bottom"
USEMAP="#FPMap0" WIDTH="470" HEIGHT="357"></P>
<AREA
HREF="unlien.htm" permet de désigner vers quel fichier doit pointer le lien
de cette zone
SHAPE
permet de définir la forme de la sélection (rect
COORD
précise les coordonnées géographiques de la zone
Retour