Pridajte odkaz na obrázok v HTML

Autor: Christy White
Dátum Stvorenia: 12 Smieť 2021
Dátum Aktualizácie: 1 V Júli 2024
Anonim
Pridajte odkaz na obrázok v HTML - Avíza
Pridajte odkaz na obrázok v HTML - Avíza

Obsah

Pomocou jedného riadku kódu HTML môžete pridať klikateľný obrázok na takmer akýkoľvek web. Aby to fungovalo, budete musieť urobiť dve veci. Potrebujete adresu URL obrázka a tiež adresu URL webovej stránky.

Na krok

Metóda 1 z 2: Napíšte kód HTML

  1. Vytvorte súbor HTML. Otvorte textový editor a potom vytvorte nový súbor. Uložte súbor ako index.html.
      • Môžete použiť ľubovoľný požadovaný textový editor, dokonca aj jednoduché textové editory systému Windows (Poznámkový blok) a Mac OS X (TextEdit).
      • Ak chcete použiť textový editor určený na prácu s HTML, kliknite sem a stiahnite si Atom, textový editor pre Windows, Mac OS X a Linux.
      • Ak používate TextEdit, pred vytvorením súboru HTML kliknite na ponuku Formát a potom kliknite na položku Vytvoriť obyčajný text. Toto nastavenie zaisťuje správne načítanie súboru HTML vo webovom prehliadači.
      • Textové procesory, ako napríklad Microsoft Word, nie sú na písanie HTML skutočne dobré, pretože pridávajú neviditeľné znaky a formátujú súbory, ktoré môžu súbor HTML poškodiť a vykresliť ho nesprávne vo webovom prehliadači.
  2. Skopírujte a prilepte štandardný kód HTML. Vyberte a skopírujte nižšie uvedený kód HTML a vložte ho do svojho otvoreného index.html.

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

  3. Vyhľadajte adresu URL svojho obrázka. Vyhľadajte obrázok na webe, kliknite naň pravým tlačidlom myši a (v závislosti od vášho prehliadača) kliknite na položku Kopírovať adresu URL obrázka, Kopírovať adresu obrázka alebo Kopírovať umiestnenie obrázka.
      • Firefox a Internet Explorer používajú možnosť Kopírovať umiestnenie obrázka. Prehliadač Chrome používa funkciu Kopírovať adresu URL obrázka. Safari používa funkciu Kopírovať adresu obrázka.
  4. Pridajte adresu URL obrázka. V súbore index.html kliknutím a ťahaním vyberte adresu URL obrázka myšou, potom ju prilepte stlačením klávesovej skratky CTRL + V.
  5. Pridajte cieľovú adresu URL. V index.html odstráňte cieľovú adresu URL a napíšte https://www.startpage.com.
      • Ako cieľovú adresu URL môžete použiť ľubovoľnú adresu URL.
  6. Uložte súbor HTML.
  7. Otvorte súbor HTML vo webovom prehliadači. Pravým tlačidlom myši kliknite na index.html a potom tento súbor otvorte vo webovom prehľadávači podľa vášho výberu.
      • Ak sa prehliadač otvorí, ale obrázok sa vám nezobrazuje, skontrolujte, či ste správne zadali názov súboru s obrázkom v súbore index.html.
      • Po otvorení prehľadávača, ale namiesto obrázka na pozadí sa zobrazí kód HTML, sa váš index.html uloží ako súbor .rtf (súbor vo formáte RTF). Skúste upraviť súbor HTML v inom textovom editore.

Metóda 2 z 2: Pochopenie kódu HTML

  1. Pochopte kotviacu značku. HTML kód sa skladá z úvodných a záverečných značiek. Značka a href = ""> je počiatočná značka a / a> je koncová značka. Toto sa nazýva kotvová značka a používa sa na pridávanie odkazov na webovú stránku.
    • The a povie prehliadaču, aby vytvoril odkaz. The href je skratka pre referenciu HTML, = povie prehliadaču, aby medzi nimi zmenil všetko ’ ’ vytvorte odkaz. Medzi tieto dve úvodzovky je možné vložiť ľubovoľnú adresu URL.
    • The / a> oznámi prehliadaču, že kotviaca značka je zatvorená.
    • Keď pridávate text medzi a href = ""> a / a> tento text sa stane kliknutím na odkaz na webovej stránke. Napríklad: a href = "https://www.google.com"> Google / a> vytvorí odkaz na Google.
  2. Pochopte značku obrázka. Značka img> je uzavretá značka. Môžete ho zavrieť pomocou img src = "" /> alebo img src = ""> / img>.
    • The obr značka informuje prehliadač, aby zobrazil obrázok. The src je skratka pre zdroj, de = hovorí prehliadaču, aby vymazal všetko medzi ’ ’ a načítať obrázok z daného miesta.
    • The /> informuje prehliadač, aby zatvoril značku obrázka.
    • Napríklad: {samp [} získa obrázok z tejto adresy URL a potom ho zobrazí vo webovom prehliadači.
  3. Tento kód používajte všade. Teraz, keď tento kód poznáte, môžete a href = "target url"> img src = "image url" /> / a> na pridanie klikateľných obrázkov na ľubovoľnú webovú stránku s HTML kódom.