diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:36:08 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:36:08 +0100 |
commit | 39f2114f9797eb51994966c6bb8ff1814c9a4da8 (patch) | |
tree | 66dbd9c921f56e440f8816ed29ac23682a1ac4ef /files/fr/web/html | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.tar.gz translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.tar.bz2 translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.zip |
unslug fr: move
Diffstat (limited to 'files/fr/web/html')
-rw-r--r-- | files/fr/web/html/applying_color/index.html (renamed from files/fr/web/html/appliquer_des_couleurs/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/attributes/autocomplete/index.html (renamed from files/fr/web/html/attributs/autocomplete/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/attributes/crossorigin/index.html (renamed from files/fr/web/html/reglages_des_attributs_cors/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/attributes/index.html (renamed from files/fr/web/html/attributs/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/attributes/pattern/index.html (renamed from files/fr/web/html/attributs/pattern/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/attributs_universels/dropzone/index.html | 48 | ||||
-rw-r--r-- | files/fr/web/html/block-level_elements/index.html (renamed from files/fr/web/html/éléments_en_bloc/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/contenu_editable/index.html | 36 | ||||
-rw-r--r-- | files/fr/web/html/cors_enabled_image/index.html (renamed from files/fr/web/html/images_avec_le_contrôle_d_accès_http/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/date_and_time_formats/index.html (renamed from files/fr/web/html/formats_date_heure_html/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/element/command/index.html | 117 | ||||
-rw-r--r-- | files/fr/web/html/element/element/index.html | 73 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/accesskey/index.html (renamed from files/fr/web/html/attributs_universels/accesskey/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/autocapitalize/index.html (renamed from files/fr/web/html/attributs_universels/autocapitalize/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/class/index.html (renamed from files/fr/web/html/attributs_universels/class/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/contenteditable/index.html (renamed from files/fr/web/html/attributs_universels/contenteditable/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/contextmenu/index.html (renamed from files/fr/web/html/attributs_universels/contextmenu/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/data-_star_/index.html (renamed from files/fr/web/html/attributs_universels/data-_star_/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/dir/index.html (renamed from files/fr/web/html/attributs_universels/dir/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/draggable/index.html (renamed from files/fr/web/html/attributs_universels/draggable/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/hidden/index.html (renamed from files/fr/web/html/attributs_universels/hidden/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/id/index.html (renamed from files/fr/web/html/attributs_universels/id/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/index.html (renamed from files/fr/web/html/attributs_universels/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/inputmode/index.html (renamed from files/fr/web/html/attributs_universels/inputmode/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/is/index.html (renamed from files/fr/web/html/attributs_universels/is/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/itemid/index.html (renamed from files/fr/web/html/attributs_universels/itemid/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/itemprop/index.html (renamed from files/fr/web/html/attributs_universels/itemprop/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/itemref/index.html (renamed from files/fr/web/html/attributs_universels/itemref/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/itemscope/index.html (renamed from files/fr/web/html/attributs_universels/itemscope/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/itemtype/index.html (renamed from files/fr/web/html/attributs_universels/itemtype/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/lang/index.html (renamed from files/fr/web/html/attributs_universels/lang/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/slot/index.html (renamed from files/fr/web/html/attributs_universels/slot/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/spellcheck/index.html (renamed from files/fr/web/html/attributs_universels/spellcheck/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/style/index.html (renamed from files/fr/web/html/attributs_universels/style/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/tabindex/index.html (renamed from files/fr/web/html/attributs_universels/tabindex/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/title/index.html (renamed from files/fr/web/html/attributs_universels/title/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/translate/index.html (renamed from files/fr/web/html/attributs_universels/translate/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/x-ms-acceleratorkey/index.html (renamed from files/fr/web/html/attributs_universels/x-ms-acceleratorkey/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/global_attributes/x-ms-format-detection/index.html (renamed from files/fr/web/html/attributs_universels/x-ms-format-detection/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/inline_elements/index.html (renamed from files/fr/web/html/éléments_en_ligne/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/introduction_to_html5/index.html | 40 | ||||
-rw-r--r-- | files/fr/web/html/link_types/index.html (renamed from files/fr/web/html/types_de_lien/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/microdata/index.html (renamed from files/fr/web/html/microdonnées/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/optimizing_your_pages_for_speculative_parsing/index.html | 36 | ||||
-rw-r--r-- | files/fr/web/html/preloading_content/index.html (renamed from files/fr/web/html/précharger_du_contenu/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/sections_and_outlines_of_an_html5_document/index.html | 375 | ||||
-rw-r--r-- | files/fr/web/html/using_the_application_cache/index.html (renamed from files/fr/web/html/utiliser_application_cache/index.html) | 0 | ||||
-rw-r--r-- | files/fr/web/html/utilisation_d'audio_et_video_en_html5/index.html | 245 | ||||
-rw-r--r-- | files/fr/web/html/utiliser_dash_avec_les_vidéos_en_html/index.html | 103 |
49 files changed, 0 insertions, 1073 deletions
diff --git a/files/fr/web/html/appliquer_des_couleurs/index.html b/files/fr/web/html/applying_color/index.html index 58015bad66..58015bad66 100644 --- a/files/fr/web/html/appliquer_des_couleurs/index.html +++ b/files/fr/web/html/applying_color/index.html diff --git a/files/fr/web/html/attributs/autocomplete/index.html b/files/fr/web/html/attributes/autocomplete/index.html index fca919718d..fca919718d 100644 --- a/files/fr/web/html/attributs/autocomplete/index.html +++ b/files/fr/web/html/attributes/autocomplete/index.html diff --git a/files/fr/web/html/reglages_des_attributs_cors/index.html b/files/fr/web/html/attributes/crossorigin/index.html index ebb63f97f5..ebb63f97f5 100644 --- a/files/fr/web/html/reglages_des_attributs_cors/index.html +++ b/files/fr/web/html/attributes/crossorigin/index.html diff --git a/files/fr/web/html/attributs/index.html b/files/fr/web/html/attributes/index.html index 1b1c140c4e..1b1c140c4e 100644 --- a/files/fr/web/html/attributs/index.html +++ b/files/fr/web/html/attributes/index.html diff --git a/files/fr/web/html/attributs/pattern/index.html b/files/fr/web/html/attributes/pattern/index.html index 556f50aca9..556f50aca9 100644 --- a/files/fr/web/html/attributs/pattern/index.html +++ b/files/fr/web/html/attributes/pattern/index.html diff --git a/files/fr/web/html/attributs_universels/dropzone/index.html b/files/fr/web/html/attributs_universels/dropzone/index.html deleted file mode 100644 index e645e30973..0000000000 --- a/files/fr/web/html/attributs_universels/dropzone/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: dropzone -slug: Web/HTML/Attributs_universels/dropzone -tags: - - Attribut universel - - HTML - - Obsolete - - Reference -translation_of: Web/HTML/Global_attributes/dropzone ---- -<div>{{HTMLSidebar("Global_attributes")}} {{deprecated_header}}</div> - -<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>dropzone</strong></code> est un attribut à valeur contrainte qui indique le type de contenu qui peut être déposé sur un élément, il est utilisé avec l'<a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">API <em>Drag & Drop</em></a>. Les valeurs autorisées pour cet attribut sont :</p> - -<ul> - <li><code>copy</code> qui indique que déposer un élément glissé créera une copie de celui-ci</li> - <li><code>move</code> qui indique qu'un élément qui a été glissé sera déplacé vers son nouvel emplacement</li> - <li><code>link</code> qui crée un lien vers les données déplacées</li> -</ul> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Dérivée de {{SpecName('HTML WHATWG')}}, définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<p>{{Compat("html.global_attributes.dropzone")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> -</ul> diff --git a/files/fr/web/html/éléments_en_bloc/index.html b/files/fr/web/html/block-level_elements/index.html index c099de574f..c099de574f 100644 --- a/files/fr/web/html/éléments_en_bloc/index.html +++ b/files/fr/web/html/block-level_elements/index.html diff --git a/files/fr/web/html/contenu_editable/index.html b/files/fr/web/html/contenu_editable/index.html deleted file mode 100644 index 01e1691ed1..0000000000 --- a/files/fr/web/html/contenu_editable/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Contenu éditable -slug: Web/HTML/Contenu_editable -translation_of: Web/Guide/HTML/Editable_content ---- -<h2 id="Introduction">Introduction</h2> -<p>Chaque élément du HTML5 peut être éditable. Cette fonctionnalité a été introduite longtemps auparavant mais a maintenant été standarisée avec <a class="external" href="http://www.whatwg.org/" title="http://www.whatwg.org/">WHATWG</a> (<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#contenteditable" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#contenteditable">voir la spécification HTML actuelle</a>). Avec des gestionnaires d'événements JavaScript, vous pouvez transformer votre page Web en un éditeur de texte, complet et rapide.</p> -<h2 id="Compatibilité">Compatibilité</h2> -<p>Le contenu éditable est entièrement compatible avec les navigateurs actuels :</p> -<ul> - <li>Firefox 3.5+</li> - <li>Chrome 6.0+</li> - <li>Internet Explorer 6.0+</li> - <li>Safari 3.2+</li> - <li>Opera 8+</li> - <li>iOS Safari 5.0+</li> - <li>Android Browser 3.0+</li> -</ul> -<p>Ce n'est pas encore supporté par Opera Mini et Opera Mobile.</p> -<h2 id="Comment_ça_marche">Comment ça marche ?</h2> -<p>Fixez l'attribut <code>contenteditable</code> à <code>true</code> dans votre élément HTML. Ça peut être fait dans quasiment tous les éléments HTML.</p> -<h2 id="Exemples">Exemples</h2> -<p>Un exemple simple :</p> -<pre><!DOCTYPE html> -<html> - <body> - <div contenteditable="true"> - Ce texte peut être édité par l'utilisateur. - </div> - </body> -</html> </pre> -<p>Vous pouvez observer un exemple concret intégrant JavaScript utilisant LocalStorage <a class="external" href="http://html5demos.com/contenteditable" title="http://html5demos.com/contenteditable">ici</a>. Le code source est disponible <a href="http://html5demos.com/contenteditable#view-source" title="http://html5demos.com/contenteditable#view-source">ici</a>.</p> -<h2 id="Voir_aussi">Voir aussi</h2> -<p><a href="/fr/docs/Midas" title="en/Midas">Comment interagir avec le contenu </a>(style proche de l'ancienne API Internet Explorer) ou encore <a href="/fr/docs/Rich-Text_Editing_in_Mozilla" title="en/rich-text editing in mozilla">ici</a>.</p> -<div> - {{ languages({ "ja": "ja/HTML/Content_Editable", "zh-cn": "zh-cn/HTML/Content_Editable" }) }}</div> diff --git a/files/fr/web/html/images_avec_le_contrôle_d_accès_http/index.html b/files/fr/web/html/cors_enabled_image/index.html index e0f92b24c7..e0f92b24c7 100644 --- a/files/fr/web/html/images_avec_le_contrôle_d_accès_http/index.html +++ b/files/fr/web/html/cors_enabled_image/index.html diff --git a/files/fr/web/html/formats_date_heure_html/index.html b/files/fr/web/html/date_and_time_formats/index.html index f9da6c5f01..f9da6c5f01 100644 --- a/files/fr/web/html/formats_date_heure_html/index.html +++ b/files/fr/web/html/date_and_time_formats/index.html diff --git a/files/fr/web/html/element/command/index.html b/files/fr/web/html/element/command/index.html deleted file mode 100644 index d5bdf50924..0000000000 --- a/files/fr/web/html/element/command/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: '<command> : l''élément de commande' -slug: Web/HTML/Element/command -tags: - - Element - - HTML - - Obsolete - - Reference -translation_of: Web/HTML/Element/command ---- -<div>{{obsolete_header}}{{HTMLRef}}</div> - -<p>L'élément HTML <strong><code><command></code></strong> représente une commande qui peut être lancée par l'utilisateur. Ces commandes font généralement partie d'un menu contextuel ou d'une barre d'outils mais on peut les exécuter n'importe où sur la page.</p> - -<div class="note"> -<p><strong>Note :</strong> L'élément <code><command></code> est inclus dans la spécification du W3C mais pas dans celle du WHATWG. Par ailleurs, à l'heure actuelle, aucun navigateur ne prend en charge cet élément.</p> -</div> - -<h2 id="Attributes">Attributes</h2> - -<p>Comme pour tous les éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> sur cet élément.</p> - -<dl> - <dt>{{htmlattrdef("checked")}}</dt> - <dd>Cet attribut indique que la commande est sélectionnée. Il ne doit pas être utilisé si l'attribut <code>type</code> ne vaut pas <code>checkbox</code> ou <code>radio</code>.</dd> - <dt>{{htmlattrdef("disabled")}}</dt> - <dd>Cet attribut indique que la commande n'est pas disponible.</dd> - <dt>{{htmlattrdef("icon")}}</dt> - <dd>Cet attribut fournit une image qui représente la commande.</dd> - <dt>{{htmlattrdef("label")}}</dt> - <dd>Cet attribut indique le nom de la commande telle qu'elle est affichée à l'utilisateur.</dd> - <dt>{{htmlattrdef("radiogroup")}}</dt> - <dd>Cet attribut indique le nom du groupe de commandes auquel appartient la commande lorsque l'attribut <code>type</code> vaut <code>radio</code> le groupe sera activé lorsque la commande sera activée. Cet attribut ne doit pas être utilisé lorsque l'attribut <code>type</code> ne vaut pas <code>radio</code>.</dd> - <dt>{{htmlattrdef("type")}}</dt> - <dd>Cet attribut à valeur contrainte indique le type de commande. On peut utiliser une des trois valeurs . - <ul> - <li> - <p><code>command</code> (le type par défaut) indique une commande normale.</p> - </li> - <li> - <p><code>checkbox</code> indique que la commande peut être activée grâce à une case à cocher.</p> - </li> - <li> - <p><code>radio</code> indique que la commande peut être activée grâce à un bouton radio.</p> - </li> - </ul> - </dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><command type="command" label="Save" - icon="icons/save.png" onclick="save()"> -</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples","200","100")}}</p> - -<h2 id="Résumé_technique">Résumé technique</h2> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th> - <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_m%C3%A9ta-donn%C3%A9es">contenu de méta-données</a>.</td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td>Aucun, cet élément est un élément vide.</td> - </tr> - <tr> - <th scope="row">Omission de balises</th> - <td>La balise de début est obligatoire et la balise de fin est interdite car c'est un élément vide.</td> - </tr> - <tr> - <th scope="row">Éléments parents autorisés</th> - <td>{{HTMLElement("colgroup")}} uniquement bien que celui-ci puisse être défini implicitement car sa balise de début n'est pas obligatoire. L'élément {{HTMLElement("colgroup")}} ne doit pas avoir d'élément fils {{HTMLElement("span")}}.</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLCommandElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#commands')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'semantics.html#the-command-element', '<command>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("html.elements.command")}}</p> diff --git a/files/fr/web/html/element/element/index.html b/files/fr/web/html/element/element/index.html deleted file mode 100644 index 7b2a731677..0000000000 --- a/files/fr/web/html/element/element/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: '<element> : l''élément pour les éléments personnalisés (obsolète)' -slug: Web/HTML/Element/element -tags: - - Element - - HTML - - Obsolete - - Reference - - Web -translation_of: Web/HTML/Element/element ---- -<div>{{HTMLRef}}{{obsolete_header}}</div> - -<p>L'élément HTML <strong><code><element></code></strong> était conçu pour être utilisé afin de définir des éléments DOM personnalisés, il a été retiré de la spécification. Il a été retiré en faveur d'outils JavaScript qui permettront de créer de nouveaux éléments personnalisés, par exemple avec les Web Components.</p> - -<div class="warning"> -<p><strong>Attention !</strong> Cet élément a été retiré de la spécification. Pour plus d'informations, se référer à cette <a href="https://lists.w3.org/Archives/Public/public-webapps/2013JulSep/0287.html">note</a>.</p> -</div> - -<h2 id="Attributs">Attributs</h2> - -<p>On peut employer <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> sur cet élément.</p> - -<h2 id="Résumé_technique">Résumé technique</h2> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu" title="HTML/Content_categories">Catégories de contenu</a></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Modèle_de_contenu_transparent">Contenu transparent</a>.</td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td>Indéfini.</td> - </tr> - <tr> - <th scope="row">Omission de balises</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Éléments parents autorisés</th> - <td>Indéfini.</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Spécifications">Spécifications</h2> - -<p>Cet élément faisait actuellement partie d'un brouillon de spécification, <em><a href="https://w3c.github.io/webcomponents/spec/custom/">Custom Elements</a></em> mais a été retiré.</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("html.elements.element")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>Les éléments HTML liés aux composants web (<em>web components</em>) : - - <ul> - <li>{{HTMLElement("content")}}</li> - <li>{{HTMLElement("decorator")}}</li> - <li>{{HTMLElement("shadow")}}</li> - <li>{{HTMLElement("template")}}</li> - </ul> - </li> -</ul> diff --git a/files/fr/web/html/attributs_universels/accesskey/index.html b/files/fr/web/html/global_attributes/accesskey/index.html index e53f876ed8..e53f876ed8 100644 --- a/files/fr/web/html/attributs_universels/accesskey/index.html +++ b/files/fr/web/html/global_attributes/accesskey/index.html diff --git a/files/fr/web/html/attributs_universels/autocapitalize/index.html b/files/fr/web/html/global_attributes/autocapitalize/index.html index 206412edde..206412edde 100644 --- a/files/fr/web/html/attributs_universels/autocapitalize/index.html +++ b/files/fr/web/html/global_attributes/autocapitalize/index.html diff --git a/files/fr/web/html/attributs_universels/class/index.html b/files/fr/web/html/global_attributes/class/index.html index 6204b6a173..6204b6a173 100644 --- a/files/fr/web/html/attributs_universels/class/index.html +++ b/files/fr/web/html/global_attributes/class/index.html diff --git a/files/fr/web/html/attributs_universels/contenteditable/index.html b/files/fr/web/html/global_attributes/contenteditable/index.html index 1f805fc490..1f805fc490 100644 --- a/files/fr/web/html/attributs_universels/contenteditable/index.html +++ b/files/fr/web/html/global_attributes/contenteditable/index.html diff --git a/files/fr/web/html/attributs_universels/contextmenu/index.html b/files/fr/web/html/global_attributes/contextmenu/index.html index 187be1f1cc..187be1f1cc 100644 --- a/files/fr/web/html/attributs_universels/contextmenu/index.html +++ b/files/fr/web/html/global_attributes/contextmenu/index.html diff --git a/files/fr/web/html/attributs_universels/data-_star_/index.html b/files/fr/web/html/global_attributes/data-_star_/index.html index d8befa7a2f..d8befa7a2f 100644 --- a/files/fr/web/html/attributs_universels/data-_star_/index.html +++ b/files/fr/web/html/global_attributes/data-_star_/index.html diff --git a/files/fr/web/html/attributs_universels/dir/index.html b/files/fr/web/html/global_attributes/dir/index.html index 5cf187f35e..5cf187f35e 100644 --- a/files/fr/web/html/attributs_universels/dir/index.html +++ b/files/fr/web/html/global_attributes/dir/index.html diff --git a/files/fr/web/html/attributs_universels/draggable/index.html b/files/fr/web/html/global_attributes/draggable/index.html index fe5d5cf514..fe5d5cf514 100644 --- a/files/fr/web/html/attributs_universels/draggable/index.html +++ b/files/fr/web/html/global_attributes/draggable/index.html diff --git a/files/fr/web/html/attributs_universels/hidden/index.html b/files/fr/web/html/global_attributes/hidden/index.html index c14d208620..c14d208620 100644 --- a/files/fr/web/html/attributs_universels/hidden/index.html +++ b/files/fr/web/html/global_attributes/hidden/index.html diff --git a/files/fr/web/html/attributs_universels/id/index.html b/files/fr/web/html/global_attributes/id/index.html index a08d5e0dce..a08d5e0dce 100644 --- a/files/fr/web/html/attributs_universels/id/index.html +++ b/files/fr/web/html/global_attributes/id/index.html diff --git a/files/fr/web/html/attributs_universels/index.html b/files/fr/web/html/global_attributes/index.html index 779e617a3d..779e617a3d 100644 --- a/files/fr/web/html/attributs_universels/index.html +++ b/files/fr/web/html/global_attributes/index.html diff --git a/files/fr/web/html/attributs_universels/inputmode/index.html b/files/fr/web/html/global_attributes/inputmode/index.html index 2babf82909..2babf82909 100644 --- a/files/fr/web/html/attributs_universels/inputmode/index.html +++ b/files/fr/web/html/global_attributes/inputmode/index.html diff --git a/files/fr/web/html/attributs_universels/is/index.html b/files/fr/web/html/global_attributes/is/index.html index e460ffc4a3..e460ffc4a3 100644 --- a/files/fr/web/html/attributs_universels/is/index.html +++ b/files/fr/web/html/global_attributes/is/index.html diff --git a/files/fr/web/html/attributs_universels/itemid/index.html b/files/fr/web/html/global_attributes/itemid/index.html index c592936a5d..c592936a5d 100644 --- a/files/fr/web/html/attributs_universels/itemid/index.html +++ b/files/fr/web/html/global_attributes/itemid/index.html diff --git a/files/fr/web/html/attributs_universels/itemprop/index.html b/files/fr/web/html/global_attributes/itemprop/index.html index 956054bb32..956054bb32 100644 --- a/files/fr/web/html/attributs_universels/itemprop/index.html +++ b/files/fr/web/html/global_attributes/itemprop/index.html diff --git a/files/fr/web/html/attributs_universels/itemref/index.html b/files/fr/web/html/global_attributes/itemref/index.html index 894df9c87c..894df9c87c 100644 --- a/files/fr/web/html/attributs_universels/itemref/index.html +++ b/files/fr/web/html/global_attributes/itemref/index.html diff --git a/files/fr/web/html/attributs_universels/itemscope/index.html b/files/fr/web/html/global_attributes/itemscope/index.html index 5e76969620..5e76969620 100644 --- a/files/fr/web/html/attributs_universels/itemscope/index.html +++ b/files/fr/web/html/global_attributes/itemscope/index.html diff --git a/files/fr/web/html/attributs_universels/itemtype/index.html b/files/fr/web/html/global_attributes/itemtype/index.html index 5d3ce08694..5d3ce08694 100644 --- a/files/fr/web/html/attributs_universels/itemtype/index.html +++ b/files/fr/web/html/global_attributes/itemtype/index.html diff --git a/files/fr/web/html/attributs_universels/lang/index.html b/files/fr/web/html/global_attributes/lang/index.html index 6a45c3ed2a..6a45c3ed2a 100644 --- a/files/fr/web/html/attributs_universels/lang/index.html +++ b/files/fr/web/html/global_attributes/lang/index.html diff --git a/files/fr/web/html/attributs_universels/slot/index.html b/files/fr/web/html/global_attributes/slot/index.html index c6b96098a0..c6b96098a0 100644 --- a/files/fr/web/html/attributs_universels/slot/index.html +++ b/files/fr/web/html/global_attributes/slot/index.html diff --git a/files/fr/web/html/attributs_universels/spellcheck/index.html b/files/fr/web/html/global_attributes/spellcheck/index.html index efc982d646..efc982d646 100644 --- a/files/fr/web/html/attributs_universels/spellcheck/index.html +++ b/files/fr/web/html/global_attributes/spellcheck/index.html diff --git a/files/fr/web/html/attributs_universels/style/index.html b/files/fr/web/html/global_attributes/style/index.html index 3da865a0e9..3da865a0e9 100644 --- a/files/fr/web/html/attributs_universels/style/index.html +++ b/files/fr/web/html/global_attributes/style/index.html diff --git a/files/fr/web/html/attributs_universels/tabindex/index.html b/files/fr/web/html/global_attributes/tabindex/index.html index 87aa27e5cc..87aa27e5cc 100644 --- a/files/fr/web/html/attributs_universels/tabindex/index.html +++ b/files/fr/web/html/global_attributes/tabindex/index.html diff --git a/files/fr/web/html/attributs_universels/title/index.html b/files/fr/web/html/global_attributes/title/index.html index 06f0feee8d..06f0feee8d 100644 --- a/files/fr/web/html/attributs_universels/title/index.html +++ b/files/fr/web/html/global_attributes/title/index.html diff --git a/files/fr/web/html/attributs_universels/translate/index.html b/files/fr/web/html/global_attributes/translate/index.html index 215800e5ff..215800e5ff 100644 --- a/files/fr/web/html/attributs_universels/translate/index.html +++ b/files/fr/web/html/global_attributes/translate/index.html diff --git a/files/fr/web/html/attributs_universels/x-ms-acceleratorkey/index.html b/files/fr/web/html/global_attributes/x-ms-acceleratorkey/index.html index f03780b703..f03780b703 100644 --- a/files/fr/web/html/attributs_universels/x-ms-acceleratorkey/index.html +++ b/files/fr/web/html/global_attributes/x-ms-acceleratorkey/index.html diff --git a/files/fr/web/html/attributs_universels/x-ms-format-detection/index.html b/files/fr/web/html/global_attributes/x-ms-format-detection/index.html index f11309e1b5..f11309e1b5 100644 --- a/files/fr/web/html/attributs_universels/x-ms-format-detection/index.html +++ b/files/fr/web/html/global_attributes/x-ms-format-detection/index.html diff --git a/files/fr/web/html/éléments_en_ligne/index.html b/files/fr/web/html/inline_elements/index.html index fb9207dd72..fb9207dd72 100644 --- a/files/fr/web/html/éléments_en_ligne/index.html +++ b/files/fr/web/html/inline_elements/index.html diff --git a/files/fr/web/html/introduction_to_html5/index.html b/files/fr/web/html/introduction_to_html5/index.html deleted file mode 100644 index 51eaf4850e..0000000000 --- a/files/fr/web/html/introduction_to_html5/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Introduction à HTML5 -slug: Web/HTML/Introduction_to_HTML5 -tags: - - HTML - - HTML5 -translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 ---- -<p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</a> est la nouvelle version du standard HTML. Il apporte non seulement l'utilisation de média riches (vidéo, audio, SVG, etc.) mais aussi des fonctionnalités permettant le développement d'applications web bien plus attractives et interactives.</p> - -<p>Étant donné que HTML5 est encore en cours d'évolution, certains navigateurs ne supportent pas encore toutes les fonctionnalités offertes par ce nouveau standard. Ceci dit Gecko (et donc Firefox) supporte déjà dans sa version 1.8.1 une majorité des possibilités de HTML5. Vous trouverez ce que Gecko supporte déjà en visitant cette page : <a href="/fr/HTML/HTML5" title="fr/HTML/HTML5">HTML5</a>. Pour obtenir davantage d'informations sur le support de HTML5 par de multiples navigateurs, jetez un coup d'œil sur le site<a class="external" href="http://caniuse.com/#cats=HTML5" title="http://caniuse.com/#cats=HTML5"> CanIUse</a> .</p> - -<h2 id="Indiquer_que_le_document_contient_du_HTML5_grâce_au_doctype_HTML5">Indiquer que le document contient du HTML5 grâce au doctype HTML5</h2> - -<p>La doctype HTML5 est très simple, il s'agit simplement de ceci :</p> - -<pre class="brush: html"><!DOCTYPE html> -</pre> - -<p>Cela permet au navigateur ne supportant pas encore le HTML5 de passer en mode standard et ainsi d'ignorer les balises inconnues.</p> - -<p>Il est beaucoup plus simple que les précédents doctypes, et plus court. Il est ainsi plus facile à retenir et réduit le nombre d'octets devant être téléchargés.</p> - -<h2 id="Déclarer_l'encodage_de_caractères_avec_<meta_charset>">Déclarer l'encodage de caractères avec <code><meta charset></code></h2> - -<p>La première chose que l'on fait d'habitude sur une page web c'est déclarer l'encodage de caractère utilisé. Dans les versions précédentes de HTML, ceci était fait en utilisant le très complexe élément {{HTMLElement("meta")}}. Avec HTML5, c'est beaucoup plus simple :</p> - -<pre class="brush:html;"><meta charset="UTF-8"></pre> - -<p>Placez ceci au tout début de votre élément {{HTMLElement("head") }}, car certains navigateurs recommencent leur interprétation des documents HTML, si l'encodage de caractère déclaré est différent de ce qu'ils avaient anticipé. De plus, il est recommandé d'utiliser UTF-8, car il simplifie la gestion des caractères dans les documents utilisant plusieurs graphies.</p> - -<p>Notez que HTML5 limite les encodages autorisés à ceux qui sont compatibles avec ASCII et utilisant au moins 8 bits. Ceci pour améliorer la sécurité et éviter certains types d'attaques.</p> - -<h2 id="Utiliser_le_nouveau_parser_HTML5">Utiliser le nouveau parser HTML5</h2> - -<p>Les nouvelles règles d'analyse du HTML5, celles qui s'occupent de la sémantique du code, ont été renforcées. Jusqu'à l'arrivée du HTML5, seules les règles pour un code valide avaient été définies. À la moindre erreur dans le code (la plupart des sites Web en comportent au moins une), le comportement à adopter était laissé à la libre interprétation des navigateurs, qui ne choisissaient pas toujours le même. Maintenant, lorsque des erreurs sont rencontrées dans le code, tous les navigateurs implémentant HTML5 doivent se comporter de la même façon.</p> - -<p>Cette obligation aide les développeurs Web. Bien que tous les nouveaux navigateurs utilisent maintenant les règles d'analyse d'HTML5, des navigateurs ne respectant pas HTML5 sont encore utilisés. Il est toujours fortement recommandé d'écrire un code valide, car il est plus facile à lire et à maintenir, et diminue les risques d'incompatibilité avec les vieux navigateurs.</p> - -<p>Ne vous inquiétez pas, vous n'avez rien à changer sur votre site Web, les développeurs des navigateurs ont déjà fait le nécessaire !</p> diff --git a/files/fr/web/html/types_de_lien/index.html b/files/fr/web/html/link_types/index.html index f8134a8fe7..f8134a8fe7 100644 --- a/files/fr/web/html/types_de_lien/index.html +++ b/files/fr/web/html/link_types/index.html diff --git a/files/fr/web/html/microdonnées/index.html b/files/fr/web/html/microdata/index.html index 66230edd72..66230edd72 100644 --- a/files/fr/web/html/microdonnées/index.html +++ b/files/fr/web/html/microdata/index.html diff --git a/files/fr/web/html/optimizing_your_pages_for_speculative_parsing/index.html b/files/fr/web/html/optimizing_your_pages_for_speculative_parsing/index.html deleted file mode 100644 index 15342d7577..0000000000 --- a/files/fr/web/html/optimizing_your_pages_for_speculative_parsing/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Optimisation des pages pour l'analyse spéculative -slug: Web/HTML/Optimizing_your_pages_for_speculative_parsing -tags: - - Avancé - - Cookies - - Développement Web - - HTML - - HTML5 - - NeedsUpdate -translation_of: Glossary/speculative_parsing ---- -<p><span id="result_box" lang="fr"><span>Traditionnellement dans les navigateurs, l'analyseur HTML a été exécuté sur le fil principal et a été bloqué après une balise <code></script></code> jusqu'à ce que le script ait été extrait du réseau et exécuté.</span> <span>L'analyseur HTML dans Firefox 4 et versions ultérieures prend en charge l'analyse spéculative sur le fil principal.</span> <span>Il analyse "en avant" pendant que les scripts sont téléchargés et exécutés.</span> <span>Comme dans Firefox 3.5 et 3.6, l'analyseur HTML lance des chargements spéculatifs pour les scripts, les feuilles de style et les images qu'il trouve à l'avance dans le flux.</span> <span>Toutefois, dans Firefox 4 et versions ultérieures, l'analyseur HTML exécute également l'algorithme de construction de l'arborescence HTML de manière spéculative.</span> <span>L'avantage est que lorsqu'une spéculation réussit, il n'est pas nécessaire d'analyser la partie du fichier entrant qui a déjà été analysée pour les scripts, les feuilles de style et les images.</span> <span>L'inconvénient est qu'il y a plus de travail perdu quand la spéculation échoue.</span><br> - <br> - <span>Ce document vous aide à éviter le genre de choses qui font échouer la spéculation et ralentir le chargement de votre page.</span></span></p> - -<h2 id="Réussir_les_chargements_spéculatifs">Réussir les chargements spéculatifs</h2> - -<p><span id="result_box" lang="fr"><span>Il n'y a qu'une seule règle pour réussir les chargements spéculatifs de scripts liés, de feuilles de style et d'images :</span></span></p> - -<ul> - <li>Si vous utilisez un élément <code><base></code> p<span id="result_box" lang="fr"><span>our remplacer l'URI de base de votre page, placez l'élément dans la partie non-scriptée du document.</span></span> Ne l'ajoutez pas par <code>document.write()</code> ou <code>document.createElement()</code>.</li> -</ul> - -<h2 id="Éviter_de_perdre_la_sortie_du_constructeur_d'arborescence">Éviter de perdre la sortie du constructeur d'arborescence</h2> - -<p>L'analyse spéculative du constructeur d'arborescence échoue quand <code>document.write()</code> change l'état du constructeur d'arborescence, au point que l'état spéculatif après la balise <code></script></code> <span class="short_text" id="result_box" lang="fr"><span>ne tient plus lorsque tout le contenu inséré par</span></span> <code>document.write()</code> a été analysé. <span id="result_box" lang="fr"><span>Cependant, seules les utilisations inhabituelles de</span></span> <code>document.write()</code> entraînent ce genre de problèmes. Ici, les choses à éviter :</p> - -<ul> - <li><span class="short_text" id="result_box" lang="fr"><span>n'écrivez pas d'arborescences déséquilibrées.</span></span> <code><script>document.write("<div>");</script></code> est mauvais. <code><script>document.write("<div></div>");</script></code> est valide.</li> - <li>n'écrivez pas de balisage infini. <code><script>document.write("<div></div");</script></code> est mauvais.</li> - <li><span id="result_box" lang="fr"><span>ne terminez pas votre écriture avec un retour chariot</span></span> . <code><script>document.write("Hello World!\r");</script></code> est mauvais. <code><script>document.write("Hello World!\n");</script></code> est valide.</li> - <li><span id="result_box" lang="fr"><span>notez que l'écriture de balises équilibrées peut entraîner la déduction d'autres balises de telle manière que l'écriture est finalement déséquilibrée</span></span>. Par exemple, <code><script>document.write("<div></div>");</script></code> <span id="result_box" lang="fr"><span>à l'intérieur de l'élément d'en-tête sera interprété comme</span></span> <code><script>document.write("</head><body><div></div>");</script></code> qui est déséquilibré.</li> - <li><span class="short_text" id="result_box" lang="fr"><span>ne pas formater une partie de tableau</span></span>. <code><table><script>document.write("<tr><td>Hello World!</td></tr>");</script></table></code> est mauvais. Par contre, <code><script>document.write("</code><code><table></code><code><tr><td>Hello World!</td></tr></code><code></table></code><code>");</script></code> est valide.</li> - <li><span id="result_box" lang="fr"><span>À FAIRE : document.write inclus dans d'autres éléments de formatage.</span></span></li> -</ul> diff --git a/files/fr/web/html/précharger_du_contenu/index.html b/files/fr/web/html/preloading_content/index.html index 2519577b6c..2519577b6c 100644 --- a/files/fr/web/html/précharger_du_contenu/index.html +++ b/files/fr/web/html/preloading_content/index.html diff --git a/files/fr/web/html/sections_and_outlines_of_an_html5_document/index.html b/files/fr/web/html/sections_and_outlines_of_an_html5_document/index.html deleted file mode 100644 index 319d98e927..0000000000 --- a/files/fr/web/html/sections_and_outlines_of_an_html5_document/index.html +++ /dev/null @@ -1,375 +0,0 @@ ---- -title: Structures et sections d'un document HTML5 -slug: Web/HTML/Sections_and_Outlines_of_an_HTML5_document -tags: - - Avancé - - Exemple - - Guide - - HTML - - HTML5 - - Section - - Structure - - Web -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines ---- -<p>Cette page présente la manière dont les navigateurs définissent la structure d'un document à partir de son fichier HTML.</p> - -<h2 id="Structure_et_document_outline">Structure et document outline</h2> - -<p>Le terme anglais "document outline" ou "document outlines" désigne la structure d'un document générée à partir de ses titres. Cette structure permet de fournir aux usagers une vision simplifiée du document, tel un sommaire ou une table des matières.</p> - -<p>Les technologies d'assistances telles que les lecteurs d'écran peuvent proposer à leurs usagers de parcourir le document par ce moyen. Cela leur permet d'avoir rapidement une idée du contenu de la page ou d'aller directement à la section qui les intéresse.</p> - -<p>Depuis HTML4, cette structure est générée à partir de la valeur absolue des différents titres. Un <code><h2></code> sera considéré comme un niveau hiérarchique plus bas qu'un <code><h1></code> et un niveau plus haut qu'un <code><h3></code>.</p> - -<p>L'algorithme Outline HTML5, proposait quand à lui de générer cette même structure non pas à partir des titres, mais à partir de l'imbrication des <code><section></code> entre elles. Cet algorithme n'est à l'heure actuelle implémenté par aucun navigateur ou technologie d'assistance. La partie du document le concernant est donc purement indicative.</p> - -<h2 id="Structure_dun_document_depuis_HTML4">Structure d'un document depuis HTML4</h2> - -<p>La structure d'un document, à savoir la structure sémantique de ce qui est entre <code><body></code> et <code></body></code>, est fondamentale pour la présentation de la page à l'utilisateur. HTML4 utilise la notion de sections et sous-sections d'un document pour décrire sa structure. Une section est définie par un élément de division HTML ({{HTMLElement ("div")}}) contenant des éléments de titre ({{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, {{ HTMLElement ("h3")}}, {{HTMLElement ("h4")}}, {{HTMLElement ("h5")}} ou {{HTMLElement ("h6")}}), définissant son titre. Les relations entre ces éléments HTML et la division HTML conduit à la structure du document et son schéma.</p> - -<p>Ainsi, le code suivant :</p> - -<pre class="brush: html"><code class="brush: html"> -<div class="section" id="foret-elephants"> - <h1>Les éléphants de forêt</h1> - <p>Dans cet article, nous discutons des éléphants de forêt moins connus. - … cette section continue… - <div class="subsection" id="foret-habitat"> - <h2>Habitat</h2> - <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux. - … ce paragraphe continue… - </div> -</div></code></pre> - -<p>conduit au schéma suivant :</p> - -<pre>1. Les éléphants de forêt - 1.1 Habitat -</pre> - -<p>Les éléments {{HTMLElement ("div")}} ne sont pas obligatoires pour définir une nouvelle section. La simple présence d'un élément de titre est suffisante pour impliquer une nouvelle section. Par conséquent :</p> - -<pre class="brush: html"><h1>Les éléphants de forêt</h1> - <p>Dans cette section, nous discutons des éléphants de forêt moins connus. - … cette section continue… - - <h2>Habitat</h2> - <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux. - … ce paragraphe continue… - - <h2>Régime</h2> - -<h1>Gerbilles de Mongolie</h1> -</pre> - -<p>conduit au schéma suivant :</p> - -<pre>1. Les éléphants de forêt - 1.1 Habitat - 1.2 Régime -2. Gerbilles de Mongolie</pre> - -<h2 id="Problèmes_résolus_par_HTML5">Problèmes résolus par HTML5</h2> - -<p>Le code HTML4 définit la structure d'un document, cependant son algorithme schématique implicite est très strict et conduit à de nombreux problèmes :</p> - -<ol> - <li>L'utilisation de {{HTMLElement ("div")}} pour définir les sections sémantiques, sans définir de valeurs spécifiques pour l'attribut <code>class</code>, rend impossible l'automatisation de l'algorithme (« {{HTMLElement ("div")}} fait-il partie de l'aperçu de la page ? Définit-il une section ou un paragraphe ? » ou « Ce {{HTMLElement ("div")}} est-il là uniquement pour le style ? »). En d'autres termes, la spécification HTML4 est très imprécise sur ce qui est une section et quel est son champ d'application. La génération automatique du schéma est importante, surtout pour les <a class="external" href="http://en.wikipedia.org/wiki/Assistive_technology">technologies d'assistance (en)</a> qui sont susceptibles d'adapter leur façon de présenter l'information aux utilisateurs en fonction de la structure du document. HTML5 supprime la nécessité d'éléments {{HTMLElement ("div")}} dans l'algorithme par l'introduction d'un nouvel élément, {{HTMLElement ("section")}}, l'élément HTML Section.</li> - <li>La fusion de plusieurs documents est compliquée : l'inclusion d'un sous-document dans un document principal conduit à modifier le niveau des éléments de titres HTML afin de conserver le plan du document. Ce problème est résolu dans HTML5, les éléments de section nouvellement introduits ({{HTMLElement ("article")}}, {{HTMLElement ("section")}}, {{HTMLElement ("nav")}} et {{HTMLElement ("aside")}}) sont toujours sous-sections de la plus proche section ascendante, indépendamment des sections créées par les en-têtes internes.</li> - <li>En HTML4, chaque section fait partie de la structure du document. Mais les documents ne sont pas souvent linéaires. Un document peut avoir des sections spéciales contenant des informations qui n'en font pas partie, même si elles sont liées au flux principal, comme un bloc de publicité ou une boîte explication. HTML5 introduit l'élément {{HTMLElement ("aside")}} permettant à ces sections de ne pas faire partie du plan principal.</li> - <li>Encore une fois, en HTML4, parce que chaque section fait partie de la structure du document, il n'est pas possible d'avoir des sections contenant des informations relatives non pas au document mais au site tout entier, comme des logos, des menus, une table des matières, ou des mentions légales. À cet effet, HTML5 introduit trois éléments de section spécifiques : {{HTMLElement ("nav")}} pour des collections de liens, comme une table des matières, {{HTMLElement ("footer")}} et {{HTMLElement ("header")}} pour les informations relatives au site.</li> -</ol> - -<p>Plus généralement HTML5 apporte la précision des caractéristiques de sectionnement et de position, permettant aux contours de documents à être prévisibles et utilisés par le navigateur afin d'améliorer l'expérience utilisateur.</p> - -<h2 id="Lalgorithme_Outline_HTML5">L'algorithme Outline HTML5</h2> - -<div class="warning"> -<p><strong>Important </strong>: Aucune implémentation de cet algorithme Outline HTML5 n'existe ni dans les navigateurs web ni dans les technologies d'assistance. Elle n'a jamais fait partie de la spécification finale W3C. L'algorithme <a href="https://www.w3.org/TR/html5/sections.html#outline">Outline</a> <em>ne devrait donc pas être utilisé</em> pour transmettre la structure d'un document aux utilisateurs. Il est recommandé aux auteurs d'utiliser le <a href="https://www.w3.org/TR/html5/sections.html#rank">rang</a> des titres (<code><a href="https://www.w3.org/TR/html5/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code>-<code><a href="https://www.w3.org/TR/html5/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h6</a></code>) pour transmettre la structure d'un document.</p> -</div> - -<p>Cet algorithme propose de générer la structure du document à partir de l'imbrication des sections entre elles.</p> - -<h3 id="Définir_des_sections_en_HTML5">Définir des sections en HTML5</h3> - -<p>Tout le contenu se trouvant à l'intérieur de l'élément {{HTMLElement ("body")}} est une partie d'une section. Les articles en HTML5 peuvent être imbriqués. À côté de la section principale, définie par l'élément {{HTMLElement ("body")}}, les limites de la section sont définies explicitement ou implicitement. Sections explicitement définies sont le contenu dans {{HTMLElement ("body")}}, {{HTMLElement ("section")}}, {{HTMLElement ("article")}}, {{HTMLElement ("aside")}}, {{HTMLElement ("footer")}}, {{HTMLElement ("header")}} et {{HTMLElement ("nav")}} balises.</p> - -<div class="note"> -<p>Remarque : Chaque section peut avoir sa propre hiérarchie rubrique. Par conséquent, même une section imbriquée peut avoir un {{HTMLElement ("h1")}}. Voir <a href="#D.C3.A9finir_les_ent.C3.AAte_en_HTML5" title="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5">Définition des sections en HTML5</a></p> -</div> - -<p>Prenons un exemple - ici nous avons un document avec une section de haut niveau et un pied de page défini. Dans la section de haut niveau, nous avons trois sous-sections, définies par deux éléments {{htmlelement ('section')}} et un élément {{htmlelement ('aside')}} :</p> - -<pre class="brush: html"><section> - - <h1>éléphants de forêt</h1> - - <section> - <h1>Introduction</h1> - <p>Dans cette section, nous discutons des éléphants de forêt moins connus.</p> - </section> - - <section> - <h1>Habitat</h1> - <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux.</p> - </section> - - <aside> - <p>bloc publicitaire</p> - </aside> - -</section> - -<footer> - <p>(c) 2010 La société Exemple</p> -</footer> -</pre> - -<p>Cela conduit à la structure suivante :</p> - -<pre>1. Les éléphants de forêt - 1.1 Introduction - 1.2 Habitat - 1.3 Section (aside)</pre> - -<h3 id="Définition_des_en-têtes_en_HTML5">Définition des en-têtes en HTML5</h3> - -<p>Bien que les éléments de sectionnement HTML définissent la structure du document, un plan a également besoin de titres pour être utile. La règle de base est simple : le premier élément de titre HTML (l'un des {{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, {{HTMLElement ("h3")}}, {{HTMLElement ("h4")}}, {{HTMLElement ("h5")}}, {{HTMLElement ("h6")}}) définit le titre de la section courante.</p> - -<p>Les éléments de titre ont un <em>rang</em> donné par le nombre dans le nom de l'élément, où {{HTMLElement ("h1")}} a le rang <em> le plus élevé</em> et {{HTMLElement ("h6")}} a le rang <em>le plus bas</em>. Le classement relatif ne compte que dans une section ; la structure des sections détermine le plan, et non pas le rang des titres de sections. Par exemple, ce code :</p> - -<pre class="brush: html"><section> - <h1>éléphants de forêt</h1> - - <p>Dans cette section, nous discutons des éléphants de forêt moins connus. - Cette section continue…</p> - - <section> - <h2>Habitat</h2> - - <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux. - Ce paragraphe continue…</p> - </section> -</section> - -<section> - <h3>Gerbilles de Mongolie</h3> - - <p>Dans cet article, nous discutons des célèbres gerbilles mongoles. - Cette section continue… -</section></pre> - -<p>conduit à la structure suivante :</p> - -<pre>1. Les éléphants de forêt - 1.1 Habitat -2. Gerbilles de Mongolie</pre> - -<p>Notez que le rang de l'élément titre (dans l'exemple {{HTMLElement ("h1")}} pour la première section de niveau supérieur, {{HTMLElement ("h2")}} pour la sous-section et {{HTMLElement ("h3")}} pour la seconde section de haut niveau) n'est pas important. Tout rang peut être utilisé comme en-tête d'une section explicitement définie, bien que cette pratique ne soit pas recommandée.</p> - -<h3 id="Découpage_implicite">Découpage implicite</h3> - -<p>Parce que les éléments de sectionnement HTML5 ne sont pas obligatoires pour définir la structure, pour conserver la compatibilité avec le Web existant dominé par HTML4, il existe un moyen de définir des sections sans eux. C'est ce qu'on appelle le <em>découpage implicite</em>.</p> - -<p>Les éléments de titre HTML ({{HTMLElement ("h1")}} à {{HTMLElement ("h6")}}) définissent une nouvelle section, implicite, quand ils ne sont pas le premier en-tête de leurs sections ascendantes, explicites. La façon dont cette section implicite est positionnée dans la structure est définie par son rang par rapport au titre précédent dans leur section ascendante. Si elle est d'un rang inférieur à l'en-tête précédent, il ouvre une sous-section implicite de la section. Ce code :</p> - -<pre class="brush: html"><section> - <h1>éléphants de forêt</h1> - - <p>Dans cette section, nous discutons des éléphants de forêt moins connus. - Cette section continue… - - <h3 class="implicit subsection">Habitat</h3> - - <p>Les éléphants de forêt <p> ne vivent pas dans les arbres mais parmi eux. - Ce paragraphe continue… -</section></pre> - -<p>conduit à la structure suivante :</p> - -<pre>1. Les éléphants de forêt - 1.1 Habitat <em>(implicitement défini par l'élément h3)</em></pre> - -<p>Si elle est de même rang que le titre précédent, elle ferme la section précédente (qui peut avoir été explicite !) et en ouvre une nouvelle implicite de même niveau :</p> - -<pre class="brush: html"><section> - <h1>Éléphants de forêt</h1> - - <p>Dans cette section, nous discutons des éléphants de forêt moins connus. - Cette section continue… - - <h1 class="implicit section">Gerbilles de Mongolie</h1> - - <p>Les gerbilles de Mongolie sont mignons petits mammifères. - Cette section continue… -</section></pre> - -<p>conduit à la structure suivante :</p> - -<pre>1. Les éléphants de forêt -2. Gerbilles de Mongolie <em>(implicitement défini par l'élément h1, qui a fermé la section précédente dans le même temps)</em></pre> - -<p>Si elle est d'un rang supérieur au titre précédent, elle ferme la section précédente et en ouvre une nouvelle implicite de niveau supérieur :</p> - -<pre class="brush: html"><body> - <h1>Mammifères</h1> - - <h2>Baleines</h2> - - <p>Dans cette section, nous discutons de baleines géantes. - Cette section continue… - - <section> - <h3>Éléphants de forêt</h3> - - <p>Dans cet article, nous discutons des éléphants de forêt moins connus. - Cette section continue… - - <h3>Gerbilles de Mongolie</h3> - - <p>Hordes de gerbilles ont étalé leur gamme bien au-delà Mongolie. - Ce paragraphe continue… - - <h2>Reptiles</h2> - - <p>Reptiles sont des animaux à sang froid. - Ce paragraphe continue… - </section> -</body></pre> - -<p>conduit à la structure suivante :</p> - -<pre>1. Mammifères - 1.1 Baleines (défini implicitement par l'élément h2) - 1.2 éléphants de forêt (défini explicitement par l'élément section) - 1.3 Gerbilles de Mongolie (défini implicitement par l'élément h3 qui ferme la section précédente en même temps) -2. Reptiles (défini implicitement par l'élément h2 qui ferme la section précédente en même temps) -</pre> - -<p>Ce n'est pas la structure à laquelle on pourrait s'attendre en jetant un coup d'œil rapide sur le balisage. Pour rendre votre balisage humainement compréhensible, il est bon d'utiliser des balises explicites pour ouvrir et fermer les sections, et de faire correspondre les niveaux des titres avec le niveau d'imbrication désiré de la section. Toutefois, cela n'est pas exigé par la spécification HTML5. Si vous trouvez que les navigateurs rendent de façon inattendue le plan de votre document, vérifiez que vos sections sont implicitement fermées par des éléments d'en-tête.</p> - -<p>Une exception à cette règle générale – qui veut que rang du titre devrait correspondre au niveau d'imbrication de la section – concerne les sections qui peuvent être réutilisées dans d'autres documents. Par exemple, une section peut être stockée dans un système de gestion de contenu et assemblée dans des documents au moment de l'exécution. Dans ce cas, une bonne pratique consiste à commencer par {{HTMLElement ("h1")}} pour le titre de niveau supérieur de la section réutilisable. Le niveau d'imbrication de la section réutilisable sera déterminé par la hiérarchie des sections du document dans lequel elle apparaît. Les balises de section explicites sont toujours utiles dans ce cas.</p> - -<h3 id="Racines_de_sectionnement">Racines de sectionnement</h3> - -<p>Une racine de sectionnement est un élément HTML qui peut avoir son propre plan, mais les sections et les titres qu'elle contient ne contribuent pas à la structure de son ascendant. À côté de {{HTMLElement ("body")}}, qui est la racine logique de sectionnement d'un document, il y a souvent des éléments qui introduisent du contenu externe à la page : {{HTMLElement ("blockquote")}}, {{HTMLElement ("details")}}, {{HTMLElement ("fieldset")}}, {{HTMLElement ("figure")}} et {{HTMLElement ("td")}}.</p> - -<h4 id="Exemple">Exemple</h4> - -<pre class="brush: html"><section> - <h1>Éléphants de forêt</h1> - <section> - <h2>Introduction</h2> - <p>Dans cette section, nous discutons des éléphants de forêt moins connus.</p> - </section> - <section> - <h2>Habitat</h2> - <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux. Regardons ce que les scientifiques disent dans «&nbsp;<cite> l'éléphant de forêt à Bornéo </cite>&nbsp;»&nbsp;: - <blockquote> - <h1>Bornéo</h1> - <p>L'éléphant de la forêt vie à Bornéo…</p> - </blockquote> - </section> -</section> -</pre> - -<p>Cet exemple se traduit par la structure suivante :</p> - -<pre>1. Les éléphants de forêt - 1.1 Introduction - 1.2 Habitat</pre> - -<p>Cette structure ne contient pas le plan interne à l'élément {{HTMLElement ("blockquote")}}, qui, étant une citation externe, est une racine de sectionnement et isole sa structure interne.</p> - -<h3 id="Les_sections_externes_à_la_structure">Les sections externes à la structure</h3> - -<p>HTML5 introduit deux nouveaux éléments qui permettent de définir des sections ne faisant pas partie de la structure principale d'un document Web :</p> - -<ol> - <li>L'élément HTML de section ({{HTMLElement ("aside")}}) définit une section qui, bien que liée à l'élément principal, ne fait pas partie du flux principal, comme une boîte d'information ou une publicité. Il dispose de son propre plan, mais il n'appartient pas au plan principal.</li> - <li>L'élément HTML de section ({{HTMLElement ("nav")}}) définit une section qui contient les liens de navigation. Il peut y en avoir plusieurs dans un document, par exemple, un avec des liens internes à la page, comme une table des matières, et un autre avec des liens de navigations dans le site. Ces liens ne font pas partie du flux principal et du plan, et généralement peut ne pas être initialement rendu par le lecteur d'écran et les technologies d'assistance similaires.</li> -</ol> - -<h3 id="Headers_and_Footers">Headers and Footers</h3> - -<p>HTML5 présente également deux nouveaux éléments qui peuvent être utilisés pour marquer l'en-tête et le pied de page d'une section :</p> - -<ol> - <li>L'élément HTML de titre de section ({{HTMLElement ("header")}}) définit l'en-tête d'une page, contenant généralement le logo et le nom du site et, éventuellement, un menu horizontal. Malgré son nom, il n'est pas nécessairement placé au début de la page.</li> - <li>L'élément HTML de pied de section ({{HTMLElement ("footer")}}) définit un pied-de-page, contenant généralement les mentions légales et parfois quelques liens. Malgré son nom, il n'est pas nécessairement placé dans le bas de la page.</li> -</ol> - -<p>Ceux-ci ne créent pas de nouvelles sections dans la structure, mais ils marquent le contenu dans les sections de la page.</p> - -<h2 id="Adresses_dans_les_éléments_de_sectionnement">Adresses dans les éléments de sectionnement</h2> - -<p>L'auteur d'un document veut souvent publier des informations de contact, le nom de l'auteur tel et son adresse. HTML4 le permet grâce à cet l'élément {{HTMLElement ("address")}}, qui a été prolongé en HTML5.</p> - -<p>Un document peut être fait de différentes sections de différents auteurs. Une section d'un autre auteur que celui de la page principale est définie en utilisant l'élément {{HTMLElement ("article")}}. Par conséquent, l'élément {{HTMLElement ("address")}} est désormais lié à son {{HTMLElement ("body")}} ou à l'ancêtre {{HTMLElement ("article")}} le plus proche.</p> - -<h2 id="Utilisation_des_éléments_HTML5_dans_les_navigateurs_Non-HTML5">Utilisation des éléments HTML5 dans les navigateurs Non-HTML5</h2> - -<p>Les articles et les éléments en-têtes devraient fonctionner dans la plupart des navigateurs non HTML5. Bien que non pris en charge, ils n'ont pas besoin d'une interface spéciale DOM et ils n'ont besoin que d'un style CSS spécifique comme des éléments inconnus sont aménagés comme display: inline par défaut:</p> - -<pre class="brush: css"><code class="brush: css">section, article, aside, footer, header, nav, hgroup { - display: block; -}</code></pre> - -<p>Bien sûr, le développeur web peut styliser différemment, mais gardez à l'esprit que dans un navigateur non HTML5, le style par défaut est différent de ce qui est attendu de ces éléments. Notez également que le {{HTMLElement ("time")}} élément n'a pas été inclus, car le style par défaut pour elle dans un navigateur non HTML5 est le même que celui de l'une HTML5 compatible.</p> - -<p>Cette méthode a ses limites si, comme certains navigateurs ne permettent pas de style des éléments non pris en charge. C'est le cas d'Internet Explorer (version 8 et versions antérieures), qui ont besoin d'un script spécifique pour permettre à celle-ci :</p> - -<pre class="brush: html"><!--[if lt IE 9]>; - <script> - document.createElement("header"); - document.createElement("footer"); - document.createElement("section"); - document.createElement("aside"); - document.createElement("nav"); - document.createElement("article"); - document.createElement("hgroup"); - document.createElement("time"); - </script> -<![endif]--></pre> - -<p>Ce script signifie que, dans le cas d'Internet Explorer (8 et antérieures), les scripts doivent être activés pour pouvoir afficher HTML5 et les éléments de sectionnement titres correctement. Sinon, ils ne seront pas affichés, ce qui peut être problématique, car ces éléments sont susceptibles de définir la structure de la page entière. C'est pourquoi un élément {{HTMLElement ("NoScript")}} explicite devrait être ajouté pour ce cas :</p> - -<pre class="brush: html"><noscript> - <p><strong>Attention, cette page Web nécessite que JavaScript soit activé !</strong></p> - <p>JavaScript est un langage de programmation couramment utilisé pour créer des effets intéractifs dans les navigateurs Web.</p> - <p>Malheureusement, il est désactivé dans votre navigateur. Veuillez l'activer pour afficher cette page.</p> - <p><a href="https://goo.gl/koeeaJ">Comment activer JavaScript ?</a></p> -</noscript></pre> - -<p>Cela conduit au code ci-dessous pour permettre la prise en charge des éléments de sections et d'en-têtes HTML5 dans les navigateurs non HTML5, même pour Internet Explorer (8 et antérieur), avec un retour correct pour le cas où ce dernier est configuré pour ne pas autoriser les scripts :</p> - -<pre class="brush: html"><!--[if lt IE 9]> - <script> - document.createElement("header"); - document.createElement("footer"); - document.createElement("section"); - document.createElement("aside"); - document.createElement("nav"); - document.createElement("article"); - document.createElement("hgroup"); - document.createElement ("time"); - </script> -<![endif]--> - <noscript> - <p><strong>Attention, cette page Web nécessite que JavaScript soit activé !</strong></p> - <p>JavaScript est un langage de programmation couramment utilisé pour créer des effets interactifs dans les navigateurs Web.</p> - <p>Malheureusement, il est désactivé dans votre navigateur. Veuillez l'activer pour afficher cette page.</p> - <p><a href="https://goo.gl/koeeaJ">Comment activer JavaScript ?</a></p> - </noscript> -</pre> - -<div class="blockIndicator note"> -<p>Cependant, pour des raisons d’accessibilité, un site devrait toujours pouvoir être consultable en l’absence de Javascript.</p> -</div> - -<h2 id="Conclusion">Conclusion</h2> - -<p>Les nouveaux éléments sémantiques introduits en HTML5 apportent la capacité de décrire la structure et le plan d'un document web d'une manière standard. Ils apportent un grand avantage pour les utilisateurs de navigateurs HTML5 et qui ont besoin de la structure pour les aider à comprendre la page, par exemple, les utilisateurs de technologies d'assistance. Ces nouveaux éléments sémantiques sont simples à utiliser et, avec très peu d'efforts, ils peuvent également être mis en œuvre dans les navigateurs ne prenant pas en charge HTML5. Par conséquent, ils devraient être utilisés sans restriction.</p> - -<div>{{HTML5ArticleTOC()}}</div> diff --git a/files/fr/web/html/utiliser_application_cache/index.html b/files/fr/web/html/using_the_application_cache/index.html index ccc78772a8..ccc78772a8 100644 --- a/files/fr/web/html/utiliser_application_cache/index.html +++ b/files/fr/web/html/using_the_application_cache/index.html diff --git a/files/fr/web/html/utilisation_d'audio_et_video_en_html5/index.html b/files/fr/web/html/utilisation_d'audio_et_video_en_html5/index.html deleted file mode 100644 index efa30853e6..0000000000 --- a/files/fr/web/html/utilisation_d'audio_et_video_en_html5/index.html +++ /dev/null @@ -1,245 +0,0 @@ ---- -title: Utilisation d'audio et video en HTML5 -slug: Web/HTML/Utilisation_d'audio_et_video_en_HTML5 -tags: - - Aperçu - - Featured - - Guide - - HTML - - HTML5 - - Media - - Web -translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -translation_of_original: Web/Guide/HTML/Using_HTML5_audio_and_video ---- -<p>{{ gecko_minversion_header("1.9.1") }}</p> - -<p>La gestion des éléments HTML 5 <a class="internal" href="/fr/HTML/Element/Audio" title="fr/HTML/Element/Audio"><code>audio</code></a> et <a class="internal" href="/Fr/HTML/Element/Video" title="fr/HTML/Element/Video"><code>video</code></a> a été introduite dans Firefox 3.5, ce qui permet d'intégrer facilement des médias dans des documents HTML. Actuellement, les formats de média Ogg Theora, Ogg Vorbis et WAV sont gérés.</p> - -<h2 id="Intégration_de_médias">Intégration de médias</h2> - -<p>Il est trivial d'intégrer des médias dans vos documents HTML :</p> - -<pre class="brush: html"><video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls> - Votre navigateur ne gère pas l'élément <code>video</code>. -</video> -</pre> - -<p>Cet exemple jouera une vidéo exemple du site web de Theora.</p> - -<p>Plusieurs fichiers sources peuvent être référencés à l'aide de l'élément <a class="internal" href="/fr/HTML/Element/Source" title="fr/HTML/Element/Source"><code>source</code></a> afin de fournir des vidéos/extraits audio encodés dans différents formats pour différents navigateurs. Par exemple,</p> - -<pre class="brush: html"><video controls> - <source src="foo.ogg" type="video/ogg"> - <source src="foo.mp4"> - Votre navigateur ne gère pas l'élément <code>video</code>. -</video> -</pre> - -<p>jouera le fichier Ogg dans les navigateurs gérant ce format. Si ce n'est pas le cas, il essaiera de jouer le fichier MPEG-4.</p> - -<p>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 :</p> - -<pre class="brush: html"><video controls> - <source src="foo.ogg" type="video/ogg; codecs=&quot;dirac, speex&quot;"> - Votre navigateur ne gère pas l'élément <code>video</code>. -</video></pre> - -<p>Ici, on indique que la vidéo utilise les codecs Dirac et Speex. Si le navigateur gère les médias Ogg, mais pas les codecs spécifiés, la vidéo ne se chargera pas.</p> - -<p>Si l'attribut <code>type</code> n'est pas spécifié le type du média est récupéré depuis le serveur et vérifié pour voir s'il est géré par Gecko ; s'il n'est pas utilisable, l'élément <code>source</code> suivant est vérifié. Si aucun des éléments <code>source</code> ne peut être utilisé, un évènement <code>error</code> est transmis à l'élément <code>video</code>. Si l'attribut <code>type</code> est spécifié, il est comparé avec ceux qui peuvent être joués ; s'il n'est pas reconnu, le serveur n'est même pas interrogé, et on passe directement à la vérification de l'élément <code>source</code> suivant.</p> - -<p> </p> - -<h2 id="Contrôle_de_la_lecture">Contrôle de la lecture</h2> - -<p>Une fois le média intégré dans votre document HTML à l'aide de ces nouveaux éléments, vous pouvez les contrôler programmatiquement depuis du code JavaScript. Par exemple, pour démarrer (ou redémarrer) la lecture, vous pouvez faire ceci :</p> - -<pre class="brush: js">var v = document.getElementsByTagName("video")[0]; -v.play(); -</pre> - -<p>La première ligne récupère le premier élément video dans le document, et la seconde appelle la méthode <a class="external" href="/fr/NsIDOMHTMLMediaElement#play()" title="https://developer.mozilla.org/editor/fckeditor/core/editor/fr/NsIDOMHTMLMediaElement#play()"><code>play()</code></a> de l'élément, telle que définie dans l'interface {{ interface("nsIDOMHTMLMediaElement") }} utilisée pour implémenter les éléments de médias.</p> - -<h2 id="Évènements_des_médias">Évènements des médias</h2> - -<p>Différents évènements sont envoyés lors du traitement de médias :</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">Nom de l'évènement</td> - <td class="header">Description</td> - </tr> - <tr> - <td><code>abort</code></td> - <td>Envoyé lorsque la lecture est annulée ; par exemple il sera envoyé si le média est en cours de lecture et redémarré depuis le début.</td> - </tr> - <tr> - <td><code>canplay</code></td> - <td>Envoyé lorsque suffisamment de données sont disponibles pour débuter la lecture du média, au moins pour quelques premières images. Il correspond à la valeur <code>CAN_PLAY</code> de <code>readyState</code>.</td> - </tr> - <tr> - <td><code>canplaythrough</code></td> - <td>Envoyé lorsque l'état devient <code>CAN_PLAY_THROUGH</code>, ce qui indique que le média peut être entièrement lu sans interruption, en supposant que la vitesse de téléchargement reste au niveau actuel.</td> - </tr> - <tr> - <td><code>canshowcurrentframe</code></td> - <td>L'image courante est chargée et peut être présentée. Ceci correspond à la valeur <code>CAN_SHOW_CURRENT_FRAME</code> de <code>readyState</code>.</td> - </tr> - <tr> - <td><code>dataunavailable</code></td> - <td>Envoyé lorsque l'état devient <code>DATA_UNAVAILABLE</code>.</td> - </tr> - <tr> - <td><code>durationchange</code></td> - <td>Les métadonnées ont été chargées ou modifiées, ce qui indique un changement dans la durée du média. Sera par exemple envoyé lorsque le média est suffisamment chargé pour que sa durée soit connue.</td> - </tr> - <tr> - <td><code>emptied</code></td> - <td>Le média est devenu vide ; par exemple si le média est déjà chargé (ou partiellement chargé) et qu'on appelle la méthode <a class="internal" href="/fr/nsIDOMMediaHTMLElement#load()" title="fr/nsIDOMMediaHTMLElement#load()"><code>load()</code></a> pour le recharger.</td> - </tr> - <tr> - <td><code>empty</code></td> - <td>Envoyé lorsqu'une erreur survient et que le média est vide.</td> - </tr> - <tr> - <td><code>ended</code></td> - <td>Envoyé lorsque la lecture se termine.</td> - </tr> - <tr> - <td><code>error</code></td> - <td>Envoyé lorsqu'une erreur se produit. L'attribut <code>error</code> de l'élément contient plus d'informations.</td> - </tr> - <tr> - <td><code>loadedfirstframe</code></td> - <td>La première image du média a été chargée.</td> - </tr> - <tr> - <td><code>loadedmetadata</code></td> - <td>Les métadonnées du média ont été chargées ; tous les attributs contiennent autant d'informations que possible.</td> - </tr> - <tr> - <td><code>loadstart</code></td> - <td>Envoyé lorsque le chargement du média débute.</td> - </tr> - <tr> - <td><code>pause</code></td> - <td>Envoyé lorsque la lecture est interrompue.</td> - </tr> - <tr> - <td><code>play</code></td> - <td>Envoyé lorsque la lecture débute ou reprend.</td> - </tr> - <tr> - <td><code>progress</code></td> - <td> - <p>Envoyé périodiquement pour informer les parties intéressées de la progression du téléchargement du média. L'évènement progress dispose de trois attributs :</p> - - <dl> - <dt><code>lengthComputable</code></dt> - <dd>vaut <code>true</code> si la taille totale du média est connue, <code>false</code> sinon.</dd> - <dt><code>loaded</code></dt> - <dd>Le nombre d'octets du fichier de média qui ont été reçus jusqu'à présent.</dd> - <dt><code>total</code></dt> - <dd>Le nombre total d'octets dans le fichier de média.</dd> - </dl> - </td> - </tr> - <tr> - <td><code>ratechange</code></td> - <td>Envoyé lorsque la vitesse de lecture change.</td> - </tr> - <tr> - <td><code>seeked</code></td> - <td>Envoyé lorsqu'une opération de positionnement est effectuée.</td> - </tr> - <tr> - <td><code>seeking</code></td> - <td>Envoyé lorsqu'une opération de positionnement débute.</td> - </tr> - <tr> - <td><code>suspend</code> {{ gecko_minversion_inline("1.9.2") }}</td> - <td>Envoyé lorsque le chargement du média est interrompu ; cela peut arriver parce que le téléchargement est terminé ou parce qu'il a été mis en pause pour toute autre raison.</td> - </tr> - <tr> - <td><code>timeupdate</code></td> - <td>Le temps indiqué par l'attribut <code>currentTime</code> de l'élément a été modifié.</td> - </tr> - <tr> - <td><code>volumechange</code></td> - <td>Envoyé lorsque le volume audio est modifié (qu'il s'agisse d'une modification du volume ou d'un changement de l'attribut <code>muted</code>).</td> - </tr> - <tr> - <td><code>waiting</code></td> - <td>Envoyé lorsque l'opération demandée (comme une lecture) est retardée en attendant la fin d'une autre opération (comme un positionnement).</td> - </tr> - </tbody> -</table> - -<p>{{ gecko_minversion_note("1.9.2", "L'ancien évènement <code>load</code> a été retiré de Gecko 1.9.2, il n'était pas déclenché quand il fallait et ne doit pas être utilisé.") }}</p> - -<p>Ces évènements peuvent facilement être interceptés à l'aide ce ce genre de code :</p> - -<pre>var v = document.getElementsByTagName("video")[0]; - -v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true); -v.currentTime = 10.0; -</pre> - -<p>Cet exemple récupère le premier élément vidéo du document et lui attache un écouteur d'évènement, vérifiant l'évènement seeked qui est envoyé lorsqu'une opération de positionnement se termine. La fonction appelle simplement la méthode <code>play()</code> de l'élément, qui lance la lecture.</p> - -<p>Ensuite, à la ligne 4, cet exemple positionne l'attribut <code>currentTime</code> de l'élément à 10.0, ce qui lance une opération de positionnement à la dixième seconde du média. Cela déclenche l'envoi d'un évènement <code>seeking</code> au début de l'opération, ensuite d'un évènement <code>seeked</code> lorsque le positionnement est terminé.</p> - -<p>Autrement dit, l'exemple se positionne à dix secondes du début du média, puis commence la lecture dès que c'est fait.</p> - -<h2 id="Options_de_rechange">Options de rechange</h2> - -<p>Le code HTML fourni entre les balises, par exemple <code><video></code> et <code></video></code>, est utilisé par les navigateurs ne gérant pas les médias HTML 5. Vous pouvez tirer parti de cela pour fournir un contenu alternatif de rechange pour ces navigateurs.</p> - -<p>Cette section propose deux options de rechange possibles pour la vidéo. Dans les deux cas, si le navigateur gère la vidéo HTML 5, c'est celle-ci qui sera utilisée.</p> - -<h3 id="Utilisation_de_Flash">Utilisation de Flash</h3> - -<p>Vous pouvez utiliser Flash pour lire une vidéo Flash si l'élément <code>video</code> n'est pas géré :</p> - -<pre class="brush: html"><video src="video.ogv" controls> - <object data="flvplayer.swf" type="application/x-shockwave-flash"> - <param value="flvplayer.swf" name="movie"/> - </object> -</video> -</pre> - -<p>Notez qu'il ne faut pas mettre d'attribut <code>classid</code> à la balise <code>object</code> afin de rester compatible avec les autres navigateurs qu'Internet Explorer.</p> - -<h3 id="Lecture_de_vidéos_Ogg_dans_une_applet_Java">Lecture de vidéos Ogg dans une applet Java</h3> - -<p>Une applet Java appelée <a class="external" href="http://maikmerten.livejournal.com/2256.html" title="http://maikmerten.livejournal.com/2256.html">Cortado</a> peut-être utilisée pour lire les vidéos Ogg dans les navigateurs ne pouvant pas lire les vidéos HTML 5 mais où Java est géré :</p> - -<pre class="brush: html"><video src="my_ogg_video.ogg" controls width="320" height="240"> - <object type="application/x-java-applet" - width="320" height="240"> - <param name="archive" value="cortado.jar"> - <param name="code" value="com.fluendo.player.Cortado.class"> - <param name="url" value="my_ogg_video.ogg"> - <p>You need to install Java to play this file.</p> - </object> -</video> -</pre> - -<p>Si vous ne créez pas d'élément enfant de l'objet cortado comme l'élément <p> dans l'exemple ci-dessus, les installations de Firefox 3.5 qui gèrent la vidéo nativement mais où Java n'est pas installé informeront incorrectement l'utilisateur qu'il doit installer un plugin pour lire le contenu de la page.</p> - -<h2 id="Voir_également">Voir également</h2> - -<ul> - <li><a class="internal" href="/fr/HTML/Element/Audio" title="fr/HTML/Element/Audio"><code>audio</code></a></li> - <li><a class="internal" href="/Fr/HTML/Element/Video" title="fr/HTML/Element/Video"><code>video</code></a></li> - <li><a class="internal" href="/fr/HTML/Element/Source" title="fr/HTML/Element/Source"><code>source</code></a></li> - <li><a class="internal" href="/fr/Manipulation_de_vidéos_avec_canvas" title="fr/Manipulation de vidéos avec canvas"><code>Manipulation de vidéos avec canvas</code></a></li> - <li>{{ interface("nsIDOMHTMLMediaElement") }}</li> - <li><a class="internal" href="/fr/docs/Web/HTML/formats_media_support" title="fr/Formats de médias gérés par les éléments audio et video"><code>Formats de médias gérés par les éléments audio et video</code></a></li> -</ul> - -<p> {{ languages( { "en": "en/Using_audio_and_video_in_Firefox" } ) }}</p> - -<p> {{ languages( { "es": "es/Etiquetas audio y video en Firefox" } ) }}</p> diff --git a/files/fr/web/html/utiliser_dash_avec_les_vidéos_en_html/index.html b/files/fr/web/html/utiliser_dash_avec_les_vidéos_en_html/index.html deleted file mode 100644 index 6a1b7f19f1..0000000000 --- a/files/fr/web/html/utiliser_dash_avec_les_vidéos_en_html/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: Utiliser DASH avec les vidéos en HTML -slug: Web/HTML/Utiliser_DASH_avec_les_vidéos_en_HTML -tags: - - Avancé - - DASH - - Guide - - HTML -translation_of: Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video ---- -<div>{{HTMLSidebar}}</div> - -<p><strong><em>Dynamic Adaptive Streaming over HTTP</em> (DASH)</strong> est un protocole de <em>streaming</em> adaptatif : il permet de changer le débit de la vidéo en fonction des performances réseau afin que la vidéo ne soit pas interrompue lors de la lecture.</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>Firefox 21 inclut une implémentation de DASH pour le format vidéo WebM mais celle-ci est désactivée par défaut et peut être activée via la préférence <code>media.dash.enabled</code> sous <code>about:config</code>.</p> - -<p>Firefox 23 a retiré la prise en charge de DASH pour le format WebM. Cette fonctionnalité sera remplacée par l'implémentation de l'<a href="http://www.w3.org/TR/media-source/">API Media Source Extensions</a> qui permettra la prise en charge de DASH via des bibliothèques JavaScript tierces (telles que dash.js). Pour plus de détails, voir le bug <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=778617">778617</a>.</p> - -<h2 id="Utiliser_DASH_côté_serveur">Utiliser DASH, côté serveur</h2> - -<p>Pour commencer, il faut convertir la vidéo WebM en manifeste DASH avec les vidéos associées aux différents débits. Pour cela, on aura besoin de :</p> - -<ul> - <li>ffpmeg - avec la prise en charge de l'audio et vidéo WebM fourni via libvpx and libvoribis en version 2.5 minimum (<a href="http://www.ffmpeg.org/">ffmpeg.org</a>).</li> -</ul> - -<h3 id="1._Utiliser_un_fichier_WebM_afin_de_créer_une_piste_audio_et_plusieurs_fichiers_vidéo">1. Utiliser un fichier WebM afin de créer une piste audio et plusieurs fichiers vidéo</h3> - -<p>Dans les lignes d'exemple qui suivent, on utilise le fichier de départ<strong><em> in.video</em></strong>. Ce fichier peut être n'importe quel conteneur avec au moins un flux audio et un flux vidéo qui peut être décodé par ffmpeg.</p> - -<p>On créera la piste audio avec :</p> - -<pre>ffmpeg -i in.video -vn -acodec libvorbis -ab 128k -dash 1 my_audio.webm -</pre> - -<p>On créera les pistes vidéos avec :</p> - -<pre>ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ --an -vf scale=160:90 -b:v 250k -dash 1 video_160x90_250k.webm - -ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ --an -vf scale=320:180 -b:v 500k -dash 1 video_320x180_500k.webm - -ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ --an -vf scale=640:360 -b:v 750k -dash 1 video_640x360_750k.webm - -ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ --an -vf scale=640:360 -b:v 1000k -dash 1 video_640x360_1000k.webm - -ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ --an -vf scale=1280:720 -b:v 1500k -dash 1 video_1280x720_1500k.webm -</pre> - -<p>Autrement, on peut utiliser cette commande :</p> - -<pre>ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 \ --g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ --an -vf scale=160:90 -b:v 250k -dash 1 video_160x90_250k.webm \ --an -vf scale=320:180 -b:v 500k -dash 1 video_320x180_500k.webm \ --an -vf scale=640:360 -b:v 750k -dash 1 video_640x360_750k.webm \ --an -vf scale=640:360 -b:v 1000k -dash 1 video_640x360_1000k.webm \ --an -vf scale=1280:720 -b:v 1500k -dash 1 video_1280x720_1500k.webm</pre> - -<h3 id="2._Créer_le_manifeste">2. Créer le manifeste</h3> - -<pre>ffmpeg \ - -f webm_dash_manifest -i video_160x90_250k.webm \ - -f webm_dash_manifest -i video_320x180_500k.webm \ - -f webm_dash_manifest -i video_640x360_750k.webm \ - -f webm_dash_manifest -i video_1280x720_1500k.webm \ - -f webm_dash_manifest -i my_audio.webm \ - -c copy \ - -map 0 -map 1 -map 2 -map 3 -map 4 \ - -f webm_dash_manifest \ - -adaptation_sets "id=0,streams=0,1,2,3 id=1,streams=4" \ - my_video_manifest.mpd</pre> - -<p>Les arguments <code>-map</code> correspondent aux fichiers d'entrée dans l'ordre dans lequel ils sont fournis. Il doit y en avoir un pour chaque fichier. L'argument <code>-adaptation_sets</code> permet de les affecter à différents ensembles d'adaptation. Par exemple, cela crée un ensemble (0) qui contient les flux 0, 1, 2 et 3 (les vidéos) et un autre ensemble (1) qui contient uniquement le flux 4 (l'audio).</p> - -<p>On pourra alors placer le fichier de manifeste créé à côté des fichiers vidéo sur le serveur web ou sur le CDN. DASH fonctionne via HTTP donc il suffit simplement que votre serveur prenne en charge les requêtes d'intervalles d'octets (byte range requests) et qu'il puisse servir les fichiers <code>.mpd</code> avec <code>mimetype="application/dash+xml"</code>.</p> - -<h2 id="Utiliser_DASH_côté_client">Utiliser DASH, côté client</h2> - -<p>Il faut modifier la page web pour que celle-ci pointe d'abord vers le manifeste, avant le fichier vidéo en tant que tel :</p> - -<pre class="brush: html"><video> - <source src="movie.mpd"> - <source src="movie.webm"> - Votre navigateur ne prend pas en charge les vidéos HTML. -</video></pre> - -<p>C'est tout !<br> - Si le navigateur utilisé prend en charge DASH/MSE, la diffusion de la vidéo sera maintenant adaptative.</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="http://wiki.webmproject.org/adaptive-streaming/webm-dash-specification">La spécification WebM DASH du projet WebM </a></li> - <li><a href="http://dashif.org/">Le forum DASH Industry</a></li> - <li><a href="http://wiki.webmproject.org/adaptive-streaming/instructions-to-playback-adaptive-webm-using-dash">Descriptions du projet WebM pour la création de fichiers DASH avec FFMPEG</a></li> -</ul> |