2 Sivunkuvauskieli HTML: osa 1

Edellisessä jaksossa opittiin, että HTML on sivunkuvauskieli. Tämä tarkoittaa että tämän kielen avulla voidaan kuvata mitä elementtejä (leipätekstiä, otsikkoja, kuvia, kuvatekstejä, linkkejä etc) sivulla pitäisi olla. Lyhyesti sanottuna HTML määrittää sivun rakenteen ja sisällön.

Sitä voidaan myös alkeellisesti käyttää sivun ulkoasun (värien, fonttien eli kirjaisimien etc.) määrittämiseen, mutta nykyään tähän käytetään toista tekniikkaa, joka opetellaan tämän kurssin jaksossa 4.

Elementit

Elementtejä on kahdenlaisia: lohkoelementtejä sekä rivinsisäiselementtejä.

A. Lohkoelementit

Rakenteinen sivu koostuu useista elementeistä, esim. kappale, otsikko, taulukko, lista ja niin edelleen. Näitä elementtejä kutsutaan lohkoelementeiksi (engl. block level elements). HTML:ssä määritetään, että lohkoelementtiä ennen on rivinvaihto ja sen jälkeen on myös rivinvaihto (automaattisesti siis). Lohkoelementti vie aina vähintään yhden kokonaisen rivin.

Lohkoelementti voi joissain tapauksissa pitää sisällään muita lohkoelementtejä, esim. voidaan tehdä lista, jonka sisällä on toinen lista.

Esimerkki lohkoelementeistä

Tässä alla olevassa (huom, ei yhdyssana :-) ) esimerkissä on kolme lohkoelementtiä: yksi kappale (engl. paragraph), yksi lista ja lopuksi vielä toinen kappale. Tuon listan sisällä on toinen listaelementti.

Tässä on yksi kappale tekstiä. Sen taustavärin on aavistuksen kellertävä ja sen ympärillä on katkoviiva. Alla on sitten ohjeet kuinka pastaa keitetään. Ensin kerrotaan että mitä aineita oikein tarvitaan.

  • pastaa tottakai
  • runsaasti vettä
  • suolaa
  • tilkka öljyä
    1. oliiviöljyä, tai
    2. rypsiöljyä
  • Jos oikein ryhtyy "hifistelemään" niin lisää keittoveteen vielä yksi laakerinlehti.

Ja tässä on sitten toinen kappale, johon voisin kirjoittaa vaikka ohjeet että kuinka tuo pasta sitten pitäisi keittää. Jos tai kun keitätte pastaa niin olkaa tarkkoja ettette keitä niitä ihan löllöksi veteläksi puuroksi. Oikeaoppisesta pastan kypsyysasteesta käytetään termiä "al dente", joka on italiaa ja tarkoittaa "hampaalle". Al dente -keitetty pasta antaa hampaille pienen vastuksen kun sitä puraisee. Siis ei liian kova eikä liian pehmeä.

Huomaa, että ennen ja jälkeen kappaleen ja listan on aina rivinvaihto. Lista ei siis voi alkaa keskeltä riviä.

Yleisimmät lohkoelementit ovat otsikot (niitä on 6 eri tasoa, ikään kuin pääotsikot, alaotsikot jne.), kappale, taulukko ja lista. Näistä seuraavassa jaksossa tarkemmin ja lisää.

B. Rivinsisäiselementit

Lohkoelementtien (block level elements) lisäksi on olemassa ns. rivinsisäiselementtejä (engl. inline level elements). Voidaan puhua myös rivinsisäisistä elementeistä, ja kuten jo nimi kertoo, kyseessä ovat sellaiset elementit jotka voivat sijaita yhden rivin sisällä. Niitä ovat mm. alleviivaukset, lihavoinnit, painotukset ja niin edelleen. Niiden avulla voidaan esim. korostaa tiettyjä sanoja kappaleen sisällä. Rivinsisäiselementti voi alkaa ja päättyä keskellä riviä.

Myöskin kuvat ovat rivinsisäisiä elementtejä: ne voivat (esim. ) sijaita keskellä riviä.

Haluan tehdä selväksi, että HTML-kieli on suunniteltu nimenomaan sivun rakenteen kuvaamiseen. Sillä ei ole tarkoitus tehdä hienoa ulkoasua, mutta sanojen painottaminen ja alleviivaaminen katsotaan kuuluvan enemmän rakenteeseen kuin ulkoasuun. Esimerkiksi alleviivauksen väri ja paksuus sekä lihavoinnin määrä (vähän, paljon, todella paljon) yms. määritellään muualla kuin HTML-kielessä.

Mutta nyt asiaan. Katsotaanpa esimerkki rivinsisäielementeistä ja samalla kurkistetaan että miten tämä HTML-merkkauskieli oikein toimii.

Esimerkki:

Haluan alleviivata seuraavasta tekstistä sanan "meduusoja":

Koralliriutoilla näkee usein meduusoja, joiden väri voi vaihdella lähes läpikuultavasta tummansiniseen.

Koska HTML-sivu on tavallista tekstiä (text, ascii), en voi käyttää samanlaista menetelmää kuin esim. Wordissä, vaan minun pitää kertoa tuon alleviivauksen paikka toisella tavalla. HTML:ssä käytetään tähän eräänlaisia komentoja:

Koralliriutoilla näkee usein <alleviivaus alkaa>meduusoja<alleviivaus loppuu>, joiden väri voi vaihdella lähes läpikuultavasta tummansiniseen.

Pistin tuon tekstin sekaan kaksi tunnistetta eli tagia (lausutaan "tägi" - engl. tag). Ensimmäinen tunniste kertoo mistä alleviivaus alkaa ja toinen mihin se loppuu. Koska useimmat muotoilut sisältävät sekä alun että lopun, on HTML:ssä otettu käyttöön tätä varten lyhennemerkintä:

Koralliriutoilla näkee usein <alleviivaus>meduusoja</alleviivaus>, joiden väri voi vaihdella lähes läpikuultavasta tummansiniseen.

Kaikki tunnisteet ovat siis merkkien < ja > sisällä. Alku- ja lopputunnniste eroavat sillä tavalla, että lopputunniste alkaa '/'-merkillä.

HTML on kansainvälinen kieli, joten siinä ei käytetä tietenkään suomenkielisiä termejä. Sanan alleviivaus sijaan käytetään englanninkielistä termiä underline. Ja jotta koodista ei tulisi turhan pitkää, on sekin lyhennetty yksinkertaisesti kirjaimeksi u.

Koralliriutoilla näkee usein <u>meduusoja</u>, joiden väri voi vaihdella lähes läpikuultavasta tummansiniseen.

Tämä on jo ihan oikeaa HTML-kieltä, ja se näyttää selaimessa tällaiselta:

Koralliriutoilla näkee usein meduusoja, joiden väri voi vaihdella lähes läpikuultavasta tummansiniseen.

Muita perustageja ovat kursivointi tai painotus (italic/emphasis) sekä l ihavointi (bold/strong). Seuraavaksi esitetään koodiesimerkki ja heti sen perään miltä se näyttää web-selaimessa.

Koralliriutoilla näkee usein <u>meduusoja</u>, joiden väri voi vaihdella 
<em>lähes läpikuultavasta</em> <strong>tummansiniseen</strong>.

Koralliriutoilla näkee usein meduusoja, joiden väri voi vaihdella lähes läpikuultavasta tummansiniseen.

Tästä eteenpäin kaikki HTML-koodiesimerkit esitetään Courier-kirjaisimella ja harmaalla pisteviivalla kehystettynä.

Muutamia kysymyksiä ja vastauksia:

K. Onko "HTML-komentojen" lopputunniste yksinkertaisesti alkutunniste lisättynä /-merkillä?
V. Jep.

K. Näkyvätkö tunnisteet (tagit) web-sivulla?
V. Ei. Tunnisteet eivät näy web-sivulla, mutta niiden aiheuttama tekstin muotoilu kyllä näkyy. Itse asiassa selain piilottaa kaikki merkkien < ja > sisällä olevan tekstin, oli kyseessä sitten oikeaoppinen (validi) tunniste tai jotain ihan muuta.

K. Esimerkissä käytettiin pieniä merkkejä, esim. u alleviivausta varten. Kirjoitetaanko kaikki HTML-tunnisteet pienillä kirjaimilla?
V. Selain, joka tulkitsee tätä HTML-koodia ei välitä siitä, käytetäänkö pieniä vai isoja kirjaimia. Jotkut HTML-ohjelmoijat käyttävät aina isoja kirjaimia, jotta koodia lukiessa varsinainen teksti ja muotoilukoodit erottuisivat paremmin toisistaan. Tosin uudemmissa sivunkuvauskielissä, jotka muistuttavat erittäin paljon HTMLää, on pakko käyttää koko ajan pieniä kirjaimia. Tästä syystä itse taas käytän pieniä. Voit tässä mielessä itse valita kuinka toimit. (Omasta mielestäni koodi on luettavampaa ja selkeämpää jos kaikki tunnisteet kirjoitetetaan pienillä.)

K. Pitääkö kaikella tekstillä olla alku- ja lopputunnisteet jotta se näkyisi sivulla?
V. Ei. Jos kirjoitat tekstiä ilman tunnisteita, kijoittamasi teksti tulee kyllä näkymään, mutta et voi mitenkään vaikuttaa siihen, miltä se sivulla näyttää.

K. Mitäs jos unohdan pistää komennon loppuun tuon lopputunnisteelle kuuluvan /-merkin?
V. Hmmm... tästä seuraa ongelmia, mutta se on helppo korjata. Jos lopputagi puuttuu tai on virheellinen, tulet kyllä huomaamaan sen kun tutkailet sivua web-selaimella. Koko web-sivu tulee käyttämään antamaasi muotoilukomentoa siitä asti eteenpäin, josta tuo lopputunnisteivirhe löytyy. Korjaaminen on helppoa: sen kun lisäät lopputagiin /-merkin ja lataat sivun uudestaan selaimeen (reload).

K. Tarvitaanko kaikkiin HTML-tunnisteisiin sekä alku- ja lopputagi?
V. Ei. Tähän on muutamia poikkeuksia, jotka käsitellään myöhemmin. Pääsääntöisesti kuitenkin tarvitaan sekä alku- että lopputunniste.

Muokattu lähteestä http://www.htmlgoodies.com/primers/html/article.php/3478151