Copyright © 2000 Urpo Lankinen
Tässä dokumentissa on selitetty lyhyesti mutta toivottavasti selkeästi HTML-kielen perusteet.
Lakitieteellistä roskaa
Tämä dokumentti on Open Publication Lisencen alainen.
This material may be distributed only subject to the terms and conditions set forth in the Open Publication License, v1.0 or later (the latest version is presently available at http://www.opencontent.org/openpub/).
Kaupallinen levitys on toki sallittua, mutta pyytäisin lähettämään e-mailitse ilmoituksen - olisi kiva tietää missä ihmeessä tämä taas seilaa. Vaikka lisenssi sallii muutokset, kehotan ihmeessä silti lähettämään muutokset ja muutosehdotukset minulle, mielelläni minä tätä päivitän!
Tämä dokumentti kertoo HTML-kielen perusteet, keskittyen aivan perusasioihin eikä mene turhan pitkälle. Tämä on tarkoitettu lähinnä ensimmäiseksi johdannoksi HTML-kieleen; Tämän jälkeen kannattaa tutustua esimerkiksi standardidokumenttiin tai johonkin kattavampaan oppaaseen.
Tekijä on tavoitettavissa sähköpostin avulla (wwwwolf@iki.fi). Kotisivuni voi myös olla mielenkiintoinen.
Dokumentti kirjoitettiin Linuxissa XEmacs-tekstieditorilla DocBook-tiedostoksi, josta se muunnettiin Jaden avulla HTML-tiedostoksi.
HTML, Hypertext Markup Language, on hypertekstidokumenttien rakenteenkuvauskieli.
HTML kuvaa dokumentin rakenteen, ei sitä miltä itse dokumentti näyttää. Dokumentin varsinaisen ulkoasun päättää viime kädessä sivun katsomiseen käytettävä ohjelma.
Dokumenttiin voidaan lisätä ulkoisia elementtejä kuten kuvia, ääntä, animaatioita tai Java-sovelmia, tai sille voidaan määrätä tarkemmin ulkoasu esim. Cascading Style Sheets-kielellä (CSS). Näiden kaikkien käyttöön HTML tarjoaa mahdollisuuden.
HTML pohjaa ISO:n SGML-standardiin. SGML (Standardized Generalized Markup Language) on tapa määritellä kieliä, jotka kuvaavat eri asioiden rakennetta käyttäen hyväksi yhteisiä elementtejä.
HTML:n kehitysta kontrolloi W3 Consortium. W3C:n webbisivuilta löytyy myös kielen standardit ja linkkejä useisiin aihetta käsitteleviin sivuihin.
HTML-tiedostojen tekemiseen ei tarvita ihmeempiä. HTML-tiedostot itse ovat vain tekstitiedostoja. Niissä käytetään merkistönä ISO 8891-1 eli Latin-1-merkistöä, mikä on Windowsin ja Unixien oletusmerkistö.
Suosittelen kuitenkin hankkimaan jonkin järeämmän tekstieditorin kuin Windowsin Notepadin (Muistion), sillä Notepad on rajoittunut ja kömpelö ohjelma, esimerkiksi korvaustoiminto ja rivien numerointi puuttuu, tiedoston koko on rajoitettu 32 kilotavuun ja tallennuksessa se laittaa tiedoston nimeen .txt-päätteen (tämä voidaan estää laittamalla tallennusikkunassa tiedoston nimi lainausmerkkeihin, esim. "tiedosto.html".
Itse käytän XEmacs-editoria joka on äärimmäisen tehokas. Se keittää myös hyvää kahvia.
Toinen hyödyllinen työkalu on validaattori, joka tarkastaa että sivu on rakennettu HTML:n kieliopin mukaan. Tarkastus on äärimmäisen tärkeää, sillä jos sivun rakenne ei ole tehty oikein, sivu ei välttämättä näy oikein kaikkialla. On myös validaattoreita, jotka tarkistavat webin kautta jo verkossa olevia sivuja - tällainen on esimerkiksi W3C:n validaattori.
HTML rakentuu ns. tageista, jotka ovat väkäsien sijaan sijoitettuja lyhenteitä ja sanoja. Ne merkkaavat jonkin asian alkua. Esimerkiksi <P>-tagi, jota edellä käytettiin, merkkaa lappaleen alkua. "Lopputagi" on samanlainen kuin alkutagi, mutta se alkaa /-merkillä. Joidenkin tagien (kuten <P>) lopputagi voidaan jättää pois; Joillakin (kuten <IMG>) lopputagia ei edes saa olla.
Attribuutit ovat määreitä, jotka lisätään tagin sisälle, muodossa attributti="arvo". LANG on hyvin yleinen attribuutti; sillä määrätään tagin sisällä olevan sisällön kieli (käyttäen kaksikirjaimisia kielikoodeja). Usein dokumentin kieli mainitaan <HTML>-tagissa.
Jokaisen HTML-dokumentin on alettava dokumenttityypin määrityksellä. Tämä on muotoa:
<!doctype html public "-//W3C//DTD HTML 4.01//EN">
Tämä määrää tiedoston ns. SGML DTDn, eli toisin sanoen tiedoston tyypin erottamaan sen toisista SGML-dokumenteista. Samalla se määrää käytettävän HTML-version.
Tämä määre on tärkeä. Ensinnäkin, validaattorit, jotka tarkastavat dokumentin rakennetta, tuntevat usein muitakin SGML-pohjaisia kieliä (esimerkiksi nsgmls, jolla tarkastan omien HTML-dokumenttieni rakenteen, tunnisti myös tämän dokumentin alkuperäisen laadintakielen, DocBookin, joka siis myös pohjaa SGML:ään. Toisekseenkin eri HTML-versioissa käytetään eri ominaisuuksia, ja tämä auttaa tarkistusohjelmia (ja selaimia) tunnistamaan käytetyn version.
Nykyisin kannattaa käyttää HTML 4.01:tä. Tästä dokumenttityyppimääreestä on kahta muotoa:
<!doctype html public "-//W3C//DTD HTML 4.01//EN">
ja
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
Näiden ero on lähinnä se, että Transitional-tyypissä käytössä on vanhoja rakenteita, joiden "ei kuuluisi olla siellä". Näitä ovat mm. monien elementtien ALIGN-määre, joka määrää elementin sijoittumisen sivulla. HTML ei pyri olemaan dokumentin ulkoasua kuvaava kieli, joten "puhdas" dokumentti ei niitä ominaisuuksia sisällä. "Puhtaassa" dokumentissa käytetään elementtien ulkoasun määräiluun CSS-määreitä, jotka ovat sitä paitsi tehokkaampia.
On lisäksi kolmas dokumenttityyppi, HTML 4.0 Frameset, mutta sitä käytetään vain kehyspohjaisia sivuja suunniteltaessa.
Dokumentti alkaa dokumenttityypillä, ja sijoittuu sen jälkeen <HTML>...</HTML>-tagien väliin.
Yleensä dokumentin kieli mainitaan <HTML>-tagin LANG-attribuuttina, kuten seuraavissa on tehty.
<!doctype html public "-//W3C//DTD HTML 4.01//EN"> <html lang="fi"> ... </html>
Näiden sisälle tulee sen jälkeen kaksi osiota: Tieto-osa (Head) ja varsinainen dokumentin sisältö (Body), tässä järjestyksessä.
<!doctype html public "-//W3C//DTD HTML 4.01//EN"> <html lang="fi"> <head> ... </head> <body> ... </body> </html>
HEAD-osiossa esitellään dokumentista asioita, jotka eivät yleensä näy "paljaalla silmällä". Näitä ovat mm.
Dokumentin otsikko
Näkymättömiä linkkejä, joita selain käsittelee jotenkin (esim. linkki dokumenttin ulkoasun määrittelevään CSS-tyylitiedostoon, tekijän sähköpostiosoite, tms.)
Ns. metatieto sivusta (Tekijän nimi, muokkausohjelma, Kuvaus sivusta, hakusanat hakukoneita varten jne)
CSS-koodit, joilla muokataan ulkoasua
JavaScript-kieliset ohjelmanpätkät
Seuraavassa esimerkki sivun HEAD-osiosta. Tämä on (omankehun hajun uhalla) otettu omalta kotisivultani.
<HEAD>
<LINK REV=MADE HREF="mailto:wwwwolf@iki.fi">
<META NAME="description" CONTENT="WWWWolf's home page - Urpo Lankinen's
potentially uncool website, hacker's haven. A home page of the certain
lupine net.eccentric.">
<META NAME="keywords" CONTENT="Urpo Lankinen, Weyfour WWWWolf, WWWWolf,
coding, hacks, Linux, dragons, wolf, furry, furry lifestyle, Finnish
furries, net.eccentric, RGRNCA, nethack, furry art, hukkateho">
<TITLE>Weyfour WWWWolf's Web of Weird Things</TITLE>
<STYLE TYPE="text/css"><!--
BODY {
margin: 2.5%;
background: #FFFFFF; color: #000000;
font-family: sans-serif;
border-width: 0;
}
H1 {
font-family: chalk, staccato 555, sans-serif;
color: #483d8b; /* DarkSlateBlue */
font-size: 200%;
}
A[href] IMG { border: none; }
-->
</STYLE>
</HEAD>
Tässä on muutamia tageja, joita ei käydä läpi tässä dokumentissa, ainakaan vielä: Linkki <LINK>-tagissa ja CSS-tyylimääritys <STYLE>-tagin avulla.
Sivun otsikko määrätään <TITLE>-tagilla, esimerkiksi näin:
<TITLE>Weyfour WWWWolf's Web of Weird Things</TITLE>
Sivun otsikosta ei kannata tehdä turhan pitkää tai turhan lyhyttä, ja sen kuuluu nimenomaan kuvata sivun sisältö lyhyesti ja ytimekkäästi. Yleensä riittää, kun otetaan ensimmäinen sivun iso otsikko, ja laitetaan se myös sivun otsikoksi.
Metatiedon lisääminen sivulle on usein kannattavaa, mutta usein taas ei.
Tagin syntaksi on seuraava: <META name="kentännimi" content="sisältö">.
Ainoa kenttä, mistä todistetusti on osoitettu olevan hyötyä, on Description. Tämän kentän sisältö näytetään usein hakukoneissa sivun kohdalla sivun sisältönäytteen sijaan. Esimerkissämme kenttä näytti seuraavalta:
<META NAME="description" CONTENT="WWWWolf's home page - Urpo Lankinen's
potentially uncool website, hacker's haven. A home page of the certain
lupine net.eccentric.">
Toinen mistä saattaa olla hyötyä on Keywords, joka sisältää hakusanat hakuja varten. Näitä ei kannata laittaa tuhottomasti, muuten hakukone saattaa kuvitella että väärinkäytät tätä. Pari riviä riittää useimmiten. Sanat erotetaan pilkuin ja sananvälein.
Dokumentin sisällössä on käytössä oikeastaan kahdenlaisia tageja: Alue-elementtejä eli blokkitageja (Block tag) ja tekstitason elementtejä eli tekstitageja (Inline tag). Näissä on se ero, että blokkitagit voivat sisältää tekstitageja, mutta tekstitagit eivät voi sisältää blokkitageja.
Blokkitagit, kuten mainittiin, merkkaavat isompia alueita. Tällaisia ovat mm. otsikot, tekstikappaleet, vaakaviivat sekä isommat lainaukset. Tekstitagit taas merkkaavat tekstiä tai kohtaa tekstissä; esim. lihavointi, hyperlinkki tai kuva. (Syy, miksi kuva on tekstitagi eikä blokkitagi on se, että kuva voi olla myös tekstin seassa.)
Otsikkotasot merkitään <Hx>-tagein. Pääotsikko merkitään tyypillisesti <H1>-tagilla, alaotsikot <H2>-tagilla ja ala-alaotsikot <H3>-tagilla, ja niin edelleen. Käytössä on 6 otsikkotasoa. Näissä lopputagi on aina pakollinen.
Esimerkki:
<H1>Huuhaan tila ja tulevaisuus</H1>
Pyri tekemään looginen tasorakennelma! Yleensä sivulle tulee vain yksi tason 1 otsikko, jonka sisältö kannattaa olla samansuuntainen kuin <TITLE>-tagilla on määritelty.
Lainauksia on kahta tyyppiä: Sitaattilainauksia, jotka merkitään Q-tagein, ja kappalelainauksia, jotka merkitään BLOCKQUOTE-tagein. Esimerkki:
<blockquote lang="en">
<p>It is by the fortune of God that, in this country, we have
three benefits: freedom of speech, freedom of thought, and the
wisdom never to use either.
<p>- Mark Twain
</blockquote>
Lyhyet lainaukset voidaan siis merkitä <Q>-tagein: Rex Reed sanoi, <q lang="en"> In Hollywood, if you don't have happiness, you send out for it.</Q> Huomaa: Q-tagin sisään ei tule lainausmerkkejä! Tätä kirjoitettaessa esim. Netscape 4.x ei laita Q-tagin ympärille lainausmerkkejä, mutta 6.x:n betaversio laittaa! Parempi jättää ne kokonaan pois sen sijaan että tulisi useammat lainausmerkit.
Huomaa näissäkin käytetyt LANG-attribuutit, jotka kertovat että lainaukset ovat englanniksi. Luonnollisestikin, jos lainaukset ovat samalla kielellä kuin itse dokumentti, tätä määrettä ei tarvita.
HTML ei tue varsinaisesti erilaisia tekstityyppejä, tai ainakin kiinteiden tekstityyppien käyttöä suositellaan välttämään. Seuraavassa muutamia esimerkkejä. Lienee selvää, että näissä kaikissa ovat lopputagit pakollisia.
Vahvennettu teksti merkitään <STRONG>-tageilla, ja korostettu teksti <EM>-tageilla. "Vahvennettu" yleensä tarkoittaa samaa kuin lihavointi, ja "korostettu" tarkoittaa yleensä kursivointia; tämä ei ole kuitenkaan kiveen nakutettua, ja ne voidaan sitäpaitsi muuttaa käyttäen CSS-määreitä. Yleisesti ottaen <EM> on se tagi, jota korostukseen käytetään.
Siteeraukset voidaan merkitä <CITE>-tagia käyttäen, mutta kannattaa harkita tarvitaanko erillistä korostusta.
On myös vielä tasalevyinen fontti. Sillä merkitään usein näppäimistönpainalluksia (<KBD>) tai ohjelmakoodia (<CODE>).
HTML:ssä on kolmenlaisia listoja: Numeroimattomia, numeroituja ja määritelmälistoja.
Kaksi ensimmäistä listatyyppiä ovat hyvin yksinkertaisesti määriteltyjä: Lista pannaan joko <UL>- tai <OL>-tagin sisään, ja listan kohdat merkitään <LI>-tagein (joiden lopputagi ei ole pakollinen). <UL> tekee numeroimattoman listan, <OL> numeroidun. Esimerkki:
<h2>Relatiivipronominit</h2>
<UL>
<LI>Tämä
<LI>Tuo
<LI>Se
<LI>Nämä
<LI>Nuo
<LI>Ne
</UL>
<h2 lang="en">Phases of a Project</h2>
<OL lang="en">
<LI>Exultation
<LI>Disenchantment
<LI>Confusion
<LI>Search for the Guilty
<LI>Punishment for the Innocent
<LI>Distinction for the Uninvolved
</OL>
Määritelmälistat tehdään lähes samalla tavalla - <DL>...</DL> listan ympärille, <DT> antaa termin ja <DD> antaa sen määrittelyn. <DT>:n ja <DD>:n lopputagit eivät ole taaskaan pakollisia. Esimerkki:
<DL>
<DT>Rekursio
<DD>Algoritmi, joka toimii
kutsumalla itseään. ks. Rekursio
<DT>Häntärekursio
<DD>Jos et ole kokonaan
kyllästynyt aiheeseen, ks. Häntärekursio.
</DL>
Hyperlinkit viittaavat toiselle sivulle tai sivun osaan.
Linkkien tekeminen on yksinkertaista. <A>- tagilla se sujuu niin, että HREF-attribuutilla sanotaan minne se johtaa. Esimerkki: <A HREF="http://www.iki.fi/wwwwolf/">WWWWolfin kotisivu</A> luo linkin, joka osoittaa kotisivulleni, ja joka sisältää tekstin "WWWWolfin kotisivu".
HREFinä voi käyttää joko suoria linkkejä, jolloin annetaan koko URL (osoite), tai suhteellisia linkkejä, jolloin sivun katsotaan olevan samassa paikassa. Esimerkiksi:
Linkki samassa hakemistossa olevaan tiedostoon nimeltä tiedosto.html
Linkki alihakemistossa hakemisto olevaan tiedostoon hubaa.html
Linkki alihakemiston hakemisto sisällysluettelona toimivaan tiedostoon (useimmiten nimellä index.html)
Linkki ylähakemiston sisällysluetteloon
Linkki tämän hakemiston sisällysluetteloon
Lienisi myös hyvä mainita pseudo-URL mailto, jonka avulla voidaan tehdä sähköpostilinkki: <A HREF="mailto:wwwwolf@iki.fi">Minulle saa lähettää postia</A>.
Rivinvaihdon pakottamista ei tarvita usein. Uusi kappalehan aloitetaan aina <P>-tagilla. Joskus sitäkin tarvitaan, ja silloin käytetään <BR>-tagia (break).
Tekstiin saa vaakaviivan käyttäen <HR>-tagia (Horizontal Rule). Näiden käyttöä kannatta hillitä. (Esimerkiksi tämän sivun tuottanut ohjelma käyttää niitä ilmiselvästi liikaa!)
Kummassakaan näissä ei saa olla lopputagia.
Kuvat lisätään käyttäen <IMG>-tagia.
Tämä tagi vaatii kaksi attribuuttia: SRC, joka kertoo kuvatiedoston osoitteen, ja ALT, joka kertoo tekstin, jonka ohjelma näyttää jos se ei voi näyttää kuvaa.
ALT on hyvin tärkeä, sillä hämmästyttävä määrä kävijöistä ei katso kuvia ollenkaan, joko omasta tahdosta tai laitteen rajoitusten takia. (Vast. Täm. Lehd. Konttoriin nimimerkille "Nokian Internet-kumisaapas")
Muita määreitä, joita kannattaa harkita laitettavaksi, ovat WIDTH ja HEIGHT. Nämä kertovat kuvan koon pikseleinä. Tämän ansiosta selain voi jättää kuvalle tilaa, ja jatkaa sivun piirtämistä, ilman että sen tarvitsee ladata ko. kuvaa palvelimelta. Tämä nopeuttaa usein sivun ilmestymistä ruudulle.
Tämä on tekstitason elementti, eli se pitää laittaa tekstin joukkoon. Näppärintä siis lienee, kuvan laittamiseksi tekstiin aloitetaan ensin uusi kappale <P>-tagilla. Esimerkki:
<p>
<img src="hauki.jpg" alt="[Kuva: Hauki vitriinissä]"
width=200 height=125>
<p>Täytetty Kalevalainen paholaisen jättiläishauki
turskan-kalastajien troolarin messissä.
Muutamia auttavia vihjeitä kuvien suhteen:
WIDTH- ja HEIGHT-attribuuteilla tulee kertoa kuvan oikea koko. Jos haluat pienentää kuvaa, tee se grafiikkaohjelmassa, älä HTML:llä. Syy? Kuvan latausaika ei muutu tippaakaan.
ALT-attribuutin sisältö kannattaa laittaa hakasulkuihin, ja mainita että kyseessä on kuva. Esim, "[Kuva: Kauhea Näky]"
No niin, nyt sitten varmasti on tullutkin jo aika vastata siihen kysymykseen, mikä varmaankin on jo ihmetyttänyt jonkin aikaa: Jos kerran tagit aloitetaan ja lopetetaan käyttäen väkäsiä, miten ne väkäset sitten kirjoitetaan?
Tässä ratkaisuna ovat ns. entiteetit. Entiteetit ovat yleensä muodossa &nimi;, eli &-merkki eteen ja puolipiste taakse. Seuraavassa listassa muutamia entiteettejä.
Ampersandi &
Väkäset <, >
Copyright-merkki ©
Skandinaviset erikoismerkit: å, ä, ö, Å, Ä, Ö
Lisäksi on mahdollista käyttää mitä hyvänsä Latin1-merkistön merkkiä käyttämällä merkkientiteettejä: &#xx; tuottaa merkin, jonka koodi on xx.