Saatan toisinaan puhua HTML:stä, vaikka tarkoitankin XHTML:ää. Nämä kaksi ovat ripauksen eri asia. Näiden kahden ero on siinä, että viimeisin virallinen versio (4.01) HTML:stä julkaistiin vuosia sitten, ja se on auttamattoman vanhentunut, ja kokeneessa käsissä erittäin kömpelöä. XHTML pohjautuu HTML:ään, mutta pyrkii olemaan enemmän XML-standardin mukainen.
XHTML-tagi - mikä se on?
XHTML-tagi (eng. "tag") koostuu avaavasta merkistä, joka on "pienempi kuin" (<), ja loppuu merkkiin "suurempi kuin" (>).
- Code: Select all
<div>
Näin tarkka ohjeistus sen vuoksi, jotta mahdollisimman monenlaiset ohjelmat, ja ennenkaikkea laitteet (kuten kännykät) voisivat näyttää sivut mahdollisimman samanlaisesti - tai ylipäätänsä näyttää sivut.
Tässä osassa tutustutaan näihin XHTML-tageihin:
<html></html>
<header></header>
<title></title>
<body></body>
<html>
Tämä tagi kertoo selaimelle mistä xhtml-sivu oikeasti alkaa, ja sen päätetagi kertoo mihin se loppuu. Vaikka sivuilla oleva html tuleekin näytölle näkyviin, vaikka se ei ole tämän tagin sisällä, niin siitä huolimatta tätä tulisi käyttää AINA, ja pyrkiä siihen että sivun sisältö sijaitsee tämän tagiparin välissä.
<header>
Tämän tagiparin sisään sijoitetaan sellainen tieto, jonka tarkoituksena on valmistella avattavaa sivua sekä tarjota tietoa josta ei varsinaiselle sivujen selailijalle ole välttämättä mitään iloa. Tämän tagiparin sisälle sijoitetaan sisältö mikä on tarkoitettu selaimelle (tai hakurobotille, tms), muunmuassa kertomaan miten sisältö tulisi näyttää, ja mahdollisesti antamaan lisätietoa.
Nämä tagit kuuluvat header-tagiparin sisälle
<title></title> (tagista lisää tässä osassa)
<meta /> (tagista lisää jossain tulevassa osassa)
<style></style> (tagista lisää jossain tulevassa osassa)
<link /> (tagista lisää jossain tulevassa osassa)
Nämä tagit voi sijoittaa headerin sisälle:
<script></script> (tagista lisää jossain tulevassa osassa)
<title>
Tällä tagiparilla voi määritellä mikä teksti näkyy otsikkopalkissa. Joillakin selaimilla otsikkopalkin sisältö on juuri tämä, jotkut ohjelmat (kuten (Mozilla) Firefox) sisällyttävät siihen oman nimensä, yleensä jatkeeksi. Erittäin käytännöllisen esimerkin antaa tämän sivun otsikkopalkki, missä on sivuston osoite (atkkierratys.com), pallukka, viestiketjun nimi, viiva, Mozilla Firefox.
<body>
Tämän tagiparin sisälle tulee varsinainen sivun sisältö, mikä näytetään katselijalle. Body tulee aina head-tagiparin jälkeen, jos headia käytetään.
Käytännön huomioita ennenkuin alamme kokeilemaan xhtml:n kirjoittamista itse:
Rivinvaihdot eivät tule sellaisenaan näkyviin sivulle. On tageja, jotka aiheuttavat rivinvaihtoja, ja on tietty tagi, jolla voi pakottaa rivinvaihdon, mutta niistä seuraavassa osassa.
Miten luomme sivun? Entä miten katselemme sitä?
Se on erittäin yksinkertaista. Avaa jokin yksinkertainen teksieditori, kuten notepad (muistio, windowsilla), tai gedit (tekstieditori, ubuntulla), tai kate (kubuntulla). Kirjoita tyhjään dokumenttiin seuraava teksti - saat muunnella sisältöä tagien välissä aivan vapaasti, mutta olisi hyvä jos tekisit sen vasta kun olet nähnyt mitä esimerkki saa aikaiseksi:
<html>
<head>
<title>Täällä on otsikkopalkki!</title>
</head>
<body>
Sivun
sisältö
</body>
</html>
Tallenna tiedosto (esimerkiksi) työpöydälle nimellä esimerkki1.html. Tämän jälkeen avaa se selaimella.
Aukeava sivu mitä luultavammin muistuttaa tätä:
Täysin oma-aloitteinen kokeilu
Nyt muuta title-tagiparin välissä olevaa tekstiä, tallenna muutokset, siirry selaimeen ja päivitä sivu. Kokeile vapaasti eri asioita.
Kun olet nälkäinen lisätiedolle, siirry seuraavaan osaan (tähän tulee linkki sitten kun seuraava osa on saatavilla...), tai lueskele alla listattuja ulkopuolisia lähteitä.
Lisäluettavaa:
HTML
XHTML
HTML5 (vain englanniksi, koska wikipediassa ei suomennosta)
XML (vain englanniksi, koska wikipediassa ei suomennosta)