Tee oma web-sivu, osa 3


HTML tarjoaa varmasti riittävästi vaihtoehtoja jotta kotisivulle saa varmasti juuri sellaisen ulkonäön kuin haluaa. Uusimmat HTML-tagit mahdollistaa jopa fontin valinnan, mutta täytyy huomioida, että vanhemmat selaimet eivät tue ominaisuutta.

Fonttilajin voi valita haluamakseen samoin kuin fontin koon sekä värin. Koon valinta toimii myös vanhemmissa selaimissa, mutta fonttilaji- sekä fonttiväriasetus ei toimi, vaan tilalla käytetään oletusfonttia oletusvärillä. Tämä on hyvä huomioida sivun suunnittelussa, eli väri tai koko ei saa olla ratkaisevassa asemassa.

Onneksi selain, joka ei näitä ominaisuuksia tue, ohittaa nämä selaimen mielestä virheelliset kohdat. Näin samassa fonttimäärittelyssä oleva kokomääritys toimii.

Huomioinarvoista on se, että mikäli esimerkiksi fonttilaji sekä -väri on vaihdettu normaalista poikkeavaksi ja uudessa <FONT> -tagissa vaihdetaan ainoastaan fonttilajia, pysyy fontin värimäärittely edelleen voimassa. Fonttiasetusten kumoaminen tapahtuu </FONT> -tagilla.


Fontti

FONT -tagissa voidaan käyttää seuraavia määrittelyjä:
  • FACE
  • COLOR
  • SIZE

FACE = "FONT1, FONT2, FONT3, ..." määrittelee käytettävän fontin. Listassa voi luetella haluamansa fontit. Mikäli käyttäjän koneeseen ei ole asennettu FONT1:sta käytetään FONT2:ta mikäli se on asennettu, muuten käytetään FONT3:a jne. Mikäli käyttäjän koneeseen ei ole asennettu mitään listassa olevista fonteista tai selain ei tue FONT FACE -ominaisuutta, käytetään oletusfonttia.

Esimerkki:
<FONT FACE="Verdana, Arial, Helvetica">Tämä on eri fonttilajilla</FONT>

Dokumentissa:
Tämä on eri fonttilajilla




Fontin väri

COLOR = "#......"
määrittelee fontin värin. Värin määrittelyssä käytetään samaa värimäärittelyn tapaa kuin esimerkiksi <BODY> -tagissa, johon tutustuimme artikkelisarjan 2. osassa.

Esimerkki:
<FONT COLOR="#0000FF">Tämä teksti on sinisellä</FONT>

Dokumentissa:
Tämä teksti on sinisellä




Fontin koko

SIZE = "arvo" äärittelee fontin koon. Määrittelyssä voi käyttää joko kiinteää asetusta, esim. SIZE="6" tai vaihtoehtoisesti fonttikokoa tietyn verran muuttavaa asetusta, esim. SIZE="+2".

Fontin koon muutoksissa on suositeltavaa aina kumota fonttiasetus ennen seuraavaa kokoasetusta. Ilman tätä jää oletusfonttikooksi viimeisintä kokoasetusta edeltävä asetus.

Toisin sanoen mikäli kokoa on muutettu ensiksi kokoon 4, sen jälkeen kokoon 7 ja lopuksi kokoon 2 ja vasta tämän jälkeen on </FONT> -tagi jää merkkikooksi koko 7. Erityisen vaaralliseksi ominaisuuden tekee se että jotkut selaimet eivät noudata tätä ajattelutapaa vaan oletuskooksi jää viimeisin asetus.

Esimerkki:
<FONT SIZE="7">Koko 7</FONT>
<FONT SIZE="-4">Pienennetään kahdella normaalikokoon verrattuna</FONT>
<FONT SIZE="+2">Suurennetaan kahdella normaalikokoon verrattuna</FONT>

Dokumentissa:
Koko 7
Pienennetään kahdella normaalikokoon verrattuna
Suurennetaan kahdella normaalikokoon verrattuna




Vaakaviiva

Vaakaviivan leveyteen, korkeuteen, asetelmointiin ja varjostukseen voi vaikuttaa määrittelyillä.

<HR> </HR>
HR -tagissa voidaan käyttää seuraavia määrittelyjä:

  • WIDTH
  • ALIGN
  • SIZE
  • NOSHADE
WIDTH = "arvo"
määrittelee viivan leveyden. Arvo voi olla joko kiinteä pikseliarvo tai vaihtoehtoisesti prosentteina koko sivun leveydestä.

Esimerkki:
<HR WIDTH="300">

Dokumentissa:

Esimerkki:
<HR WIDTH="70%">

Dokumentissa:

ALIGN = "asetelmointi"
Määrittelee viivan asetelmoinnin, eli onko viiva sivun vasemmassa (LEFT) tai oikeassa (RIGHT) laidassa vai keskitetty (CENTER). Oletuksena viiva on keskitettynä. Mikäli viiva on koko sivun levyinen, ei määrittelyllä ole vaikutusta.

Esimerkki:
<HR WIDTH="300" ALIGN="LEFT">

Dokumentissa:

Esimerkki:
<HR WIDTH="300" ALIGN="RIGHT">

Dokumentissa:

SIZE = "korkeus"
Määrittelee viivan korkeuden pikseleinä.

Esimerkki:
<HR SIZE="6">

Dokumentissa:

NOSHADE
Poistaa viivan varjostuksen.

Esimerkki:
<HR SIZE="6" NOSHADE>

Dokumentissa:




Sekalaista

<ADDRESS> </ADDRESS>

Tagi jota voi käyttää nimi- ja osoitetietojen tulostukseen. Useimmissa selaimissa tuloksena on Italic -tyylinen teksti.

Esimerkki:
<ADDRESS>Verkkouutiset HTTP://WWW.VERKKOUUTISET.FI </ADDRESS>

Dokumentissa:

Verkkouutiset HTTP://WWW.VERKKOUUTISET.FI



Kommenttitagi

<! ....... >

Kommentti-tagi. Ei näy sivun lukijalle. Voi käyttää omien apumerkintöjen laittoon.

Esimerkki:
<!Tämä teksti ei näy sivun lukijalle>

Dokumentissa:




Joskus tulee tarve esittää sivulla merkkejä, joita ei voi kirjoittaa normaalisti, esimerkiksi < ja >. Näiden esittäminen täytyy tehdä joko isolatin -merkistöllä tai vaihtoehtoisesti vastaavin sanallisin merkinnöin. Ohessa muutamia yleisin merkki.

MerkkiIsolatinSanallinen
<&#60;&LT;
>&#62;&GT;
"&#34;&QUOT;
©&#169;&COPY;

MARKO HAKALA
20.2.1998

AJASSA -SIVULLE