Mikä on WWW-sivu?

WWW-sivu on tavallista muotoilematonta teksti, joka voidaan esimerkiksi kirjoittaa jollakin tekstieditorilla (esim. Notepad). Muotoilemattomasta tekstist ei erota siellä esiintyviä otsikoita tai muita rakenteita, kuten seuraavasta esimerkistä voit todeta. Tekstistä eivät myöskään erotu lauseista korostettavat sanat.

Otsikko
Tämä kappale on esimerkki tavallisesta muotoilematonta tekstistä.
Muotoilemattomasta tekstistä ei erotu rakenteita ollenkaan

Kuva 1. Muotoilemattoman tekstin
näkyminen selainikkunassa.

Pelkkä teksti ei ole kovinkaan miellyttävää luettavaa rakenteen puuttumisen vuoksi. Tekstistä on kuitenkin aina erotettavissa erilaisia rakenteellisia osia, kuten esimerkiksi otsikoita, tekstikappaleita ja listoja. Rakenteellisten osien erottamisen voimme toteuttaa HTML-elementtien avulla, joita käyttämällä teemme muotoilemattomasta tekstistä HTML-sivun.

HTML-elementeillä (eli tageilla) voimme määrittää tekstikappaleille tai niiden osille rakenteellinen merkitys. HTML-elementit eroavat muusta kirjoitetusta tekstist siten, ett ne on kirjoitettu pienempi kuin -merkin (<) ja suurempi kuin -merkin (>) väliin (<siis tänne>). WWW-sivuilla käytettävissä olevat HTML-elementit on määritelty etukäteen, joten esimerkiksi WWW-sivun pääotsikon merkitsemme <h1>-elementin (Heading1) sisään. Vastaavalla tavalla tekstikappaleet merkitsemme <p>-elementin (Paragraph) sisään. Merkintöjä käyttämällä saamme edellisen esimerkin tekstin havainnollisempaan muotoon, koska nyt voimme erottaa selvästi otsikko ja tekstikappale toisistaan.

<h1>Otsikko</h1>
<p>Tekstikappale, jossa kerrotaan joitakin asioita.</p>
Otsikko ja tekstikappale on selkeästi erotettavissa toisistaan selainikkunassa

Kuva 2. Merkityn rakenteen
näkyminen selainikkunassa.

HTML-elementti on yksinkertaisesti jokin englanninkielinen sana tai siitä tehty lyhenne, joka on laitettu pienempi kuin ja suurempi kuin -merkin väliin. Useimmat HTML-elementit tulevat tekstin sekaan pareittain eli niissä on sekä aloitus- että lopetuselementti. Seuraavassa esimerkissä tekstikappaleen sisältä löytyvä <strong>-aloituselementti kertoo, että sen jälkeen tuleva teksti täytyy korostaa (vahventaa). Vastaavasti lopetuselementti </strong> kertoo, että vastaavan aloituselementin vaikutus loppuu eli korostaminen täytyy lopettaa. HTML-elementin lopetuselementti on samanlainen kuin aloituselementti lukuun ottamatta kauttaviivaa (/) pienempi kuin -merkin jälkeen. Esimerkistä kannattaa myös huomata, että jotkin HTML-elementit voidaan lisätä toisten HTML-elementtien sisään.

<p>Kappaleessa on  <strong>tärkeää tekstiä</strong>.</p>
Vahvennus erottuu tekstikappaleesta selkeästi

Kuva 3. Vahvennuksen erottuminen
tekstikappaleesta.

Graafisia HTML-editoreja (esim. FrontPage, Composer jne.) käytäessämme emme välttämättä nähdä HTML-elementtejä. Rakenteen voimme kuitenkin määritellä erilaisten rakenteellisten tyylien avulla. Graafisista HTML-editorista pitäisi löytyä esimerkiksi otsikkoja varten tarkoitettu tyyli. Tyylin käyttäminen lisää oikean HTML-elementin tekstin joukkoon meidän huomaamattamme. Varsin kätevää, mutta työkalun käyttämisessä piilee pieniä vaaroja! Graafisilla HTML-editoreilla saamme helposti tehtyä ulkoasultaan näyttäviä, mutta rakenteeltaan huonoja WWW-sivuja. Monilla meistä on ikävä taipumus unohtaa sivun rakenne graafista HTML-editoria käyttäessä, koska editorissa on paljon pelkkään ulkoasuun liittyviä työkaluja. Tämän vuoksi meidän ei kannata koskaan käyttää ohjelmien työkaluriveiltä löytyviä muotoilutyökaluja, vaan ainoastaan valmiita rakenteellisia tyylejä!

Käyttäjien kommentit

Kommentoi tätä sivua Lisää uusi kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/doc/tyovaline/wwwsivu/index1.html
© Antti Ekonoja (anjoekon@jyu.fi) <http://users.jyu.fi/~anjoekon/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
Jukka Mäntylä (jmantyla@iki.fi) <http://www.iki.fi/jmantyla/>
2003-11-10 10:21:28
Informaatioteknologia - Jyväskylän yliopiston IT-tiedekunta ja avoin yliopisto