CATALOGUE Code & Data Formation Web App Créer une Web App - Vos sites Web sur mobiles

Guide Complet pour l'Insertion d'Icônes dans les Pages HTML

Retour à la formation
Chapitre 8 Leçon 6
Précédent
Suivant

Découvrez comment insérer des icônes pour différents appareils comme iPhone, iPad, et navigateurs dans vos pages HTML pour une meilleure présentation.

Détails de la leçon

Description de la leçon

Cette leçon explore différentes méthodes pour insérer des icônes dans des pages HTML. Nous introduisons d'abord les différentes tailles d'icônes nécessaires pour divers appareils tels que les iPhone, iPad, et navigateurs de bureau. En utilisant la balise link et l'attribut href, nous expliquons comment référencer correctement ces icônes. Nous détaillons également l'utilisation de l'attribut rel avec la valeur apple-touch-icon pour que les appareils reconnaissent les icônes appropriées. En outre, nous montrons comment ajouter une faveicon pour les navigateurs, notamment ceux sous Android. Enfin, nous apprenons à intégrer les icônes pré-composées pour éviter les effets de reflet ajoutés automatiquement par certains systèmes.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de :

  • Apprendre à insérer des icônes dans une page HTML pour différents appareils.
  • Comprendre les diverses tailles d'icônes et leurs utilisations respectives.
  • Savoir ajouter une favicon pour les navigateurs de bureau et mobiles.
  • Maîtriser l'intégration d'icônes pré-composées sans effets additionnels.

Prérequis pour cette leçon

Pour suivre cette vidéo, vous devez avoir :

  • Des notions de base en HTML et en développement web.
  • Un éditeur de texte pour modifier les fichiers HTML.
  • Accès aux images d'icônes avec les dimensions appropriées.

Métiers concernés

Ce sujet concerne plusieurs métiers dont :

  • Développeur web
  • Webmaster
  • Designer UI/UX
  • Consultant en accessibilité web

Alternatives et ressources

Des solutions alternatives incluent :

  • Utiliser des bibliothèques d'icônes comme FontAwesome.
  • Créer des icônes vectorielles pour une meilleure adaptation aux différentes tailles d'écran.
  • Employez des plugins ou des modules spécifiques selon le CMS utilisé.

Questions & Réponses

Pour les iPhone 3, une icône de 57x57 pixels est recommandée, tandis que pour les iPhone 4 avec écran Retina, une icône de 114x114 pixels est appropriée.
Les icônes 'pré-composées' sont utilisées pour éviter les effets de reflet ajoutés automatiquement par certains systèmes, comme ceux des iPhone et iPad.
Pour vérifier, ajoutez le site à l'écran d'accueil de l'iPad. Si l'icône apparaît correctement sur l'écran d'accueil, cela signifie qu'elle est bien intégrée.