Après avoir essayé plusieurs solutions prêtes à l'emploi, qui ne nécessitaient aucune connaissance en la matière, vous avez décidé de vous essayer à la création d'un site web "se salissant les mains" avec du code HTML.
Vous êtes très passionné, mais il y a certaines procédures que vous n'avez pas encore pu comprendre.
Par exemple, vous aimeriez avoir quelques explications supplémentaires sur la façon d'insérer une image HTML, sur les paramètres corrects à utiliser pour le formatage du code et sur les informations qui peuvent y être insérées.
Eh bien, vous êtes au bon endroit au bon moment !
Dans les prochains paragraphes, en effet, vous allez voir en détail comment insérer des photos dans un site, un blog ou tout autre "conteneur" en utilisant le langage HTML.
Vous verrez ensuite comment les aligner, comment les redimensionner, comment insérer des liens à l'intérieur et même comment les placer en arrière-plan dans une page web.
Insérer une image en HTML
Pour comprendre comment insérer une image en HTML, il faut fixer un concept clé dans son esprit.
Les images que vous voyez dans les pages web des sites que vous visitez, des blogs et des forums n'y sont pas intégrées mais sont appelées de l'extérieur.
Cela signifie que chaque photo a une adresse unique, ce qui vous permet de la suivre et de l'afficher.
L'adresse d'une image est composée de la manière suivante : Au début, il y a l'adresse de l'espace web où le fichier est hébergé (par exemple https://www.abcdfg.fr) et ensuite il y a le nom de l'image avec l'extension (par exemple image.jpg).
L'adresse directe d'une image sur le Web doit donc avoir une composition du type https://www.[domaine du site]/[nom et extension de l'image], dans le cas de notre exemple https://www.abcdfg.fr/immagine.jpg.
À ce stade, vous vous demandez peut-être comment rappeler l'adresse d'une image sur une page Web afin que la photo soit visible par le public ?
Rien de plus simple !
Il suffit d'utiliser la balise img suivie de l'attribut src= suivi de l'adresse de l'image à insérer dans la page mise entre guillemets.
Pour continuer avec l'exemple ci-dessus, pour insérer une image dans une page web, vous devez utiliser le formatage suivant.
Si vous le souhaitez, vous pouvez également ajouter la balise alt à l'image, afin de configurer un texte alternatif (une sorte de description du fichier téléchargé) à afficher au cas où il ne serait pas disponible (par exemple pour des erreurs de connexion au serveur ou la suppression de la photo de son emplacement d'origine), ce qui favorise également l'indexation de l'image elle-même par les moteurs de recherche (comme déjà expliqué dans un autre tutoriel).
La balise alt doit être insérée immédiatement après l'élément img, comme dans l'exemple suivant.
Comme vous l'avez peut-être remarqué, dans les exemples donnés plus tôt, l'étiquette img n’est pas fermé avec l'étiquette
La raison en est qu'il n'est pas nécessaire de le faire, car l'img est une étiquette "vide". Toutefois, il peut être pratique d'insérer un espace et une barre oblique / avant le symbole principal >, de sorte que l'image soit également compatible avec le format XHTML, le langage de marquage qui associe certaines propriétés du XML aux caractéristiques du HTML.
Mettre une image en HTML à droite, à gauche et au centre
Maintenant que vous êtes familiarisé avec l'utilisation de la balise img, vous serez sûrement intéressé de savoir comment la déplacer à droite, à gauche et au centre.
Dans les prochaines lignes, vous verrez justement comment aligner une image au centre, à gauche, à droite, au-dessus ou en dessous de la page qui la contient, et aussi comment la redimensionner.
Pour aligner les images, il suffit d'utiliser le formatage que vous avez vu dans les lignes précédentes et d'y ajouter la variable align=, suivie du type de disposition que vous voulez que la photo adopte : Centre, pour aligner l'image au centre ; gauche, pour l'aligner à gauche ; droite, pour l'aligner à droite ; bas, pour placer la photo en bas à droite de la première ligne de texte ; milieu, pour placer la photo au milieu à droite de la première ligne de texte ; haut, pour la placer en haut à droite de la première ligne de texte.
Comme mentionné ci-dessus, il est également possible, grâce au code HTML, de redimensionner les images (uniquement visuellement, sans modifier la taille du fichier original) et de spécifier l'espacement qu'elles doivent avoir par rapport aux autres éléments qui composent la page Web dans laquelle elles sont insérées.
Pour indiquer les dimensions que doit avoir une image, vous devez utiliser les variables width et height en spécifiant les valeurs en pixels, tandis que pour l'espacement, vous devez utiliser hspace pour indiquer l'espacement horizontal et vspace pour indiquer l'espacement vertical.
Voici un exemple d'une photo de 300 x 200 pixels avec un espacement vertical et horizontal de 20 pixels.
Avez-vous vu comme il était facile d'aligner et de redimensionner les images en HTML ?
Comme on vous l'a dit, ce n'est pas compliqué du tout, vous devez juste connaître les balises à utiliser et utiliser les variables que vous préférez pour que la photo téléchargée prenne la position souhaitée.
Insérer une image HTML comme fond
Vous souhaitez insérer une image en HTML et l'utiliser comme fond de page ?
Cela est également possible, mais vous n'avez pas besoin d'utiliser la balise img, mais la balise body suivie de l'attribut background et du chemin de l'image entre guillemets.
C’est garantis qu'il n'y a rien de compliqué à faire : L'exemple ci-dessous peut le prouver.
Étant donné que l'image insérée comme fond dans la page Web sera répétée à la fois horizontalement et verticalement, il est suggéré de n'adopter cette technique que si vous avez des images qui, même si elles sont répétées, permettent d'obtenir un résultat esthétique agréable, de comprendre une sorte d'effet de mosaïque.
Vous connaissez maintenant toutes les règles de base pour insérer une image HTML dans les blogs et les sites web. Et à partir de là, vous pouvez approfondir le sujet et découvrir de nombreuses autres fonctions qui peuvent être exploitées grâce au HTML.
