Regardez n'importe quel page Web en ligne aujourd'hui et vous remarquerez qu'ils partagent certaines choses en commun. L'un de ces traits communs est l'image. Les bonnes images ajoutent beaucoup à la présentation d'un site Web. Certaines de ces images, comme le logo d'une entreprise, aident à marquer le site et à connecter cette entité numérique à votre entreprise physique.
Comment ajouter une image à une page Web en utilisant HTML
Pour ajouter une image, une icône ou des graphiques à votre page Web, vous devez utiliser la balise dans le code HTML d'une page. Vous placez le.
IMGtag dans votre. HTML exactement où vous voulez que le graphique s'affiche. Le navigateur Web qui affiche le code de la page remplacera cette balise par le graphique approprié une fois la page consultée. Pour en revenir à notre exemple de logo d'entreprise, voici comment ajouter cette image à votre site:
L'attribut SRC
En regardant le code HTML ci-dessus, vous verrez que l'élément comprend deux attributs. Chacun d'eux est requis pour l'image.
Le premier attribut est le "src". Il s'agit littéralement du fichier image que vous souhaitez afficher sur la page. Dans notre exemple, utilisons-nous un fichier appelé "logo.png". Il s'agit du graphique que le navigateur Web afficherait lorsqu'il rendrait le site.
Vous remarquerez également qu'avant ce nom de fichier, nous avons ajouté quelques informations supplémentaires, "/images/". C'est le chemin du fichier. La barre oblique initiale indique au serveur de rechercher la racine du répertoire. Il cherchera alors un dossier nommé « images » et enfin le fichier nommé « logo.png ». L'utilisation d'un dossier appelé « images » pour stocker tous les graphiques d'un site est une pratique assez courante, mais votre chemin de fichier serait modifié en ce qui concerne votre site.
L'attribut Alt
Le deuxième attribut obligatoire est le texte "alt". C'est le "texte alternatif" qui s'affiche si l'image ne se charge pas pour une raison quelconque. Ce texte, qui dans notre exemple lit "Logo de l'entreprise" serait affiché si l'image ne se charge pas. Pourquoi cela arriverait-il? Diverses raisons:
- Chemin de fichier incorrect
- Nom de fichier incorrect ou faute d'orthographe
- Erreur de transmission
- Le fichier a été supprimé du serveur
Ce ne sont là que quelques-unes des raisons pour lesquelles notre image spécifiée peut être manquante. Dans ces cas, notre texte alternatif s'afficherait à la place.
À quoi sert le texte alternatif?
Le texte alternatif est également utilisé par un logiciel de lecture d'écran pour « lire » l'image à un visiteur malvoyant. Puisqu'ils ne peuvent pas voir l'image comme nous le faisons, ce texte leur permet de savoir quelle est l'image elle-même. C'est pourquoi le texte alternatif est requis et pourquoi il doit clairement indiquer quelle est l'image!
Un malentendu courant sur le texte alternatif est qu'il est destiné aux moteurs de recherche. Ce n'est pas vrai. Alors que Google et d'autres moteurs de recherche lisent ce texte pour déterminer quelle est l'image (rappelez-vous, ils ne peuvent pas non plus "voir" votre image), vous ne devez pas écrire de texte alternatif pour faire appel uniquement à la recherche moteurs. Rédigez un texte alternatif clair qui est destiné aux humains. Si vous pouvez également ajouter des mots-clés dans la balise qui attirent les moteurs de recherche, c'est bien, mais assurez-vous toujours le texte alternatif sert son objectif principal en indiquant ce qu'est l'image pour quiconque ne peut pas voir les graphiques déposer.
Autres attributs d'image
Le.
IMG.
tag a également deux autres attributs que vous pouvez voir en cours d'utilisation lorsque vous placez un graphique sur votre page Web - la largeur et la hauteur. Par exemple, si vous utilisez un éditeur WYSIWYG comme Dreamweaver, il ajoute automatiquement ces informations pour vous. Voici un exemple:
Le.
LARGEUR.
et.
LA TAILLE.
Les attributs indiquent au navigateur la taille de l'image. Le navigateur sait alors exactement combien d'espace dans la mise en page allouer, et il peut passer à l'élément suivant sur la page pendant le téléchargement de l'image. Le problème avec l'utilisation de ces informations dans votre code HTML est que vous ne souhaitez peut-être pas toujours que votre image s'affiche à cette taille exacte. Par exemple, si vous avez un.
site web réactif
dont la taille change en fonction de l'écran des visiteurs et de la taille de l'appareil, vous souhaiterez également que vos images soient flexibles. Si vous indiquez dans votre code HTML quelle est la taille fixe, il vous sera très difficile de remplacer le responsive.
Requêtes média CSS
. Pour cette raison, et pour maintenir une séparation de style (CSS) et de structure (HTML), il est recommandé de NE PAS ajouter d'attributs de largeur et de hauteur à votre code HTML.
Remarque: si vous laissez ces instructions de dimensionnement désactivées et que vous ne spécifiez pas de taille dans CSS, le navigateur affichera de toute façon l'image à sa taille par défaut.
Edité par Jérémy Girard