Introduktion til billedlink i HTML

Billedlink I HTML findes på næsten alle sider, da de hjælper os med at navigere fra den ene side til den anden på et websted. En populær kombination er at bruge HTML-ankermærket med HTML's img-tag . Med denne kombination kan vi tillade flytning af brugere fra en side til en anden ved at klikke på et billede. Før vi dykker videre om dette emne, lad os først forstå arbejdet og gengivelsen af ​​anker- og billedelementer individuelt og derefter kombinere dem for at opnå et sammenkoblet billede.

HTML-ankermærke

HTML-forankringsmærket bruges til at oprette HTML-hyperlinks til andre websider eller multimedieindhold, der er vært på internettet. Lad os henvise til syntaksen nedenfor for at forstå, hvordan ankermærker fungerer og deres grundlæggende attributter

Klik her!!

I ovenstående eksempel specificerer "href" -attributten URL'en til den webside, som vi gerne vil omdirigere brugeren, mens du klikker på teksten "Klik her !!".

Lad os se den komplette kode nedenfor:

Produktion

->

Med ovenstående eksempel vil du være i stand til at foretage følgende observationer

  1. Et ikke-besøgt link vises understreget og i blå farve. For f.eks. Dette er et ikke-opdaget link
  2. Et besøgt link vises understreget og i lilla farve. For f.eks. Dette er et allerede besøgt link
  3. Et aktivt link vises understreget og i rød farve. For f.eks. Dette er et aktivt link

HTML Image Tag

Mens jeg surfer på Internettet, er jeg sikker på, at du skal være stødt på flere websider, der indeholder forskellige former for multimedie inkluderet i dem. Især billeder er en populær form for multimedie, der findes i næsten alle interaktive websider og websteder i dag. Lad os forstå billedtagget og dets implementering i HTML med nedenstående eksempel:

Syntaks

Lad os nu forstå, hvordan hver af attributterne i img-tag fungerer:

  1. src: Attributten src definerer stien til den billedfil, vi forsøger at indlæse med dette tag. Det kan være et link til et billede, der er hostet på nettet med formatet som eksempel.com/images/dummy.png.webp, eller det kan være en billedfil, der lokalt er vært på den samme server som websiden.
  2. alt: attributten alt definerer teksten og beskrivelsen af ​​det billede, som vi gerne vil vise, hvis billederne ikke indlæses på grund af netværksforbindelse eller andre problemer.
  3. Bredde og højde: Bredden og højden på begge attributter definerer bredden og højden på det billede, vi gerne vil have vist på websiden. Ellers fungerer billedet med som standard 100% højde og bredde.

Lad os nu se den komplette HTML-kode, der kræves for at indlæse et billede på en webside. Gem følgende billede med navnet “sunset.png.webp” i en mappe kaldet “image_test” i dit lokale drev.

Lad os nu i den samme mappe oprette en HTML-fil ved navn sunset.html med følgende HTML-kode:

Gå nu til en browser på din maskine, og skriv stien til .html-filen. Mine filer gemmes i D-drev, så stien for mig ville være

D: /image_test/sunset.html

Og nu kan vi se, at den gengivne HTML-side har indlæst solnedgangsbilledet i vores browser. Ved hjælp af CSS og

tag, kan vi også vise tekst efter vores krav omkring billedet. Både anker- og img-tags er kompatible med alle browsere som Google Chrome, Safari, Microsoft Edge, Firefox og Internet Explorer.

Koblede billeder i HTML

Nu hvor vi har forstået med eksempler, hvordan ankermærke og billedmærke fungerer individuelt, lad os nu forstå, hvordan vi kan kombinere de to funktionaliteter for at opnå et scenarie, hvor vi gerne vil have, at brugerne bliver omdirigeret til en ny webside ved at klikke på et billede . For at gøre et billede klikbart og omdirigere brugeren til en anden webside, skal vi simpelthen indlejre billedet i et ankermærke. I nedenstående eksempel vil vi forsøge at få de 3 øverste websøgemaskiner brugt over hele kloden. I vores liste viser vi logoerne for de 3 søgemaskiner og ved at klikke på en af ​​logoerne bliver brugeren omdirigeret til den respektive søgemaskinside. Lad os oprette en mappe med navnet "omdirigeringstest", og lad os i den samme mappe gemme nedenstående billeder

1. Google

2. Yahoo

3. Bing

Nu opretter vi en .html ved navn imageredirection.html i den samme fil. Imageredirection.html vil indeholde følgende kode

Nu skal vi få adgang til HTML-siden fra browseren, som jeg skriver min lokale sti ”D: / redirectiontest / imageredirection.html”. browseren vil derefter gengive HTML-filen til at generere følgende resultat:

->

Brugerne vil være i stand til at navigere til den respektive søgemaskine ved at klikke på deres logo. Fra ovenstående eksempel kan vi observere, at HTML er et enkelt og fleksibelt sprog, der giver os mulighed for at kombinere flere tags sammen og opnå en kompleks funktionalitet som denne. Kombinationen af ​​at bruge img og anker tag er en populær kombination. Med yderligere HTML-kodning kan vi også tilføje forskellige HTML-elementer som at vise linkede billeder i en ordnet eller uordnet liste ved hjælp af

    eller
      . Den ekstreme fleksibilitet og enkelhed, som HTML giver med hver udgivne version, hjælper UI- og UX-designere med at designe interaktive og intuitive websider, som vi ser, mens vi surfer på internettet til daglige aktiviteter.

      Anbefalet artikel

      Dette har været en guide til Image Link i HTML. Her diskuterer vi de forskellige typer HTML-tags sammen med syntaks. Du kan også gennemgå vores andre foreslåede artikler for at lære mere -
      1. HTML-attributter
      2. HTML-format tags
      3. Fordele ved HTML
      4. HTML-billedmærker
      5. HTML-rammer
      6. HTML-blokke
      7. Indstil en baggrundsfarve i HTML med eksempel
      8. HTML bestilt liste | Typer af attributter med syntaks

Kategori:

Webudviklingsværktøjer