Vous devez reconnaître la marque du démon :
Ce document constitue le support d'un cours de normalisation HTML.
Un document conforme à la spécification 4.01 est composé de trois parties :
Voici un exemple de document dont vous pouvez voir le résultat :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Super document</TITLE>
</HEAD>
<BODY>
<P>Mon premier document
</BODY>
</HTML>
La première ligne permet d'identifier la version du langage utilisée (ici HTML 4.01) ainsi que le type du document. Il en existe trois :
Ensuite on trouve un certain nombre de balises permettant de structurer le texte ou d'identifier certaines propriétés de celui-ci.
Cette balise optionnelle permet d'indiquer ce qui constitue le document lui-même. Elle existe sous la forme ouvrante <HTML> et fermante </HTML>. Elle possède aussi deux attributs optionnels : lang et dir.
L'entête est normalement délimitée par la paire de balises <HEAD> entête </HEAD> qui sont optionnelles. Elle possède les attributs profile, lang et dir.
À l'intérieur de cette balise on peut trouver les suivantes :
<TITLE>Introduction à la reproduction nocturne des manchots en terre Adélie</TITLE>
Elle possède les attributs lang et dir.
<META lang="fr" name="Author" content="Jean-Baptiste Yunès"> <META http-equiv="Expires" content="Tue, 14 Nov 2000 16:00:00 GMT"> <META lang="fr" name="keywords" content="manchots, bandits, reproduction, terre adélie"> <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <META http-equiv="Content-Script-Type" content="text/javascript">
Dans la première ligne on précise le nom de l'auteur du document. Dans la seconde on spécifie une date d'expiration qui devrait être renvoyée dans l'entête Expires: de la réponse HTTP. La troisième spécifie une liste de mots-clés qui pourront être utilisés par des moteurs de recherche afin d'indexer le document. L'avant dernière permet de renvoyer dans l'entête de la réponse HTTP le champ Content-Type: indiquant qu'il s'agit d'un document HTML utilisant le jeu de caractères Latin-1. La dernière indique au navigateur que le langage de script utilisé par défaut sera du Javascript.
<LINK rel="Index" href="../index.html"> <LINK rel="Prev" href="a.html"> <LINK rel="Next" href="b.html"> <LINK title="in English" type="text/html" rel="alternate" hreflang="en" href="repro.en.html"> <LINK title="À imprimer" type="application/postscript" rel="alternate" media="print" href="repro.ps"> <LINK title="À voir" type="video/mpeg" rel="alternate" media="tv" href="repro.mpg">
Dans le première ligne on déclare un lien vers l'index logique contenant ce document, la seconde permet d'indiquer un document logiquement situé avant celui-ci dans une navigation linéaire et la troisième le document situé après. Les trois lignes suivantes déclarent des documents alternatifs permettant de choisir ou bien un autre langage (la ligne 4 fournit une version anglaise du document) ou bien une version destinée à un autre support (la ligne 5 fournit une version à imprimer et la ligne 6 un film à visionner).
<BASE href="http://manchots-sex.org/reproduction/hard/">
ainsi une URI relative comme ../soft/images/male.jpg sera résolue en http://manchots-sex.org/reproduction/soft/images/male.jpg.
Le corps est normalement délimité par les balises optionnelles <BODY> corps </BODY>. Cette balise possède les attributs lang, dir, id, class, style, title, onload, onunload et les évènements.
À l'intérieur de cette balise on habituellement trouve du texte balisé ou non. Certaines balises définissent des blocs de texte (block-level elements) et d'autres un simple marquage( inline elements).
Il existe deux balises génériques de groupement :
<DIV class="poeme" id="19532"> <DIV class="bis" id="19533">Voici le mois de mai,<BR> Où les fleurs volent au vent,</DIV> Où les fleurs volent au vent, si jolie mignonne,<BR> Où les fleurs volent au vent si mignonnement.</DIV>
En général un bloc de texte ainsi délimité est représenté en commençant une nouvelle ligne.
Les manchots sont des animaux. De plus, ils se <SPAN class="exergue">reproduisent</SPAN> et sur la <SPAN class="nouveauterme">banquise</SPAN> même.
Ils permettent de définir des sections du texte. Ces balises structures le texte puisqu'avec leur utilisation on peut segmenter le document en parties, sous-parties, sous-sous-parties (jusqu'au niveau de profondeur 6 très largement suffisant). Non seulement elles permettent de structurer mais en plus un titre est fournit pour chaque segment. Ces balises sont <H1> titre </H1>, <H2> sous-titre </H2>, <H3>sous-sous-titre </H3>, <H4> sous3-titre</H4>, <H5> sous4-titre </H5> et <H6> sous5-titre </H6>. Les attributs de ces différentes balises sont : lang, dir, id, class, style, title, et les évènements. Par exemple (voir le résultat) :
<H1>Première division</H1> Nous trouvons dans cette division les plus grands clubs sportifs pratiquant le lancer de cacahuètes à mains nues <H2>Trifouilly-les-oies</H2> Célèbre contrée de notre joli pays... <H2>Pétaouchnok</H2> Lieu de la mythique bataille des glorieuses troupes grosléonniennes et crétinoises. <H1>Deuxième division</H1> <H2>Toutenstok</H2> Lieu-dit situé à l'extrémité orientale de la sibérie...
qui produit le résultat :
Nous trouvons dans cette division les plus grands clubs sportifs pratiquant le lancer de cachuètes à mains nues
Célèbre contrée de notre joli pays...
Lieu de la mythique bataille des glorieuses troupes grosléonniennes et crétinoises.
Lieu-dit situé à l'extrémité orientale de la sibérie...
La balise <ADDRESS> texte </ADDRESS> doit être utilisée pour fournir au lecteur toute information permettant d'indentifier ou contacter l'auteur du document (ou d'une partie importante du document comme un formulaire). Les attributs possibles sont : lang, dir, id, class, style, title, et les évènements. Par exemple :
<ADDRESS>Jean-Baptiste Yunès, LIAFA, Université Paris 7 - Denis Diderot</ADDRESS>
qui produit le résultat :
Le texte est constitué de mots séparés par une suite de caractères d'espacement, comme tout texte habituellement constitué. Mais pour HTML les caractères d'espacement sont ASCII(0x20), ASCII(0x09), ASCII(0x0C) et Unicode(0x200B). De plus la longueur de la suite peut ne pas compter. L'interprétation minimale d'une telle suite est simplement de délimiter les mots sauf pour la balise <PRE>.
Il existe plusieurs balises permettant de distinguer les éléments d'une phrase. Celles-ci définissent un marquage linéaire ne brisant pas le flot du texte :
C'est <EM>a priori</EM> définit.
produit le résultat :
Elle possède les attributs lang, dir, id, class, style, title et les évènements.
Que dire de plus! La conversation est <STRONG>close</STRONG>.
produit le résultat :
Elle possède les attributs lang, dir, id, class, style, title et les évènements.
Comme a pu le dire <CITE>Jean-Sébastien Bach</CITE> : il ne faut pas fuguer.
produit le résultat :
Elle possède les attributs lang, dir, id, class, style, title et les évènements.
Les manchots <DFN>(animaux modernes)</DFN> ne sont pas à confondre avec les machos <DFN>(hommes préhistoriques)</DFN>.
produit le résultat :
Elle possède les attributs lang, dir, id, class, style, title et les évènements.
Voici comment déclarer un entier et l'initialiser : <CODE>int i=0;</CODE>
produit le résultat :
int
i=0;Elle possède les attributs lang, dir, id, class, style, title et les évènements.
Voici le résultat de <CODE>printf("Bonjour\n");</CODE> : <SAMP>Bonjour</SAMP>
produit le résultat :
printf("Bonjour\n"); :
BonjourElle possède les attributs lang, dir, id, class, style, title et les évènements.
Pour lancer la commande "ls", attendez l'invite <SAMP>$ </SAMP>, puis tapez <KBD>ls</KBD>
qui produit le résultat :
Elle possède les attributs lang, dir, id, class, style, title et les évènements.
Pour déclarer une variable <VAR>i</VAR> de type entier, c'est <CODE>int i;</CODE>
qui produit le résultat :
int
i;Elle possède les attributs lang, dir, id, class, style, title et les évènements.
L'abréviation de Massachusett est <ABBR>Mass.</ABBR>
produit le résultat :
Elle possède les attributs lang, dir, id, class, style, title et les évènements.
Tout le monde sait que <ACRONYM>radar</ACRONYM> c'est l'acronyme de <DFN>radio detection and ranging</DFN>.
produit le résultat :
Elle possède les attributs lang, dir, id, class, style, title et les évènements.
Il est possible de définir des éléments permettant de citer un texte :
Comme l'a dit <CITE>Jean-Sebastien Bach</CITE> <BLOCKQUOTE>Il ne sert a rien de fuguer<BR> surtout si l'on est mal tempéré</BLOCKQUOTE>
qui produit le résultat :
Il ne sert a rien de fuguer
surtout si l'on est mal tempéré
Les attributs sont lang, dir, class, id, style, title, cite et les évènements.
Comme l'a dit <CITE>Jean-Sebastien Bach</CITE> <Q>il ne sert a rien de fuguer</Q>.
qui produit le résultat :
il ne sert a rien de fuguer.
Les attributs sont lang, dir, class, id, style, title, cite et les évènements.
Savez-vous ce que représente H<SUB>2</SUB>O ?
qui produit le résultat :
Savez-vous ce que représente H2O ?
Les attributs sont lang, dir, id, class, style, title et les évènements.
M<SUP>elle</SUP> Françoise Dupont
produit le résultat :
Melle Françoise Dupont
Les attributs sont lang, dir, id, class, style, title et les évènements.
La notion de paragraphe est représentée par la balise <P> dont la forme fermante </P> est optionelle. Un paragraphe ne contient pas d'élément de type bloc, dont toute tentative de définition d'un bloc en son sein termine implicitement le paragraphe. Par exemple :
<P>Ceci est un paragraphe de texte. Ici nous sommes dans le même paragraphe. Les sauts de ligne ne représentent rien d'autre qu'un espacement habituel.</P> <P>Voici un autre paragraphe</p>
produit le résultat suivant :
Ceci est un paragraphe de texte. Ici nous sommes dans le même paragraphe. Les sauts de ligne ne représentent rien d'autre qu'un espacement habituel.
Voici un autre paragraphe.
Les attributs de la balise <P> sont : lang, dir, title, id, class, style et les évènements.
Il est possible de forcer la fin de ligne à la manière d'un retour chariot des textes ASCII purs. Pour cela la balise <BR> (dont la forme fermante n'existe pas) est définie. Par exemple :
<P>Voici un paragraphe contenant du texte. Maintenant je vais poser un saut de ligne :<BR> Mais nous sommes encore dans le même paragraphe.</P> <P>Voici un autre paragraphe</P>
produit le résultat suivant :
Voici un paragraphe contenant du texte. Maintenant je vais poser un saut de
ligne :
Mais nous sommes encore dans le même paragraphe.
Voici un autre paragraphe.
Les attributs de la balise <BR> sont : title, id, class, style et les évènements.
Sachant que l'application chargée du rendu du document est libre de choisir la position de la coupure d'une ligne dans le texte courant (son choix peut se porter sur n'importe quel espacement), il est parfois nécessaire de l'empêcher de couper à certains endroits précis. Pour cela HTML 4.01 définit le caractère d'espacement insécable   ou   ou encore  . Par exemple :
Il n'est pas permis de couper entre HTML et 4.01 : HTML 4.01
De plus il est aussi nécessaire de permettre la césure de certains mots. C'est le rôle du caractère ­ ou ­ ou encore ­.
La balise de texte préformaté <PRE> dont la balise fermante </PRE> est obligatoire, permet de faire appraître du texte comme il est spécifié : c'est-à-dire de conserver ses propriétés de formatage. Par exemple :
Du texte. Encore du texte. <PRE>Du texte. Encore du texte.</PRE>
produit le résultat suivant :
Du texte. Encore du texte.
Du texte. Encore du texte.
Les attributs de la balise <PRE> sont : lang, dir, title, id, class, style et les évènements.
Il existe deux balises permettant de faire apparaître des parties qui auraient pu apparaître ou disparaître lors d'une modification du texte. C'est très utile pour rendre visible des chagements notables. Les balises sont :
Les attributs de la balise <INS> sont : lang, dir, title, id, class, style, cite, datetime et les évènements.
Les attributs de la balise <DEL> sont : lang, dir, title, id, class, style, cite, datetime et les évènements.
Par exemple :
Nous <DEL>(Joe, Jack, William, Averell)</DEL> <INS>(Ma et ses fils)</INS> avons décidé d'attaquer la banque à <DEL>trois</DEL> <INS>deux</INS> heures.
produit le résultat suivant :
Nous (Joe, Jack, William, Averell) (Ma et ses fils)
avons décidé d'attaquer la banque à trois deux
heures.
Il existe trois types de listes : non ordonnées, ordonnées et de définitions. Chaque liste pouvant contenir d'autres listes.
Elles sont définies en utilisant les balises suivantes :
Les éléments de ces deux types de liste sont définis par la balise <LI> dont la forme fermante </LI> est optionnelle. Les attributs sont : lang, dir, id, class, title, style et les évènements. Par exemple :
<H1>Le coq au vin blanc</H1>
<H2>Ingrédients</H2>
Pour huit personnes :
<UL>
<LI>1 coq d'environ 2,5 kg découpé
<LI>250 g. de parures et os de volaille
<LI>8 tomates
<LI>250 g. de champignons de Paris
<LI>3 échalottes
<LI>½ botte de persil
<LI>½ botte de cerfeuil
<LI>½ botte d'estragon
<LI>150 g. de beurre
<LI>20 cl. d'huile
<LI>35 cl. de vin blanc sec
<LI>2 cuillère à soupe de Cognac
<LI>1 cuillère à soupe de farine
<LI>sel
<LI>poivre
</UL>
<H2>Temps</H2>
Préparation : 35 mn.<BR>
Cuisson : 2 heures.
<H2>Procédure</H2>
<OL>
<LI>Faites chauffer 10 cl. d'huile et 60 g. de beurre dans une cocotte,
<LI>Dès que le beurre chante, faites-y revenir le cou, les ailerons et les os de volaille.
<LI>Laisser dorer 10 mn. en retournant les morceaux plusieurs fois
<LI>Saupoudrez de farine, mélangez et laissez roussir légèrement la farine
<LI>Recouvrez d'eau, couvrez et laisser mijoter 45 mn. à feu doux
<LI>Passez le bouillon dans une fine passoire afin de le récupérer
<LI>Après incision, plongez quelques secondes les tomates dans de l'eau bouillante
et retirez-en la peau puis les graines
<LI>Hachez la pulpe
<LI>Lavez le persil, le cerfeuil et l'estragon, puis hachez les finement
<LI>Pelez et hachez les échalottes
<LI>Assaisonnez de sel et poivre les cuisses et filets du coq
<LI>Faites chauffer 10cl. d'huile et 60 g. de beurre dans une sauteuse
<LI>Faites-y dorer les cuisses environ 20 mn. en les retournant régulièrement
<LI>Ajoutez les filets et faites-les dorer de tous côtés
<LI>Laissez cuire 25 mn. en surveillant bien la cuisson
<LI>Lavez puis émincez les champignons
<LI>Ajoutez-les dans la cocotte avec les échalottes
<LI>Mélangez en versant 30 cl. de vin ainsi que le Cognac
<LI>Laissez réduire le jus de moitié avant de rajouter le bouillon filtré
<LI>Déposez les morceaux de coq dans un plat de service
<LI>Ajoutez le restant de beurre au jus, ainsi qu'un trait de vin
<LI>Fouettez puis ajoutez les fines herbes
<LI>Nappez le coq de sauce bien chaude et servez...
</OL>
qui produit le résultat suivant :
La paire de balise <DL> liste </DL> permet de définir une liste de termes chacun associé à sa définition. Il faut pour cela utiliser <DT> (balise fermante optionelle) pour le terme puis <DD> (balise fermante optionnelle) pour sa définition. Toutes ces balises possèdent les attributs : lang, dir, id, class, title, style et les évènements. Par exemple :
<DL> <DT>Janvier <DL>est le premier mois de l'année <DT>Février <DL>est le deuxième mois de l'année </DL>
produit le résultat suivant :
Il est parfois utile de présenter des fragments de texte HTML sous forme de tableau. Pour cela il existe la balise <TABLE> tableau </TABLE> qui possède les attributs suivants : lang, dir, id, class, style, title, summary, width, border, frame, rules, cellspacing, cellpadding et les évènements. La description d'un tableau fait intervenir de nombreuses balises :
Par exemple :
<TABLE border="1" frame="box" rules="groups">
<CAPTION>Résultats du sondage</CAPTION>
<COLGROUP align="center" span="2">
<COLGROUP align="center" span="3">
<THEAD valign="top">
<TR><TH>Nom<TH>Prénom<TH>Attaque<BR>banque<TH>Attaque<BR>diligence<TH>Attaque<BR>épicerie
<TBODY>
<TR><TD>Dalton<TD>Joe<TD>o<TD>o<TD>n
<TR><TD>Dalton<TD>Jack<TD>o<TD>o<TD>n
<TR><TD>Dalton<TD>William<TD>o<TD>o<TD>n
<TR><TD>Dalton<TD>Averell<TD>o<TD>o<TD>o
</TABLE>
qui produit le résultat suivant :
| Nom | Prénom | Attaque banque |
Attaque diligence |
Attaque épicerie |
|---|---|---|---|---|
| Dalton | Joe | oui | oui | non |
| Dalton | Jack | oui | oui | non |
| Dalton | William | oui | oui | non |
| Dalton | Averell | oui | oui | oui |
Les relations hypertexte utilisent la balise d'ancrage <A> texte </A> (balise fermante obligatoire). Le graphe de l'hypertexte utilise donc des liens dirigés : arc sortant (lien vers un document ou un point dans un document) et point d'ancrage à l'intérieur d'un document. Les attributs sont : lang, dir, id, class, style, title, charset, type, name, href, hreflang, rel, rev, accesskey, shape, coords, tabindex, onfocus, onblur et les évènements. Par exemple :
<P>Si vous voulez passer directement à la suite, cliquez sur ce <A rel="Next" href="#suite">lien</A>. Pour voir la page du W3C suivez <A rel="Bookmark" href="http://www.w3.org/">celui-ci</A>. <P><A name="suite">V</A>oici la suite du texte.
qui produit le résultat suivant :
Si vous voulez passer directement à la suite, cliquez sur ce lien. Pour voir la page du W3C suivez celui-ci.
Jusqu'à présent les documents ne contenaient que du texte structuré. Le premier part vers des documents multimédia peut être fait en permettant d'inclure dans le flôt du texte des images. C'est le rôle de la balise <IMG> qui ne possède pas de version fermante. Elle possède les attributs : lang, dir, id, class, style, title, src, alt, longdesc, name, height, width, usemap, ismap et les évènements. Les images font partie du flôt du texte, elles ne définissent pas à elles seules un bloc. Par exemple :
Vous devez reconnaître la marque du démon : <IMG alt="La signature de ZORGLUB" src="http://www.liafa.univ-paris-diderot.fr/~yunes/images/zorglub.xbm">
qui produit le résultat suivant :
Vous devez reconnaître la marque du démon :
Il est recommandé d'include systématiquement un texte de remplacement dans l'attribut alt.
Il est parfois utile de définir des zones sensibles à l'intérieur de l'image afin de lier chacun d'elle à un autre fragment de document. C'est le rôle des balises suivantes :
Essayez de cliquer sur les différentes zones de l'image : <IMG alt="Image magique" src="image.png" usemap="carte"> <MAP name="carte"> <AREA shape="rect" coords="0,0,49,49" href="rouge.html" alt="zone rouge"> <AREA shape="rect" coords="0,50,49,99" href="bleu.html" alt="zone bleue"> <AREA shape="rect" coords="50,0,99,99" href="vert.html" alt="zone verte"> </MAP>
qui produit le résultat suivant :
Essayez de cliquer sur les différentes zones de l'image : 
HTML 4.01 définit maintenant une balise d'inclusion générique d'objets permettant d'intégrer dans le document a-priori n'importe quel type d'objet. C'est le rôle de la balise <OBJET> (balise fermante obligatoire) possédant les attributs : lang, dir, id, class, style, title, declare, classid, codebase, data, type, codetype, archive, standby, height, width, usemap, name, tabindex et les évènements. Par exemple l'inclusion d'une image peut être réalisée ainsi :
Voici une image : <OBJECT data="image.jpg" type="image/jpeg" standby="Attendez je charge l'image">Dommage, c'est une image pleine de couleurs...</OBJECT>
qui produit le résultat suivant :
Voici une image :
Cette balise permet aussi de définir des alternatives lorsque le client n'est pas capable d'interpréter le type spécifié. Par exemple :
<OBJECT type="image/jpg" data="image.jpg" standby="Chargement d'une image JPEG"> <OBJECT type="image/png" data="image.png" standby="Chargement de la version PNG"> Votre navigateur ne supporte ni PNG, ni JPEG, à moins qu'il ne sache pas correctement interpréter les balises OBJECT. </OBJECT> </OBJECT>
produit le résultat suivant (selon votre navigateur vous aurez en priorité la version JPEG, PNG ou le texte) :
Les objets pouvant recevoir des paramètres, il existe une balise permettant de les spécifier <PARAM> (sans forme fermante) possédant les attributs suivants : id, name, value, valuetype, type. Par exemple :
<OBJECT codebase="/~yunes/cours/annexes/java/codebase/" classid="Essai.class" type="application/java" width="100" height="100"> <PARAM name="nom" value="par Object"> <APPLET codebase="/~yunes/cours/annexes/java/codebase/" code="Essai.class" width="100" height="100"> <PARAM name="nom" value="par Applet"> Java ne semble pas fonctionner. </OBJECT> </OBJECT>
qui produit le résultat suivant :
Un formulaire est un fragment de document contenant en plus du texte structuré ou des objets habituels certains éléments particuliers permettant à l'utilisateur de spécifier certaines données qu'il peut ensuite envoyer vers un serveur a des fins de traitement. Ces éléments particuliers sont appellés éléments de contrôle.
La création d'un formulaire passe par l'utilisation de la balise <FORM> formulaire </FORM> (balise de fin obligatoire). Ses attributs sont : lang, dir, id, class, style, title, action, accept-charset, method, enctype, accept, name, onsubmit, onreset, et les évènements.
Ils sont nombreux mais tous créés avec la balise <INPUT> (sans balise fermante). Elle possède les attributs : lang, dir, id, class, style, title, type, name, value, checked, disabled, readonly, size, maxlength, src, alt, usemap, ismap, tabindex, accesskey, onfocus, onblur, onselect, onchange, accept et les évènements. Par exemple :
<FORM method="get"> Identité : <INPUT type="text" name="identite" size="8" maxlength="8"><BR> Mot de passe : <INPUT type="passwd" name="motdepasse" size="8" maxlength="8"><BR> <INPUT type="reset" value="Annuler"> <INPUT type="submit" value="Valider"> </FORM>
produit le résultat suivant :
ou encore
<FORM method="get">
Votre nom : <INPUT type="text" name="nom" size="20" maxlength="30"><BR>
Votre sexe : <LABEL for="jby01">Masculin :</LABEL>
<INPUT id="jby01" type="radio" name="sexe" value="Masculin">
<LABEL for="jby02">Féminin :</LABEL>
<INPUT id="jby02" type="radio" name="sexe" value="Féminin" checked><BR>
Utilisez-vous un rasoir électrique ? <INPUT type="checkbox" name="rasoir">
</FORM>
Il faut utiliser la balise <BUTTON> contenu </BUTTON> (balise fermante obligatoire) et possède les attributs : lang, dir, id, class, style, title, name, value, type, disabled, tabindex, accesskey, onfocus, onblur et les évènements. On peut remarquer que cette balise permet de réaliser des boutons plus généraux que ceux définis par <INPUT>. Par exemple :
<FORM method="get"> <BUTTON type="button" name="monbouton">Mon bouton <IMG src="image.jpg" height="20" width="100"></BUTTON> </FORM>
produit le résultat suivant :
Il existe trois balises permettant de créer des sélections par menu :
<FORM method="get">
<SELECT name="qui">
<OPTGROUP label="Frères">
<OPTION selected="selected" label="Joe" value="JoeD">Joe Dalton</OPTION>
<OPTION label="Jack" value="JackD">Jack Dalton</OPTION>
<OPTION label="William" value="WilliamD">William Dalton</OPTION>
<OPTION label="Averell" value=AverellD">Averell Dalton</OPTION>
</OPTGROUP>
<OPTGROUP label="Famille">
<OPTION label="Ma" value="MaD">Ma Dalton</OPTION>
</OPTGROUP>
</SELECT>
</FORM>
qui produit le résultat suivant :
La balise <TEXTAREA> texte </TEXTAREA> permet de définir une zone de saisie de texte large. Ses attributs sont : lang, dir, id, class, style, title, name, rows, cols, disabled, readonly, tabindex, accesskey, onfocus, onblur, onselect, onchange et les évènements. Par exemple :
<FORM method="get"> <TEXTAREA name="letexte" rows="3" cols="10"> Bonjour Ca va ? </TEXTAREA> </FORM>
produit le résultat suivant :
On peut ajouter une étiquette aux objets de contrôle qui n'en possède pas. La forme de la balise est <LABEL> texte </LABEL> et ses attributs sont : lang, dir, id, class, style, title, for, accesskey, onfocus, onblur et les évènements.
On peut ajouter un minimum de structure aux formulaires :
<FORM method="get">
<FIELDSET>
<LEGEND>Identification</LEGEND>
Votre nom : <INPUT name="nom" type="text"><BR>
Votre prénom : <INPUT name="prenom" type="text">
</FIELDSET>
<FIELDSET>
<LEGEND>Vos commentaires</LEGEND>
Qu'avez-vous à dire : <TEXTAREA name="commentaire" rows="5" cols="40"></TEXTAREA>
</FIELDSET>
</FORM>
produit le résultat suivant :
<TT>, <I>, <B>, <BIG> et <SMALL> dont les balises fermantes sont obligatoires permettent de spécifier un type de rendu désiré pour du texte en ligne soit respectivement : police à chasse fixe, italique, gras, gros et petit. Les attributs sont : lang, dir, id, class, style, title et les évènements. Par exemple :
Voici une police <TT>à chasse fixe</TT>, du texte <I>en italique</I>, un peu de <B>gras</B>. Si vous lisez avec un peu de difficultés ceci devrait vous ravir : <BIG>Bonjour!</BIG> Si vous possédez une loupe : <SMALL>n'hésitez pas!</SMALL>
produit le résultat suivant :
Voici une police à chasse fixe, du texte en italique, un peu de gras. Si vous lisez avec un peu de difficultés ceci devrait vous ravir : Bonjour! Si vous possédez une loupe : n'hésitez pas!
<HR> qui ne possède pas de balise fermante associée, permet de tirer un trait horizontal dans le document. Les attributs sont : lang, dir, id, class, style, title et les évènements.
La balise <SCRIPT> (balise fermante </SCRIPT> obligatoire) permet de placer un script à l'intérieur d'un document. Ces attributs sont : charset, type, src et defer.
La balise <NOSCRIPT> texte </NOSCRIPT> permet de faire apparaître du texte dans le cas où l'agent utilisateur se révèle incapable d'exécuter des scripts. Ces attributs sont : lang, dir, id, class, style, title et les évènements.
Pour les éléments <BUTTON> des formulaires cet attribut définit le genre de bouton désiré, les valeurs possibles sont : submit, button et reset.
Ces attributs particuliers permettent d'associer à un élément du document une expression d'un langage de script en réponse à un évènement. Pour en savoir plus consultez le cours sur JavaScript.
Les évènements sont les suivants :