Sissejuhatus HTML-i pildilinki

Kujutise link HTML-is leidub peaaegu kõigil lehtedel, kuna need aitavad meil veebisaidil ühelt lehelt teisele liikuda. Populaarne kombinatsioon on HTML-i ankrusildi kasutamine koos HTML-i img-sildiga . Selle kombinatsiooniga saame pildil klõpsates lubada kasutajate liikumist ühelt lehelt teisele. Enne kui selle teemaga kaugemale sukelduda, mõelgem kõigepealt eraldi ankurdus- ja pildielementide toimimist ja renderdamist ning ühendame need seejärel lingitud pildi saamiseks.

HTML-i ankrusilt

HTML-i ankru märgendit kasutatakse HTML-i hüperlinkide loomiseks teistele veebisaididele või multimeediumisisule. Vaadakem allpool olevat süntaksi, et mõista, kuidas ankrumärgendid toimivad ja nende põhiatribuute

Kliki siia!!

Ülaltoodud näites määratleb atribuut “href” selle veebilehe URL-i, kuhu soovime kasutaja suunata, klõpsates samal ajal teksti “Click here !!”.

Vaatame allpool olevat täielikku koodi:

Väljund

->

Ülaltoodud näite abil saate teha järgmised tähelepanekud

  1. Lülitamata link kuvatakse alla joonitud ja sinise värviga. Näiteks. See on nägematu link
  2. Külastatud link kuvatakse allajoonitud ja lilla värviga. Näiteks. See on juba külastatud link
  3. Aktiivne link kuvatakse allajoonitud ja punase värviga. Näiteks. See on aktiivne link

HTML-pildi silt

Internetis sirvides olen kindel, et olete kohanud mitmeid veebisaite, millel on mitmesugused multimeediumvormid. Eriti populaarsed on multimeediumpildid, mida tänapäeval võib leida peaaegu kõigilt interaktiivsetelt veebilehtedelt ja veebisaitidelt. Mõistame pildi silti ja selle rakendamist HTML-is järgmise näite abil:

Süntaks

Mõistagem nüüd, kuidas img-sildi kõik atribuudid toimivad:

  1. src: atribuut src määratleb pildifaili tee, mida proovime selle sildiga laadida. See võib olla link veebis hostitavale pildile, mille vorming on näiteks example.com/images/dummy.png.webp, või see võib olla pildifail, mis on hostitud veebilehega samas serveris.
  2. alt: atribuut alt määratleb pildi teksti ja kirjelduse, mida me sooviksime kuvada, kui pilte ei õnnestu võrguühenduse või mõne muu probleemi tõttu laadida.
  3. Laius ja kõrgus: Mõlema atribuudi laius ja kõrgus määravad pildi laiuse ja kõrguse, mida sooviksime veebilehel kuvada. Kui pilt töötab vaikimisi 100% kõrguse ja laiusega.

Vaatame nüüd täielikku HTML-koodi, mis on vajalik pildi laadimiseks veebilehele. Salvestage järgmine pilt nimega “sunset.png.webp” oma kohaliku draivi kausta nimega “image_test”.

Nüüd loome samas kaustas HTML-faili nimega sunset.html järgmise HTML-koodiga:

Nüüd minge oma arvuti brauserisse ja tippige .html-faili asukoht. Minu faile hoitakse D-draivis, nii et tee oleks minu jaoks

D: /image_test/sunset.html

Ja nüüd näeme, et renderdatud HTML-leht laadis meie brauserisse päikeseloojangu pildi. CSSi ja

sildi abil, võime kuvada teksti ka vastavalt oma nõudele pildi ümber. Nii ankur- kui ka img-sildid ühilduvad kõigi brauseritega nagu Google Chrome, Safari, Microsoft Edge, Firefox ja Internet Explorer.

Lingitud pildid HTML-is

Nüüd, kui oleme näidetega aru saanud, kuidas ankur- ja pildimärgend eraldi toimivad, mõistame nüüd, kuidas saaksime kahte funktsiooni ühendada stsenaariumi saavutamiseks, kus sooviksime, et kasutajad suunatakse pildi klõpsamisel uuele veebilehele . Kujutisel klõpsatavaks tegemiseks ja kasutaja suunamiseks teisele veebilehele peame pildi lihtsalt ankurdusmärgendisse pesastama. Allpool toodud näites proovime kaasata 3 parimat veebiotsingumootorit, mida kasutatakse kogu maailmas. Meie loendis kuvame 3 otsimootori logod ja klõpsates mõnel logol suunatakse kasutaja vastavale otsingumootori lehele. Loome kausta nimega “ümbersuunamise test” ja salvestage samasse kausta allpool olevad pildid

1. Google

2. Yahoo

3. Bing

Nüüd loome samas failis .html nimega imageredirection.html. Imageredirection.html sisaldab järgmist koodi

Nüüd peame brauserist pääsema HTML-lehele, mille jaoks kirjutan oma kohaliku tee “D: / redirectiontest / imageredirection.html”. siis renderdab brauser HTML-faili järgmise tulemuse genereerimiseks:

->

Kasutajad saavad navigeerida vastavale otsingumootorile, klõpsates nende logol. Ülaltoodud näitest võime täheldada, et HTML on lihtne ja paindlik keel, mis võimaldab meil ühendada mitu silti ja saavutada niimoodi keeruka funktsionaalsuse. Populaarne on kombinatsioon imgi ja ankurdusmärgise kasutamisest. Täiendava HTML-kodeerimise abil saame lisada ka erinevaid HTML-i elemente, nt lingitud piltide kuvamine tellitud või järjestamata loendis, kasutades

    või
      . Äärmiselt paindlikkus ja lihtsus, mida HTML iga välja antud versiooniga pakub, aitab UI ja UX disaineritel kujundada interaktiivseid ja intuitiivseid veebisaite, mida näeme igapäevaseid tegevusi Internetis sirvides.

      Soovitatav artikkel

      See on juhend HTML-vormingus pildilinki. Siin käsitleme HTML-i siltide erinevaid tüüpe koos süntaksiga. Lisateavet leiate ka meie muudest soovitatud artiklitest -
      1. HTML-atribuudid
      2. HTML-vormingus sildid
      3. HTML-i eelised
      4. HTML-pildi sildid
      5. HTML-raamid
      6. HTML-plokid
      7. Seadistage HTML-is taustavärv näitega
      8. HTML-i tellitud nimekiri | Süntaksiga atribuutide tüübid

Kategooria:

Veebiarenduse tööriistad