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.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://www.matikki.fi/guidebook-python/brython/brython380/brython.js"></script>
<title>Brython</title>
<script type="text/python">
</script>
</head>
<body onload="brython({debug:1,indexedDB: false})">
<h2>Tässä on minun otsikko sivulle</h2>
<input type="text" value="Anna nimesi" />
<br />
<input type="button" value="Klikkaa nyt" />
<br />
<img src="https://www.matikki.fi/html/kuvat/gerbiili.jpg" width="300px" />
<div>
<h3>Joku otsikko</h3>
<a href="http://www.vesapk.edu.hel.fi">koulu</a>
</div>
</body>
</html>