Fiche HTML : HTML5 GénéralitésObjet de la fiche :État de la fiche
|
| Sans wbr | avec wbr sur 2 mots | avec wbr et zône écriture plus large |
|---|---|---|
|
Parmi les noms les plus longs en français citons apopathodiaphulatophobie (terme de psychiatrie signifiant « la peur de la constipation ») ou bien hexakosioihexekontahexaphobie qui signifie la peur du nombre 666, ou encore interdépartementalisation signifiant la « mise en œuvre commune à plusieurs départements »
|
Parmi les noms les plus longs en français citons apopathodia
|
Parmi les noms les plus longs en français citons apopathodia
|
<ruby>, <rt> et <rp>
La balise <ruby> spécifie une annotation pour la typographie est asiatique.
Cette balise permet d'encadrer un ou plusieurs caractères qui nécessitent des explications particulières. Elle est utilisée en association avec la balise <rt> qui donne l'information et la balise optionnelle <rp> qui défini ce qu'il faut afficher si le navigateur ne comprend pas la balise <ruby>.
Exemple
| Code | Résultat |
|---|---|
|
<ruby> 焖 <rt> 㳇✐ȃ </rt> <rp> (aide typographique non disponible)</rp> </ruby> |
 |
Balises d'informations
<time> ...... </time>
Il s'agit de baliser sémantiquement une date ou une heure précise. Son intérêt réside principalement au niveau de l'indexation automatisée par les moteurs de recherche. Il permet de préciser la date de publication d'un article ou de plusieurs articlees ou encore d'une page WEB
Exemple de base : <p> Cette publication date du <time>15 Novembre 2012</time>
Les attributs de <time>
| Attributs | Valeurs | Actions |
|---|---|---|
| datetime | date et/ou heure au format normalisé. | cet attribut permet de standardiser le format de la date et/ou de l'heure, afin que l'indexation par les robots soit facilitée. La valeur n'est plus dépendante du contenu de l'élément (<time>), mais du contenu de son attribut datetime. Format normalisé : AAAA-MM-JJ hh:mm:ss (Année sur 4 chiffres, Mois sur 2 chiffres, Jour sur 2 chiffres) |
| pubdate |
|
Si l'attribut est initialisé à pubdate cela permet d'indiquer que la valeur de <time> correspond à la date de publication de son ancêtre <article> le plus proche s'il est présent ou du document dans sa globalité. Si cet attribut est présent, il ne doit y avoir qu'un seul élément <time> contenant l'attribut pubdate pour chaque <article>, idem pour le document entier s'il ne contient pas d'ancêtre <article> pour l'élément <time>. |
Exemples :
<p> Cette publication date du <time datetime = "2012" >2012</time> </p>
<p> Cette publication date du <time datetime = "2012-11" >Novembre 2012</time> </p>
<p> Cette publication date du <time datetime = "2012-11-15" >15 Novembre 2012</time> </p>
<p> Cette publication date du <time datetime = "2012-11-15 15:30:00" >15 Novembre 2012 à 15h 30</time> </p>
<p> Cette publication date du <time datetime = "2012-11-15 15:30:00" pubdate >15 Novembre 2012 à 15h 30</time> </p>
<details> et <summary>
Cette balise permet de baliser un contenu quelconque (texte, image, listes, tableaux, formulaires, etc) ayant pour rôle d'apporter une information ou des détails supplémentaires. Ceux-ci ne doivent cependant pas être obligatoires pour poursuivre la bonne marche de l'application web ou la compréhension du document HTML. Le navigateur pourra masquer ces informations par défaut, et les déployer à la demande de l'utilisateur. Une icône pourra indiquer l'état de l'élément : déployé (visible) ou compacté (seul le résumé reste visible). Ce résumé, assimilable à un titre ou une légende, est apporté par <summary>.
| Attribut | Syntaxe | Action |
|---|---|---|
| open |
<details open> .. </details> ou <details> .. </details> |
Si cet attribut est présent, les détails sont exposés à l'utilisateur dès le chargement. Sinon seul le résumé (défini dans <summary>) est affiché. Un click sur le résumé suffit pour afficher le détail et vice vers ça. |
| Code exemple avec contenu de type tableau | Résultat |
|---|---|
|
|
Exemple de fonctionnement avec le navigateur Chrome.
|
Balise de sécurisation
<keygen>
La balise <keygen> permet de générer au sein d'un formulaire une paire de clés de sécurité pour permettre le cryptage et le décryptage de données échangées. La clé privée est conservée en local tandis que la clé publique est retournée au serveur.
Rappel sur la signature des documents électroniques
Comme vous signez un document papier, il est possible de signer un document numérique. Cette signature vous engage sur un document comme vous appartenant et avec lequel vous êtes d'accord.
Si la signature sur document papier est bien connue de tout le monde, la signature électronique demande quelques explications.
Dans le monde numérique, votre marque personnelle, est une clé de chiffrement. Pour signer un document, vous le chiffrez, mais si vous voulez le lire il vous faudra dans ce cas une clé de déchiffrement.
Ainsi les deux clés (celle qui chiffre et celle qui déchiffre) vont par paires. L'organisme, un serveur ou l'application avec lesquels vous êtes amené à échanger des documents chiffrés vous fournit la paire de clés correspondante. Ce jeu de clés peut être stocké sur votre ordinateur ou tout autre support externe lisible par votre ordinateur.
La clé de chiffrement qui vous permet de signer électroniquement et de façon unique un document est appelée clé privée.
La copie de la clé de déchiffrement que vous remettez aux destinataires de votre document afin qu'ils puissent le lire est appelée clé publique.
En bref vous signez un document en le chiffrant avec votre clé privée. Seule votre clé publique permettra de le déchiffrer.
Il s'agit donc d'un chiffrement asymétrique :
Chaque clé peut chiffrer. Si l'on chiffre avec une clé, on doit utiliser la seconde pour déchiffrer. Pour que cela soit efficace il faut absolument qu'une des clés ne soit connue que de vous seul (clé privée), l'autre peut être diffusée à discrétion.
Syntaxe
<keygen keytype="type de clé" challenge="chaine info" name="key">
Attributs
| Attributs | Valeurs | Commentaires |
|---|---|---|
| keytype | keytype = "rsa" | type de clef attendue. Pour le moment la seule existante est celle de type RSA. |
| challenge | challenge="chaine caractères" | chaîne de caractère envoyée avec la clef publique. |
| keyparams | keyparams="niveau de sécurité" | Pour les clés RSA, le paramètre keyparams n'est pas utilisé (ignoré s'il est présent). L'utilisateur a automatiquement le choix pour la force des clés RSA à générer. Actuellement, l'utilisateur peut choisir entre « Haut niveau » pour 2048 bits et « Niveau moyen » pour 1024 bits. |
Limites
- Tout élément pouvant contenir des éléments de phrasé, excepté <a> et <button>
- L'utilisation de cet élément doit être couplée à un système de gestion de certificats électroniques et permet de créer un système d'authentification basé sur un certificat client plutôt que sur un schéma classique d'authentification par mot de passe. C'est utile pour les services qui ont besoin d'une authentification forte comme par exemple les sites de banques. Ce système d'authentification par certicat ne fonctionne que sur un système utilisant SSL/TLS (sites en HTTPs).
Exemple
Dans cet exemple on soumet un formulaire sur la même page HTML et on récupère pour l'afficher la clé génerée.
Balises pour modèle de données
<template>, <datatemplate>,<rule>, <nest>
<datatemplate> defini un conteneur pour un modèle de données. Cet element doit avoir des sous-éléments pour définir les données : <rule> éléments.
<rule> defini les règles pour mettre à jour un datatemplate. Cet élément a comme attributs "condition" et "mode".
<nest> defini un noeud dans le datatemplate pour les éléments enfants. Cet élément a comme attributs "mode" et "filter"
ATTENTION : La documentation officielle n'est pas encore suffisamment claire pour construire un exemple exhaustif
Balise pour menu contextuel
La balise <menu> ressemble à la balise <ul> mais en plus riche du point de vue rendu et permet de créer des menus contextuels ou des barres d'outils, en fonction de la valeur de l'attribut "type".
En effet les éléments <menu> et <ul> représentent tous les deux des listes non-ordonnées, mais alors que <ul> ne contient que des objets à afficher, l'élément <menu> peut contenir des objets interactifs pouvant être utilisés.
Attributs
| Types | valeurs | ||||||
|---|---|---|---|---|---|---|---|
| type |
|
Exemples
type="context"
ATTENTION : La balise <menu> n'est actuellement pas supportée par tous les principaux navigateurs (opéra, mozilla, chrome, internet explorer).
Si votre navigateur le permet voici un exemple réel.
Remarque : On peut constater que les éléments du menu contextuel que nous venons de créer (les 2 premiers de la liste) s'ajoutent aux éléments du menu contextuel classique.
type="toolbar"
|
ATTENTION : Acun navigateur n'implémente cette possibilité. Elle se code de la façon ci-contre dans le cas d'un exemple d'un menu pour un éditeur basique avec deux boutons de menu. |
|
Enrichissement des formulaires
Html 5 apporte des possibilités trés intéressantes en ce qui concerne l'acquisition et l'envoi des données des formulaires.
Compléments balise <input>
Types supplémentaires rajoutés en HTML5
| Types | Commentaires | Exemples | ||||
|---|---|---|---|---|---|---|
| type="date" | Entrée rapide des dates au format “Y-m-d” (format us mais directement compatible avec le format des bases de données). Cet attribut permet d'obtenir une aide automatique au remplissage (sur quelques navigateurs seulement). Les attributs min et max peuvent être appliqués sur ce type de champ pour offrir un intervalle précis de dates. <input type = "date" max = "2012-06-25" min = "2011-08-13" > |
Opéra |
||||
| type="time" | Comme le champ de type date, ce type de champ déclenche l'affichage d'un sélecteur permettant d'incrémenter ou décrémenter la valeur du champ minute par minute ou heure par heure. | Opéra |
||||
| type="datetime-local" | Combinaison dans un seul champ des types date et time, sans précision sur le fuseau horaire. | Opéra |
||||
| type="email" value="" | Si l'entrée ne correspond pas une chaîne de type mail, envoi d'un message d’avertissement et soumission du formulaire non effectuée. | Opéra |
||||
| type="url" value="" | Si l'entrée ne correspond pas une chaîne de type 'absolute URL' envoi d'un message d’avertissement et soumission du formulaire non effectuée. | Même type de présentation que pour le type "email" | ||||
| type="tel" |
Le but est d'offrir une aide à la saisie dans le cas de numéros de téléphone. Cependant , tant que les divers formats des numéros de téléphone ne sont pas spécifiés dans les navigateurs, celà a peu de chance de fonctionner correctement.
Le navigateur ne proposant pas cette vérification, un contrôle plus fin grâce à l'attribut pattern sera nécessaire. L'attribut pattern est une expression régulière dont les informations doivent être en concordance ave la valeur saisie dans le champ. pattern="[0-9]{10}" pour n'accepter que les chiffres de 0 à 9 et seulement 10 chiffres. |
<form> <input type="tel" value="" pattern="[0-9]{10}" /> <input type="submit" value ="Validez"> </form> 
|
||||
| type="color" value="" | Affichage de la palette de couleur dans laquelle on va pouvoir sélectionner une couleur et renseigner "value" avec l'équivalence au format héxadécimal (un dièse suivi de 6 caractères alpha-numériques compris entre A et F, et 0 et 9). |
<input type="color" value="#ffffff" />
|
||||
| type="number" min, max |
Entrée type format nombre. Au focus apparaît sur le coté droit une petite flèche haute et une basse permettant d'incrémenter ou décrémenté le nombre. min et max sont des limites (valeurs) optionnelles que l'on peut fixer au nombre. |
<input type="number" min=0 max=50 value="15" />
|
||||
| type="search" results="" autosave. |
Champ de recherche. Si le navigateur ne comprend pas ce type, il applique le type "texte".
results (attribut non-standard) précise le nombre maximal de recherches recentes à afficher. Exemple results= 2. autosave (attribut non-standard). Toutes les recherches dans le champ search sont sauvegardées dans l'historique de recherche, dans la catégorie spécifiée par l'attribut autosave. Exemple autosave="Voitures". |
<input type="search" name="search" value="" placeholder="Entrez un mot-clef" results=2 autosave="mesRecherches" />
Safari 
|
||||
| type="range" avec min, max, step, value |
Contrôle de type curseur pratique et intuitif pour sélectionner un nombre compris entre 2 bornes. max : valeur haute du curseur (réel positif ou négatif mais > à min). step : pas de progression du curseur (réel positif ou négatif). value : valeur courante du champ. Si absent le curseur au chargement se positionne sur la valeur médiane. |
|
Note 1 : Exemple avec du javascript
Nouveaux attributs applicables
- placeholder : indique une information par défaut qui s’affiche (en gris) lorsque le champ est vide (value="" ou non précisée) et qui disparait lorsque l'on clique ou insère un caractère dans le champ,
- Syntaxe : <input type="text (ou autre)" placeholder="mon texte" />
- Exemple :
- required : indique que ce champ est une partie nécessaire à la soumission du formulaire, et qu'il ne doit pas être vide
- Syntaxe : <input ... required="required" ... />
- Exemple avec Firefox de réponse à la soumission d'un formulaire comportant un champ requiered vide :
-
pattern : spécifie une règle personnalisée qui sera affectée au champ. Par éxemple, pattern="[a-z][0-9]{4}" spécifie que le champ devra contenir une lettre et quatre chiffres pour être exploitable.
<input type="text" pattern="[a-z][0-9]{4}" placeholder="1 lettre + 4 chiffres" />
Les autres attributs standards
Les attributs standards restent toujours disponibles, avec pour rappel les plus usités :
- id : identifiant du champ,
- name : nom du champ,
- value : valeur du champ,
- disabled : désactive le champ, qui devient alors grisé et inutilisable dans la page,
- readonly : rend le champ inopérant, et permet d’avoir un champ avec une valeur mais non modifiable,
- title : information affichée lors du survol du champ.
<datalist>
datalist est un élément de formulaire permettant de lier une liste de choix à un élément input de formulaire.
Le champ de formulaire (input) et la liste de suggestions (datalist + option) sont reliés grace à la valeur commune des attributs list rattaché à l'input, et id de la datalist.
Remarque : Il est possible d'utiliser la même liste de suggestions pour plusieurs champs de formulaire. Cela peut être pratique pour les champs dupliqués, il n'y a ainsi qu'une seule liste à maintenir.
<output>
La balise <output> s'utilise associée à des formulaires pour afficher en temps réel le résultat d'opérations liées à des modifications (par l'utilisateur) survenues dans des champs particuliers du formulaire.
Syntaxe
<output> id="monId" for="Champs concernés" form="formulaire concerné">Affichage</output>Attributs
Ce champ est en lecture seule et se présente comme un champ texte à l'affichage
| Attributs | Valeurs |
|---|---|
| for | Liste des noms de champs concernés par cette action séparés par un espace. |
| form | Référence du formulaire concerné. Il n'est pas nécessaire de préciser cet attribut si <output> est dans le formulaire lui-même. Si on précise le formulaire concerné il est possible de positionner <output> ou que ce soit dans la page. |
| id et/ou name | Référence de l'élément <output>. |
Exemples
|
Bougez le curseur |
|
|
Changez les valeurs Résultat multiplication = |
|
Remarque : on utilise dans les deux cas l'évènement DOM/Javascript "oninput" qui supervise les changements de valeur de la balise <input> et met à jour le contenu de <output>
Attributs supplémentaires applicables
contenteditable
Cet attribut permet de rendre n’importe quel conteneur, dans une page Web, directement modifiable.
contenteditable="true" pour indiquer que l'élément est éditable ou contenteditable="false" pour un élément non éditable.
Dans l'exemple suivant le conteneur utilisé est un <span>, mais cela fonctionne de la même manière avec les autres conteneurs, notamment <div> et <p>
Cliquez sur le texte suivant Modifiez-moi ! et constatez que le texte devient modifiable.
<span contenteditable="true">Modifiez-moi !</span>
spellcheck
Cet attribut active(true) ou non (false) la correction orthographique. Son action principale est de surligner en rouge les mots ou phrases mal orthographiés et d'offrir un menu contextuel d'aide.
<input type=text spellcheck="true">
Les balises ou attributs en relation avec une API
draggable et dropzone pour le glisser/coller
Il s'agit en fait de la version plus moderne de l'élément <input type="file" />. Toutefois l'attribut 'dropzone' n'est actuellement supporté par aucun navigateur. Ce qui ne nous empêchera pas de réaliser des copie/collé performants grâce à la nouvelle API Drag and Drop HTML5
draggable
L'attribut draggable permet de rendre tout élément déplaçable.
Cet attribut peut prendre 3 valeurs :
- draggable = "true" indique que l'élément est glissable.
- draggable = "false" indique que l'élément n'est pas glissable.
- draggable = "auto" pour utiliser les réglages par défaut du navigateur.
Note : Les images et les liens sont des éléments déplaçables par défaut. Il n'est donc pas nécessaire de préciser draggable = "true". Par contre si on veut interdire le déplacement pour ces éléments il conviendra de positionner draggable = "false". Pour les autres éléments l'attribut "draggable" doit être défini pour être en mesure d'effectuer un glisser.
dropzone
Cet attribut indique le type de contenu qui peut être déposé sur un élément, il est utilisé avec l'API Drag & Drop.
- copy : L’élément glissé sur le dépôt sera copié. La copie vers la zone de drop concerne des données (les données copiées sont conservées).
- move : L’élément glissé sur le dépôt sera déplacé. Il n’existera plus sur son emplacement initial. Le transfert vers la zone de drop concerne des données ( les données sont déplacées vers la nouvelle localisation).
- link : C'est un lien vers les données de l’élément glissé sera envoyé au dépôt.
Syntaxe
Exemple
Cet exemple est présenté uniquement pour montrer les résultats que l'on peut obtenir avec cette API. Les détails de fonctionnement seront précisés dans la fiche Javascript Glisser/coller.
Custom Data Attributes
HTML5 permet d'écrire librement tout attribut débutant par data- et ainsi associer des données personnalisées directement dans un élément HTML.
A quoi cela peut-il servir ?
Personnaliser les attributs débutant par data- en y concaténant une chaine de texte, à la convenance du développeur. Seules consignes : au moins un caractère et aucune majuscule. De plus on peut cumuler plusieurs attributs data- sur un même élément.
Quel est l'intérêt ?
Simplifier le stockage des données dans le document directement dans un élément.Comment ça marche par l'exemple appliqué à un élément img (image)
| Image | Attributs Data- |
|---|---|
|
<img src="../Images/Mavoiture.jpg" width="153" height="115" alt="Ma voiture" data-proprio="Jany" data-lieu="Héricy" data-materiel="2CV6" data-date="Octobre 1985" /> |
On peut ainsi imaginer stocker toutes sortes de données, à partir du moment où il ne s'agit que de chaînes de texte.
Les stocker c'est bien, les exploiter ce sera mieux avec l'aide de script javascript que nous verrons ultérieurement (Voir la fiche javascript).
<progress> ...... </progress>
La balise "progress" permet d'afficher l'état d'avancement d'une tâche ou d'une action à l'aide d'une barre de progression.
Syntaxe et propriétés spécifiques
<progress (propriété générales) (propriétés spécifiques)></progress>
| Propriétés spécifiques | Commentaires |
|---|---|
| max | Valeur maximale de la barre de progression |
| position | Pourcentage d'avancement de la barre de progression (lecture seule) |
| value | Valeur actuelle de la progression |
Exemple
<meter> ...... </meter>
<meter> représente une jauge mesurant une valeur comprise entre un minimum et un maximum. Les valeurs négatives peuvent être utilisées, contrairement à <progress>. Son usage est principalement destiné à indiquer un état, stable ou évoluant au cours du temps.
Attributs
| Attributs | Commentaires |
|---|---|
| value | valeur à afficher sur l'échelle. Zéro par défaut. |
| min | Borne minimum autorisée. Zéro par défaut. Peut être négative. Exemple min="3" |
| max | Borne maximum autorisée. 1 par défaut, 50% en omettant les attributs min et max, la valeur entrée devra être 0.5 (qui se situe entre 0 et 1). |
| low | Si la valeur (value) est inférieure à la valeur de l'attribut low, la mesure sera considérée comme faible et le code de couleur de la jauge s'ajustera en conséquence. |
| high | Si la valeur (value) est inférieure à la valeur de l'attribut high, et supérieure à la valeur de l'attribut low, la mesure sera considérée comme élevée et le code de couleur de la jauge s'ajustera en conséquence. |
| optimum | Si la valeur (value) est supérieure à la valeur de l'attribut optimum, la mesure sera considérée comme optimum et le code de couleur de la jauge s'ajustera en conséquence. |
Personnalisation
- Il n'existe pas de style pour la balise <meter>
- La jauge comporte trois couleurs indicatrices par défaut
- rouge pour une valeur considérée comme mauvaise (valeur < low),
- jaune pour une valeur considérée comme moyenne ( low < valeur < high),
- vert pour une valeur considérée comme bonne (valeur > high),
- C’est à l’utilisateur de spécifier ce qu’il considère comme une bonne valeur (vert), une mauvaise valeur (rouge) et une valeur moyenne (jaune).
- Les attributs classiques peuvent être appliqués afin de personnaliser la jauge et en particulier : width, height, border, title...
- Les attributs peuvent être pilotés de façon classique par du javascript.
Exemples
| Exemples | Résultats |
|---|---|
| <meter value="39" min="0" max="100" low="50" high="60" optimum="80">39%</meter> |
 |
| <meter value="56" min="0" max="100" low="50" high="60" optimum="80">56%</meter> |
 |
| <meter value="64" min="0" max="100" low="50" high="60" optimum="80">64%</meter> |
 |
| <meter value="86" min="0" max="100" low="50" high="60" optimum="80">86%</meter> |
 |
| <meter value="92" min="0" max="100" low="50" high="60" optimum="80">92%</meter> |
 |
La balise <canvas>
De base c'est une zone de pixels (transparents), disposant d'une API (javascript) pour réaliser des fonctions graphiques diverses et variées. C'est en fait une surface de dessin.
canvas est une grille en deux dimensions. Les coordonnées 0,0 correspondent au coin haut-gauche de l'élément. Suivant l'axe des x les valeurs varient de x=0(left) à x=width (right) de l'élément. Suivant l'axe des y les valeurs varient de y=0 (top) à x=height (bottom) de l'élément.
Paramètres
L'élément canvas prend en paramètres :
- width : largeur de la zone.
- height : hauteur de la zone.
- id : L'id de l'élément qui servira au Javascript.
- Les styles classiques s'appliquent aussi à cet élément
Exemple
|
Lorque l'on utilise canvas, il est trés important de comprendre la différence entre canvas en tant qu'élément et son contexte (context). L'élément canvas est un élément de la structure HTML au même titre qu'une boite <div> ou qu'un paragraphe <p>. Le context de canvas est un objet avec ses propres propriétés et méthodes que l'on peut utiliser via du javascript pour réaliser des rendus graphiques à l'intérieur de l'élément canvas. Le contexte peut être de types 2D ou 3D. Cette balise donne tout son sens lorsqu'elle est associée à des scripts javascript. Pour ces compléments reportez vous à la fiche | Les balises HTML5 avec javascript | |
|
La balise <audio>
Généralités
Pour insérer un fichier audio dans une page WEB, il suffit d’insérer les lignes suivantes dans une page HTML5 :
<audio src="URL fichier audio">
</audio>
et d'y ajouter un ensemble de d'attributs permettant d'ajouter quelques fonctionnalités, pour aboutir à la syntaxe générale suivante :
<audio src="URL fichier audio" [attributs] [attributs] [attributs]>
</audio>
Attributs de la balise audio
| Attributs | Descriptions | Exemples | ||||||
|---|---|---|---|---|---|---|---|---|
| src | URL pour accéder au fichier audio. Cet attribut est optionnel, et on peut utiliser aussi l'élément <source> pour spécifier l'accés au fichier audio. |
Exemple : <audio src="../BoutiqueFleuriste.mp3" > </audio> |
||||||
| type | Type MIME du média. Il est également possible d'indiquer les codecs dont le fichier média a besoin ; cela permet au navigateur de prendre de meilleurs décisions. |
Exemple : <audio src="../BoutiqueFleuriste.mp3" type="audio/mpeg" ></audio> ou <audio src="../BoutiqueFleuriste.mp3" type="audio/mpeg; codecs='audio/mp3'" ></audio> |
||||||
| media |
Type de média (destination) pour lesquels ce média est destiné.
Cet attribut joue le même rôle que celui utilisé avec l'élément style. Par exemple on peut déclarer media="handheld" pour indiquer que le média s'applique à l'affichage sur des ordinateurs de poche très petits comme des agendas électroniques ou encore media="braille" pour pour un média destiné à être lu au toucher. Pour plus de détails reportez vous à la fiche | CSS_Introduction.php#Media | |
Exemple : <audio src="../BoutiqueFleuriste.mp3" type="audio/mpeg; codecs='audio/mp3'" media="all" ></audio> |
||||||
| autoplay | Cet attribut (booléen) s'il est spécifié permet au fichier audio de démarrer automatiquement. |
Exemple : <audio src="../BoutiqueFleuriste.mp3" autoplay> </audio> |
||||||
| autobuffer | Cet attribut (booléen) s'il est spécifié permet à ce que le fichier audio commence immédiatement à être bufferisé même si autoplay n'est pas spécifié. | |||||||
| controls | Cet attribut (booléen) s'il est spécifié permet l'affichage d'un panneau de commandes permettant de controller entièrement la façon de lire le fichier (volume, pause, arrêt, lire, muet, etc ..). |
Exemple : <audio src="../BoutiqueFleuriste.mp3" controls autoplay> </audio> Des rendus différents en fonction des navigateurs :
|
||||||
| loop | Cet attribut (booléen) s'il est spécifié permet la lecture en boucle du fichier audio. | |||||||
| preload |
Cet attribut (booléen) s'il est spécifié spécifie que le fichier audio sera bien chargé et prêt à être lu lorsque la page WEB sera chargée, indépendemment si autoplay est présent.
L'attribut preload peut prendre 3 valeurs :
|
Exemple : <audio src="../BoutiqueFleuriste.mp3" controls autoplay preload="none"> </audio> |
Format des fichiers supportés
Les navigateurs ne supportent pas tous les mêmes formats audio (codec) surtout du au fait que certains d'entre eux sont soumis à brevets comme par exemple le mp3.
Au delà du MP3, il existe d'autres formats audio non soumis à brevets comme le codec libre Vorbis (.ogg) ou encore le codec AAC.
| Navigateurs | MP3 (.mp3) | Vorbis (.ogg) | ACC (.m4a ou .aac) |
|---|---|---|---|
| IE 9 et > | X | X | |
| Google Chrome | X | X | X |
| Mozilla Firefox | X |
Comme tous les navigateurs ne sont pas compatibles avec un même codec, il va falloir donner à la balise audio la possibilité d'en décoder plusieurs. Deux suffiront pour permettre l'accés aux différents navigateurs : mp3 et vorbis.
Pour celà il va falloir utiliser la balise audio de la manière suivante :
<audio [attributs][attributs][attributs]>
<source src= "URL fichier audio.mp3">
<source src= "URL fichier audio.ogg">
</audio>
La lecture des sources étant séquentielle, si un navigateur arrive à lire le format MP3 alors il s'arrête sur la première ligne. Si au contraire le navigateur ne supporte pas le format mp3, alors il passe à la source suivante.
Comme le MP3 est le codec le plus supporté, il est logique de le mettre en premier.
Cas d'incompatibilité
Il peut arriver que le navigateur ne puisse décoder aucune des sources proposées, ou qu'il ne comprenne pas la balise audio HTML5. Dans ce cas, il est possible de rajouter dans la balise audio et après les déclarations des sources, une information particulière, des balises HTML, un lecteur de type Flash ou du code Javascript que l'on peut déclarer de la manière suivante :
<audio [attributs][attributs][attributs]>
<source src= "URL fichier audio.mp3">
<source src= "URL fichier audio.ogg">
<!-- Contenu alternatif si élément audio ou formats non supportés dans le navigateur: -->
<a href="#">Votre navigateur ne supporte pas ce format.<br />Télécharger <cite> cet interview directement sur le site</cite> au format mp3</a>
</audio>
Conclusions
Celà semble trés simple d'utilisation sauf que vous devait prévoir les mêmes fichiers aux formats différents pour pouvoir être lus par les différents navigateurs existants.
Exemple complet incluant une possibilité de repli dans les cas non compatibles HTML5
La balise <video>
Généralités
Du point de vue du contenu la balise vidéo est strictement équivalente à la balise audio. Les remaques concernant les formats des fichiers à utiliser ainsi que les cas d'incompatibilité signalés pour la balise audio sont applicables à la balises vidéo
Pour insérer un fichier video dans une page WEB, il suffit d’insérer les lignes suivantes dans une page HTML5 :
<video src="URL fichier video">
</video>
et d'y ajouter un ensemble de d'attributs permettant d'ajouter quelques fonctionnalités, pour aboutir à la syntaxe générale suivante :
<video src="URL fichier video" [attributs] [attributs] [attributs]>
</video>
Attributs spécifiques de la balise vidéo
| Attributs | Descriptions | Exemples |
|---|---|---|
| autoplay, autobuffer, controls, loop, preload, src | Ces attributs ont les mêmes fonctions que ceux décrits pour la balise audio. | |
| height | Cet attribut spécifie la hauteur de la zone d'affichage vidéo en pixels. |
Exemple : <audio src="../video.ogg" controls autoplay height="200"> </audio> |
| poster | URL d'une image présentée lorsque la vidéo n'est pas en cours de lecture. |
Exemple : <audio src="../video.ogg" controls autoplay height="200" poster="URL monImage"> </audio> |
| width | Cet attribut spécifie la largeur de la zone d'affichage vidéo en pixels. |
Format des fichiers supportés
|
Pour la même raison que pour la balise audio, tous les navigateurs n'étant pas compatibles avec un même codec, il va falloir donner à la balise vidéo la possibilité d'en décoder plusieurs. Deux suffiront pour permettre l'accés aux différents navigateurs : mp4 et ogg.
Pour celà il va falloir utiliser la balise audio de la manière ci-contre.
Toujours pour la même raison que pour la balise audio la lecture des sources étant séquentielle, si un navigateur arrive à lire le format MP4 alors il s'arrête sur la première ligne. Si au contraire le navigateur ne supporte pas le format mp4, alors il passe à la source suivante. |
|
Exemple
Les éléments et attributs devenus obsolètes
- frame, frameset, noframes (jugés néfastes à l'utilisabilité et l'accessibilité)
- acronym disparaît au profit de <abbr>
- accesskey (dans <a>, <area>, <button>, <input>, <label>, <legend> et <textarea>)
- longdesc (dans <img> et <iframe>)
- name (dans <img>, <form> et <a>)
- language (dans <script>)
- summary (dans <table>)
- scope (dans <td> de <table>
- menu
- basefont, big, center, font, s, strike, tt, u, etc...
Application au projet de site web
-
Intégration d'un petit message de bienvenue sur le site "La Boutique du Fleuriste" qui se déclenchera lors de l'accès à la page d'accueil.
Les fichiers son son de type mp3 et ogg et nous utiliserons la balise <audio> telle que décrite ci dessus. Les fichiers son se trouvent dans le sous répertoire Audio et se nomment "BoutiqueFleuriste.mp3" et "BoutiqueFleuriste.ogg". - Faire le ménage des balises pouvant être obsolètes.
Correction
Voici le résultat et le code
