Tästä ohjeesta on olemassa myös tuoreempi, rankalla kädellä lyhennetty versio, jossa on huomioitu HTML5.
Copyright © 2000 Urpo Lankinen / 2001 Juhani Anttila
Tässä dokumentissa on selitetty lyhyesti mutta toivottavasti selkeästi HTML-kielen perusteet. [Lisäys 14.11.2014: Dokumentissa kuvatut HTML:n perusteet pätevät edelleen, vaikka tässä mainittu HTML 4.01 on korvattu HTML5-määritelmällä 28.10.2014.]
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/).
Tämä on Juhani Anttilan muokkaama versio Urpo Lankisen mainiosta ohjeesta, joka sijaitsi aikanaan osoitteessa http://www.iki.fi/wwwwolf/things/techhelp/html-luntti.html . Tehdyt muutokset on lueteltu erillisessä luettelelossa.
Sisällys
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.
Tämän version tekijä on tavoitettavissa sähköpostin avulla (juhani@iki.fi).
Dokumentti on muokattu alkuperäisestä Wordpadilla.
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 kehitystä 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"). Wordpad on jo parempi. Sen rajoitukset tulevat vastaan laajempia sivukokonaisuuksia ylläpitäessä, eikä senkään korvaustoiminto osaa käsitellä useammalle riville jakautuvia tekstipätkiä.
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ällaisia ovat esimerkiksi W3C:n validaattori ja suomalainen LeHTori.
HTML rakentuu ns.
tageista, jotka ovat väkäsien väliin 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
Tietyntyyppisiä tageja voi kirjoittaa sisäkkäin. Silloin on tärkeää, että lopputagit ovat oikeassa järjestyksessä, tähän tapaan: <a><b><c></c></b></a>.
Attribuutit ovat määreitä, jotka lisätään tagin sisälle, muodossa attributti="arvo".
Esimerkki:
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 DTD:n, 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ä. 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.
<!doctype html public "-//W3C//DTD HTML 4.01//EN"> <html> ... </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> <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 dokumentin ulkoasun määrittelevään CSS-tyylitiedostoon, tekijän sähköpostiosoite, tms.)
Ns. metatieto sivusta (Kuvaus sivusta ja hakusanat hakukoneita varten jne.)
CSS-koodit, joilla muokataan ulkoasua
JavaScript-kieliset ohjelmanpätkät
Seuraavassa esimerkki sivun HEAD-osiosta. Tämä on otettu sivulta Valokuvien käsittely Photoshopilla.
<head> <title>Valokuvien käsittely Photoshopilla</title> <meta name="description" content="Yksinkertaiset säädöt, joilla kuvasta tehdään julkaisukelpoinen"> <link rel="stylesheet" href="valokuvat.css"> </head>
Esimerkissä on yksi tagi, jota ei käsitellä tässä dokumentissa tämän enempää - <link>. Se liittää dokumenttiin erillisen ulkoasua käsittelevän tyylitiedoston.
Sivun otsikko määrätään <title>-tagilla, esimerkiksi näin:
<title>Valokuvien käsittely Photoshopilla</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.
Tagin syntaksi on seuraava: <meta name="kentännimi" content="sisältö">.
Ainoa kenttä, mistä on todistetusti osoitettu olevan hyötyä, on Description. Tämän kentän sisältö näytetään joskus hakukoneissa sivun kohdalla sivun sisältönäytteen sijaan. Esimerkissämme kenttä näytti seuraavalta:
<meta name="description" content="Yksinkertaiset säädöt, joilla kuvasta tehdään julkaisukelpoinen">
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.
Metatageista on parhaimmillaankin hyötyä vain joskus, joten niiden tekemiseen menevä aika kannattaakin käyttää mieluummin sivuston sisällön parantamiseen.
Dokumentin sisällössä on käytössä oikeastaan kahdenlaisia tageja: lohkotason 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.
Kuten mainittua, tekstikappaleet alkavat <p>-tagilla. Lopputagi ei ole pakollinen.
Lainauksia on kahta tyyppiä: sitaattilainauksia, jotka voi merkitä <q>-tagein, ja kappalelainauksia, jotka merkitään <blockquote>-tagein. Esimerkki:
<blockquote> <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> <p>- Mark Twain</p> </blockquote>
Lyhyet lainaukset voidaan siis merkitä <q>-tagein:
Rex Reed sanoi, <q>In Hollywood, if you don't have happiness, you send out for it.</q>
Huomaa: <q>-tagin sisään ei kirjoiteta lainausmerkkejä, sillä (uudemmat) selaimet laittavat ne <q>-tagin ympärille automaattisesti. On siis parempi jättää ne kokonaan pois sen sijaan että tulisi useammat lainausmerkit! Jos haluaa pelata varman päälle, voi <q>-tagin jättää kokonaan pois ja käyttää sen tilalla lainausmerkkejä.
HTML ei tue varsinaisesti erilaisia tekstityyppejä, tai ainakin kiinteiden tekstityyppien käyttöä suositellaan välttämään. Seuraavassa muutamia esimerkkejä. Lopputagit ovat näissä kaikissa pakollisia.
Vahvennettu teksti merkitään <strong>-tageilla ja korostettu teksti <em>-tageilla. Vahvennettu teksti näkyy usein lihavoituna, ja korostettu teksti kursivoituna. Tämä ei ole kuitenkaan kiveen nakutettua, ja se voidaan muuttaa käyttäen CSS-määreitä. Yleisesti ottaen <strong>-korostus on "voimakkaampi" kuin <em>-korostus.
Näppäimistönpainallukset merkitään <kbd>-tageilla ja ohjelmakoodi <code>-tageilla. Nämä näkyvät usein tasalevyisellä fontilla.
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> <li>Tuo</li> <li>Se</li> <li>Nämä</li> <li>Nuo</li> <li>Ne</li> </ul> <h2>Phases of a Project</h2> <ol> <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 kokonaankyllästynyt aiheeseen, ks. Häntärekursio. </dl>
Hyperlinkit viittaavat toiselle sivulle tai sivun osaan.
Linkkien tekeminen on yksinkertaista. Se sujuu <a>- tagilla, niin että
href-attribuutilla sanotaan minne se johtaa. Esimerkiksi
Atrribuutissa href voi käyttää joko suoria linkkejä, jolloin annetaan koko URL (osoite), tai suhteellisia linkkejä, jolloin sivun katsotaan olevan samassa paikassa. Esimerkkejä:
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
Sähköpostilinkki tehdään käyttämällä pseudo-URLia mailto. Esimerkki:
Minulle voi lähettää meiliä osoitteeseen
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öä kannattaa hillitä.
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 kyseistä 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, että kuvan laittamiseksi tekstiin aloitetaan ensin uusi kappale <P>-tagilla. Esimerkki:
<p><img src="hauki.jpg" alt="[Kuva: Hauki vitriinissä]" width="200" height="125"><p> <p>Täytetty Kalevalainen paholaisen jättiläishauki turskan-kalastajien troolarin messissä.</p>
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. Esimerkki: alt="[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 ©
Sitova välilyönti, estää sen vieressä olevia sanoja jakaantumasta eri riveille
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.