Bevezetés a HTML képbe

Image Link a HTML-ben szinte minden oldalon megtalálható, mivel segítenek navigálni egy weboldal egyik oldaláról a másikra. A népszerű kombináció a HTML rögzítő címke használata a HTML img címkével . Ezzel a kombinációval a képre kattintva engedélyezhetjük a felhasználók egyik oldalról a másikra történő mozgatását. Mielőtt tovább merülnénk a témában, először megértsük a horgony- és képelemek működését és megjelenítését külön-külön, majd összekapcsoljuk őket, hogy összekapcsolt képet kapjunk.

HTML horgonycímke

A HTML Anchor címkét HTML hiperhivatkozások létrehozására használják más weboldalakhoz vagy az interneten tárolt multimédia tartalmakhoz. Nézzük meg az alábbi szintaxist, hogy megértsük, hogyan működnek a horgonycímkék és azok alapvető tulajdonságai

Kattints ide!!

A fenti példában a „href” attribútum határozza meg annak a weboldalnak az URL-jét, amelyre átirányítani szeretnénk a felhasználót, miközben rákattintunk a „Click here !!” szövegre.

Nézzük meg az alábbi teljes kódot:

Kimenet

->

A fenti példával az alábbiakat teheti meg

  1. A nem látott link aláhúzva és kék színben jelenik meg. Például. Ez egy nem látott link
  2. A meglátogatott link aláhúzva és lila színben jelenik meg. Például. Ez egy már meglátogatott link
  3. Az aktív link aláhúzva és piros színben jelenik meg. Például. Ez egy aktív link

HTML képcímke

Az interneten való böngészés közben biztos vagyok benne, hogy több olyan weboldalon keresztül találkoznia kellett, amelyekbe a multimédia különféle formái tartoznak. Különösen a képek a multimédia népszerű formája, amelyek manapság szinte minden interaktív weboldalon és weboldalon megtalálhatók. Megértjük a képcímkét és annak HTML formátumban történő megvalósítását az alábbi példával:

Szintaxis

Most megértjük, hogyan működik az img tag minden attribútuma:

  1. src: Az src attribútum határozza meg annak a képfájlnak az elérési útját, amelyet próbálunk betölteni ezzel a címkével. Ez lehet egy link az interneten tárolt képhez, amelynek formátuma például a example.com/images/dummy.png.webp, vagy egy képfájl, amely helyben ugyanazon a szerveren található, mint a weboldal.
  2. alt: Az alt attribútum meghatározza a kép szövegét és leírását, amelyet szeretnénk megjeleníteni, ha a képeket nem sikerült betölteni hálózati kapcsolat vagy bármilyen más probléma miatt.
  3. Szélesség és magasság: Mindkét attribútum szélessége és magassága határozza meg annak a képnek a szélességét és magasságát, amelyet szeretnénk megjeleníteni a weboldalon. Egyébként a kép alapértelmezés szerint 100% magassággal és szélességgel működne.

Most nézzük meg a teljes HTML-kódot, amely egy kép weboldalra történő betöltéséhez szükséges. A következő képet „sunset.png.webp” néven mentse a helyi meghajtó „image_test” nevű mappájába.

Most ugyanabban a mappában hozzunk létre egy sunset.html nevű HTML fájlt a következő HTML kóddal:

Most lépjen a számítógép böngészőjébe, és írja be a .html fájl elérési útját. A fájlokat a D meghajtó tárolja, így számomra az elérési út lenne

D: /image_test/sunset.html

És most láthatjuk, hogy a megjelenített HTML oldal betöltötte a naplemente képet böngészőnkbe. A CSS és a

címkével, szöveget is megjeleníthetünk a kép körüli követelményünk szerint. Mind a horgony, mind az img címkék kompatibilisek minden böngészővel, például a Google Chrome, a Safari, a Microsoft Edge, a Firefox és az Internet Explorer böngészővel.

Kapcsolódó képek HTML formátumban

Most, hogy a példákkal megértettük, hogy a horgonycímke és a képcímke hogyan működik külön-külön, most megértjük, hogyan lehet a két funkciót összekapcsolni egy olyan forgatókönyv elérése érdekében, ahol azt szeretnénk, ha a felhasználókat egy kép kattintására irányítanák egy új weboldalra. . Annak érdekében, hogy egy kép kattintható legyen, és a felhasználót átirányítsuk egy másik weboldalra, egyszerűen be kell helyezni a képet egy horgonycímkébe. Az alábbi példában megpróbáljuk felvenni a világ első felében használt 3 legfontosabb internetes keresőmotort. A listánkban megmutatjuk a 3 keresőmotor logóit, és bármelyik logóra kattintva a felhasználó átirányul a megfelelő keresőmotor oldalára. Hozzunk létre egy „átirányítási teszt” nevű mappát, és ugyanabban a mappában mentsük el az alábbi képeket

1. Google

2. Yahoo

3. Bing

Most létrehozunk egy .html fájlt imageredirection.html néven ugyanabban a fájlban. Az imageredirection.html a következő kódot tartalmazza

Most el kell érnünk a HTML oldalt a böngészőből, amelyre beírom a helyi elérési útomat: „D: / redirectiontest / imageredirection.html”. a böngésző ezt követően megjeleníti a HTML fájlt a következő eredmény generálására:

->

A felhasználók a logójukra kattintva navigálhatnak a megfelelő keresőmotorhoz. A fenti példa alapján megfigyelhetjük, hogy a HTML egy egyszerű és rugalmas nyelv, amely lehetővé teszi több címke kombinálását és egy ilyen komplex funkció elérését. Az img és a horgonycímke kombinációja egy népszerű kombináció. További HTML kódolással különféle HTML elemeket is hozzáadhatunk, például a kapcsolt képek megjelenítését rendezett vagy rendezetlen listában a

    vagy
      . A HTML által biztosított rendkívüli rugalmasság és egyszerűség az egyes kiadott verziókkal segít az UI és az UX tervezőinek interaktív és intuitív weboldalak megtervezésében, amelyeket látunk, amikor napi tevékenységeket keresünk az interneten.

      Ajánlott cikk

      Ez egy útmutató a Image Link HTML-hez. Itt a HTML-címkék különféle típusait tárgyaljuk, a szintaxissal együtt. A további javasolt cikkeken keresztül további információkat is megtudhat -
      1. HTML attribútumok
      2. HTML formátumú címkék
      3. A HTML előnyei
      4. HTML képcímkék
      5. HTML keretek
      6. HTML blokkok
      7. Állítsa be a háttér színét HTML-ben a Példa segítségével
      8. HTML megrendelhető lista | Attribútumok típusai a szintaxissal

Kategória:

Webfejlesztő eszközök