Uvod v slikovno povezavo v HTML

Povezava slike V HTML-ju najdemo skoraj vse strani, saj nam pomagajo pri premikanju od ene do druge strani na spletnem mestu. Priljubljena kombinacija je uporaba oznake HTML sidra z oznako HTML img . S to kombinacijo lahko s klikom na sliko omogočimo premikanje uporabnikov z ene strani na drugo. Preden se poglobimo na to temo, najprej razmislimo o delu in upodabljanju elementov sidra in slike posamično in jih nato kombiniramo, da dosežemo povezano sliko.

Oznaka sidra HTML

Oznaka HTML Anchor se uporablja za ustvarjanje hiperpovezav HTML do drugih spletnih strani ali multimedijske vsebine, ki gostuje v spletu. Oglejte si spodnjo skladnjo, da bomo razumeli, kako delujejo oznake za sidranje in njihove osnovne atribute

Klikni tukaj!!

V zgornjem primeru atribut "href" določa URL spletne strani, na katero želimo uporabnika preusmeriti, ko klikne besedilo "Kliknite tukaj !!".

Oglejmo si spodaj celotno kodo:

Izhod

->

Z zgornjim primerom boste lahko podali naslednja opažanja

  1. Neogledana povezava bo videti podčrtana in modre barve. Za npr. To je neobiskana povezava
  2. Obiskana povezava bo videti podčrtana in v vijolični barvi. Za npr. To je že obiskana povezava
  3. Aktivna povezava je podčrtana in v rdeči barvi. Za npr. To je aktivna povezava

Oznaka slike HTML

Med brskanjem po internetu sem prepričan, da ste zagotovo naleteli na več spletnih strani z različnimi oblikami večpredstavnosti. Predvsem slike so priljubljena oblika večpredstavnosti, ki jo danes najdemo na skoraj vseh interaktivnih spletnih straneh in spletnih mestih. Razumejmo slikovno oznako in njeno izvajanje v HTML s spodnjim primerom:

Sintaksa

Zdaj razumemo, kako deluje vsak atribut v oznaki img:

  1. src: Atribut src določa pot slikovne datoteke, ki jo poskušamo naložiti s to oznako. To je lahko povezava do slike, ki je v spletu, v formatu, na primer example.com/images/dummy.png.webp, ali pa slikovna datoteka, ki je lokalno gostovana na istem strežniku kot spletna stran.
  2. alt: Atribut alt določa besedilo in opis slike, ki bi jo želeli prikazati, če se slike ne naložijo zaradi omrežne povezljivosti ali kakšne druge težave.
  3. Širina in višina: Širina in višina obeh atributov določata širino in višino slike, ki jo želimo prikazati na spletni strani. Drugače bi slika delovala s privzeto 100% višino in širino.

Zdaj si oglejmo celotno kodo HTML, ki je potrebna za nalaganje slike na spletno stran. Naslednjo sliko shranite z imenom „sunset.png.webp“ v mapo z imenom „image_test“ na lokalnem pogonu.

Zdaj v isti mapi ustvarimo datoteko HTML z imenom sunset.html z naslednjo kodo HTML:

Zdaj pojdite v brskalnik na svojem stroju in vnesite pot datoteke .html. Moje datoteke so shranjene v pogonu D, tako da bi bila pot zame

D: /image_test/sunset.html

In zdaj lahko vidimo, da je upodobljena HTML stran naložila zahodno sliko v naš brskalnik. S pomočjo CSS in

Oznaka, lahko tudi okrog slike prikažemo besedilo, kot je potrebno. Oznake sidra in img sta združljivi z vsemi brskalniki, kot so Google Chrome, Safari, Microsoft Edge, Firefox in Internet Explorer.

Povezane slike v HTML

Zdaj, ko smo s primeri razumeli, kako posamezna oznaka sidra in slikovna oznaka delujeta, zdaj razumemo, kako lahko združimo obe funkcionalnosti in dosežemo scenarij, v katerem bi želeli, da se uporabniki s klikom slike preusmerijo na novo spletno stran. . Če želimo sliko klikniti in uporabnika preusmeriti na drugo spletno stran, moramo sliko preprosto gnezditi v sidrni oznaki. V spodnjem primeru bomo poskušali uvrstiti med najboljše tri spletne iskalnike, ki se uporabljajo po vsem svetu. Na našem seznamu bomo prikazali logotipe treh iskalnikov in s klikom na katerega koli uporabnika logotipov bomo preusmerili na ustrezno stran iskalnika. Ustvarimo mapo z imenom »preusmeritveni test« in v isto mapo shranimo spodnje slike

1. Google

2. Yahoo

3. Bing

Zdaj bomo v isti datoteki ustvarili .html z imenom imageredirection.html. Imageredirection.html bo vseboval naslednjo kodo

Zdaj moramo do brskalnika dostopati do strani HTML, za katero bom vtipkal svojo lokalno pot »D: / redirektest / imageredirection.html«. brskalnik bo nato upodobil datoteko HTML in ustvaril naslednji rezultat:

->

Uporabniki se bodo lahko s svojim logotipom pomerili do ustreznega iskalnika. Iz zgornjega primera lahko razberemo, da je HTML preprost in prilagodljiv jezik, ki nam omogoča, da združimo več oznak skupaj in dosežemo tako zapleteno funkcionalnost. Kombinacija uporabe img in sidrne oznake je priljubljena kombinacija. Z dodatnim kodiranjem HTML lahko dodamo tudi različne elemente HTML, na primer prikazovanje povezanih slik na urejenem ali neurejenem seznamu z uporabo

    ali
      . Izjemna fleksibilnost in preprostost, ki jo HTML zagotavlja z vsako izdano različico, pomaga oblikovalcem uporabniškega vmesnika in UX oblikovati interaktivne in intuitivne spletne strani, ki jih vidimo med brskanjem po internetu za vsakodnevne dejavnosti.

      Priporočeni članek

      To je vodnik za povezavo do slik v HTML. Tukaj razpravljamo o različnih vrstah oznak HTML, skupaj s sintakso. Če želite izvedeti več, lahko preberete tudi druge naše predlagane članke -
      1. Atributi HTML
      2. Oznake formata HTML
      3. Prednosti HTML-ja
      4. Oznake HTML HTML
      5. Okvirji HTML
      6. Bloki HTML
      7. Nastavite barvo ozadja v HTML s Primerom
      8. Seznam HTML urejenih | Vrste atributov s sintakso

Kategorija:

Orodja za razvoj spletnih strani