Les attributs HTML
| Attributs | Description | Syntaxe |
|---|---|---|
| abbr | Définit une courte description/abbréviation du contenude l'élément | <td abbr=" texte "> |
| accesskey | Permet d'implenter des raccourcis clavier pour activer les liens d'une page web | <a href="..." accesskey="1">URL</a> |
| accept | Permet de spécifier quel type de médias vous pouvez envoyer vers le serveur | <input accept="audio/*|video/*|image/*| MIME_type " /> |
| action | Spécifie le fichiers vers lequel sera envoyer un formulaire | <form action=" URL "> |
| align | Permet d'aligner des éléments de bloc (tableaux, images, objets, paragraphes, titre, etc) | < table align="center">contenu</ table> |
| alt | Permet d'apporter la même information concernant l'image (en général le texte qu'elle porte) dans le code de la page | <img src="accueil.png" alt="accueil"> |
| autoplay | Permet de lancer automatiquement un fichier audio | <audio autoplay="autoplay"> |
| axis | Permet de définir un classemment des cellules d'un tableau (non pris en charge par les navigateur, utile en lecture de code uniquement) | <td axis="nom de la catégorie"> |
| background | Permet de spécifier une image de fond pour un élément/page HTML | <body background="URL de l'image"> |
| bgcolor | Permet de spécifier une couleur de fond pour un élément/page HTML | <body bgcolor="couleur"> |
| border | Permet de définir la largeur des bordures extérieures d'un tableau | <table border="valeur en pixels"> |
| bordercolor | Permet de définir la couleur des bordures extérieures d'une table (autre déclinaison : bordercolordark, bordercolorlight) | <table bordercolor="couleur"> |
| cellpadding | Définit l'espace entre les bordures d'une cellule et son contenu | <table cellpadding="pixels"> ou <table cellpadding="...px ...px ...px ...px"> |
| cellspacing | Définit l'espace entre les cellules d'un tableau | <table cellspacing="pixels"> ou <table cellspacing="...px ...px ...px ...px"> |
| charset | Spécifie le jeu de caractère utilisé par le document lié | <a charset="value" > |
| checked | Permet de spécifier qu'un élément du type "checkbox" doit etre coché à l'ouverture de la page | <input type="checkbox" name="son nom" value="sa value" checked="checked" /> |
| class | Définit une classe de style CSS à un élément | < element class="nom de la classe"> |
| cite | Permet de spécifier la source d'une citation | <blockquote cite="URL">texte de citation</blockquote> |
| code | Permet de déclarer une écriture en code informatique | <code>ecriture du code</code> |
| codebase | permet de spécifier l'emplacement URL à partir duquel télécharger le contrôle activeX | <object codebase="URL"></object> |
| codetype | définit le type MIME de l'object | <object codetype="application/msword"> </ object> |
| color | Définit une couleur pour un texte | <font color="couleur"> |
| cols | Permet de définir un nombre de colonnes dans un champ de saisie ou un élément Frame | <textarea cols="nombre"> ou <frameset cols="25px,42px,12px ">(ici 3 colonnes) |
| content | Définit les métadonnées d'un document HTML | <meta content="text" /> |
| controls | Permet d'activer et afficher les controles audio | <audio controls="controls"> |
| coords | Définit les coordonnées X et Y d'une zone dans une image-map | <area coords="value" /> |
| data | Définit l'URL contenant les ressources utilisé par l'object | <object data="URL"> |
| datapagesize | Définit le nombre maximum d'enregistrements autorisés sur une seule page d'un objet Recordset | objRecordset.PageSize |
| dir | Définit l'orientation du texte contenu dans l'élément. | <element dir="ltr|rtl"> |
| disabled | Permet de rendre un element de type input inutilisable et non cliquable | <input disabled="disabled" /> |
| enctype | Spécifie comment le formulaire de données doit être encodé lors de la soumission sur le serveur | <form enctype="value"> |
| face | Définit la police du texte à l'intérieur d'un élément <font> | <font face="font-family"> |
| frame | Définie quelles bordures exterieures d'un tableau doivent être visibles | <table frame="value"> |
| frameborder | Spécifie s'il faut afficher ou non une bordure autour d'un élément <iframe> | <iframe frameborder="1|0"> |
| headers | Spécifie les cellules liées au cellules d'entete d'un tableau | <td headers="header-id"> |
| height | Définit la hauteur d'un élément | <element height="pixels | %"/> |
| href | Permet d'indiquer l'URL de la page où mene le lien, il doit etre situé dans la balise <a> | <a href="URL"> |
| hreflang | Permet d'indiquer la langue du document ciblé par le lien | <a href="URL" hreflang="language-code"></a> |
| hidden | Permet de masquer un élément (ne fonctionne pas sous IE) | <element hidden="hidden"> |
| hspace | Définit des marges horizontales sur une image | <img hspace="pixels" /> |
| http-equiv | Définit le jeu de caractère d'un document HTML | <meta http-equiv="content-type" content="text/html;charset=UTF-8" />...</head> |
| id | Définit un identifiant unique pour un élément HTML (sa valeur doit être unique au sein du document HTML) | < element id="id"> |
| ismap | Permet l'envoie de données sur un autre serveur par clic de souris sur l'element (généralemtn une image) | <element ismap="ismap"/> |
| lang | Spécifie le language du contenu d'un element | <element lang="language-code"> |
| longdesc | Spécifie une URL vers une page qui contient une longue description d'une image | <img longdesc=" URL "/> |
| loop | Permet une lecture en boucle d'un media | <media loop="loop"> |
| lowscr | Définit une URL contenant une version basse résolution d'une image | imageObject.lowsrc= URL |
| marginheight | Définit la largeur des marges inferieure et superieure d'un élément de type iFrame | <iframe marginheight="pixels"> |
| marginwidth | Définit la largeur des marges droite et gauche d'un élément de type iFrame | <iframe marginwidth="pixels"> |
| maxlength | Définie le nombre maximum de caractere pouvant etre integré dans un element input | <input maxlength="nombre" /> |
| media | specifie pour quelle type de media le document est optimisé, il est utilisé pour indiquer l'URL cible pour les appareil spéciaux (type Iphone) Il peut accepter plusieurs valeur. Uniquement utilisé avec l'attribut href | ex : <a href="URL" media="value"> <a href="URL" media="print and (resolution:300dpi)"> |
| method | Specifie la methode d'envoie d'un formulaire | <form method="get|post"> |
| multiple | Définit une liste déroulante qui permet des sélections multiples | <select multiple="multiple"> |
| name | Définit un nom a un element input ou form | <input name="text" /> <form name="text"> |
| noresize | Dpécifie qu'un cadre de type frame ne peut pas etre redimensionné | <frame noresize="noresize"> |
| nowrap | Pas de retour à la ligne en limite d'élément (le texte dépassera de l'élément concerné) | <element nowrap="nowrap"> |
| readonly | Définit un element HTML avec un champ de saisie en lecture seule | <texarea readonly="readonly"> |
| rel | Spécifie la relation entre le document courant et le document lié | <a rel="friend" href="url">text</a> |
| rev | Spécifie la relation entre le document lié et le document courant (inverse de rel) | <a rev="friend" href="url">text</a> |
| rows | Spécifie le nombre de lignes visibles dans une zone de texte | <textarea rows="nombre"> |
| rowspan | Specifie le nombre de ligne que la cellule d'un tableau doit intégrer (similaire à une fusion de cellule) | <td rowspan="nombre"> |
| rules | Spécifie quelles parties des bordures interieures d'un tableau doivent être visibles. Petit conseil : préférez le CSS | <table rules="rows"> ou <table rules="valeur"> |
| scope | Définit un moyen d'associer les cellules d'en-tête et les cellules de données d'un tableau | <td scope= "col|row|colgroup|rowgroup"> |
| scr | Permet de cibler l'emplacement d'un fichier de type média dans le dossier | <img scr="chemin"> |
| scrolling | Spécifie la presence d'une barre de defilement pour un element de type frame | <iframe scrolling="auto|yes|no"> |
| shape | Définit la forme d'une zone cliquable | <area shape= "default|rect|circle|poly"/> |
| size | Définit la largeur visible, en caractères, d'un élément <input> | <input size="nombre"/> |
| span | Définit le nombre de colonnes sur lesquel un élément <colgroup> doit s'étendre. | <colgroup span="nombre"> |
| start | Spécifie une valeur / un nombre de depart à partir duquel une liste numeroté doit commencer | <ol start="nombre"> |
| style | Spécifie un style pour un élément | <element style="nom-du-style"> |
| tabindex | Définit l'ordre de tabulation d'un élément (lorsque le "tab" bouton est utilisé pour la navigation) | <element tabindex="nombre"> |
| target | Définit où s'ouvrira le document ciblé par l'URL | <a target= "_blank|_self|_parent|_top| framename"> |
| title | Utilisé sur les liens. Apporte une information nécessaire à la bonne navigation du visiteur et supplémentaire à l'intitulé du lien | |
| type | Spécifie le type MIME du document lié | <a type="MIME_type"> ex: <a type="text/html"> |
| usemap | Spécifie le nom d'une image-map à utiliser avec l'element | <element usemap="#mapname"> |
| valign | Définit l'alignement vertical du contenu d'une cellule | <td valign= "top|middle|bottom|baseline"> |
| value | Spécifie la valeur d'un élément <input> : Pour le "bouton", "reset", et "soumettre" - il définit le texte sur le bouton ; Pour "texte", "password", et "cachée" - il définit la valeur du champ de saisie ; Pour "case", "radio", "image" - il définit la valeur associée à l'entrée (envoyé pour soumission) |
<input value="text"/> |
| vspace | Definit une marge supérieure et inférieure autour d'une image | <img vspace="pixels"/> |
| width | Definit la largeur d'un element | <element width="pixels | %"/> |
| wrap | Spécifie comment le texte dans une zone de texte doit être enveloppé lorsqu'il est soumis à une forme | <textarea wrap="soft|hard"> |
| xml:lang | Indique la langue du contenu de l'élément (pour les documents XHTML) | |
| xmlns | Définit l'espace de nom XML pour un document XHTML | <html xmlns= "http://www.w3.org/1999/xhtml"> |
Les attributs d'évenement HTML
Vous constaterez que cette liste d'attributs n'intègre pas d'exemple de syntaxe individuel, pourquoi ? Les attributs d'évenements de souris s'utilise dans des contextes et non seuls, vous mettre un exemple/modèle de syntaxe serait dénué d'interet puisque inexploitable. Voici un petit exemple d'integration afin de tout de meme vous éclairer.
Ici nous allons déclencher un agrandissement d'image grace à l'attribut "onmouseover"
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function bigImg(x)
{
x.style.height="64px";
x.style.width="64px";
}
function normalImg(x)
{
x.style.height="32px";
x.style.width="32px";
}
</script>
</head>
<body>
<img src="images/imgtest.png" alt="imgtest" width="32" height="32" border="0" hspace="60" onmouseover="bigImg(this)" onmouseout="normalImg(this)"/>
Et voici le résultat :
"Passer le curseur de votre souris sur la petite planète"
Les attributs d'évenements window
| Attributs | Description |
|---|---|
| onafterprint | Script à exécuter après le document soit imprimé |
| onbeforeprint | Script à exécuter avant que le document soit imprimé |
| onbeforeonload | Script à exécuter avant le chargement du document |
| onblur | Script à exécuter lorsque la fenetre perd le focus (selection à la souris ou au clavier) |
| onerror | Script à exécuter lorsqu'une erreur se produit |
| onfocus | Script à exécuter lorsque la fenetre obtient le focus (selection à la souris ou au clavier) |
| onhaschange | Script à exécuter lorsque le document à changé |
| onload | Script à exécuter lorsque le document est en chargement |
| onmessage | Script à exécuter lorsque le message est déclenché |
| onoffline | Script à exécuter lorsque le document est hors-ligne |
| ononline | Script à exécuter lorsque le document est en ligne |
| onpagehide | Script à exécuter lorsque la fenetre est masquée |
| onpageshow | Script à exécuter lorsque la fenetre est visible |
| onpopstate | Script à exécuter lors des changements de la fenetre |
| onredo | Script à exécuter lorsque le document effectue une redo (retour à l'état précédent) |
| onresize | Script à exécuter lorsque la fenetre est redimensionnée |
| onstorage | Script à exécuter lorsqu'une zone de stockage Web est mis à jour |
| onundo | Script à exécuter lorsqu'une annulation est effectué sur le document |
| onunload | Script à exécuter lorsque l'utilisateur quitte le document |
Les attributs d'évenements de formulaire
| Attributs | Description |
|---|---|
| onblur | Script à exécuter quand le document perd le focus (selection à la souris ou au clavier) |
| onchange | Script à exécuter quand un élément change |
| oncontextmenu | Script à exécuter lorsqu'un menu contextuel est déclenché |
| onfocus | Script à exécuter lorsqu'un élément reçoit le focus (selection à la souris ou au clavier) |
| onformchange | Script à exécuter lorsque le formulaire change |
| onforminput | Script à exécuter lorsque l'utilisateur saisie une entrée dans le formulaire |
| oninput | Script à exécuter lorsque l'utilisateur saisie une entrée dans un élément du formulaire |
| oninvalid | Script à exécuter lorsqu'une saisie dans un élément n'est pas valide |
| onselect | Script à exécuter lorsqu'un élément est selectionné |
| onsubmit | Script à exécuter lorsque le formulaire est soumis |
| onreset (non valide en HTML5) | Script à exécuter lorsque le formulaire est réinitialisé |
Les attributs d'évenements de clavier
| Attributs | Description |
|---|---|
| onkeydown | Script à exécuter lorsqu'une touche du clavier est enfoncée |
| onkeypress | Script à exécuter lorsqu'une touche du clavier est enfoncée puis relachée |
| onkeyup | Script à exécuter lorsqu'une touche du clavier est relachée |
Les attributs d'évenements de souris
| Attributs | Description |
|---|---|
| onclick | Script à exécuter sur un clic de souris |
| ondblclick | Script à exécuter sur un double-clic de souris |
| ondrag | Script à exécuter quand un élément est déplacé à la souris |
| ondragend | Script à exécuter à la fin d'une opération de glisser |
| ondragenter | Script à exécuter quand un élément a été glissé dans d'une zone de dépot valide |
| ondragleave | Script à exécuter quand un élément est glissé hors d'une zone de dépot valide |
| ondragover | Script à exécuter quand un élément est glissé sur une zone de dépot valide |
| ondragstart | Script à exécuter Script à exécuter au début d'une opération de glisser |
| ondrop | Script à exécuter lorsqu'un élément à glisser a été relaché |
| onmousedown | Script à exécuter lorsque le bouton de souris est enfoncé |
| onmousemove | Script à exécuter lorsque le pointeur de souris se déplace |
| onmouseout | Script à exécuter lorsque le pointeur de souris se déplace hors de l'élément |
| onmouseover | Script à exécuter lorsque le pointeur de souris se déplace sur l'élément |
| onmouseup | Script à exécuter lorsque le bouton de souris est relaché |
| onmousewheel | Script à exécuter lorsque la molette de souris est en rotation |
| onscroll | Script à exécuter lorsque de l'utilisation de la barre de défilement |
Les attributs d'évenements de médias
| Attributs | Description |
|---|---|
| onabort | Script à exécuter sur abort |
| oncanplay | Script à exécuter lorsque le fichier est pret à etre jouer (assez de mémoire tampon chargé) |
| oncanplaythrough | Script à exécuter lorsque le fichier ne peut etre joué sans un arret pour recharger la mémoire tampon |
| ondurationchange | Script à exécuter lors du temps de passage d'un support à l'autre |
| onended | Script à exécute rà la fin de la lecture du média (ex: remerciements) |
| onerror | Script à exécuter lors d'une erreur en cours de chargement du média |
| onloadeddata | Script à exécuter lorsque le média est chargé |
| onloadedmetadata | Script à exécuter lorsque les meta données sont chargées |
| onloadstart | Script à exécuter pendant la charge du fichier |
| onpause | Script à exécuter lorsque le média est en pause |
| onplay | Script à exécuter lorsque le média est pret à entrer en lecture |
| onplaying | Script à exécuter lorsque le média commence la lecture |
| onprogress | Script à exécuter lorsque le navigateur est en train d'obtenir le support de données |
| onratechange | Script à exécuter lors des variations des taux de lecture déclencher par l'utilisateur (ralenti, accélérer) |
| onreadystatechange | Script à exécuter lors des changements d'état |
| onseeked | Script à exécuter lors l'attribut cherche la valeur "false" indiquant que la recherche est terminé |
| onseeking | Script à exécuter lors l'attribut cherche la valeur "true" indiquant que la recherche est active |
| onstalled | Script à exécuter lorsque le navigateur est incapable de récupérer les données de média |
| onsuspend | Script à exécuter lors de la récupération des données de média avant qu'il ne soit chargé |
| ontimeupdate | Script à exécuter lorsque la position de lecture change (l'utilisateur avance par point/clic) |
| onvolumechange | Script à exécuter lors d'un changement de volume |
| onwaiting | Script à exécuter lorsque le média est en pause (lors d'une charge en pmémoire tampon) |