Yleistä
HTML-elementin käyttö kyselypohjissa mahdollistaa esimerkiksi tyhjän tilan tai erivärisen tekstin lisäämisen kyselyihin. Aiheesta löytyy lyhyt opasvideo täältä. HTML tukee useita toimintoja ja merkintäkieltä osaava saa tehtyä sillä enemmänkin, mutta olemme tässä ohjeessa antaneet muutaman perusesimerkin.
HTML-elementissä voidaan kirjoittaa erilaisia kappaleita seuraavaan tyyliin:
<p style=”haluttu tyyli”>Vapaavalintainen teksti</p>
Tyhjän tilan lisääminen
Tyhjää tilaa voidaan lisätä tekstin eri puolille seuraavanlaisella parametrillä:
<p style=”padding-top: 20px”></p>
Tässä kohden teksti on vapaavalintainen ja yllä oleva elementti lisää 20px korkuisen valkoisen tilan niiden elementtien väliin, johon HTML-elementti asetetaan. Jos parametreihin lisätään tekstiä, padding-top parametri lisää tyhjää tilaa elementin alkuun.
Tyhjää tilaa voidaan lisätä neljällä eri parametrilla:
- padding-top lisää tyhjän tilan tekstin yläpuolelle.
- padding-bottom lisää tyhjän tilan tekstin alapuolelle.
- padding-left lisää tyhjää tilaa tekstin vasemmalle puolelle.
- padding-right lisää tyhjää tilaa tekstin oikealle puolelle.
Värikkään tekstin lisääminen
Värillisen tekstin kanssa tyyli vaihdetaan kirjoittamalla color: ja sen perään halutun värin nimi tai sen hex-koodi. Koodi tukee yli sataa erilaista väriä niiden englanninkielisillä nimillä. Värit kirjoitetaan yhteen, joten esimerkiksi vaaleanvihreä teksti saadaan aikaan kirjoittamalla color: lightgreen. Hex-koodit ovat muodossa # + värikoodi ja yhden vaaleanvihreän sävyn värikoodi on #7df59d. Värikoodit saa helposti mieleisestään väristä vaikka Googlettamalla color hex picker, jolloin värien hex-koodeja saa kopioitua näppärästi itselleen Googlen hakusivulla olevalla työkalulla.
Jos siis esimerkiksi haluaisit liittää kyselyysi punaisen tekstinpätkän, olisi käytettävä seuraavia parametreja:
<p style=”color: red”>Tämä lisää punaisen tekstin</p>
<p style=”color: #FF0000″>Tämä lisää myös punaisen tekstin</p>
Parametrien yhdistäminen
Entä sitten tilanne, jossa haluaisit ensin tyhjää tilaa, sitten punaista tekstiä ja vielä loppuun tyhjää tilaa, tai muuta vastaavaa tyylien yhdistämistä?
Tämä onnistuu kirjoittamalla parametrit peräkkäin ja erottamalla ne toisistaan ; -merkillä. Näin sitten tyhjä tila + punainen teksti + tyhjä tila tehtäisiin HTML-elementillä seuraavasti:
<p style=”padding-top: 20px; color: red; padding-bottom: 20px”>Kirjoita haluttu teksti tähän</p>