Tietotori – Osallistu ja vaikuta

02 Yksinkertaisten sivujen rakentaminen


	Yksinkertaisten sivujen rakentaminen HTML (HyperText Markup Language) on kieli, jota käytetään WWW-sivujen kuvaamiseen. Kun HTML-pohjaisia sivuja rakennetaan, ne rakennetaan yleensä tekstinä. On tosin olemassa niinsanottuja WYSIWYG (What-You-See-Is-What-You-Get)-toimittimia, mutta kaikilla ei ole niihin varaa tai halua ostaa sellaisia. Sitäpaitsi niidenkin käytössä tarvitaan ainakin HTML:n perustuntemus. HTML-tiedostojen tekoon riittää mikä tahansa tekstieditori. Kun HTML-sivuja rakennetaan, HTML-koodi kirjoitetaan täysin tyylittelemättömänä tekstinä. Kuvatkaan eivät sivuja luotaessa näy. Mutta WWW-selaimet osaavat tulkata HTML-koodia ja kääntävät sen WWW-sivuksi, kunhan HTML-tiedoston tiedostopäätteenä on “.html” tai “.htm”. Tiedostonimi voisi olla vaikkapa “tiedosto.html”. Tässä pieni esimerkki sivukoodista: <HTML> <HEAD> <TITLE>Testi</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <CENTER><H3>Tämä teksti tulostuu selaimessa lihavoituna ja koolla 18.</H3></CENTER> </BODY> </HTML> Kaikki HTML-pohjaiset sivut alkavat tagilla <HTML>. Tageilla tarkoitetaan tekstiä, kuvia ja toimintoja määritteleviä merkkijonoja. Ne erotetaan muusta koodista "<" -ja ">" -merkeillä. <HEAD>-tagin sisään asetetaan erikoisparametrit, kuten sivun otsikko, joka määritellään tagilla <TITLE>. Otsikkorivin jäljessä seuraa tagi </TITLE>. Tämä tagi ilmoittaa selaimelle, että sivun otsikko loppuu tagin sijaintiin. Tämän jälkeinen teksti ilmestyy ikkunaan sen otsikkopalkin sijaan. Myös <HEAD>-tagi pitää sulkea HEAD-komentojen määrittelemisen jälkeen. HEAD-komentojen jälkeen kerrotaan selaimelle tiedot sivun yleisrakenteesta ja väreistä. Ne sijoitetaan <BODY>-tagiin. BODY-komennoilla voidaan määrittää sivuille taustakuvioita, taustavärejä, linkkien korostusvärejä jne. Tässä yksinkertaisessa esimerkissä on kuitenkin tyydytty kertomaan selaimelle ikkunoiden taustaväri, valkoinen, jonka hex-koodi on #FFFFFF. Hex-koodit koostuvat kuudesta merkistä, jotka voivat olla joko kirjaimia tai numeroita. #FFFFFF:n eli valkoisen vastakohta on #000000 eli musta. Koska esimerkissä selaimelle kerrotaan vain ikkunoiden taustaväri eikä linkkien värejä, selain käyttää oletusarvoisia värejä. Mikäli koodi ei kerro selaimelle edes taustaväriä, selaimet käyttävät oletusarvoisia sivutaustoja, jotka ovat harmaa Netscapen selaimissa ja valkoinen Microsoftin selaimissa. Kuten tavallisessakin tekstinkäsittelyssä, HTML-tekstinkäsittelyssä tekstille voidaan asettaa monia eri tyylittelyjä. Tässä esimerkissä teksti on lihavoitu ja suurennettu pistekokoon 18, joka vastaa otsikkokokoa 3 eli Heading 3:a. Tämä tyylittely asetetaan tekstille tagilla <H3>. Teksti on myös keskitetty tagilla <CENTER>. Molemmat tagit pitää sulkea kun otsikko loppuu. Jos näitä tageja ei suljeta ja niiden perään kirjoitetaan jotakin, koko tekstistä tulee yhtä otsikkoa. Tyylitagien väliin on kirjoitettu haluttu teksti. Ä-kirjaimet näkyvät HTML-koodin seassa merkkiyhdistelmänä “ä”. HTML-koodissa ei ole suoria vastineita kaikille merkeille (kuten skandeille ja erikoismerkeille) ja ne tuotetaan yhdistelemällä muita merkkejä. Nämä yhdistelmät tunnistaa useimmiten siitä että ne alkavat merkillä "&" ja loppuvat merkkiin ";". Näistä merkeistä on lista viestissä "03 Erikoismerkit". Tässä jälleen pieni esimerkki: <HTML> <HEAD> <TITLE>Testi</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <H3><CENTER>Keskitetty otsikko</CENTER></H3> <CENTER> <HR> </CENTER> <P><FONT SIZE="+3">Tavallista tekstiä koolla 3.</FONT></P><br> <UL> <LI>Listan kohta 1.</LI> <LI>Listan kohta 2.</LI> <LI>Listan kohta 3.</LI> </UL> <P><A HREF="http://www.jokupaikka.fi/jokuhakemisto/jokutiedosto.html">Linkki.</A></P> </BODY> </HTML> Tämä esimerkki alkaa kuten edellinenkin, eli kuten kaikki WWW-sivut, HTML-, HEAD- ja BODY-tageilla. Tämän jälkeen tekstissä on jälleen keskitetty otsikko tyyppiä Heading 3. Tämän jälkeen koodista löytyy tagi <HR> joka piirtää ikkunaan vaakasuoran erotuslinjan. Tagi <P> aloittaa uuden kappaleen, joka sisältää tavallista tekstiä koolla 3. Koko 3 vastaa suunnilleen tavallisten tekstinkäsittelyohjelmien pistekoko 24:ää. Tekstin koko määritellään tagilla <FONT SIZE>, jonka sisään syötetään heittomerkeillä erotettuna kirjasinkokoa vastaava luku. Vastaavanlaisella komennolla <FONT FACE> voidaan asettaa tekstille kirjasimia, esim: <FONT FACE="arial,geneva">Teksti joka näkyy oletusarvoisesti Arialilla ja toissijaisesti (mikäli kättäjän koneella ei ole ensisijaista fonttia) Genevalla. Jos kumpaakaan fonttia ei ole sivullavierailijan koneella, teksti kirjoittuu oletusfontilla, eli tavallisimmin Timesilla.</FONT> Esimerkissä koolla 3 kirjoitettua tekstiä seuraa tagilla <UL> alkava lista. Sen eri kohdat alkavat ja loppuvat tagilla <LI>. Myös <UL>-tagi pitää sulkea, tagilla </UL>. <BR>-tagi on sama kuin tavallinen rivinvaihto. Viimeinen kappale sisältää vain yhden sanan, mutta samalla WWW-sivujen tärkeimmän elementin: linkin. Tagi <A HREF> aloittaa linkin. Sen sisään määritellään WWW-sivun osoite tai tiedostonimi, mikäli linkin kohde sijaitsee samalla palvelimella ja samassa hakemistossa kuin tiedosto, jossa siihen osoittava linkki on. Linkin jälkeinen tagi </A> lopettaa linkin. Tämä on tagi, joka on muistettava aina linkkejä käytettäessä: muuten koko teksti muuttuu valtavaksi linkiksi. Näiden tagien määrittelyjen perusteella tämä koodi tulostaa WWW-selaimen ikkunaan: Keskitetty otsikko ___________________________________________ Tavallista tekstiä. • Listan kohta 1. • Listan kohta 2. • Listan kohta 3. Linkki © Intelligent Systems, 1999