Introduksjon til Image Link i HTML

Image Link In HTML finnes på nesten alle sider, da de hjelper oss å navigere fra en side til en annen på et nettsted. En populær kombinasjon er å bruke HTML-ankeretiketten med HTMLs img-kode . Med denne kombinasjonen kan vi tillate bevegelse av brukere fra en side til en annen ved å klikke på et bilde. Før vi dykker nærmere på dette emnet, la oss først forstå hvordan bearbeiding og gjengivelse av anker- og bildeelementer er individuelt og deretter kombinere dem for å oppnå et koblet bilde.

HTML ankermerke

HTML-ankeretiketten brukes til å lage HTML-hyperkoblinger til andre websider eller multimediainnhold som er vert på nettet. La oss referere til syntaksen nedenfor for å forstå hvordan ankermerker fungerer og deres grunnleggende attributter

Klikk her!!

I eksemplet over spesifiserer "href" -attributtet URLen til websiden som vi ønsker å omdirigere brukeren mens du klikker på teksten "Klikk her !!".

La oss se den komplette koden nedenfor:

Produksjon

->

Med eksemplet over vil du kunne gjøre følgende observasjoner

  1. En unvisited lenke vil vises understreket og i blå farge. For f.eks. Dette er en uoppdaget lenke
  2. En besøkt lenke vil vises understreket og i lilla farge. For f.eks. Dette er en allerede besøkt lenke
  3. En aktiv lenke vises understreket og i rød farge. For f.eks. Dette er en aktiv kobling

HTML Image Tag

Mens jeg surfer på internett, er jeg sikker på at du må ha kommet over flere websider som har forskjellige former for multimedia inkludert i dem. Spesielt bilder er en populær form for multimedia som du finner på nesten alle interaktive websider og nettsteder i dag. La oss forstå bildekoden og dens implementering i HTML med eksemplet nedenfor:

syntax

La oss nå forstå hvordan hver av attributtene i img-taggen fungerer:

  1. src: attributtet src definerer banen til bildefilen vi prøver å laste inn med denne taggen. Det kan være en lenke til et bilde som er vert på nettet med formatet som eksempel.com/images/dummy.png.webp, eller det kan være en bildefil lokalt vert på samme server som websiden.
  2. alt: alt-attributtet definerer teksten og beskrivelsen av bildet som vi ønsker å vise i tilfelle hvis bildene ikke lastes på grunn av nettverkstilkobling eller andre problemer.
  3. Bredde og høyde: Bredden og høyden på begge attributtene definerer bredden og høyden på bildet vi ønsker å vise på websiden. Ellers vil bildet fungere med som standard 100% høyde og bredde.

La oss nå se den komplette HTML-koden som kreves for å laste et bilde på en webside. Lagre følgende bilde med navnet “sunset.png.webp” i en mappe som heter “image_test” på din lokale stasjon.

Nå i den samme mappen, la oss lage en HTML-fil som heter sunset.html med følgende HTML-kode:

Gå nå til en nettleser på maskinen din og skriv inn banen til .html-filen. Filene mine er lagret i D-stasjonen, slik at banen for meg ville være

D: /image_test/sunset.html

Og nå kan vi se at den gjengitte HTML-siden har lastet solnedgangsbildet i nettleseren vår. Ved hjelp av CSS og

tag, kan vi også vise tekst i henhold til kravet vårt rundt bildet. Både anker- og img-taggene er kompatible med alle nettlesere som Google Chrome, Safari, Microsoft Edge, Firefox og Internet Explorer.

Koblede bilder i HTML

Nå som vi har forstått med eksempler, hvordan ankermerke og bildekode fungerer individuelt, la oss nå forstå hvordan vi kan kombinere de to funksjonalitetene for å oppnå et scenario der vi ønsker at brukerne blir omdirigert til en ny webside ved å klikke på et bilde . For å gjøre et bilde klikkbart og omdirigere brukeren til en annen webside, trenger vi ganske enkelt å hekke bildet i et ankermerke. I eksemplet nedenfor vil vi prøve å verve de 3 beste søkemotorene som brukes over hele verden. I listen vår viser vi logoene til de 3 søkemotorene og ved å klikke på hvilken som helst av logoene blir brukeren omdirigert til den respektive søkemotorsiden. La oss lage en mappe som heter “omdirigeringstest”, og i den samme mappen la oss lagre bildene nedenfor

1. Google

2. Yahoo

3. Bing

Nå vil vi opprette en .html med navnet imageredirection.html i den samme filen. Imageredirection.html vil inneholde følgende kode

Nå må vi få tilgang til HTML-siden fra nettleseren, som jeg vil skrive inn den lokale banen min "D: / redirectiontest / imageredirection.html". nettleseren vil deretter gjengi HTML-filen for å generere følgende resultat:

->

Brukerne vil kunne navigere til den respektive søkemotoren ved å klikke på logoen sin. Fra eksemplet over kan vi observere at HTML er et enkelt og fleksibelt språk som lar oss kombinere flere tagger sammen og oppnå en kompleks funksjonalitet som dette. Kombinasjonen av å bruke img og ankermerke er en populær kombinasjon. Med ytterligere HTML-koding kan vi også legge til forskjellige HTML-elementer som å vise koblede bilder i en ordnet eller uordnet liste ved å bruke

    eller
      . Den ekstreme fleksibiliteten og enkelheten som HTML gir med hver utgave utgitt, hjelper UI- og UX-designere med å designe interaktive og intuitive websider som vi ser når du surfer på internett for daglige aktiviteter.

      Anbefalt artikkel

      Dette har vært en guide til Image Link i HTML. Her diskuterer vi de forskjellige typene HTML-tagger sammen med syntaks. Du kan også gå gjennom andre foreslåtte artikler for å lære mer -
      1. HTML-attributter
      2. HTML-format tagger
      3. Fordeler med HTML
      4. HTML Image Tags
      5. HTML-rammer
      6. HTML-blokker
      7. Angi en bakgrunnsfarge i HTML med eksempel
      8. HTML bestilt liste | Typer attributter med syntaks

Kategori:

Nettutviklingsverktøy