diff options
Diffstat (limited to 'files/fr/learn/html/howto')
6 files changed, 410 insertions, 438 deletions
diff --git a/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md b/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md index 2bd7ccebb6..ca692dcccd 100644 --- a/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md +++ b/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md @@ -9,117 +9,123 @@ tags: translation_of: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image original_slug: Apprendre/HTML/Comment/Ajouter_carte_zones_cliquables_sur_image --- -<p>Dans cet article, nous verrons comment construire une carte imagée cliquable en commençant par les inconvénients de cette méthode.</p> +Dans cet article, nous verrons comment construire une carte imagée cliquable en commençant par les inconvénients de cette méthode. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Vous devez au préalable savoir comment <a href="/fr/Apprendre/HTML/Écrire_une_simple_page_HTML">créer un document HTML simple</a> et connaître comment <a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_à_une_page_web">ajouter des images accessibles à une page web.</a></td> - </tr> - <tr> - <th scope="row">Objectifs :</th> - <td>Apprendre comment faire pour que différentes zones d'une même image pointent vers différentes pages.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Vous devez au préalable savoir comment + <a href="/fr/Apprendre/HTML/Écrire_une_simple_page_HTML" + >créer un document HTML simple</a + > + et connaître comment + <a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_à_une_page_web" + >ajouter des images accessibles à une page web.</a + > + </td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td> + Apprendre comment faire pour que différentes zones d'une même image + pointent vers différentes pages. + </td> + </tr> + </tbody> </table> -<div class="warning"> -<p><strong>Attention :</strong> Cet article n'aborde que les cartes générées côté client. Les cartes de zones générées côté serveur ne doivent pas être utilisée car elles ne sont accessibles qu'aux utilisateurs ayant des souris.</p> -</div> +> **Attention :** Cet article n'aborde que les cartes générées côté client. Les cartes de zones générées côté serveur ne doivent pas être utilisée car elles ne sont accessibles qu'aux utilisateurs ayant des souris. -<h2 id="Les_cartes_imagées_cliquables_et_leurs_inconvénients">Les cartes imagées cliquables et leurs inconvénients</h2> +## Les cartes imagées cliquables et leurs inconvénients -<p>Lorsque vous imbriquez une image dans un élément {{htmlelement("a")}}, l'image entière pointe vers une page web. En revanche, les cartes imagées contiennent plusieurs régions (aussi appelées « <em>hotspots</em> » en anglais) qui pointent chacunes vers une ressource distincte.</p> +Lorsque vous imbriquez une image dans un élément {{htmlelement("a")}}, l'image entière pointe vers une page web. En revanche, les cartes imagées contiennent plusieurs régions (aussi appelées « _hotspots_ » en anglais) qui pointent chacunes vers une ressource distincte. -<p>Auparavant, les cartes imagées était assez populaires mais, malgré cette popularité, elles posent quelques problèmes en termes de performances et d'accessibilité.</p> +Auparavant, les cartes imagées était assez populaires mais, malgré cette popularité, elles posent quelques problèmes en termes de performances et d'accessibilité. -<p><a href="/fr/Apprendre/HTML/Comment/Créer_un_hyperlien">Les liens textuels</a> (éventuellement mis en formes avec CSS) sont préférables à ces cartes car ils sont plus légers, plus faciles à maintenir, plus utiles pour le référencement et qu'ils sont supportés par les outils d'accessibilité.</p> +[Les liens textuels](/fr/Apprendre/HTML/Comment/Créer_un_hyperlien) (éventuellement mis en formes avec CSS) sont préférables à ces cartes car ils sont plus légers, plus faciles à maintenir, plus utiles pour le référencement et qu'ils sont supportés par les outils d'accessibilité. -<h2 id="Comment_insérer_une_carte_imagée">Comment insérer une carte imagée</h2> +## Comment insérer une carte imagée -<h3 id="Étape_1_l'image">Étape 1 : l'image</h3> +### Étape 1 : l'image -<p>N'importe quelle image ne fera pas l'affaire pour construire une telle carte.</p> +N'importe quelle image ne fera pas l'affaire pour construire une telle carte. -<ul> - <li>L'image doit indiquer de façon claire ce qui doit se passer quand les visiteurs suivent les liens des différentes zones (le texte contenu dans l'attribut <code>alt</code> est bien entendu obligatoire mais de nombreux visiteurs ne le verront pas).</li> - <li>L'image doit indiquer de façon claire où commencent et où se terminent les différentes régions.</li> - <li>Les différentes zones de la cartes doivent être suffisamment grandes pour qu'on puisse cliquer ou appuyer dessus, quelle que soit la taille de l'écran utilisé. <a href="http://uxmovement.com/mobile/finger-friendly-design-ideal-mobile-touch-target-sizes/">Une image de 72 pixels CSS de long et de large</a> est un minimum acceptable (pour voir le problème posé par de trop petites régions : <a href="http://www.goethe-verlag.com/book2/">50languages.com</a>, où les grandes régions sont suffisamment grande mais où, pour l'Albanie et l'Estonie, c'est beaucoup plus compliqué</li> -</ul> +- L'image doit indiquer de façon claire ce qui doit se passer quand les visiteurs suivent les liens des différentes zones (le texte contenu dans l'attribut `alt` est bien entendu obligatoire mais de nombreux visiteurs ne le verront pas). +- L'image doit indiquer de façon claire où commencent et où se terminent les différentes régions. +- Les différentes zones de la cartes doivent être suffisamment grandes pour qu'on puisse cliquer ou appuyer dessus, quelle que soit la taille de l'écran utilisé. [Une image de 72 pixels CSS de long et de large](http://uxmovement.com/mobile/finger-friendly-design-ideal-mobile-touch-target-sizes/) est un minimum acceptable (pour voir le problème posé par de trop petites régions : [50languages.com](http://www.goethe-verlag.com/book2/), où les grandes régions sont suffisamment grande mais où, pour l'Albanie et l'Estonie, c'est beaucoup plus compliqué -<p>On insère une image <a href="http://developer.mozilla.org/en-US/Learn/HTML/Howto/Add_images_to_a_webpage">de la même façon que d'habitude</a> (avec un élément {{htmlelement("img")}} et un texte dans l'attribut {{htmlattrxref("alt",'img')}}). Si l'image n'est présente qu'à des fins de navigations, <code>alt</code> peut être laissé vide : <code>alt=""</code>, si les valeurs pour les différents {{htmlattrxref("alt",'area')}} sont bien renseignés dans les éléments {{htmlelement('area')}} que nous allons présenter.</p> +On insère une image [de la même façon que d'habitude](http://developer.mozilla.org/en-US/Learn/HTML/Howto/Add_images_to_a_webpage) (avec un élément {{htmlelement("img")}} et un texte dans l'attribut {{htmlattrxref("alt",'img')}}). Si l'image n'est présente qu'à des fins de navigations, `alt` peut être laissé vide : `alt=""`, si les valeurs pour les différents {{htmlattrxref("alt",'area')}} sont bien renseignés dans les éléments {{htmlelement('area')}} que nous allons présenter. -<p>Cette image contiendra une attribut spécial {{htmlattrxref("usemap","img")}}. Celui-ci doit désigner avec un nom unique et sans espace la carte imagée. C'est ce nom qu'on placera dans cet attribut <code>usemap</code> :</p> +Cette image contiendra une attribut spécial {{htmlattrxref("usemap","img")}}. Celui-ci doit désigner avec un nom unique et sans espace la carte imagée. C'est ce nom qu'on placera dans cet attribut `usemap` : -<pre class="brush: html"><img +```html +<img src="image-map.png" alt="" - usemap="#exemple-map-1" /> -</pre> + usemap="#exemple-map-1" /> +``` -<h3 id="Étape_2_Activer_les_régions_actives">Étape 2 : Activer les régions actives</h3> +### Étape 2 : Activer les régions actives -<p>Dans cette étape, nous allons remplir le code de l'élément {{htmlelement('map')}}. Celui-ci n'a besoin que d'un seul attribut : {{htmlattrxref("name","map")}} dont la valeur doit correspondre à celle utilisée pour l'attribut <code>usemap</code> vue juste avant :</p> +Dans cette étape, nous allons remplir le code de l'élément {{htmlelement('map')}}. Celui-ci n'a besoin que d'un seul attribut : {{htmlattrxref("name","map")}} dont la valeur doit correspondre à celle utilisée pour l'attribut `usemap` vue juste avant : -<pre class="brush: html"><map name="exemple-map-1"> +```html +<map name="exemple-map-1"> -</map> -</pre> +</map> +``` -<p>Dans cet élément <code><map></code>, on aura besoin d'utiliser les éléments {{htmlelement('area')}}. Chacun de ces éléments correspondra à une région donnée. Afin que la navigation au clavier reste intuitive, il faudra veiller à ce que l'ordre de ces éléments HTML corresponde bien à l'ordre visuel des régions.</p> +Dans cet élément `<map>`, on aura besoin d'utiliser les éléments {{htmlelement('area')}}. Chacun de ces éléments correspondra à une région donnée. Afin que la navigation au clavier reste intuitive, il faudra veiller à ce que l'ordre de ces éléments HTML corresponde bien à l'ordre visuel des régions. -<p>Les éléments <code><area></code> sont des éléments vides mais qui utilisent quatres attributs :</p> +Les éléments `<area>` sont des éléments vides mais qui utilisent quatres attributs : -<dl> - <dt>{{htmlattrxref('shape','area')}}</dt> - <dt>{{htmlattrxref('coords','area')}}</dt> - <dd> - <p><code>shape</code> (« forme » en anglais) prend l'une de ces quatre valeurs : <code>circle</code> (pour un cercle), <code>rect</code> (pour un rectangle), <code>poly</code> (pour un polygone) ou <code>default</code> (une zone <code>default</code> occupera l'image entière à laquelle on aura retiré les autres zones déjà définies). La forme choisie détermine les informations de coordonnées qui seront utiles dans <code>coords</code>.</p> +- {{htmlattrxref('shape','area')}} - <ul> - <li>Pour un cercle (<code>circle</code>) : on fournira les coordonnées X/Y du centre, suivies par la longueur du rayon.</li> - <li>Pour un rectange (<code>rect</code>) : on fournira les coordonnées X/Y des coins haut/gauche et bas/droite.</li> - <li>Pour un polygone (<code>poly</code>) : on fournira les coordonnées X/Y de chacun des sommets (et donc au moins six valeurs).</li> - </ul> + {{htmlattrxref('coords','area')}} - <p>Les coordonnées exprimées sont données en pixels CSS.</p> + - : `shape` (« forme » en anglais) prend l'une de ces quatre valeurs : `circle` (pour un cercle), `rect` (pour un rectangle), `poly` (pour un polygone) ou `default` (une zone `default` occupera l'image entière à laquelle on aura retiré les autres zones déjà définies). La forme choisie détermine les informations de coordonnées qui seront utiles dans `coords`. - <p>Dans le cas où les définitions de certaines régions se chevauchent, ce sera l'ordre des zones qui donnera la priorité.</p> - </dd> - <dt>{{htmlattrxref('href','area')}}</dt> - <dd>Cet attribut est l'URL de la ressource vers laquelle on crée un lien. Elle peut être laissée vide si on ne souhaite pas créer de lien pour cette région.</dd> - <dt>{{htmlattrxref('alt','area')}}</dt> - <dd> - <p>Un attribut obligatoire qui indique aux personnes la direction ou le rôle du lien. Ce texte <code>alt</code> ne sera affiché que lorsque l'image ne sera pas disponible. Pour plus d'informations, voir <a href="/fr/Apprendre/HTML/Comment/Créer_un_hyperlien#Écrire_des_liens_accessibles">nos conseils pour écrire des hyperliens accessibles.</a></p> + - Pour un cercle (`circle`) : on fournira les coordonnées X/Y du centre, suivies par la longueur du rayon. + - Pour un rectange (`rect`) : on fournira les coordonnées X/Y des coins haut/gauche et bas/droite. + - Pour un polygone (`poly`) : on fournira les coordonnées X/Y de chacun des sommets (et donc au moins six valeurs). - <p>Vous pouvez écrire <code>alt=""</code> si l'attribut <code>href</code> est vide <em>et</em> que l'image entière possède déjà un attribut <code>alt</code> renseigné.</p> - </dd> -</dl> + Les coordonnées exprimées sont données en pixels CSS. -<pre class="brush: html"><map name="exemple-map-1"> - <area shape="circle" coords="200,250,25" - href="page-2.html" alt="exemple de cercle" /> + Dans le cas où les définitions de certaines régions se chevauchent, ce sera l'ordre des zones qui donnera la priorité. - <area shape="rect" coords="10, 5, 20, 15" - href="page-3.html" alt="exemple de rectangle" /> +- {{htmlattrxref('href','area')}} + - : Cet attribut est l'URL de la ressource vers laquelle on crée un lien. Elle peut être laissée vide si on ne souhaite pas créer de lien pour cette région. +- {{htmlattrxref('alt','area')}} -</map></pre> + - : Un attribut obligatoire qui indique aux personnes la direction ou le rôle du lien. Ce texte `alt` ne sera affiché que lorsque l'image ne sera pas disponible. Pour plus d'informations, voir [nos conseils pour écrire des hyperliens accessibles.](/fr/Apprendre/HTML/Comment/Créer_un_hyperlien#Écrire_des_liens_accessibles) -<h3 id="Étape_3_S'assurer_que_la_carte_fonctionne_pour_chacun">Étape 3 : S'assurer que la carte fonctionne pour chacun</h3> + Vous pouvez écrire `alt=""` si l'attribut `href` est vide _et_ que l'image entière possède déjà un attribut `alt` renseigné. -<p>Ce n'est pas encore fini. Il est nécessaire de s'assurer que la carte fonctionne bien sur différents navigateurs et appareils. Vous pouvez essayer de naviguer en utilisant uniquement de clavier. Vous pouvez également désactiver les images.</p> +```html +<map name="exemple-map-1"> + <area shape="circle" coords="200,250,25" + href="page-2.html" alt="exemple de cercle" /> -<p>Si votre carte imagée mesure plus de 240px environ, vous devrez réfléchir à comment l'ajuster pour que celle-ci soit adaptative. Il ne suffira pas de redimensionner l'image pour les écrans plus petits car les coordonnées qui resteraient les mêmes ne correspondraient plus aux différents points de l'image.</p> + <area shape="rect" coords="10, 5, 20, 15" + href="page-3.html" alt="exemple de rectangle" /> -<p>Si vous devez nécessairement utiliser de telles cartes, vous pouvez regarder <a href="https://github.com/stowball/jQuery-rwdImageMaps">ce plugin jQuery réalisé par Matt Stow.</a> Dudley Storey illustre une méthode qui consiste à <a href="http://thenewcode.com/696/Using-SVG-as-an-Alternative-To-Imagemaps">utiliser SVG pour réaliser un effet de carte imagée</a> ainsi qu'une bidouille pour les images matricielles avec <a href="http://thenewcode.com/760/Create-A-Responsive-Imagemap-With-SVG">une combinaison de SVG</a>.</p> +</map> +``` -<h2 id="En_savoir_plus">En savoir plus</h2> +### Étape 3 : S'assurer que la carte fonctionne pour chacun -<ul> - <li>{{htmlelement("img")}}</li> - <li>{{htmlelement("map")}}</li> - <li>{{htmlelement("area")}}</li> - <li><a href="http://www.maschek.hu/imagemap/imgmap">Un éditeur de carte de zones en ligne (en anglais)</a></li> - <li><a href="http://blog.goolara.com/2014/06/05/image-maps-revisited/">Des conseils sur comment gérer les cartes pour des clients mail (en anglais)</a></li> -</ul> +Ce n'est pas encore fini. Il est nécessaire de s'assurer que la carte fonctionne bien sur différents navigateurs et appareils. Vous pouvez essayer de naviguer en utilisant uniquement de clavier. Vous pouvez également désactiver les images. + +Si votre carte imagée mesure plus de 240px environ, vous devrez réfléchir à comment l'ajuster pour que celle-ci soit adaptative. Il ne suffira pas de redimensionner l'image pour les écrans plus petits car les coordonnées qui resteraient les mêmes ne correspondraient plus aux différents points de l'image. + +Si vous devez nécessairement utiliser de telles cartes, vous pouvez regarder [ce plugin jQuery réalisé par Matt Stow.](https://github.com/stowball/jQuery-rwdImageMaps) Dudley Storey illustre une méthode qui consiste à [utiliser SVG pour réaliser un effet de carte imagée](http://thenewcode.com/696/Using-SVG-as-an-Alternative-To-Imagemaps) ainsi qu'une bidouille pour les images matricielles avec [une combinaison de SVG](http://thenewcode.com/760/Create-A-Responsive-Imagemap-With-SVG). + +## En savoir plus + +- {{htmlelement("img")}} +- {{htmlelement("map")}} +- {{htmlelement("area")}} +- [Un éditeur de carte de zones en ligne (en anglais)](http://www.maschek.hu/imagemap/imgmap) +- [Des conseils sur comment gérer les cartes pour des clients mail (en anglais)](http://blog.goolara.com/2014/06/05/image-maps-revisited/) diff --git a/files/fr/learn/html/howto/author_fast-loading_html_pages/index.md b/files/fr/learn/html/howto/author_fast-loading_html_pages/index.md index 8dd4f33264..e863d69994 100644 --- a/files/fr/learn/html/howto/author_fast-loading_html_pages/index.md +++ b/files/fr/learn/html/howto/author_fast-loading_html_pages/index.md @@ -7,113 +7,99 @@ tags: translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages original_slug: Web/Guide/HTML/Astuces_de_création_de_pages_HTML_à_affichage_rapide --- -<p>C'est connu, les internautes sont de grands impatients, ils veulent des résultats immédiats, avec des gros titres et des réponses courtes et efficaces. <br> - Une page web optimisé prévoit non seulement un site plus réactif, mais aussi de réduire la charge sur vos serveurs Web et votre connexion Internet. Cela peut être crucial pour les gros sites ou des sites qui ont un pic de trafic dans des circonstances exceptionnelles (telles que les Unes des journaux fracassantes). De plus, Google en tient compte pour son classement.</p> +C'est connu, les internautes sont de grands impatients, ils veulent des résultats immédiats, avec des gros titres et des réponses courtes et efficaces. +Une page web optimisé prévoit non seulement un site plus réactif, mais aussi de réduire la charge sur vos serveurs Web et votre connexion Internet. Cela peut être crucial pour les gros sites ou des sites qui ont un pic de trafic dans des circonstances exceptionnelles (telles que les Unes des journaux fracassantes). De plus, Google en tient compte pour son classement. -<h3 id="Réduire_le_poids_de_la_page">Réduire le poids de la page</h3> +### Réduire le poids de la page -<p>Le poids de la page est de loin le facteur le plus important dans les performances de chargement de votre page. Pour les améliorer, on peut procéder de diverses manières:</p> +Le poids de la page est de loin le facteur le plus important dans les performances de chargement de votre page. Pour les améliorer, on peut procéder de diverses manières: -<ul> - <li>Eliminer les espaces et les commentaires inutile.</li> - <li> - <div>Déplacer le script intégré (ou "inline scripts") et le code CSS dans des fichiers externes (un pour JavaScript, un pour CSS,...). Des outils tels que <a class="external" href="http://www.html-tidy.org">HTML Tidy</a> peuvent automatiquement enlever les espaces de trop et les lignes vides à partir d'une source HTML valide. D'autres outils peuvent "compresser" JavaScript comme le libre <a class="external" href="http://yuilibrary.com/projects/yuicompressor/">YUIcompressor</a>.</div> - </li> - <li> - <div>Verifiez que votre site ne contient pas de code inutile ou de tags superflus. </div> - </li> -</ul> +- Eliminer les espaces et les commentaires inutile. +- Déplacer le script intégré (ou "inline scripts") et le code CSS dans des fichiers externes (un pour JavaScript, un pour CSS,...). Des outils tels que [HTML Tidy](http://www.html-tidy.org) peuvent automatiquement enlever les espaces de trop et les lignes vides à partir d'une source HTML valide. D'autres outils peuvent "compresser" JavaScript comme le libre [YUIcompressor](http://yuilibrary.com/projects/yuicompressor/). +- Verifiez que votre site ne contient pas de code inutile ou de tags superflus. -<p>Téléchargez le html d'abords, puis le CSS et le JavaScript nécessaires à son affichage, de sorte que l'utilisateur obtienne rapidement une réponse apparente au cours du chargement de la paget. Ce contenu est généralement du texte, et peuvent donc bénéficier de la compression de texte dans le modem, fournissant ainsi une réponse encore plus rapide à l'utilisateur.</p> +Téléchargez le html d'abords, puis le CSS et le JavaScript nécessaires à son affichage, de sorte que l'utilisateur obtienne rapidement une réponse apparente au cours du chargement de la paget. Ce contenu est généralement du texte, et peuvent donc bénéficier de la compression de texte dans le modem, fournissant ainsi une réponse encore plus rapide à l'utilisateur. -<h3 id="Réduisez_le_nombre_de_fichiers">Réduisez le nombre de fichiers</h3> +### Réduisez le nombre de fichiers -<p>Réduire le nombre de fichiers référencés dans une page web diminue le nombre de connexions <a href="/en/HTTP" title="https://developer.mozilla.org/en/HTTP">HTTP </a>nécessaire pour télécharger une page.</p> +Réduire le nombre de fichiers référencés dans une page web diminue le nombre de connexions [HTTP ](/en/HTTP "https://developer.mozilla.org/en/HTTP")nécessaire pour télécharger une page. -<ul> - <li>Utilisez le moins d'images possible sur votre site (et de gif animés ofc). Preferez des <a class="external" href="http://css-tricks.com/examples/ButtonMaker/">boutons graphiques en CSS</a>.</li> - <li>Compressez vos images (éviter les .png). Vous pouvez pour cela utiliser <a class="external" href="http://www.gimp.org/">Gimp</a> ou <a class="external" href="http://www.imagemagick.org/script/index.php">Imagemagik</a>.</li> - <li>Preferez le CSS ou le JavaScript au flash: il ralenti le navigateur.</li> -</ul> +- Utilisez le moins d'images possible sur votre site (et de gif animés ofc). Preferez des [boutons graphiques en CSS](http://css-tricks.com/examples/ButtonMaker/). +- Compressez vos images (éviter les .png). Vous pouvez pour cela utiliser [Gimp](http://www.gimp.org/) ou [Imagemagik](http://www.imagemagick.org/script/index.php). +- Preferez le CSS ou le JavaScript au flash: il ralenti le navigateur. -<p>Les videos sont diffusées progressivement depuis le serveur, elles ne ralentisseent donc pas le chargement de votre page.</p> +Les videos sont diffusées progressivement depuis le serveur, elles ne ralentisseent donc pas le chargement de votre page. -<h3 id="Réduire_les_domaines_des_recherches">Réduire les domaines des recherches</h3> +### Réduire les domaines des recherches -<p>Étant donné que chaque requete DNS demande du temps, le temps de chargement de la page va augmenter avec l'augmentation du nombre de domaines séparés figurant dans le lien CSS, JavaScript et image (src). Vous devez toujours prendre soin de n'utiliser que le nombre minimum nécessaire de différents domaines dans vos pages.</p> +Étant donné que chaque requete DNS demande du temps, le temps de chargement de la page va augmenter avec l'augmentation du nombre de domaines séparés figurant dans le lien CSS, JavaScript et image (src). Vous devez toujours prendre soin de n'utiliser que le nombre minimum nécessaire de différents domaines dans vos pages. -<h3 id="Réutiliser_le_contenu_du_cache">Réutiliser le contenu du cache</h3> +### Réutiliser le contenu du cache -<p>Assurez-vous que tout contenu qui peut être mis en cache, est mis en cache, et avec un temps d'expiration appropriée.<br> - En particulier, attention à l'en-tête "Last-Modified". Elle permet la mise en cache de la page; grâce à cette en-tête, l'information est transmise au navigateur (ou "user agent") sur le fichier qu'il veut charger, comme lors de sa dernière modification. La plupart des serveurs web ajoute automatiquement l'en-tête "Last-Modified" aux pages statiques (par exemple. html,. css), basé sur la date de la dernière modification stockées dans le système de fichiers. Avec des pages dynamiques (p. ex. Php,. Aspx), ceci, bien sûr, ne peut pas être fait, et l'en-tête n'est pas envoyé.<br> - En particulier pour les pages qui sont générées dynamiquement, une petite recherche sur ce sujet est bénéfique. Il peut être quelque peu complexe, mais il permettra d'économiser beaucoup de demandes de page sur des pages qui ne devraient normalement pas être mis en cache.<br> - <br> - Plus d'informations:<br> - <br> - 1. <a class="external" href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">HTTP Conditional Get for RSS Hackers</a><br> - 2. <a class="external" href="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a><br> - 3. <a class="external" href="http://www.cmlenz.net/blog/2005/05/on_http_lastmod.html">On HTTP Last-Modified and ETag</a></p> +Assurez-vous que tout contenu qui peut être mis en cache, est mis en cache, et avec un temps d'expiration appropriée. +En particulier, attention à l'en-tête "Last-Modified". Elle permet la mise en cache de la page; grâce à cette en-tête, l'information est transmise au navigateur (ou "user agent") sur le fichier qu'il veut charger, comme lors de sa dernière modification. La plupart des serveurs web ajoute automatiquement l'en-tête "Last-Modified" aux pages statiques (par exemple. html,. css), basé sur la date de la dernière modification stockées dans le système de fichiers. Avec des pages dynamiques (p. ex. Php,. Aspx), ceci, bien sûr, ne peut pas être fait, et l'en-tête n'est pas envoyé. +En particulier pour les pages qui sont générées dynamiquement, une petite recherche sur ce sujet est bénéfique. Il peut être quelque peu complexe, mais il permettra d'économiser beaucoup de demandes de page sur des pages qui ne devraient normalement pas être mis en cache. -<h3 id="Réduire_le_nombre_de_scripts_en_ligne">Réduire le nombre de scripts en ligne</h3> +Plus d'informations: -<p>Les scripts intégrés peut être coûteux pour le chargement de la page, puisque l'analyseur (ou parser) doit supposer qu'un script intégré pourrait modifier la structure de la page quand le "parsing" est en cours. Il est donc préférable, en général, de réduire l'utilisation des scripts intégrés et l'utilisation de document.write(), en particulier au contenu de sortie. Ces manipulations peuvent améliorer chargement globale de la page. Utilisez des méthodes modernes de W3C-DOM pour manipuler le contenu de la page pour les navigateurs modernes, plutôt que des approches plus fondées sur document.write ().</p> +1. [HTTP Conditional Get for RSS Hackers](http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers) + 2. [HTTP 304: Not Modified](http://annevankesteren.nl/archives/2005/05/http-304) + 3. [On HTTP Last-Modified and ETag](http://www.cmlenz.net/blog/2005/05/on_http_lastmod.html) -<h3 id="Utilisez_le_CSS_moderne_et_des_balises_valides">Utilisez le CSS moderne et des balises valides</h3> +### Réduire le nombre de scripts en ligne -<p>L'utilisation de CSS modernes réduit la quantité de balisage, et peut réduire la nécessité de "spacer" les images, en termes de disposition, et peut très souvent remplacer des images de texte stylisé - qui "coutent" beaucoup plus que l'équivalent texte-et-CSS.<br> - Utiliser des balises valides a d'autres avantages. Tout d'abord, les navigateurs n'ont pas besoin d'effectuer de corrections d'erreurs lors de l'analyse du code HTML.<br> - En outre, la validité du balisage permet la libre utilisation d'autres outils qui peuvent pré-traiter vos pages web. Par exemple, <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> peut supprimer des espaces blancs et des balises facultatives, mais il refusera de s'exécuter sur une page avec des erreurs de balisage graves.</p> +Les scripts intégrés peut être coûteux pour le chargement de la page, puisque l'analyseur (ou parser) doit supposer qu'un script intégré pourrait modifier la structure de la page quand le "parsing" est en cours. Il est donc préférable, en général, de réduire l'utilisation des scripts intégrés et l'utilisation de document.write(), en particulier au contenu de sortie. Ces manipulations peuvent améliorer chargement globale de la page. Utilisez des méthodes modernes de W3C-DOM pour manipuler le contenu de la page pour les navigateurs modernes, plutôt que des approches plus fondées sur document.write (). -<h3 id="Segmentez_votre_contenu">Segmentez votre contenu</h3> +### Utilisez le CSS moderne et des balises valides -<p>Remplacer la mise en page basé sur des <table> par des blocs <div>, plutôt que des <table> très imbriquée comme dans l'exemple suivant:</p> +L'utilisation de CSS modernes réduit la quantité de balisage, et peut réduire la nécessité de "spacer" les images, en termes de disposition, et peut très souvent remplacer des images de texte stylisé - qui "coutent" beaucoup plus que l'équivalent texte-et-CSS. +Utiliser des balises valides a d'autres avantages. Tout d'abord, les navigateurs n'ont pas besoin d'effectuer de corrections d'erreurs lors de l'analyse du code HTML. +En outre, la validité du balisage permet la libre utilisation d'autres outils qui peuvent pré-traiter vos pages web. Par exemple, [HTML Tidy](http://tidy.sourceforge.net/) peut supprimer des espaces blancs et des balises facultatives, mais il refusera de s'exécuter sur une page avec des erreurs de balisage graves. -<pre><TABLE> - <TABLE> - <TABLE> - ... - </TABLE> - </TABLE> -</TABLE> +### Segmentez votre contenu -</pre> +Remplacer la mise en page basé sur des \<table> par des blocs \<div>, plutôt que des \<table> très imbriquée comme dans l'exemple suivant: -<p>Préferez des <table> non-imbriquées ou <div> comme dans l'exemple suivant:</p> + <TABLE> + <TABLE> + <TABLE> + ... + </TABLE> + </TABLE> + </TABLE> -<pre>> TABLE <TABLE> ...</ -> TABLE <TABLE> ...</ -> TABLE <TABLE> ...</</pre> +Préferez des \<table> non-imbriquées ou \<div> comme dans l'exemple suivant: -<h3 id="Préciser_la_taille_des_images_et_des_tableaux">Préciser la taille des images et des tableaux</h3> + > TABLE <TABLE> ...</ + > TABLE <TABLE> ...</ + > TABLE <TABLE> ...</ -<p>Si le navigateur peut immédiatement déterminer la hauteur et/ou la largeur de vos images et tableaux, il sera capable d'afficher une page web sans avoir à refondre le contenu. Cela n'augmente pas seulement la vitesse d'affichage de la page, mais aussi à empêcher les changements gênants dans la disposition d'une page lors du chargement. Pour cette raison, la hauteur et la largeur doit être spécifié pour les images, chaque fois que possible.<br> - Les tableaux doivent utiliser le sélecteur CSS selector:property combination:</p> +### Préciser la taille des images et des tableaux -<pre> table-layout: fixed; +Si le navigateur peut immédiatement déterminer la hauteur et/ou la largeur de vos images et tableaux, il sera capable d'afficher une page web sans avoir à refondre le contenu. Cela n'augmente pas seulement la vitesse d'affichage de la page, mais aussi à empêcher les changements gênants dans la disposition d'une page lors du chargement. Pour cette raison, la hauteur et la largeur doit être spécifié pour les images, chaque fois que possible. +Les tableaux doivent utiliser le sélecteur CSS selector:property combination: -</pre> + table-layout: fixed; -<p>et doit spécifier la largeur des colonnes en utilisant le COL et les balises html COLGROUP.</p> +et doit spécifier la largeur des colonnes en utilisant le COL et les balises html COLGROUP. -<h3 id="Choisissez_les_versions_des_navigateur_ciblés">Choisissez les versions des navigateur ciblés</h3> +### Choisissez les versions des navigateur ciblés -<p><br> - Pour atteindre les plus grandes améliorations dans la conception de la page, assurez-vous que des exigences raisonnables de l'agent utilisateur (user-agent) soit définies pour les projets. Cela ne nécessite pas que votre contenu apparaisse parfaitement sur tous les navigateurs, et surtout pas dans les navigateurs d'une version anterieure.<br> - <br> - Idéalement, vous devriez vous concentrez sur l'examen des navigateurs modernes qui prennent en charge des normes pertinentes. Il peut s'agir de: Firefox 5, Internet Explorer 9 sur Windows, Opera 11 sous Windows et Safari 5 sur Mac OS X.<br> - <br> - Notez, cependant, que beaucoup de conseils énumérés dans cette page sont des techniques de bon sens qui s'applique à tous, et peuvent être appliquées à n'importe quelle page web, indépendamment des exigences relatives des navigateurs.</p> +Pour atteindre les plus grandes améliorations dans la conception de la page, assurez-vous que des exigences raisonnables de l'agent utilisateur (user-agent) soit définies pour les projets. Cela ne nécessite pas que votre contenu apparaisse parfaitement sur tous les navigateurs, et surtout pas dans les navigateurs d'une version anterieure. -<h3 id="Liens_connexes">Liens connexes</h3> +Idéalement, vous devriez vous concentrez sur l'examen des navigateurs modernes qui prennent en charge des normes pertinentes. Il peut s'agir de: Firefox 5, Internet Explorer 9 sur Windows, Opera 11 sous Windows et Safari 5 sur Mac OS X. -<p><br> - * <a class="external" href="http://www.alsacreations.com/astuce/lire/527-optimisez-vos-pages-avec-yslow.html">Optimisez vos pages avec Yslow</a><br> - * <a class="external" href="http://www.websiteoptimization.com/">Livre: "Speed Up Your Site" par Andy King</a><br> - *<a class="external" href="http://webmonkey.wired.com/webmonkey/design/site_building/tutorials/tutorial2.html"> Site Optimization Tutorial </a>(WebMonkey) (en anglais) <br> - * <a class="external" href="http://developer.yahoo.com/performance/rules.html">Best Practices for Speeding Up Your Web Site</a> (en anglais) </p> +Notez, cependant, que beaucoup de conseils énumérés dans cette page sont des techniques de bon sens qui s'applique à tous, et peuvent être appliquées à n'importe quelle page web, indépendamment des exigences relatives des navigateurs. -<p> </p> +### Liens connexes -<p><strong>Document d'information d'origine</strong><br> - <br> - * https://developer.mozilla.org/en/Tips_for_Authoring_Fast-loading_HTML_Pages</p> +\* [Optimisez vos pages avec Yslow](http://www.alsacreations.com/astuce/lire/527-optimisez-vos-pages-avec-yslow.html) + \* [Livre: "Speed Up Your Site" par Andy King](http://www.websiteoptimization.com/) + \*[ Site Optimization Tutorial ](http://webmonkey.wired.com/webmonkey/design/site_building/tutorials/tutorial2.html)(WebMonkey) (en anglais) + \* [Best Practices for Speeding Up Your Web Site](http://developer.yahoo.com/performance/rules.html) (en anglais) + + + +**Document d'information d'origine** + +\* https\://developer.mozilla.org/en/Tips_for_Authoring_Fast-loading_HTML_Pages diff --git a/files/fr/learn/html/howto/define_terms_with_html/index.md b/files/fr/learn/html/howto/define_terms_with_html/index.md index c4a834b1a4..fea14083ae 100644 --- a/files/fr/learn/html/howto/define_terms_with_html/index.md +++ b/files/fr/learn/html/howto/define_terms_with_html/index.md @@ -9,142 +9,141 @@ tags: translation_of: Learn/HTML/Howto/Define_terms_with_HTML original_slug: Apprendre/HTML/Comment/Définir_des_termes_avec_HTML --- -<p>HTML fournit plusieurs méthodes pour décrire la sémantique du contenu qu'on emploie (que ce soit intégré dans le texte ou dans un glossaire à part). Dans cet article, nous verrons comment correctement définir les termes utilisés au sein d'un document.</p> +HTML fournit plusieurs méthodes pour décrire la sémantique du contenu qu'on emploie (que ce soit intégré dans le texte ou dans un glossaire à part). Dans cet article, nous verrons comment correctement définir les termes utilisés au sein d'un document. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Vous devez au préalable savoir comment <a href="/fr/Learn/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a>.</td> - </tr> - <tr> - <th scope="row">Objectifs :</th> - <td>Apprendre comment introduire de nouveaux mots-clés et comment construire une liste de définitions.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Vous devez au préalable savoir comment + <a href="/fr/Learn/HTML/Write_a_simple_page_in_HTML" + >créer un document HTML simple</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td> + Apprendre comment introduire de nouveaux mots-clés et comment construire + une liste de définitions. + </td> + </tr> + </tbody> </table> -<p>Lorsqu'on souhaite définir un terme, on utilise généralement un dictionnaire ou un glossaire. Les dictionnaires et glossaires permettent d'associer formellement des termes clés avec une ou plusieurs descriptions. Par exemple :</p> +Lorsqu'on souhaite définir un terme, on utilise généralement un dictionnaire ou un glossaire. Les dictionnaires et glossaires permettent d'associer formellement des termes clés avec une ou plusieurs descriptions. Par exemple : -<blockquote> -<dl> - <dt>Bleu (<em>adjectif</em>)</dt> - <dd>La couleur du ciel lors d'un temps clair.<br> - <em><q>Le ciel est bleu.</q></em></dd> -</dl> -</blockquote> +> - Bleu (_adjectif_) +> - : La couleur du ciel lors d'un temps clair. +> _"Le ciel est bleu."_ -<p>Mais il arrive fréquemment qu'on définisse des termes de façon moins formelle, comme ici :</p> +Mais il arrive fréquemment qu'on définisse des termes de façon moins formelle, comme ici : -<blockquote> -<p><em><dfn>Firefox</dfn></em> est le navigateur web créé et développé par la Fondation Mozilla.</p> -</blockquote> +> **Firefox** est le navigateur web créé et développé par la Fondation Mozilla. -<p>Pour gérer ces différents cas d'utilisation, {{Glossary("HTML")}} fournit différents éléments qui permettent de marquer les termes définis et leurs descriptions afin que vos lecteurs puissent utiliser ces informations.</p> +Pour gérer ces différents cas d'utilisation, {{Glossary("HTML")}} fournit différents éléments qui permettent de marquer les termes définis et leurs descriptions afin que vos lecteurs puissent utiliser ces informations. -<h2 id="Comment_écrire_un_description_informelle">Comment écrire un description informelle</h2> +## Comment écrire un description informelle -<p>Dans certains manuels, à la première occurence d'un terme, celui-ci est placé en gras et défini immédiatement.</p> +Dans certains manuels, à la première occurence d'un terme, celui-ci est placé en gras et défini immédiatement. -<p>On peut procéder de cette façon avec HTML. En revanche, HTML ne gère pas l'aspect visuel d'un document, uniquement son contenu. On utilisera l'élément {{htmlelement("dfn")}} qui permet d'identifier la première occurence d'un terme. Attention, <code><dfn></code> enveloppe le terme à définir et pas sa définition (qui elle s'étend sur le paragraphe courant) :</p> +On peut procéder de cette façon avec HTML. En revanche, HTML ne gère pas l'aspect visuel d'un document, uniquement son contenu. On utilisera l'élément {{htmlelement("dfn")}} qui permet d'identifier la première occurence d'un terme. Attention, `<dfn>` enveloppe le terme à définir et pas sa définition (qui elle s'étend sur le paragraphe courant) : -<pre class="brush: html"><p><dfn>Firefox</dfn> est le navigateur créé et développé par la Fondation Mozilla.</p> -</pre> +```html +<p><dfn>Firefox</dfn> est le navigateur créé et développé par la Fondation Mozilla.</p> +``` -<div class="note"> -<p><strong>Note :</strong> On utilise également parfois le gras pour mettre en avant du contenu. Le gras, en tant que tel, est un concept qui n'appartient pas à HTML mais à la mise en forme. En revanche, pour mettre en avant (utiliser une emphase), il existe <a href="/fr/Apprendre/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important">des éléments HTML tout indiqués</a>.</p> -</div> +> **Note :** On utilise également parfois le gras pour mettre en avant du contenu. Le gras, en tant que tel, est un concept qui n'appartient pas à HTML mais à la mise en forme. En revanche, pour mettre en avant (utiliser une emphase), il existe [des éléments HTML tout indiqués](/fr/Apprendre/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important). -<h3 id="Cas_spécifique_les_abréviations">Cas spécifique : les abréviations</h3> +### Cas spécifique : les abréviations -<p>En ce qui concerne les abréviations, il est préférable <a href="/fr/Apprendre/HTML/Howto/Mark_abbreviations_and_make_them_understandable">de les identifier séparement</a> grâce à l'élément {{htmlelement("abbr")}} afin que les lecteurs d'écrans puissent les utiliser correctement. Comme pour la définition d'un nouveau terme, une abréviation doit être définie lors de sa première apparition.</p> +En ce qui concerne les abréviations, il est préférable [de les identifier séparement](/fr/Apprendre/HTML/Howto/Mark_abbreviations_and_make_them_understandable) grâce à l'élément {{htmlelement("abbr")}} afin que les lecteurs d'écrans puissent les utiliser correctement. Comme pour la définition d'un nouveau terme, une abréviation doit être définie lors de sa première apparition. -<pre class="brush: html"><p> - <dfn><abbr>HTML</abbr> (hypertext markup language)</dfn> +```html +<p> + <dfn><abbr>HTML</abbr> (hypertext markup language)</dfn> est un langage de description utilisé pour structurer des documents sur le Web. -</p></pre> +</p> +``` -<div class="note"> -<p><strong>Note :</strong> La spécification HTML <a href="http://www.w3.org/TR/html/text-level-semantics.html#the-abbr-element">met en avant l'attribut <code>title</code></a> pour expliciter les termes de l'abréviation. Cependant, il reste nécessaire d'utiliser le texte classique pour fournir une explication car le contenu de l'attribut <code>title</code> ne sera pas montré aux utilisateurs, sauf si ceux-ci passent la souris au-dessus de l'abréviation. C'est également <a href="http://www.w3.org/TR/html/dom.html#attr-title">ce qui est noté dans les spécifications</a>.</p> -</div> +> **Note :** La spécification HTML [met en avant l'attribut `title`](http://www.w3.org/TR/html/text-level-semantics.html#the-abbr-element) pour expliciter les termes de l'abréviation. Cependant, il reste nécessaire d'utiliser le texte classique pour fournir une explication car le contenu de l'attribut `title` ne sera pas montré aux utilisateurs, sauf si ceux-ci passent la souris au-dessus de l'abréviation. C'est également [ce qui est noté dans les spécifications](http://www.w3.org/TR/html/dom.html#attr-title). -<h3 id="Améliorer_l'accessibilité">Améliorer l'accessibilité</h3> +### Améliorer l'accessibilité -<p>{{HTMLElement('dfn')}} identifie le terme qui est défini et indique que le paragraphe courant définit le terme. Il y a donc une relation implicite entre l'élément <code><dfn></code> et l'élément qui le contient. Si vous souhaitez avoir une relation plus formelle ou que votre définition ne s'étend que sur une ou plusieurs phrases plutôt que sur l'ensemble du paragraphe, vous pouvez utiliser l'attribut <code><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby">aria-discribedby</a></code> pour associer, formellement, un terme à sa définition :</p> +{{HTMLElement('dfn')}} identifie le terme qui est défini et indique que le paragraphe courant définit le terme. Il y a donc une relation implicite entre l'élément `<dfn>` et l'élément qui le contient. Si vous souhaitez avoir une relation plus formelle ou que votre définition ne s'étend que sur une ou plusieurs phrases plutôt que sur l'ensemble du paragraphe, vous pouvez utiliser l'attribut [`aria-discribedby`](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby) pour associer, formellement, un terme à sa définition : -<pre class="brush: html"><p> - <span id="ff"> - <dfn aria-describedby="ff">Firefox</dfn> +```html +<p> + <span id="ff"> + <dfn aria-describedby="ff">Firefox</dfn> est le navigateur web créé et développé par la Fondation Mozilla. - </span> - Vous pouvez le télécharger sur <a href="http://www.mozilla.org">mozilla.org</a> -</p></pre> + </span> + Vous pouvez le télécharger sur <a href="http://www.mozilla.org">mozilla.org</a> +</p> +``` -<p>Les technologies d'assistance à la navigation pourront tirer parti de cet attribut pour fournir un texte alternatif pour un terme donné. <code>aria-describedby</code> peut être utilisé pour n'importe quelle balise contenant un mot-clé à définir (il n'est pas nécessaire que ce soit <code><dfn></code>). <code>aria-describedby</code> utilise un référence à l'{{htmlattrxref('id')}} de l'élément qui contient la description.</p> +Les technologies d'assistance à la navigation pourront tirer parti de cet attribut pour fournir un texte alternatif pour un terme donné. `aria-describedby` peut être utilisé pour n'importe quelle balise contenant un mot-clé à définir (il n'est pas nécessaire que ce soit `<dfn>`). `aria-describedby` utilise un référence à l'{{htmlattrxref('id')}} de l'élément qui contient la description. -<h2 id="Comment_construire_une_liste_de_descriptions">Comment construire une liste de descriptions</h2> +## Comment construire une liste de descriptions -<p>Les listes de descriptions sont des listes de termes associés à leur description (par exemple une liste de définition, des entrées d'un dictionnaire, une FAQ, des paires de clés-valeurs, etc.).</p> +Les listes de descriptions sont des listes de termes associés à leur description (par exemple une liste de définition, des entrées d'un dictionnaire, une FAQ, des paires de clés-valeurs, etc.). -<div class="note"> -<p><strong>Note :</strong> Les listes de descriptions <a href="http://www.w3.org/TR/html5/grouping-content.html#the-dl-element">ne doivent pas être utilisées pour retranscrire des dialogues</a>. En effet, la conversation ne décrit pas les différents interlocuteurs. Voici <a href="http://www.w3.org/TR/html5/common-idioms.html#conversations">quelques recommandations pour retranscrire un dialogue dans un document web</a>.</p> -</div> +> **Note :** Les listes de descriptions [ne doivent pas être utilisées pour retranscrire des dialogues](http://www.w3.org/TR/html5/grouping-content.html#the-dl-element). En effet, la conversation ne décrit pas les différents interlocuteurs. Voici [quelques recommandations pour retranscrire un dialogue dans un document web](http://www.w3.org/TR/html5/common-idioms.html#conversations). -<p>Les termes à décrire sont placés dans des éléments {{htmlelement("dt")}} et la description, qui suit immédiatement, est placée dans un ou plusieurs éléments {{htmlelement("dd")}}. Enfin, l'ensemble de la liste est placé au sein d'un élément {{htmlelement("dl")}}.</p> +Les termes à décrire sont placés dans des éléments {{htmlelement("dt")}} et la description, qui suit immédiatement, est placée dans un ou plusieurs éléments {{htmlelement("dd")}}. Enfin, l'ensemble de la liste est placé au sein d'un élément {{htmlelement("dl")}}. -<h3 id="Un_exemple_simple">Un exemple simple</h3> +### Un exemple simple -<p>Voici un exemple simple qui dresse une liste de descriptions de plats :</p> +Voici un exemple simple qui dresse une liste de descriptions de plats : -<pre class="brush: html"><dl> - <dt>jambalaya</dt> - <dd> +```html +<dl> + <dt>jambalaya</dt> + <dd> une entrée à base de riz qui contient généralement du poulet, des saucisses, des fruits de mer et des épices - </dd> + </dd> - <dt>sukiyaki</dt> - <dd> + <dt>sukiyaki</dt> + <dd> une spécialité japonaise à base de fines tranches de viande, de légumes, de nouilles et qui est cuite dans un sauce soja et du saké - </dd> + </dd> - <dt>chianti</dt> - <dd> + <dt>chianti</dt> + <dd> un vin italien, sec, originaire de Toscane - </dd> -</dl> -</pre> + </dd> +</dl> +``` -<div class="note"> -<p><strong>Note :</strong> La structure de base qu'on voit dans cet exemple alterne les termes (<code><dt></code>) et leurs descriptions (<code><dd></code>). Si deux (ou plusieurs) termes apparaissent les uns à la suite des autres, la description qui suit s'appliquera à tout ces termes. Si deux (ou plusieurs) descriptions se suivent, elles s'appliqueront au dernier terme.</p> -</div> +> **Note :** La structure de base qu'on voit dans cet exemple alterne les termes (`<dt>`) et leurs descriptions (`<dd>`). Si deux (ou plusieurs) termes apparaissent les uns à la suite des autres, la description qui suit s'appliquera à tout ces termes. Si deux (ou plusieurs) descriptions se suivent, elles s'appliqueront au dernier terme. -<h3 id="Améliorer_l'aspect_visuel">Améliorer l'aspect visuel</h3> +### Améliorer l'aspect visuel -<p>Voici comment un navigateur affichera la liste précédente :</p> +Voici comment un navigateur affichera la liste précédente : -<p>{{EmbedLiveSample("Un_exemple_simple", 600, 180)}}</p> +{{EmbedLiveSample("Un_exemple_simple", 600, 180)}} -<p>Si vous souhaitez que les termes soient plus visibles, vous pouvez les écrire en gras. Cela ne change rien au contenu, donc ce ne sera pas HTML qui sera utilisé. En revanche, cela modifie la mise en forme et nous allons donc utiliser CSS et plus particulièrement la propriété {{cssxref("font-weight")}} :</p> +Si vous souhaitez que les termes soient plus visibles, vous pouvez les écrire en gras. Cela ne change rien au contenu, donc ce ne sera pas HTML qui sera utilisé. En revanche, cela modifie la mise en forme et nous allons donc utiliser CSS et plus particulièrement la propriété {{cssxref("font-weight")}} : -<pre class="brush: css">dt { +```css +dt { font-weight: bold; } -</pre> +``` -<p>Cela permettra d'obtenir le résultat suivant :</p> +Cela permettra d'obtenir le résultat suivant : -<p>{{EmbedLiveSample("Comment_construire_une_liste_de_descriptions", 600, 180)}}</p> +{{EmbedLiveSample("Comment_construire_une_liste_de_descriptions", 600, 180)}} -<h2 id="En_savoir_plus">En savoir plus</h2> +## En savoir plus -<ul> - <li>{{htmlelement("dfn")}}</li> - <li>{{htmlelement("dl")}}</li> - <li>{{htmlelement("dt")}}</li> - <li>{{htmlelement("dd")}}</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby">Comment utiliser l'attribut <code>aria-describedby</code></a></li> -</ul> +- {{htmlelement("dfn")}} +- {{htmlelement("dl")}} +- {{htmlelement("dt")}} +- {{htmlelement("dd")}} +- [Comment utiliser l'attribut `aria-describedby`](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby) diff --git a/files/fr/learn/html/howto/index.md b/files/fr/learn/html/howto/index.md index e5f130e8ca..bcc9479b69 100644 --- a/files/fr/learn/html/howto/index.md +++ b/files/fr/learn/html/howto/index.md @@ -7,131 +7,106 @@ tags: translation_of: Learn/HTML/Howto original_slug: Apprendre/HTML/Comment --- -<p>Une fois <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML">les bases acquises</a>, il n'existe pas de voie idéale pour apprendre {{Glossary("HTML")}}. Vous pouvez ensuite progresser à votre rythme, en utilisant les balises qui vous sont utiles. HTML n'est qu'un ensemble de balises que vous pouvez utiliser pour structurer votre document et lui ajouter des fonctionnalités supplémentaires. Dans les articles suivants, nous travaillerons sur différents exemples illustrant comment utiliser HTML pour résoudre des problèmes fréquents qu'on rencontre lorsqu'on développe pour le Web. Si vous avez besoin d'explications détaillées sur une balise HTML donnée, n'hésitez pas à consulter <a href="/fr/docs/Web/HTML/Reference">notre référence HTML</a>.</p> +Une fois [les bases acquises](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML), il n'existe pas de voie idéale pour apprendre {{Glossary("HTML")}}. Vous pouvez ensuite progresser à votre rythme, en utilisant les balises qui vous sont utiles. HTML n'est qu'un ensemble de balises que vous pouvez utiliser pour structurer votre document et lui ajouter des fonctionnalités supplémentaires. Dans les articles suivants, nous travaillerons sur différents exemples illustrant comment utiliser HTML pour résoudre des problèmes fréquents qu'on rencontre lorsqu'on développe pour le Web. Si vous avez besoin d'explications détaillées sur une balise HTML donnée, n'hésitez pas à consulter [notre référence HTML](/fr/docs/Web/HTML/Reference). -<h2 id="Cas_d'utilisation_fréquents">Cas d'utilisation fréquents</h2> +## Cas d'utilisation fréquents -<p>HTML permet de résoudre de nombreux problèmes qui se posent lors de la conception de sites web. Il est très probable que vous rencontriez au moins l'un de ces scénarios :</p> +HTML permet de résoudre de nombreux problèmes qui se posent lors de la conception de sites web. Il est très probable que vous rencontriez au moins l'un de ces scénarios : -<h3 id="Structure_de_base">Structure de base</h3> +### Structure de base -<p>En HTML, tout commence par la structure du document. Si vous débutez avec HTML, vous devriez démarrer avec :</p> +En HTML, tout commence par la structure du document. Si vous débutez avec HTML, vous devriez démarrer avec : -<ul> - <li><a href="/fr/docs/Apprendre/HTML/Comment/Cr%C3%A9er_un_document_HTML_simple">Comment créer un document HTML simple</a></li> - <li><a href="/fr/docs/Apprendre/HTML/Comment/D%C3%A9couper_une_page_web_en_sections_logiques">Comment diviser une page web en sections logiques</a></li> - <li><a href="/fr/docs/Apprendre/HTML/Comment/Mettre_en_place_une_hi%C3%A9rarchie_de_titres">Comment organiser une hiérarchie de titres</a></li> -</ul> +- [Comment créer un document HTML simple](/fr/docs/Apprendre/HTML/Comment/Cr%C3%A9er_un_document_HTML_simple) +- [Comment diviser une page web en sections logiques](/fr/docs/Apprendre/HTML/Comment/D%C3%A9couper_une_page_web_en_sections_logiques) +- [Comment organiser une hiérarchie de titres](/fr/docs/Apprendre/HTML/Comment/Mettre_en_place_une_hi%C3%A9rarchie_de_titres) -<h3 id="Sémantique_de_base_pour_le_texte">Sémantique de base pour le texte</h3> +### Sémantique de base pour le texte -<p>Le but de HTML est de fournir des informations sémantiques (c'est-à-dire sur le sens) d'un document et de ce qui le compose. HTML permettra donc de répondre à de nombreuses questions sur le sens du texte qu'on veut utiliser dans un document.</p> +Le but de HTML est de fournir des informations sémantiques (c'est-à-dire sur le sens) d'un document et de ce qui le compose. HTML permettra donc de répondre à de nombreuses questions sur le sens du texte qu'on veut utiliser dans un document. -<ul> - <li><a href="/fr/docs/Learn/HTML/Howto/Create_list_of_items_with_HTML">Comment créer une liste d'éléments en HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important">Comment faire pour accentuer un contenu</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important">Comment indiquer qu'un texte est important</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Display_computer_code_with_HTML">Comment afficher du code informatique avec HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Indicate_exponential_notation_with_HTML">Comment indiquer une notation exponentielle avec HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Provide_contact_information_within_a_webpage">Comment fournir des informations de contact dans une page web</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Annotate_images_and_graphics">Comment annoter des images et des graphiques</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable">Comment marquer des abréviations et les rendre compréhensibles</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Add_citations_to_webpages">Comment ajouter des citations à une page web</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Define_terms_with_HTML">Comment définir des termes en HTML</a></li> -</ul> -<h3 id="Les_hyperliens">Les hyperliens</h3> +- [Comment créer une liste d'éléments en HTML](/fr/docs/Learn/HTML/Howto/Create_list_of_items_with_HTML) +- [Comment faire pour accentuer un contenu](/fr/docs/Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important) +- [Comment indiquer qu'un texte est important](/fr/docs/Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important) +- [Comment afficher du code informatique avec HTML](/fr/docs/Learn/HTML/Howto/Display_computer_code_with_HTML) +- [Comment indiquer une notation exponentielle avec HTML](/fr/docs/Learn/HTML/Howto/Indicate_exponential_notation_with_HTML) +- [Comment fournir des informations de contact dans une page web](/fr/docs/Learn/HTML/Howto/Provide_contact_information_within_a_webpage) +- [Comment annoter des images et des graphiques](/fr/docs/Learn/HTML/Howto/Annotate_images_and_graphics) +- [Comment marquer des abréviations et les rendre compréhensibles](/fr/docs/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable) +- [Comment ajouter des citations à une page web](/fr/docs/Learn/HTML/Howto/Add_citations_to_webpages) +- [Comment définir des termes en HTML](/fr/docs/Learn/HTML/Howto/Define_terms_with_HTML) -<p>Les {{Glossary("hyperlien", "hyperliens")}} rendent la navigation très simple sur le web, ils peuvent être utilisés de différentes façons :</p> +### Les hyperliens -<ul> - <li><a href="/fr/docs/Learn/HTML/Howto/Create_a_hyperlink">Comment créer un hyperlien</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Create_list_of_items_with_HTML">Comment créer une table des matières en HTML</a></li> -</ul> +Les {{Glossary("hyperlien", "hyperliens")}} rendent la navigation très simple sur le web, ils peuvent être utilisés de différentes façons : -<h3 id="Images_et_multimédia">Images et multimédia</h3> +- [Comment créer un hyperlien](/fr/docs/Learn/HTML/Howto/Create_a_hyperlink) +- [Comment créer une table des matières en HTML](/fr/docs/Learn/HTML/Howto/Create_list_of_items_with_HTML) -<ul> - <li><a href="/fr/docs/Learn/HTML/Howto/Add_images_to_a_webpage">Comment ajouter des images à une page web</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">Comment ajouter une vidéo à une page web</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">Comment ajouter un contenu audio à une page web</a></li> -</ul> +### Images et multimédia -<h3 id="Script_et_mise_en_forme">Script et mise en forme</h3> +- [Comment ajouter des images à une page web](/fr/docs/Learn/HTML/Howto/Add_images_to_a_webpage) +- [Comment ajouter une vidéo à une page web](/fr/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage) +- [Comment ajouter un contenu audio à une page web](/fr/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage) -<p>HTML ne permet que de gérer la structure et le contenu d'un document. Pour régler les aspects de styles, on utilisera du {{glossary("CSS")}}, pour l'aspect interactif et script, on utilisera {{glossary("JavaScript")}}.</p> +### Script et mise en forme -<ul> - <li><a href="/fr/docs/Learn/HTML/Howto/Use_CSS_within_a_webpage">Comment utiliser CSS dans une page web</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">Comment utiliser JavaScript dans une page web</a></li> -</ul> +HTML ne permet que de gérer la structure et le contenu d'un document. Pour régler les aspects de styles, on utilisera du {{glossary("CSS")}}, pour l'aspect interactif et script, on utilisera {{glossary("JavaScript")}}. -<h3 id="Intégrer_du_contenu">Intégrer du contenu</h3> +- [Comment utiliser CSS dans une page web](/fr/docs/Learn/HTML/Howto/Use_CSS_within_a_webpage) +- [Comment utiliser JavaScript dans une page web](/fr/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage) -<ul> - <li><a href="/fr/docs/Learn/HTML/Howto/Embed_a_webpage_within_another_webpage">Comment intégrer une page web dans une autre page web</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Add_Flash_content_within_a_webpage">Comment ajouter du contenu Flash dans une page web</a></li> -</ul> +### Intégrer du contenu -<h2 id="Problèmes_avancés_ou_rares">Problèmes avancés ou rares</h2> +- [Comment intégrer une page web dans une autre page web](/fr/docs/Learn/HTML/Howto/Embed_a_webpage_within_another_webpage) +- [Comment ajouter du contenu Flash dans une page web](/fr/docs/Learn/HTML/Howto/Add_Flash_content_within_a_webpage) -<p>Au-delà des briques de bases qu'on peut assembler dans les exemples précédents, HTML reste très riche et offre des fonctionnalités avancées qui permettent de résoudre de nombreux problèmes complexes. Ces articles décrivent certains de ces problèmes, moins fréquents, et expliquent comment les résoudre :</p> +## Problèmes avancés ou rares -<h3 id="Les_formulaires">Les formulaires</h3> +Au-delà des briques de bases qu'on peut assembler dans les exemples précédents, HTML reste très riche et offre des fonctionnalités avancées qui permettent de résoudre de nombreux problèmes complexes. Ces articles décrivent certains de ces problèmes, moins fréquents, et expliquent comment les résoudre : -<p>Les formulaires correspondent à une structure HTML complexe qui permet d'envoyer des données d'une page web vers un serveur web. Nous vous invitons à suivre <a href="/fr/docs/Web/Guide/HTML/Formulaires">le guide dédié aux formulaires</a>. Vous pouvez commencer ici :</p> +### Les formulaires -<ul> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Comment créer un formulaire web simple</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML">Comment organiser un formulaire web</a></li> -</ul> +Les formulaires correspondent à une structure HTML complexe qui permet d'envoyer des données d'une page web vers un serveur web. Nous vous invitons à suivre [le guide dédié aux formulaires](/fr/docs/Web/Guide/HTML/Formulaires). Vous pouvez commencer ici : -<h3 id="Les_informations_tabulaires">Les informations tabulaires</h3> +- [Comment créer un formulaire web simple](/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML) +- [Comment organiser un formulaire web](/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML) -<p>Certaines informations doivent être organisées en tableaux, sur des colonnes et des lignes. Les tableaux sont une des structures HTML les plus complexes et s'avèrent particulièrement difficiles à maîtriser de A à Z :</p> +### Les informations tabulaires -<ul> - <li><a href="/fr/docs/Learn/HTML/Howto/Create_a_data_spreadsheet">Comment créer un tableur où saisir de sdonnées</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Make_HTML_tables_accessible">Comment rendre accessibles les tableaux HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Optimize_HTML_table_rendering">Comment optimiser le rendu d'un tableau HTML</a></li> -</ul> +Certaines informations doivent être organisées en tableaux, sur des colonnes et des lignes. Les tableaux sont une des structures HTML les plus complexes et s'avèrent particulièrement difficiles à maîtriser de A à Z : -<h3 id="La_représentation_de_données">La représentation de données</h3> +- [Comment créer un tableur où saisir de sdonnées](/fr/docs/Learn/HTML/Howto/Create_a_data_spreadsheet) +- [Comment rendre accessibles les tableaux HTML](/fr/docs/Learn/HTML/Howto/Make_HTML_tables_accessible) +- [Comment optimiser le rendu d'un tableau HTML](/fr/docs/Learn/HTML/Howto/Optimize_HTML_table_rendering) -<ul> - <li><a href="/fr/docs/Learn/HTMLHowto/Represent_numeric_values_with_HTML">Comment représenter des valeurs numériques en HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures">Comment associer du contenu lisible avec des structures de données informatiques arbitraires</a></li> -</ul> +### La représentation de données -<h3 id="Interactivité">Interactivité</h3> +- [Comment représenter des valeurs numériques en HTML](/fr/docs/Learn/HTMLHowto/Represent_numeric_values_with_HTML) +- [Comment associer du contenu lisible avec des structures de données informatiques arbitraires](/fr/docs/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures) -<ul> - <li><a href="/fr/docs/Learn/HTML/Howto/Create_collapsible_content_with_HTML">Comment créer du contenu dépliable/repliable avec HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Add_context_menus_to_a_webpage">Comment ajouter des menus contextuels à une page web</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Create_dialog_boxes_with_HTML">Comment créer des boîtes de dialogue avec HTML</a></li> -</ul> +### Interactivité -<h3 id="Sémantique_avancée_pour_les_éléments_textuels">Sémantique avancée pour les éléments textuels</h3> +- [Comment créer du contenu dépliable/repliable avec HTML](/fr/docs/Learn/HTML/Howto/Create_collapsible_content_with_HTML) +- [Comment ajouter des menus contextuels à une page web](/fr/docs/Learn/HTML/Howto/Add_context_menus_to_a_webpage) +- [Comment créer des boîtes de dialogue avec HTML](/fr/docs/Learn/HTML/Howto/Create_dialog_boxes_with_HTML) -<ul> - <li><a href="/fr/docs/Learn/HTML/Howto/Take_control_of_HTML_line_breaking">Comment contrôler le passage à la ligne en HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Mark_text_insertion_and_deletion">Comment restituer des changements (du texte ajouté/retiré)</a></li> -</ul> +### Sémantique avancée pour les éléments textuels -<h3 id="Images_et_multimédia_avancés">Images et multimédia avancés</h3> +- [Comment contrôler le passage à la ligne en HTML](/fr/docs/Learn/HTML/Howto/Take_control_of_HTML_line_breaking) +- [Comment restituer des changements (du texte ajouté/retiré)](/fr/docs/Learn/HTML/Howto/Mark_text_insertion_and_deletion) -<ul> - <li><a href="/fr/docs/Learn/HTML/Howto/Add_responsive_image_to_a_webpage">Comment ajouter une image adaptative (<em>responsive</em>) à une page web</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Add_vector_image_to_a_webpage">Comment ajouter une image vectorielle à une page web</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Comment ajouter une cartes de zones cliquables sur une image</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Create_dynamic_and_interactive_images">Comment créer des images dynamiques et interactives</a></li> -</ul> +### Images et multimédia avancés -<h3 id="L'internationalisation">L'internationalisation</h3> +- [Comment ajouter une image adaptative (_responsive_) à une page web](/fr/docs/Learn/HTML/Howto/Add_responsive_image_to_a_webpage) +- [Comment ajouter une image vectorielle à une page web](/fr/docs/Learn/HTML/Howto/Add_vector_image_to_a_webpage) +- [Comment ajouter une cartes de zones cliquables sur une image](/fr/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image) +- [Comment créer des images dynamiques et interactives](/fr/docs/Learn/HTML/Howto/Create_dynamic_and_interactive_images) -<p>HTML n'est pas monolingue. Il existe des outils qui permettent de résoudre les problèmes fréquents qui se posent lorsqu'on internationalise du contenu.</p> +### L'internationalisation -<ul> - <li><a href="/fr/docs/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage">Comment ajouter plusieurs langages sur une seule page web</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Handle_Japanese_ruby_characters">Comment gérer les caractères japonais (ruby)</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Display_time_and_date_with_HTML">Comment afficher des heures et des dates avec HTML</a></li> -</ul>
\ No newline at end of file +HTML n'est pas monolingue. Il existe des outils qui permettent de résoudre les problèmes fréquents qui se posent lorsqu'on internationalise du contenu. + +- [Comment ajouter plusieurs langages sur une seule page web](/fr/docs/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage) +- [Comment gérer les caractères japonais (ruby)](/fr/docs/Learn/HTML/Howto/Handle_Japanese_ruby_characters) +- [Comment afficher des heures et des dates avec HTML](/fr/docs/Learn/HTML/Howto/Display_time_and_date_with_HTML) diff --git a/files/fr/learn/html/howto/use_data_attributes/index.md b/files/fr/learn/html/howto/use_data_attributes/index.md index f18055985b..e4658b76de 100644 --- a/files/fr/learn/html/howto/use_data_attributes/index.md +++ b/files/fr/learn/html/howto/use_data_attributes/index.md @@ -8,73 +8,79 @@ tags: translation_of: Learn/HTML/Howto/Use_data_attributes original_slug: Apprendre/HTML/Comment/Utiliser_attributs_donnes --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<p><a href="/fr/docs/Web/Guide/HTML/HTML5">HTML5</a> est conçu avec le souci de l'extensibilité pour les données qui doivent être associées avec un élément particulier sans qu'on leur donne une signification spécifique. <a href="/fr/docs/Web/HTML/Attributs_universels#attr-data-*">Les attributs <code>data-*</code></a> nous permettent de stocker des informations supplémentaires sur les éléments sémantiques standard sans avoir recours à des attributs non-standard ni à des propriétés supplémentaires du DOM, ni à {{domxref("Node.setUserData()")}}.</p> +[HTML5](/fr/docs/Web/Guide/HTML/HTML5) est conçu avec le souci de l'extensibilité pour les données qui doivent être associées avec un élément particulier sans qu'on leur donne une signification spécifique. [Les attributs `data-*`](/fr/docs/Web/HTML/Attributs_universels#attr-data-*) nous permettent de stocker des informations supplémentaires sur les éléments sémantiques standard sans avoir recours à des attributs non-standard ni à des propriétés supplémentaires du DOM, ni à {{domxref("Node.setUserData()")}}. -<h2 id="Syntaxe_HTML">Syntaxe HTML</h2> +## Syntaxe HTML -<p>La syntaxe est simple. Tout attribut d'un élément dont le nom commence par <code>data-</code> est un attribut de données (<em>data attribute</em>). Si par exemple vous avez un article pour lequel vous souhaitez stocker des informations supplémentaires et qui n'ont pas de représentation visuelle, il vous suffit d'utiliser des attributs de données pour cela :</p> +La syntaxe est simple. Tout attribut d'un élément dont le nom commence par `data-` est un attribut de données (_data attribute_). Si par exemple vous avez un article pour lequel vous souhaitez stocker des informations supplémentaires et qui n'ont pas de représentation visuelle, il vous suffit d'utiliser des attributs de données pour cela : -<pre class="brush: html"><article +```html +<article id="voitureelectrique" data-columns="3" data-index-number="12314" - data-parent="voitures"> + data-parent="voitures"> ... -</article></pre> +</article> +``` -<h2 id="Accéder_via_du_code_JavaScript">Accéder via du code JavaScript</h2> +## Accéder via du code JavaScript -<p>Lire les valeurs de ces attributs avec du <a href="/fr/docs/Web/JavaScript">JavaScript</a> est également très simple. Vous pourriez utiliser {{domxref("Element.getAttribute", "getAttribute()")}} avec leur nom HTML complet pour les lire, mais le standard les définit d'une manière plus simple : un {{domxref("DOMStringMap")}} peut être lu via une propriété {{domxref("HTMLElement.dataset", "dataset")}}.</p> +Lire les valeurs de ces attributs avec du [JavaScript](/fr/docs/Web/JavaScript) est également très simple. Vous pourriez utiliser {{domxref("Element.getAttribute", "getAttribute()")}} avec leur nom HTML complet pour les lire, mais le standard les définit d'une manière plus simple : un {{domxref("DOMStringMap")}} peut être lu via une propriété {{domxref("HTMLElement.dataset", "dataset")}}. -<p>Pour obtenir un attribut <code>data</code> avec l'objet <code>dataset</code>, repérez la propriété avec la partie du nom de l'attribut qui suit le préfixe <code>data-</code> (notez que les tirets sont convertis en <em><a href="https://fr.wikipedia.org/wiki/CamelCase">camelCase</a></em>).</p> +Pour obtenir un attribut `data` avec l'objet `dataset`, repérez la propriété avec la partie du nom de l'attribut qui suit le préfixe `data-` (notez que les tirets sont convertis en _[camelCase](https://fr.wikipedia.org/wiki/CamelCase)_). -<pre class="brush: js">var article = document.getElementById('voitureelectrique'); +```js +var article = document.getElementById('voitureelectrique'); article.dataset.columns // "3" article.dataset.indexNumber // "12314" -article.dataset.parent // "voitures"</pre> +article.dataset.parent // "voitures" +``` -<p>Chaque propriété est une chaîne et peut être en lecture et écriture. Dans le cas ci-dessus passer le paramètre <code>article.dataset.columns = 5</code> mettrait l'attribut à <code>"5"</code>.</p> +Chaque propriété est une chaîne et peut être en lecture et écriture. Dans le cas ci-dessus passer le paramètre `article.dataset.columns = 5` mettrait l'attribut à `"5"`. -<h2 id="Accéder_via_du_code_CSS">Accéder via du code CSS</h2> +## Accéder via du code CSS -<p>Remarquez que, dans la mesure où les attributs data sont de simples attributs HTML, vous pouvez même y accéder par les <a href="/fr/docs/Web/CSS">CSS</a>. Par exemple, pour afficher les données associées à l'article, vous pouvez utiliser des <a href="/fr/docs/Web/CSS/content">contenus générés</a> en CSS avec la fonction {{cssxref("attr")}} :</p> +Remarquez que, dans la mesure où les attributs data sont de simples attributs HTML, vous pouvez même y accéder par les [CSS](/fr/docs/Web/CSS). Par exemple, pour afficher les données associées à l'article, vous pouvez utiliser des [contenus générés](/fr/docs/Web/CSS/content) en CSS avec la fonction {{cssxref("attr")}} : -<pre class="brush: css">article::before { +```css +article::before { content: attr(data-parent); -}</pre> +} +``` -<p>Vous pouvez également utiliser les <a href="/fr/docs/Web/CSS/Sélecteurs_d_attribut">sélecteurs d'attributs</a> en CSS pour modifier les styles en fonction des données :</p> +Vous pouvez également utiliser les [sélecteurs d'attributs](/fr/docs/Web/CSS/Sélecteurs_d_attribut) en CSS pour modifier les styles en fonction des données : -<pre class="brush: css">article[data-columns='3'] { +```css +article[data-columns='3'] { width: 400px; } article[data-columns='4'] { width: 600px; -}</pre> +} +``` -<p>Tout cela est visible dans l'exemple<a href="https://jsbin.com/ujiday/2/edit"> JSBin</a>. </p> +Tout cela est visible dans l'exemple[ JSBin](https://jsbin.com/ujiday/2/edit). -<p>Les attributs data peuvent aussi être stockés pour inclure des informations qui changent constamment, telles que les cores dans un jeu. L'utilisation des sélecteurs CSS et de l'accès par le JavaScript permettent ici de créer des effets sympas sans avoir à écrire vos propres routines d'affichage. Regardez cet exemple de <a href="https://www.youtube.com/watch?v=On_WyUB1gOk">capture vidéo d'écran</a> où sont utilisés les contenus générés et les transitions CSS (<a href="https://jsbin.com/atawaz/3/edit">exemple JSBin</a>).</p> +Les attributs data peuvent aussi être stockés pour inclure des informations qui changent constamment, telles que les cores dans un jeu. L'utilisation des sélecteurs CSS et de l'accès par le JavaScript permettent ici de créer des effets sympas sans avoir à écrire vos propres routines d'affichage. Regardez cet exemple de [capture vidéo d'écran](https://www.youtube.com/watch?v=On_WyUB1gOk) où sont utilisés les contenus générés et les transitions CSS ([exemple JSBin](https://jsbin.com/atawaz/3/edit)). -<p>Comme les valeurs des données sont des chaînes, toutes les valeurs doivent être entre guillemets " " sinon le formatage de style sera inopérant.</p> +Comme les valeurs des données sont des chaînes, toutes les valeurs doivent être entre guillemets " " sinon le formatage de style sera inopérant. -<h2 id="Problèmes">Problèmes</h2> +## Problèmes -<p>Ne stockez pas de contenu qui devrait être visible dans les attributs data, car les technologies d'assistance pourraient ne pas y avoir accès. De plus, les moteurs de recherche pourraient ne pas indexer les valeurs des attributs de données. </p> +Ne stockez pas de contenu qui devrait être visible dans les attributs data, car les technologies d'assistance pourraient ne pas y avoir accès. De plus, les moteurs de recherche pourraient ne pas indexer les valeurs des attributs de données. -<p>Les principaux problèmes à prendre en considération sont le support d'Internet Explorer et la performance. Internet Explorer 11+ prend en charge le standard, mais toutes les versions antérieures <a href="https://caniuse.com/#feat=dataset">ne prennent pas en charge le <code>dataset</code></a>. Pour prendre en charge IE 10 et versions inférieures vous avez besoin d'accéder aux attributs data avec {{domxref("Element.getAttribute", "getAttribute()")}}. De plus, la <a href="https://jsperf.com/data-dataset">la performance de lecture des attributs de données</a>, au stockage dans des structures de données JavaScript est assez faible. Utiliser un <code>dataset</code> est même plus lent que lire les données avec <code>getAttribute()</code>.</p> +Les principaux problèmes à prendre en considération sont le support d'Internet Explorer et la performance. Internet Explorer 11+ prend en charge le standard, mais toutes les versions antérieures [ne prennent pas en charge le `dataset`](https://caniuse.com/#feat=dataset). Pour prendre en charge IE 10 et versions inférieures vous avez besoin d'accéder aux attributs data avec {{domxref("Element.getAttribute", "getAttribute()")}}. De plus, la [la performance de lecture des attributs de données](https://jsperf.com/data-dataset), au stockage dans des structures de données JavaScript est assez faible. Utiliser un `dataset` est même plus lent que lire les données avec `getAttribute()`. -<p>Mais ceci dit, pour les métadonnées personnalisées associées aux éléments, c'est une excellente solution.</p> +Mais ceci dit, pour les métadonnées personnalisées associées aux éléments, c'est une excellente solution. -<p>Avec Firefox 49.0.2 (et peut-être dans les versions antérieures ou ultérieures), les attributs data qui dépassent 1022 attributs ne seront pas lisibles par Javascript (EcmaScript 4).</p> +Avec Firefox 49.0.2 (et peut-être dans les versions antérieures ou ultérieures), les attributs data qui dépassent 1022 attributs ne seront pas lisibles par Javascript (EcmaScript 4). -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>Cet article est une adaptation de <a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">« Utiliser les attributs de données en JavaScript et CSS »</a> publié sur hacks.mozilla.org (en anglais).</li> - <li>Les attributs personnalisés sont également pris en charge en SVG 2 ; consultez {{domxref("SVGElement.dataset")}} et {{SVGAttr("data-*")}} pour davantage d'informations.</li> - <li><em><a href="https://www.sitepoint.com/use-html5-data-attributes/">How to use HTML5 data attributes</a></em> (Sitepoint) (en anglais)</li> -</ul> +- Cet article est une adaptation de [« Utiliser les attributs de données en JavaScript et CSS »](https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/) publié sur hacks.mozilla.org (en anglais). +- Les attributs personnalisés sont également pris en charge en SVG 2 ; consultez {{domxref("SVGElement.dataset")}} et {{SVGAttr("data-*")}} pour davantage d'informations. +- _[How to use HTML5 data attributes](https://www.sitepoint.com/use-html5-data-attributes/)_ (Sitepoint) (en anglais) diff --git a/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.md b/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.md index e57980829e..5c11395239 100644 --- a/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.md +++ b/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.md @@ -9,90 +9,90 @@ tags: translation_of: Learn/HTML/Howto/Use_JavaScript_within_a_webpage original_slug: Apprendre/HTML/Comment/Utiliser_JavaScript_au_sein_d_une_page_web --- -<p>Dans cet article, nous verrons comment améliorer les pages web en ajoutant du code JavaScript dans des documents HTML.</p> +Dans cet article, nous verrons comment améliorer les pages web en ajoutant du code JavaScript dans des documents HTML. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Vous devriez au préalable savoir comment <a href="/fr/Learn/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a>.</td> - </tr> - <tr> - <th scope="row">Objectifs :</th> - <td>Savoir comment utiliser du code JavaScript dans un fichier HTML et apprendre les bonnes pratiques afin que le code JavaScript utilisé soit accessible.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Vous devriez au préalable savoir comment + <a href="/fr/Learn/HTML/Write_a_simple_page_in_HTML" + >créer un document HTML simple</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td> + Savoir comment utiliser du code JavaScript dans un fichier HTML et + apprendre les bonnes pratiques afin que le code JavaScript utilisé soit + accessible. + </td> + </tr> + </tbody> </table> -<h2 id="À_propos_de_JavaScript">À propos de JavaScript</h2> +## À propos de JavaScript -<p>{{Glossary("JavaScript")}} est un langage de programmation principalement utilisé côté client et qui peut également être utilisé côté serveur. Il permet entre autres de rendre les pages web interactives. JavaScript offre une myriade de possibilités.</p> +{{Glossary("JavaScript")}} est un langage de programmation principalement utilisé côté client et qui peut également être utilisé côté serveur. Il permet entre autres de rendre les pages web interactives. JavaScript offre une myriade de possibilités. -<div class="note"> -<p><strong>Note :</strong> Dans cet article, nous verrons le code HTML nécessaire pour utiliser du code JavaScript. Si vous souhaitez apprendre JavaScript, vous pouvez démarrer par notre article sur <a href="/fr/Learn/Getting_started_with_the_web/JavaScript_basics">les bases de JavaScript</a>. Si vous connaissez déjà JavaScript en partie ou que vous connaissez un autre langage de programmation, vous pouvez consulter <a href="/fr/docs/Web/JavaScript/Guide">le Guide JavaScript</a>.</p> -</div> +> **Note :** Dans cet article, nous verrons le code HTML nécessaire pour utiliser du code JavaScript. Si vous souhaitez apprendre JavaScript, vous pouvez démarrer par notre article sur [les bases de JavaScript](/fr/Learn/Getting_started_with_the_web/JavaScript_basics). Si vous connaissez déjà JavaScript en partie ou que vous connaissez un autre langage de programmation, vous pouvez consulter [le Guide JavaScript](/fr/docs/Web/JavaScript/Guide). -<h2 id="Comment_déclencher_le_code_JavaScript_depuis_le_document_HTML">Comment déclencher le code JavaScript depuis le document HTML</h2> +## Comment déclencher le code JavaScript depuis le document HTML -<p>Dans un navigateur, JavaScript ne fait rien « tout seul ». Il a besoin d'être lancé depuis les pages web HTML. Pour appeler du code JavaScript depuis votre document HTML, vous aurez besoin de l'élément {{htmlelement("script")}}. Il y a deux méthodes pour utiliser <code>script</code> : une qui sert lorsqu'on souhaite utiliser un script contenu dans un fichier tiers et une qui sert lorsqu'on intègre directement le code du script dans la page web.</p> +Dans un navigateur, JavaScript ne fait rien « tout seul ». Il a besoin d'être lancé depuis les pages web HTML. Pour appeler du code JavaScript depuis votre document HTML, vous aurez besoin de l'élément {{htmlelement("script")}}. Il y a deux méthodes pour utiliser `script` : une qui sert lorsqu'on souhaite utiliser un script contenu dans un fichier tiers et une qui sert lorsqu'on intègre directement le code du script dans la page web. -<h3 id="Faire_référence_à_un_script_externe">Faire référence à un script externe</h3> +### Faire référence à un script externe -<p>Généralement, un script est écrit dans un fichier <code>.js</code> à part. Pour exécuter un script depuis un fichier dans la page web, il suffira d'utiliser {{HTMLElement ('script')}} avec un attribut <code>src</code> pointant vers le fichier du script en utilisant l'URL du fichier :</p> +Généralement, un script est écrit dans un fichier `.js` à part. Pour exécuter un script depuis un fichier dans la page web, il suffira d'utiliser {{HTMLElement ('script')}} avec un attribut `src` pointant vers le fichier du script en utilisant l'URL du fichier : -<pre class="brush: html"><script src="chemin/vers/le/script.js"></script></pre> +```html +<script src="chemin/vers/le/script.js"></script> +``` -<h3 id="Inscrire_le_code_JavaScript_dans_le_document_HTML">Inscrire le code JavaScript dans le document HTML</h3> +### Inscrire le code JavaScript dans le document HTML -<p>Il est également possible d'insérer du code JavaScript directement dans la balise <code><script></code> sans fournir d'attribut <code>src</code>.</p> +Il est également possible d'insérer du code JavaScript directement dans la balise `<script>` sans fournir d'attribut `src`. -<pre class="brush: html"><script> +```html +<script> window.addEventListener('load', function () { console.log('Cette fonction est exécutée une fois quand la page est chargée.'); }); -</script></pre> - -<p>Cette méthode peut s'avérer pratique quand on n'utilise qu'un code très court. Cela dit, utiliser des fichiers séparés pour stocker le code JavaScript vous permettra :</p> - -<ul> - <li>de rester concentré-e sur le contenu en cours</li> - <li>d'écrire du HTML qui se suffit à lui-même</li> - <li>d'écrire des applications JavaScript structurées</li> -</ul> - -<h2 id="Utiliser_les_scripts_de_façon_accessible">Utiliser les scripts de façon accessible</h2> - -<p>L'accessibilité est un enjeu majeur du développement logiciel. JavaScript peut rendre un site web plus accessible lorsqu'il est utilisé correctement. Il peut aussi détruire toute trace d'accessibilité s'il est utilisé sans aucune considération. Voici quelques pratiques qui vous permettront de tirer le meilleur parti de JavaScript pour l'accessibilité :</p> - -<ul> - <li><strong>Tout le contenu d'un document doit être disponible sous forme de texte (structuré).</strong> HTML doit être utilisé le plus possible pour stocker le contenu. Par exemple, si vous avez implémenté une super barre de chargement, n'oubliez pas de fournir les pourcentages en texte dans le HTML. De la même façon, les menus déroulants doivent être structurées en <a href="/fr/Learn/HTML/Howto/Create_list_of_items_with_HTML">listes non ordonnées</a> de <a href="/fr/Learn/HTML/Howto/Create_a_hyperlink">liens</a>.</li> - <li><strong>Toutes les fonctionnalités doivent être accessibles depuis le clavier.</strong> - <ul> - <li>Les utilisateurs doivent pouvoir utiliser la touche de tabulation pour naviguer entre les différents contrôles (les liens, les entrées de formulaires, etc.) en suivant un ordre logique.</li> - <li>Si vous utilisez les événements liés au pointage (les événéments liés à la souris ou au toucher), les fonctionnalités offertes doivent également être accessibles via le clavier.</li> - <li>Testez votre site en utilisant uniquement le clavier.</li> - </ul> - </li> - <li><strong>N'utilisez pas de limites de temps arbitraires.</strong> Cela prend plus de temps de naviguer au clavier ou d'écouter le contenu lu par un lecteur d'écran. Il est donc impossible de prévoir combien de temps cela prendra pour qu'un utilisateur ou pour que le navigateur accomplisse une tâche donnée.</li> - <li><strong>Les animations doivent être courtes et légères, sans clignotement.</strong> Les clignotements peuvent agacer, ou pire, <a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html">entraîner des crises d'épilepsie</a>. Si une animation dure plus longtemps que quelques secondes, il faudra fournir une méthode pour l'annuler.</li> - <li><strong>Laissez les utilisateurs initier les interactions.</strong> Cela signifie qu'il ne faut pas mettre à jour du contenu, rediriger vers un autre document ou rafraîchir la page automatiquement. Il ne faut pas utiliser de caroussels ou afficher des pop-ups sans aucun avertissement.</li> - <li><strong>Ayez un plan de secours pour les utilisateurs qui n'ont pas JavaScript activé.</strong> Certaines personnes désactivent JavaScript afin d'améliorer les performances ou la sécurité. D'autres peuvent rencontrer des problèmes de connectivité qui empêcheraient le chargement des scripts. De plus, certains scripts tiers (publicités, scripts de tracking, extensions de navigateurs) peuvent casser les scripts que vous avez écrit. - <ul> - <li><em>A minima</em>, laissez un court message grâce à la balise {{HTMLElement("noscript")}} : <code><noscript>Pour utiliser ce site, merci d'activer JavaScript.</noscript></code></li> - <li>Idéalement, lorsque c'est possible, dupliquez les fonctionnalités offertes par JavaScript via le HTML et des scripts exécutés côté serveur.</li> - <li>Si vous souhaitez mettre en place des effets visuels, CSS vous permettra d'y parvenir plus intuitivement.</li> - <li> - <p><em>Puisque tout le monde, ou presque, a JavaScript activé, <code><noscript></code> ne représente donc pas une excuse pour écrire des scripts inaccessibles.</em></p> - </li> - </ul> - </li> -</ul> - -<h2 id="En_savoir_plus">En savoir plus</h2> - -<ul> - <li>{{htmlelement("script")}}</li> - <li>{{htmlelement("noscript")}}</li> - <li><a href="http://www.sitepoint.com/javascript-accessibility-101/">Une introduction pour utiliser JavaScript de façon accessible, par James Edwards (en anglais)</a></li> - <li><a href="http://www.w3.org/TR/WCAG20/">Les consignes d'accessibilité préconisées par le W3C</a></li> -</ul> +</script> +``` + +Cette méthode peut s'avérer pratique quand on n'utilise qu'un code très court. Cela dit, utiliser des fichiers séparés pour stocker le code JavaScript vous permettra : + +- de rester concentré-e sur le contenu en cours +- d'écrire du HTML qui se suffit à lui-même +- d'écrire des applications JavaScript structurées + +## Utiliser les scripts de façon accessible + +L'accessibilité est un enjeu majeur du développement logiciel. JavaScript peut rendre un site web plus accessible lorsqu'il est utilisé correctement. Il peut aussi détruire toute trace d'accessibilité s'il est utilisé sans aucune considération. Voici quelques pratiques qui vous permettront de tirer le meilleur parti de JavaScript pour l'accessibilité : + +- **Tout le contenu d'un document doit être disponible sous forme de texte (structuré).** HTML doit être utilisé le plus possible pour stocker le contenu. Par exemple, si vous avez implémenté une super barre de chargement, n'oubliez pas de fournir les pourcentages en texte dans le HTML. De la même façon, les menus déroulants doivent être structurées en [listes non ordonnées](/fr/Learn/HTML/Howto/Create_list_of_items_with_HTML) de [liens](/fr/Learn/HTML/Howto/Create_a_hyperlink). +- **Toutes les fonctionnalités doivent être accessibles depuis le clavier.** + + - Les utilisateurs doivent pouvoir utiliser la touche de tabulation pour naviguer entre les différents contrôles (les liens, les entrées de formulaires, etc.) en suivant un ordre logique. + - Si vous utilisez les événements liés au pointage (les événéments liés à la souris ou au toucher), les fonctionnalités offertes doivent également être accessibles via le clavier. + - Testez votre site en utilisant uniquement le clavier. + +- **N'utilisez pas de limites de temps arbitraires.** Cela prend plus de temps de naviguer au clavier ou d'écouter le contenu lu par un lecteur d'écran. Il est donc impossible de prévoir combien de temps cela prendra pour qu'un utilisateur ou pour que le navigateur accomplisse une tâche donnée. +- **Les animations doivent être courtes et légères, sans clignotement.** Les clignotements peuvent agacer, ou pire, [entraîner des crises d'épilepsie](http://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html). Si une animation dure plus longtemps que quelques secondes, il faudra fournir une méthode pour l'annuler. +- **Laissez les utilisateurs initier les interactions.** Cela signifie qu'il ne faut pas mettre à jour du contenu, rediriger vers un autre document ou rafraîchir la page automatiquement. Il ne faut pas utiliser de caroussels ou afficher des pop-ups sans aucun avertissement. +- **Ayez un plan de secours pour les utilisateurs qui n'ont pas JavaScript activé.** Certaines personnes désactivent JavaScript afin d'améliorer les performances ou la sécurité. D'autres peuvent rencontrer des problèmes de connectivité qui empêcheraient le chargement des scripts. De plus, certains scripts tiers (publicités, scripts de tracking, extensions de navigateurs) peuvent casser les scripts que vous avez écrit. + + - _A minima_, laissez un court message grâce à la balise {{HTMLElement("noscript")}} : `<noscript>Pour utiliser ce site, merci d'activer JavaScript.</noscript>` + - Idéalement, lorsque c'est possible, dupliquez les fonctionnalités offertes par JavaScript via le HTML et des scripts exécutés côté serveur. + - Si vous souhaitez mettre en place des effets visuels, CSS vous permettra d'y parvenir plus intuitivement. + - _Puisque tout le monde, ou presque, a JavaScript activé, `<noscript>` ne représente donc pas une excuse pour écrire des scripts inaccessibles._ + +## En savoir plus + +- {{htmlelement("script")}} +- {{htmlelement("noscript")}} +- [Une introduction pour utiliser JavaScript de façon accessible, par James Edwards (en anglais)](http://www.sitepoint.com/javascript-accessibility-101/) +- [Les consignes d'accessibilité préconisées par le W3C](http://www.w3.org/TR/WCAG20/) |