Tämä on lyhennetty ja ajanmukaistettu versio HTML-luntista.


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.

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. Dokumentille voidaan voidaan määrätä ulkoasu Cascading Style Sheets -kielellä (CSS).


Tageista ja attribuuteista

HTML rakentuu ns. tageista, jotka ovat väkäsien väliin sijoitettuja lyhenteitä ja sanoja. Ne merkkaavat jonkin asian alkua tai loppua. Esimerkiksi <p>-tagi 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ä).

Tageja voi tietyissä tapauksissa 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.

Tagit muodostavat elementtejä

Mikä tahansa kahden tagin väliin jäävä pala muodostaa elementin.

Elementtejä on kahdenlaisia: lohkotason elementtejä ja tekstitason elementtejä. Näissä on se ero, että lohkotason elementit voivat sisältää tekstitason elementtejä, mutta tekstitason elementit eivät voi sisältää lohkotason elementtejä.

Lohkotason elementtejä ovat mm. otsikot (esim. h1), tekstikappaleet (p) ja isommat lainaukset (blockquote). Tekstitason elementtejä taas ovat mm. vahva korostus (strong), hyperlinkki (a) tai kuva (img). Kuva on tekstitason elementti koska se voi olla myös tekstin seassa.

Rivinvaihtojen merkitys HTML-koodissa

HTML-koodissa olevat rivinvaihdot vastaavat koodissa olevaa välilyöntiä. Samoin useampi peräkkäinen välilyönti tulkitaan yhdeksi välilyönniksi.

Tästä seuraa, että HTML-sivun koodin voisi halutessaan kirjoittaa vaikka kokonaan yhdelle riville. Vastavasti koodia voi sisentää ja jakaa eri riveille oman maun mukaan.


Tekstin korostus

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:ää. Yleisesti ottaen <strong>-korostus on "voimakkaampi" kuin <em>-korostus.

Listat

HTML:llä voi tehdä numeroimattomia ja numeroituja listoja. Lista pannaan joko <ul>- tai <ol>-tagien sisään, ja listan kohdat merkitään <li>-tagein. <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>
 <li>Disenchantment</li>
 <li>Confusion</li>
 <li>Search for the Guilty</li>
 <li>Punishment for the Innocent</li>
 <li>Distinction for the Uninvolved</li>
</ol>

Linkit

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 http:// -alkuinen osoite (URL), 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

On olemassa myös linkitystapa, jolla voi tehdä ns. sähköpostilinkin. Linkkiä klikkaamalla pääsisi siten kirjoittamaan sähköpostia. Sen käyttö ei kuitenkaan kannata, koska selaimelle on harvoin kerrottu, mitä sähköpostiohjelmaa surffaaja haluaisi käyttää. Niinpä linkin klikkaaminen aiheuttaa yleensä vain turhaa hämmennystä.

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

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.

Muita suositeltavia määreitä 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

On joitakin erikoismerkkejä, jotka ovat muodossa &nimi;, eli &-merkki eteen ja puolipiste taakse. Tästä syystä &-merkkiä ei voi käyttää sellaisenaan, ellei sen molemmilla puolilla ole tyhjää. Muuten selain yrittää tulkita merkkiä seuraavan osuuden joksikin erikoismerkiksi.

Jos &-merkki pitää pitää kirjoittaa sivulle - esimerkiksi linkkiosoitteeseen! - , se tehdään kirjoittamalla &amp;

&nbsp; (no-break space) on toinen tarpeellinen erikoismerkki. Se on sitova välilyönti, joka estää vieressä olevia sanoja jakaantumasta eri riveille. Esimerkki:

Tämän virkkeen kahdeksannen ja yhdeksännen 
sanan on pysyttävä&nbsp;aina vierekkäin.

Kommenttimerkit

Sivun koodista voi piilottaa osia laittamalla ne kommenttimerkkien <!-- ja --> väliin. Merkkien välissä oleva osuus ei näy sivulla. Kommenttimerkkejä ei saa olla useita sisäkkäin. Esimerkki:

<p>Kommenttimerkkejä ei saa olla useita 
sisäkkäin.<!-- Esimerkki:--></p>