Ajouter un lien vers une image en HTML

Auteur: Christy White
Date De Création: 12 Peut 2021
Date De Mise À Jour: 1 Juillet 2024
Anonim
HTML5/CSS3 - 17 - Lien vers une image, un fichier, un mail
Vidéo: HTML5/CSS3 - 17 - Lien vers une image, un fichier, un mail

Contenu

Avec une seule ligne de code HTML, vous pouvez ajouter une image cliquable à presque n'importe quel site Web. Vous aurez besoin de deux choses pour que cela fonctionne. Vous avez besoin d'une URL pour l'image et également de l'URL d'un site Web.

Avancer d'un pas

Méthode 1 sur 2: écrivez le code HTML

  1. Créez un fichier HTML. Ouvrez un éditeur de texte, puis créez un nouveau fichier. Enregistrez le fichier sous index.html.
      • Vous pouvez utiliser n'importe quel éditeur de texte de votre choix, même les éditeurs de texte simples de Windows (Bloc-notes) et Mac OS X (TextEdit).
      • Si vous souhaitez utiliser un éditeur de texte conçu pour travailler avec HTML, cliquez ici pour télécharger Atom, un éditeur de texte pour Windows, Mac OS X et Linux.
      • Si vous utilisez TextEdit, cliquez sur le menu Format avant de créer le fichier HTML, puis cliquez sur Créer du texte brut. Ce paramètre garantit que le fichier HTML se charge correctement dans un navigateur Web.
      • Les processeurs de texte tels que Microsoft Word ne sont pas vraiment bons pour écrire du HTML, car ils ajoutent des caractères invisibles et une mise en forme qui peuvent corrompre le fichier HTML et le rendre incorrectement affiché dans un navigateur Web.
  2. Copiez et collez le code HTML standard. Sélectionnez et copiez le code HTML ci-dessous et collez-le dans votre index.html ouvert.

    a href = "URL cible"> img src = "url d'image" /> / a>

  3. Trouvez l'URL de votre image. Recherchez une image sur le Web, cliquez dessus avec le bouton droit de la souris et (selon votre navigateur) cliquez sur Copier l'URL de l'image, Copier l'adresse de l'image ou Copier l'emplacement de l'image.
      • Firefox et Internet Explorer utilisent Copier l'emplacement de l'image. Chrome utilise l'URL de copie de l'image. Safari utilise l'adresse de copie de l'image.
  4. Ajoutez l'URL de l'image. Dans le fichier index.html, cliquez et faites glisser pour sélectionner l'URL de l'image avec votre souris, puis appuyez sur CTRL + V pour coller l'URL.
  5. Ajoutez l'URL cible. Dans index.html, supprimez l'URL cible et saisissez https://www.startpage.com.
      • Vous pouvez utiliser n'importe quelle URL comme URL cible.
  6. Enregistrez le fichier HTML.
  7. Ouvrez le fichier HTML dans un navigateur Web. Cliquez avec le bouton droit sur index.html puis ouvrez ce fichier dans le navigateur Web de votre choix.
      • Si le navigateur s'ouvre mais que vous ne voyez pas l'image, assurez-vous que vous avez correctement orthographié le nom du fichier image dans le fichier index.html.
      • Lorsque le navigateur s'ouvre, mais que vous voyez du code HTML au lieu de l'image d'arrière-plan, votre index.html est enregistré en tant que fichier .rtf (fichier de texte enrichi). Essayez de modifier le fichier HTML dans un autre éditeur de texte.

Méthode 2 sur 2: comprendre le code HTML

  1. Comprenez la balise d'ancrage. Le code HTML se compose de balises d'ouverture et de fermeture. La balise a href = ""> est la balise de début et / a> est la balise de fin. Cela s'appelle une balise d'ancrage et est utilisé pour ajouter des liens vers une page Web.
    • le une demande à un navigateur de créer un lien. le href est une abréviation de référence HTML, le = dit au navigateur de tout changer entre ’ ’ créer un lien. Toute URL peut être placée entre les deux guillemets.
    • le / a> indique au navigateur que la balise d'ancrage est fermée.
    • Lorsque vous ajoutez du texte entre a href = ""> et / a> ce texte devient un lien cliquable sur une page Web. Par exemple: a href = "https://www.google.com"> Google / a> crée un lien vers Google.
  2. Comprenez la balise d'image. La balise img> est une balise fermée. Vous pouvez le fermer avec img src = "" /> ou img src = ""> / img>.
    • le img La balise indique à un navigateur d'afficher une image. le src est une abréviation pour source, de = indique au navigateur de supprimer tout ce qui se trouve entre ’ ’ et récupérez l'image à partir de cet emplacement.
    • le /> demande à un navigateur de fermer la balise d'image.
    • Par exemple: {samp [} récupère l'image à partir de cette URL, puis l'affiche dans un navigateur Web.
  3. Utilisez ce code partout. Maintenant que vous connaissez ce code, vous pouvez a href = "URL cible"> img src = "url d'image" /> / a> pour ajouter des images cliquables à n'importe quelle page Web avec du code HTML.