[Kiehkura]

Kiehkura

21 kesäkuun, 2023 klo 8:50 pm #4142

+
Miten linkitetään HTML-muodossa

Linkittäminen on tärkeä osa nettisivujen suunnittelua, sillä se mahdollistaa käyttäjien siirtymisen eri sivujen välillä. HTML-muodossa linkittäminen on helppoa, kunhan tunnet muutaman perusasiat.

Ensinnäkin, linkittäminen tapahtuu aina a-tagin sisällä. A-tag aloitetaan kirjoittamalla ””, esimerkiksi ””. Tämän jälkeen tulee linkin osoite, jonka voi laittaa href-attribuutin sisään, esimerkiksi href=”https://www.google.com”. Lopuksi kirjoitetaan linkin näkyvä teksti ”>Google”, joka luo linkin, jossa lukee Google.

Linkin osoite voi olla joko absoluuttinen tai suhteellinen. Absoluuttinen linkki tarkoittaa koko URL-osoitetta, kuten https://www.google.com. Suhteellinen linkki sen sijaan on suhteessa nykyiseen sivuun ja sen voi kirjoittaa jommallakummalla seuraavista tavoista:

– ”./tiedosto.html” – sama hakemisto
– ”../toinenhakemisto/tiedosto.html” – yksi kansio ylöspäin
– ”/koko/hakemistopolku/tiedosto.html” – sivuston juureen nähden

Jos linkin osoitetta ei tarvitse olla, esimerkiksi jos luodaan linkki takaisin sivun yläreunaan, href-attribuutin sijaan voidaan käyttää ”#” merkkiä. Tällöin linkki ei johda millekään toiselle sivulle, vaan sivu vain siirtyy takaisin ylös.

Linkin ulkonäköä voi myös muuttaa kahdella tavalla, joko lisäämällä inline-attribuutit tai CSS-tiedoston. Inline-attribuutit ovat käteviä, jos haluaa muuttaa vain yksittäisen linkin ulkonäköä. Toinen vaihtoehto on CSS-tiedosto, joka muuttaa kaikkien linkkien ulkonäköä. Tässä tapauksessa CSS-tiedostossa voidaan käyttää a-tagin luokan nimeä tai ID:tä muokatakseen linkin ulkonäköä.

Lopuksi, linkit voivat myös avautua uudessa ikkunassa tai välilehdessä, jos haluaa pitää käyttäjän nettisivuilla pidempään. Tämä tapahtuu target-attribuutin avulla. Esimerkiksi target=”_blank” avaa linkin uudessa välilehdessä.

Yhteenvetona voidaan todeta, että linkittäminen HTML-muodossa on helppoa ja monipuolista. Linkin osoitetta voi muokata absoluuttiseksi tai suhteelliseksi, sen ulkonäköä voi muuttaa inline-attribuuteilla tai CSS-tiedostolla, ja linkki voi avautua uudessa ikkunassa target-attribuutin avulla. Muista myös lisätä a-tagin sisään linkin näkyvä teksti, jotta käyttäjä tietää minne linkki vie!
**

[Julkaisija]

Artikkelit