3 Sivunkuvauskieli HTML: osa 2

Font-elementti tuli jo suurin piirtein käytyä läpi edellisen jakson loppupuolella. Haluaisin kuitenkin vielä vähän tarkentaa noiden attribuuttien (määritteiden) arvoja.

Size

size="n | +n | -n"

Kirjaisimen koolle <font size="arvo"> voidaan antaa kahdenlaisia arvoja:
1) absoluuttisia (staattisia) kokonaisulukuja väliltä 1-7
     font size="1"
     font size="2"
     font size="3"
     font size="4"
     font size="5"
     (huom! ei + eikä - merkkiä eteen)


2) suhteellisia (dynaamisia)
     font size="-2"
     font size="-1"
     font size="+0"
     font size="+1"
     font size="+2"
     font size="+3"
     (huom! aina + tai - merkki eteen)

Topsa on selvittänyt näiden välisen eron selkeästi sivuillaan (http://topsa.avaruus.net/?kotisivukurssi/html-tagit):

"Ero staattisen ja dynaamisen välillä on se, että staattinen koko pysyy aina samana, kun taas dynaaminen muuttuu mukana. Esimerkiksi, jos surffaaja käyttää isoja fontteja oletusarvoisesti selaimessaan, määritellään dynaaminen fontin koko lisäämällä tai vähentämällä annettu arvo selaimen oletusarvoisesta fontista. Eli jos käytän selaimessani fontin kokona 4 ja HTML-sivulla fontti on määritelty <font size="+3"> niin teksti näkyy kolme askelta isompana eli fontin kokona 7. Jos taas fontti on määritelty <font size="3"> näkyy teksti koossa 3. Käyttäjäystävällisyyden takia kehotankin aina käyttämään dynaamista fonttikokoa, jotta huononäköisemmätkin voisivat nähdä tekstin ilman suurennuslasia pelkästään suurentamalla selaimen fonttia."

Tämä tieto ei kuitenkaan pidä aina paikkaansa, sillä selaimet voivat käyttäytyä eri tavoin kuin HTML-standardissa on tarkoitettu. Testasin tämän juuri nyt silmiesi edessä olevan sivun IE6 ja Opera 7.5 -selaimilla, ja molemmissa sekä absoluuttisen että dynaamisen tekstin koko muuttui kun suurensin selaimen kirjaisinkokoa. Ylipäätään tätä <font size>- systeemiä ei kannatta käyttää sillä eri elementtien kirjaisinkokoja kontrolloidaan ns. tyylitiedostoilla, jotka opettelemme seuraavassa jaksossa.

Joka tapauksessa jo näinkin yksinkertainen asia kuten kirjaisimen koko on nettimaailmassa varsin monimutkainen juttu. Tämä johtuu siitä että
a) erilaisia selaimia on paljon ja jokainen selain "renderoi" (muuttaa HTML-koodin graafiseksi) eri tavalla, ja
b) eri käyttöjärjestelmät toimivat eri tavalla ja käsittelevät kirjaisimia ja tekstikokoja eri tavalla (Mac/Windows/unix/Linux).

Tästä kirjaisinkokohässäkästäkin on kirjoitettu useita artikkeleita, joista tässä yksi esimerkki. Siinä käsitellään tosin sellaisiakin käsitteitä, joita ei tällä kurssilla vielä ole käyty läpi.

Kirjaisintyyppi

<font face="kirjaisintyyppi">

Tällä face-attribuutilla määritellään kirjaisintyyppi. Tässä muutamia esimerkkejä:

times
courier
courier new
verdana
luciana
arial

Kirjaisintyypiksi voi periaatteessa laittaa ihan minkä nimisen kirjaisimen tahansa, esim.

<font face="starwars">outo kirjaisintyyppi</font>

mutta täytyy muistaa, että kyseinen kirjaisintyyppi tulisi löytyä myös siitä koneesta, mistä noita web-sivuja luetaan. Jos käytät jotain harvinaista kirjaisinta, jota ei löydy juuri muista koneista kuin omastasi niin suurin osa maailman ihmisistä näkee sivun erilaisena kuin oli tarkoitus.

Kannattaa siis käyttää ihan vain muutamia kaikkein yleisimpiä kirjaisintyyppejä, joita ovat mm.

Windows Mac unix/Linux/XFree
Arial
Comic Sans MS
Courier New
Impact
Monotype.com
MS Serif
MS Sans Serif
Times New Roman
Trebuchet MS
Verdana
Webdings - Webdings 		Times
Courier Regular
Helvetica
Symbol - Symbol
Chicago
New York
Geneva
Monaco
Palatino 		charter
clean
courier
fixed
helvetica
lucida
lucidabright
lucidatypewriter
new century schoolbook
symbol - symbol
terminal
times
utopia

Kuten huomaat, kaikki kirjaisimet eivät toimi kaikissa koneissa. Siksi kannattaa face-attribuuttiin pistää yhden kirjaisimen sijaan lista kirjaisimia. Jos selain ei pysty näyttämään listan ensimmäistä kirjaisinta, se yrittää käyttää listan seuraavaa kirjaisintyyppiä. Jos sitäkään ei löydy koneesta, siirrytään kolmanteen ja niin edelleen.

Yleisimmin käytetyt (ja turvallisimmat) listat ovat seuraavat:

Kirjoituskone
Courier New, Courier, monospace
Siro
MS Serif, New York, serif
Times
Times New Roman, Times, serif
sans serif
MS Sans Serif, Geneva, sans-serif
Verdana
Verdana, Geneva, Arial, Helvetica, sans-serif
Arial
Arial, Helvetica, sans-serif

Lisäksi Microsoftin Office-paketin mukana asentuu Windows- ja Mac-koneisiin seuraavat kirjaisimet:

Arial Black
Arial Black
Hassu
Comic Sans MS
Georgia
Georgia
Paksu
Impact
Trebuchet MS
Trebuchet MS

Noissa listoissa on pyritty siihen, että mikä käyttöjärjestemästä ja koneen asetuksista huolimatta aina löytyisi jokin kirjaisin, joka näyttää edes suurinpiirtein siltä kuin sivun suunnittelija on halunnut.

<font face>-attribuuttiin pätee sama sääntö kuin <font size>- attribuuttiin: sitä ei suositella käytettäväksi, sillä se hankaloittaa koodin ylläpitoa eikä HTML:ää ole tarkoitettu sivun ulkoasun määrittämiseen. Jaksossa 4 pääsemme tutustumaan tekniikkaan, jolla voidaan sivun ulkoasua muuttaa mielin määrin - ja vieläpä erittäin pienellä työllä.

Mahdollisesti mietit, että miksi nämä attribuutit sitten edes opetellaan, jos niitä ei saisi käyttää? Tarkennan, että näitä ei kannata käyttää WWW-sivuja tehdessä, mutta voit esimerkiksi hyödyntää näitä tekniikoita esim. sähköpostiviesteissäsi. Useimmat sähköpostiohjelmat kun kerran tukevat nykyään HTML-kieltä, ja yksi hyvin yleisessä käytössä oleva sovellutus on se, että viestin lopussa oleva "sigu" eli allekirjoitus (signature) on muotoiltu "näyttävästi" eri väreillä ja kirjaisimilla.

HEI

Sain faksisi keikan varmistumisesta. Hoidan paikalle itseni ja komppiryhmän, vedämme kolme settiä illan aikana ja järjestän sellaisen repertuaarin että firman äijät ovat varmasti tyytyväisiä järjestettyyn ohjelmaan.

Sun tehtäväksi jää hoitaa noi sopimusasiat sekä järjestää sitten se sähköpiano ajoissa sinne keikkapaikalle ja siihen sopivat piuhat vielä mukaan.

Terveisin

 Pekka Pianisti
muusikko, pedagogi
GSM: 040 111 222
E-mail: pekka.pianisti@flyygeli.net

Kuten huomaat, liiallinen väreillä leikkiminen tekee ulkoasusta helposti sekavan. Värit käydään läpi seuraavassa luvussa.

Lopuksi vielä pikku artikkeli kirjaisintyypeistä.