Html - elementtejä sivulle

Koodin body-osaan voidaan kirjoittaa mitä tahansa html-elementtejä. Esimerkkejä löytyy enemmän sivustolta https://www.matikki.fi/html/, mutta alla on esitelty muutamita, joita tarvitsemme ohjelmoinnissa.

Otsikko tehdään: <h1>Tähän tulee otsikon teksti</h1>

Otsikko alkaa siis tagilla <h1> ja päättyy tagiin </h1>. Ensimmäinen ilmoittaa selaimelle, että siitä kohdasta alkaa otsikko, jälkimmäinen siitä, että otsikko päättyy. Otsikossa voidaan käyttää myös h2-h6 merkintöjä.

Pakotettu rivinvaihto: <br />

Pakotettu rivinvaihto siirtää seuraavan elementin piirtämisen alaspäin. Voit myös laittaa näitä useamman peräkkäin.

Täytettävä tekstikenttä: <input type="text" value="Jotain tekstiä" />

Tekstikenttä tehdään input-tagilla, eikä sillä ole lopetustagia. Input-tagin parametri type määrittelee kohdasta tekstikentän, jos sen arvoksi annetaan "text". Value-parametriin kirjoitetaan tekstikentän oletussisältö.

Nappi: <input type="button" value="Klikkaa" />

Nappi tehdään myös input-tagilla. Input-tagin parametriksi type annetaan "button". Value-parametriin kirjoitetaan napissa napin päällä lukeva teksti.

Kuva: <img src="kuvanPaikkaJaKokoNimi" width="300px" />

Kuva tehdään img-tagilla. Parametriksi src annetaan kuvan osoite eli sijaintipaikka ja nimi. Vaihtoehtoinen parametri on leveys width, jonka arvo voidaan antaa vaikkapa pikseleinä (px). Muita mahdollisia parametrejä on korkeus (height).
Kuvan osoitteen voi löytää esim. Googlen kuvahausta valitsemalla Näytä kuva, jolloin näen selaimen osoiteriviltä kuvan osoitteen.

Linkki: <a href="uudenSivunOsoite">Linkkisanat osoitteeseen</a>

Linkki tehdään a-tagilla. Parametriksi href annetaan nettisivun osoite minne halutaan mennä. Linkkisanat osoitteeseen kohtaan tulee sanoja, kuva tai objekti, josta haluamme tehdä klikattavan linkin.
Jos haluamme saada siis kuvasta linkki, kohtaan Linkkisanat osoitteeseen tulee koodi joka tekee kuvan sivulle.

Vapaasisältöinen kenttä: <div>Jotain sisältöä</div>

Div kentällä kootaan sisältöä yhdeksi kokonaisuudeksi. Sisälle voi laittaaa mitä tahansa muita elementtejä.
Div kenttää voidaan sitten muokata myös kokonaisuutena: muuttaa sisältöä, määrittää paikka, vaihdella ominaisuuksia jne.

Tapahtumafunktio

Tapahtumafunktiot (Eventhandlers) reagoivat html-elementtien tapahtumiin (events). Tapahtumia voivat olla esimerkiksi hiiren liikkeet, napin painallukset, käyttäjän syötteet jne. Tapahtuma käynnistää ohjelmoidun toiminnan. Riippuu tietenkin html-elementistä, minkä tapahtumafunktion siihen voi liittää.

<input type="button" value="Klikkaa nyt" onClick="window.alert('Painoit nappia');" />

tekee napin ja liittää siihen tapahtuman onClick, eli nappia painaessa lainausmerkeissä oleva JavaScript suoritetaan. Tässä tapauksessa:

window.alert('Painoit nappia');

Huomaa! Jos lainausmerkkien sisällä täytyy käyttää merkkijonoa eli toisia lainausmerkkejä, ne voidaan tehdä yksikertaisilla lainausmerkeillä.

Seuraavassa joitain tapahtumafunktioita:

onClick	Hiiren klikatessa elementtiä
onMouseDown	Hiiren napin mennessä pohjaan
onMouseUp	Hiiren napin tullessa ylös
onMouseOver	Hiiren tullessa elementin päälle
onMouseOut	Hiiren lähtiessä elementin päältä
onMouseMove	Hiiren liikkuessa
onDblClik	Hiirellä tupla-klikatessa
onKeyDown	Näppäimistön näppäimen painuessa alas
onKeyPress	Näppäimistön näppäintä painaessa
onKeyUp	Näppäimistön näppäimen tullessa ylös
onLoad	Kun objekti ladataan
onResize	Kun näkymän kokoa muutetaan
onScroll	Kun näkymää scrollataan
onUnload	Kun esim. sivulta lähdetään
onChange	Kun esimerkiksi tekstikenttää muutetaan
onFocus	Kun esimerkiksi tekstikenttään tullaan kirjoittamaan
onBlur	Kun esimerkiksi tekstikentästä poistutaan
onSelect	Valitessa esim. tekstikentästä tekstiä
onReset	Lomaketta resetoitaessa
onSubmit	Kun lomake lähetetään

Tehtävä

Kirjoita kuvalle tapahtumafunktio, mikä ilmoittaa kun hiiri tulee pois kuvan päältä.