Úvod do odkazu na obrázok v HTML

Odkaz na obrázok V kóde HTML sa nachádza takmer na všetkých stránkach, pretože nám pomáhajú pri navigácii z jednej stránky na druhú na webe. Populárnou kombináciou je použitie kotvovej značky HTML so značkou HTML značky HTML , Vďaka tejto kombinácii môžeme povoliť pohyb používateľov z jednej stránky na druhú kliknutím na obrázok. Predtým, ako sa budeme ďalej venovať tejto téme, najprv pochopme prácu a vykreslenie prvkov kotvy a obrázka a potom ich skombinujeme, aby sme dosiahli prepojený obrázok.

Kotvová značka HTML

Značka Anchor HTML sa používa na vytváranie hypertextových odkazov HTML na iné webové stránky alebo multimediálny obsah hostený na webe. Poďme sa pozrieť na nižšie uvedenú syntax, aby sme pochopili, ako fungujú značky kotvy a ich základné atribúty

Kliknite tu!!

Vo vyššie uvedenom príklade atribút „href“ špecifikuje URL webovej stránky, na ktorú by sme chceli používateľa presmerovať, zatiaľ čo kliknete na text „Kliknite tu !!“.

Uvidíme nasledujúci kompletný kód:

Výkon

->

Pomocou vyššie uvedeného príkladu budete môcť urobiť nasledujúce pozorovania

  1. Neviditeľný odkaz sa zobrazí podčiarknutý a modrou farbou. Napríklad: Toto je nenavštívený odkaz
  2. Navštívený odkaz sa zobrazí podčiarknutý a vo fialovej farbe. Napríklad: Toto je už navštívený odkaz
  3. Aktívny odkaz sa zobrazí podčiarknutý a červenou farbou. Napríklad: Toto je aktívny odkaz

Značka obrázka HTML

Pri prehľadávaní internetu som si istý, že ste sa museli stretnúť s niekoľkými webovými stránkami, ktoré obsahujú rôzne formy multimédií. Najmä obrázky sú obľúbenou formou multimédií, ktoré sa dnes dajú nájsť na takmer všetkých interaktívnych webových stránkach a webových stránkach. Pochopme obrázkovú značku a jej implementáciu v HTML s nasledujúcim príkladom:

syntax

Poďme teraz pochopiť, ako fungujú všetky atribúty v značke img:

  1. src: Atribút src definuje cestu obrazového súboru, ktorý sa snažíme načítať pomocou tejto značky. Môže to byť odkaz na obrázok hostený na webe vo formáte ako example.com/images/dummy.png.webp alebo to môže byť obrazový súbor lokálne hostený na rovnakom serveri ako webová stránka.
  2. alt: Atribút alt definuje text a popis obrázka, ktorý by sme chceli zobraziť v prípade, že sa obrázky nedajú načítať kvôli sieťovému pripojeniu alebo inému problému.
  3. Šírka a výška: Šírka a výška oboch atribútov určuje šírku a výšku obrázka, ktorý by sme chceli zobraziť na webovej stránke. Inak by obrázok fungoval v predvolenom nastavení na 100% výšky a šírky.

Teraz sa pozrime na celý kód HTML potrebný na načítanie obrázka na webovú stránku. Uložte nasledujúci obrázok s názvom „sunset.png.webp“ do priečinka s názvom „image_test“ na miestnej jednotke.

Teraz v rovnakom priečinku vytvorme súbor HTML s názvom sunset.html s nasledujúcim kódom HTML:

Teraz v počítači prejdite do prehliadača a zadajte cestu k súboru .html. Moje súbory sú uložené na jednotke D, takže cesta pre mňa by bola

D: /image_test/sunset.html

A teraz vidíme, že vykreslená stránka HTML načítala obrázok západu slnka do nášho prehliadača. S pomocou CSS a

značku, môžeme tiež zobraziť text podľa našich požiadaviek okolo obrázka. Značky ukotvenia aj img sú kompatibilné so všetkými prehliadačmi, ako sú Google Chrome, Safari, Microsoft Edge, Firefox a Internet Explorer.

Prepojené obrázky v HTML

Teraz, keď sme pochopili s príkladmi, ako kotvová značka a obrázková značka fungujú individuálne, dovoľte nám pochopiť, ako môžeme kombinovať tieto dve funkcie a dosiahnuť scenár, v ktorom by sme chceli, aby boli používatelia presmerovaní na novú webovú stránku kliknutím na obrázok., Ak chcete na obrázok kliknúť a presmerovať používateľa na inú webovú stránku, musíme jednoducho vložiť obrázok do značky kotvy. V nižšie uvedenom príklade sa pokúsime zaradiť tri najvýznamnejšie vyhľadávacie nástroje pre web, ktoré sa používajú na celom svete. V našom zozname zobrazíme logá 3 vyhľadávacích nástrojov a kliknutím na ktorékoľvek z používateľov log sa presmeruje na príslušnú stránku vyhľadávacieho nástroja. Vytvorme priečinok s názvom „test presmerovania“ a do toho istého priečinka uložme obrázky uvedené nižšie

1. Google

2. Yahoo

3. Bing

Teraz vytvoríme .html s názvom imageredirection.html v rovnakom súbore. Imageredirection.html bude obsahovať nasledujúci kód

Teraz potrebujeme prístup na stránku HTML z prehliadača, pre ktorý zadám svoju miestnu cestu „D: / redirectiontest / imageredirection.html“. prehliadač potom vykreslí súbor HTML, aby vygeneroval nasledujúci výsledok:

->

Používatelia budú môcť prejsť na príslušný vyhľadávací nástroj kliknutím na svoje logo. Z vyššie uvedeného príkladu vyplýva, že HTML je jednoduchý a flexibilný jazyk, ktorý nám umožňuje kombinovať viacero značiek dohromady a dosiahnuť tak komplexnú funkčnosť. Kombinácia použitia značky img a kotvy je populárnou kombináciou. S ďalším kódovaním HTML môžeme tiež pridať rôzne prvky HTML, ako je napríklad zobrazenie prepojených obrázkov v usporiadanom alebo neusporiadanom zozname pomocou

    alebo
      , Extrémna flexibilita a jednoduchosť, ktorú poskytuje HTML s každou vydanou verziou, pomáha návrhárom používateľského rozhrania a používateľského rozhrania navrhovať interaktívne a intuitívne webové stránky, ktoré vidíme pri prehľadávaní Internetu pre každodenné činnosti.

      Odporúčaný článok

      Toto bol sprievodca odkazom na obrázok v HTML. Tu diskutujeme o rôznych typoch značiek HTML spolu so syntaxou. Viac informácií nájdete aj v ďalších navrhovaných článkoch -
      1. Atribúty HTML
      2. Značky formátu HTML
      3. Výhody HTML
      4. Značky obrázkov HTML
      5. Rámčeky HTML
      6. Bloky HTML
      7. Nastavte farbu pozadia v HTML s príkladom
      8. Zoznam objednávok HTML Typy atribútov so syntaxou

Kategórie:

Nástroje na vývoj webových aplikácií