Ajouter une image avec HTML

Auteur: Christy White
Date De Création: 4 Peut 2021
Date De Mise À Jour: 1 Juillet 2024
Anonim
Apprendre l’HTML : Chapitre 10, Les images
Vidéo: Apprendre l’HTML : Chapitre 10, Les images

Contenu

L'ajout d'images à votre site Web ou à votre profil de réseau social est un excellent moyen d'habiller votre page Web. HTML (HyperText Markup Language) a de nombreuses fonctions pour créer des pages Web, mais heureusement, le code dont vous avez besoin pour ajouter des images n'est pas trop difficile.

Avancer d'un pas

Méthode 1 sur 1: insertion d'images avec HTML

  1. Téléchargez votre image sur un site Web d'hébergement gratuit, tel que Photobucket ou TinyPic, qui permet la liaison à chaud. La liaison à chaud permet un lien direct d'une image vers le serveur du site Web; certains fournisseurs ont interdit cela parce que la liaison à chaud utilise leur bande passante et occupe de l'espace sur leurs serveurs.
    • Si vous avez un compte d'hébergement payant, téléchargez les images directement sur le serveur sur lequel votre site Web est placé. C'est toujours plus fiable qu'un site gratuit et n'a pas besoin d'être cher du tout.
  2. Ouvrez un nouveau document dans un éditeur de texte (par ex., Bloc-notes / Bloc-notes) ou ouvrez la page de votre site Web / profil où vous pouvez modifier le code HTML directement.
  3. Commencez par le img étiqueter. le img La balise est vide, ce qui signifie qu'aucune balise de fermeture n'est nécessaire. Cependant, pour la validation XHTML, vous pouvez toujours mettre un espace et une barre oblique devant celui-ci plus grand que marque.
    • img />
  4. Il existe de nombreux attributs disponibles, mais un seul est nécessaire:src. C'est l'emplacement / l'adresse, ou aussi l'URL, de votre image.
    • img src = "URL de l'image" />
  5. Ensuite, vous devez alt ajouter un attribut. Cela montre un autre texte, au cas où l'image ne se chargerait pas. C'est également un service pour les malvoyants qui utilise des lecteurs d'écran.
    • Si vous placez le curseur sur une image, ce texte est également affiché sous la forme d'une info-bulle, mais ce n'est le cas que dans Internet Explorer. La solution qui fonctionne avec tous les navigateurs (Firefox et coll.) est à lui Titre attribut à utiliser en plus de alt. (Vous pouvez omettre ce dernier si vous ne voulez pas que l'image ait une info-bulle.)

Par exemple:img src = "URL de l'image" alt = "Juste au cas où" title = "Info-bulle" />


  1. Vous pouvez maintenant indiquer la taille de l'image avec le la taille et largeur attribut, et en spécifiant les pixels ou un pourcentage. Notez que le redimensionnement de cette manière ne modifie que la taille de la vue, pas la taille de l'image elle-même. Pour raccourcir le temps de chargement d'une image, il est préférable, notamment avec les grandes images, de les redimensionner à l'avance avec un logiciel de retouche photo ou avec un service en ligne tel que PicResize.com.
    • img src = "URL de l'image" alt = "Juste au cas où" title = "Info-bulle" height = "50%" width = "50%" />
    • img src = "URL de l'image" alt = "Juste au cas où" title = "Info-bulle" height = "25px" width = "50px" />

Conseils

  • La valeur de ces attributs est soit donnée en pixels, soit en pourcentage, de 1 à 100%.
  • L'image peut être placée n'importe où sur la page Web, en utilisant les différents attributs de formatage tels que haut, bas, milieu, droite, gauche, etc.
  • L'attribut hspace est utilisé pour insérer un espace horizontal à gauche et à droite d'une image, tandis que l'attribut vspace est utilisé pour faire de la place en haut et en bas des images et autres objets.
  • Ne vous livrez pas trop aux images. Cela semble désordonné et non professionnel.
  • Les images GIF conviennent bien aux logos ou aux dessins animés, mais ce type de fichier est moins adapté aux photos et autres images avec de nombreuses couleurs.
    • Les images GIF ne prennent en charge que les couleurs 8 bits avec un maximum de 256 couleurs pour une image. Il faut donc s'attendre à ce que la reproduction d'une illustration ou d'une photo couleur 16 ou 24 bits ne soit pas aussi bonne.
    • Les images GIF prennent également en charge la transparence. Un peu de transparence est possible, ce qui signifie qu'une couleur peut être rendue transparente.
    • L'entrelacement est également pris en charge par les images GIF, ce qui signifie que le visiteur du site aura une idée de ce à quoi l'image ressemblera avant qu'elle ne soit complètement chargée.
    • Le format GIF prend également en charge l'animation.
  • Assurez-vous que l'URL indique le format de fichier de l'image (.webp .gif etc.).

Mises en garde

  • Ne faites pas de Hotlink!