1) Les bases du langage

Marqueurs du langage

Attributs de marqueurs

Valeurs d'attributs

Evénements HTML

Le langage HTML (Hyper Text Markup Language) est une simplification pour l'internet du langage SGML (Standard Generalized Markup Language) plus complexe utilisé dans l'édition de textes.
C'est le W3C (Word Wide Web Consortium) qui a la charge de développer et de normaliser le langage HTML. Il définit des spécifications qui sont plus ou moins bien respectées par les navigateurs.
Chaque version du HTML est définie par une DTD (Document Type Definition). On trouve tous les documents de référence sur le site du W3C (Description du site).
A l'exception du marqueur <!DOCTYPE> qui spécifie la DTD de rattachement (la version du HTML utilisé), la totalité du document est comprise entre les balises <HTML> et </HTML>.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN>
Sans que ce soit absolument obligatoire, tout document HTML devrait contenir :
un en-tête (HEAD) dans lequel on place les données globales du document (meta-informations, titre, fonctions, ...)
un corps (BODY) qui contient tout ce qui sera affiché (à l'exception du titre principal). On y trouve le texte, les images et les marqueurs nécessaires pour la présentation.
un pied de page (pas de marqueur spécialisé) dans lequel écrira les références de l'auteur, la date de mise à jour, ...
Les caractères "<" et ">" indiquent au navigateur que le contenu doit être interprété comme une commande. Ces marqueurs constituent les balises (tags) du langage. Leur contenu n'est pas sensibles à la casse (le W3C recommande les minuscules) par contre les espaces doivent être utilisées avec circonspection.
Un marqueur peut être complété par des attributs (entre guillemets). Sa portée est, en général, indiquée par un marqueur de fin (préfixé par / slash) : <BODY></BODY>. Ils doivent être emboîtés correctement (Premier Ouvert - Dernier Fermé). W3C recommande de modifier l'écriture primitive des marqueurs uniques en <BR />, <HR />, <IMG.../>, ...
Le jeu de caractères utilisé pour HTML est le jeu ASCII sur 7 bits (ISO 646). Pour utiliser les caractères diacritiques des alphabets sur 8 bits on utilise (en attendant l'Unicode et ses 65 536 caractères) un codage spécial :

é pour é	à pour à	& pour &	< pour <	> pour >
pour espace	pour '	" pour "	« pour «	» pour »

Les marqueurs ou balises (Cette liste n'est pas exhaustive)

Marqueurs de structure
<!DOCTYPE	Version du HTML	<HTML></HTML>	Limites du document HTML
<HEAD></HEAD>	En-tête du document	<!- ... -->	Zone de commentaires
<META></META>	Informations sur le document	<TITLE></TITLE>	Titre principal du document
<BODY></BODY>	Corps du document	<Hi></Hi>	Titre de niveau i (i de 1 à 6)
<DIV></DIV>	Division logique	<SPAN></SPAN>	Sous-division d'un marqueur
<ADDRESS></ADDRESS>	Informations sur l'auteur
Marqueurs de cadres
<FRAMESET></FRAMESET>	Structure de cadres	<FRAME>	Cadre
<IFRAME></IFRAME>	Cadre en ligne avec du texte	<NOFRAME></NOFRAME>	Alternative aux cadres
Marqueurs de textes
<ABBR></ABBR>	Présence d'une abréviation	<BLOCKQUOTE></BLOCKQUOTE>	Longue citation
<BR />	Saut de ligne	<CENTER></CENTER>	Centrer
<HR />	Trait horizontal (filet)	<P></P>	Saut de paragraphe
Marqueurs de caractères
<BASEFONT>	Police par défaut	<FONT></FONT>	Police de caractères
<TT></TT>	Police à pas fixe	<BIG></BIG>	Caractères plus gros
<SMALL></SMALL>	Caractères plus petits	<B></B>	Gras
<STRONG>.</STRONG>	Gras	<I></I>	Italique
<EM></EM>	Italique (emphase)	<SUB></SUB>	Indice
<SUP></SUP>	Exposant	<S></S>	Barré
<U></U>	Souligné
Marqueurs de listes
<OL></OL>	Liste numérotée	<UL></UL>	Liste à puce
<LI />	Élément de liste	<DD></DD>	Définition de terme
Marqueurs de tableaux
<TABLE></TABLE>	Tableau	<TH></TH>	En-tête de tableau
<TR></TR>	Ligne de tableau	<TR></TR>	Cellule de tableau
<THEAD></THEAD>	Regroupe des lignes	<TBODY></TBODY>	Regroupe des lignes
<TFOOT></TFOOT>	Regroupe des lignes
Marqueurs de liens
<A></A>	Appel de lien ou d'étiquette	<BASE></BASE>	Base d'un adressage relatif
<LINK></LINK>	Liaison à d'autres ressources
Marqueurs d'inclusions
<APPLET></APPLET>	Insertion d'applet Java	<SCRIPT></SCRIPT>	Insertion d'un script
<NOSCRIPT></NOSCRIPT>	Alternative au script	<STYLE></STYLE>	Insertion d'une règle de style
<OBJECT></OBJECT>	Insertion d'un objet	<MAP></MAP>	Insertion d'une image réactive
<AREA></AREA>	Zone d'une image réactive
Marqueurs de formulaires
<FORM></FORM>	Formulaire	<FIELDSET>	Regroupe des champs
<LEGEND></LEGEND>	Titre un FIELDSET	<LABEL></LABEL>	Etiquette de champ
<BUTTON></BUTTON>	Bouton d'entrée	<INPUT>	Champ de saisie
<SELECT></SELECT>	Liste de choix	<OPTION>	Élément d'une liste
<TEXTAREA></TEXTAREA>	Zone de texte

Quelques attributs (un attribut vient préciser l'action d'un marqueur.
Sa valeur peut être une URL, un nom, un nombre, un texte, une constante)

Attributs communs
ID ="Nom" - Identificateur d'un marqueur	CLASS = "Nom" - Propriété à appliquer
STYLE="Texte" - Suite de règles de style
Attributs de liens <A>
HREF = "URL de destination du lien"	NAME = "Nom de signet"
TARGET = "Fenêtre"
Attributs de corps de document <BODY>
BACKGROUND = "URL" - Image d'arrière-plan	BGCOLOR = "Couleur" - Couleur d'arrière-plan
LINK ="Couleur" - Couleur des liens	ALINK = "Couleur" - Couleur des liens actifs
VLINK = "Couleur" - Couleur des liens visités	TEXT = "Couleur" - Couleur du texte
Attributs de polices <FONT>
COLOR ="Couleur"	FACE = "Nom de police"
SIZE = "Taille de caractères"
Attributs de cadres <FRAME> ou <IFRAME>
ALIGN = "LEFT, BOTTOM, MIDDLE, TOP, RIGHT" - Position du IFRAME
FRAMEBORDER = "1 ou 0" - Bordure de cadre	NAME = "Nom du cadre"
MARGINHEIGHT = "Taille ou %"	MARGINWIDTH = "Taille ou %"
NORESIZE - Non redimensionnable	SRC = "URL" - Nom du fichier à charger
Attributs de filets <HR>
ALIGN ="LEFT, CENTER, RIGHT" - Position du trait	NOSHADE - Pas d'ombrage
SIZE = "Taille" - Hauteur du trait	WIDTH = "Taille" - Largeur du trait
Attributs d'images <IMG>
ALT = "Texte" - Alternative à l'image	BORDER = "Taille" - Largeur de la bordure
ALIGN = "LEFT, BOTTOM, CENTER, MIDDLE, TOP, RIGHT" - Position de l'image
HEIGHT = "Taille" - Hauteur de l'image	WIDTH = "Taille" - Largeur de l'image
HSPACE = "Taille" - Espace horizontal avec le texte	VSPACE = "Taille" - Espace vertical avec le texte
SRC = "URL" - Référence de l'image
Attributs de méta-informations <META>
NAME = "Texte" - KEYWORDS, DESCRIPTION, ROBOTS, RATING, COPYRIGHT, AUTHOR, .
HTTP-EQUIV = "Texte" - CONTENT-TYPE, CONTENT-LANGUAGE, EXPIRES, WINDOW-TARGET, .
CONTENT = "Texte" - Valeur de NAME ou HTTP-EQUIV	LANG = "Texte" - FR, .
Attributs de listes <OL> et <UL>
TYPE = "1, a, A, i, I" - Numérotation pour <OL>	TYPE = "DISK, SQUARE, CIRCLE" - Puce pour <UL>
START = "Nombre" - Départ de numérotation
Attributs de tableaux <TABLE>
ALIGN = "LEFT, RIGHT, CENTER" - Position du tableau	BORDER = "Taille" - Largeur de la bordure
CELLPADDING = "Taille" - Espace avec le texte	CELLSPACING = "Taille" à Espace entre les cellules
FRAME="ROWS, COLS, GROUPS" - Bordures incomplètes	WIDTH = "Taille ou %" - Largeur du tableau
RULE="ABOVE, BELOW, HSIDES, LHS, RHS, VSIDES" - Bordures incomplètes
Attributs de cellules de tableaux <TD>
ALIGN = "LEFT, RIGHT, CENTER, JUSTIFY" - Alignement horizontal
VALIGN = "TOP, MIDDLE, BOTTOM, BASELINE" - Alignement vertical
COLSPAN = "Nombre" - Fusion horizontale	ROWSPAN = "Nombre" - Fusion verticale
BGCOLOR = "Couleur" - Couleur d'arrière-plan
Attributs de lignes de tableaux <TR>
ALIGN = "LEFT, RIGHT, CENTER, JUSTIFY" - Alignement horizontal
VALIGN = "TOP, MIDDLE, BOTTOM, BASELINE" - Alignement vertical
Attributs de formulaires <FORM>
ACTION ="URL" - Adresse ou script à exécuter	NAME = "Nom du formulaire"
ENCTYPE = "Type de données"- "text/plain", ...	METHOD = "GET, POST"
TARGET = "Fenêtre"
Attributs de boutons <BUTTON>
DISABLED - Inutilisable	NAME = "Nom du bouton"
TYPE = "BUTTON, SUBMIT, RESET" - Appel d'un script, envoi des données, réinitialisation du formulaire
Attributs de champs de saisies <INPUT>
CHECKED - Activé	DISABLED - Inutilisable
READONLY - Non modifiable	MAXLENGTH = "Nombre de caractères"
NAME = "Nom du champ" - Plusieurs éléments du même nom forment un groupe (checkbox, radio)
VALUE = "Valeur" - Valeur pour différencier les éléments d'un même groupe (checkbox, radio)
TYPE = "TEXT, PASSWORD, CHECKBOX, RADIO, SUBMIT, RESET, FILE, HIDDEN, IMAGE, BUTTON"
SIZE = "largeur ou largeur, hauteur" - Taille de la fenêtre de saisie en caractères
Attributs des listes <SELECT>
DISABLED - Inutilisable	MULTIPLE - Permet le choix de plusieurs valeurs
NAME ="Nom de la liste"	SIZE = "Nombre d'items visibles"
Attributs d'éléments de listes <OPTION>
DISABLED - Inutilisable	SELECTED - Valeur par défaut de la liste
VALUE = "Valeur" - Valeur d'un élément de la liste
Attributs des zones de textes <TEXTAREA>
DISABLED - Inutilisable	READONLY - Non modifiable
COLS = "Nombre" - Nombre de colonnes	ROWS = "Nombre" - Nombre de lignes. Défaut : 1
NAME = "Nom de la zone"

Valeurs des attributs

Valeurs de Fenêtres

Fenêtre peut prendre le nom d'un cadre défini dans le FRAMESET, _blank pour charger la page dans une nouvelle fenêtre, _parent pour la charger dans la fenêtre précédente, _self pour la charger dans la fenêtre courante, _top pour utiliser la totalité de la fenêtre.

Valeurs de Couleurs

Forme #RRGGBB : Trois valeurs hexadécimales accolées (de 00 à FF) représentant les intensités de Rouge, Vert, Bleu.
Forme #RGB : Trois valeurs hexadécimales (de 0 à F) accolées représentant les intensités de Rouge, Vert, Bleu.
Forme RGB(x,y,z) : Triplet de valeurs décimales (de 0 à 255) représentant les intensités de Rouge, Vert, Bleu.
Forme RGB(x%,y%,z%) : Triplet de pourcentages (de 0 à 100) représentant les intensités de Rouge, Vert, Bleu.
Nom de couleur : A choisir parmi AQUA, BLACK, BLUE, FUCHSIA, GRAY, GREEN, LIME, MAROON, NAVY, OLIVE, PURPLE, RED, SILVER, TEAL, WHITE, YELLOW

Valeurs de Tailles de caractères

Une valeur absolue comprise entre 1 et 7 (défaut 3)
Une valeur relative à la police courante (précédée par + ou -)
On peut utiliser le PT (point = 1 / 72 pouce soit environ 0,353 mm) ou le PICA (12 points soit environ 4,233 mm)
(le point français (didot) mesure environ 0,376 mm)
En valeur relative, EM est la taille de la police courante et EX la hauteur d'une lettre minuscule sans jambage.

Valeurs de Tailles

Elles sont toujours décimales et peuvent être suivies d'un nom d'unité (sans espace) comme MM (millimètre), CM (centimètre), INCH (pouce=2,54cm), PIXEL (unité par défaut liée à l'écran)
L'unité relative est le % (pourcentage), très utile quand la référence est la largeur de l'écran.

Détection des événements

ONRESET, ONSUBMIT dans la balise <FORM> - Annulation, Validation d'un formulaire

ONLOAD, ONUNLOAD dans les balises <BODY>, <FRAMESET>, <IMG> - Au chargement, En fermant

ONABORT dans <IMG> - Arrêt du chargement

ONCHANGE, ONSELECT dans <INPUT>, <SELECT>, <TEXTAREA> - Modification, Sélection

ONBLUR, ONFOCUS dans <BUTTON>, <INPUT>, <LABEL>, <SELECT>, <TEXTAREA> - En quittant, En arrivant sur

ONCLICK, ONDBCLICK, ONKEYDOWN, ONKEYPRESS, ONKEYUP, ONMOUSEDOWN, ONMOUSEMOVE, ONMOUSEOUT, ONMOUSEOVER, ONMOUSEUP dans un très grand nombre de balises - Click, Double Click, Touche clavier enfoncée, Touche clavier utilisée, Touche clavier relachée, Bouton souris enfoncé, Déplacement souris, Quand la souris quitte, Quand la souris est dessus, Bouton souris relaché.

2) Quelques exemples de pages HTML

On peut fabriquer des pages HTML avec un simple Éditeur de texte, l'extension HTM (ou HTML) et quelques connaissances du langage. Bien entendu, l'utilisation d'un Éditeur de HTML (NVU de Mozilla, Dreamweaver de Macromedia, WebExpert de VisiCom, Front Page de Microsoft, ...) facilite leur réalisation. Il n'est pas dans mes objectifs de détailler ici l'utilisation de ces outils.

Quelques pages simples
Le langage HTML est tel qu'une erreur d'écriture ne provoque pas un "plantage" de la machine (l'affichage de la partie fautive est interprété par le navigateur). Quand vous tapez le nom d'un marqueur, tapez immédiatement le marqueur de fin (s'il existe bien sûr).

Hello word ! : Cliquez sur Page1.html pour voir le résultat du code de la cellule de gauche. Cliquez sur Page1a.html pour voir le résultat des modifications de la cellule de droite.
<HTML> <HEAD><TITLE>Première page</TITLE></HEAD> <BODY> Bonjour Monsieur Comment vas-tu ? </BODY> </HTML>	<HTML> <HEAD><TITLE> Première page</TITLE></HEAD> <BODY BGCOLOR = "#FF0000"> <H1 ALIGN="center">Pas Beau</H1> <P>Bonjour     Monsieur<BR> <FONT COLOR="#0000FF">Comment vas-tu ?</FONT> </P> <HR> </BODY> </HTML>

Remarquez la disparition des espaces multiples et la différence entre le saut de ligne <BR> et celui provoqué par <P> ... </P>.

Une image : Cliquez sur Page2.html pour voir le résultat du code de la cellule de gauche. Cliquez sur Page2a.html pour voir le résultat des modifications de la cellule de droite.
<HTML><HEAD> <TITLE>Deuxième Page</TITLE></HEAD> <BODY><P><IMG SRC ="Picardie.jpg" WIDTH="768" HEIGHT="488" ALT="Carte de la Picardie"></P> </BODY> </HTML>	<BODY BACKGROUND="bPicardieAnc.gif"> <IMG SRC ="Picardie.jpg" WIDTH="384" HEIGHT="244" BORDER="4" ALIGN="RIGHT"ALT="Carte de la Picardie">

WIDTH et HEIGHT redimensionnent l'image (elle peut être déformée). ALT affiche un commentaire au passage de la souris.

Des liens hypertextes : Le fichier Page3.html (code de la cellule de gauche) établit un lien avec les fichiers Page1 et Page2 ci-dessus.
<HTML> <HEAD><TITLE>Troisième page</TITLE></HEAD> <BODY> <P><A HREF="Page1.html">Vers la page 1</A></P> <P><A HREF="Page2.html">Vers la page 2</A></P> <P><A HREF="Page0.html">Vers la page 0</A></P> </BODY> </HTML>	L'absence du fichier Page0.html provoque l'affichage d'une page d'erreur. Le fichier Page3a.html modifie l'affichage des liens et corrige l'erreur. <BODY LINK="#FF0000" ALINK="#00FF00" VLINK="#0000FF"> <A HREF = "http://www.google.fr/">

En ajoutant <P><A HREF="Page3.html">Retour</A></P> au code des fichiers Page1 et Page2, il serait possible de revenir sur Page3 sans utiliser la touche "Page précédente" du navigateur.

Une nouvelle fenêtre : Pour que chaque lien ouvre une nouvelle fenêtre du navigateur, il faut ajouter target="_blank" à l'intérieur de la balise <A ... comme dans le fichier Vignettes.htm.

Une Image réactive : Le fichier Page4.html est obtenu en modifiant le fichier Page2.

<IMG SRC ="Picardie.jpg" WIDTH="768" HEIGHT="488" USEMAP="#map1" ALT="Carte de la Picardie">
Dans le corps du document :
<MAP NAME="map1">
<AREA SHAPE="rect" COORDS="0,0,100,100" HREF="Page1.html">
<AREA SHAPE="circle" COORDS="250,250,100" HREF="Page3.html"></MAP>

Les zones définies par AREA réagissent au clic de la souris. L'origine des coordonnées (0,0) est le coin nord-Ouest de l'image. Le rectangle est défini par les coordonnées des extrémités de sa diagonale, le cercle par les coordonnées de son centre et son rayon.

Une ancre : Ouvrez le fichier Exemple1 et regardez le code source pour voir comment on utilise une "ancre" à l'intérieur d'une page internet. Les nombreux <br> permettent de fabriquer une page assez longue. Les <A HREF="# ... pointent sur les signets définis dans la page par les <A NAME ...

Un tableau simple : Les tableaux sont souvent utilisés pour disposer des éléments (textes, images, liens, icônes) dans toute la surface d'un document (comme dans les anciens traitements de texte). Ouvrez le fichier Exemple2 et regardez le code source pour voir le codage d'un tableau simple. Entre les balises <TABLE> ... </TABLE>, les <TR> ... </TR> définissent des lignes et les <TD> ... </TD> des divisions de ces lignes (les colonnes). Il doit y avoir cohérence entre les lignes d'un même tableau.

Un tableau amélioré : Ouvrez le fichier Exemple3 et regardez le code source pour voir le codage d'un tableau complexe.
COLSPAN fusionne des colonnes, ROWSPAN des lignes.

Une structure de cadres : Ouvrez le fichier Exemple4 et regardez le code source pour voir la structure d'une page constituée de trois cadres. Le premier <FRAMESET> définit deux lignes, le premier <FRAME> nomme la première ligne, le second <FRAMESET> définit deux colonnes dans la deuxième ligne. Les deux <FRAME> suivants nomment les deux colonnes. Attention, chaque cadre (frame) contient une page internet.

Une structure de cadres imbriqués : Ouvrez le fichier Exemple5 et regardez le code source pour voir la structure d'une page contenant un cadre incorporé. Le cadre défini par <IFRAME> contient une page internet (il peut même contenir la page qui le contient !).

Une structure de cadres optimisée : Ouvrez le fichier Catalogne.htm. Il montre, à partir de l'exemple simplifié d'un voyage touristique, comment on peut relier les FRAMES d'un FRAMESET. Notez dans la balise <BODY> des pages "Lundi.htm", "Mardi.htm"... l'utilisation de l'événement ONLOAD pour maintenir le contenu du cadre central en accord avec le cadre de gauche.

Un formulaire : Ouvrez le fichier Exemple6 et regardez le code source pour voir un formulaire simple.
Il porte le nom de "formul1", il utilise la méthode "post" pour transmettre ses données. Le bouton "Envoyer", de type SUBMIT, déclanche l'action "mailto" c'est à dire l'envoi d'un courrier électronique.
Utilisez le bouton Parcourir pour choisir un fichier et le bouton Annuler (de type RESET) pour réinitialiser le formulaire.

Un formulaire optimisé : Ouvrez le fichier Formulaire.htm. Il contient un exemple des balises qu'on peut rencontrer dans un formulaire, de leur organisation et de leur utilisation. Regardez le fichier source et notez, dans l'en-tête (entre les balises <SCRIPT> et </SCRIPT>), l'utilisation de la fonction JavaScript setTimeout() pour mettre à jour en continu l'affichage de l'heure dans une zone de texte.
Remarquez les regroupements dans des FIELDSET, l'utilisation de LEGEND, les INPUT de type HIDDEN, PASSWORD et FILE ainsi que deux façons de présenter des listes de choix simples ou multiples.

3) Complément

Les méta-informations
Les balises META sont placées dans l'en-tête du document. Elles fournissent aux robots d'exploration des moteurs de recherches des informations sur le contenu des pages visitées. On trouve :

<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-1">	Jeu de caractères utilisé : windows-1253 pour le grec, windows-1250 pour le cyrillique, ...
<META NAME="generator" CONTENT="notepad.exe">	Publicité pour un éditeur de html
<META NAME="author" CONTENT="moi-même">	Indentification de l'auteur
<META NAME="keywords" LANG="fr" CONTENT="mots clés séparés par des virgules">	A l'attention des moteurs de recherches. Pas plus de 256 caractères
<META NAME="description" CONTENT="description du site">	A l'attention des moteurs de recherches. Pas plus de 256 caractères
<META NAME="rating" CONTENT="HTML">	Classement du site
<META NAME="revisit-after" CONTENT="14 days">	Invitation à revenir ...

Le fichier Html.exe (© Michaël Duval à http://trafalga.free.fr) permet de mettre ces informations au format HTML.
Notes du W3C

Retour au début