HTML -Tekstinkäsittely

Pitkin html-koodia joudutaan sijoittamaan erinäisiä pieniä tageja, joilla voidaan esimerkiksi alleviivata tekstiä. Komento päätellään aina samanlaisella tagilla, jonka eteen on vain lisätty /, esimerkiksi i ja /i. Tämä teksti on esimerkiksi paksunnettu tagilla B ja päätellään tagilla /B kohdassa, jossa teksti on taas ohuempaa. Se, käytetäänkö html:lässä pieniä vain isoja kirjaimia,(eli kirjoitettaisiinko b vai B) on ihan sama. Ainoastaan asiateksteihin on pistettävä isot kirjaimet erikseen, tageihin voit vaikka kirjoittaa toisen kirjaimen isolla ja toisen pienellä, esim. hTmL tai tItLe tai BoDy, jos sattuu huvittamaan, eikä koodi siitä muuksi muutu.

Otsikot

Esimerkkinä toimineesta kuvasta saatoit kiinnittää huomiota tagiin h1. Tämä tagi määrittelee isoimman mahdollisen otsikon ja se päätellään tagilla /h1.

Otsikolle on toki muitakin kokoja, kuin isoin. h2 määrittelee hieman pienemmän otsikon, kuten h1 päätellään /h1-tagilla, h2 päätellään /h2-tagilla.
h3 tekee otsikosta saman kokoisen, kuin tämän kappaleen alussa otsikko "Otsikot" on.
Voit koittaa eri otsikko-kokoja muuttamalla harjoitustiedostosi h1-kohtia h2 tai h3-tageiksi, muista muuttaa myös päätöstagit! /h2 /h3

Näitä h-tageja on olemassa enemmänkin, mutta kolmen yli menevät luvut eivät enää oikeastaan ole otsikoita.
h4 tagilla on sama vaikutus, kuin tagilla b, eli se paksuntaa normaalin kokoista tekstiä.

Tagilla h5 ja sen päätöstagilla /h5 saat tämän kokoista tekstiä, kun kirjoitat html-tiedostoon esimerkin mukaan:

Samalla periaatteella toimii myös h6-tagi, jolla saat tekstiä, joka on niinkin pientä, kuin

tämän kokoista

tagi h7 ja siitä ylemmät h8, h9 jne. eivät toimi.
Muuta ominaista h-tageille on, että ne menevät automaattisesti uudelle riville, eikä niiden kanssa voi laittaa erikokoista tekstiä samalle riville.

FONT-tagin käyttö

On olemassa toinenkin tapa vaikuttaa fontin kokoon ja se on itse asiassa parempikin, nimittäin font-tagi. Font tagiin lisätään liite size="" ja lainausmerkkien väliin laitetaan koko asteikolla niin, että 1 on pienin ja koko kasvaa, mitä isomman numeron siihen laittaa. Numerolla ei ole ylärajaa, siihen voi laittaa fontin kooksi vaikka 700 -mikä ei tosin ole kovin käyttökelposta..
Jatkamme nyt harjoitus-tiedoston käsittelyä, kirjoita vastaava sinne:

Saamme aikaan tämän näköisen tiedoston:

(Jos sinun tiedostossasi on jotain erilailla, tarkista, kirjoititko koodin oikein.)

Font-tagilla on myös muita liitteitä. Yksi niistä on color, jolla voidaan määritellä kyseisen tekstipätkän väri erikseen. Tämä mahdollistaa sen, että yhdellä sivulla on monenväristä tekstiä. Aina, kun font-tagi päätellään /font-tagilla, vaihtuu teksti takaisin sen väriseksi, mitä body-koodin text näyttää.
Nyt kokeilemme tätä tagia, muutamme tekstin vaaleansiniseksi lisäämällä color="" määritteeksi "aqua":

Myös tekstin fontti voidaan määritellä font-tagilla. Lisätään vain liite face="", kokeillaampa tätäkin lisäämällä otsikkoon koodi, jolla siitä tulee Comic Sans MS:

face-liite lisätään aina suoraan font-tagin taakse. Muutetaampa vielä äsken muokkaamaamme font-tagia arial-fonttiin:

Tekstin asettelu

Tekstiä voi asetella eri tavoin sivulle. Kuten varmaan olet huomannut, esimerkin Hopeanuolen sivujen tekstit ovat vasemmalle tasattuja, näin se menee automaattisesti, jos sitä ei määritellä erikseen.
Sivu on kuitenkin huomattavasti siistimmän näköinen, jos tähän asiaan kiinnitetään jollain tapaa huomiota. Tekstin voi näet tasata myös keskelle tai oikealle.

Yleensä ottaen tasaaminen onnistuu tagilla p, joka sijoitetaan kappaleen alkuun ja sille lisätään liite align="center" tai align="right".
Testataampa tätä:

Tämä koodi toimii tällä tavoin, mutta yksinkertaisin, helpoin ja siistein tapa on joko antaa tekstin olla vasemmalle tasattua, tai lisäämällä bodyn alapuolelle ja /bodyn yläpuolelle tagit center ja /center.
Poistetaampa äsken tiedostoon lisäämämme ja lisätään center-tagit.

Tekstin muokkailua

Tekstiä voidaan myös muokata lisäämällä erilaisia lyhyitä tageja tekstiin. Tässä tagit lyhyesti ja ytimekkäästi:

B ja /B lihavoivat
I ja /I kursivoivat
U ja /U alleviivaavat
S ja /S ~~yliviivaavat~~
Tagilla BR vaihdetaan riviä, sille ei ole päätöstagia, eli minnekkään ei tarvitse laittaa '/BR', semmoista ei tarvita! Mutta ellei kyse ole h1-h6 otsikoista, niin rivi vaihtuu VAIN, jos siellä on BR-tagi.

Kokeillaampa näitä tietoja sitten seuraavalla tavalla:

Pienennetäämpä vielä tekstiä tagilla font ja liitteellä size, niin saadaan aavistuksen verran siistimpää jälkeä: