Úvod do propojení obrázků v HTML

Odkaz na obrázek V HTML se nachází téměř na všech stránkách, protože nám pomáhají při navigaci z jedné stránky na druhou na webu. Populární kombinací je použití značky kotvy HTML se značkou HTML značky HTML . Díky této kombinaci můžeme povolit pohyb uživatelů z jedné stránky na druhou kliknutím na obrázek. Než se dále věnujeme tomuto tématu, nejprve pochopíme práci a vykreslování prvků kotvy a obrazu jednotlivě a poté je zkombinujeme, abychom dosáhli propojeného obrazu.

Značka kotvy HTML

Značka HTML Anchor se používá k vytváření hypertextových odkazů HTML na jiné webové stránky nebo multimediální obsah hostovaný na webu. Podívejme se na níže uvedenou syntaxi, abychom pochopili, jak fungují značky kotvy a jejich základní atributy

Klikněte zde!!

Ve výše uvedeném příkladu atribut „href“ určuje adresu URL webové stránky, na kterou bychom chtěli uživatele přesměrovat, zatímco kliknete na text „Click here !!“.

Podívejme se na kompletní kód níže:

Výstup

->

Pomocí výše uvedeného příkladu budete moci učinit následující pozorování

  1. Neviděný odkaz se zobrazí podtržený a v modré barvě. Např. Toto je nenavštívený odkaz
  2. Navštívený odkaz se zobrazí podtržený a ve fialové barvě. Např. Toto je již navštívený odkaz
  3. Aktivní odkaz se zobrazí podtržený a červeně. Např. Toto je aktivní odkaz

Značka obrázku HTML

Při procházení Internetu jsem si jist, že jste museli narazit na několik webových stránek, které obsahují různé formy multimédií. Zejména obrázky jsou oblíbenou formou multimédií, které lze dnes nalézt na téměř všech interaktivních webových stránkách a webech. Vysvětlíme obrázek obrázku a jeho implementaci v HTML s níže uvedeným příkladem:

Syntax

Podívejme se nyní, jak fungují všechny atributy ve značce img:

  1. src: Atribut src definuje cestu obrazového souboru, který se pokoušíme načíst pomocí této značky. Může to být odkaz na obrázek hostovaný na webu ve formátu jako example.com/images/dummy.png.webp nebo to může být obrazový soubor lokálně hostovaný na stejném serveru jako webová stránka.
  2. alt: Atribut alt definuje text a popis obrázku, který bychom chtěli zobrazit v případě, že se obrázky nepodaří načíst kvůli síťovému připojení nebo jinému problému.
  3. Šířka a výška: Šířka a výška obou atributů určují šířku a výšku obrázku, který bychom chtěli zobrazit na webové stránce. Jinak by obrázek fungoval ve výchozím nastavení 100% výšky a šířky.

Nyní se podívejme na úplný kód HTML potřebný k načtení obrázku na webovou stránku. Uložte následující obrázek s názvem „sunset.png.webp“ do složky nazvané „image_test“ na místní jednotce.

Nyní ve stejné složce vytvořme soubor HTML s názvem sunset.html s následujícím kódem HTML:

Nyní přejděte do svého prohlížeče v prohlížeči a zadejte cestu k souboru .html. Moje soubory jsou uloženy na jednotce D, takže cesta pro mě by byla

D: /image_test/sunset.html

A nyní můžeme vidět, že vykreslená stránka HTML načítala obrázek západu slunce do našeho prohlížeče. S pomocí CSS a

tag, můžeme také zobrazit text podle našich požadavků kolem obrázku. Značky kotvy i img jsou kompatibilní se všemi prohlížeči, jako je Google Chrome, Safari, Microsoft Edge, Firefox a Internet Explorer.

Propojené obrázky v HTML

Nyní, když jsme pochopili s příklady, jak kotevní značka a obrázková značka fungují jednotlivě, nyní pochopíme, jak můžeme kombinovat obě funkce tak, abychom dosáhli scénáře, kdy bychom chtěli, aby uživatelé byli přesměrováni na novou webovou stránku kliknutím na obrázek . Aby bylo možné kliknout na obrázek a přesměrovat uživatele na jinou webovou stránku, musíme obrázek vnořit do značky kotvy. V níže uvedeném příkladu se pokusíme získat tři nejlepší vyhledávače webu používané po celém světě. V našem seznamu zobrazíme loga 3 vyhledávačů a kliknutím na kterékoli z nich se uživatel přesměruje na příslušnou stránku vyhledávače. Vytvořme složku s názvem „test přesměrování“ a do stejné složky uložíme níže uvedené obrázky

1. Google

2. Yahoo

3. Bing

Nyní ve stejném souboru vytvoříme .html s názvem imageredirection.html. Imageredirection.html bude obsahovat následující kód

Nyní musíme přistupovat na stránku HTML z prohlížeče, pro který zadám svou místní cestu „D: / redirectiontest / imageredirection.html“. prohlížeč poté vykreslí soubor HTML a vygeneruje následující výsledek:

->

Uživatelé budou moci přejít na příslušný vyhledávač kliknutím na jejich logo. Z výše uvedeného příkladu můžeme pozorovat, že HTML je jednoduchý a flexibilní jazyk, který nám umožňuje kombinovat více značek dohromady a dosáhnout tak složité funkce. Kombinace použití značky img a kotvy je oblíbená kombinace. S dalším kódováním HTML můžeme také přidat různé prvky HTML, jako je zobrazení propojených obrázků v uspořádaném nebo neuspořádaném seznamu pomocí

    nebo
      . Extrémní flexibilita a jednoduchost, kterou poskytuje HTML s každou vydanou verzí, pomáhá návrhářům UI a UX navrhovat interaktivní a intuitivní webové stránky, které vidíme při procházení Internetu pro každodenní aktivity.

      Doporučený článek

      Toto byl průvodce odkazem na obrázek v HTML. Zde diskutujeme různé typy značek HTML spolu se syntaxí. Další informace naleznete také v dalších navrhovaných článcích -
      1. Atributy HTML
      2. Značky formátu HTML
      3. Výhody HTML
      4. Značky obrázků HTML
      5. Rámce HTML
      6. Bloky HTML
      7. Nastavte barvu pozadí v HTML s příkladem
      8. Seznam objednávek HTML | Typy atributů se syntaxí

Kategorie:

Nástroje pro vývoj webových aplikací