Linkkien Käyttö
<a>-tagia käytetään luomaan hyperlinkkejä, joiden avulla käyttäjät voivat siirtyä eri verkkosivujen välillä. Kun käyttäjä napsauttaa linkkiä, selain lähettää pyynnön palvelimelle linkkiin liitetystä sivusta ja näyttää vastauksen näytöllä. href-attribuutilla määritellään kohdesivun URL-osoite.
index.html
Linkin attribuutit
target
Oletuksena linkki avautuu samassa selainvälilehdessä. target-attribuutin avulla tätä käyttäytymistä voidaan muuttaa. Jos haluat avata linkin uuteen välilehteen, käytä target="_blank".
index.html
download
download-attribuuttia voidaan käyttää HTML:n <a>-tagin kanssa määrittämään, että kohderesurssi ladataan selaimen sijaan. Kun download-attribuuttia käytetään, selain kehottaa käyttäjää tallentamaan tiedoston määritetyllä tiedostonimellä. Esimerkiksi, jos haluat luoda elementin, jolla on seuraava toiminnallisuus: kun käyttäjä napsauttaa linkkiä, selain lataa tiedoston "myfile.pdf" osoitteesta https://example.com/ ja kehottaa käyttäjää tallentamaan sen nimellä myfile.pdf.
index.html
href
href-attribuuttia käytetään paitsi siirtymiseen toisille sivuille, myös linkkien luomiseen sähköpostiosoitteisiin, puhelinnumeroihin ja tiettyihin sivun osiin.
index.html
Lisäksi href-attribuuttia voidaan käyttää siirtymiseen tiettyihin kohtiin verkkosivulla. Luo ankkurilinkki määrittämällä haluttuun osioon id-attribuutti (yksilöllinen tunniste). href-attribuutin arvoksi asetetaan #-merkki ja sen perään kyseinen id-arvo.
Tarkastellaan seuraavaa esimerkkiä, joka on esitetty CodeSandbox-alustalla. Tällä alustalla voit tarkastella koodia ja tutkia sen toiminnallisuutta.
Tutustu toiminnallisuuteen napsauttamalla linkkejä ja seuraamalla, kuinka sivu vierittyy tiettyihin osioihin. Kiinnitä lisäksi huomiota a- ja h2-tagien attribuutteihin.
Voit tarkastella koodia vetämällä liukusäädintä koodieditorin vasemmalla puolella. Tämä paljastaa olemassa olevan koodin editorissa.
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Mahtavaa!
Completion arvosana parantunut arvoon 2.38Linkkien Käyttö
Pyyhkäise näyttääksesi valikon
<a>-tagia käytetään luomaan hyperlinkkejä, joiden avulla käyttäjät voivat siirtyä eri verkkosivujen välillä. Kun käyttäjä napsauttaa linkkiä, selain lähettää pyynnön palvelimelle linkkiin liitetystä sivusta ja näyttää vastauksen näytöllä. href-attribuutilla määritellään kohdesivun URL-osoite.
index.html
Linkin attribuutit
target
Oletuksena linkki avautuu samassa selainvälilehdessä. target-attribuutin avulla tätä käyttäytymistä voidaan muuttaa. Jos haluat avata linkin uuteen välilehteen, käytä target="_blank".
index.html
download
download-attribuuttia voidaan käyttää HTML:n <a>-tagin kanssa määrittämään, että kohderesurssi ladataan selaimen sijaan. Kun download-attribuuttia käytetään, selain kehottaa käyttäjää tallentamaan tiedoston määritetyllä tiedostonimellä. Esimerkiksi, jos haluat luoda elementin, jolla on seuraava toiminnallisuus: kun käyttäjä napsauttaa linkkiä, selain lataa tiedoston "myfile.pdf" osoitteesta https://example.com/ ja kehottaa käyttäjää tallentamaan sen nimellä myfile.pdf.
index.html
href
href-attribuuttia käytetään paitsi siirtymiseen toisille sivuille, myös linkkien luomiseen sähköpostiosoitteisiin, puhelinnumeroihin ja tiettyihin sivun osiin.
index.html
Lisäksi href-attribuuttia voidaan käyttää siirtymiseen tiettyihin kohtiin verkkosivulla. Luo ankkurilinkki määrittämällä haluttuun osioon id-attribuutti (yksilöllinen tunniste). href-attribuutin arvoksi asetetaan #-merkki ja sen perään kyseinen id-arvo.
Tarkastellaan seuraavaa esimerkkiä, joka on esitetty CodeSandbox-alustalla. Tällä alustalla voit tarkastella koodia ja tutkia sen toiminnallisuutta.
Tutustu toiminnallisuuteen napsauttamalla linkkejä ja seuraamalla, kuinka sivu vierittyy tiettyihin osioihin. Kiinnitä lisäksi huomiota a- ja h2-tagien attribuutteihin.
Voit tarkastella koodia vetämällä liukusäädintä koodieditorin vasemmalla puolella. Tämä paljastaa olemassa olevan koodin editorissa.
Kiitos palautteestasi!
