Přejít na hlavní obsah

Jak vytvořit odkaz na obrázek v HTML

HTML je značkovací jazyk, který vám umožňuje vytvářet a strukturovat webové stránky. Jednou z důležitých funkcí HTML je možnost vytvářet odkazy na jiné webové stránky, texty a dokumenty. Ale co když chcete vytvořit odkaz na obrázek? Odpověď je jednoduchá-HTML má k tomu speciální značku.

K vytvoření odkazu na obrázek v HTML můžete použít značku s atributem href a podsložkou . Tag určuje odkaz a atribut href určuje adresu, kam má odkaz vést. Uvnitř značky můžete umístit značku , který definuje obrázek, který se zobrazí jako odkaz.

Níže je uveden příklad kódu, který ukazuje, jak vytvořit odkaz na obrázek:

альтернативный_текст

Ve výše uvedeném kódu nahraďte "adres_obrazy" skutečnou URL obrázku, kterou chcete odkazovat. Nahraďte "alternativní_text" popisem obrázku, který se zobrazí, pokud obrázek není k dispozici. Po výměně kódu jej vložte do dokumentu HTML a vytvořte odkaz na obrázek.

Vytvoření odkazu na obrázek v HTML

HTML tagy umožňují vytvářet odkazy na obrázky, aby je uživatelé mohli zobrazit při přechodu na tyto odkazy.

K vytvoření odkazu na obrázek je třeba použít značku (značka je jednou z hlavních značek HTML) a zadejte cestu k obrázku v atributu href značka .

Cesta k obrazu může být relativní nebo absolutní. Relativní cesta začíná z aktuálního adresáře souboru HTML a absolutní cesta označuje úplnou cestu k souboru obrázku.

Můžete také přidat další atributy do značky a změnit zobrazení odkazu, jako je název nebo styl.

Důležitě: aby uživatelé mohli vidět obrázek při kliknutí na odkaz, musí být obrázek přístupný po uvedené cestě.

Zobrazení obrázku v HTML

V HTML, obrázek může být prezentován pomocí značky "img". Tato značka se používá k zobrazení grafických obrázků na webové stránce. Chcete-li vytvořit odkaz na obrázek, musíte použít atribut "src", který označuje cestu k obrázku.

Příklad použití značky " img "s atributem"src":

TagPopis
imgZnačka se používá k vkládání obrázků na webovou stránku.

V uvedeném příkladu, " cesta_k_zobrazení.jpg " je relativní nebo absolutní cesta k obrazu. Atribut " alt " se používá k zadání textu, který se zobrazí v případě, že obrázek Nelze načíst nebo zobrazit.

Můžete také přidat další atributy do značky "img". Například:

AtributPopis
widthNastavuje šířku obrázku v pixelech nebo procentech.
heightNastavuje výšku obrázku v pixelech nebo procentech.
titleZobrazí pop-up nápovědu, když najedete na obrázek.
styleUmožňuje nastavit styl pro obrázek pomocí CSS.

Příklad kódu pomocí dalších atributů:

V tomto příkladu bude mít obrázek šířku 300 pixelů, výšku 200 pixelů, vyskakovací tip, když na něj najedete, a také 1 pixel tlustý rám s černým tahem.

Použití značky " a " k vytvoření odkazu

Značení HTML k vytvoření odkazu na obrázek používá značku a, který se také nazývá značka "kotva". Tato značka vám umožňuje vytvořit odkaz na jiný dokument, včetně obrázku.

Chcete-li vytvořit odkaz na obrázek uvnitř otevíracích a zavíracích značek a musíte vložit adresu obrázku pomocí atributu href. Například:

Kde je "cesta"?jpg" je Adresa obrázku, kterou chcete použít jako odkaz.

Poté lze Místo" Text odkazu " zadat jakýkoli text, který se stane viditelným pro uživatele. Když kliknete na tento text nebo na samotný obrázek, prohlížeč přesměruje uživatele na uvedenou adresu.

Kromě atributu href, můžete také přidat další atributy pro značku a, jako target Chcete-li nastavit místo, kde se otevře odkaz (například v novém okně), nebo title Chcete-li přidat vyskakovací tip.

Takže značka a je hlavním nástrojem pro vytváření odkazů na obrázky a další dokumenty v HTML značení.

Indikace cesty k obrázku

Chcete-li vložit obrázek na webovou stránku, musíte zadat cestu k souboru s obrázkem. Cesta může být absolutní nebo relativní.

Absolutní cesta plně označuje cestu k obrazovému souboru na serveru. Například:

  • Изображение

Relativní cesta označuje cestu vzhledem k aktuální webové stránce. Například:

Изображение

  • Pokud je obrázek ve stejném adresáři jako webová stránka, cesta bude vypadat takto:
  • Pokud je obrázek v podadresáři, cesta bude vypadat takto:
  • Pokud je obrázek v nadřazeném adresáři, cesta bude vypadat takto:

Je důležité si uvědomit, že při určování cesty k obrázku je třeba vzít v úvahu registr znaků a také příponu souboru obrázku (např.jpg nebo .png).

Správně zadaná cesta k obrázku tedy umožní prohlížeči správně zobrazit obrázek na webové stránce.