2.8 Leipäteksti

"Leipäteksti tarkoittaa varsinaista tekstiä erotuksena otsikoista. Nimensä se lienee saanut kirjapainotaidon alkuaikojen vanhoilta käsinlatojilta, jotka hankkivat leipänsä latomalla pitkiä, tasalaatuisia tekstipintoja. Pelkillä otsikoilla ei leipä vielä olisi irronnut. Luettavuuden kannalta on syytä kiinnittää huomiota tekstin kappalejakoon, tasaukseen, rivin pituuteen ja tekstin väriin."

Lähde: http://kotisivu.dnainternet.net/ulrikaj/opetus/index.htm

Käytännössä leipäteksti koostuu kappaleista (engl. paragraph). Tässä luvussa esitellään myös font-elementti, esimuotoiltu teksti, pitkät lainaukset sekä lohkojen ryhmitys.

Kappale (paragraph, p)

Kukin kappale alkaa tunnisteella <p> ja päättyy vastaavasti lopputunnisteeseen </p>. Joku voisi kysyä, että miksi käyttää tällaista menetelmää, eikö se ole sama asia kirjoittaa vaan tekstiä ja pistää rivinvaihtoja (<br>) kappaleiden väliin.

Kyllähän noinkin voi toimia, ja joskus jopa kannattaa, mutta <p> -tunnisteen käytöstä on muutama erityislaatuinen hyöty. Ensinnäkin tällöin kappaleet automaattisesti erottuvat toisistaan, eikä niiden väliin tarvitse kirjoittaa KAHTA <br> -tagia (ensimmäinen vaihtaa riviä, toinen tekee tyhjän rivin). Toisekseen <p> -tunnisteilla erotettujen kappaleiden käsittely ja muotoilu on paljon helpompaa kuin jos niitä ei olisi käyttänyt. Esimerkiksi voit antaa kappaleelle määritteen, joka kertoo mihin teksti tulee tasata:

Esimerkki

<p align="left">Tämä on kappale, joka tasautuu vasempaan reunaan.</p>
<p align="right">Tämä tasautuu ikkunan oikeaan reunaan.</p>
<p align="center">Tämä taas tulee keskelle sivua.</p>

Tämä on kappale, joka tasautuu vasempaan reunaan.

Tämä tasautuu ikkunan oikeaan reunaan.

Tämä taas tulee keskelle sivua.

Useimpiin elementteihin voidaan lisätä määritteitä sille, miltä ko. elementin pitäisi oikein näyttää. Tuollaista lisätietoa kutsutaan attribuutiksi (suom. määrite).

Määritteiden syntaksi on seuraava:
attribuutti="arvo"
ja arvo siis tulee sitaattien sisään.

Kappale voi saada attribuutin align, jonka arvot voivat olla:
left, right, center ja justify. Viimeisin noista tasaa tekstin molemmat reunat

Esimerkki

<p align="justify">
asdjk aöldj ölads ölja sdölj aölsdf ölaj fölajföo jaölfj öalds fölkajdsf
... (paljon tekstiä) ....
asdadfadkfj öalkjdf ölakdf ölajdsf öljas dfölkj adölkfj öalsf jölakjdsf öl
</p>

asdjk aöldj ölads ölja sdölj aölsdf ölaj fölajföo jaölfj öalds fölkajdsf kja ösdfj öalksjdf ölajdf ölkajsdf ölkj aöoeifj öalejkf öoaijf ölads foaisdfj asdadfadkfj öalkjdf ölakdf ölajdsf öljas dfölkj adölkfj öalsf jölakjdsf öl asdjk aöldj ölads ölja sdölj aölsdf ölaj fölajföo jaölfj öalds fölkajdsf kja ösdfj öalksjdf ölajdf ölkajsdf ölkj aöoeifj öalejkf öoaijf ölads foaisdfj asdadfadkfj öalkjdf ölakdf ölajdsf öljas dfölkj adölkfj öalsf jölakjdsf öl asdjk aöldj ölads ölja sdölj aölsdf ölaj fölajföo jaölfj öalds fölkajdsf kja ösdfj öalksjdf ölajdf ölkajsdf ölkj aöoeifj öalejkf öoaijf ölads foaisdfj asdadfadkfj öalkjdf ölakdf ölajdsf öljas dfölkj adölkfj öalsf jölakjdsf öl asdjk aöldj ölads ölja sdölj aölsdf ölaj fölajföo jaölfj öalds fölkajdsf kja ösdfj öalksjdf ölajdf ölkajsdf ölkj aöoeifj öalejkf öoaijf ölads foaisdfj asdadfadkfj öalkjdf ölakdf ölajdsf öljas dfölkj adölkfj öalsf jölakjdsf öl

Viime jaksossa kävimme läpi rivinsisäiset elementit (ne alleviivaukset yms.). Yksi niistä jäi kuitenkin mainitsematta:

Font

Ehkä ihmettelit tehtävässä 4 (ensimmäinen kotisivusi) annettua esimerkkiä ja siinä aiemmin esittelemätöntä tunnistetta font. Sen avulla voit muuttaa tekstialueen kirjaisintyyppiä (font face), kokoa (size) tai väriä (color).

Esim.

Font -tageilla voit muuttaa 
<font size="3">tekstin</font>
<font size="6">kokoa</font>, 
<font color="red">v</font>
<font color="blue">ä</font>

<font color="cyan">r</font>
<font color="yellow">i</font>ä 
tai vaikka <font face="arial">kirjaisin</font>
<font face="verdana">tyyppiä</font>.
<br>
Voit muuttaa myös useaa asiaa 
<font size="+1" face="courier" color="navy">yhtäaikaa</font>.

Font -tageilla voit muuttaa tekstin kokoa, väriä tai vaikka kirjaisintyyppiä.
Voit muuttaa myös useaa asiaa yhtäaikaa.

Niin hienolta ja visuaaliselta apuvälineeltä tuo font-tunniste vaikuttaakin, sitä ei pidemmän päälle juuri kannata käyttää sillä

1. koodin ylläpitäminen on hankalaa jos siinä on käytetty sitä,
2. ulkoasun muuttaminen jälkikäteen tulee äärimmäisen työlääksi,
3. HTML:ää ei ole alunperinkään kehitetty ulkoasun määrittämistä varten, ja
4. ulkoasun määrittelyä varten on olemassa paljon parempi menetelmä (joka opetellaan luvussa 4)

Ennaltamuotoiltu teksti (pre)

Joskus HTML-sivuille laitettava teksti on jo valmiiksi muotoiltua, eikä sen ulkoasua ole tarpeen muuttaa. Tällöin kannattaa hyödyntää <pre>-tunnistetta, sillä selain tulostaa sen sisällä olevan tekstin sellaisenaan näytölle - mukaan lukien kaikki välilyönnit ja rivinvaihdot. Tosin samalla teksti muuttuu kirjoituskonetekstiksi.

Esim A

Ensin koodi ja sitten miltä se näyttää sivulla.

<p>
Tuote    kpl  mk/kpl   yht.
Nupi       4    5,00  20,00
Naula     20    1,00  20,00
</p>

Tuote kpl mk/kpl yht. Nupi 4 5,00 20,00 Naula 20 1,00 20,00

Esim B

Ensin koodi ja sitten miltä se näyttää sivulla.

<pre>
Tuote    kpl  mk/kpl   yht.
Nupi       4    5,00  20,00
Naula     20    1,00  20,00
</pre>

Tuote    kpl  mk/kpl   yht.
Nupi       4    5,00  20,00
Naula     20    1,00  20,00


Pitkä lainaus (blockquote)

Aiemmin mainittiin lyhyen lainauksen elementti cite, jota käytetään lohkon eli kappaleen sisällä. Kun web-sivulle lainataan kokonaisia kappaleita käytetään tällöin blockquote-elementtiä.

<blockquote>
   Lainattu teksti jostain lähteestä - voi olla pitkäkin.
</blockquote>

Oletusarvoisesti selain näyttää lyhyet lainaukset kursiivina, ja pitkää lainausta vuorostaan sisennetään. Esimerkiksi tämän sivun alussa on lainaus eräältä toiselta web-sivulta, mutta olen jälkeenpäin lisännyt siihen myös tuon kursiivin tekstin. Oletusarvoisesti pitkä lainaus ei kuitenkaan ole kursiivia vaan samannäköistä tekstiä kuin leipätekstikin.

Älä kuitenkaan käytä tätä elementtiä tekstin sisentämiseksi, sillä sitä ei ole tarkoitettu siihen.

Lohkojen ryhmitys (div)

Joskus on tarpeen ryhmittää useita eri lohjoja yhdeksi loogiseksi kokonaisuudeksi. Esimerkiksi jos haluat keskittää kolme kappaletta, voit tehdä sen ryhmittämällä kaikki kolme kappaletta yhden div-elementin sisään, ja antaa tälle div- elementille määritteen tuosta tasauksesta.

<div align="center">
   <p>Kappale 1</p>
   <p>Kappale 3</p>
   <p>Kappale 3</p>
</div>

Tätä elementtiä tulemme tarvitsemaan seuraavassa jaksossa, joten paina sen olemassaolo hyvin mieleesi. Siitä tulee olemaan vielä paljon hyötyä.