INTRODUCTION À LA NORME HTML
UFR 6 (Langage-Informatique-Technologie)
Département Hypermédias
Université Paris 8
2 rue de la Liberté
93526 Saint-Denis cedex 02
Ce manuel d'initiation est conçu comme un guide d'élaboration de documents à la norme HTML, le langage de marquage des documents destinés aux hypertextes répartis du World Wide Web.
Le texte de ce manuel est une adaptation et une mise à jour de l'ouvrage A Beginner's Guide to HTML, disponible sur le réseau Internet.
Jean Clément
TABLE DES MATIÈRES
Retour
Explication des acronymes
- WWW
- World Wide Web (ou Web, en abrégé).
- SGML
- Standard Generalized Markup Language -- norme de description des langages de marquage.
- DTD
- Document Type Definition -- langage de marquage spécifique écrit en SGML.
- HTML
- HyperText Markup Language -- HTML est un SGML DTD. En pratique, HTML est un ensemble de styles (indiqués par des balises de marquage) qui définit les différents éléments d'un document World Wide Web. Ce langage est en constante évolution. Il y a donc un décalage entre les propositions les plus récentes (HTML 3) et les capacités des divers clients Web. Les balises non encore reconnues universellement seront signalées comme telles dans le manuel.
Table des matières
Ce que vous ne trouverez pas dans ce manuel
La lecture de ce manuel suppose que vous ayez:
- une connaissance au moins élémentaire de l'utilisation d'un navigateur comme Netscape ou Internet Explorer
- une compréhension globale du fonctionnement des serveurs d'information répartie basés sur l'architecture client-serveur
- un accès à un serveur Web pour lequel vous souhaitez réaliser des documents HTML ou que vous voulez utiliser pour réaliser des documents personnels en HTML
Table des matières
Créer des documents HTML
Les documents HTML sont au format texte simple (ou format ASCII) et peuvent être créés avec n'importe quel éditeur de texte. On trouve aussi désormais des éditeurs HTML dans les environnements UNIX, PC ou Macintosh. Vous aurez peut-être envie d'essayer l'un d'eux avant d'entrer dans les détails d'HTML.
Vous pouvez prévisualiser un document en cours d'élaboration avec votre navigateur . Ouvrez-le avec la commande
Ouvrir page ou
Ouvrir un fichier .
Après avoir édité un document source HTML, sauvez les changements, retournez à votre navigateur et ouvrez le document. Les changements apparaissent à l'écran.
Table des matières
Un document HTML minimum
Voici un exemple simplifié de document HTML:
<TITLE>L'exemple HTML le plus simple</TITLE>
<H1>Ceci est un titre de premier niveau</H1>
Bienvenue dans le monde HTML. Ceci est un paragraphe.<P>
Et ceci en est un autre.<P>
Cliquez ici pour voir le résultat
HTML utilise des balises de marquage pour indiquer au client Web comment afficher le texte. L'exemple précédent utilise:
- la balise <TITLE> (et la balise correspondante </TITLE>), qui indique le titre du document
- la balise de sous-titre <H1> (et sa correspondante </H1>)
- la balise de paragraphe <P>, séparateur de paragraphe.
Les balises HTML sont composées du signe parenthèse angulaire ouvrante (<), ("plus petit que" en mathématiques), suivi du nom de la balise puis du signe parenthèse angulaire fermante (>). Les balises vont en général par deux: <H1> et </H1>, par exemple. La balise de fin est le même que celle de début, sauf qu'un slash (/) précède le nom de la balise entre parenthèses. Dans cet exemple <H1> indique au client Web qu'il doit commencer à appliquer le format d'un sous-titre de niveau 1; </H1> lui indique la fin du sous-titre.
La première exception à la règle des paires est la balise <P> . Il n'existe pas de balise </P>.
ATTENTION: HTML ne distingue pas les majuscules des minuscules <title> est équivalent à <TITLE> ou <TiTlE>.
Toutes les balises ne sont pas reconnues par tous les clients World Wide Web. Si un client ne reconnaît pas une balise, il l'ignore tout simplement.
Table des matières
Les balises de base
Les balises générales
<HEAD> et <BODY>
Ces balises séparent le corps du document de son titre introductif. Ces balises sont facultatives et ne changent pas l'apparence du texte formaté, mais elles peuvent se révéler utiles (la version 2.0 de NCSA Mosaic pour Macintosh, par exemple, vous permet de consulter seulement le titre introductif d'un document avant de décider de le télécharger en totalité), et il est recommandé de les utiliser.
Les titres
Tout document HTML devrait avoir un titre. Le titre est généralement affiché en dehors du document et sert essentiellement à identifier le document dans d'autres contextes (une recherche avec WAIS par exemple). Choisissez une demi-douzaine de mots pour décrire le document.
Dans les versions X Window et Microsoft Windows de NCSA Mosaic, le champ d'affichage du titre du document est en haut de l'écran, juste sous les menus déroulants. Dans la version pour Macintosh, le texte codé <TITLE> apparaît dans la barre de fenêtre.
Table des matières
Les sous-titres
HTML reconnaît six niveaux de sous-titres, numérotés de 1 à 6, par ordre décroissant de prééminence. Les sous-titres sont affichés dans des fontes plus grosses et/ou plus épaisses que le corps du texte. Le premier sous-titre de chaque document doit être codé <H1>. La syntaxe du sous-titre est:
<Hy>Texte du sous-titre </Hy >
où y est un nombre compris entre 1 et 6 indiquant le niveau du sous-titre.
Par exemple, le marquage du sous-titre "Sous-titres" ci-dessus est:
<H3>Sous-titres</H3>
Table des matières
Titre et premier sous-titre
Dans de nombreux documents, le premier sous-titre est identique au titre. Dans un document en plusieurs parties, le texte du premier sous-titre doit être conçu pour un lecteur en train de parcourir l'information qui s'y rapporte (titre de chapitre par exemple), tandis que le texte du titre doit permettre d'identifier le document dans un contexte plus large (en incluant à la fois le titre du livre et le titre du chapitre, bien que cela puisse être parfois trop long).
Table des matières
Les paragraphes
A la différence de la plupart des traitements de texte, les retours chariots sont sans signification pour HTML. L'habillage d'un mot (word wrapping) peut se faire n'importe où dans le document source, et les espacements multiples sont ramenés à un seul. (Il y a quelques exceptions, un espace suivi d'une balise <P> ou <Hy>, par exemple, est ignoré.) Remarquez que dans l'exemple simplifié, le premier paragraphe est ainsi codé:
Bienvenue dans le monde HTML.
Ceci est le premier paragraphe. <P>
Dans le fichier source, il y a un retour à la ligne entre les deux phrases. Un client Web ignorera ce retour à la ligne et ne commencera un nouveau paragraphe que lorsqu'il rencontrera une balise <P>.
Important: Vous devez séparer les paragraphes avec un <P>. Le client ignore les indentations ou les lignes vides du texte source. HTML ne prend pratiquement en compte que ses propres balises de formatage, et sans balises <P> le document devient un seul grand paragraphe. (À l'exception des textes "préformatés" comme il sera expliqué plus loin). Par exemple, le document source suivant produira un résultat identique à celui du premier exemple simplifié:
<TITLE>L'exemple HTML le plus simple</TITLE><H1>Ceci est un sous-titre de niveau 1</H1>Bienvenue dans le monde HTML. Ceci est un paragraphe.<P>Et ceci est un second.<P>
Cependant, afin de préserver la lisibilité des fichiers HTML, les sous-titres devraient être sur des lignes séparées, et les paragraphes séparés par des lignes vides (en plus des balises <P>).
NCSA Mosaic traduit les <P> par une fin de paragraphe suivie d'une ligne vide.
Table des matières
Créer des liens vers d'autres documents
La force principale d'HTML vient de sa possibilité de lier des parties de texte (ou d'image) à d'autres documents. Le client met en évidence ces parties (avec la couleur et/ou le soulignement) pour indiquer que ce sont des liens hypertextuels (souvent abrégés en hyperliens ou liens, tout simplement).
La seule balise hypertextuelle HTML est <A>, qui signifie "ancrage"t;. Pour insérer un ancrage dans votre document:
- Indiquez le début de la zone d'ancrage par <A (Il faut un espace après le A.)
- Spécifiez le document d'arrivée du lien en entrant le paramètre HREF="nom_fichier" suivi d'une parenthèse angulaire fermante: >
- Entrez le texte servant de lien hypertextuel dans le document de départ.
- Entrez la balise de fin d'ancrage: </A>.
Voici un exemple:
<A HREF="MaineStats.html">Maine</A>
Ce marquage fait du mot "Maine" l'hyperlien vers le document MaineStats.html, qui se trouve dans le même répertoire que le document de départ. Vous pouvez créer des liens vers des documents qui se trouvent dans d'autres répertoires en indiquant le chemin relatif qui va du document de départ au document d'arrivée. Par exemple, un lien vers le fichier NJStats.html situé dans le sous-répertoire AtlanticStates serait indiqué ainsi:
<A HREF="AtlanticStates/NJStats.html">New Jersey</A>
C'est ce que l'on appelle des liens relatifs. Vous pouvez aussi indiquer le chemin absolu si vous le préférez. Les chemins d'accès obéissent à la syntaxe UNIX.
Table des matières
Liens relatifs et chemins d'accès absolus
En général, il est préférable d'utiliser les liens relatifs car:
- Ils sont plus courts à taper.
- Il est plus facile de déplacer un groupe de documents vers un autre endroit, puisque les chemins d'accès relatifs resteront les mêmes.
Cependant, utilisez les chemins d'accès absolus quand vous établissez des liens entre des documents qui ne sont pas directement en relation. Dans le cas d'un groupe de documents qui forment un manuel, par exemple, les liens du groupe devraient être relatifs. En revanche, les liens vers d'autres documents (une référence à un logiciel particulier par exemple) devront, eux, être des chemins d'accès complets. De cette façon, si vous déplacer le manuel vers un autre répertoire, vous n'aurez pas besoin de mettre à jour les liens.
Table des matières
Les URL (Uniform Resource Locator)
Les serveurs World Wide Web utilisent les URL pour indiquer l'emplacement des fichiers sur les autres serveurs. Un URL comprend le type de ressource (gopher ou WAIS, par exemple), l'adresse du serveur, et l'emplacement du fichier. La syntaxe est la suivante:
type_de_ressource://adresse[:port]/chemin_d'accès/nom_de_fichier
type_de_ressource peut être:
- file
- un fichier sur votre système local, ou un fichier sur un serveur FTP anonyme.
- http
- un fichier sur un serveur World Wide Web
- gopher
- un fichier sur un serveur gopher
- WAIS
- un fichier sur un serveur WAIS
- news
- un groupe de news Usenet
- telnet
- une connexion sur un service Telnet
Le numéro de port est généralement facultatif (En pratique vous ne l'utiliserez que si on vous demande de le faire)
Par exemple, pour insérer un lien de votre document vers le document original dont le présent manuel est inspiré vous devriez écrire:
<A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html"> NCSA's Beginner's Guide to HTML</A>
Ceci ferait du texte "NCSA's Beginner's Guide to HTML" un hyperlien vers ce document.
Attention:
Les liens relatifs permettent de circuler facilement dans un ensemble de documents situés sur le même serveur. Mais si ces documents se trouvent dans des répertoires différents, il est plus facile de descendre l'arborescence que de la remonter. On ne peut remonter qu'au répertoire situé immédiatement au dessus du répertoire courant. La syntaxe doit être:
../nom_de_fichier
Pour plus d'information sur les URL, consultez:
Table des matières
Liens vers des parties déterminées d'un autre document
Les liens peuvent aussi être utilisés pour aller à une partie spécifique d'un document. Supposons que vous vouliez faire un lien entre un document A et une partie donnée d'un document B. (Appelons le B.html.) Vous devez d'abord poser un ancrage avec un nom dans le document B. Par exemple, pour poser un ancrage nommé "coucou" dans le document B, tapez
Voici <A NAME = "coucou">un passage du texte</A>
Puis lorsque vous créez le lien dans le document A, introduisez non seulement le nom du fichier, mais aussi celui de l'ancrage d'arrivée, séparé par un (#).
Ceci est mon <A HREF = "documentB.html#coucou">lien</A> vers le document B.
Désormais, en cliquant sur le mot "lien" dans le document A, le lecteur se retrouve directement sur les mots "un passage du texte" du document B.
Liens vers des parties déterminées d'un même document
La technique est la même, sauf que le nom de fichier n'est pas indiqué.
Par exemple, pour créer un lien vers l'ancrage "coucou" à l'intérieur du même fichier (le document B), tapez
Ceci est <A HREF = "#coucou">le lien coucou</A> à l'intérieur du document B.
Table des matières
Les autres balises
Les balises présentées jusqu'ici sont suffisantes pour créer des documents HTML simples. Pour des documents plus complexes, HTML propose des balises pour les différents types de listes, pour les sections préformatées, les citations longues, le formatage des caractères, etc.
Les listes
HTML accepte les listes non numérotées, les listes numérotées et les listes documentées
Les listes non numérotées
Pour créer une liste non numérotée,
- Tapez la balise <UL> en début de liste
- Tapez la balise <LI> suivi de l'élément de la liste (Inutile d'ajouter la balise </LI> )
- Terminez avec la balise de fin de liste </UL>
Exemple de liste à deux éléments:
<UL>
<LI> pommes
<LI> bananes
</UL>
Résultat:
Les éléments d'une liste codés <LI> peuvent contenir plusieurs paragraphes. Il suffit de les séparer par la balise de paragraphe <P>.
Table des matières
Les listes numérotées
Une liste numérotée (ou liste ordonnée comme le suggère le nom de la balise) est identique à une liste non numérotée, si ce n'est qu'elle utilise la balise <OL> au lieu de la balise <UL>. Les éléments sont codés avec la même balise <LI> . Le marquage suivant:
<OL>
<LI> oranges
<LI> pêches
<LI> raisins
</OL>
produit la mise en page suivante:
- oranges
- pêches
- raisins
L'attribut TYPE permet de choisir le type de chaque élément de la liste (type numéroté ou non numéroté). Il permet aussi de choisir le mode de numérotation des listes numérotées:
lettres majuscules (TYPE=A), lettres minuscules (TYPE=a), chiffres romains majuscules (TYPE=I), chiffres romains minuscules (TYPE=i), ou numéros par défaut (TYPE=1).
L'attribut VALUE permet de choisir le numéro d'un élément d'une liste numérotée et de ceux qui le suivent.
L'attribut START permet de débuter la numérotation au numéro choisi.
Table des matières
Les listes documentées
Une liste documentée consiste habituellement à faire suivre un terme (codé DT) de sa définition (codée DD). Les clients Web placent en général la définition à la ligne. Voici un exemple:
<DL>
<DT> NCSA
<DD> NCSA, le National Center for Supercomputing Applications,
est situé sur le campus de l'Université de l'Illinois
à Urbana-Champaign. NCSA est membre du National
MetaCenter for Computational Science and Engineering.
<DT> Cornell Theory Center
<DD> CTC est situé sur le campus de l'université de Cornell à Ithaca, New York. CTC est également membre du National MetaCenter for Computational Science and Engineering.
</DL>
Résultat:
- NCSA
- NCSA, le National Center for Supercomputing Applications, est situé sur le campus de l'Université de l'Illinois à Urbana-Champaign. NCSA est membre du National MetaCenter for Computational Science and Engineering.
- Cornell Theory Center
- CTC est situé sur le campus de l'université de Cornell à Ithaca, New York. CTC est également membre du National MetaCenter for Computational Science
Les entrées <DT> et <DD> peuvent contenir plusieurs paragraphes (séparés par la balise de paragraphe <P> ), des listes, ou une autre définition.
Table des matières
Les listes enchâssées
Les listes peuvent être enchâssées arbitrairement, bien qu'en pratique il soit recommander de se limiter à trois niveaux. Vous pouvez aussi avoir un certains nombre de paragraphes, contenant chacun une liste enchâssée, sous une seule entrée de liste.
Exemple:
<UL>
<LI> Quelques villes du département de la Haute-Savoie:
<UL>
<LI> Annecy
<LI> Cluses
</UL>
<LI> Une ville du département de la Savoie:
<UL>
<LI> Albertville
</UL>
</UL>
Résultat:
- Quelques villes du département de la Haute-Savoie:
- Une ville du département de la Savoie:
Table des matières
Les textes préformatés
Utilisez la balise <PRE> ("préformaté") pour produire un texte dans une fonte d'une taille déterminée et insérer des espaces, des retours à la ligne et des tabulations qui seront pris en compte. (Les espacements multiples seront affichés comme espacements multiples et les retour à la ligne se trouveront au même endroit que dans le document source HTML). Cela peut être utile pour les listings de programme.
Exemple:
<PRE>
#!/bin/csh
cd $SCR
cfs get mysrc.f:mycfsdir/mysrc.f
cfs get myinfile:mycfsdir/myinfile
fc -02 -o mya.out mysrc.f
mya.out
cfs save myoutfile:mycfsdir/myoutfile
rm *
</PRE>
Résultat:
#!/bin/csh
cd $SCR
cfs get mysrc.f:mycfsdir/mysrc.f
cfs get myinfile:mycfsdir/myinfile
fc -02 -o mya.out mysrc.f
mya.out
cfs save myoutfile:mycfsdir/myoutfile
rm *
Les liens peuvent être utilisés à l'intérieur d'une section <PRE> . Mais il faut éviter d'utiliser d'autres balises HTML.
Notez que comme <, >, et & sont des balises HTML, vous devez utiliser leur séquence d'échappement (<, >, and &, respectivement) pour les utiliser comme caractères. Pour plus d'information voyez la section "Caractères spéciaux".
Table des matières
Les citations
Utilisez la balise <BLOCKQUOTE> pour afficher les citations en un bloc détaché à l'écran. La plupart des clients ménage une indentation pour le distinguer du corps du texte.
Exemple:
<BLOCKQUOTE>
I still have a dream. It is a dream deeply rooted in the
American dream. <P>
I have a dream that one day this nation will rise up and
live out the true meaning of its creed. We hold these truths
to be self-evident that all men are created equal. <P>
</BLOCKQUOTE>
Résultat:
I still have a dream. It is a dream deeply rooted in the American dream.
I have a dream that one day this nation will rise up and live out the true meaning of its creed. We hold these truths to be self-evident that all men are created equal.
Table des matières
Les adresses
La balise <ADDRESS> sert généralement à spécifier l'auteur d'un document et les moyens de le contacter (c'est à dire son adresses électronique). C'est généralement la dernière partie du document.
Par exemple, la dernière ligne de la version en ligne de ce guide est:
<ADDRESS>
A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu
</ADDRESS>
Ce qui donne:
A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu
NOTE: <ADDRESS> n'est pas utilisé pour les adresses postales. Voyez la rubrique "Les retours forcés" pour le formatage des adresses postales.
L'attribut MAILTO permet à l'utilisateur d'envoyer un courier électronique en cliquant sur l'adresse indiquée.
clement@asterix.univ-paris8.fr
Table des matières
Le formatage des caractères
Vous pouvez baliser des mots ou des phrases avec des styles particuliers. Il y a deux types de styles: logiques et physiques. Les styles logiques balisent le texte en fonction de sa signification, tandis que les styles physiques spécifient la mise en forme d'une partie du texte. Dans la phrase précédente, par exemple, il aurait été possible de baliser les mots "styles logiques" en tant que définition. Le même effet (mettre ces mots en italique par exemple) aurait pu être obtenu par un marquage différent qui aurait signifié: "mettre ces mots en italiques".
Table des matières
Formatage logique ou formatage physique?
Si le style physique et le style logique produisent le même effet, lequel choisir? Nous allons, dans les paragraphes qui suivent, nous en remettre à la philosophie SGML, qui peut se résumer à la façon d'un mantra Zen: "Fais confiance en ton client"
Dans l'univers idéal SGML, le contenu est dissocié de sa présentation. C'est pourquoi SGML balise un sous-titre de premier niveau comme un sous-titre de premier niveau, mais ne précise par que le sous-titre de premier niveau doit être en caractères Times de 24 pt., en gras et centré en haut de la page. L'avantage de cette approche (qui est semblable à celle des feuilles de styles sur de nombreux traitements de textes) est que si vous décidez de changer le style des sous-titres de premier niveau en Helvetica 20 pt justifié à gauche, il vous suffit de changer la définition du style de tous vos sous titres de premier niveau sur votre client WWW.
L'autre avantage du marquage logique est qu'il vous aide à conserver la cohérence de présentation de vos documents. Il est plus facile de baliser <H1> que de se souvenir que les sous-titres de premier niveau sont en Times 24 pt gras par exemple. Même chose pour les styles de caractère. Considérons par exemple la balise <STRONG>. La plupart des clients le traduisent en texte gras. Cependant il est possible qu'un lecteur préfère que ces passages soient affichés en rouge. Les styles logiques offrent cette souplesse.
Table des matières
Styles logiques
- <DFN>
- Pour la définition d'un mot. Affiche le plus souvent en italique. (NCSA Mosaic est un client World Wide Web.)
- <EM>
- Pour mettre en évidence. Affiche le plus souvent en italique (Attention aux pickpockets.)
- <CITE>
- Pour les titres de livres, de films, etc.. Affiche le plus souvent en italique. (A Beginner's Guide to HTML)
- <CODE>
- Pour les extraits de code informatique. Affiche dans un format de fonte fixe. (The <stdio.h> header file)
- <KBD>
- Pour les mots à entrer au clavier. Devrait être affiché dans une fonte grasse de taille fixe, mais beaucoup de clients l'affichent en caractères ordinaires (Entrez passwd pour changer votre mot de passe.)
- <SAMP>
- Pour les messages de l'ordinateur. Affiche dans une fonte de taille fixe. (Segmentation fault: Core dumped.)
- <STRONG>
- Pour mettre fortement en évidence. Affiche en gras (Important)
- <VAR>
- Pour une variable "méta-syntaxique", quand l'utilisateur doit remplacer la variable par une valeur spécifique. Affiche le plus souvent en italique (rm filename deletes the file.)
Table des matières
Styles physiques
- <B>
- Texte en gras
- <I>
- Texte en italiques
- <TT>
- Texte machine à écrire (fonte de taille déterminée)
- <FONT SIZE=valeur>
- Surprise! vous pouvez changer la taille des caractères. les valeurs vont de 1 à 7. La valeur par défaut est 3.Les valeurs peuvent être éventuellement précédées d'un + ou d'un - pour spécifier qu'elles sont relatives à la valeur par défaut.
- <BASEFONT SIZE=valeur>
- Cette balise change la taille de référence qui est 3 par défaut. Ses valeurs vont de 1 à 7.
- <CENTER>
- Cette balise permet de centrer le texte et les images.
Table des matières
Les balises de caractères
Pour appliquer un style de caractère,
- Tapez <balise>, balise étant la balise de formatage des caractères
- Tapez le texte
- Terminez avec </balise>.
Table des matières
Les caractères spéciaux
Les séquences d'échappement
Dans le jeu de caractères ASCII , quatre d'entre eux - la parenthèse angulaire ouvrante (<), la parenthèse angulaire fermante (>), le "et" typographique (&) et la double apostrophe (") - ont une signification particulière en HTML et ne peuvent donc pas être utilisés tels quels dans le texte. (Les parenthèses angulaires servent à encadrer les balises HTML et le "&" indique le début d'une séquence d'échappement.)
Pour utiliser ces caractères dans un document HTML, vous devez entrer leur séquence d'échappement:
- <
- Séquence d'échappement pour <
- >
- Séquence d'échappement pour >
- &
- Séquence d'échappement pour &
- "
- Séquence d'échappement pour "
Des séquences d'échappement supplémentaires permettent d'afficher les caractères accentués.
Exemple:
- &am;pouml;
- Séquence d'échappement pour o minuscule avec umlaut: ö
- ñ
- Séquence d'échappement pour n minuscule avec tilde: ñ
- È
- Séquence d'échappement pour E majuscule avec accent grave: È
La liste complète se trouve en annexe
NOTE: À la différence du reste de HTML, les séquences d'échappement doivent respecter l' opposition minuscule/majuscule. Vous ne pouvez pas, par exemple, utiliser < au lieu de <..
Les retours forcés
La balise <BR> fait passer à la ligne sans espace supplémentaire entre les lignes. (Par contraste avec la plupart des clients qui formatent la balise de paragraphe <P> avec une ligne vide supplémentaire pour mieux indiquer le début d'un nouveau paragraphe.)
Un des emploi de <BR> est le formatage d'adresses:
National Center for Supercomputing Applications<BR>
605 East Springfield Avenue<BR>
Champaign, Illinois 61820-5518<BR>
Avec les images flottantes il est devenu nécessaire d'ajouter à la balise <BR> un attribut CLEAR qui permet, après un retour forcé (<BR>) d'aller à la ligne en-dessous de l'image.
Les valeur left ou right permettent de préciser si l'image est à gauche ou à droite. CLEAR=all fait la même chose pour les deux marges.
- <NOBR>
- Cette balise indique qu'une chaîne de caractères ne doit pas être coupée.
- <WBR>
- Cette balise indique qu'un mot peut être coupé à cet endroit en cas de besoin (césure). Dans une chaîne de caractères commandée par la balise <NOBR> cette balise permet aussi de couper le texte où vous le voulez.
Table des matières
Les lignes horizontales
La balise <HR> affiche une ligne horizontale de la longueur de la fenêtre du client.
Quatre nouveaux attributs permettent de modifier l'aspect du trait horizontal:
- <HR SIZE=nombre>
- Détermine l'épaisseur du trait.
- <HR WIDTH=nombre|pourcentage>
- Permet de fixer la longueur du trait.
- <HR ALIGN=left|right|center>
- Permet de justifier la trait horizontal: à gauche, à droite, ou centré.
- <HR NOSHADE>
- Supprime l'ombrage du trait
Table des matières
Les images en ligne
La plupart des clients Web peuvent afficher des images en ligne (c'est à dire dans le texte) aux formats X Bitmap (XBM) ou GIF. Le temps de traitement de chaque image est long et ralentit l'affichage du document. Évitez d'en mettre trop, ou d'en mettre de trop grandes.
Pour inclure une image en ligne, tapez:
<IMG SRC=image_URL>
où image_URL est l'URL du fichier de l'image. La syntaxe des IMG SRC URL est identique à celle utilisée dans l'ancrage HREF. Si le fichier image est un fichier GIF, le nom du fichier doit se terminer avec le suffixe .gif. Les fichiers d'image X Bitmap doivent se terminer avec le suffixe .xbm.
Par défaut, le bas de l'image est aligné avec le bas du texte.
Ajoutez l'option ALIGN=TOP si vous voulez que le client aligne le texte adjacent avec le haut de l'image. Le marquage complet d'un texte adjacent aligné sur le haut de l'image sera:
<IMG ALIGN=top SRC=image_URL>
ALIGN=MIDDLE aligne le texte avec le centre de l'image
L'introduction des images flottantes (non encore reconnues par tous les clients) a conduit à compléter la liste des attributs:
<IMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottom>
- ALIGN=left
- Cale l'image à gauche et autorise l'affichage du texte autour et à droite.
- ALIGN=right
- Cale l'image à droite et autorise l'affichage du texte autour et à gauche.
- ALIGN=top
- Aligne le haut de l'image avec le haut du premier objet qui suit.
- ALIGN=texttop
- Aligne le haut de l'image avec le haut de la ligne courante, les suivantes apparaissant sous l'image.
- ALIGN=middle
- Aligne le milieu de l'image sur la ligne courante, les suivantes apparaissant sous l'image.
- ALIGN=baseline
- Aligne le bas de l'image sur la ligne courante.
- ALIGN=bottom
- Fait la même chose.
- ALIGN=absbottom
- Aligne la bas de l'image avec le bas de la ligne courante.
<IMG WIDTH=valeur HEIGHT=valeur>
Les attributs WIDTH et HEIGHT ont été ajoutés pour accélérer l'affichage du document. S'ils sont spécifiés, le logiciel client n'a plus besoin d'attendre que l'image soit chargée et sa taille calculée.
<IMG BORDER=valeur>
Permet de contrôler la largeur du trait d'encadrement de l'image.
<IMG VSPACE=valeur HSPACE=valeur>
VSPACE contrôle l'espace vertical au-dessus et au-dessous de l'image.
HSPACE contrôle l'espace horizontal à gauche et à droite de l'image.
Table des matières
Le double marquage pour les terminaux sans lecteur d'image
Certains clients WWW, essentiellement ceux qui tournent sur des terminaux VT100 ne peuvent pas afficher d'image. L'option ALT permet de spécifier un texte à afficher à la place de l'image que le client ne peut pas lire.
Exemple:
<IMG SRC = "UpArrow.gif" ALT = "Up">
où UpArrow.gif est l'image d'une flèche pointée vers le haut. Avec NCSA Mosaic et d'autres clients graphiques, le lecteur voit l'image de la flèche. Avec un client VT100 comme Lynx, il pourra lire le mot "Up"
Table des matières
Les ressources externes: images, son, vidéo
Vous aurez peut-être envie de faire apparaître une image indépendante quand un utilisateur active un lien posé sur un mot ou sur une version réduite de l'image insérée dans le texte. Cet appel à une image extérieure est utile si vous ne voulez pas ralentir le chargement de votre document avec des images en ligne trop grandes.
Pour insérer une référence à une image extérieure, tapez:
<A HREF = image_URL>ancrage du lien</A>
Utilisez la même syntaxe pour les liens vers des séquences vidéo ou sonores externes. La seule différence réside dans le suffixe du fichier relié.
Exemple:
<A HREF = "QuickTimeMovie.mov">ancrage du lien</A>
indique un lien vers une séquence QuickTime. Voici quelques types de fichiers usuels avec leur extension:
Type de fichier Extension
- Texte simple
- .txt
- Document HTML
- .html
- Image GIF
- .gif
- Image TIFF
- .tiff
- Image XBM bitmap
- .xbm
- Image JPEG
- .jpg ou .jpeg
- Fichier PostScript
- .ps
- Son AIFF
- .aiff
- Son AU
- .au
- QuickTime movie
- .mov
- MPEG movie
- .mpeg or .mpg
Assurez-vous que vos correspondants potentiels ont bien les logiciels de lecture appropriés. La plupart des stations UNIX, par exemple, ne permettent pas de visionner les séquence QuickTime.
Table des matières
Quelques conseils
- Éviter le chevauchement des balises
Soit le fragment de texte HTML suivant:
<B>Ceci est un exemple de <DFN>chevauchement</B> de balises HTML.</DFN>
Le mot "chevauchement" est encadré à la fois par les balises <B> and <DFN> . Comment le client le formatera-t-il? Vous ne pouvez pas le savoir à l'avance, et chaque client risque de réagir différemment. Efforcez-vous donc d'éviter les chevauchements.
Table des maières
- Évitez d'enchâsser des balises autres que les ancrages et les balises de caractère
Il est possible d'enchâsser des ancrages à l'intérieur d'une autre balise HTML:
<H1><A HREF = "Destination.html">Mon sous-titre</A></H1>
En revanche, il faut éviter d'enchâsser un sous-titre ou une autre balise HTML à l'intérieur d'un ancrage :
<A HREF = "Destination.html">
<H1>Mon sous-titre</H1>
</A>
Bien que la plupart des clients puisse gérer cet exemple, il est interdit par les normes HTML et HTML+ officielles, et ne fonctionnera pas avec les futurs clients.
Les balises de caractères modifient l'aspect des autres balises:
<UL>
<LI><B>Un élément de liste en caractère gras</B>
<UL>
<LI><I>un élément de liste en caractère italique</I>
</UL>
Évitez cependant d'enchâsser d'autres types de balises HTML. Il est tentant par exemple d'enchâsser un sous-titre dans une liste pour passer à une fonte de plus grande dimension:
<UL><LI><H1>Un sous-titre grand format</H1>
<UL>
<LI><H2>Quelque chose de plus petit</H2>
</UL>
Bien que quelques clients, comme NCSA Mosaic pour X Window, formatent parfaitement cette construction, il est impossible de prévoir (parce qu'elle n'est pas définie) ce qu'en feront les autres clients. Pour assurer la compatibilité avec les autres clients, il faut éviter ces sortes de constructions.
Quelle est la différence entre l'enchâssement d'un <B> à l'intérieur d'un <LI> par rapport à celle d'un <H1> à l'intérieur d'un <LI>? C'est une affaire de logique SGML. <H1> indique qu'il s'agit du titre principal d'un document et qu'il doit être suivi par le contenu du document. C'est pourquoi il est absurde de trouver un <H1> dans une liste.
Le formatage des caractère lui non plus n'est pas cumulatif. Vous pensez peut-être que
<B><I>un passage du texte </I></B>
produira un texte en gras et italique. C'est vrai sur certains clients, mais d'autres n'interprètent que la balise enchâssé (ici les italiques).
Table des matières
- Vérifiez vos liens
Quand une balise <IMG> pointe vers une image qui n'existe pas, une image factice lui est substituée. Si cela vous arrive, vérifiez que l'image référencée existe bien, que le lien contient l'information correcte sur l'URL et que le fichier est bien autorisé à la lecture pour tous.
Table des matières
Un exemple développé
Voici un exemple développé de document HTML:
<HEAD>
<TITLE>Un exemple développé</TITLE>
</HEAD>
<BODY>
<H1>Un exemple développé</H1>
Ceci est un document HTML simple. Ceci est le premier paragraphe. <P>
Ceci est le second paragraphe, avec quelques effets spéciaux. Ceci est un mot en <I>italiques</I>. Ceci est un mot en <B>gras</B>.
Voici une image en ligne GIF : <IMG SRC = "monimage.gif">.
<P>
Ceci est le troisième paragraphe pou illustrer les liens. Voici un lien du mot <A HREF = "subdir/monfichier.html">raté</A> vers un document nommé "subdir/monfichier.html". (Si vous essayez de suivre ce lien, vous obtiendrez un message d'erreur) <P>
<H2>Un sous-titre de deuxième niveau</H2>
Voici une section du texte qui devrait s'afficher dans une fonte de taille fixe: <P>
<PRE>
Maître corbeau sur son arbre perché
Tenait dans son bec un fromage
Maître Renard par l'odeur alléché
Lui tint à peu près ce langage... </PRE>
Ceci est une liste non ordonnée à deux éléments: <P>
<UL>
<LI> pommes
<LI> poires
</UL>
Ceci est la fin de mon exemple. <P>
<ADDRESS>Moi (moi@mamachine.univ.edu)</ADDRESS>
</BODY>
Cliquez ici pour voir le résultat
Table des matières
Pour aller plus loin
Les tableaux
Les balises de tableau
Les balises de tableaux ont été conçues par Netscape. Elles ne sont pas encore reconnues par tous les logiciels clients.
- <TABLE ...></TABLE>
- C'est la balise qui encadre toutes les autres balises de mise en tableau. Les autres balises seront ignorées si elles ne sont pas à l'intérieur de la balise TABLE . Par défaut, les tableaux n'ont pas de bordure. Celles-ci peuvent être ajoutées en utilisant l'attribut BORDER.
- <TR ...></TR>
- Cette balise indique une ligne du tableau. Le nombre de lignes du tableau est égal au nombre de fois où cette balise apparaît, quelques soient les cellules qui pourraient tenter d'utiliser l'attribut ROWSPAN pour s'étendre sur des lignes non spécifiées. TR supporte les attributs ALIGN et VALIGN , qui spécifient les alignements par défaut de toutes les cellules de la ligne.
- <TD ...></TD>
- Cette balise indique une cellule du tableau. Les balises de cellule doivent apparaître à l'intérieur des balises de ligne. Le nombre de cellules par ligne peut varier d'une ligne à l'autre: les lignes les plus courtes sont alors remplies par des blancs sur leur droite. Une cellule peut contenir n'importe quelle balise HTML. Le contenu de chaque cellule est aligné par défaut à gauche en largeur et au milieu en hauteur. Ces alignements par défaut peuvent être modifiés par les attributs ALIGN et VALIGN spécifiés dans la balise TR, lesquels à leur tour peuvent être modifiés par les attributs spécifiés dans chaque cellule. Par défaut le texte d'une cellule peut être coupé par un retour chariot pour tenir compte de la taille de la cellule. L'attribut NOWRAP ajouté à la balise TD empêche ce retour à la ligne.
- <TH ...></TH>
- Cette balise indique une cellule de titre. Les cellules de titre sont identiques aux autres, mais elle sont en gras et sont centrées par défaut.
- <CAPTION ...></CAPTION>
- Cette balise marque la légende du tableau. La balise CAPTION doit apparaître dans le tableau, mais en dehors des lignes ou des cellules.
Par défaut la légende est au-dessus du tableau, mais elle peut être placée en-dessous avec l'attribut ALIGN=bottom.
Comme les cellules de tableau, les légendes peuvent comprendre n'importe quelle balise HTML.
Les légendes sont toujours centrées par rapport au tableau et peuvent être et sont découpées pour tenir dans la largeur du tableau.
Table des matières
Les attributs de tableau
- BORDER
- Cet attribut apparaît dans la balise TABLE. Il indique que toutes les cellules sont entourées d'une bordure. S'il est absent, il n'y a pas de bordure, mais la place des bordures est laissée pour que le même tableau, avec ou sans l'attribut BORDER occupe la même place.
- ALIGN
- Dans la balise CAPTION cet attribut contrôle l'emplacement de la légende et peut avoir les valeurs: en haut (top) ou en bas (bottom).
Dans les balises TR, TH, ou TD il contrôle la justification du texte: à gauche (left), centrée (center), ou à droite (right).
- VALIGN
- Dans les balises TR, TH, or TD cet attribut contrôle la justification verticale du texte dans les cellules. Ses valeurs peuvent être: en haut (top), au milieu
(middle), en bas (bottom), et sur la même ligne (baseline).
- NOWRAP
- Dans les balises TH ou TD
cet attribut signifie que les lignes d'une cellule ne peuvent être coupées pour s'ajuster à la longueur de la cellule.
- COLSPAN
- Dans les balises TH ou TD, cet attribut indique sur combien de colonnes une cellule doit s'étendre. Par défaut sa valeur est 1.
- ROWSPAN
- Dans les balises TH ou TD
cet attribut indique sur combien de lignes du tableau une cellule doit s'étendre. Sa valeur par défaut est 1. Une extension au-delà du nombre de lignes spécifiées par TR sera coupée..
Table des matières
Pour un contrôle encore plus précis
- BORDER=<value>
- Cet attribut permet de spécifier la largeur de la bordure d'un tableau.
- CELLSPACING=<value>
- Cet attribut permet de spécifier l'espacement entre les cellules. Par défaut, sa valeur est 2.
- CELLPADDING=<value>
- Cet attribut permet de spécifier l'espace entre le contenu d'une cellule et sa bordure. Sa valeur par défaut est 1.
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
donne le tableau le plus compact possible.
- WIDTH=<valeur_ou_pourcentage;
- Cet attribue spécifie la largeur du tableau exprimée soit en pixels soit en pourcentage. Normalement des algorithmes complexes permettent d'optimiser la présentation du tableau. Avec cet attribut il devient possible de donner au tableau la largeur souhaitée.
Table des matières
Les cellules vides apparaissent sans bordure.
Pour leur attribuer une bordure remplissez les avec une ligne vide ou un espace non sécable. (<td> </td> ou <td><br></td>)
Dans le cas d'une cellule ne contenant qu'une image, il faut écrire sur une seule ligne:
<td><img src="url"></td>
Pour examiner quelques exemples de tableaux, cliquez ici.
Table des matières
Le multi-fenêtrage
Nouveau !
Introduit par Netscape à partir de la version 2.0, le
multi-fenêtrage offre une alternative aux tableaux pour distribuer
l'information sur la page-écran. Les tableaux organisent l'information
en cellules, le multi-fenêtrage l'organise en fenêtres. La
différence tient au fait que les fenêtres, contrairement aux
cellules, sont elles mêmes de véritables pages HTML autonomes. On
pourra donc, par exemple, utiliser le multi-fenêtrage pour afficher un
menu dans une fenêtre tandis que les documents auxquels il renvoie
s'affichent dans une autre. Le menu reste ainsi disponible en permanence
pendant la consultation des documents.
Le document multi-fenêtres
Un document multi-fenêtres a la même structure qu'un document HTML
normal, à cette différence près que les balises
d'encadrement <BODY> sont remplacées par des balises
<FRAMESET> qui encadrent la description des sous-documents HTML qu'elles contiennent.
<HTML>
<HEAD>
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>
Syntaxe du multifenêtrage
- <FRAMSET>
- C'est la balise d'encadrement d'une fenêtre. Elle admet les deux attributs ROWS et COLS. Un document fenêtré ne doit comporter ni balise <BODY> ni aucune des balises qui lui sont généralement associées, sous peine d'être ignorée. Entre les balises <FRAMESET> et </FRAMESET> ne peuvent apparaître que les balises <FRAME>, <NOFRAME> ou un autre jeu de balises FRAMSET.
- ROWS="liste_des_hauteurs_de_fenêtres"
- L'attribut ROWS admet comme valeur une liste de valeurs séparées par une virgule. Ces valeurs peuvent être des valeurs absolues exprimées en pixels, des valeurs exprimées en pourcentage ou des valeurs relatives. Le nombre de lignes est égal au nombre de valeurs de la liste. Comme la hauteur totale des lignes doit être égale à la somme des hauteurs de chaque ligne, les hauteurs de lignes doivent être calculées en conséquence. L'absence de l'attribut ROWS est interprétée comme une ligne unique dont la hauteur est ajustée automatiquement.
-
Syntaxe des listes de valeurs
- valeur
- Une simple valeur numérique est interprétée comme une taille fixe exprimée en pixels. Ce type de valeur est le plus délicat à utiliser car la taille de l'écran peut varier considérablement d'un utilisateur à l'autre. Il faut donc veiller à l'utiliser conjointement avec une ou plusieurs valeurs relatives. Faute de quoi le client l'ignorera pour ajuster les proportions de la fenêtre à celle de l'écran.
- valeur%
- C'est un simple pourcentage entre 1 et 100. Si le total des valeurs est supérieur à 100, toutes les valeurs sont diminuées en proportion. Si le total est inférieur à 100 et qu'il existe d'autres fenêtres à taille relative, celles-ci seront réajustées pour occuper l'espace restant. S'il n'existe aucune autre fenêtre à taille relative, les pourcentages seront ajustés pour atteindre 100%.
- valeur*
- Dans ce champ, la valeur est optionnelle. Un simple caractère "*" indique une fenêtre à taille relative et est interprété comme une demande de donner à la fenêtre toute la place restante. S'il existe plusieurs fenêtres à taille relative, l'espace restant est équitablement partagé entre elles. Si une valeur est précisée devant le "*", la fenêtre occupera cet espace relatif. Par exemple, "2*" allouera les 2/3 de l'espace à la première fenêtre et 1/3 à la seconde.
Exemples
- <FRAMESET ROWS="20%,60%,20%">
- La première et la dernière ligne seront plus importante que celle du milieu.
- <FRAMESET ROWS="100,*,100">
- Les valeurs de la première et de la dernière ligne sont fixes, celle du milieu occupera l'espace restant.
- COLS="liste_des_largeurs de fenêtres"
- L'attribut COLS admet comme valeur une liste de valeurs séparées par une virgule et dont la syntaxe est identique à celle de l'attribut ROWS.
La balise <FRAMESET> peut être enchâssée dans d'autres
balises <FRAMESET>. Dans ce cas, le sous-document occupe l'espace qui aurait été attribué à la fenêtre correspondante si la balise <FRAME> avait été utilisée au lieu de la balise <FRAMSET> enchâssée.
- <FRAME>
- Cette balise définit une fenêtre d'un document multi-fenêtres. Elle admet six attributs: SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING et NORESIZE. La balise <FRAME> n'étant pas une balise d'encadrement, il n'existe pas de balise fermante correspondante.
- SRC="url"
- L'attribut SRC prend pour valeur l'URL du document à afficher dans la fenêtre. En l'absence de cet attribut, une fenêtre vide est affichée.
- NAME="nom_de_la_fenêtre"
- L'attribut NAME sert à donner un nom à une fenêtre afinqu'elle puisse être désignée comme fenêtred'affichage dans les balises de lien d'autres documents (engénéral ceux des autres fenêtres du même document). L'attribut NAME est facultatif. Par défaut, les fenêtres n'ont pas de nom.
Les noms doivent commencer par un caractère alphanumérique.
Les fenêtres qui ont un nom peuvent être adressées avec lenouvel attribut TARGET.
- MARGINWIDTH="valeur"
- L'attribut MARGINWIDTH permet de contrôler les marges de gauche et de droite d'une fenêtre exprimées en pixels. Il est facultatif. Par défaut, c'est le navigateur qui décide de la marge appropriée.
- MARGINHEIGTH="valeur"
- Même chose, mais pour les marges du haut et du bas
- SCROLLING="yes|no|auto"
- L'attribut SCROLLING sert à indiquer si la fenêtre comporte un ascenseur ou non. La valeur "auto" laisse au navigateur le choix de l'ascenseur en fonction de la taille du document. L'attribut SCROLLING est facultatif. Par défaut sa valeur est "auto".
- NORESIZE
- L'attribut NORESIZE n'admet pas de valeur. Il indique que la fenêtre n'est pas re-dimensionnable par l'utilisateur. Attention: s'il est utilisé pour une fenêtre adjacente à un bord du document, aucune des fenêtres adjacentes au même bord ne sera re-dimensionnable. L'attribut NORESIZE est facultatif. Par défaut, toutes les fenêtres sont re-dimensionnables.
- <NOFRAMES>
- Cette balise permet au serveur d'offrir aux navigateurs qui n'interprètent pas les balises de fenêtrage un contenu alternatif. Les navigateurs capables d'interpréter les balises de fenêtrage ignorent toutes les balises placées entre les balises <NOFRAMES> et </NOFRAMES>
Assigner une fenêtre à un document
- L'attribut TARGET="nom_de_fenêtre" permet d'assigner une
fenêtre à un document. Il peut s'employer dans diverses balises:
-
- TARGET dans une balise <A>:
- < A HREF="url" TARGET="nom_de_la_fenêtre">
- TARGET dans une balise BASE:
- Permet de désigner une fenêtre par défaut pour afficher les documents appelés. Si les documents sont déjà assignés à une fenêtre, l'attribut TARGET de la balise BASE est ignoré.
- <BASE TARGET="nom_de_la_fenêtre>
- TARGET dans une balise AREA (images cliquables Netscape):
- <AREA SHAPE="forme_de_la_zone" COORDS=x,y,..."
- HREF="url" TARGET= "nom_de_la_fenêtre">
- TARGET dans une balise de formulaire:
- Permet d'afficher le résultat d'une requête dans une fenêtre
- donnée.
- <FORM ACTION="url" TARGET="nom_de_la_fenêtre">
Les noms de fenêtres spéciaux
- Tous les noms de fenêtres doivent commencer par un caractère alphanumérique. Cependant il existe quelques noms particuliers commençant par le signe "_" (souligné).
- TARGET="_blank"
- Le document sera toujours chargé dans une nouvelle fenêtre vide. Cette fenêtre n'aura pas de nom.
- TARGET="_self"
- Le document sera chargé dans la fenêtre où se trouvait le document appelant. Utile pour ignorer une fenêtre désignée par défaut dans la balise BASE.
- TARGET="_parent"
- Charge le document dans le document multi-fenêtres parent du document. Agit comme "_self" si le document parent n'existe pas.
- TARGET="_top"
- Charge le document sur toute la page-écran. Si le document est déjà pleine page, agit comme "_self"
Table des matières
La maîtrise des couleurs et des fonds
En HTML, les valeurs des couleurs peuvent être notées de deux façons:
- Avec des mots reservés pour 16 couleurs de base (black, white, etc.)
- Avec une notation hexadécimale pour les 256 couleurs RGB possibles (#FFFFFF, etc.)
La notation hexadécimale est la plus sûre. Elle doit être précédée du signe #.
Pour avoir la liste des couleurs et de leur notation, cliquez ici.
Ces valeurs peuvent s'appliquer à différents attributs:
Admet l'attribut COLOR=#x":
où x est la notation hexadécimale de la couleur du fond.
Exemple:
<BODY>
admet plusieurs attributs:
- BGCOLOR="#x"
- où x est la notation hexadécimale de la couleur du fond.
- TEXT="#x"
- où x est la notation hexadécimale de la couleur du texte.
- LINK="#x
- où x est la notation hexadécimale de la couleur des liens.
- VLINK="#x
- où x est la notation hexadécimale de la couleur des liens
déjà suivis.
- BACKGROUND="image_URL"
- utilise image_URL comme motif de fond d'écran. Si le motif n'occupe pas toute la page, il est répété automatiquement.
Table des matières
Les formulaires
Les formulaires contribuent à rendre le Web interactif et sont
utilisés dans de nombreuses situations.
Principe
L'utilisateur renseigne un formulaire affiché à l'écran en
remplissant les zones de saisie prévues à cet effet. Il envoie
ensuite ces données au serveur qui les traite grâce à un
programme puis renvoie le résultat au client.
L'écriture et l'affichage des formulaires se fait à l'aide de
balises HTML. Mais le traitement qui s'effectue sur le serveur requiert l'usage
d'un langage de programmation et des compétences de programmeur. On
trouvera en annexe une initiation à l'écriture de scripts sur un
serveur.
Le cadre du formulaire
- <FORM>
- Cette balise et la balise fermante correspondante encadrent le codage du formulaire.
La balise <FORM> requiert deux attributs:
- METHOD
- Cet attribut indique quelle est la méthode à utiliser pour traiter les données dans le script. Ses deux valezurs sont GET ou POST.
La méthode POST est la plus utilisée.
- ACTION
- Désigne l'URL du script permettant d'exploiter le formulaire.
La syntaxe d'ouverture d'un formulaire est donc:
<FORM METHOD="type_de_methode" ACTION="URL_du_script">
Exemple:
<FORM METHOD="post" ACTION="/cgi-bin/code">
Les éléments à saisir
- <INPUT>
- Balise générale des éléments à saisir. Elle est accompagnée des attributs suivants:
- NAME
- Définit le nom de la variable associée au champ de saisie. Ce nom doit être unique sauf dans le cas d'un ensemble composé de plusieurs éléments.
- NAME="nom_de_la_variable_associée"
- VALUE
- Pour un champ texte, il permet de prédéfinir le contenu du
champ.
- Pour un bouton de type submit ou reset, il indique le texte
à écrire sur le bouton.
- Pour un bouton de type checkbox, il indique la valeur associée
au bouton lorsque celui-ci est enfoncé (ou coché). La valeur
spécifiée par NAME identifie le bloc de boutons.
- Pour un bouton de type radio, il indique la valeur associée au
bouton lorsque celui-ci est enfoncé. La valeur spécifiée
par NAME identifie le bloc de boutons.
- TYPE
- Peut prendre les valeurs suivantes:
- SUBMIT
- Bouton qui déclenche l'envoi de toutes les données du formulaire vers le script de traitement. Le texte défini par VALUE sera écrit sur le bouton.
-
- <INPUT TYPE="submit" VALUE="validez">
- CHECKBOX
- Permet de définir une ou plusieurs valeurs qui vont être attribuées à une même variable (définie par NAME).
- <INPUT TYPE="checkbox" NAME="ville" VALUE="paris"> Paris <BR>
- <INPUT TYPE="checkbox" NAME="ville" VALUE="lyon">Lyon <BR>
- <INPUT TYPE="checkbox" NAME="ville" VALUE="marseille"> Marseille <BR>
- RADIO
- Permet de choisir une option unique parmi plusieurs.
- <INPUT TYPE="radio" NAME="ville" VALUE="paris" CHECKED> Paris <BR>
- <INPUT TYPE="radio" NAME="ville" VALUE="brest">Brest<BR>
- L'attribut CHECKED a pour effet de positionner un bouton en mode enfoncé (ou coché). Cliquer sur une option désélectionne automatiquement les autres.
- PASSWORD
- Zone de texte où les caractères sont remplacés par une étoile.
- RESET
- Permet d'effacer les données en cours de saisie. Le texte défini par l'attribut VALUE sera écrit sur le bouton.
- <INPUT TYPE="reset" VALUE="effacer">
- <SELECT>
- Balise d'encadrement de listes. S'emploie toujours avec la balise fermante correspondante. Utilise l'attribut NAME.
- <OPTION>
- Propose un menu déroulant. Se place devant chaque item de la liste. L'attribut SELECTED permet de choisir l'élément qui sera affiché par défaut.
- <SELECT NAME="plat">
- <OPTION>poisson
- <OPTION SELECTED>viande
- <OPTION> volaille
- </SELECT>
- Peut s'employer avec les attributs SIZE et MULTIPLE.
- SIZE
- Indique le nombre d'items et les fait apparaître dans une fenêtre avec ascenseur. Par défaut on ne peut sélectionner qu'un seul item de la liste.
- MULTIPLE
- Autorise le choix de plusieurs items dans une fenêtre à ascenseur.
- <SELECT NAME="semaine" SIZE=5 MULTIPLE>>
- <OPTION>lundi
- <OPTION>mardi
- <OPTION>mercredi
- <OPTION>jeudi
- <OPTION>vendredi
- </SELECT>
- <TEXTAREA>
- Crée une zone de saisie de texte en spécifiant sa taille grâce aux valeurs que l'on associera aux attributs ROWS (nombre de lignes) et COLS (nombre de colonnes). Il est possible d'afficher une texte (une consigne par exemple) entre les balises ouvrantes et fermantes.
- <TEXTAREA NAME="commentaires" ROW=10 COLS=40>
- Entrez ici vos commentaires
- </TEXTEAREA>
Table des matières
Ouvrages d'aide à la composition de document HTML
Les ouvrages suivants proposent des conseils judicieux pour écrire de "bons" documents HTML:
Autres ouvrages d'introduction
Ces ouvrages se proposent le même but que le présent guide:
En français:
- Pigot, Thierry, Créez vos pages Web sur
Internet, Sybex, 1995
En anglais:
Références complémentaires
Table des matières
Annexe
Alphabet ISO Latin 1 pour le français
- Æ
- Æ (ligature)
- Â
- Â
- À
- À
- Ç
- Ç
- É
- É
- Ê
- Ê
- È
- È
- Ë
- Ë
- Î
- Î
- Ï
- Ï
- Ô
- Ô
- Ö
- Ö
- Û
- Û
- Ù
- Ù
- Ü
- Ü
- â
- â
- æ
- æ (ligature)
- à
- à
- ç
- ç
- é
- é
- ê
- ê
- è
- è
- ë
- ê
- î
- î
- ï
- ï
- ô
- ô
- û
- û
- ù
- ù
- ü
- ü
- ®
- ® (Registered Trademark)
- ©
- © (Copyright)
On remarque l'absence des graphèmes OE et oe. À vérifier
clement@asterix.univ-paris8.fr
Table des matières