HTML dynamique (DHTML) vous permet de créer une expérience de style application sur vos sites Web, en réduisant la fréquence à laquelle des pages entières doivent être entièrement chargées. Dans les applications, lorsque vous cliquez sur quelque chose, l'application change immédiatement pour afficher ce contenu spécifique ou pour vous fournir votre réponse.
En revanche, les pages Web doivent généralement être rechargées ou une page entièrement nouvelle doit être chargée. Cela peut rendre l'expérience utilisateur plus décousue. Vos clients doivent attendre le chargement de la première page, puis attendre à nouveau le chargement de la deuxième page, et ainsi de suite.
Utilisation pour améliorer l'expérience du spectateur
En utilisant DHTML, l'un des moyens les plus simples d'améliorer cette expérience est d'avoir div les éléments s'activent et se désactivent pour afficher le contenu lorsqu'il est demandé. UNE élément div définit des divisions logiques sur votre page Web. Considérez un div comme une boîte pouvant contenir des paragraphes, des titres, des liens, des images et même d'autres div.
Ce dont vous aurez besoin
Afin de créer un div qui peut être activé et désactivé, vous avez besoin des éléments suivants:
- Un lien pour contrôler le div en l'allumant et en l'éteignant lorsque vous cliquez dessus.
- Le div à afficher et à masquer.
- CSS pour styliser le div caché ou visible.
- JavaScript pour effectuer l'action.
Le lien de contrôle
Le lien de contrôle est la partie la plus simple. Créez simplement un lien comme vous le feriez vers une autre page. Pour l'instant, laissez le attribut href Vide.
Apprendre le HTML
Placez-le n'importe où sur votre page Web.
La Div à montrer et à cacher
Créez l'élément div que vous souhaitez afficher et masquer. Assurez-vous que votre div a un identifiant unique dessus. Dans l'exemple, l'identifiant unique est apprendre le HTML.
Il s'agit de la colonne de contenu. Il commence en blanc à l'exception de ce texte d'explication. Choisissez ce que vous voulez apprendre dans la colonne de navigation à gauche. Le texte apparaîtra ci-dessous :
Apprendre le HTML
- Cours HTML gratuit
- Tutoriel HTML
- Qu'est-ce que XHTML ?
Le CSS pour afficher et masquer le div
Créez deux classes pour votre CSS: une pour masquer le div et l'autre pour l'afficher. Vous avez deux options pour cela: l'affichage et la visibilité.
L'affichage supprime le div du flux de la page et la visibilité change simplement la façon dont il est vu. Certains codeurs préfèrent affichage, mais parfois visibilité a du sens aussi. Par example:
.hidden { afficher: aucun; }
.unhidden { afficher: bloc; }
Si vous souhaitez utiliser la visibilité, remplacez ces classes par:
.hidden { visibilité: caché; }
.unhidden { visibilité: visible; }
Ajoutez la classe masquée à votre div afin qu'elle commence comme masquée sur la page:
JavaScript pour le faire fonctionner
Tout ce que fait ce script, c'est de regarder la classe actuelle définie sur votre div et de la faire basculer sur non masquée si elle est marquée comme masquée ou vice versa.
Ce ne sont que quelques lignes de JavaScript. Placez ce qui suit dans la tête de votre document HTML (avant le.
Ce que fait ce script, ligne par ligne:
Appelle la fonction afficher, et divID est l'identifiant unique exact que vous souhaitez afficher ou masquer.
Configure une variable iélément avec la valeur de votre div.
Effectue une simple vérification du navigateur; si le navigateur ne supporte pas getElementById, ce script ne fonctionnera pas.
Vérifie la classe sur le div. Si c'est caché, il le change en non masqué. Sinon, il le change en caché.
Ferme le si déclaration.
Ferme la fonction.
Pour que le script fonctionne, vous devez faire une autre chose. Revenez à votre lien et ajoutez le javascript à l'attribut href. Assurez-vous d'utiliser l'identifiant unique exact que vous avez nommé votre div dans ce href:
Apprendre le HTML
Toutes nos félicitations! Vous avez maintenant un div qui s'affichera et se cachera chaque fois que vous cliquerez sur un lien.
Problèmes possibles à surveiller
Ce script n'est pas infaillible. Il existe certaines situations dans lesquelles cela pourrait vous causer des problèmes:
JavaScript n'est pas activé. Si vos lecteurs n'ont pas JavaScript ou s'il est désactivé, ce script ne fonctionnera pas. Les divs cachés restent cachés, peu importe ce que font vos lecteurs. Une façon de résoudre ce problème consiste à placer les div cachés dans une zone noscript, mais vous devrez jouer avec cela pour les faire s'afficher correctement.
Trop de contenu. Cela peut être un excellent outil pour permettre à vos lecteurs de ne voir que le contenu dont ils ont besoin, mais si vous en mettez trop dans les div cachés, cela peut affecter considérablement le chargement de la page. N'oubliez pas que même si le contenu ne s'affiche pas, le navigateur Web le télécharge toujours, alors faites preuve de bon sens quant à la quantité de contenu que vous masquez.
Les clients ne comprennent pas. Enfin, les clients peuvent ne pas être habitués à cliquer sur un lien qui affiche ou masque du contenu. Jouez avec des icônes (plus les signes et les flèches fonctionnent bien) ou du texte pour expliquer ce qui arrivera à vos clients. Une autre solution consiste à laisser l'un des div ouvert tandis que les autres sont fermés. Cela peut transmettre l'idée à vos clients, afin qu'ils puissent comprendre plus rapidement comment ouvrir le contenu restant.
Vous devriez toujours tester le HTML dynamique comme celui-ci avec vos clients. Une fois que vous êtes sûr qu'ils peuvent le comprendre et l'utiliser, cela peut être un excellent moyen d'obtenir une grande quantité de contenu sur vos pages Web sans occuper beaucoup d'espace visible.