Mémento HTML

Patrick TRAU


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 : l'UNGI de Gilles MAIRE. Autre mémento : PhilGate (HTML 4.0). Pour des liens, regardez chez Mephisto.
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 : version 3.2 ou la 4.0 (ou en français).

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 PDF).

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 &nbsp; 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) :

à&agrave;é&eacute;î&icirc;ö&ouml;
ç&ccedil;ñ&ntilde;Σ&Sigma;σ&sigma;

Evidement, il a fallu également prévoir la possibilité d'afficher les caractères spéciaux : &lt; pour <, &gt; pour >, &amp; 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 (&Egrave; 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 />)

<!-- et --> 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 :

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 :

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 :

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

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

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 :

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

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

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 :

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 :

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.


Depuis le 1/10/1997, vous êtes le compteur ème lecteur de cette page

Pour toute remarque, Pour ma "Home Page", cliquez ici (http://www-ipst.u-strasbg.fr/pat). Date de dernière modification : (si votre navigateur autorise les scripts).