Le langage HTML

Bruno Delb http://www.brunodelb.com Date : 12/02/2001

HTML

Sommaire

HISTORIQUE...............................................................................................................2

STRUCTURE D’UNE PAGE HTML...................................................................................3

FORMATER LE TEXTE...................................................................................................4

ETABLIR DES LISTES ET DES DÉFINITIONS................................................................6

INSÉRER UNE IMAGE..................................................................................................7

PLACER DES LIGNES HORIZONTALES.........................................................................8

INSÉRER UN LIEN.......................................................................................................9

UTILISER LE COURRIER............................................................................................10

CRÉER UN FORMULAIRE............................................................................................11

PLACER DES LIENS SUR DES IMAGES.......................................................................12

UTILISER UNE TRAME SONORE.................................................................................13

UTILISER UNE SÉQUENCE VIDÉO..............................................................................14

CRÉER UN TABLEAU..................................................................................................15

SPÉCIFIER UN FONDS D'ÉCRAN ...............................................................................17

LES AUTRES COMMANDES.........................................................................................18

LES COOKIES............................................................................................................19

1


HTML

Historique

Le langage HTML provient du langage SGML (Standard Generalized Markup
Language).
C’est le navigateur (en anglais « browser ») qui interprète les commandes
HTML contenues dans le document.
Il est apparu en 1990.

2


HTML

Structure d’une page HTML

Une page HTML est un fichier texte. On peut donc utiliser n’importe quel
éditeur de texte pour le modifier.
Une page HTML doit contenir les éléments suivants :

Elément Description

<HTML> Marque le début du document.

<head> Marque le début de la zone d'en-tête.

<title> Marque le début du titre de la page.

</title> Marque la fin du titre de la page.

</head> Marque la fin de la zone d'en-tête.

<body> Marque le début du corps du document.

Corps du document (textes et images).

</body> Marque la fin du corps du document.

</HTML> Marque la fin du document HTML.

Les balises vont par paire : une balise début <code> possède une balise de
fin équivalente </code>.
Les balises peuvent figurent en minuscules ou en majuscules.

3


HTML

Formater le texte

Action Syntaxe

Pour formater un en-tête (header en Utiliser les balises de <H1> à <H6> (de la plus grosse à la
anglais) plus petite).

Pour center du texte <center>texte </center>

Pour changer de paragraphe <P>

Pour changer de ligne <BR>

Pour afficher du texte en gras <b>texte</b> ou <strong>texte</strong>

Pour afficher du texte en italique <EM>texte</EM> ou <I>texte</I> ou
<CITE>texte</CITE>

Pour afficher du texte avec une <TT>texte</TT>
police à espace constant

Pour afficher du texte préformaté (le <pre>texte</pre>
navigateur respecte alors les fins de
ligne)

Pour afficher du code de <CODE>texte</CODE>
programmation (analogue à
<TT>texte</TT>; les fins de ligne
sont ignorées)

Pour attribuer l'annotation variable à <VAR></VAR>
une donnée (s'affiche en italique)

Pour augmenter des caractères d’un <FONT SIZE="+2"></FONT SIZE="+2"> ou <FONT
certain nombre d’unités (de 1 à 7) SIZE="+2"></FONT>

Pour réduire la taille des caractères <FONT SIZE="-2"></FONT SIZE="-2"> ou <FONT SIZE="-
d’un certain nombre d’unités (de 1 à 2"></FONT>
7)

Pour emprisonner un paragraphe <BLOCKQUOTE></BLOCKQUOTE>
(exemple : une citation) en alinéa

Pour rayer un texte <STRIKE></STRIKE>

Pour utiliser les indices <SUB></SUB>

Pour utiliser les exposants <SUP></SUP>

Pour faire clignoter du texte <BLINK>texte</BLINK>

Pour modifier la police de caractères Utiliser l’attribut FACE=« première police, deuxième
(par ordre de préférence) police ».

Pour spécifier la couleur du texte Utiliser l’attribut COLOR.

Remarques :
• Les balises <P> et <BR> n'ont pas besoin d’être fermées. De plus,
elles peuvent être répétées.

4


HTML

Il existe des caractères spéciaux dans HTML. Pour les utiliser, on fait aux
commandes dites alternatives :

Commande alternative Caractère spécial

< <

> >

& &

" "

Pour pouvoir utiliser les caractères accentués sur le Web, il faut savoir
plusieurs choses. Ainsi, on distingue plusieurs types de codage des
caractères :
• les caractères référencés (Entity References en anglais), qui
utilisent le jeu de caractères US-ASCII standard ; ce jeu de
caractère n’utilise que 7 bits (ce qui permet de coder 127
caractères).
Avantage :
• Certains systèmes informatiques filtrent le 8ème bit : bien que
la norme HTTP utilise 8 bits pour les échanges, ces jeux de
caractères 8-bits (ou « étendus ») diffèrent d'un système
informatique à l’autre.
Inconvénient :
• La composition et la consultation des sources HTML de votre
document est fastidieuse (exemple : le caractère « é » est
codé « é »).
• les caractères ISO Latin-1 (ISO-8859-1)
La plate-forme informatique de conception doit utiliser ce jeu de
caractères. Les caractères sont codés sur 8 bits. Les systèmes Unix
et MS-Windows peuvent utiliser ces jeux de caractères, mais
Macintosh, MS-DOS et OS/2 ont adopté des jeux caractères
différents.

5


HTML

Etablir des listes et des définitions

Action Syntaxe

Pour créer une liste non ordonnée <UL><LI>1er point<LI>2ème point</UL>

Pour créer une liste ordonnée <OL><LI>1er point<LI>2ème point</OL>

Pour changer de type de puce dans une <UL TYPE=disc> (ellipse), <UL TYPE=circle> (cercle) ou
liste non ordonnée <UL TYPE=square> (carré)

Pour changer de type de numérotation <OL TYPE=a> (minuscules), <OL TYPE=I> (chiffres
dans une liste ordonnée romains en majuscules), <OL TYPE=i> (chiffres romains
en minuscules) et <OL TYPE=1> (chiffres)

Pour définir une zone de définition <DL>
(Definitions List)

Pour indiquer le premier terme à définir <DT>
(Definition Term)

Pour donner la définition du premier <DD>
terme en retrait d'un alinéa

Pour indiquerla fin de la zone de </DL>
définition (Definition List)

Remarque :
• Pour enchaîner plusieurs définitions, répéter la séquence
<DT><DD> pour chaque définition. On peut ainsi donner plusieurs
définitions à un même terme en utilisant plusieurs fois la balise
<DD> sous la balise <DT>.
• Les listes peuvent être imbriquées.

6


HTML

Insérer une image

Les navigateurs Web reconnaissent deux formats d'images compressés :
• les images GIF,
• les images JPEG.

Action Syntaxe

Pour insérer une image <img src="images.gif">

Pour aligner une image à la base <img src="images/serviette50.gif" ALIGN=BOTTOM>

Pour aligner une image à la tête <img src="images/serviette50.gif" ALIGN=TOP>

Pour aligner une image au centre <img src="images/serviette50.gif" ALIGN=MIDDLE>

Pour aligner du texte à gauche <img src="photos/PK015moyenne.jpeg" ALIGN=LEFT
HSPACE=4>

Pour aligner du texte à droite <img src="photos/PK015moyenne.jpeg" ALIGN=RIGHT
HSPACE=4>

Pour définir un espace horizontal libre Utiliser l’attribut HSPACE (de 1 à 5)
entre l'image et le texte

Pour forcer un changement de ligne qui <br clear>
tienne compte de la place occupée par
l'image (en fin du texte)

Remarque :
• La taille de l'image est déterminée par le fichier lui-même.

7


HTML

Placer des lignes horizontales

Action Syntaxe

Pour placer une ligne horizontale <HR>

Pour faire varier la largeur de la ligne en pourcentage de la <HR WIDTH=75%>
largeur de l’écran

Pour faire varier la largeur de la ligne en nombre de pixels <HR WIDTH=200>

Pour faire varier l'épaisseur de la ligne <HR SIZE="5">

Pour aligner les lignes à gauche <HR ALIGN=left>

Pour aligner les lignes à droite <HR ALIGN=right>

Pour aligner les lignes au milieu <HR ALIGN=center>

Pour afficher une ligne sans effet de profondeur <HR NOSHADE>

Remarque :
• On peut placer une image en tant que ligne.

8


HTML

Insérer un lien

Action Syntaxe

Pour insérer un lien hypertexte-hypermédia <A HREF="url">texte lié</A>

Pour créer un lien vers un document <A
HREF="http://www.grr.ulaval.ca/grrwww/glossairehtml.
html">Glossaire</A>

Pour créer signet (c’est-à-dire un point <a name="Gopher">
d'accès à l'intérieur d'un document HTML)

Pour se rendre à un signet <a href="manuel8.html#Gopher">Gopher</a>

Pour voir les liens sous forme de texte Utiliser l’attribut ALT : <A HREF="fichier.HTML"><img
src="images/belicone.gif" ALT="accès au fichier
X"></a>

Remarque :
• Les liens apparaissent en couleur contrastée et souligné dans le
navigateur.
Un lien peut pointer vers différents types de site :

Type de site Syntaxe

Site HTTP (WWW) <A HREF="http://WWW.fsaa.ulaval.ca">Serveur WWW
de la FSAA</A>

Site FTP <A HREF="ftp://ftp.apple.com/pub">Site FTP de la
compagnie Apple</A>

Site TELNET (émulation de terminal <A HREF="telnet://ariane.ulaval.ca/">ARIANE</A>
VT100/VT220)

Site TN3270 (émulation de terminal IBM <A HREF="tn3270://muse
3270) <retour>@mvs.mcgill.ca/">MUSE</A>

Site GOPHER <A
HREF="gopher://dionysos.ulaval.ca:70/00/reglementati
on/calendrier/1996-1997/cal9697.rtf.txt</A>

Site USENET (news) <A HREF="news:soc.culture.quebec">Société
québecoise</A>

Fichier sur le système hôte <A HREF="fichier.HTML">fichier</A>

9


HTML

Utiliser le courrier

Action Syntaxe

Pour envoyer du courrier <A HREF="mailto:dboivin@grr.ulaval.ca">Le courrier
électronique</a>

10


HTML

Créer un formulaire

Action Syntaxe

Pour créer un formulaire <FORM METHOD="POST" ACTION="/cgi-
bin/formulaire.pl?xxx">

Pour créer un champ de saisie de texte <input type="text" name="name">

Pour spécifier la longueur du champ de saisie <input type="text" name="name" size=30>
de texte

Pour créer deux champs de type bouton <input type="radio" name="info" value="OUI">OUI
radio (donc exclusifs) <input type="radio" name="info" value="NON">NON

Pour créer un champ de type case à cocher Kent, England <input name="city" TYPE=checkbox
(pour pouvoir sélectionner plusieurs choix en VALUE="Kent">
même temps)

Pour créer un champ de type combo box <select name><option selected>Kent,
(apparaissant donc sous la forme d’un menu England<option>Toronto, Canada<option>Dublin,
« pop-up ») Ireland</select>

Pour créer un champ de saisie texte <TEXTAREA name="logiciels?" rows=3
multilignes (3 lignes de 56 colonnes) cols=56></TEXTAREA>

Pour valider le formulaire et le soumettre au <input type="submit" value="Soumettre">
serveur HTTP

Pour vider le contenu du formulaire <input type="reset" value="effacer et
recommencer">

Remarque :
• METHOD= « POST » désigne la méthode de transmission des
champs de saisie au serveur.
• ACTION=« /cgi-bin/formulaire.pl » désigne le programme de
traitement des informations.
• « ?xxx » désigne les éventuels arguments du programme.
• Pour les boutons radio, on peut spécifier n’importe quel type de
valeur dans l’attribut « value ».

11


HTML

Placer des liens sur des images

Action Syntaxe

Pour afficher une image dont certaines <A HREF="http://www.grr.ulaval.ca/cgi-
zones ont un lien bin/imagemap.exe/moissonbatteuse"><img
src="images/moissonbatteuse.gif" ISMAP></a>

Pour désactiver le carré bleu entourant <img border=0 src="images/moissonneuse.gif">
une image liée

Remarque :
• Le programme « imagemap.exe » identifiera et retournera l'URL
associée à la zone sélectionnée. Pour cela, il faut fournir une clef de
l'image "cartographiée". Il faut aussi constituer un fichier
d’association des zones à des URL.

12


HTML

Utiliser une trame sonore

Puisque le navigateur Web ne peut reproduire les sons, il appelle un
programme externe.

Action Syntaxe

Pour lier un son à un mot <A HREF="sons/meuh.aiff">mot sonore</A>

Pour lier un son à une image <A HREF="sons/meuh.aiff"><img
src="images/vache.gif></A>

Pour intégrer un son (au format Wave ou <BGSOUND src="fnkngrvn.mid">
Midi) en arrière-plan (dans la partie HEAD)

13


HTML

Utiliser une séquence vidéo

Puisque le navigateur Web ne peut reproduire les sons, il appelle un
programme externe :
• PMMPEG pour le format MPEG,
• le runtime de QuickTime pour les fichiers QuickTime,
• le runtime de Video for Windows pour les fichiers AVI.

Action Syntaxe

Pour lier une vidéo à un mot <A HREF="animations/WaterCycle.mov">cycle de l'eau
animé</A>

Pour lier une vidéo à une image <A HREF="animations/WaterCycle.mov"><img
src="images/ cycleeau.gif"></A>

14


HTML

Créer un tableau

Action Syntaxe

Pour créer un tableau <TABLE></TABLE>

Pour définir une ligne dans un tableau <TR></TR>

Pour définir une colonne dans une ligne d’un tableau <TD></TD>

Pour aligner à au centre verticalement dans une <TD VALIGN=MIDDLE></TD>
colonne

Pour ajouter une ligne en en-tête (Table Header) <TH></TH>

Pour placer un titre au-dessus du tableau <CAPTION ALIGN=TOP></CAPTION>

Pour placer un titre en-dessous du tableau <CAPTION ALIGN=BOTTOM></CAPTION>

Pour définir une ligne d'épaisseur variable entourant <TABLE BORDER=nombre>
le tableau

Pour aligner à gauche une ligne dans un tableau <T? ALIGN=LEFT></T?>
(<TR>), une colonne dans une ligne d’un tableau
(<TD>) ou une en-tête (<TH>)

Pour aligner à droite une ligne dans un tableau <T? ALIGN=RIGHT></T?>

Pour aligner au centre une ligne dans un tableau <T? ALIGN=CENTER></T?>

Pour aligner en haut verticalement une ligne dans <T? VALIGN=TOP></T?>
un tableau (<TR>), une colonne dans une ligne d’un
tableau (<TD>) ou une en-tête (<TH>)

Pour aligner en bas verticalement une ligne dans un <T? VALIGN=BOTTOM></T?>
tableau (<TR>), une colonne dans une ligne d’un

Pour aligner au milieu verticalement une ligne dans <T? VALIGN=MIDDLE></T?>
un tableau (<TR>), une colonne dans une ligne d’un

Pour aligner sur la même ligne une ligne dans un <T? VALIGN=BASELINE></T?>
tableau (<TR>), une colonne dans une ligne d’un

Pour empêcher que le texte des cellules (<TD> ou <td nowrap> ou <th nowrap>
<TH>) ne soit réparti sur plusieurs lignes

Pour ajouter une ligne qui s'étend sur toute la <td colspan=2>
largeur du nombre de colonnes spécifié (<TD> ou
<TH>)

Pour ajouter une colonne qui s'étend sur toute la <td rowspan=2>
largeur du nombre de rangées spécifié (<TD> ou
<TH>)

Pour spécifier l'épaisseur de la bordure Utiliser l’attribut BORDER.

Pour spécifier l'espacement entre les données dans Utiliser l’attribut BORDER.
les cellules et la bordure

Pour spécifier la largeur totale du tableau en <table border=1 width="30%">
pourcentage de la largeur de l’écran

Pour spécifier la largeur totale du tableau en <table border=1 width="500">

15


HTML

nombre de pixels

Pour spécifier la largeur Utiliser l’attribut width.

Remarques :
• Dans une cellule d’un tableau, il est possible d’insérer une image,
un texte, un lien, une liste ou encore un autre tableau.

16


HTML

Spécifier un fonds d'écran

Action Syntaxe

Pour changer l'image du fond d'écran Utiliser la balise <body
background="images/carrefondgris.gif"> dans l'entête
du document HTML juste avant <title>.

Pour changer la couleur du fond d’écran <BODY BGCOLOR="#000000" TEXT="#FFFFFF"
LINK="#FFFFFF" VLINK="#00AAFF">

Pour changer la couleur du fond de Utiliser l’attribut BGCOLOR (Background Color).
l'écran

Pour changer la couleur du texte Utiliser l’attribut TEXT (Text Color).

Pour changer la couleur des liens Utiliser l’attribut LINK (Link Color).

Pour changer la couleur des liens Utiliser l’attribut ALINK (Selected Link Color).
sélectionnée avec la souris

Pour changer la couleur des liens visités Utiliser l’attribut VLINK (Visited Link Color).

Pour spécifier une couleur RGB (ou RVB Utiliser l’attribut #rrvvbb.
en Français) (Rouge, Vert, Bleu)

Pour changer localement la couleur du <FONT COLOR=#FFFFFF>texte</FONT>
texte

Couleur Code RGB

Blanc #FFFFFF

Jaune #FFFF00

Noir #000000

Magenta #FF00FF

17

HTML

Les autres commandes

Action Syntaxe

Pour positionner les autres pages dans la <BASE
hiérarchie des fichiers (en début de page, dans HREF="http://WWW.grr.ulaval.ca/grrWWW/"
la section entête) >

Pour insérer un commentaire 

Pour permettre à l’utilisateur de chercher un ou <ISINDEX>
plusieurs mots-clé (l’utilisateur doit alors
spécifier un mot-clé lors de l’affichage de la
page ; un programme est nécessaire pour cela)

Pour changer automatiquement de page (dans la <META HTTP-EQUIV="refresh" CONTENT="6;
section HEAD de la page) (« refresh » indique de URL=meta2.html">
rafraîchir l’écran, « content=6 » indique la durée
en secondes)

18


HTML

Les cookies

Un cookie HTTP sauvegarde des informations chez le client (c’est-à-dire chez
l’utilisateur) jusqu’à une date d’expiration. Cela nécessite l’utilisation de
scripts CGI ou de JavaScript.
Pour sauvegarder une information, utiliser la commande « Set-Cookie:
NAME=VALUE; expires=DATE; path=PATH; domain=DOMAIN; secure ».
Remarque :
• La date est au format suivant : Wednesday, 09-Nov-99 23:12:40
GMT
Dès que vous revenez sur la page « PATH » avant la date d'expiration
« DATE », le navigateur envoie au serveur la commande « Cookie:
NAME=VALUE ».

19

Le langage HTML

Contenu connexe

Tendances

En vedette

Similaire à Le langage HTML

Plus de Bruno Delb

Le langage HTML