Ongelmat.org

1. Esipuhe
Tässä oppaassa käsittelen hieman tarkemmin tekstinkäsittelyä HTML:n avulla. Alkeissa mainitsin hieman mm. <h1-6> ja <p>-tagista muita tekstinkäsittelyyn liittyviä tageja ovat myös esimerkiksi <b>, <i> ja <u>. Periaatteessa voimme käsitellä tekstiä kahdella tapaa HTML:llä ja CSS:llä.

2. HTML vs. CSS
Molemmissa on omat hyötynsä ja haittansa. HTML käy hyvin käsittelyyn, jos luomme vaikkapa yhden tekstidokumentin, jossa on omat uniikkinsa muotoilunsa esimerkiksi vaikka artikkeli. CSS:llä voimme muotoilla taas esimerkiksi toistuvia rakenteita esimerkiksi sivuston navigaation tekstilinkit. Tällöin meidän ei tarvitse merkata jokaiseen tekstidokumenttiin erikseen näitä määrittelyjä ja kokonaisuuden muokkaaminen on helpompaa. Hyödyn huomaat, jos olet tehnyt 200 HTML-dokumenttia, joissa jokaisessa on navigaation linkit muotoiltu HTML:llä, niin joudut muuttamaan jokaisesta dokumentista muotoiluja esimerkiksi alleviivauksen. CSS:llä sama hoituisi taas yhdellä rivin muokkauksella. HTML siis yksittäisiin dokumentteihin ja CSS kokonaisuuksiin.

3. Teksinkäsittely käyttäen HTML:ää
HTML:ssä tekstinkäsittelyyn käytettävät perustagit ovat siis <h1-6>, <p>, <b>, <i>, <u>, <big>, <small>. Käymme tässä kappaleessa läpi näiden tagien käytön esimerkkien kera ja myös muiden yleishyödyllisien tagien käyttöä. Dokumentin otsikot määritellään siis <h>-tagilla (1 suurin ja 6 pienin). Sivuston pääotsikko on <h1> ja numeron pienentyessä otsikon tärkeys vähenee. Tekstikappaleet erotetaan toisistaan <p>-tagilla (paragraph) esimerkiksi

3.1 Lihavointi, kursivointi ja alleviivaus
Tagit <b>, <i> ja <u> vastaavat samoja tekstieditorin kuten Wordin lihavointia, kursivointia ja alleviivausta. Lihavointi tapahtuu siis <b>-tagilla (bold), kursivointi <i>-tagilla (italic) ja alleviivaus <u>-tagilla (underline). Oletusfontista suurempaa tai pienempää tekstiä saat tarvittaessa <big> ja <small>-tageilla.

3.2 Perusasemointi
Tekstin asemoimiseen on hyvä käyttää tageja <br>, <hr> ja <div>-tagia muutamalla eri määritteellä. Rivinvaihtona toimii tagi <br>, mutta tämä kannattaa opetella kirjoittamaan suoraan muotoon <br />. HTML:ssä ei siis tarvitse sulkea kaikkia tageja kuten <br>-tagia, jos siirryt XHTML:ään niin tällöin kaikki tagit tulee sulkea ja <br> (sekä <hr> ja muut tagit, joilla ei ole omaa sulkutagiaan) suljetaan lisäämällä perään välilyönti ja /-merkki. Tagi <hr> on muuten sama kuin <br>, mutta se lisää samalla elementtien väliin vaakaviivan. Diveillä voimme helposti tasata tekstin oikealle tai vasemmalle sekä keskittää tekstin esimerkiksi. Voimme käyttää tähän align-attribuuttia, mutta tämä parempi tapa olisi tehdä tämä antamalla diville css-määrittelyjä. Align-attribuutilla (huom. tätä tapaa ei ole hyväksytty strictissä html:ssä eikä xhtml:ssä) siis esimerkiksi

css:n kanssa taas sama menisi näin

Itse suosisin toista tapaa, jossa tyylimäärittelyt määritellään erillisessä css-tiedostossa. Kolmatta tapaa voisin myös käyttää, jos tekisin WYSIWYG-editoria tai artikkelia, joka vaatii omia tyylimäärittelyjään, mutta niitä ei halua laittaa css-tiedostoon häiritsemään. Ensimmäinen tapa ei siis ole validi, jos merkkaat XHTML:ää tai HTML Strictiä.

4. Tekstinkäsittely käyttäen CSS:ää
CSS:llä voimme muokata helposti tekstin väriä, kokoa, fonttia tai vaikkapa rivivälejä. Voimme laittaa määrittelyt erilliseen css-tiedostoon tai käyttää html-tiedostossa style-attribuuttia, esimerkiksi ylempänä kohta <div style="text-align:left;">testi</div>. Peruskäyttöön riittäänee määrittelyt color, line-height, letter-spacing, text-align, text-decoration, background-color sekä fontteihin liittyvät määrittelyt. Käymme nyt läpi näiden määrittelyjen peruskäytön ja mahdolliset niiden määrittelyt.

4.1 Perusmäärittelyt
Yleensä, kun yritämme tehdä sivustoa niin mietimme mahdollista värimaailmaa. Tekstin väriä pystymme vaihtamaan color-määrittelyllä ja värejä voimme käyttää väliltä #000000-#FFFFFF. Käytössä on myös joitakin värien nimiä, jotka toimivat suoraan suurimmilla selaimilla. Esimerkiksi tummansininen on DarkBlue, joka vastaa siis väriä #00008B (värien nimet löydät täältä). Käyttäessämme värejä kuten puhdas valkoinen voimme lyhentää värin muotoon #FFF, jos siis värin HEX-arvo koostuu samoista kirjaimista tai numerosta sen voi lyhentää. Tekstin taustaväriä voi muuttaa samalla tavalla, mutta määrittelyssä käytetään vain background-coloria, esimerkiksi siis:

Tuossa esimerkissä käytetään siis ylelmpänä käytettyä HTML:ää, jossa määrittelemme tekstin väriksi valkoisen ja taustaväriksi mustan. Jo aiemmin mainitulla text-align -määrityksellä voimme siis tasata tekstiä ja vaihtoehdot ovat left, right, center sekä justify. Muut ovat varmaan selviä paitsi justify, joka tasaa tekstin molemmat päät eikä vain toista päätä. Text-decoration -määrityksellä voimme alle-, päälle- ja yliviivata, vaihtoehdot ovat none, underline (alleviivaus), overline (päälleviivaus) sekä line-through (yliviivaus. On myös olemassa blink-määritys, jolla saa vilkkuvan tekstin. Tämä ei toimi IE:ssä ja vilkkuvat tekstit ovat äärimmäisen häiritseviä nettisivuilla, joten en suosittelisi käyttämään tuota missään tilanteessa.

4.2 Rivi- ja kirjainväli
Riviväliä sekä kirjainten välistä tilaa voimme muuttaa määritteillä line-height ja letter-spacing. Voimme käyttää näissä määrittelyissä numeroa, jota käytetään rivivälin määrittelyyn oletusrivivälistä (oletusriviväli on 10pt, määrittelemme 1.2 niin näytettävä riviväli on tässä kohtaa 12pt). On mahdollista käyttää myös prosentteja tai jotakin tiettyä väliä esimerkiksi 12 pikseliä (px). Samat toimivat myös kirjainvälissä.

4.3 Fonttien käyttö
Fonttien käytössä perusmäärittelymme ovat font, font-family, font-size, font-style sekä font-weight. Kaikki nämä sisältyvät jo tuohon ensimmäiseen, mutta toisinaan meidän tarvitsee määritellä vain yksitäisiä määrityksiä. Font-familylla määrittelemme siis itse fontin, joita meillä on käytössä kahta tyyppiä. Meillä on selaimesta riippuvia fontteja kuten serif, sans-serif, cursive jne. sekä koneella olevista riippuvat kuten times, roman, courier jne. Jos fontin nimi sisältää välilyöntejä, tulee fontin nimen ympärille laittaa lainausmerkit esim.

Font-size määrittelee yksinkertaisesti fontin koon, mahdolliset arvot ovat xx-small - medium - xx-large, smaller, larger, tietty koko (esim. 8px) ja prosentit. Font-style määrittelee tekstin tyylin ja arvoiksi voi laittaa normal, italic (kursivoitu) tai oblique (vino/viisto). Lopuksi meillä on font-weight, jolla saamme määriteltyä fontin paksuuden (arvoina normal, bold, bolder, lighter sekä 100-900, jossa luvut ovat sadan välein). Voimme hoitaa myös kaikki määrittelyt siis font-määrittelyllä esim.

5. Listat ja taulukot
Käyn tässä vielä lyhyesti läpi listojen ja taulukoiden käyttöä. Meillä on kolmea tyyppiä listoja: järjestämättömät, järjestetyt sekä listat, joissa käytetään selitteitä. Kahdessa ensimmäisessä käytetään list-itemeja (<li>) ja kolmannessa taas termejä sekä selitteitä (<dt>, <dd>). Listojen tagit ovat helppo muistaa, jos osaa hieman englantia. Järjestämätön lista on <ul> (unordered list), järjestetty lista on <ol> (ordered list) ja selitelista taas <dl> (definition list). Listojen käyttö on kohtuu helppoa, koska tarvitsemme vain 2-3 tagia, esimerkissä järjestämätön lista

Järjestetty toimii samalla tapaa kuin järjestämätön vaihdat vain <ul>-tagit <ol>-tageiksi. Selitelista toimii näin

Listoilla voi tehdä paljon ja niitä kannattaa opetella käyttämään. Käsittelen myöhemmin listan käyttöä tarkemmin (esimerkki valikon teko käyttäen CSS:ää).

5.1 Taulukot
Taulukot ovat hyviä tekstin käsittelyyn, mutta niitä ei tulisi käyttää sivuston ulkoasun luomiseen vaan tekstin käsittelyyn. Sivuston ulkoasun luomiseen löytyy parempia tapoja kuten divien käyttö. Perustagina toimii <table>, jolla teemme taulukon. Taulukon sisällön luomme muilla tageilla kuten <th> (taulukon ylätunniste), <tr> (taulukon rivi) ja <td> (taulukon solu). Jos tahdomme esimerkiksi 2 riviä ja 3 solua

3 riviä ja 2 solua olisi taas

Lopuksi vielä otsikot mukaan

tai


Jos haluat taulukon reunat näkyviin niin määrittelet esim.

Tässäpä oli nyt kaikki tällä kertaa ja tulevaisuudessa yritän kirjoittaa tarkemmat oppaat mm. listojen, divien ja taulukoiden käytöstä.