From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- .../add_a_hit_map_on_top_of_an_image/index.html | 126 +++++++++++++++++ .../author_fast-loading_html_pages/index.html | 118 ++++++++++++++++ .../html/howto/define_terms_with_html/index.html | 153 +++++++++++++++++++++ files/fr/learn/html/howto/index.html | 149 ++++++++++++++++++++ .../html/howto/use_data_attributes/index.html | 79 +++++++++++ .../use_javascript_within_a_webpage/index.html | 99 +++++++++++++ 6 files changed, 724 insertions(+) create mode 100644 files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html create mode 100644 files/fr/learn/html/howto/author_fast-loading_html_pages/index.html create mode 100644 files/fr/learn/html/howto/define_terms_with_html/index.html create mode 100644 files/fr/learn/html/howto/index.html create mode 100644 files/fr/learn/html/howto/use_data_attributes/index.html create mode 100644 files/fr/learn/html/howto/use_javascript_within_a_webpage/index.html (limited to 'files/fr/learn/html/howto') diff --git a/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html b/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html new file mode 100644 index 0000000000..836cd29e95 --- /dev/null +++ b/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html @@ -0,0 +1,126 @@ +--- +title: Ajouter une carte de zones cliquables sur une image +slug: Apprendre/HTML/Comment/Ajouter_carte_zones_cliquables_sur_image +tags: + - Guide + - HTML + - Intermediate + - Navigation +translation_of: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image +--- +
+

Dans cet article, nous verrons comment construire une carte imagée cliquable en commençant par les inconvénients de cette méthode.

+
+ + + + + + + + + + + + +
Prérequis :Vous devez au préalable savoir comment créer un document HTML simple et connaître comment ajouter des images accessibles à une page web.
Objectifs :Apprendre comment faire pour que différentes zones d'une même image pointent vers différentes pages.
+ +
+

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.

+
+ +

Les cartes imagées cliquables et leurs inconvénients

+ +

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.

+ +

Auparavant, les cartes imagées était assez populaires mais, malgré cette popularité, elles posent quelques problèmes en termes de performances et d'accessibilité.

+ +

Les liens textuels (é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é.

+ +

Comment insérer une carte imagée

+ +

Étape 1 : l'image

+ +

N'importe quelle image ne fera pas l'affaire pour construire une telle carte.

+ + + +

On insère une image de la même façon que d'habitude (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.

+ +

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 :

+ +
<img
+  src="image-map.png"
+  alt=""
+  usemap="#exemple-map-1" />
+
+ +

Étape 2 : Activer les régions actives

+ +

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 :

+ +
<map name="exemple-map-1">
+
+</map>
+
+ +

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.

+ +

Les éléments <area> sont des éléments vides mais qui utilisent quatres attributs :

+ +
+
{{htmlattrxref('shape','area')}}
+
{{htmlattrxref('coords','area')}}
+
+

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.

+ +
    +
  • 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).
    • +
+ +

Les coordonnées exprimées sont données en pixels CSS.

+ +

Dans le cas où les définitions de certaines régions se chevauchent, ce sera l'ordre des zones qui donnera la priorité.

+
+
{{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')}}
+
+

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.

+ +

Vous pouvez écrire alt="" si l'attribut href est vide et que l'image entière possède déjà un attribut alt renseigné.

+
+
+ +
<map name="exemple-map-1">
+  <area shape="circle" coords="200,250,25"
+    href="page-2.html" alt="exemple de cercle" />
+
+  <area shape="rect" coords="10, 5, 20, 15"
+    href="page-3.html" alt="exemple de rectangle" />
+
+</map>
+ +

Étape 3 : S'assurer que la carte fonctionne pour chacun

+ +

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. Dudley Storey illustre une méthode qui consiste à utiliser SVG pour réaliser un effet de carte imagée ainsi qu'une bidouille pour les images matricielles avec une combinaison de SVG.

+ +

En savoir plus

+ + diff --git a/files/fr/learn/html/howto/author_fast-loading_html_pages/index.html b/files/fr/learn/html/howto/author_fast-loading_html_pages/index.html new file mode 100644 index 0000000000..58e21b4603 --- /dev/null +++ b/files/fr/learn/html/howto/author_fast-loading_html_pages/index.html @@ -0,0 +1,118 @@ +--- +title: Astuces de création de pages HTML à affichage rapide +slug: Web/Guide/HTML/Astuces_de_création_de_pages_HTML_à_affichage_rapide +tags: + - HTML + - Performance +translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +--- +

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.

+ +

Réduire le poids de la page

+ +

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:

+ + + +

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.

+ +

Réduisez le nombre de fichiers

+ +

Réduire le nombre de fichiers référencés dans une page web diminue le nombre de connexions HTTP nécessaire pour télécharger une page.

+ + + +

Les videos sont diffusées progressivement depuis le serveur, elles ne ralentisseent donc pas le chargement de votre page.

+ +

Réduire les domaines des recherches

+ +

É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.

+ +

Réutiliser le contenu du cache

+ +

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.
+
+ Plus d'informations:
+
+    1. HTTP Conditional Get for RSS Hackers
+    2. HTTP 304: Not Modified
+    3. On HTTP Last-Modified and ETag

+ +

Réduire le nombre de scripts en ligne

+ +

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 ().

+ +

Utilisez le CSS moderne et des balises valides

+ +

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  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.

+ +

Segmentez votre contenu

+ +

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:

+ +
<TABLE>
+  <TABLE>
+    <TABLE>
+          ...
+    </TABLE>
+  </TABLE>
+</TABLE>
+
+
+ +

Préferez des <table> non-imbriquées ou <div> comme dans l'exemple suivant:

+ +
> TABLE <TABLE> ...</
+> TABLE <TABLE> ...</
+> TABLE <TABLE> ...</
+ +

Préciser la taille des images et des tableaux

+ +

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:

+ +
  table-layout: fixed;
+
+
+ +

et doit spécifier la largeur des colonnes en utilisant le COL et les balises html COLGROUP.

+ +

Choisissez les versions des navigateur ciblés

+ +


+ 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.
+
+ 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.
+
+ 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.

+ +

Liens connexes

+ +


+     * Optimisez vos pages avec Yslow
+     * Livre: "Speed Up Your Site" par Andy King
+     * Site Optimization Tutorial (WebMonkey) (en anglais) 
+     * Best Practices for Speeding Up Your Web Site (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.html b/files/fr/learn/html/howto/define_terms_with_html/index.html new file mode 100644 index 0000000000..3e8aa64e90 --- /dev/null +++ b/files/fr/learn/html/howto/define_terms_with_html/index.html @@ -0,0 +1,153 @@ +--- +title: Définir des termes avec HTML +slug: Apprendre/HTML/Comment/Définir_des_termes_avec_HTML +tags: + - Beginner + - Guide + - HTML + - Learn +translation_of: Learn/HTML/Howto/Define_terms_with_HTML +--- +
+

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.

+
+ + + + + + + + + + + + +
Prérequis :Vous devez au préalable savoir comment créer un document HTML simple.
Objectifs :Apprendre comment introduire de nouveaux mots-clés et comment construire une liste de définitions.
+ +

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 :

+ +
+
+
Bleu (adjectif)
+
La couleur du ciel lors d'un temps clair.
+ Le ciel est bleu.
+
Se dit d'une viande lorsqu'elle est saisie rapidement, au grill, de chaque côté.
+ Un steak bleu s'il vous plaît.
+
+
+ +

Mais il arrive fréquemment qu'on définisse des termes de façon moins formelle, comme ici :

+ +
+

Firefox est le navigateur web créé et développé par la Fondation Mozilla.

+
+ +

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.

+ +

Comment écrire un description informelle

+ +

Dans certains manuels, à la première occurence d'un terme, celui-ci est placé en gras et défini immédiatement.

+ +

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) :

+ +
<p><dfn>Firefox</dfn> est le navigateur créé et développé par la Fondation Mozilla.</p>
+
+ +
+

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.

+
+ +

Cas spécifique : les abréviations

+ +

En ce qui concerne les abréviations, il est préférable de les identifier séparement 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>
+  <dfn><abbr>HTML</abbr> (hypertext markup language)</dfn>
+   est un langage de description utilisé pour structurer des documents sur le Web.
+</p>
+ +
+

La spécification HTML met en avant l'attribut title 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.

+
+ +

Améliorer l'accessibilité

+ +

{{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 pour associer, formellement, un terme à sa définition :

+ +
<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>
+ +

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.

+ +

Comment construire une liste de descriptions

+ +

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.).

+ +
+

Les listes de descriptions ne doivent pas être utilisées pour retranscrire des dialogues. En effet, la conversation ne décrit pas les différents interlocuteurs. Voici quelques recommandations pour retranscrire un dialogue dans un document web.

+
+ +

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")}}.

+ +

Un exemple simple

+ +

Voici un exemple simple qui dresse une liste de descriptions de plats :

+ +
<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>
+
+  <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>
+
+  <dt>chianti</dt>
+    <dd>
+      un vin italien, sec, originaire de Toscane
+    </dd>
+</dl>
+
+ +
+

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.

+
+ +

Améliorer l'aspect visuel

+ +

Voici comment un navigateur affichera la liste précédente :

+ +

{{EmbedLiveSample("Un_exemple_simple", 600, 180)}}

+ +

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")}} :

+ +
dt {
+  font-weight: bold;
+}
+
+ +

Cela permettra d'obtenir le résultat suivant :

+ +

{{EmbedLiveSample("Comment_construire_une_liste_de_descriptions", 600, 180)}}

+ +

En savoir plus

+ + diff --git a/files/fr/learn/html/howto/index.html b/files/fr/learn/html/howto/index.html new file mode 100644 index 0000000000..3db762dc5a --- /dev/null +++ b/files/fr/learn/html/howto/index.html @@ -0,0 +1,149 @@ +--- +title: Apprendre à utiliser HTML pour résoudre des problèmes +slug: Apprendre/HTML/Comment +tags: + - CodingScripting + - HTML +translation_of: Learn/HTML/Howto +--- +

Une fois les bases acquises, 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.

+ +

Cas d'utilisation fréquents

+ +

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 :

+ +
+
+

Structure de base

+ +

En HTML, tout commence par la structure du document. Si vous débutez avec HTML, vous devriez démarrer avec :

+ + + +

Sémantique de base pour le texte

+ +

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.

+ + +
+ +
+

Les hyperliens

+ +

Les {{Glossary("hyperlien", "hyperliens")}} rendent la navigation très simple sur le web, ils peuvent être utilisés de différentes façons :

+ + + +

Images et multimédia

+ + + +

Script et mise en forme

+ +

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")}}.

+ + + +

Intégrer du contenu

+ + +
+
+ +

Problèmes avancés ou rares

+ +

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 :

+ +
+
+

Les formulaires

+ +

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. Vous pouvez commencer ici :

+ + + +

Les informations tabulaires

+ +

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 :

+ + + +

La représentation de données

+ + + +

Interactivité

+ + +
+ +
+

Sémantique avancée pour les éléments textuels

+ + + +

Images et multimédia avancés

+ + + +

L'internationalisation

+ +

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.

+ + +
+
diff --git a/files/fr/learn/html/howto/use_data_attributes/index.html b/files/fr/learn/html/howto/use_data_attributes/index.html new file mode 100644 index 0000000000..d67fd6a93d --- /dev/null +++ b/files/fr/learn/html/howto/use_data_attributes/index.html @@ -0,0 +1,79 @@ +--- +title: Utiliser les attributs de données +slug: Apprendre/HTML/Comment/Utiliser_attributs_donnes +tags: + - Guide + - HTML + - Web +translation_of: Learn/HTML/Howto/Use_data_attributes +--- +
{{LearnSidebar}}
+ +

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-* 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()")}}.

+ +

Syntaxe HTML

+ +

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 :

+ +
<article
+  id="voitureelectrique"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="voitures">
+...
+</article>
+ +

Accéder via du code JavaScript

+ +

Lire les valeurs de ces attributs avec du 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")}}.

+ +

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).

+ +
var article = document.getElementById('voitureelectrique');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "voitures"
+ +

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".

+ +

Accéder via du code CSS

+ +

Remarquez que, dans la mesure où les attributs data sont de simples attributs HTML, vous pouvez même y accéder par les CSS. Par exemple, pour afficher les données associées à l'article, vous pouvez utiliser des contenus générés en CSS avec la fonction {{cssxref("attr")}} :

+ +
article::before {
+  content: attr(data-parent);
+}
+ +

Vous pouvez également utiliser les sélecteurs d'attributs en CSS pour modifier les styles en fonction des données :

+ +
article[data-columns='3'] {
+  width: 400px;
+}
+article[data-columns='4'] {
+  width: 600px;
+}
+ +

Tout cela est visible dans l'exemple JSBin. 

+ +

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 où sont utilisés les contenus générés et les transitions CSS (exemple JSBin).

+ +

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.

+ +

Problèmes

+ +

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. 

+ +

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. 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, 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().

+ +

Mais ceci dit, pour les métadonnées personnalisées associées aux éléments, c'est une excellente solution.

+ +

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).

+ +

Voir aussi

+ + diff --git a/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.html b/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.html new file mode 100644 index 0000000000..7db20d6d76 --- /dev/null +++ b/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.html @@ -0,0 +1,99 @@ +--- +title: Utiliser JavaScript au sein d'une page web +slug: Apprendre/HTML/Comment/Utiliser_JavaScript_au_sein_d_une_page_web +tags: + - Beginner + - HTML + - JavaScript + - OpenPractices +translation_of: Learn/HTML/Howto/Use_JavaScript_within_a_webpage +--- +
+

Dans cet article, nous verrons comment améliorer les pages web en ajoutant du code JavaScript dans des documents HTML.

+
+ + + + + + + + + + + + +
Prérequis :Vous devriez au préalable savoir comment créer un document HTML simple.
Objectifs :Savoir comment utiliser du code JavaScript dans un fichier HTML et apprendre les bonnes pratiques afin que le code JavaScript utilisé soit accessible.
+ +

À propos de JavaScript

+ +

{{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.

+ +
+

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. Si vous connaissez déjà JavaScript en partie ou que vous connaissez un autre langage de programmation, vous pouvez consulter le Guide JavaScript.

+
+ +

Comment déclencher le code JavaScript depuis le document HTML

+ +

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.

+ +

Faire référence à un script externe

+ +

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 :

+ +
<script src="chemin/vers/le/script.js"></script>
+ +

Inscrire le code JavaScript dans le document HTML

+ +

Il est également possible d'insérer du code JavaScript directement dans la balise <script> sans fournir d'attribut src.

+ +
<script>
+window.addEventListener('load', function () {
+  console.log('Cette fonction est exécutée une fois quand la page est chargée.');
+});
+</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 :

+ + + +

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é :

+ + + +

En savoir plus

+ + -- cgit v1.2.3-54-g00ecf