Johdanto HTML-kuvalinkiin

Kuvalinkki HTML-muodossa löytyy melkein kaikilta sivuilta, koska ne auttavat meitä navigoimaan verkkosivun yhdeltä sivulta toiselle. Suosittu yhdistelmä on käyttää HTML-ankkuritunnistetta HTML: n img-tunnisteen kanssa . Tällä yhdistelmällä voimme sallia käyttäjien liikkumisen sivulta toiselle napsauttamalla kuvaa. Ennen kuin sukellamme tarkemmin tähän aiheeseen, ymmärrämme ensin ankkuri- ja kuvaelementtien työskentely ja renderointi erikseen ja yhdistämme ne sitten linkitetyn kuvan aikaansaamiseksi.

HTML-ankkuritagi

HTML Anchor -tagia käytetään HTML-hyperlinkkien luomiseen muille web-sivuille tai webissä ylläpitämälle multimediasisällölle. Viitataan alla olevaan syntaksiin ymmärtääksesi kuinka ankkuritunnisteet toimivat ja niiden perusominaisuudet

Klikkaa tästä!!

Yllä olevassa esimerkissä ”href” -attribuutti määrittää sen verkkosivun URL-osoitteen, johon haluaisimme ohjata käyttäjän napsauttamalla tekstiä ”Napsauta tästä !!”.

Katsokaamme koko koodi alla:

ulostulo

->

Yllä olevan esimerkin avulla pystyt tekemään seuraavat huomautukset

  1. Näkymätön linkki näkyy alleviivattu ja sinisellä värillä. Esimerkiksi. Tämä on näkymätön linkki
  2. Käytetty linkki näkyy alleviivattu ja violetti. Esimerkiksi. Tämä on jo vieraili linkki
  3. Aktiivinen linkki näkyy alleviivattu ja punaisella. Esimerkiksi. Tämä on aktiivinen linkki

HTML-kuvatunniste

Internetiä selatessani olen varma, että joudut törmännyt useille verkkosivuille, joihin sisältyy erilaisia ​​multimediamuotoja. Erityisesti kuvat ovat suosittu multimedian muoto, jota löytyy nykyään melkein kaikilta interaktiivisilta verkkosivuilta ja verkkosivustoilta. Ymmärrämme kuvatunnisteen ja sen toteutuksen HTML-muodossa seuraavan esimerkin avulla:

Syntaksi

Ymmärrämme nyt, kuinka kukin img-tunnisteen attribuutit toimivat:

  1. src: src-määrite määrittelee kuvatiedoston polun, jota yritämme ladata tällä tunnisteella. Se voi olla linkki kuvaan, jota ylläpidetään webissä muodossa esimerkki.com/mages/dummy.png.webp, tai se voi olla kuvatiedosto, joka on paikallisesti ylläpidetty samalla palvelimella kuin verkkosivu.
  2. alt: alt-attribuutti määrittelee kuvan tekstin ja kuvauksen, jota haluamme näyttää, jos kuvat eivät lataudu verkkoyhteyden tai muun ongelman vuoksi.
  3. Leveys ja korkeus: Molempien ominaisuuksien leveys ja korkeus määrittelevät kuvan leveyden ja korkeuden, jonka haluaisimme näyttää verkkosivulla. Muussa tapauksessa kuva toimisi oletuksena 100% korkeudella ja leveydellä.

Katsotaanpa nyt täydellinen HTML-koodi, jota tarvitaan kuvan lataamiseen verkkosivulle. Tallenna seuraava kuva nimellä “sunset.png.webp” paikallisen aseman kansioon ”image_test”.

Nyt luodaan samaan kansioon HTML-tiedosto nimeltä sunset.html seuraavalla HTML-koodilla:

Siirry nyt koneesi selaimeen ja kirjoita .html-tiedoston polku. Tiedostot tallennetaan D-asemaan, joten polku minulle olisi

D: /image_test/sunset.html

Ja nyt näemme, että renderoitu HTML-sivu on ladannut auringonlaskun kuvan selaimeemme. CSS: n ja

tunniste, voimme näyttää myös tekstiä kuvan ympärillä olevan vaatimuksen mukaisesti. Sekä ankkuri- että img-tunnisteet ovat yhteensopivia kaikkien selainten, kuten Google Chromen, Safarin, Microsoft Edgen, Firefoxin ja Internet Explorerin kanssa.

Linkitetyt kuvat HTML-muodossa

Nyt kun olemme ymmärtäneet esimerkkien avulla, kuinka ankkuritunniste ja kuvatunniste toimivat erikseen, ymmärrämme kuinka voimme yhdistää nämä kaksi toimintoa sellaisen skenaarion aikaansaamiseksi, jossa haluamme, että käyttäjät ohjataan uudelle verkkosivulle kuvan napsautuksella . Jotta kuvaa voidaan napsauttaa ja ohjata käyttäjä uudelleen toiselle verkkosivulle, meidän täytyy vain sijoittaa kuva ankkuritunnisteeseen. Alla olevassa esimerkissä yritämme saada mukaan maailman kolme suosituinta web-hakukonetta. Luettelossamme näytämme kolmen hakukoneen logot ja napsauttamalla mitä tahansa logoja käyttäjä ohjataan vastaavalle hakukoneen sivulle. Luodaan kansio nimeltä ”redirection test” ja tallennetaan samaan kansioon alla olevat kuvat

1. Google

2. Yahoo

3. Bing

Nyt luomme .html-tiedoston nimellä imageredirection.html samaan tiedostoon. Imageredirection.html sisältää seuraavan koodin

Nyt meidän on käytettävä HTML-sivua selaimesta, jolle kirjoitan paikallisen polkuni “D: / redirectiontest / imageredirection.html”. selain sitten tuottaa HTML-tiedoston seuraavan tuloksen luomiseksi:

->

Käyttäjät voivat navigoida vastaavaan hakukoneeseen napsauttamalla heidän logoaan. Yllä olevasta esimerkistä voidaan havaita, että HTML on yksinkertainen ja joustava kieli, jonka avulla voimme yhdistää useita tunnisteita yhdessä ja saavuttaa tämänkaltaisen monimutkaisen toiminnallisuuden. Yhdistelmä img- ja ankkuritunnisteiden käytöstä on suosittu yhdistelmä. Lisä HTML-koodauksella voimme lisätä myös erilaisia ​​HTML-elementtejä, kuten linkitettyjen kuvien näyttämisen tilatussa tai järjestämättömässä luettelossa käyttämällä

    tai
      . Äärimmäinen joustavuus ja yksinkertaisuus, jonka HTML tarjoaa jokaiseen julkaistuun versioon, auttaa käyttöliittymien ja UX: n suunnittelijoita suunnittelemaan vuorovaikutteisia ja intuitiivisia verkkosivuja, joita näemme selaamalla Internetiä päivittäisiin toimintoihin.

      Suositeltava artikkeli

      Tämä on opas kuvalinkille HTML-muodossa. Tässä keskustellaan HTML-tunnisteiden erityypeistä yhdessä syntaksin kanssa. Voit myös käydä läpi muiden ehdotettujen artikkeleidemme saadaksesi lisätietoja -
      1. HTML-määritteet
      2. HTML-muotoiset tunnisteet
      3. HTML: n edut
      4. HTML-kuvatunnisteet
      5. HTML-kehykset
      6. HTML-esteet
      7. Aseta taustaväri HTML-muodossa esimerkillä
      8. HTML-tilattu luettelo | Attribuuttityypit syntaksin kanssa

Luokka:

Web-kehitystyökalut