HTML-luntti

Yksinkertaista HTMLää yksinkertaisille ihmisille

Urpo Lankinen / Juhani Anttila

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 sijaitsee osoitteessa http://www.iki.fi/wwwwolf/things/techhelp/html-luntti.html . Tehdyt muutokset on lueteltu erillisessä luettelelossa. Ohjeesta on olemassa myös hieman tuoreempi, rankalla kädellä lyhennetty versio.


Sisällys

1 Johdanto
Yleistä
Mikä on HTML?
Mitä tarvitset?
2 Yleiskatsaus dokumentin rakenteeseen
Tageista ja attribuuteista
Dokumenttityyppi
Varsinainen dokumentti
3 HEAD-osa
Esimerkki
Sivun otsikko
Esimerkki metatietokentästä
4 BODY-osa
Otsikkotasot
Tekstikappaleet
Lainaukset
Tekstityypit
Listat
Hyperlinkit
Vaakaviiva ja rivinvaihto
Kuvat
Erikoismerkit

Luku 1 Johdanto

Yleistä

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.

Mikä on HTML?

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.

Mitä tarvitset?

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.


Luku 2 Yleiskatsaus dokumentin rakenteeseen

Tageista ja attribuuteista

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 /-merkillä: </p>. Joidenkin tagien (kuten <p>) lopputagi voidaan jättää pois; joillakin (kuten <img>, <hr> ja <br>) lopputagia ei edes saa olla. Lopputageja kannattaa käyttää aina silloin kun sitä ei ole kielletty, jotta monimutkaisetkin rakenteet näkyisivät kaikilla selaimilla (niissä on virheitä).

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: <p class="johdanto">. Lainausmerkkien käyttö ei ole aina pakollista, mutta sekaannusten välttämiseksi suositeltavaa.

Dokumenttityyppi

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.

Varsinainen dokumentti

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>

Luku 3 HEAD-osa

HEAD-osiossa esitellään dokumentista asioita, jotka eivät yleensä näy "paljaalla silmällä". Näitä ovat mm.

Esimerkki

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

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.

Esimerkki metatietokentästä

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.


Luku 4 BODY-osa

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

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.

Tekstikappaleet

Kuten mainittua, tekstikappaleet alkavat <p>-tagilla. Lopputagi ei ole pakollinen.

Lainaukset

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ä.

Tekstityypit

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.

Listat

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

Hyperlinkit viittaavat toiselle sivulle tai sivun osaan.

Linkkien tekeminen on yksinkertaista. Se sujuu <a>- tagilla, niin että href-attribuutilla sanotaan minne se johtaa. Esimerkiksi <a href="http://iki.fi/juhani/">Juhanin kotisivu</a> luo linkin, joka osoittaa kotisivulleni, ja joka sisältää tekstin "Juhanin kotisivu".

Atrribuutissa href voi käyttää joko suoria linkkejä, jolloin annetaan koko URL (osoite), tai suhteellisia linkkejä, jolloin sivun katsotaan olevan samassa paikassa. Esimerkkejä:

<a href="tiedosto.html">Toinen tiedosto</a>

Linkki samassa hakemistossa olevaan tiedostoon nimeltä tiedosto.html

<a href="hakemisto/hubaa.html">Hauskoja juttuja</a>

Linkki alihakemistossa hakemisto olevaan tiedostoon hubaa.html

<a href="hakemisto/">Mielenkiitoisia tiedostoja</a>

Linkki alihakemiston hakemisto sisällysluettelona toimivaan tiedostoon (useimmiten nimellä index.html)

<a href="../">Takaisin pääsivulle</a>

Linkki ylähakemiston sisällysluetteloon

<a href="./">Takaisin sisällysluetteloon</a>

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 <a href="mailto:juhani@iki.fi">juhani@iki.fi</a>.

Vaakaviiva ja rivinvaihto

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

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:

Erikoismerkit

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ä.

&amp;

Ampersandi &

&lt;, &gt; (less than, greater than)

Väkäset <, >

&copy;

Copyright-merkki ©

&nbsp; (no-break space)

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.