Le sommaire de référence HTML est conçu pour les utilisateurs
qui s'y connaissent déjà en HTML et qui désirent avoir lors de leur travail
quotidien une aide, soit à l'écran soit comme imprimé sans devoir cliquer
beaucoup. Si vous ne comprenez pas quelque chose dans la représentation condensée
sur cette page ou si vous avez des problèmes avec l'utilisation de commandes,
suivez les liens du type
description.
Le sommaire de référence ne prétend pas être exhaustif!
Dans le sommaire de référence les symboles suivants sont utilisés:
Les attributs qui attendent certaines valeurs, sont représentées ainsi (exemple):
align=left|center|right|justify
Cela signifie que l'une des mentions align=left, align=right, align=center
ou align=justify est autorisée.
Les attributs qui attendent des noms ou données à attribuer vous-même sont
représentés ainsi (exemple):
value="valeur"
Cela signifie que vous devez à la place de valeur mettre
quelque chose qui ait un sens par exemple value="salami".
Les attributs qui attendent des mentions de couleur sont
représentés ainsi (exemple):
bgcolor=#XXXXXX
Cela signifie que vous pouvez noter soit une mention de couleur RGB
hexadécimale comme bgcolor=#3300CC ou un nom de couleur autorisé
comme bgcolor="blue".
Les attributs qui attendent une adresse URL ou un fichier externe sont
représentés ainsi (exemple):
src="URL"
Cela signifie que vous pouvez mentionner soit une simple référence de fichier
comme src="team100.jpg", une mention relative comme src="../images/team100.jpg"
ou une adresse URL absolue comme src="http://www.selfhtml.com.fr/team100.jpg".
Les attributs qui attendent une valeur numérique sont
représentés ainsi (exemple):
border=x
Pour les descriptions condensées, il sera mentionné ce que la valeur signifie
ou quelles unités de mesures sont autorisées.
|
|
| HTML ossature d'un fichier HTML |
<html> <head> <title>Titre du fichier</title> </head> <body> contenu du fichier </body> </html> |
|
|
Donner un titre explicite dans l'entête de fichier! Noter tout le contenu
visible du fichier entre <body> et </body>. |
||
| type de document SGML |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 2.0//EN"> ou <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> ou <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> ou <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> ou <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> ou <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "URL"> |
|
|
Si utilisé, faire figurer dans la première ligne du fichier HTML avant le
repère d'ouverture <html>. Mentionner la version HTML désirée
qui est employée dans le fichier. Pour HTML 4.0 des mentions facultatives sont
possibles: Transitional signifie: des scripts et des feuilles de style sont employées. Frameset signifie: le fichier contient des définitions de jeux de frames. "URL" signifie: mentionner l'adresse de DTD de HTML |
||
| commentaires | <!-- Ceci est un commentaire --> | |
|
Pour documenter en interne des contenus ou des commandes. N'est pas affiché
dans le navigateur. |
||
| adresse de base | <base href="URL"> | |
|
Autorisé dans l'entête de fichierentre <head> et </head>.
n'utiliser que dans des cas exceptionnels fondés! |
||
| fenêtre cible de base | <base target="nom"> | |
|
La fenêtre cible standard pour des liens avec des frames, pour les liens mêmes
une mention target= n'est alors plus nécessaire. Permis dans
l'entête de fichier entre <head> et </head>. |
||
| mention Meta: auteur |
<meta name="author" content="nom"> | |
|
Mention de l'auteur. Permis dans l'entête de fichier entre <head>
et </head>. |
||
| mention Meta: description |
<meta name="description" content="texte"> | |
|
Descriptif sommaire du contenu. Permis dans l'entête de fichier entre <head>
et </head>. |
||
| mention Meta: mots clés |
<meta name="keywords" content="mot, mot, mot"> | |
|
Mots clés sur le contenu. Permis dans l'entête de fichier entre <head>
et </head>. |
||
| mention Meta: date |
<meta name="date" content="1998-04-30T08:49:37+00:00"> | |
|
Date de la publication. Dans l'exemple: 1998=année, 04=mois, 30=jour, 08=heures,
49=minutes, 37=secondes, +00:00=pas de différence avec l'heure GMT. Permis dans
l'entête de fichier entre <head> et </head>. |
||
| mentions Meta : Robots |
<meta name="robots" content="index|noindex|follow|nofollow"> | |
|
Instruction aux moteurs de recherche: lecture permise (index) ou non
permises (noindex), suivre les liens permis (follow) ou non
permis(nofollow). Permis dans l'entête de fichier entre <head>
et </head>. |
||
| mention Meta: jeu des caractères |
<meta http-equiv="content-type" content="text/html; charset=iso-8559-1"> | |
|
Mentionner le type Mime du fichier (text/html) et le jeu de caractères
utilisé(iso-8559-1) - la dernière mention désigne la jeu de
caractères Western Latin 1 (cas normal pour le français). Permis dans l'entête de fichier entre <head>
et </head>. |
||
| mention Meta: langage script |
<meta http-equiv="Content-Script-Type" content="text/javascript"> | |
|
Mentionner le type Mime du langage script. Dans l'exemple : text/javascript
pour JavaScript. Permis dans l'entête de fichier entre <head>
et </head>. |
||
| mention Meta: langage de style |
<meta http-equiv="Content-Style-Type" content="text/css"> | |
|
Mentionner le type Mime du langage de feuilles de style. Dans l'exemple: text/css
pour feuilles de style CSS. Permis dans l'entête de fichier entre <head>
et </head>. |
||
| mention Meta: charger de l'adresse d'origine |
<meta http-equiv="expires" content="0"> | |
|
Mentionner la date à partir de laquelleil faut charger de l'adresse originale. 0
signifie: toujours charger de l'adresse d'origine (ignorer le serveur Proxy). Permis dans l'entête de fichier entre <head>
et </head>. |
||
| mention Meta: faire suivre automatiquement |
<meta http-equiv="refresh" content="0; URL=http://www.xy.de/"> | |
|
Mentionner quand et quelle adresse doit être chargée automatiquement. 0
signifie: tout de suite (sinon, mention en secondes). URL est un fichier ou une
adresse WWW qui doit être chargée automatiquement après le temps mentionné.
Permis dans l'entête de fichier entre <head> et </head>. |
||
| mentions Meta dans un fichier séparé |
<head profile="URL"> | |
|
URL est un fichier ou une adresse WWW où se trouvent les mentions Meta. |
||
| relations logiques |
<link rel="contents" title="titre" href="URL"> ou <link rev="contents" title="titre" href="URL"> |
|
|
L'attribut rel= figure pour relation, rev= pour relation de
retour. Pour les deux attributs les mentions suivantes sont possibles: contents = index du contenu chapter = chapitre section = section subsection = sous-section index = index des mots clés glossary = glossaire appendix = annexe copyright = remarques sur les droits next = page suivante prev = page précédente start = page de début bookmark = point d'orientation générale alternate = autre mode de lecture L'attribut href= donne l'adresse URL ou le fichier de la cible de la relation, title= est l'inscription pour le bouton quand celui-ci est supporté par le navigateur. permis dans l'entête de fichier entre <head> et </head>. |
||
| couleurs de fichier globales |
<body bgcolor=#XXXXXX text=#XXXXXX link=#XXXXXX vlink=#XXXXXX alink=#XXXXXX> | |
|
Noter les mentions dans le repère d'ouverture <body>.
Mentions possibles pour la couleur d'arrière plan (bgcolor=), la
couleur du texte (text=), celle des liens aux pages non-visitées (link=),
aux pages déjà visitées (vlink=) et celle des liens venant d'être
cliqués (alink=). |
||
| image d'arrière-plan (Wallpaper) |
<body background="URL"> | |
|
Noter les mentions dans le repère d'ouverture <body>. Mentionner
des graphiques GIF- ou JPG. |
||
| image d'arrière plan fixe |
<body background="URL" bgproperties=fixed> | |
|
Noter la mention bgproperties=fixed en plus de background=. |
||
| musique de fond |
Microsoft: <bgsound src="URL" loop=infinite> Netscape: <embed src="URL" loop=true autostart=true hidden=true width=0 height=0> |
|
|
Noter la mention Microsoft entre <head> et </head>,
la mention Netscape derrière le repère d'ouverture <body>.
Mentionner des fichiers du type WAV, MID ou AU. |
||
|
|
| titres | <h[1-6]>texte</h[1-6]> | |
|
Six niveaux de titres sont permis à savoir par exemple <h1>texte</h1>. |
||
| aligner des titres |
<h[1-6] align=left|center|right|justify>texte</h[1-6]> | |
|
Aligner avec mit align=, soit centré (center), à droite (right),
justifié (justify) ou comme par défaut à gauche (left). |
||
| paragraphes de texte | <p>texte</p> | |
|
Repère de fermeture non obligatoire mais recommandé. |
||
| aligner les paragraphes |
<p align=left|center|right|justify>texte</p> | |
|
Aligner avec align=, soit centré (center), à droite (right),
justifié (justify) ou comme par défaut à gauche (left). |
||
| forcer le passage à la ligne |
texte ancienne ligne<br>texte nouvelle ligne | |
|
|
||
| empêcher le passage à la ligne automatique |
<nobr>texte</nobr> | |
|
|
||
| autoriser le passage à la ligne |
texte<wbr>texte | |
|
|
||
| listes numérotées |
<ol> <li>élément de liste</li> <li>élément de liste</li> </ol> |
|
|
Le repère de fermeture n'est pas absolument obligatoire mais recommandé. |
||
| listes
numérotées alphabétiquement ou en chiffres romains |
<ol type=a|A|i|I> <li>élément de liste</li> <li>élément de liste</li> </ol> |
|
|
Mentionner le type de numérotation avec type= a pour alphabétiquement -minuscules A pour alphabétiquement -majuscules i pour chiffres romains -minuscules I pour chiffres romains -majuscules |
||
| influencer la numérotation |
<ol start=x> <li>élément de liste</li> <li value=x>élément de liste</li> </ol> |
|
|
Mentionner la valeur de départ avec start= (nombre). Mentionner dans la liste la valeur pour poursuivre avec value= (nombre) |
||
| listes énumératives |
<ul> <li>élément de liste</li> <li>élément de liste</li> </ul> |
|
|
Le repère de fermeture n'est pas absolument obligatoire mais recommandé. |
||
| fixer le type de puces |
<ul type=square|circle|disc> <li>élément de liste</li> <li>élément de liste</li> </ol> |
|
|
Mentionner le type de puces avec type=, soit comme cercle/point (circle),
carré (square) ou circulaires pleines(disc). |
||
| listes de menus |
<menu> <li>élément de liste</li> <li>élément de liste</li> </menu> |
|
|
Le repère de fermeture n'est pas absolument obligatoire mais recommandé. |
||
| listes de répertoires |
<dir> <li>élément de liste</li> <li>élément de liste</li> </dir> |
|
|
Le repère de fermeture n'est pas absolument obligatoire mais recommandé. |
||
| listes de définitions |
<dl> <dt>expression à définir</dt> <dd>définition de l'expression</dd> </dl> |
|
|
|
||
| représenter des listes sous forme condensée |
<ol compact> <ul compact> <dl compact> |
|
|
Permis dans les repères d'ouverture de listes numérotées, énumératives et
de définitions. |
||
| citations | <blockquote>texte</blockquote> | |
|
|
||
| citations avec URL | <blockquote cite="URL">texte</blockquote> | |
|
|
||
| adresses | <address>texte</address> | |
|
|
||
| texte pré formaté |
<pre>texte</pre> | |
|
|
||
| largeur d'un texte pré formaté |
<pre width=x>texte</pre> | |
|
Largeur (width=) est le nombre de signes par ligne. |
||
| anciennes commandes pour paragraphes de texte pré formaté |
<xmp>texte</xmp> <listing>texte</listing> <plaintext>texte |
|
|
Paragraphes pour textes d'exemple (<xmp>), code source (<listing>)
ou en général pour du texte clair (<plaintext>). |
||
| marquage de texte logique |
<em>avec intonation (emphatique)</em> <strong>avec une forte intonation</strong> <code>ceci est du code source</code> <samp>exemple</samp> <kbd>ceci est une entrée clavier</kbd> <var>ceci est une variable</var> <cite>ceci est une citation d'une autre source</cite> |
|
| <dfn>ceci est la définition d'un concept</dfn> | ||
|
<acronym>ceci est une abréviation</acronym> <q cite="URL">ceci est une citation de l'adresse URL citée</q> |
||
|
|
||
| marquage de texte physique |
<b>gras</b> <i>italique</i> <tt>pré formaté</tt> |
|
|
<u>souligné</u> <strike>barré</strike> <big>plus grand</big> <small>plus petit</small> <sup>exposant</sup> <sub>indice</sub> |
||
| <s>barré</s> | ||
| <blink>clignotant</blink> | ||
|
|
||
| taille de police |
<font size=1|2|3|4|5|6|7>texte</font> ou <font size=+1|+2|+3|-1|-2|-3>texte</font> |
|
|
Taille de police (size=) en 7 niveaux à mentionner en valeur absolue
ou négative. Taille normale: 3. |
||
| couleur de police | <font color=#XXXXXX>texte</font> | |
|
|
||
| police | <font face="police_1,police_2,...">texte</font> | |
|
Mentionner comme police (face=) un ou même plusieurs noms de police. |
||
| taille de police normale |
<basefont size=1|2|3|4|5|6|7>Texte | |
|
Mentionner la taille de police normale (size=) avec 7 niveaux possible.
Pas de repère de fermeture. |
||
| couleur de - police normale |
<basefont color=#XXXXXX>Texte | |
|
Pas de repère de fermeture. |
||
| police normale |
<basefont face="Schriftart_1,Schriftart_2,...">texte | |
|
Mentionner comme police (face=) un ou même plusieurs nom de polices.
Pas de repère de fermeture. |
||
| passage avec plusieurs éléments |
<div align=left|center|right|justify>divers éléments HTML</div> | |
|
Alignement global possible (align=) centré (center), à
droite (right), justifié (justify) ou comme par défaut à
gauche (left). |
||
| passage centré avec plusieurs éléments |
<center>différents éléments HTML</center> | |
|
|
||
| lignes de séparation |
texte avant <hr> texte après |
|
|
|
||
| structurer les lignes de séparation |
<hr width=x size=x align=left|center|right> |
|
|
<hr color=#XXXXXX> |
||
|
Sans ombrage (noshade), épaisseur de ligne (size=) en pixels,
largeur de ligne (width=) en pixels ou en pourcentage, alignement (align=)
à gauche (left), à droite (right) ou comme par défaut
dentré (center). Ligne de séparation de couleurs (color=). |
||
| plusieurs colonnes de texte |
<multicol cols=x width= gutter=> contenu </multicol> |
|
|
Déterminer le nombre de colonnes avec cols= (nombre). La largeur de toutes les colonnes peut être fixée en pixels ou pourcentage avec width= et l'espace entre les colonnes en pixels avec gutter=. |
||
| espaces |
<spacer type=vertical|horizontal size=x> <spacer type=block width=x height=x align=left|right> |
|
|
Déterminer l'espace vertical en pixels avec type=vertical l'espace
horizontal (retrait) avec type=horizontal, mentionner dans les deux cas
l'espace en pixels avec size=. Créer une image invisible (bloc) avec type=block,
en mentionnant largeur (width=) et hauteur (height=) du bloc
en pixels et en fixant avec align= l'alignement à gauche avec flux de
texte à droite (left) ou à droite avec flux de texte à gauche (right). |
||
| texte déroulant (Marquee) |
<marquee>texte</marquee> | |
|
|
||
| structurer du texte déroulant (Marquee) |
<marquee direction=left|right>texte</marquee> <marquee scrollamount=x scrolldelay=x>texte</marquee> <marquee behavior=alternate>texte</marquee> <marquee align=top|middle|bottom>texte</marquee> <marquee height=x hspace=x>texte</marquee> |
|
|
Déterminer le sens du déroulement (direction=) de droite à gauche (right)
ou comme par défaut de gauche à droite (left). Régler la vitesse de
déroulement avec scrollamount= et scrolldelay=. Déroulement
alterné avec behavior=alternate. Alignement du texte environnant avec align=.
Espace du texte environnant avec hspace= et hauteur avec height=. |
||
|
|
| construction d'un tableau |
<table border> <tr> <th>cellule d'entête</th> <th>cellule d'entête</th> </tr> <tr> <td>cellule de données</td> <td>cellule de données</td> </tr> </table> |
|
|
Tableau avec quadrillage visible par la mention border dans le repère
d'ouverture du tableau, sans la mention, le tableau est sans quadrillage. |
||
| prédéfinir les colonnes |
<table border> <colgroup> <col> <col width=x span=x> </colgroup> <tr> <td>cellule</td> <td>cellule</td> </tr> </table> |
|
|
Prédéfinir avec le repère <col> autant de colonnes qu'a le
tableau. Mentionner la largeur des colonnes souhaitée avec width= et
cela en pixels, pourcentage ou relation à d'autres colonnes (par exemple: 4* = 4
part de la somme des parts ainsi définies dans les autres colonnes). Définir
une colonne qui s'étend sur plusieurs colonnes avec span=
(nombre de colonnes). |
||
| entête, corps,
et pied d'un tableau |
<table border> <thead> <!--cellules de tableau--> </thead> <tbody> <!--cellules de tableau--> </tbody> <tfoot> <!--cellules de tableau--> </tfoot> </table> |
|
|
|
||
| cadre extérieur quadrillage et espacement des cellules |
<table border=x cellspacing=x cellpadding=x> | |
|
Mentionner l'épaisseur du cadre (border=) en pixels. Mentionner l'épaisseur du quadrillage (cellspacing=) en pixels. Mentionner la marge dans la cellule entre le contenu et le bord (cellpadding=) en pixels. |
||
| règles pour le cadre extérieur |
<table border frame=box|void|above|below|hsides|vsides|lhs|rhs> | |
|
Préciser les règles pour le cadre extérieur avec (frame=) tout
autour (box), seulement en haut (above),seulement en bas (below),
seulement en haut et en bas (hsides), seulement à gauche et à droite
(vsides), à gauche (lhs) ou à droite (rhs). |
||
| règles pour le quadrillage | <table border rules=none|rows|cols|groups|all> | |
|
Fixer les règles du quadrillage (rules=) comme sans (none),
seulement entre les lignes (rows), seulement entre les colonnes (cols),
seulement entre l'entête, le corps et le pied (groups), ou comme par
défaut partout (all). |
||
| largeur et hauteur |
<table border width=x height=x> <tr height=x> <th width=x height=x>cellule</th> <td width=x height=x>cellule</td> </tr> </table> |
|
|
Mentionner largeur (width=) et hauteur (height=) du tableau
total dans le repère <table>, hauteur de ligne dans le
repère d'ouverture <tr>ou dans un repère d'ouverture <th>/<td>
(vaut alors pour toute la ligne). Mentionner la largeur de colonne dans un
repère <th>/<td> (vaut alors pour toutes les
cellules de cette colonne). Mentions en pixels ou en pourcentage permises. |
||
| empêcher le passage à la ligne dans les cellules |
<th nowrap> <td nowrap> |
|
|
|
||
| aligner les
cellules horizontalement |
<th align=left|center|right> <td align=left|center|right> |
|
|
Alignement horizontal (align=) à gauche (left), à droite (right)
ou centré (center). |
||
| aligner les
cellules verticalement |
<th valign=top|middle|bottom> <td valign=top|middle|bottom> |
|
|
Alignement vertical (valign=) en haut (top), en bas (bottom)
ou au milieu (middle). |
||
| relier des cellules |
<th colspan=x> <td colspan=x> <th rowspan=x> <td rowspan=x> |
|
|
Relier sur des colonnes (colspan=) sur autant de colonnes que
mentionnées, relier sur des ligne (rowspan=) sur autant de lignes que
mentionnées. En tenir compte lors de la définition des lignes suivantes. |
||
| couleur d'arrière-plan |
<table bgcolor=#XXXXXX> <tr bgcolor=#XXXXXX> <th bgcolor=#XXXXXX> <td bgcolor=#XXXXXX> |
|
|
|
||
| couleur du cadre |
<table bordercolor=#XXXXXX> <table bordercolordark=#XXXXXX bordercolorlight=#XXXXXX> |
|
|
Couleur uniforme du cadre avec bordercolor=, effet d'ombre avec bordercolordark=
(couleur sombre) et bordercolorlight= (couleur claire) |
||
| image d'arrière plan |
<table background="URL"> <tr background="URL"> <th background="URL"> <td background="URL"> |
|
|
Mentionner un graphique GIF- ou JPG. |
||
| titre de
tableau inscription de tableau |
<table border> <caption align=top|bottom|left|right>texte</caption> <tr> <td>Zelle</td> <td>Zelle</td> </tr> </table> |
|
|
Titre de tableau (align=top), inscription de tableau (align=bottom),
titre latéral gauche (align=left) ou titre latéral droit (align=right). |
||
| aligner les tableaux |
<table border align=left|center|right hspace=x vspace=x> | |
|
Alignement (align=) à gauche avec environnement texte à droite (left),
à droite avec environnement texte à gauche (align=right) ou centré (center).
Mentionner l'espace du texte latéral (hspace=) ou du texte au
dessus/au dessous (vspace=) en pixels. |
||
|
|
| définir une ancre de lien |
<a name="nom">texte</a> | |
|
|
||
| définir un lien |
<a href="URL">texte du lien</a> | |
|
URL peut être: ancre dans le même fichier (#ancre) autre fichier (fichier.htm) autre fichier dans un autre répertoire (../dossier/fichier.htm) adresse WWW(http://...) adresse Gopher (gopher://...) adresse FTP (ftp://...) adresse Telnet (telnet://...) adresse Newsgroup (news:...) adresse locale absolue (file://...) |
||
| liens E-Mail |
<a href="mailto:nom@domaine.xy">texte du lien</a> <a href="mailto:nom@domaine.xy?subject=sujet">texte du lien</a> <a href="mailto:nom@domaine.xy?cc=autrenom@autredomaine.xy">texte du lien</a> <a href="mailto:nom@domaine.xy?bcc=nom3@domaine3.xy">texte du lien</a> <a href="mailto:nom@domaine.xy?body=texte">texte du lien</a> <a href="mailto:nom@domaine.xy?additif1&additif2">texte du lien</a> |
|
|
Mentionner un thème prédéfini souhaité (subject=), des
destinataires de copies visibles (cc=), des destinataires de copies
invisibles (bcc=) ou un texte prédéfini (body=). Combiner
plusieurs de ces mentions comme dans le schéma avec ?additif1&additif2.
Les mentions avec cc=, bcc= et subject= ne sont pas
un standard HTML, à partir de Netscape 2.x et MS IE 4.x, body=
et la combinaison des mentions non HTML à partir de Netscape et de MS IE 4.x. |
||
| type Mime de la cible du lien | <a href="URL" type="Typ/Subtyp">texte du lien</a> | |
|
|
||
| relation logique de la cible du lien |
<a href="URL" rel="contents">texte du lien</a> <a href="URL" rev="contents">texte du lien</a> |
|
|
L'attribut rel= figure pour relation, rev= pour relation
inverse. Les mentions suivantes sont permises pour les deux attributs: contents = index du contenu chapter = chapitre section = section subsection = sous-section index = index des mots clés glossary = glossaire appendix = annexe copyright = remarques sur les droits d'auteur next = page suivante prev = page précédente start = page de début bookmark = point d'orientation générale alternate = autre mode de lecture |
||
| langue et jeu de caractères de la cible du lien |
<a href="URL" hreflang="de" charset="iso-8559-1">texte du lien</a> |
|
|
Mentionner la langue en tant qu'abréviation à 2 signes avec hreflang=,
le jeu de caractères charset=. |
||
| recherche par
tabulateur |
<a href="URL" tabindex=x>texte du lien</a> | |
|
La recherche se fait successivement du plus petit au plus grand nombre |
||
| raccourcis clavier | <a href="URL" accesskey="z">texte du lien</a> | |
|
Mentionner avec accesskey= la lettre par laquelle accéder directement
au lien. |
||
|
|
| incorporer des graphiques | <img src="URL"> | |
|
Utiliser des graphiques GIF - ou JPG.
|
||
| alternative en texte | <img src="URL" alt="texte"> | |
|
Le texte (alt=) est affiché, si le graphique ne peut être
représenté.
|
||
| largeur et hauteur du graphique |
<img src="URL" width=x height=x> | |
|
Mentionner en pixels ou pourcentage de la fenêtre d'affichage la largeur (width=)
et/ou la hauteur (height=). Ces mentions contribuent à une meilleure
construction de la page!
|
||
| cadre autour du graphique |
<img src="URL" border=x> | |
|
Mentionner en pixels l'épaisseur du cadre (border).
|
||
| nom pour le graphique |
<img src="URL" name="nom"> | |
|
Intéressant par exemple pour JavaScript ( |
||
| inscription de graphiques | <img src="URL" align=top|middle|bottom>texte | |
|
Alignement du texte qui suit (align=) en haut (top), au milieu
(middle) ou en bas (bottom).
|
||
| placement spécial de l'inscription de graphiques |
<img src="URL" align=texttop|absmiddle|absbottom|baseline>texte | |
|
Alignement du texte qui suit (align=) en haut du plus petit texte qui
suit (texttop), au milieu absolu (absmiddle), en bas par
rapport au plus petit texte qui suit (absbottom) en bas -normal- (baseline).
|
||
| faire passer le texte à côté du graphique |
<img src="URL" align=left|right>texte | |
|
Alignement du graphique (align=) à gauche (left) avec le
texte qui passe à sa droite, ou à droite (right) avec le texte qui
passe à sa gauche.
|
||
| espace entre graphique et son environnement |
<img src="URL" hspace=x vspace=x>texte | |
|
Espace entre le graphique et son environnement en pixels. Espace avec le haut et
le bas (vspace=) et/ou avec la gauche et la droite (hspace=).
|
||
| charger le graphique en deux versions |
<img src="URL" lowsrc="URL">texte | |
|
Charger d'abord le graphique avec le plus petit nombre d'octets (lowsrc=)
puis le graphique normal (src=). Les deux graphiques doivent
avoir les mêmes dimensions.
|
||
| graphique en tant que lien |
<a href="URL"><img src="URL" border=0></a> | |
|
En l'absence de border=0 un cadre est dessiné autour du graphique et
cela dans la couleur définie pour les liens.
|
||
| graphiques
composés de liens |
<img src="URL"
usemap="#nomcarte"> <map name="nomcarte"> <area shape=rect|circle|polygon coords=x,x,x,[x]... href="URL"> </map> |
|
|
Le graphique doit contenir l'attribut usemap= pour qu'un lien soit
associé au graphique. Le passage de la carte doit représenter une cible de
lien sous le nom désigné avec name=. shape=rect définit un passage rectangulaire dans le graphique par exemple 10,20,90,100 (10 est le début en pixels à partir de la gauche, 20 le début du haut, 90 la fin à gauche, 100 la fin en bas). shape=circle définit un passage circulaire dans le graphique par exemple 100,150,50 (100 est le centre du cercle en pixels à partir de la gauche, 150 le centre du cercle en pixels à partir du haut, 50 le rayon du cercle). shape=polygon définit un polygone dans le graphique par exemple 10,20,40,30,300,200 (10 est le premier coin à gauche en pixels, 20 le premier coin en haut, 40 le deuxième coin à gauche, 30 le deuxième coin en haut, 300 le troisième coin à gauche, 200 le troisième coin en haut), etc. nombre de coins au choix. href= contient la cible du lien. |
||
|
|
| définir un formulaire |
<form action="mailto:nom@domaine.xy" method=post enctype="text/plain"> <!-- éléments de formulaire --> </form> ou <form action="cgi-prog" method=get|post> <!-- éléments de formulaire--> </form> |
|
|
enctype="text/plain" n'est pas interprété par tous les
navigateurs. Les formulaires mailto ne fonctionnent pas sans Mail-Client
sur les navigateurs. |
||
| fenêtre cible pour la réponse du serveur | <form... target="nomfenetre"> | |
|
Intéressant quand des frames sont utilisées et en relation avec des scripts
CGI. |
||
| champ de
saisie à une ligne |
<input size=x maxlength=x name="nomelement"> | |
|
Fixer la largeur d'affichage avec size= (nombre de signes), si
vous le désirez la longueur de saisie maximum avec maxlength= (nombre
de signes). Nom intéressant pour le traitement en JavaScript. |
||
| champ de
saisie à une ligne avec texte par défaut |
<input size=x maxlength=x name="nomelement" value="texte"> | |
|
Fixer le texte par défaut avec value=. |
||
| champ de saisie pour mot de passe | <input type=password size=x maxlength=x name="nomelement"> | |
|
Frappe aveugle à spécifier avec type=password. |
||
| champs de saisie à plusieurs lignes |
<textarea cols=x rows=x name="nomelement"> texte par défaut facultatif </textarea> |
|
|
Mentionner la largeur du passage de saisie avec cols= (nombre de
signes), la hauteur avec rows= (nombre de lignes). Nom intéressant
pour le traitement en JavaScript. Si un texte par défaut est désiré, le noter
entre le repère d'ouverture et de fermeture. |
||
| champs de saisie à plusieurs lignes contrôle césure |
<textarea wrap=virtual|physical cols=x rows=x name="nomelement"> </textarea> |
|
|
Permettre le passage à la ligne automatique lors de la saisie avec wrap=virtual. |
||
| champs de saisie en lecture seule |
<input readonly value="texte ne peut être que lu" size=x maxlength=x name="nomelement"> ou <textarea readonly cols=x rows=x name="nomelement"> texte ne peut être que lu </textarea> |
|
|
Noter l'attribut readonly pour la lecture seule. |
||
| liste de choix |
<select name="nomelement"> <option> inscription <option> autre inscription </select> |
|
|
|
||
| liste de choix à plusieurs choix | <select multiple> | |
|
Noter l'attribut multiple pour un choix multiple. |
||
| liste de choix avec choix par défaut |
<select name="nomelement"> <option selected> inscription <option> autre inscription </select> |
|
|
Noter l'attribut selected dans le repère <option>désiré. |
||
| valeur d'envoi d'éléments de liste |
<select name="nomelement"> <option value="valeur"> inscription <option value="valeur"> autre inscription </select> |
|
|
Fixer avec value= la valeur interne pour la transmission. |
||
| structure de menus |
<select> <optgroup> <option> inscription </optgroup> </select> |
|
|
Noter autant de sous menus <optgroup> que désiré. Imbrication
possible. |
||
| boutons radio | <input type=radio name="nom" value="valeur"> Texte | |
|
Attribuer des noms globaux pour tous les boutons radio d'un même groupe. |
||
| boites de vérification | <input type=checkbox name="nom" value="valeur"> Texte | |
|
Attribuer des noms globaux pour toutes les boites de vérification d'un même
groupe. |
||
| présélectionner des éléments |
<input type=radio checked name="nom" value="valeur"> Texte <input type=checkbox checked name="nom" value="valeur"> Texte |
|
|
Utiliser l'attribut checked pour un choix par défaut. |
||
| boutons pouvant être cliqués (1) | <input type=button name="nom" value="inscription" onClick="..."> | |
|
Judicieux pour l'exécution de code JavaScript avec onClick=. |
||
| boutons pouvant être cliqués (2) |
<button type=button name="nom" value="inscription"
onClick="..."> <img src="URL"> </button> |
|
|
Judicieux par exemple pour utiliser des graphiques comme inscription de bouton. |
||
| boutons fichiers | <input type=file name="nom" maxlength=x accept="MimeType"> | |
|
Important: avec le repère <form> noter la mention enctype="multipart/form-data".
limiter la taille du fichier avec maxlength= (octets). Limiter le
type de fichier avec accept=
par exemple
accept="texte/*" |
||
| grouper les éléments |
<fieldset> <legend>titre du groupe</legend> <!-- éléments de formulaire --> </fieldset> |
|
|
|
||
| étiquette pour éléments |
<label for="idName">inscription:</label> <input size=40 id="identif"> |
|
|
|
||
| recherche par tabulateur | <input ... tabindex=x> | |
|
La recherche se fait du plus petit au plus grand numéro. |
||
| raccourcis clavier | <input ... accesskey="z"> | |
|
Mentionner avec accesskey= la lettre par laquelle l'élément peut
être choisie directement. |
||
| griser des éléments |
<input ... disabled> | |
|
|
||
| boutons pour envoyer/interrompre |
<input type=submit value="inscription"> <input type=reset value="inscription"> |
|
|
type=submit envoie le formulaire, type=reset efface toutes
les entrées. |
||
| bouton d'envoi graphique |
<input type=image src="URL"> | |
|
|
||
|
|
| définir des jeux de frames et des frames |
<frameset rows|cols="x,*"> <frame src="URL" name="nomfenetre"> </frameset> |
|
|
Partager la fenêtre d'affichage en colonnes (cols=) ou rangées (rows=).
Mentionner deux ou plusieurs parties en pixels ou pourcentage séparées par
des virgules. Joker * permis. Imbrication de jeux de frames possible. Noter pour
chaque nouveau module un repère <frame>. La mention du
fichier qui doit y être affiché est possible avec src=. Attribuer
des noms aux frames pour que des liens à d'autres frames soient possibles. |
||
| fenêtres sans frame |
<noframes> contenu </noframes> |
|
|
Noter dans des fichiers devant être affichés dans un jeu de frames (HTML4.0).
Chez Netscape conçu comme texte en alternative pour un fichier avec des
définitions de jeux de frames. |
||
| barres de
défilement dans les Frames |
<frame src="URL" name="nom" scrolling=yes|no|auto> | |
|
Toujours afficher les barres de défilement (yes), ne jamais les
afficher (no) ou comme par défaut automatiquement (auto). |
||
| espace du cadre au contenu de la fenêtre | <frame src="URL" name="nom" marginwidth=x marginheight=x> | |
|
Mentionner en pixels l'espace au contenu à gauche et à droite (marginwidth=)
ou en haut et en bas (marginheight=). |
||
| taille de fenêtre non modifiable | <frame src="URL" name="nom" noresize> | |
|
Toutes les frames voisines sont concernées par noresize. |
||
| épaisseur du cadre/ cadre invisible |
<frame src="URL" name="nom" frameborder=x> | |
| <frameset ... border=x frameborder=x framespacing=x> | ||
|
Les navigateurs interprètent ces mentions autrement que le standard HTML. Pour les
cadres invisibles les trois valeurs doivent être mises à 0. |
||
| cadres de
fenêtre de couleurs |
<frameset bordercolor=#XXXXXX> | |
|
|
||
| liens avec des Frames |
<a href="URL" target="nomfenetre">texte du lien</a> |
|
|
Mentionner soit le nom de fenêtre <frame name=> ou bien l'un des
noms réservés: target="_blank" pour cible du lien une nouvelle fenêtre target="_parent" pour cible du lien la fenêtre parente target="_top" pour cible du lien la fenêtre d'affichage complète |
||
| frames incorporées |
<iframe src="URL" name="nom"> contenu en cas de non-affichage </iframe> |
|
|
|
||
| propriétés de frames incorporées |
<iframe ... width=x height=x hspace=x vspace=x align=left|center|right scrolling=yes|no|auto> contenu en cas de non-affichage </iframe> |
|
|
Mentionner la largeur (width=) et la hauteur (height=) en
pixels ou pourcentage. Aligner à gauche align=left avec flux de texte
à droite et le contraire avec align=right. Mentionner l'espace en
haut et en bas (vspace=) ou l'espace à gauche et à droite (hspace=)
en pixels. Imposer les barres de défilement avec scrolling= (yes),
les empêcher avec (no) ou comme par défaut automatiquement (auto). |
||
|
|
| incorporer des données comme objet |
<object data="URL" type="MimeType"> contenu en alternative </object> |
|
|
|
||
| graphique composé de liens en tant qu'objet |
<object data="URL" shapes> <a href="URL" shape=rect|circle|polygon coords="x[x,...]">texte du lien</a> </object> |
|
|
Mentions concernant shape= et coords= comme pour les
graphiques composés de liens. |
||
| applets Java en tant qu'objet |
<object classid="java:Classname" codebase="URL" codetype="MimeType"> <param name="nom" value="valeur"> </object> |
|
|
Mentionner pour classid= le nom du fichier class sans extension,
n'employer codebase= que si l'applet se trouve dans un autre
répertoire. Le type du code est normalement application/java-vm. |
||
| ActiveX en tant qu'objet |
<object classid="clsid:xxxxxx" data="URL" codebase="URL"> </object> |
|
|
Mentionner pour classid= le numéro d'enregistrement du
contrôle ActiveX, pour data= le fichier. N'employer codebase=
que si l'applet se trouve dans un autre répertoire |
||
| cadre autour d'objet |
<object ... border=x> </object> |
|
|
Mentionner en pixels l'épaisseur du cadre (border). |
||
| nom pour objet |
<object ... name="nom"> </object> |
|
|
Intéressant par exemple pour JavaScript. |
||
| largeur et hauteur de l'objet |
<object ... width=x height=x> </object> |
|
|
Mentionner en pixels ou en pourcentage de la fenêtre d'affichage la largeur (width=)
et/ou la hauteur (height=). Ces mentions contribuent à une meilleure
construction de la page! |
||
| affecter une inscription à l'objet |
<object ... align=top|middle|bottom>Texte </object> |
|
|
Alignement du texte qui suit (align=) en haut (top), au milieu
(middle) ou en bas (bottom). |
||
| placement spécial de l'inscription d'objet |
<object ... align=texttop|absmiddle|absbottom|baseline>Text </object> |
|
|
Alignement du texte qui suit (align=) au bord supérieur du plus petit texte qui suittexttop), dans le milieu
absolu de l'objet (absmiddle), en bas, à
savoir au bord inférieur du plus petit texte (absbottom) ou
normalement en bas (baseline). |
||
| faire passer le texte autour de l'objet |
<object ... align=left|right>texte </object> |
|
|
Alignement de l'objet (align=) à gauche (left) avec le texte
qui passe à sa droite (right) avec le texte qui passe à sa gauche. |
||
| espace entre l'objet et son environnement |
<object ... hspace=x vspace=x> </object> |
|
|
Espace entre l'objet et son environnement en pixels. Espace avec le haut et le
bas(vspace=) et/ou avec la gauche et la droite (hspace=). |
||
| annonce lors du chargement |
<object ... standby="texte de l'annonce"> </object> |
|
|
|
||
| instance de
l'objet que sur demande |
<object ... declare> </object> |
|
|
|
||
| Multimédia (Netscape) |
<embed src="URL"> | |
|
|
||
| Multimédia (Netscape) autres mentions |
<embed src="URL" width=x height=x hspace=x vspace=x align=left|right|top|middle|bottom type="MimeType" pluginurl="URL" pluginspage="URL" hidden=true|false autostart=true|false loop=true|false palette=foreground|background> |
|
|
Mentions de largeur, de hauteur, d'alignement et d'espace avec l'environnement
comme les objets et graphiques. Avec pluginurl= adresse de
téléchargement d'un plugin, avec pluginspage= page WWW avec
remarques d'installation du plugin. Mention hidden= pour affichage oui/non
(true/false), autostart= pour démarrage lors du chargement
oui/non, loop= pour répétition en continu oui/non et palette=
pour couleurs spécifiques à l'utilisateur pour l'affichage d'un plugin. |
||
| contenu en alternative |
<noembed>contenu</noembed><embed src="URL"> | |
|
|
||
| Vidéos (Microsoft) |
<img dynsrc="URL"> |
|
|
Mentionner le fichier AVI. |
||
| Vidéos (Microsoft) autres mentions |
<img dynsrc="URL" width=x height=x loop=infinite|x src="URL" start=mouseover|fileopen controls> |
|
|
Largeur et hauteur comme d'habitude. Avec loop=infinite répétition
en continu (ou mention d'un nombre de répétitions) possible. Avec src=
mentionner un graphique au cas où la vidéo ne peut être affichée. Avec start=onmouseover
début de la vidéo en la parcourant avec la souris, sinon au départ du fichier(fileopen).
L'attribut controls pour les éléments de contrôle visibles. |
||
| incorporer des applets Java |
<applet code="URL" codebase="URL" alt="texte"> <param name="nom" value="valeur"> </applet> |
|
|
Avec code= mentionner le fichier class, l'extension peut être
omise. Utiliser codebase= si l' applet se trouve dans un autre
répertoire. Possibilité d'une alternative en texteen cas de non affichage avec alt=. |
||
| applets Java autres mentions |
<applet code="URL" codebase="URL" width=x height=x align=left|right|top|middle|bottom hspace=x vspace=x archive="URL" mayscript> </applet> |
|
|
Utiliser les mentions de largeur, hauteur, alignement espace avec
l'environnement comme pour les objets et graphiques. Utiliser archive=
quand l'applet fait partie d'un fichier ZIP. mayscript permet l'action
de JavaScript sur l'applet. |
||
|
|
| définition de layer |
<layer id="nom" top=x left=x width=x height=x> contenu </layer> |
|
|
Affecter l'attribut id= au cas où le layer doit être traité en
dynamique avec JavaScript. Pour positionner fixement des Layer,mentionner
le coin supérieur gauche en pixels avec left= (gauche) et top=(haut).
déterminez si vous le voulez la largeur (width=) et la hauteur (height=). |
||
| définir des layer sur la ligne |
<ilayer>contenu</ilayer> | |
|
Ne crée pas de bloc séparé. Sinon mêmes possibilités de mentions que pour <layer>. |
||
| rogner le domaine d'affichage |
<layer clip="x1,x2,x3,x4">contenu</layer> ou <layer clip="xb,xh">contenu</layer> |
|
|
x1 = pixels pour gauche. x2 = pixels pour haut. x3 = pixels pour droite. x4 = pixels pour bas. xb = pixels pour largeur. xh = pixels pour hauteur. |
||
| fichier externe | <layer src="URL">contenu</layer> | |
|
|
||
| couleur d'arrière-plan |
<layer bgcolor=#XXXXXX>contenu</layer> | |
|
|
||
| image d'arrière plan |
<layer background="URL">contenu</layer> | |
|
Mentionner GIF ou JPG. |
||
| position de la couche avec noms |
<layer above="nom" below="nom">contenu</layer> | |
|
Si le layer défini auparavant doit être placé sur le layer actuel, mentionner
son nom avec above=.
Si le layer défini auparavant doit être placé sous le layer actuel,
mentionner son nom avec below=. |
||
| position de la couche avec numéros |
<layer z-index=x>contenu</layer> | |
|
Le layer ayant le numéro le plus élevé couvre tous les autres. Le layer avec
le numéro le plus bas est recouvert par tous les autres. |
||
| cacher et afficher des layer |
<layer visibility=hide|show|inherit>contenu</layer> | |
|
Cette propriété est intéressante dans l'optique d'un traitement dynamique
avec JavaScript. Le layer est caché avec hide, il est affiché avec show.
Lors d'une imbrication, l'affichage/non-affichage est hérité du layer parent inherit. |
||
|
|
| définitions de feuilles de style centrales |
<head> <style type="text/css"> <!-- //--> </style> </head> |
|
|
|
||
| définitions
de feuilles de style locales |
<span style=" |
|
|
|
||
| passages script |
<script language="JavaScript"> <!-- //--> </script> <noscript> Texte si aucun script n'est possible </noscript> |
|
|
Mentionner le langage script désiré. |
||
| mentions concernant le script | <script language="JavaScript" src="URL" type="text/javascript"> | |
|
Utiliser l'attribut src= pour incorporer des fichiers script externes.
Mentionner le cas échéant le type Mime du langage Script. |
||
|
|