CATALOGUE Code & Data Formation Web App Créer une Web App Création d'une Liste avec Vignette en HTML5 et jQuery Mobile

Création d'une Liste avec Vignette en HTML5 et jQuery Mobile

Un menu en liste avec vignette
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Créer une Web App
Revoir le teaser Je m'abonne
Transcription
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Étapes pour créer une liste cliquable

Objectifs

Les objectifs de cette vidéo sont:

  • Comprendre comment créer une liste cliquable avec vignette en HTML5 et jQuery Mobile.
  • Savoir intégrer des images, titres et descriptions au sein d'une balise A.
  • Apprendre à utiliser la DTD HTML5 pour permettre l'encapsulation des éléments de type bloc.
  • Configurer les attributs jQuery Mobile pour améliorer l'aspect visuel des listes.

Résumé

Apprenez à créer une liste avec vignette en HTML5 et jQuery Mobile où toute la liste est cliquable pour faciliter la navigation.

Description

Dans cette leçon, nous allons vous montrer comment créer une liste avec vignette en utilisant HTML5 et jQuery Mobile. L'objectif est de rendre les éléments de la liste cliquables, en rendant toute la vignettes (image, titre et description) interactives. Pour ce faire, nous allons utiliser une balise A pour englober l'ensemble des éléments de la liste. Grâce à la DTD de HTML5, il est permis d'inclure des balises de type bloc comme H3 et IMG à l'intérieur d'une balise A.

Nous débuterons en modifiant la DTD pour s'assurer que notre document est bien en HTML5. Ensuite, nous intégrerons une image de 75 pixels de large, un titre de troisième niveau (H3) pour nommer l'élément de la liste, un paragraphe pour ajouter une description, et nous clôturerons ces éléments avec la balise A. Nous finaliserons en utilisant le DataInsetTrue pour améliorer l'esthétique de la liste.

Après avoir suivi cette leçon, vous serez capable de créer des listes cliquables avec des vignettes qui améliorent l'interaction utilisateur et l'attrait visuel de vos pages web. Cette compétence est particulièrement utile pour les développeurs web souhaitant enrichir leurs interfaces utilisateur avec des listes interactives et visuellement attrayantes.

Voir plus

Questions - réponses

Quels sont les éléments de base ajoutés à la balise A pour rendre une liste cliquable?
Les éléments de base sont une image (IMG), un titre (H3), un paragraphe et enfin la balise A pour englober l'ensemble.
Quelle est la taille recommandée pour les icônes utilisées dans cette liste?
Il est recommandé d'utiliser des icônes de 75 pixels de large pour cette liste.
Qu'est-ce que le DataInsetTrue et quel est son rôle dans la liste?
Le DataInsetTrue est un attribut utilisé dans jQuery Mobile qui permet de regrouper les éléments de la liste pour une meilleure présentation visuelle.

Programme détaillé