Introduktion till Image Link i HTML

Bildlänk i HTML finns på nästan alla sidor eftersom de hjälper oss att navigera från en sida till en annan på en webbplats. En populär kombination är att använda HTML-ankaretiketten med HTML: s img-tagg . Med denna kombination kan vi tillåta förflyttning av användare från en sida till en annan genom att klicka på en bild. Innan vi dyker ytterligare om detta ämne, låt oss först förstå hur man arbetar och återger ankare och bildelement individuellt och sedan kombinerar dem för att uppnå en länkad bild.

HTML-förankringstagg

HTML Anchor-taggen används för att skapa HTML-hyperlänkar till andra webbsidor eller multimediainnehåll värd på webben. Låt oss hänvisa till syntaxen nedan för att förstå hur ankartaggar fungerar och deras grundläggande attribut

Klicka här!!

I exemplet ovan anger "href" -attributet webbadressen till webbsidan till vilken vi vill omdirigera användaren medan du klickar på texten "Klicka här !!".

Låt oss se den fullständiga koden nedan:

Produktion

->

Med exemplet ovan kommer du att kunna göra följande observationer

  1. En obesökt länk kommer att visas understruket och i blå färg. För t.ex. Det här är en osynlig länk
  2. En besökt länk visas understruket och i lila färger. För t.ex. Detta är en redan besökt länk
  3. En aktiv länk visas understruket och i röd färg. För t.ex. Detta är en aktiv länk

HTML-bildtagg

När jag surfar på internet är jag säker på att du måste ha stött på flera webbsidor som har olika former av multimedia inkluderade i dem. Särskilt bilder är en populär form av multimedia som finns på nästan alla interaktiva webbsidor och webbplatser idag. Låt oss förstå bildtaggen och dess implementering i HTML med exemplet nedan:

Syntax

Låt oss nu förstå hur vart och ett av attributen i img-taggen fungerar:

  1. src: attributet src definierar sökvägen för den bildfil som vi försöker ladda med den här taggen. Det kan vara en länk till en bild värd på webben med formatet som exempel.com/images/dummy.png.webp eller en bildfil som är lokalt värd på samma server som webbsidan.
  2. alt: Alt-attributet definierar texten och beskrivningen av bilden som vi vill visa i fall om bilderna inte laddas på grund av nätverksanslutning eller något annat problem.
  3. Bredd och höjd: Bredden och höjden på båda attributen definierar bredden och höjden på den bild vi vill visa på webbsidan. Annars skulle bilden fungera med som standard 100% höjd och bredd.

Låt oss nu se den kompletta HTML-koden som krävs för att ladda en bild på en webbsida. Spara följande bild med namnet “sunset.png.webp” i en mapp som heter “image_test” i din lokala enhet.

Nu i samma mapp låt oss skapa en HTML-fil med namnet sunset.html med följande HTML-kod:

Gå nu till en webbläsare på din maskin och skriv in sökvägen till .html-filen. Mina filer lagras i D-enhet så banan för mig skulle vara

D: /image_test/sunset.html

Och nu kan vi se att den återgivna HTML-sidan har laddat solnedgångsbilden i vår webbläsare. Med hjälp av CSS och

tag, kan vi också visa text enligt vårt krav runt bilden. Både ankar- och img-taggarna är kompatibla med alla webbläsare som Google Chrome, Safari, Microsoft Edge, Firefox och Internet Explorer.

Länkade bilder i HTML

Nu när vi har förstått med exempel, hur ankar tagg och bildtagg fungerar individuellt, låt oss nu förstå hur vi kan kombinera de två funktionaliteterna för att uppnå ett scenario där vi vill att användarna ska omdirigeras till en ny webbsida med ett klick på en bild . För att göra en bild att klicka och omdirigera användaren till en annan webbsida behöver vi helt enkelt bo in bilden i en ankare. I exemplet nedan kommer vi att försöka få de 3 bästa sökmotorerna som används över hela världen. I vår lista kommer vi att visa logotyperna för de tre sökmotorerna och genom att klicka på någon av logotyperna kommer vi att omdirigeras till respektive sökmotorsida. Låt oss skapa en mapp med namnet “omdirigeringstest” och i samma mapp låt oss spara bilderna nedan

1. Google

2. Yahoo

3. Bing

Nu skapar vi en .html med namnet imageredirection.html i samma fil. Imageredirection.html kommer att innehålla följande kod

Nu måste vi komma åt HTML-sidan från webbläsaren, för vilken jag skriver min lokala väg “D: / redirectiontest / imageredirection.html”. webbläsaren ger sedan HTML-filen för att generera följande resultat:

->

Användarna kommer att kunna navigera till respektive sökmotor genom att klicka på deras logotyp. Från exemplet ovan kan vi observera att HTML är ett enkelt och flexibelt språk som gör att vi kan kombinera flera taggar tillsammans och uppnå en komplex funktionalitet som denna. Kombinationen av att använda img och ankare är en populär kombination. Med ytterligare HTML-kodning kan vi också lägga till olika HTML-element som att visa länkade bilder i en ordnad eller oordnad lista med

    eller
      . Den extrema flexibiliteten och enkelheten som HTML ger med varje version som släpps, hjälper UI- och UX-designers att utforma interaktiva och intuitiva webbsidor som vi ser när vi surfar på internet för dagliga aktiviteter.

      Rekommenderad artikel

      Detta har varit en guide till bildlänk i HTML. Här diskuterar vi olika typer av HTML-taggar tillsammans med syntax. Du kan också gå igenom våra andra föreslagna artiklar för att lära dig mer -
      1. HTML-attribut
      2. HTML-formatetiketter
      3. Fördelar med HTML
      4. HTML-bildtaggar
      5. HTML-ramar
      6. HTML-block
      7. Ställ in en bakgrundsfärg i HTML med exempel
      8. HTML beställd lista | Typer av attribut med syntax

Kategori:

Verktyg för webbutveckling