Structure d'un document HTML 4.0


Un document HTML est composé de deux blocs : un en-tête et un corps.
L'en-tête contient toute les informations nécessaire à l'identification du document. Son contenu n'est pas affiché dans la fenêtre du navigateur.
Le corps contient le texte du document. Il est affiché dans la fenêtre du navigateur.

Il n'est pas nécessaire d'identifier explicitement ces deux parties, mais depuis HTML3.2 il faut obligatoirement indiquer la version du langage HTML utilisé ainsi que le titre du document. Un document HTML 4.0 minimal se résume donc à ceci :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/PR-html40/strict.dtd">
<TITLE>
2&eacute;me exemple</TITLE>
...texte du document
Contenu d' un document HTML
HTML OO HyperText Markup Language. (%html.content;)
%i18n; -- lang, dir --
%html.content; "HEAD, BODY"
%version; "VERSION CDATA #FIXED '%HTML.version;'"
%HTML.version; "-//W3C//DTD HTML 3.2 Final//EN"
<!-- --> OO Commentaire.

<HTML> HTML2.0
Cette balise encadre le contenu d'un document HTML. En-tête et corps compris.

<! Commentaires > HTML 2.0
Les commentaires à l'intérieur de <! et > sont ignoré par le browser. Cette balise peut se trouver n'importe ou dans le document et les commentaires peuvent prendre plusieurs lignes.

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML Level 1//EN">
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/PR-html40/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/PR-html40/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://www.w3.org/TR/PR-html40/frameset.dtd">
HTML 3.2
Ces balises définissent le DTD 'Document Type Definition' utilisé pour l'interprétation de la page. Respectivement HTML 2.0, 3.0, 3.2, et 4.0 dans les exemples précédents. Cette commande est obligatoire pour les documents se conformants au DTD HTML 3.2 et au-delˆ, cependant les navigateurs ni prêteront que peu d'importance. L'intérét de cette balise prend tout son sens avec des lecteurs SGML.

Un document HTML peut aussi contenir, à la place de BODY, la balise FRAMESET qui définit un découpage de la fenêtre du navigateur en sous-fenêtres appelés frames. Cette balise qui faisait partie d'HTML 3.0 n'a pas été validé par HTML 3.2. Voir le chapitre "frames" pour plus d'informations.

Contenu du tag <HTML>
HEAD OO Encadre l'en-tête du document. (%head.content) + (%head.misc)
%i18n; -- lang,dir --
profile %URL; #IMPLIED -- named dictionary of meta info --
BODY OO Encadre le corps du document.
Il contient principalement le titre, couleur, graphique de fond du document.
(%block;|SCRIPT)+ +(INS|DEL)
%attrs; -- %coreattrs, %i18n, %events --
onload %Script; #IMPLIED -- the document has been loaded --
onunload %Script; #IMPLIED -- the document has been removed --

<HEAD> HTML 2.0
Définit l'en-tête d'un document HTML dans lequel se situe des informations complémentaires sur la nature de la page. Cette balise ne possède pas d'attributs. En HTML 3.2, il n'est pas nécessaire de délimiter explicitement l'en-tête.

<BODY> HTML 2.0
Définit le corps d'un document HTML. Les attributs suivants peuvent être spécifiés.

BACKGROUND=URL HTML 3.2
URL absolue ou relative pointant sur un fichier graphique. Cette image se répète afin de remplir le fond de la fenêtre.
BGCOLOR=color|#RRVVBB HTML 3.2
Couleur du fond de la fenêtre.
TEXT=color|#RRVVBB HTML 3.2
Couleur que doit prendre le texte courant du document.
LINK=color|#RRVVBB HTML 3.2
Couleur des liens lorsqu'ils n'ont pas été visités et que l'on ne clique pas dessus.
VLINK=color|#RRVVBB HTML 3.2
Couleur que doivent prendre les liens déja visités.
ALINK=color|#RRVVBB HTML 3.2
Couleur que prennent les liens lorsque l'on clique dessus.
BGPROPERTIES=fixed IE 2.0
Indique que l'image de fond ne doit pas défiler avec le texte du document. Utile pour créer des filigranes.
LEFTMARGIN=n IE 2.0
Définit la taille de la marge gauche de la page. 0 est la valeur par défaut.
TOPMARGIN=n IE 2.0
Définit la taille de la marge haute de la page. 0 est la valeur par défaut.
ONBLUR=Event-Handler NS 3.0
Evénement JavaScript exécuté dés que la fenêtre du document HTML affiché perd le focus.
ONFOCUS=Event-Handler NS 3.0
Evénement JavaScript exécuté dés que la fenêtre du document HTML affiché reçoit le focus.
ONLOAD=Event-Handler NS 3.0
Evénement JavaScript exécuté lors du chargement du document HTML.
ONUNLOAD=Event-Handler NS 3.0
Evénement JavaScript exécuté lorsque le document HTML courant est quitté.

Attention ! Une seule paire de tag BODY doit être utilisé dans un document.

En-tête de document

Contenu du tag <HEAD>
%head.content "TITLE & BASE?"
%head.misc "SCRIPT | STYLE | META | LINK"
TITLE -- Titre du document (#PCDATA) - (%head.misc)
%i18n
BASE -O EMPTY
href %URL; #IMPLIED
target %FrameTarget; #IMPLIED
SCRIPT -- Emplacement d'un Script CDATA
charset %Charset; #IMPLIED -- char encoding of linked resource --
type %ContentType; #REQUIRED -- content type of script language --
language CDATA #IMPLIED -- predefined script language name --
src %URL; #IMPLIED -- URL for an external script --
defer (defer) #IMPLIED -- UA may defer execution of script --
NOSCRIPT -- alternate content container for non script-based rendering (%block;)+
%attrs; -- %coreattrs, %i18n, %events --
STYLE -- Information de style CDATA
%i18n;
type %ContentType; #REQUIRED -- content type of style language --
media %MediaDesc; #IMPLIED -- designed for use with these media --
title %Text; #IMPLIED -- advisory title --
META -O Metainformation gŽnŽrique EMPTY
%i18n; -- lang, dir, for use with content string --
http-equiv NAME #IMPLIED -- HTTP response header name --
name NAME #IMPLIED -- metainformation name --
content CDATA #REQUIRED -- associated information --
scheme CDATA #IMPLIED -- select form of content --

<TITLE> HTML 2.0
Indique le titre du document. Il est généralement affiché dans la barre de titre de la fenêtre du navigateur pour permettre l'identification du document. Il sert aussi à effectuer des recherches WAIS sur un serveur, il doit donc être suffisamment explicite pour décrire le document. Les tags de formatages sont interdits et ignorés.

<BASE HREF="url" [TARGET="cible"]> HTML 2.0
sert à donner une URL de base afin de référencer toutes les URLs relatives utilisées à l'intérieur du document. Par exemple lors du chargement des images ou dans la balise A.

    <BASE href="http://www.enit.fr">
    ...
    <IMG src="images/logo.gif">
est équivalent à
<IMG src="http://www.enit.fr/images/logo.gif">
En l'absence d'élément BASE, c'est l'URL du document qui est utilisé.
Dans les navigateurs gérant les frames, l'attribut Netscape target="cible" ouvre tous les liens dans une (nouvelle) fenêtre ou frame nommé 'cible'. Voir le chapitre 'frames' pour plus d'informations. Certains noms de cible sont réservés. Ils commencent par un tiret bas et ont des propriétés particulières :
_blank
Une nouvelle fenêtre sans nom est ouverte.
_parent
Le document est ouvert est ouverte dans la frame contenant les balises FRAMESET courante.
_self
Le document est ouvert dans la même fenêtre que celle qui l'a appelée. Valeur par défaut.
_top
Le document écrase toutes les frames présentes dans la fenêtre du navigateur.

<SCRIPT LANGUAGE=language [SRC="url"]> HTML 3.2
Insère un script dans un language tel que JavaScript ou VBScript dans une page HTML. L'exécution des scripts est lié aux capacités du navigateur. Netscape gère le JavaScript et Internet Explorer gère le VBScript et incomplètement le JavaScript. Le script peut aussi être inséré dans le corps du document. Le code du script est inclus entre les tags SCRIPT et /SCRIPT. Pour éviter que les navigateurs ne gérant pas les scripts affiche le code, il peut être intégré dans un commentaire.
LANGUAGE="langage". 'langage' est le nom du langage de script utilisé. Internet Explorer reconnait "JScript" et "VBScript". Netscape 2 ne reconnait que "JavaScript", Netscape 3 reconnait "JavaScript1.1" et Netscape 4 reconnait en plus "JavaScrip1.2"

    <SCRIPT language="JavaScript1.2">
    <! Début du script
        ....
        code source
        ....
    // Fin du script >
    </SCRIPT>
SRC=URL Netscape permet de charger le code source du script à partir d'un fichier externe. Il est d'usage de donner l'extension .js au fichier contenant le code source d'un script JavaScript.
Voir le guide 'JavaScript' pour plus d'informations.

<NOSCRIPT> NS 3.0, IE 3.0
Le texte à l'intérieur ce cette balise est affiché dans les browsers qui ne supporte pas les scripts.

<STYLE [TYPE="text/css"]> HTML 3.2, IE 3.0
Définit des styles selon CSS1 'Cascading Style Sheets, level 1'. Cela permets de modifier la mise en forme des éléments d'un document HTML.
Lors de la définition d'un élément HTML, les propriétés sont données entre accolade. Elles sont éventuellement séparées par un point virgule. Différentes valeurs peuvent être associés à certaines propriétés. Elles sont dans ce cas séparés par une virgule.

    <STYLE type="text/css"><!--
    BODY { color: 3dc143c; background: url(texture.gif) lightblue }
    H1, H2, H3 { font-family: helvetica }
    H1 { font-weight: bold;
        font-size: 12pt;
        color: green }
    --></STYLE>
Il existe d'autres manières d'insérer une définition de style dans vos documents. Voir le guide 'CSS1' pour plus d'informations sur les feuilles de styles en cascade, niveau 1.

<META [HTTP-EQUIV|NAME=motclé] CONTENT="valeur"> HTML 2.0
Donne des informations au navigateur, au serveur, aux moteurs de recherche et autres programmes relatives à la page Web. Plusieurs balises META peuvent figurer dans l'en-tête du document HTML.
HTTP-EQUIV contient des informations à destination du browser. Le serveur lit la valeur de l'attribut et génère le champ correspondant dans l'en-tête de réponse HTTP.
NAME contient des informations pour ceux qui liront le code source (utilisateurs, moteurs de recherche). Les paramètres suivants peuvent être utilisés :

<META HTTP-EQUIV=Content-Type CONTENT="text/html; charset=ISO-8859-1">
<META NAME=Content-Type CONTENT="text/html; charset=ISO-8859-1">
Indique le type MIME et le jeu de caractères du document.
<META HTTP-EQUIV=PICS-Label CONTENT='(PICS-1.1 hCODEp://www.rsac.org/ratingsv01.html labels on 1997.01.05TO8:15-0500 until 1999.12.31T23:59-0000 ratings (v 0 s 0 l 0 n 0))'>
A indiquer à quel public on destine ses documents (codage PICS).
<META HTTP-EQUIV=refresh CONTENT="n; URL=%URL">
<META HTTP-EQUIV=refresh CONTENT="5; URL=http://www.enit.fr">
Demande au browser de recharger la page toute les n secondes. Si une URL est spécifié, elle sera chargé à la place de la page courante. Utile si l'on désire faire suivre les internautes automatiquement vers un site qui a changé de location.
<META NAME=Author CONTENT="Christophe Merlet (RedFox)">
Indique l'auteur du document.
<META NAME="copyright" CONTENT="text">
Le copyright de votre document, par example "© RedFox 1997".
<META NAME=description CONTENT="courte description">
<META NAME=description CONTENT="apprenez a ecrire des documents pour le Web">
Indique au moteur de recherche comme Alta Vista la description de votre page.
<META NAME="distribution" CONTENT=global|local>
Definit si la page est un index (global) ou non (local).
<META NAME=GENERATOR CONTENT="Microsoft FrontPage 2.0">
Accessoirement, peut s'y trouver le logiciel qui a servi à créer la page.
<META NAME="keywords" CONTENT="mot1, mot2, mot3...">
<META NAME="keywords" content="HTML, Internet, creation">
Indique au moteur de recherche comme Alta Vista les mots clés de recherche de son document.
<META NAME="robots" CONTENT="none|nofollow|all|noindex">
La plus fréquent manière d'indiquer aux moteurs de recherche quelles sont les pages qui doivent être indexées. NOFOLLOW indexera uniquement la page courante, NOINDEX indexera les pages liées seulement, ALL indexera la page courante et les pages liées et NONE n'indexera rien.
<META NAME="text" CONTENT="text">
Il existe plein d'autres META-tags. Les éditeurs les utilisent pour ajouter leur propres codes comme NAME="generator", les créateurs y mettent leur nom NAME="author", etc. Il peuvent aussi être un moyen de communiquer aux personnes qui lisent votre code source la manière dont vous avez construit votre page.

<LINK REL=typerel REV=typerel HREF=url [NAME="text"] [TITLE="titre"] [TYPE="mime-type"]> HTML 2.0
Définit les relations du document courant avec d'autres documents ou ressources. Cette balise permet d'établir une organisation hiérarchique pour la navigation entre les documents utilisé avec une barre d'outils ou une bannière spécifique au logiciel, mais cette fonctionnalités n'est supporté que par trés peu de browsers. On peut aussi définir un lien vers une feuille de style, voir chapitre 'CSS 2' pour plus d'informations. Plusieurs balises LINK peuvent être utilisées dans l'en-tête d'un document.

HREF=url HTML 3.2
URL en relation avec la page courante.
REL=typerel HTML 3.2
Désigne le type de lien avancé qui représente le document vers lequel pointe le lien. Aucun type de lien n'est standardisé, mais certaines conventions ont été établies :
REV=typerel HTML 3.2
Désigne une relation inverse. Un lien du document A vers le document B avec REV=relation définit la même relation comme un lien du document B vers le document A avec REL=relation. Les mêmes types de liens que pour l'attribut REL peuvent être utilisés.
TITLE HTML 3.2
Titre consultatif pour la ressource liée
TYPE
Spécifie le type MIME de la ressource liée. Pour une feuille de style : TYPE="text/css"
NAME
est le nom de l'objet Vous pouvez aussi utiliser une bannière qui utilisera l'URL de HREF comme bannière qui ne défilera pas avec le document, un peu comme une frame.
Quelques exemples :
<LINK REL=contents HREF=toc.html>
<LINK REL=previous HREF=doc31.html>
<LINK REL=next HREF=doc33.html>
<LINK REL=chapter REV=contents HREF=chapter2.html>

<ISINDEX HREF="url" [PROMPT="text"]> HTML 2.0
Ancètre des formulaires de recherche, la balise ISINDEX génère un champ de saisie texte d'une ligne qui permet à l'utilisateur de saisir un ou plusieurs mots clés. Aprés avoir validé la saisie du champ, le navigateur l'envoie au serveur qui doit rechercher ce mot au sein d'un index interne. La recherche effectué, le serveur renvoie une page HTML constitué des liens de tous les documents ayant un rapport avec le mot recherché. La balise ISINDEX n'est guère plus utilisé depuis que l'interprétation des formulaires s'est généralisé à tous les navigateurs. HREF pointe vers un fichier d'index. PROMPT est le texte descriptif qui doit être affiché dans la boîte de dialogue au dessus du champ de saisie. Si PROMPT n'est pas définit, le texte utilisé par défaut est : "You can search this index. Type the keyword(s) to search for:". Certains documents disent qu'il vaut mieux utilisé ACTION plutôt que HREF.
N'est plus dŽfinit dans HTML 4.0.

Retour en haut


Christophe Merlet
redfox@redfoxcenter.org
©Tous droits réservés
25 novembre 1997