HTML-linkit

HTML käyttää hyperlinkkejä yhdistääksensä verkkosivuston toiseen dokumenttiin.

Hyperlinkkejä löytyy lähes kaikista verkkosivuista. Napsauttamalla linkkiä voit siirtyä yhdestä sivusta toiseen.

Esimerkki

Luo hyperlinkki
Tämä esimerkki näyttää, miten voit luoda linkkejä HTML-dokumenttiin.
Käytä kuvaa linkkinä
Tämä esimerkki näyttää, miten voit käyttää kuvaa linkkinä.

(Lisää esimerkkejä löytyy sivun alareunasta.)

HTML-hyperlinkit (linkit)

Hyperlinkki voi olla sana, sana tai joukko sanoja, mutta myös kuva, jota voit napsauttaa siirtyäksesi uuteen asiakirjaan tai nykyisen asiakirjan johonkin osaan.

Kun viittomakonepääsi siirtyy verkkosivulla olevan linkin päälle, nuoli muuttuu pieneksi käden muotoiseksi.

Me emme luoda linkkejä HTML:ssä käyttämällä <a>-tagia.

On kaksi tapaa käyttää <a>-tagia:

  1. Määrittämällä href-ominaisuus - Luo linkki toiseen dokumenttiin
  2. Nimeämällä ankkuriä - Luo kirjanmerkki dokumenttiin

Lue lisää:Mitä on hyperteksti?

HTML-linkin syntaksi

Linkin HTML-koodi on yksinkertainen. Se näyttää tältä:

<a href="url">Linkkiteksti</a>

href-ominaisuus määrittää linkin kohteen.

Aloitustagin ja lopputagin välisessä tekstissä näytetään hyperlinkki.

Esimerkki

<a href="http://www.codew3c.com/">Vierasta CodeW3C.com</a>

Yllä oleva koodirivi näkyy näin:Vierasta CodeW3C.com

Napsauttamalla tätä hyperlinkkiä käyttäjä siirtyy CodeW3C.com:n kotisivulle.

Vinkki:"Linkkiteksti" ei välttämättä ole tekstiä. Kuva tai muu HTML-elementti voi myös olla linkki.

HTML-linkit - target-ominaisuus

Käyttämällä Target-ominaisuutta voit määrittää, missä linkitetty dokumentti näytetään.

Seuraava rivi avaa dokumentin uudessa ikkunassa:

<a href="http://www.codew3c.com/" target="_blank">Vierasta CodeW3C.com-sivustolla!</a>

Kokeile itse!

HTML-linkit - name-ominaisuus

name-ominaisuus määrittää ankkurin (anchor) nimen.

Voit luoda HTML-sivun kirjanmerkin name-ominaisuuden avulla.

Kirjanmerkit eivät näy erityisellä tavalla, ne ovat lukijalle näkymättömiä.

Kun käytämme nimettyjä ankkureita (named anchors), voimme luoda viittauksia, jotka johtavat suoraan kyseiseen nimettyyn ankkuriin (esim. sivun johonkin osaan), jotta käyttäjät eivät tarvitse jatkuvasti pyöriä sivua etsiäkseen tarvitsemaansa tietoa.

Nimetty ankkurin syntaksi:

<a name="label">Ankkuri (näytetään sivulla)</a>

Vinkki:Ankkurin nimi voi olla mikä tahansa miellyttäväsi.

Vinkki:Voit käyttää id-ominaisuutta name-ominaisuuksen sijaan, ja ankkurin nimeäminen toimii yhtä hyvin.

Esimerkki

Ensinnäkin nimeämme ankkurin HTML-dokumentissa (luomme kirjanmerkin):

<a name="tips">Perusohjeet - Hyödylliset vinkit</a>

Lisäksi luomme kyseiselle ankkurille viittauksen samassa dokumentissa:

<a href="#tips">Hyödylliset vinkit</a>

Voit myös luoda viittauksen kyseiseen ankkuriin muilla sivuilla:

<a href="http://www.codew3c.com/html/html_links.asp#tips"">Hyödylliset vinkit</a>

Yllä olevassa koodissa lisäämme #-merkki ja ankkurin nimen URL:n loppuun, jolloin voimme suoraan linkittää tips-ankkuriin.

Tarkka vaikutus:Hyödylliset vinkit

Perus huomiot - hyödyllisiä vinkkejä:

Huomautus:Lisää aina oikea vasen pystysuora viiva alaviitteisiin. Jos kirjoitat linkin tällä tavalla: href="http://www.codew3c.com/html"

Vinkki:Nimetyt ankkurit käytetään usein luomaan hakemistoja suurissa dokumenteissa. Voit antaa jokaiselle luvulle nimen ja sitten lisätä linkit näihin ankkureihin dokumentin ylälaitaan. Jos käytät Baike Baidun säännöllisesti, huomaat, että lähes jokaisella hakemistolla on tällainen navigointitapa.

Vinkki:Jos selain ei löydä määriteltyä nimettyä ankkuria, se siirtyy dokumentin ylätunnisteeseen. Virheitä ei tapahdu.

Lisää esimerkkejä

Avaa linkki uudessa selainikkunassa
Tämä esimerkki näyttää, miten avataan uusi selainikkuna, jolloin kävijä ei tarvitse poistua sivustoltasi.
Linkitys saman sivun eri paikkaan
Tämä esimerkki näyttää, miten linkitetään dokumentin toiseen osaan linkin avulla
Hypäys ulos kehyksestä
Tämä esimerkki näyttää, miten hypätään ulos kehyksestä, jos sivusi on asennettu kehykseen.
Luo sähköposti linkki
Tämä esimerkki näyttää, miten linkitetään sähköpostiin. (Tämä esimerkki toimii vain, jos sähköpostiasennusohjelma on asennettu.)
Luo sähköposti linkki 2
Tämä esimerkki näyttää monimutkaisemman sähköposti linkin.

HTML Linkki tunniste

Tunniste Kuvaus
<a> Määritä ankkuri.