| Structure | Texte | Formulaire | Tableau | Image et multimédia et Incorporé | Spécial |
|---|---|---|---|---|---|
|
!DOCTYPE base body head html meta title frame frameset noframes |
a b basefont big center dd div dl dt em font h{1..6} hr i li p pre strong u ul xmp |
form input label option select textarea |
caption col colgroup table tbody tfoot thead td th tr |
area bgsound embed iframe ilayer img link map nolayer noscript script style |
applet br bdo object param span |
<!-- commentaires --> Commentaires dans un document html <!doctype> ======== Description: Type de document (première ligne) Position: Avant la balise <html> Exemple complet: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Plus: Liste complète selon le W3C <a>...</a> Description: lien hypertexte ou référence Position (relative): à l'intérieur de la balise <body> Interne: %a.content; Exemple: <a href="http://yansanmo.go.to/">YanSanMo.Go.To</a> Attributs: %attrs; charset %Charset; #IMPLIED type %ContentType; #IMPLIED name NMTOKEN #IMPLIED // peut être appelé de cette façon <a href="#namevalue"></a> href %URI; #IMPLIED hreflang %LanguageCode; #IMPLIED rel %LinkTypes; #IMPLIED rev %LinkTypes; #IMPLIED accesskey %Character; #IMPLIED shape %Shape; "rect" coords %Coords; #IMPLIED tabindex %Number; #IMPLIED onfocus %Script; #IMPLIED onblur %Script; #IMPLIED target %FrameTarget; #IMPLIED Non-Standard Microsoft.com : LinkID =%Text; Microsoft.com : LinkArea =%Text; Microsoft.com : LinkGroup=%Text; Microsoft.com : NewsID =%Text; <applet>...</applet> Balises: param Description: Applet Java Position (relative) : À l'intérieur de la balise <body> Interne: (#PCDATA | param | %block; | form | %inline; | %misc;)* Attributs: %coreattrs; codebase %URI; #IMPLIED archive CDATA #IMPLIED code CDATA #IMPLIED object CDATA #IMPLIED alt %Text; #IMPLIED name NMTOKEN #IMPLIED width %Length; #REQUIRED height %Length; #REQUIRED align %ImgAlign; #IMPLIED hspace %Pixels; #IMPLIED vspace %Pixels; #IMPLIED Commentaires: Un des attribut code ou objet est obligatoirement requis. Les balises <param> doivent être avant les autres balises et contenu. <area /> Description: Spécifie une surface sur une image Position (absolue) : À l'intérieur de la balise <map> Attributs: %attrs; shape %Shape; "rect" coords %Coords; #IMPLIED href %URI; #IMPLIED nohref (nohref) #IMPLIED // (si il n'y a pas l'attribut href) alt %Text; #REQUIRED // commentaire (alternative) tabindex %Number; #IMPLIED accesskey %Character; #IMPLIED onfocus %Script; #IMPLIED onblur %Script; #IMPLIED target %FrameTarget; #IMPLIED <b>...</b> Description: Police en gras Status actuel: à éviter le plus possible, utiliser plutôt la balise <strong> ou le style font-weight:bold; Position (relative): à l'intérieur de <body> Interne: %Inline; Attributs: %attrs; <base /> Description: Spécifie la base des URI. Position (absolue): à l'intérieur de <head> Attributs: href %URI; #IMPLIED target %FrameTarget; #IMPLIED <basefont size="" /> Description: Spécifie la police de base. Position (relative): à l'intérieur de <body> Attributs: id ID #IMPLIED size CDATA #REQUIRED color %Color; #IMPLIED face CDATA #IMPLIED <bgSound> [IE] Description: son de fond (en boucle continu) Attributs: src : "url_fichier_sonore" Voir: Générateur de balise bgSound <body>...</body> Description: Sert à définir l'aire du code à afficher. Contient l'essentiel de la page web, le contenu visible. Position (absolue): à l'intérieur de la balise <html> après la balise <head> Interne: %Flow; Attributs: %attrs; onload %Script; #IMPLIED onunload %Script; #IMPLIED background %URI; #IMPLIED // (Image .GIF, .JPG, ...) bgcolor %Color; #IMPLIED // couleur de fond text %Color; #IMPLIED // couleur du texte link %Color; #IMPLIED // couleur des liens vlink %Color; #IMPLIED // couleur des liens visités alink %Color; #IMPLIED // couleur des liens actifs IE: leftmargin %Pixels; IE: topmargin %Pixels; NS: marginheight %Pixels; NS: marginwidth %Pixels; <big>...</big> Description: Police plus grande Position (relative): à l'intérieur de la balise <body> Interne: %Inline; Attributs: %attrs; <br /> Description: Change de ligne Position (relative): à l'intérieur de la balise <body> Attributs: [clear]={"all"} // si j'ai un texte à côté d'une image <br clear="all" /> // positionne le curseur sous l'image. <caption> ... </caption> Externe: <table> Interne: %Inline; Description: Titre d'un tableau Attributs: [align] = "{bottom}" // se positionne en bas du tableau <center>...</center> Description: centre des balises dans une page Position (relative): à l'intérieur de la balise <body> Attributs: <col> ... </col> Externe: <table>|<colgroup> <colgroup> ... </colgroup> Externe: <table> Interne: (<col>+) <dd> </dd> Description: Définition d'un terme Position (absolue) : à l'intérieur de <dt> Interne: %Flow; %attrs; <dir> </dir> Commentaire: déprécié, voir <ol> ou <ul> <div> ... <div> Description: division d'une page (sert beaucoup au DTML) Conteneur générique (language/style) Position (relative): à l'intérieur de <body> Interne: %Flow; Attributs: %attrs; %TextAlign; <dl> </dl> Description: Listes de définition - dt pour le terme, dd pour sa définition. Position (relative) : à l'intérieur de <body> Interne: (<dt>|<dd>)+ %attrs; compact (compact) #IMPLIED <dt> </dt> Description: Terme d'une définition Position (absolue) : à l'intérieur de <dt> Interne: %Inline; %attrs; <em>...</em> Description: pour le texte... <embed /> Description: introduction d'un fichier multimédia dans une page web. .mid, .wav, ... Attributs: src = "url" autostart = "true|false" // le fichier va commencer automatiquement hidden = "true|false" // caché ou non volume = "pourcentage" // "0%" à "100%" Voir: Générateur de balise embed <font> ... </font> Description: Spécifie la police (immédiate). Position (relative): à l'intérieur de <body> Interne: %Inline; Attributs: %coreattrs; %i18n; size CDATA #IMPLIED color %Color; #IMPLIED face CDATA #IMPLIED Taille de l'attribut [size] = {"1..7|-3..+4"} // 7 est le plus grand <form>...</form> Description: Formulaire HTML Position (relative): à l'intérieur de la balise <body> Interne: %form.content; Attributs: %attrs; action %URI; #REQUIRED method (get|post) "get" name NMTOKEN #IMPLIED enctype %ContentType; "application/x-www-form-urlencoded" onsubmit %Script; #IMPLIED onreset %Script; #IMPLIED accept %ContentTypes; #IMPLIED accept-charset %Charsets; #IMPLIED target %FrameTarget; #IMPLIED <H{1..6}>...</H{1..6}> Description: Titre (h1 est le plus grand) Position (relative): à l'intérieur de la balise <body> Interne: %Inline; Attributs: %attrs; %TextAlign; <head>...</head> Description: Informations et codes non affichables. Titre de la page, mots-clés pour les moteurs de recherche, type de clavier, langage, scripts, feuille de style. Position (absolue): avant <body> ou <frameset> à l'intérieur de <html> Interne: (<title>) (recommendation: première balise dans la balise head) (<base>) (<script>|<style>|<meta>|<link>|<object>|<isindex>)* Attributs: %i18n; profile %URI; #IMPLIED <hr /> Description: Ligne horizontale (Horizontal Row) Position (relative): à l'intérieur de <body> Attributs: %attrs; align (left|center|right) #IMPLIED noshade (noshade) #IMPLIED size %Pixels; #IMPLIED width %Length; #IMPLIED IE: [color] = %Color; <html>...</html> Description: Balise qui signifie le début et la fin d'un fichier html. Position: après la balise <!DOCTYPE> Interne: (<head>, <body>) (<frameset>) Attributs: %i18n; xmlns %URI; #FIXED 'http://www.w3.org/1999/xhtml' <i>...</i> Description: Met un texte en italique Position (relative): à l'intérieur de la balise <body> Attributs: <ilayer>...</layer> Description: Layer interne Position (relative): à l'intérieur de la balise <body> Attributs: [src] = <URL> [visibility] = "{hidden|hide}" [id] = "chaine" [width] = <taille_px> [height] = <taille_px> [onload] = <script> <img src="" alt="" /> Description: Image W3C: Including an image: the IMG element Position (relative): à l'intérieur de <body> Attributs: %attrs; src %URI; #REQUIRED // chemin de l'image alt %Text; #REQUIRED name NMTOKEN #IMPLIED longdesc %URI; #IMPLIED // nom d'une balise <map> en autre... height %Length; #IMPLIED width %Length; #IMPLIED usemap %URI; #IMPLIED ismap (ismap) #IMPLIED Lorsque l'image est à l'intérieur d'une balise <a> permet d'envoyer les coordonnées relatives (x,y) de la souris par rapport à l'image (haut, gauche). le window.status affichera l'URI de la balise <a> avec le signe '?' et la position x,y. exemple: http://www.lesite.com/fichier.cgi?10,20 align %ImgAlign; #IMPLIED border %Length; #IMPLIED Bordure autour de l'image, elle sera de la couleur des liens si la balise est entourée de la balise <a href=""> hspace %Pixels; #IMPLIED vspace %Pixels; #IMPLIED Non-Standard: [align] = (absbottom|absmiddle|baseline|texttop) [nosave] // ????? [galleryimg] = (yes|no) // Barre d'outil Image de Internet Explorer 6 (image 200x200 et +) [NATURALSIZEFLAG]="Number" // Adobe PageMill 3.0 Win Test: <img /> <input /> Description: Entrée d'un formulaire Position (relative) : à l'intérieur de <body> (conseillée) : à l'intérieur de <form> Attributs: %attrs; type %InputType; "text" name CDATA #IMPLIED // #REQUIRED pour tout sauf type="submit"|"reset" value CDATA #IMPLIED // valeur par défaut du champ (checkbox = "{OFF|ON}") checked (checked) #IMPLIED // indique que le champ est cochée par défaut disabled (disabled) #IMPLIED readonly (readonly) #IMPLIED size CDATA #IMPLIED // taille du champ maxlength %Number; #IMPLIED // maximum de caractères dans un (type="text") src %URI; #IMPLIED // type="image" alt CDATA #IMPLIED usemap %URI; #IMPLIED tabindex %Number; #IMPLIED accesskey %Character; #IMPLIED onfocus %Script; #IMPLIED onblur %Script; #IMPLIED onselect %Script; #IMPLIED onchange %Script; #IMPLIED accept %ContentTypes; #IMPLIED align %ImgAlign; #IMPLIED Autres... [border] = <taille_px> : lorsque type="image" [height] = <taille_px> : lorsque type="image" [width] = <taille_px> : lorsque type="image" Pour envoyer la valeur du champ : "nomFonction(this.value)" le formulaire : "nomFonction(this.form)" <label>...</label> Description: Étiquette dans un formulaire Position (relative): À l'intérieur de la balise <body> Attributs: XXXX accesKey = "touche" // accède à l'objet identifié dans l'attribut for XXXX for = "id_objet" // identifiant id d'un objet XXXX // ne fonctionne pas vraiment mais bof <li> </li> Description: Élément d'une liste Position (absolue) : à l'intérieur de <ol>|<ul> Interne: %Flow; %attrs; type %LIStyle; #IMPLIED value %Number; #IMPLIED <link /> Description: Sert au moteur de recherche. Position (absolue): À l'intérieur de <head> %attrs; charset %Charset; #IMPLIED href %URI; #IMPLIED hreflang %LanguageCode; #IMPLIED type %ContentType; #IMPLIED rel %LinkTypes; #IMPLIED rev %LinkTypes; #IMPLIED media %MediaDesc; #IMPLIED target %FrameTarget; #IMPLIED Exemple complet: <link href="style.css" rel="StyleSheet" type="text/css" /> Note: Relationship values can be used in principle: a) for document specific toolbars/menus when used with the link element in document head e.g. start, contents, previous, next, index, end, help b) to link to a separate style sheet (rel="stylesheet") c) to make a link to a script (rel="script") d) by stylesheets to control how collections of html nodes are rendered into printed documents e) to make a link to a printable version of this document e.g. a PostScript or PDF version (rel="alternate" media="print") <map> ... </map> Description: Spécifie des surfaces sur une image Position (relative) : À l'intérieur de la balise <body> (conseillée) : En haut de la balise <img> correspondante Attributs: [name] = "chaine" : nom du champ <menu> </menu> Commentaire: déprécié, voir <ol> ou <ul> <meta /> Description: Sert au moteur de recherche. Position (absolue): À l'intérieur de <head> %i18n; http-equiv CDATA #IMPLIED name CDATA #IMPLIED content CDATA #REQUIRED scheme CDATA #IMPLIED Deux types distinct : -meta http-equiv http-equiv="" content="" exemple complet: <meta http-equiv="content-Type" content="text/html; charset=ISO-8859-1" /> text/html; charset=windows-1252 <meta http-equiv="Refresh" content="n;URL=url" /> n : représente le nombre de secondes avant le changement d'URL url : représente la page qui chargera après n secondes. <meta http-equiv="Pragma" content="no-cache"/> // multimania <meta http-equiv="Cache-Control" content="no-cache"/> // multimania <meta http-equiv="Expires" content="Mon, 06 May 1996 04:57:00 GMT"/> // multimania Transition Pour Internet Explorer Seulement: <meta http-equiv="imagetoolbar" content="no" /> Enlève la barre d'outil Image. <meta http-equiv="Page-Enter" content="RevealTrans(Duration=2,Transition=3)"/> // multimania - crystalecool <meta http-equiv="PICS-Label" content="(PICS-1.1 "http://www.rsac.org/ratingsv01.html" l gen true r (n 0 s 0 v 0 l 0))" /> PICS-Label: Étiquette sur la nature des images et du contenu d'un site web, voir www.icra.org/webmasters/ -meta name name={"auteur"||"author"||"Description"||"editor"||"generator"|| "Keywords"||"Template"||autre...} autres... <meta name="bulletin-date" content=""/> // multimania <meta name="bulletin-text" content=""/> // multimania <meta name="classification" content="Global"/> // multimania <meta name="CATEGORY" content="home page" /> // microsoft <meta name="copyright" content=""/> // multimania <meta name="DESC" content=""/> // multimania <meta name="description" content="this is a description"/> // shoplci <meta name="distribution" content="global"/> // multimania <meta name="geography" content="CANADA&USA"/> // shoplci <meta name="keywords" content="un, deux, trois"/> // shoplci <meta name="language" content="fr"/> // multimania <meta name="Microsoft Border" content = "none, default "/> <meta name="MS.LOCALE" content="EN-US" /> // microsoft <meta name="OUTLINE" content=""/> // multimania <meta name="rating" content="General"/> // multimania <meta name="resource-type" content="document"/> // multimania <meta name="revisit-after" content="9 days"/> // multimania <meta name="robots" content="ALL"/> // multimania Voir: http://www.robotstxt.org/wc/meta-user.html <nolayer>...</nolayer> Description: Si le navigateur ne peut traité la balise <ilayer> Position (relative): à l'intérieur de la balise <body> (conseillée) : après la balise <ilayer> Attributs: <noscript>...</noscript> Description: Si le navigateur ne peut traité la balise <script> Contenu affiché en alternative pour les navigateurs qui ne gèrent pas les scripts. Position (relative): à l'intérieur de <html> (conseillée) : après la balise <script> Interne: %Flow; Attributs: %attrs; <object> </object> Description: Objet extérieure Position (relative): À l'intérieur de la balise <body> Attributs: language = {"javascript"|"vbscript"} id = "chaine" // identifiant unique classid = "chaine" // identifiant ("CLSID:...") codebase = <URL> // (fichier.cab) width = <taille_px> height = <taille_px> type = "mimetype" Test: <object type="wave-file-type"> Voir: Générateur de balise object <ol> </ol> Description: Liste ordonnée Position (relative) : à l'intérieur de <body> Interne: (<li>)+ %attrs; type %OLStyle; #IMPLIED compact (compact) #IMPLIED start %Number; #IMPLIED <option> #PCDATA </option> Description: Choix d'un select (dans un formulaire) Position (absolue) : à l'intérieur de <select> Attributs: %attrs; selected (selected) #IMPLIED // indique que c'est l'option par défaut disabled (disabled) #IMPLIED label %Text; #IMPLIED value CDATA #IMPLIED // valeur de l'option <p>...</p> Description: Paragraphe Position (relative): à l'intérieur de la balise <body> Interne: %Inline; Attributs: %attrs; %TextAlign; <param /> Description: Paramètre d'une Applet Java Position (absolue) : À l'intérieur de la balise <applet> Attributs: name = "chaine" : nom du paramètre value = "chaine" : valeur du paramètre <pre> ... </pre> Description: Texte préformaté Position (relative) : À l'intérieur de la balise <body> <script> ... </script> Externe: <html> Position (conseillée): à l'intérieure de <head> Interne: PCDATA Description: Programmation à l'aide d'un langage Peut inclure des sections CDATA... Attributs charset %Charset; #IMPLIED type %ContentType; #REQUIRED language CDATA #IMPLIED // (JavaScript|jscript|javascript1.2|javascript 1.2|VbScript) src %URI; #IMPLIED defer (defer) #IMPLIED xml:space (preserve) #FIXED 'preserve' Autres [non-standard] [runat] = "server" // indique que le script sera exécuté par le serveur et non le client. // voir ASP : Active Web Server Exemple complet: <script type="text/javascript" language="JavaScript" src="script.js"></script> Voir: ma page sur le Javascript <select> ... </select> Description: Liste de choix (dans un formulaire) Position (relative) : à l'intérieur de <body> (conseillée) : à l'intérieur de <form> Interne: (<optgroup>|<option>)+ Attributs: %attrs; name CDATA #IMPLIED // nom du champ size %Number; #IMPLIED // taille du champ multiple (multiple) #IMPLIED disabled (disabled) #IMPLIED tabindex %Number; #IMPLIED onfocus %Script; #IMPLIED onblur %Script; #IMPLIED onchange %Script; #IMPLIED Voir: javascript sur le select Accès Javascript: Option: name_select.options[0..n].value = valeur de l'option n Numéro de l'option sélectionné : name_select.selectedIndex <span> ... </span> Description: Permet de regrouper un ensemble de balises. Position (relative): à l'intérieure de la balise <body> Attributs: [class] = nom pour les <styles> [id] = "chaine" // identifiant unique [style] = <style> <strong> ... </strong> Description: pour le texte <style><!-- ... --></style> Description: (feuille de styles en cascade (css)) styles d'une page web. Position: à l'intérieure de <head> Interne: PCDATA Attributs %i18n; type %ContentType; #REQUIRED media %MediaDesc; #IMPLIED title %Text; #IMPLIED xml:space (preserve) #FIXED 'preserve' Voir: ma page sur les Feuilles de style <table> ... </table> Description: Tableau. W3C: The TABLE element Position (relative): À l'intérieur de <body> Interne: (<caption>?, (<col>*|<colgroup>*), <thead>?, <tfoot>?, (<tbody>+|<tr>+)) Attributs: %attrs; summary %Text; #IMPLIED // sommaire du tableau width %Length; #IMPLIED border %Pixels; #IMPLIED // Bordure du tableau (autour et intérieur) frame %TFrame; #IMPLIED rules %TRules; #IMPLIED cellspacing %Length; #IMPLIED cellpadding %Length; #IMPLIED align %TAlign; #IMPLIED bgcolor %Color; #IMPLIED Autres [non-standard]: [background] %URI; // Image IE [bordercolordark] %Color; IE [bordercolorlight] %Color; [height] %Length; [hspace] %Pixels; [vspace] %Pixels; [zwidth] %Length; // MULTIMANIA <tbody> ... </tbody> Externe: <table> Interne: (<tr>+) Attributs: %attrs; %cellhalign; %cellvalign; <td> ... </td> Externe: <tr> Interne: %Flow; Description: Cellule d'un tableau. Attributs: %attrs; abbr %Text; #IMPLIED axis CDATA #IMPLIED headers IDREFS #IMPLIED scope %Scope; #IMPLIED rowspan %Number; "1" // La cellule fusionne sur plusieurs lignes colspan %Number; "1" //La cellule fusionne sur plusieurs colonnes %cellhalign; %cellvalign; nowrap (nowrap) #IMPLIED // sans changement de ligne automatique bgcolor %Color; #IMPLIED width %Pixels; #IMPLIED // Largeur de la cellule height %Pixels; #IMPLIED // Hauteur de la cellule Autre [non-standard]: [background] = %URI; // Image <textarea> ... </textarea>] Description: Boîte de texte Position (relative) : à l'intérieur de <body> (conseillée) : à l'intérieur de <form> Interne: #PCDATA Attributs: %attrs; name CDATA #IMPLIED rows %Number; #REQUIRED cols %Number; #REQUIRED disabled (disabled) #IMPLIED readonly (readonly) #IMPLIED tabindex %Number; #IMPLIED accesskey %Character; #IMPLIED onfocus %Script; #IMPLIED onblur %Script; #IMPLIED onselect %Script; #IMPLIED onchange %Script; #IMPLIED <tfoot> ... </tfoot> Externe: <table> Interne: (<tr>+) %attrs; %cellhalign; %cellvalign; <th> ... </th> Externe: <tr> Interne: %Flow; Description: Cellule entête d'un tableau. %attrs; abbr %Text; #IMPLIED axis CDATA #IMPLIED headers IDREFS #IMPLIED scope %Scope; #IMPLIED rowspan %Number; "1" // La cellule fusionne sur plusieurs lignes colspan %Number; "1" //La cellule fusionne sur plusieurs colonnes %cellhalign; %cellvalign; nowrap (nowrap) #IMPLIED // sans changement de ligne automatique bgcolor %Color; #IMPLIED width %Pixels; #IMPLIED // Largeur de la cellule height %Pixels; #IMPLIED // Hauteur de la cellule <thead> ... </thead> Externe: <table> Interne: (<tr>+) %attrs; %cellhalign; %cellvalign; <title> ... </title> Description: Titre de la page web. Position (absolue): à l'intérieur de <head> Interne: #PCDATA Attributs: %i18n; <tr> ... </tr> Externe: <table>|<thead>|<tbody> Interne: (<th>|<td>+) Description: Ligne d'un tableau Attributs: %attrs; %cellhalign; %cellvalign; bgcolor %Color; #IMPLIED Autres [non-standard]: [width] %Pixels; : Largeur [height] %Pixels; : Hauteur <u> ... </u> Description: Souligne un texte Position (relative): à l'intérieur de la balise <body> Attributs: <ul> </ul> Description: Liste non ordonnée (unordered list) Position (relative) : à l'intérieur de <body> Interne: (<li>)+ %attrs; type %ULStyle; #IMPLIED compact (compact) #IMPLIED <xmp> ... </xmp> Description: Exemple de code HTML (les <> sont affichés) Position (relative) : À l'intérieur de la balise <body>