Mémento HTML

Patrick TRAU

Une version PDF est également disponible (pas toujours mise à jour en cas de modifications mineures).

Ceci n'a pas la prétention d'être un cours sur HTML, il en existe déjà des exemples en français qui sont tellement bien faits que se serait inutile. Néanmoins ce mémento regroupe rapidement les codes les plus courants, utilisés dans les cas simples. Le W3C publie les normes d'HTML.

Pour commencer, il faut dire que HTML permet de décrire un contenu : on donne du texte, des images, et diverses indications. Le tout est disposé sur un serveur web. Celui qui désire regarder cette page chargera ce fichier dans un navigateur, qui interpretera les indications pour disposer au mieux le contenu. L'affichage d'une page dépend donc principalement du matériel (caracteristiques de l'écran en particulier) et logiciel utilisé par le lecteur. Si vous voulez imposer une mise en page, vous vous êtes trompé de langage (je conseillerais le PDF ou PS).

Codage des caractères et commandes

Le format HTML permet de tout représenter uniquement en ASCII (et même en ASCII 7 bits). On n'utilise donc que des caractères "imprimables", aucun caractère de contôle. Donc, en premier lieu, on considère qu'un ou plusieurs espaces, tabulations ou retours chariot ne représentent qu'un seul espace. C'est le client (Firefox, Internet Explorer, konqueror...) qui gèrera automatiquement les retours à la ligne (en fonction de la largeur de la fenêtre). On représente les paragraphes en les encadrant par <p> et </p> (au </p> il effectue un retour chariot et saut d'une ligne), les retours à la ligne (à l'intérieur d'un paragraphe, sans insertion de ligne blanche) par <BR />. Si un morceau de texte ne doit pas être coupé, l'encadrer par <nobr> et </nobr> (si le texte sort de la fenêtre on on utilisera "l'ascenseur").

Il n'y a pas moyen (officiellement) de représenter une tabulation ou plusieurs blancs (sauf avec <pre>), mais HTML accepte le code   pour forcer un blanc insécable (qui est également utile que si on veut en mettre plusieurs à la suite).

Tous les caractères spéciaux (accentués en particulier) ne sont pas utilisables directement, car il existe de nombreuses normes différentes pour les représenter. Il est possible de déclarer le codage utilisé (charset), mais le plus sûr est de prévoir un codage spécifique pour ces caractères (lui même en ASCII 7 bits) :

à	à	é	é	î	î	ö	ö
ç	ç	ñ	ñ	Σ	Σ	σ	σ

Evidement, il a fallu également prévoir la possibilité d'afficher les caractères spéciaux : < pour <, > pour >, & pour & (n'oubliez pas le point virgule).

On peut visualiser ici une table un peu plus complète (tous les accents utilisés en français), ou complète (y compris signes mathématiques et lettres grèques). Ici, la liste complète définie pour HTML4.01. Un programme (ou une macro dans votre traitement de texte favori) assurant la transformation est facile à écrire (exemple en C ici).

Les codes en & sont "sensibles à la case", c'est à dire dépendent des majuscules / minuscules (È donne È).

Toutes les autres commandes HTML sont délimitées par <commande option="valeur"> et </commande>. Les codes en < > (appelés "balises" ou "tags") sont "insensibles à la case", c'est à dire indépendants des majuscules / minuscules. Il est néanmoins conseillé d'utiliser des minuscules (pour les évolutions futures). Les commandes peuvent être imbriquées mais pas croisées (<com1> <com2> ... </com1> </com2> est interdit). La balise d'ouverture peut (ou non) comporter une ou plusieurs options, mais jamais la balise de fermeture ! Si une balise n'attend pas de balise de fermeture, il faut le dire en insérant un / juste devant le > (<br />)

 sont les délimiteurs de commentaires. On peut mettre en commentaire un gros texte, même s'il contient des commandes HTML (sauf sur d'anciens navigateurs).

Format d'un fichier HTML

Un fichier html doit être suffixé par .htm ou .html.

Le fichier contient en premier une indication sur la version du langage utilisée :

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Puis on débute par <html>, et le fichier se termine par un </html>. Entre ces deux balises, le fichier est composé de deux parties : l'entête et le corps.

L'entête est délimitée par <head> et </head>. Elle contient des informations générales sur la page, mais qui ne seront pas directement affichées dans celle-ci. Le titre du document (affiché dans le bandeau supérieur de la fenêtre ou l'icône, ) y est défini entre <title> et </title>. Elle peut également contenir une commande <base href="URL-de-base">, qui donne l'URL qui sera ajoutée devant tout lien dans le texte qui ne contient pas un URL complet. Souvent cette commande est omise, les liens relatifs seront alors tous basés au même endroit (même machine, même répertoire) que le fichier actuel.

On peut aussi mettre dans l'entête des informations pour les moteurs :

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> (ou iso-8859-15, n'utilisez pas le charset windowsXXX)
<meta name="generator" content="MS Notepad">
<meta name="author" content="Patrick TRAU">
<meta name="description" content="Je décris mon site en 2-3 phrases">
<meta name="keywords" content="motclef1,motclef2,motclef3,..."> (mettez plusieurs fois SEX si vous voulez qu'on vous lise souvent)
<link rev="made" href="MAILTO:moi@mondomaine.monpays">

C'est également dans l'entête que l'on définira les styles (STYLE) et les programmes (SCRIPT) que l'on pourrait utiliser dans la page.

Puis on définit le CORPS du fichier, entre les commandes <body> et </body>. C'est dans le corps qu'on définira le contenu qui sera affiché dans la page. La commande <body> peut accepter diverses options :

background="URL.gif" : le fond est constitué de l'image indiquée (répétée si nécessaire). Prenez soin de la prendre peu contrastée si vous voulez que le reste soit bien visible.
bgcolor=#couleur : couleur de fond (on peut utiliser cette option en plus de la précédente au cas ou l'utilisateur a choisi (pour accélérer l'affichage) de ne pas afficher les images.
text=#couleur : couleur du texte
link=#couleur : couleur des liens
alink=#couleur : couleur du lien situé sous la souris
vlink=#couleur : couleur des liens déjà visités

On note une couleur par #RRGGBB ou RR est un nombre hexadécimal entre 00 et FF (255) correspondant au Rouge, GG pour le vert, BB pour le bleu. Par exemple, #FFFFFF pour le blanc, #000000 pour le noir, #FF00FF violet,... Vous pouvez regarder cette table de couleurs.

Le reste de ce document va détailler ce que l'on peut mettre dans le corps de la page (BODY).

Les formats de caractères

On modifie l'affichage des caractères :

<b> gras (Bold) </b>
<i> italiques </i>
<u> souligné (Underlined) </u>
<sup> expo^sant </sup>
<sub> ind_ice </sub>
<tt> police a espacement fixe (machine à écrire) </tt>

On peut aussi imposer l'affichage via un choix de police (FONT) :

<font color=#RRGGBB> texte en couleur </font>
<font size="+2"> texte plus grand </font> ("+1" à "+5" pour augmenter, "-1" à "-5" pour diminuer)
<font face="symbol"> texte texte dans une autre police </font>. ATTENTION ! Si la police n'existe pas chez la personne qui vous lit, le résultat sera décevant (souvent pire que si vous n'aviez rien précisé). Donc n'en abusez pas (sauf en intranet). Pour être plus sur vous pouvez mettre une liste de polices alternatives : <font face="TIMES NEW ROMAN" , "TIMES" , "HELVETICA">.

Rappellez vous qu'on ferme une balise SANS ses options, on ne peut donc pas imbriquer <font color="...">...<font size="...">...</font>. On devra donc utiliser : <font color="..." size="...">...</font><font size="...">...</font>

Les paragraphes

Attention : tous ces styles sont des styles de paragraphes: ils seront séparés par une ligne vide !

On peut définir six niveaux de titres de chapitres, de <h1>très gros titre</h1> à <h6>tout petit titre</h6>. Il vaut mieux laisser le "browser" choisir le style de ces titres et ne pas y imbriquer d'autres styles (par contre on peut mettre des liens, ...). On peut y spécifier la justification : <H1 align="center">...</h1> avec l'alignement valant LEFT (par défaut), CENTER ou RIGHT. Les niveaux de titres sont très importants, certains moteurs de recherche basent leur indexation (entre autre) sur les titres (et donc les sorties HTML des produits MSOffice sont nulles : les titres sont des paragraphes normaux avec un "FONT SIZE").

Un paragraphe est entre <p> et </p>. On également peut spécifier la justification du paragraphe : <p align="center">...</p> avec l'alignement valant LEFT (par défaut), CENTER, RIGHT ou JUSTIFY. A l'intérieur d'un paragraphe, on peut toujours forcer un saut en début de nouvelle ligne (sans espacement) par une balise <br />.

Pour imposer un style à un groupe de paragraphes, il suffit de créer une division :
<div options> tous les paragraphes, titres,... que vous désirez </div>
les options peuvent être par exemple align="center ou style="color:blue"

On affiche un texte préformaté par <pre>. Ceci utilise une police à espacement fixe, et respecte les blancs, tabulations et retours chariots. Ceci permet d'afficher des tableaux, codes sources, listings,... On a le droit de mettre des balises à l'intérieur (et de gérer les accents) :

<pre>
drwxr-xr--      moi     nous    .
drwxr-xr--      moi     nous    ..
-rw-r--r--      moi     nous    mon-fichier.sous.Unix
</pre>

pour indenter tout un paragraphe ou bloc de texte, on utilise <blockquote> ... </blockquote>.

Les listes

Avec ajout d'un point (comme ici) :
<ul> début de liste

<li> premier élément</li>

<li> second élément</li>

..................
</ul> fin de liste
Remarque : on peut insérer une ligne de "titre de liste" entre <ul> et le 1er <li> en le démarrant par <lh>
Numérotée :
<ol>, </ol> début et fin de liste. <li> pour chaque élément (<lh> pour le titre, qui ne sera pas numéroté).
<ol type="A"> numérotera en lettres majuscules (A, B, C...). On peut également utiliser les types : a (lettres minuscules), I (romain), i (romain minuscule), 1 (chiffres).
Liste de définitions
<dl> début de la liste

<dt> 1er nom à définir

<dd> sa définition

..................
</dl> fin de liste
Les noms à définir seront mis en début de ligne, les définitions sur la ligne suivante, indentées. On peut mettre les noms et leur définition sur la même ligne (si nom court) en encadrant la liste par<dl compact="1"> et </dl>

Remarque : on peut imbriquer des listes, du même type ou non.

Les images

En premier lieu, on peut tracer une ligne horizontale pour séparer du texte par <hr>. On peut modifier son épaisseur (size), sa longueur (width) et sa position (Align=LEFT, RIGHT ou CENTER). Par exemple : <hr size="4" width="50%"> (par défaut : centré)

On insère une image par <img src="nomfig.gif" /> (nomfic peut être un URL complet). On peut rajouter des options :

HEIGHT=nombre de pixels WIDTH=nb pixels : donne la taille du dessin, le browser n'a pas à la recalculer.
ALT="texte" : ce texte sera mis à la place de l'image en cas d'impossibilité d'afficher le dessin (si le BROWSER est configuré pour aller plus vite par exemple).
ALIGN=TOP, MIDDLE ou BOTTOM : l'image sera alignée avec le haut ou le bas du texte précédent et suivant l'image (si l'image est dans le texte, sans <p>)(BOTTOM si rien de précisé). LEFT : le texte qui suit est mis à droite de l'image, ou RIGHT il est mis à gauche de l'image (qui elle est à droite, c'est clair ?), de temps en temps un <br clear="all"> est utile pour recommencer en dessous des images.
HSPACE="2", VSPACE="2" place laissée autour de l'image
BORDER (=0 pour ôter l'encadrement si l'image est DANS un lien <a HREF>)

Les images doivent soit être d'extension .gif, .png ou .jpeg, mais toute autre extension est possible, à condition que l'utilisateur possède le "plug-in" correspondant (TIFF, vidéo QuickTime, sons AU, ...)

Les liens hypertexte

On définit un lien par <a href="URL">texte</a>. Le texte sera d'une autre couleur (bleu ?), cliquer dessus appelera l'URL. Le texte peut contenir des commandes, en particulier <img src="icone.gif">

Rappel : un URL est de la forme :
type_application://nom:mot_de_passe@machine.domaine:port/chemin/fichier#ancre
Avec type_application pouvant être file (fichier local), ftp (ftp anonyme uniquement), http, gopher, wais, news, telnet, mailto. Tout n'a pas à être donné, le browser se débrouille (type=http, nom=anonymous, machine=celle du document source, domaine=celui de la machine source, port=le bon, chemin=celui du fichier source, fichier=source, ancre=début du fichier). Une ancre est un label posé dans un fichier par <a name="nom">texte pointé</a>. On y accède par un lien (complet ou au minimum <a href="#nom"> si l'ancre est dans le même fichier.

les liens sur un graphique (map)

Si vous avez créé un graphique (.gif), vous pouvez activer différents liens suivant la position de la souris. Voici comment on fait : dans le document source, j'insère l'image ainsi :

	<img src="monimage.gif" usemap="#monplan" align="middle">
	<map name="monplan">
	<area shape=rect coords="165,3,299,42" href="lien-1.htm">
	<area shape=rect coords="365,13,569,50" href="/repertoire/autrelien">
	<area shape=circle coords="282, 137, 50" href="http://lien-exterieur">
	</map>

La zone à cliquer peut être un rectangle (rect, on donne les coordonnées du coin supérieur gauche puis du coin inférieur droit) ou un cercle (circle, on donne le centre et le rayon) ou d'autres possibilités que je ne détaille pas.

Pour trouver les coordonnées, j'ai créé un autre fichier html contenant la commande :

    <a href="test"><img src="monimage.gif" ismap></a>

et je l'ai regardé sous Firefox (dans la bande du bas il me donne la position de la souris (test?x,y).

Ceci est la méthode "lourde" pour créer une "carte"; plusieurs éditeurs HTML du commerce permettent de faire cela plus facilement bien évidement.

Les tableaux

Un tableau débute par <table> et se termine par </table>. Chaque ligne est comprise entre <tr> et </tr> Dans une ligne, chaque colonne (cellule) est entre <td> et </td> si elle est "normale", <th> ... </th> si c'est une case entête (elle sera centrée et mise en gras). Juste après <table>, on peut indiquer <caption> titre du tableau </caption>, le titre sera mis au dessus du tableau, centré (<caption align="bottom"> titre </caption> pour le mettre sous le tableau).

Les options de <table> sont

BORDER si l'on veut un encadrement des cellules (border="5" pour fixer l'épaisseur 5). En HTML 4, on utilisera FRAME=BORDER. FRAME accepte les arguments : VOID (pas de bordure), ABOVE (en haut), BELOW (en bas), HSIDES (bords horizontaux), VSIDES (verticaux), LHS (Left-Hand Side) et RHS (côté droit).
WIDTH="30%" : largeur du tableau
CELLSPACING=taille du trait
CELLPADDING=taille : "blanc" autour des données

Les options de <td> ou <th> sont :

ALIGN="LEFT" ou CENTER ou RIGHT : justification horizontale du texte dans la cellule,
VALIGN="TOP" ou MIDDLE ou BOTTOM : justification verticale,
COLSPAN="n" : pour une cellule de largeur n colonnes,
ROWSPAN="n" : pour une cellule de hauteur n lignes,
NOWRAP : empêcher d'aller à la ligne dans la cellule même si le texte est trop long.

Les tableaux peuvent être imbriqués, ou contenir des dessins, listes,.... Mozilla et Explorer acceptent dans TABLE, TR et TD les options bgcolor=coul et BORDERCOLOR=coul.

Les FORMulaires, JavaScripts et appels CGI

Vu la quantité de possibilités je vous renvoie à ma liste de liens, dans le chapitre concernant les documents sur l'informatique, et en particulier ceux-ci

Pour un peu d'informations sur les JavaScripts, vous pouvez regarder mon petit cours JavaScript (comment créer un programme interactif, avec saisie de données et affichage de résultats de calcul, utilisation de formulaires...). Si vous voulez voir une application marrante (et peu gourmande en débit) regardez ce "roll-over" (pour tout comprendre, et éventuellement vous en servir, faites un affichage du code source). Je vous propose aussi deux exemples commentés (du mieux que j'ai pu) : un compteur de page que j'ai écrit seul (donc plus simple que les autres) : la lecture de la page lance automatiquement un programme sur mon serveur (cgi) que j'ai écrit en C , et surtout comment lancer à distance un programme sur notre serveur (cgi, et toujours en C) mais ce coup-ci en envoyant des données depuis un formulaire, et en créant un graphique. Dans ces documents, je n'utilise qu'une petite partie des possibilités, mais je pense que ce sont de bons exemples.

les FRAMES

De base :

<html>
<head>
<title>le titre de la page</title>
</head>

<frameset cols="20%,*"> <!--2 colonnes, la 1ère fait 20% de l'écran-->
  <frame name="gauche" SRC="fic_pour_gauche.htm" /><!-- le nom de la fenêtre, le fichier qu'on y met-->
  <frameset ROWS="*,3*"> <!--la fenêtre de droite est elle même coupée en deux lignes-->
    <frame name="HautDroit" SRC="haut.htm" />
    <frame name="BasDroit" SRC="bas.htm" />
  </frameset>
  <noframes> <!--ici je mets ce qu'on fera si le client n'accèpte pas les frames-->
    <body>
      <p>Ton navigateur n'accepte pas les frames, tant pis pour toi ! (ou moi !!!)</p>
    </body>
  </noframes>
</frameset>
</html>

Remarques :

Pour envoyer un lien dans une autre fenêtre que dans celle actuelle, il suffit de mettre le lien <a href="nomfic.htm" target="nomfenêtre">.
Pour mettre un lien qui abandonne les fenêtres, mettre target="_top" !!!
Pour mettre un lien vers une nouvelle fenêtre, mettre target="_blank"
Pour retourner à la fenêtre parent (si on est dans une _blank) : target="_parent"
Options de <frame> : SCROLLING=YES|NO|AUTO, MARGINWIDTH="value", MARGINHEIGHT="value", NORESIZE. Mais n'oubliez jamais que votre lecteur n'a pas la même définition d'écran que vous, et qu'il ne veut peut-être pas mettre votre fenêtre en plein écran. ONLOAD et ONUNLOAD permettent d'appeler un Javascript
comment changer plusieurs fenêtres d'un seul clic ? facile : imbriquer les frames (page de départ : 2 frames, gauche et droite, droite pointe sur un fichier html qui contient deux frames haut et bas).

les feuilles de style

Comme vous l'avez vu, chaque entité du HTML (P, H1,...) sera affichée d'une manière par défaut, sauf si vous incluez des options dans la balise d'ouverture. Mais il peut être fatiguant de specifier dans arrêt les mêmes options. D'ou les styles. Il y a trois manières de définir un style :

localement, juste dans une balise : <p style="....">. Ceci s'appliquera jusqu'à la fermeture de la balise. Exemple : <h1 style="color:blue"> met CE titre en bleu.

dans toute une page, on définit le style dans HEAD :

<style>
h1{color:blue} /* TOUS les H1 seront bleus, sauf contre-ordre local (remarquez les accolades) */
h2,h3,h4,h5,h6{color:lightblue} /* les autres titres en bleu clair (remarquez les virgules)  */
.monstyle{color:red} /* j'invente un style personalisé nommé "monstyle" (remarquez le point !) */
h1.truc {....} /* uniquement pour "<H1 class="truc">" */
p b {background-color:#808080;font-weight:bold} /* les B dans des P (mais pas dans des H ou TD...) remarquez l'espace */
</style>

On copie toute la définition du style comme ci-dessus dans un fichier (les balises <style> </style> non comprises), et on inclut dans HEAD :
<link rel="stylesheet" type="text/css" href="monnomdefichier.css" />
Le but est bien sur d'inclure la même feuille de style dans plusieurs pages.

Dans le cas d'un style personalisé (nommé "monstyle" ici), on a deux manières de l'appliquer : à quelques caractères par <span class="monstyle">...</span>, à un ou plusieurs paragraphes par <div class="monstyle">...</div>.

Pour les tailles, on peut utiliser diverses unités : in, cm, mm, px (pixel), pt (1/72in), %. Ex : border:2px;

Pour une liste des principales caractéristiques pouvant être définies dans un style, regardez ce document, ou la page de JM Petit. Un bon site sur css : alsacreations.com.

Cette page est publiée depuis le 1/10/1997, vous êtes le ème lecteur de cette page

Pour toute remarque, Pour ma "Home Page", cliquez ici (http://ptrau.free.fr). Date de dernière modification : (si votre navigateur autorise les scripts).