XHTML/HTML-opas

Tämä opas on suunniteltu niille, jotka haluavat osata koodata html-sivuja.

Alkeet

Html on koodikieli, joka toimii internetsivuilla. Koodiosio kirjoitetaan aina < ja > merkkien väliin ja tiedosto tallennetaan yleensä tiedostopäätteellä .html (tai .htm). Tiedoston voi kirjoittaa erikoistuneilla HTML-editoreilla tai jollakin tekstieditorilla, esimerkiksi Windows-ympäristössä Muistiolla, Mac-ympäristössä TextWrangerillä tai GNU/Linux-ympäristössä emacsilla, vi:lla, geditillä tai keditillä.

Tämän sivun koodit toimivat suurella varmuudella myös XHTML-merkintäkielessä.

Tässä esimerkki koodista:

<body>Tähän sisältö
</body>

Kuten esimerkissä näkyy, kaikki sivun sisältö tulee <html> ja </html> tagien väliin. <title> ja </title> tagit sisällyttävät selainikkunan ylälaidassa näkyvän otsikon väliinsä (esimerkiksi tällä sivulla XHTML/Html-opas - Wikikirjasto). <body> ja </body> pitävät huolen muusta sisällösta. Tageissa oleva / viiva lopettaa käskyn.

Komennot tulee kirjoittaa pienellä. Lisäksi koodit kannattaa yleensä sijoittaa omille riveilleen ja mahdollisesti myös sisentää (patsi kappaleen sisäiset koodit).

Rivin vaihto

Uusi kappale merkitään koodilla <p>. Jos halutaan rivinvaihto syystä, joka ei ilmene muista koodeista, voi käyttää koodia <br> (”pakotettu” rivinvaihto). Esimerkki tulee tässä:

<br> tagissa ei tarvitse käyttää / viivaa kuten yleensä.

Fontin muuttaminen

Fontit ovat tärkeä osa kirjoitusta. Yleensä selain vaihtaa fonttia tarpeen mukaan muun merkkauksen perusteella, mutta html:sä voi vaikuttaa fonttiin myös CSS:llä (muotoilujen ohjailuun tarkoitettu toinen koodikieli, jota nykyään suositellaan) tai <font> tagilla. Siinä pitää olla myös size ja/tai color eli toisin sanoen vaikkapa
<font size=1-10 color=#001122> . Aloitetaanpa vaikka size :stä. Kirjainkoko on valittava yhdestä kymmeneen. Color eli väri pitää määritellä RGB:nä.
Ensimmäiset kaksi nollaa ovat punaisen määrää, seuraavat vihreätä ja viimeiset numerot tarkoittavat sinistä.

Fonttia muutettaessa tällä tavalla on pidettävä lukijan mahdolliset erikoistarpeet ja mahdollisesti erilainen ympäristö mielessä, mukaanlukien selaimen oletukset ja asetukset. Keltaiset kirjaimet voivat joskus olla kivoja, paitsi jos selain käyttää keltaista taustaväriä. Punainen teksti vihreällä taustalla on paitsi kamalan näköistä myös vaikeaselkoista värisokealle. Iso fontti on hankala jos selainikkuna on kapea, pieni fontti heikkonäköiselle (ja pikseleinä määriteltynä niille, joilla on tarkka näyttö).

Taustaväri ja -kuva

Taustaväri vaikuttaa sivun ulkonäköön huomattavasti. Se kirjoitetaan <body> :yn koodilla bgcolor . Voit myös liittää taustakuvan, mutta siihen tarvitsee
bgcolor :in sijasta kirjoittaa background . Se näyttäisi tältä: <body bgcolor=#556600> tai tältä: <body background=Kissa.jpg width=100%
height=100%> . Ensimmäisessä esimerkissä määritellään taustaväriksi väri #556600. Toisessa taas taustakuvaksi määritellään Kissa.jpg jonka leveys ja korkeus
sivulla on 100%.

Linkit

Linkkejä käytetään tienä toiselle sivulle. Yksinkertaisin linkki on koodilla:
<a href=http://www.osoite.fi>Sivulle nimeltä osoite tästä</a>
Osoite näkyy tässä tapauksessa oletuksena sinisellä. Linkin teksti ei ole hakamerkkien sisällä. Tekstin tilalle voi laittaa myös kuvan näin (katso kuvat alla; näissä tapauksissa alt-teksti on tärkeä, koska linkki ei muuten yleensä näy ilman kuvaa):
<a href=http://www.osoite.fi><img src="Kissa.jpg" alt="kissa"></a>
Sivun sisäisen linkin voi tehdä tällä tavalla: <a href=#Linkit>Linkit aiheeseen</a>

Linkin voi sijoittaa myös kuvan sisään, kuten seuraavassa koodissa:

<map name="map1">
<area href="Link.html" alt="Link" title="Link" shape=rect coords="6,116, 97,184">
<area href="Link.html" alt="Link" title="Link" shape=circle coords="251,143, 47">
<area href="Link.html" alt="Link" title="Link" shape=polycoords="150,217, 190,257, 150,297, 110,257">
<area href="Link.html" shape=default>
</map>
<img src="testmap.gif" alt="map of GH site" border=0 width=300 height=300 usemap="#map1">

Ensin kerrotaan kartan nimi. Sitten määritellään linkin alue. Ensimmäinen linkki on neliö, toinen ympyrä ja kolmas monikulmio, jonka alue määritellään kulmien
koordinaattien mukaan mukaan. Ensimmäinen ja toinen linkki taas määritellään ensin vasemman yläkulman koordinaattien ja sitten oikean alakulman.

Lomakkeet

Lomakkeen lähettämiseen tarvitaan submit-painike, jossa määritellään lomakkeen käsittelijä palvelimella. Käsittelijän pitää olla tietoturva mielessä kirjoitettu, koska ohjelma ajetaan palvelimella ja siihen tuleva syöte on satunnaisen netinkäyttäjän määriteltävissä.

Lomakkeen määrittely www-sivulla ei rajoita ohjelmalle annettavaa syötettä, koska hyökkääjä voi kirjoittaa oman lomakkeensa. Jos kyseessä on esimerkiksi palautelomake, jonka vastaanottaja määritellään lomakkeen näkymättömissä kentissä (aikoinaan tavallinen ratkaisu), roskapostaaja voi laittaa oman mainoksensa viestiksi, vaihtaa vastaanottaja haluamakseen ja näin käyttää www-palvelinta roskapostin lähettämiseen.

Painike

Painikkeita voi käyttää vaikka jonkun asian valitsemiseen linkkien sijaan. Esimerkiksi, jos halutaan painike, josta javascript avaa uuden sivun, tarvitaan tälläinen koodi:

  <form>
  <input type="button" value="Tämä teksti lukee painikkeessa" onClick="newwindow()">
  </form>

Sivun toiminnalle välttämättömät painikkeet ei voi toteuttaa tällä tavalla, koska javascript-tuen ei saa olettaa olevan käytössä. Tässä luotava uusi tyhjä sivu saadaan aikaan myös suoraan selaimesta, joten toimimattomuus ilman javascriptiä ei juuri haittaa. Koodi on kuitenkin kohtelista luoda javascriptillä, niin että ilman sitä tämä toimimaton painike ei näy.

Kirjoitusalueet

Kirtjoitusalueita voi käyttää esimerkiksi rekisteröinnissä ja kirjautumisessa. Laatikon kokoa voi muuttaa size komennolla.

Teksti

Tekstin kirjoittamiseen tarvittavan alueen saa, kun inputin tyypiksi laittaa text:

  <form>
  <input type="text" size="40">
  </form>

Salasana

Salasana on muuten samanlainen kuin tavallinen teksti, mutta sen saa password komennolla ja sen kaikki merkit näkyvät tähtinä:

  <form>
  <input type="password" size="40">
  </form>

Radiopainike

Radiopainikkeet muodostavat valintalistan, josta voi valita vain yhden vaihtoehdon. Esimerkkinä vaikka tämä:

  <form>
  <input type="radio" name="test" value="testi">testi</input>
  <input type="radio" name="test" value="testaus">testaus</input>
  </form>

Javascript-ominaisuudet

Seuraavaksi on lyhyt lista tapahtumankäsittelijöistä:

  onClick            kun kohdetta klikataan
  onMouseOver        kun hiiri on kohteen päällä
  onMouseOut         kun hiiri on siirretty kohteen päältä
  onSelect           kun tekstistä valitaan jotain

Listat

Listoja käytetään esimerkiksi menuissa.

Kuvan liittäminen

Omia kuvia voit lisätä komennolla <img src="osoite.jpg" alt="teksti"> . Valitun kuvan tulee olla netissä ja osoite näyttää kuvan sijainnin verkossa. JPG-pääte on vain esimerkkinä, myös useat muun tyyppiset kuvat käyvät toki.

Omalla koneella olevien kuvien osoite on Windows koneissa C:\Documents\...polku...\kuva.jpg tai yleisesti useissa käyttöjärjestelmissä /...polku.../kuva.jpg, mutta tällöin kuva näkyy vain omalla koneella, muttei yleisesti internetissä. Jos kuva on samassa hakemistossa (kansiossa) kuin html-sivu, osoite muodostetaan samalla tavalla kuin vastaavan html-sivun, muussa tapauksessa kuvahakemiston osoite on selvitettävä erikseen.

alt-määrite kannattaa aina liittää mukaan. Se näytetään kuvan sijasta selaimessa, joka ei näytä kuvia, esimerkiksi koska selain on pieninäyttöisessä kännykässä 3G-verkon ulkopuolella. Jos kyseessä on pelkkä koristekuva, alt-määritteeksi laitetaan "", muuten jokin kuvaa tai kuvan tarkoitusta vastaava teksti.

<IMG> -komentoon voi myös lisätä muita määritelmiä, jotka esimerkiksi kertovat kuvan koon (jolloin selain voi ottaa kuvan huomioon ennen kuin se on ladattu) tai näyttävät tekstin hiiren ollessa kuvan päällä. Käydään näitä läpi esimerkkikoodilla.

http://upload.wikimedia.org/wikibooks/fi/b/bc/Wiki.png

Viivat

Viivoilla voi jakaa sivun moneen osaan. Hyvä esimerkki tästä on wikimedia-hanke. Sen sivuilla on viivoja, jotka jakavat sivun osiin vaakasuunnassa. Viivan voi lisätä <hr> komennolla. Sitä ei tarvitse lopettaa /-viivalla(siis </hr>), koska se on melkein sama kuin komento <p>, mutta siinä tyhjän rivin tilalle tulee viiva.

Javascript

Javascript on Netscape Communications Corporationin www-sivuille kehittämä selaimen tulkitsema skriptikieli. Se ei siis ole osa html:ää. Javascript-koodin voi aloittaa sivulla <script language="javascript"> komennolla. Sen jälkeen lisätään javascript-koodi. Koodin voi lopettaa </script>-komennolla. Näin siis määritellään pieni tietokoneohjelma, jonka selain ajaa, jos javaskript on kytketty käyttöön. Kaikki eivät pidä javascriptiä kytkekttynä, tietoturva- tai käytettävyyssyistä.

PHP

PHP on lyhenne nimestä ”Hypertext Preprocessor” eli hypertekstin (esim. html) esikäsittelijä. PHP-koodi liitetään <?php ja ?> tageilla ja koodi tulkitaan www-pelvelimella (jos se on niin säädetty). Selaimelle lähetetään PHP-ajon tuloksena saatava html-koodi.

Java

Java on ohjelmointikieli, jolla tehtyjä ohjelmia voi liittää html-sivuun <applet> tagilla. Ohjelman hallintaan tulevan alueen korkeutta ja leveyttä voi muokata width ja height komennoilla. Kuten javascript, javakin saattaa olla poiskytkettynä tietoturvasyistä. Lisäksi Javan vapaat (katso Vapaa ohjelmisto) versiot eivät vielä ole täysin kehitettyjä, joten esimerkiksi Linux-käyttäjillä voi olla vaikeuksia Java-ohjelmien ajamisessa.

Taulukot

Taulukko kuuluu jokapäiväiseen elämään. Sitä voi käyttää esimerkiksi lukujärjestyksessä. Kehykset määritellään ensimmäisessä tagissa. Sen voi kirjoittaa nollasta kymmeneen. Tässä malli: <table border=0> . Sen jälkeen rivin aloittamiseksi tulee kirjoittaa <tr> . Sarake taas alkaa <td> :llä. Tähän tyyliin:

<table border=0>

Sarakkeen taustaväriä tai -kuvaa voi muokata samalla tavalla kuin muun sivun. Esim. <td bgcolor=3344ff>

Joskus taulukoita käytetään myös koko html-sivun taittoon, koska suunnittelija näin kokee saavansa täyden kontrollin sivun ulkonäöstä. Taulukkotaitto tekee kuitenkin sivusta joustamattoman ja vaikeasti käytettävän, varsinkin jos selainikkunan koko, fonttien pikselikoko (näytön erittelykyky) tai muu ympäristö eroaa suunnittelijan oletuksista.

Otsikot

<h1> Ylin taso (taso 1)
<h2> taso 2
<h3> taso 3
<h4> taso 4
<h5> taso 5
<h6> Alin taso (taso 6)

Tehtäviä

1. tehtävä: Tee html dokumentti lisäten siihen sisältö. Jos käytät ctrl+copyä, älä kopioi html-koodia, vaan kopioi pelkkä teksti ja lisää muotoilut itse. Voit halutessasi lisätä rivin vaihdon.
2. tehtävä: Muuta sivusi kirjainkokoa. Kokeile värjätä jokatoinen kirjain eri tavalla. Tallenna nämä sivun toiset versiot eri nimillä, niin että niitä on helppo verrata.
3. tehtävä: Kokeile tekemiäsi sivuja muuttaen selaimen asetuksita tekstin ja taustan värejä ja niin että kavennat selainikkunaa. Kuinka kapealla ikkunalla sivu toimii luontevasti?
4. tehtävä: Tee toinen sivu. Laita molemmille sivuille linkki niin että voit liikkua sivulta toiselle. Kokeile erilaisia linkkejä. Jos olet lukenut lomakkeet, tee painike, jota painamalla pääsee eri sivulle.
5. tehtävä: Käytä taulukkoa hyväksesi ja tee Suomen lippu. Venäjä on hieman helpompi.
6. tehtävä: Tee tekstialueet, toinen salasana, toinen tavallinen teksti, ja käytä submit ominaisuutta, jolla ne voi lähettää. Jos osaat jotain skriptikieltä tarpeeksi, varoita jos salasana on liian lyhyt.