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.

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.

Elementin identifioiminen

Ohjelmoinnissa tarvitsemme yleensä viitettä juuri tiettyyn elementtiin. Tämä tapahtuu yleensä parametrillä id, esimerkiksi:

<input type="button" value="Klikkaa nyt" id="nappi1" />

tekee napin ja identifioi sen nappi1:si

Identifioivassa nimessä ei saa olla ääkkösiä, erikoismerkkejä, eikä välilyöntejä. Se pitää alkaa kirjaimella.

Tehdään seuraavaksi valmiiksi sivu, jossa on nappi identifioituna. Tämä valmisteleekin seuraavaa vaihetta, jossa kirjoitetaan sivulle funktio.