HTML-linkit

tässä opetusohjelmassa opit luomaan linkkejä muille HTML-sivuille.

linkkien luominen HTML: ssä

linkki tai hyperlinkki on yhteys web-resurssista toiseen. Linkkien avulla käyttäjät voivat siirtyä saumattomasti sivulta toiselle millä tahansa palvelimella missä tahansa maailmassa.

lenkillä on kaksi päätä, joita kutsutaan ankkureiksi. Linkki alkaa lähdeankkurista ja osoittaa kohdeankkuriin, joka voi olla mikä tahansa web-resurssi, esimerkiksi kuva, ääni-tai videopätkä, PDF-tiedosto, HTML-dokumentti tai elementti itse dokumentissa ja niin edelleen.

oletuksena linkit näkyvät seuraavina useimmissa selaimissa:

• vierailematon linkki on alleviivattu ja sininen.
• vierailtu linkki on alleviivattu ja violetti.
• aktiivinen linkki on alleviivattu ja punainen.

tämän voi kuitenkin korvata CSS: llä. Lue Lisää tyyli linkkejä.

HTML-linkin syntaksi

linkit on määritelty HTML: ssä käyttäen <a> tagia.

linkki tai hyperlinkki voi olla sana, sanaryhmä tai kuva.

mikä tahansa avauksen <a> ja lopetuksen </a> välillä muuttuu linkin osaksi, jonka käyttäjä näkee ja napsauttaa selaimessa. Tässä muutamia esimerkkejä linkeistä:

<a href="https://www.google.com/">Google Search</a><a href="https://www.tutorialrepublic.com/">Tutorial Republic</a><a href="images/kites.jpg"> <img src="kites-thumb.jpg" alt="kites"></a>

attribuutti href määrittää linkin kohteen. Sen arvo voi olla absoluuttinen tai suhteellinen URL.

absoluuttinen URL-osoite on URL, joka sisältää kaikki URL-muodon osat, kuten protokollan, isäntänimen ja dokumentin polun, esim. https://www.google.com/, https://www.example.com/form.php jne. Kun taas suhteelliset URL-osoitteet ovat sivu-suhteellisia polkuja, esimerkiksi contact.html, images/smiley.png ja niin edelleen. Suhteellinen URL ei koskaan sisällä etuliitettä http:// tai https://.

tavoitteiden asettaminen linkeille

target attribuutti kertoo selaimelle, mihin linkitetty asiakirja avataan. Määriteltyjä kohteita on neljä, ja jokaisen kohteen nimi alkaa alaviitteellä (_) :

• _blank — avaa linkitetyn asiakirjan uuteen ikkunaan tai välilehteen.
• _parent — avaa linkitetyn asiakirjan yläikkunassa.
• _self — avaa linkitetyn asiakirjan samassa ikkunassa tai välilehdessä kuin lähdedokumentti. Tämä on oletusarvo, joten tätä arvoa ei tarvitse erikseen määritellä.
• _top — avaa linkitetyn asiakirjan koko selainikkunassa.

kokeile seuraavaa esimerkkiä ymmärtääksesi, miten linkin kohde periaatteessa toimii:

<a href="/about-us.php" target="_top">About Us</a><a href="https://www.google.com/" target="_blank">Google</a><a href="images/sky.jpg" target="_parent"> <img src="sky-thumb.jpg" alt="Cloudy Sky"></a>

luodaan Kirjanmerkkiankkureita

voit myös luoda kirjanmerkkiankkureita, joiden avulla käyttäjät voivat siirtyä tiettyyn web-sivun osioon. Kirjanmerkit ovat erityisen hyödyllisiä, jos sinulla on hyvin pitkä web-sivu.

kirjanmerkkien luominen on kaksivaiheinen prosessi: lisää ensin id – attribuutti siihen elementtiin, johon haluat hypätä, ja käytä id – attribuuttiarvoa, jota edeltää hash-merkki (#), href – attribuutin arvona <a> – merkissä, kuten seuraavassa esimerkissä esitetään:

<a href="#sectionA">Jump to Section A</a><h2>Section A</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

latauslinkkien luominen

voit myös luoda tiedoston latauslinkin täsmälleen samalla tavalla kuin tekstilinkkien asettaminen. Osoita kohdepaikan URL-osoite tiedostoon, jonka haluat olevan ladattavissa.

seuraavassa esimerkissä olemme luoneet latauslinkit ZIP -, PDF-ja JPG-tiedostoille.

<a href="downloads/test.zip">Download Zip file</a><a href="downloads/masters.pdf">Download PDF file</a><a href="downloads/sample.jpg">Download Image file</a>