TÄMÄN SIVUSTON KANSSA ON VÄHÄN ONGELMIA, JOTEN KAIKKI KOODIT EIVÄT NÄY VIELÄ OIKEIN.
ASIA ON TYÖNALLA.

otsikot­

<h1>

isoin otsikko

</h1>

<h2> <h2> pienempi otsikko</h2>

...

<h6> <h6>pienin otsikko</h6>

Huomaa, että otsikkotagi tekee rivinvaihdot ennen ja jälkeen otsikon.

<h3>h3-tason otsikko</h3>

Tämä tässä on otsikon jälkeistä tavallista tekstiä eli ns. leipätekstiä.

linkit

<a href="http://www.ylivieska.fi">Teksti, joka muuttuu linkiksi</a>

näyttää sivuilla

Teksti, joka muuttuu linkiksi

uuteen välilehteen aukeava linkki:

<a href="http://www.ylivieska.fi" target="_blank">Teksti joka muuttuu linkiksi</a>

Linkin voi tehdä myös keskelle muuta tekstiä:

Ylivieskan naapurikuntia ovat esim. <a href="http://www.alavieska.fi" target="_blank">Alavieska</a> ja <a href="http://www.nivala.fi" target="_blank">Nivala</a>.

Myös <a href="http://www.oulainen.fi" target="_blank">Oulaisilla</a> ja <a href="http://www.sievi.fi" target="_blank">Sievillä</a> on yhteistä rajaa <a href="http://www.ylivieska.fi" target="_blank">Ylivieskan</a> kanssa.

näyttää sivuilla

Ylivieskan naapurikuntia ovat esim. <a href="http://www.alavieska.fi" target="_blank">Alavieska</a> ja <a href="http://www.nivala.fi" target="_blank">Nivala</a>.

Myös <a href="http://www.oulainen.fi" target="_blank">Oulaisilla</a> ja <a href="http://www.sievi.fi" target="_blank">Sievillä</a> on yhteistä rajaa <a href="http://www.ylivieska.fi" target="_blank">Ylivieskan</a> kanssa.

kuvat

<img src="kuva.jpg" alt="teksti joka näkyy, jos kuva ei näykään">

kuvasta linkki

<a href="http://www.ylivieska.fi"><img src="kuva.jpg" alt="teksti joka näkyy, jos kuva ei näykään"></a>

Muuten samoin kuin tekstilinkki, mutta linkiksi muuttuvan tekstin tilalle tuleekin kuvan tagi.

kehys toisen nettisivun näkymiseksi

<iframe src="http://www.jokunettisivu.fi" width="100%" height="50%">

Width- ja height-ominaisuuksilla määritellään kuin paljon alkuperäisestä sivusta näkyy.

luettelot

Tulee myöhemmin

taulukot

Tulee myöhemmin

lomake

<form action="jokunimi.php method="post"> (aloitustagi)

(tähän sisälle lomakkeen kentät)

</form> (lopetustagi)

jokunimi.php on php-kielinen tiedosto, jonne lomakkeeseen syötetyt tiedot siirtyvät

tiedoston nimen voi itse määrätä

lomakkeen yksirivinen tekstikenttä

<input type="text" name="jokunimi">

näkyy ruudulla​

kohtaan name annettua nimeä tarvitaan php-tiedostossa käsittelemään tässä annettua tietoa

Tekstikenttään voi asettaa oletustekstin ominaisuudella value.

<input type="text" name="jokunimi" value="oletusteksti">

näkyy ruudulla <input type="text" name="jokunimi" value="oletusteksti">

Tekstikentän pituutta voi määritellä ominaisuudella size.

<input type="text" name="jokunimi" value="oletusteksti" size="50">

näkyy ruudulla <input type="text" name="jokunimi" size="50">

Monirivinen tekstikenttä

<textarea name="teksti" rows="4" cols="30">

</textarea>

rows määrittää tekstialueen rivien määrän ja cols sarakkeiden määrä

<textarea name="jokunimi" rows="4" cols="30"></textarea>

lomakkeen valintanappi

Voi valita vain yhden vaihtoehdoista

paikkakunta:

<input type="radio" name="paikka" value="Ylivieska" checked> Ylivieska

<input type="radio" name="paikka" value="Alavieska"> Alavieska

<input type="radio" name="paikka" value="Nivala"> Nivala

Muista lisätä rivien perään tai väliin <br> rivinvaihdoksi

Kaikilla toisiinsa liittyvillä valintanapeilla tulee olla sama nimi.

Valitun kohdan value-arvo siirtyy php-tiedostoon

checked-määrellä saa tehtyä oletusvalinnan valmiiksi

paikkakunta:

<input type="radio" name="paikka" value="Ylivieska" checked> Ylivieska

<input type="radio" name="paikka" value="Alavieska"> Alavieska

<input type="radio" name="paikka" value="Nivala"> Nivala

lomakkeen valintalista

Toinen tapa toteuttaa yksi valinta monesta vaihtoehdosta

selected-määrellä saa tehtyä oletusvalinnan

<select name="paiva">

<option value="ma"> maanantai

<option value="ti"> tiistai

<option value="ke"> keskiviikko

<option value="to"> torstai

<option value="pe" selected> perjantai

<option value="la"> lauantai

<option value="su"> sunnuntai

</select>

<select name="paiva">

<option value="ma"> maanantai

<option value="ti"> tiistai

<option value="ke"> keskiviikko

<option value="to"> torstai

<option value="pe" selected> perjantai

<option value="la"> lauantai

<option value="su"> sunnuntai

</select>

lomakkeen valintaruutu

Voi valita useamman vaihtoehdon

kielitaito:

<input type="checkbox" name="kieli" value="suomi" checked> suomi

<input type="checkbox" name="kieli" value="ruotsi"> ruotsi

<input type="checkbox" name="kieli" value="englanti" checked> englanti

<input type="checkbox" name="kieli" value="venäjä"> venäjä

Muista lisätä rivien perään tai väliin <br> rivinvaihdoksi

checked-määrellä saa tehtyä oletusvalinnan tai -valinnat valmiiksi

kielitaito:

<input type="checkbox" name="vahvistus" value="suomi" checked> suomi

<input type="checkbox" name="vahvistus" value="ruotsi"> ruotsi

<input type="checkbox" name="vahvistus" value="englanti" checked> englanti

<input type="checkbox" name="vahvistus" value="venäjä"> venäjä

Samaan lomakkeeseen voi yhdistää monta eri elementtiä, esim.

<input type="checkbox" name="kieli" value="suomi" checked> suomi

<input type="checkbox" name="kieli" value="ruotsi"> ruotsi

<input type="checkbox" name="kieli" value="englanti" checked> englanti

<input type="checkbox" name="kieli" value="venäjä"> venäjä

<input type="checkbox" name="kieli" value="muu"> muu, mikä? <input type="text" name="muukieli">

<input type="checkbox" name="vahvistus" value="suomi" checked> suomi

<input type="checkbox" name="vahvistus" value="ruotsi"> ruotsi

<input type="checkbox" name="vahvistus" value="englanti" checked> englanti

<input type="checkbox" name="vahvistus" value="venäjä"> venäjä

<input type="checkbox" name="vahvistus" value="muu"> muu, mikä? <input type="text" name="muukieli">

Kommentit

Koodin sekaan voi kirjoittaa myös omia kommentteja, jotka eivät näy sivuilla eivätkä toteudu komentoina.

Kommentin alkuun merkitään <!-- ja loppuun -->

esim.

<img src="tammikuu.jpg" alt="maisema tammikuussa"> <!-- Muista vaihtaa tähän joka kuukausi uusi kuva -->

tai

<!"-- <img src="kevät.jpg" alt="kuva kevätlukukaudella">--> (tämä koodi ei toteudu)

<img src="syksy.jpg" alt="kuva syyslukukaudella"> (tämä koodi toteutuu)

<a href="http://www.w3schools.com/tags/" target="_blank">Lista kaikista html-tageista</a>