Lägg till en länk till en bild i HTML

Författare: Christy White
Skapelsedatum: 12 Maj 2021
Uppdatera Datum: 1 Juli 2024
Anonim
Lägg till en länk till en bild i HTML - Råd
Lägg till en länk till en bild i HTML - Råd

Innehåll

Med en enda rad HTML-kod kan du lägga till en klickbar bild på nästan vilken webbplats som helst. Det finns två saker du behöver för att detta ska fungera. Du behöver en URL för bilden och även en webbadress för en webbplats.

Att gå

Metod 1 av 2: Skriv HTML-koden

  1. Skapa en HTML-fil. Öppna en textredigerare och skapa sedan en ny fil. Spara filen som index.html.
      • Du kan använda vilken textredigerare du vill, även de enkla textredigerarna i Windows (Notepad) och Mac OS X (TextEdit).
      • Om du vill använda en textredigerare avsedd för att arbeta med HTML, klicka här för att ladda ner Atom, en textredigerare för Windows, Mac OS X och Linux.
      • Om du använder TextEdit, klicka på Format-menyn innan du skapar HTML-filen och klicka sedan på Skapa vanlig text. Denna inställning säkerställer att HTML-filen laddas korrekt i en webbläsare.
      • Ordbehandlare som Microsoft Word är inte riktigt bra för att skriva HTML, eftersom de lägger till osynliga tecken och formatering som kan skada HTML-filen och göra att den visas felaktigt i en webbläsare.
  2. Kopiera och klistra in standard HTML-koden. Välj och kopiera HTML-koden nedan och klistra in den i ditt öppnade index.html.

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

  3. Hitta webbadressen till din bild. Hitta en bild på webben, högerklicka på den och (beroende på din webbläsare) klicka på Kopiera bild-URL, Kopiera bildadress eller Kopiera bildplats.
      • Firefox och Internet Explorer använder Kopiera bildplats. Chrome använder Copy Image URL. Safari använder Copy Image Address.
  4. Lägg till webbadressen för bilden. Klicka på och dra i index.html-filen för att välja webbadressen till bilden med musen och tryck sedan på CTRL + V för att klistra in webbadressen.
  5. Lägg till mål-URL. I index.html tar du bort mål-URL och typ https://www.startpage.com.
      • Du kan använda valfri webbadress som måladress.
  6. Spara HTML-filen.
  7. Öppna HTML-filen i en webbläsare. Högerklicka på index.html och öppna den här filen i din webbläsare.
      • Om webbläsaren öppnas men du inte ser bilden, se till att du har stavat bildfilnamnet korrekt i index.html-filen.
      • När webbläsaren öppnas, men du ser HTML-kod istället för bakgrundsbilden, sparas ditt index.html som en .rtf-fil (rich text-fil). Försök att redigera HTML-filen i en annan textredigerare.

Metod 2 av 2: Förstå HTML-kod

  1. Förstå ankarmärket. HTML-kod består av att öppna och stänga taggar. Taggen a href = ""> är starttaggen och / a> är sluttaggen. Detta kallas en ankartagg och används för att lägga till länkar till en webbsida.
    • De a ber en webbläsare att skapa en länk. De href är en förkortning för HTML-referens = ber webbläsaren att ändra allt mellan ’ ’ skapa en länk. Vilken webbadress som helst kan placeras mellan de två citattecken.
    • De / a> säger till webbläsaren att ankarkoden är stängd.
    • När du lägger till text mellan a href = ""> och / a> den texten blir en klickbar länk på en webbsida. Till exempel: a href = "https://www.google.com"> Google / a> skapar en länk till Google.
  2. Förstå bildtaggen. Taggen img> är en stängd tagg. Du kan stänga den med img src = "" /> eller img src = ""> / img>.
    • De img tagg ber en webbläsare att visa en bild. De src är en förkortning för källa, de = säger till webbläsaren att ta bort allt mellan ’ ’ och hämta bilden från den platsen.
    • De /> ber en webbläsare att stänga bildtaggen.
    • Till exempel: {samp [} hämtar bilden från den webbadressen och visar den sedan i en webbläsare.
  3. Använd den här koden överallt. Nu när du känner till den här koden kan du a href = "target url"> img src = "image url" /> / a> för att lägga till klickbara bilder på vilken webbsida som helst med HTML-kod.