Tilføj et link til et billede i HTML

Forfatter: Christy White
Oprettelsesdato: 12 Kan 2021
Opdateringsdato: 1 Juli 2024
Anonim
Tilføj et link til et billede i HTML - Råd
Tilføj et link til et billede i HTML - Råd

Indhold

Med en enkelt linje HTML-kode kan du tilføje et klikbart billede til næsten ethvert websted. Der er to ting, du har brug for for at få dette til at fungere. Du har brug for en URL til billedet og også en websteds URL.

At træde

Metode 1 af 2: Skriv HTML-koden

  1. Opret en HTML-fil. Åbn en teksteditor, og opret derefter en ny fil. Gem filen som index.html.
      • Du kan bruge den ønskede teksteditor, selv de enkle tekstredigerere i Windows (Notepad) og Mac OS X (TextEdit).
      • Hvis du vil bruge en teksteditor beregnet til at arbejde med HTML, skal du klikke her for at downloade Atom, en teksteditor til Windows, Mac OS X og Linux.
      • Hvis du bruger TextEdit, skal du klikke på menuen Format, før du opretter HTML-filen, og derefter klikke på Opret almindelig tekst. Denne indstilling sikrer, at HTML-filen indlæses korrekt i en webbrowser.
      • Word-processorer som Microsoft Word er ikke rigtig gode til at skrive HTML, fordi de tilføjer usynlige tegn og formatering, der kan ødelægge HTML-filen og gengive den forkert i en webbrowser.
  2. Kopier og indsæt standard HTML-koden. Vælg og kopier HTML-koden nedenfor, og indsæt den i dit åbnede index.html.

    a href = "target url"> img src = "image url" /> / a>

  3. Find webadressen til dit billede. Find et billede på internettet, højreklik på det, og (afhængigt af din browser) klik på Kopiér billedets URL, Kopiér billedadresse eller Kopier billedplacering.
      • Firefox og Internet Explorer bruger Kopier billedplacering. Chrome bruger Copy Image URL. Safari bruger Copy Image Address.
  4. Tilføj billedets URL. I index.html-filen skal du klikke og trække for at vælge webadressen til billedet med din mus og derefter trykke på CTRL + V for at indsætte URL'en.
  5. Tilføj mål-URL. Slet mål-url og skriv i index.html https://www.startpage.com.
      • Du kan bruge en hvilken som helst URL som mål-URL.
  6. Gem HTML-filen.
  7. Åbn HTML-filen i en webbrowser. Højreklik på index.html, og åbn derefter denne fil i den valgte webbrowser.
      • Hvis browseren åbnes, men du ikke kan se billedet, skal du kontrollere, at du har stavet billedfilnavnet korrekt i filen index.html.
      • Når browseren åbnes, men du ser HTML-kode i stedet for baggrundsbilledet, gemmes din index.html som en .rtf-fil (rich text-fil). Prøv at redigere HTML-filen i en anden teksteditor.

Metode 2 af 2: Forstå HTML-kode

  1. Forstå ankermærket. HTML-kode består af åbning og lukning af tags. Tagget a href = ""> er startmærket, og / a> er slutmærket. Dette kaldes et ankermærke og bruges til at tilføje links til en webside.
    • Det -en fortæller en browser at oprette et link. Det href er en forkortelse for HTML-reference, the = fortæller browseren at skifte alt imellem ’ ’ Opret et link. Enhver URL kan placeres mellem de to anførselstegn.
    • Det / a> fortæller browseren, at ankermærket er lukket.
    • Når du tilføjer tekst mellem a href = ""> og / a> denne tekst bliver et klikbart link på en webside. For eksempel: a href = "https://www.google.com"> Google / a> opretter et link til Google.
  2. Forstå billedkoden. Tag img> er et lukket tag. Du kan lukke den med img src = "" /> eller img src = ""> / img>.
    • Det img tag beder en browser om at vise et billede. Det src er en forkortelse for kilde, de = beder browseren om at slette alt mellem ’ ’ og hente billedet fra denne placering.
    • Det /> beder en browser om at lukke billedkoden.
    • For eksempel: {samp [} henter billedet fra denne URL og viser det derefter i en webbrowser.
  3. Brug denne kode overalt. Nu hvor du kender denne kode, kan du a href = "target url"> img src = "image url" /> / a> til tilføjelse af klikbare billeder til enhver webside med HTML-kode.