Videotutoriali englanninkielisillä tekstityksillä

 
 

 


Ankkuri toimii linkkinä samalla sivulla. Linkin kautta et näe eri sivua (verkkosivua), vaan sinut siirretään toiseen kohtaan sillä sivulla, jota parhaillaan katsot. Ankkurin (välilehden) muodostaminen jaetaan kahteen osaan:

  1. Ensin luot kirjanmerkin, eli paikan, johon siirrytään kun linkkiä klikataan.
    2. Sitten asetat linkin, joka siirtää sinut tähän välilehteen (ankkuriin).

Ankkuri asetetaan Webnodessa HTML-koodin avulla.

#Vaihe 1: Ankkurin luominen

Lisää kirjanmerkki haluttuun kohtaan sivullasi. Jokaisella välilehdellä on oltava oma nimi – nimiä ei voi toistaa samalla sivulla. Voit käyttää tätä HTML-koodia ankkurin luomiseen:

<div id="XXXXXXX"></div>
view raw anchor.html hosted with ❤ by GitHub
Korvaa XXXXXXX ankkurin nimellä, esim. ankkuri1

#Vaihe 2: Linkin asettaminen

Kun napsautat linkkiä, sinut ohjataan ankkuriin – linkki asetetaan yleensä tavalliseen tekstiin, mutta sen voi liittää myös kuvaan, painikkeeseen tai muuhun elementtiin. Käytä seuraavaa koodia lisätäksesi tavallisen tekstilinkin:

Korvaa #XXXXXXX ankkurin nimellä, jonka loit vaiheessa 1

 

Esimerkki:

Alla oleva “Klikkaa tätä tekstiä” on ankkuri, joka on asetettu tämän artikkelin alkuun. Artikkelin alussa on upotettu HTML-koodi seuraavassa muodossa:

<div id="kotva1"></div>
view raw anchor-example hosted with ❤ by GitHub
Teksti, jota klikkaat, on upotettu HTML-koodilla seuraavassa muodossa:
<a href="#kotva1">Text na ktory sa klika</a>
view raw anchor-example2 hosted with ❤ by GitHub

Voit kokeilla sitä ja klikata alla olevaa “Klikkaa tätä tekstiä”.

 

Klikkaa tätä tekstiä
 

 

VINKKI:

Voit myös käyttää ankkuria Webnodessa esimerkiksi “Takaisin ylös” -painikkeena.

1. Lisää ensin sivustollesi koodi kohdasta 1. Lisää se siihen kohtaan, johon haluat vierailijan siirtyvän.

Näyttökuva, jossa HTML-koodilohko lisätään Webnode-editorissa – opas koodin upottamiseen verkkosivulle helposti.

Näyttökuva, jossa HTML-koodilohko lisätään Webnode-editorissa – opas koodin upottamiseen verkkosivulle helposti.

2. Lisää sen jälkeen sivulle painike, jonka voit nimetä esimerkiksi: Ylös

Lisää painike käyttämällä + -painiketta ja Painike-toimintoa.

Lisää painike käyttämällä + -painiketta ja Painike-toimintoa.

3. Lopuksi aseta linkki painikkeeseen seuraavassa muodossa:

view raw link-example hosted with ❤ by GitHub

Lisää mahtavia oppaita

Koodi uudelleenohjaukseen (redirect)

Koodi uudelleenohjaukseen (redirect)

Mietitkö kuinka voisit automaattisesti ohjata kotisivusi vierailijan toiselle sivulle? (URL-osoitteelle) Ratkaisu on helppo: Muokkaa ja kopioi alla oleva HTML-koodi 🙂 1. Muokkaa koodissa URL-arvo. Syötä koodiin URL-osan tilalle osoite, jolle haluat vierailijan ohjata,...

Viliam
Follow me