HTML 5 - 5.5 Projet activité personnelle

Ce projet vous invite à créer un portfolio personnel présentant vos activités avec HTML et CSS. Commencez par une structure de base : un titre <h1>, une liste <ul> contenant les activités sous forme d’éléments <li>. À l’intérieur de chaque élément, placez un lien <a> et un paragraphe  décrivant l’activité. Cette structure sémantique est fondamentale pour l’accessibilité et la clarté du code.

Enrichissez votre projet avec les icônes Material Icons de Google. Intégrez la feuille de style Material Icons dans le <head>, puis utilisez les icônes en ajoutant des balises nom_icone. Par exemple, une icône visage s’ajoute avec face. Ces icônes donnent une dimension visuelle professionnelle à votre portfolio.

Stylage CSS et accessibilité

Modifiez les propriétés CSS pour améliorer la présentation : font-family, font-size, text-align, background-color, padding et margin.
Pour rendre toute la zone cliquable sur mobile, utilisez display: block sur le lien et ajustez le padding pour que la zone cliquable soit suffisante.
Augmentez la taille des icônes avec font-size pour améliorer la visibilité et la facilité d’interaction.

L’enjeu majeur est de garantir que l’intégralité de chaque élément d’activité soit cliquable, pas seulement le texte. En défissant display: block sur les liens et en ajustant le padding et la largeur, vous créez des zones tactiles confortables pour les utilisateurs mobiles. Cette attention à l’accessibilité et à l’expérience utilisateur transforme un simple projet en véritable portfolio professionnel.

En résumé

Ce projet HTML5 guide la création d'une page listant les activités personnelles avec structure HTML simple (h1, liste ul/li) et intégration d'icônes Material Icons via CDN. Le tutorial insiste sur l'amélioration progressive du design avec CSS (typographie, espacement, couleurs) et surtout sur l'optimisation pour l'expérience utilisateur mobile en rendant les zones de contenu entièrement cliquables grâce à display: block.

Points clés

Structure HTML de base: doctype, h1 comme titre, liste ul/li contenant les liens et paragraphes des activités
Intégration Material Icons via lien CDN suivi de balises nom_icone
Styling CSS progressif: font-family Verdana, text-align center, padding et margin pour l'espacement, background-color gris
float: left pour afficher les éléments de liste horizontalement au lieu de verticalement
display: block sur les liens pour transformer les éléments inline en blocs cliquables sur mobile
Gestion du padding sur les éléments cliquables pour créer une zone d'interaction tactile agrandie

Questions fréquentes

Comment intégrer les icônes Material Icons dans la page?

Copier le lien CDN depuis materialize.io (Developer Guide → Icons for Font Web), puis utiliser une balise nom_icone à l'intérieur du lien pour afficher l'icône souhaitée (ex: face pour un visage).

Pourquoi utiliser display: block sur les liens?

Les liens sont par défaut des éléments inline qui ne prennent que la place de leur contenu. Sur mobile, il faut les transformer en blocs pour que toute la zone grise soit cliquable au doigt, plutôt que de cliquer sur une petite zone précise.

Comment afficher les activités horizontalement au lieu de verticalement?

Ajouter float: left aux éléments li pour les aligner en ligne. Sans cela, la liste s'affiche verticalement par défaut.