Tämä on lyhennetty ja ajanmukaistettu versio HTML-luntista.
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.
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).
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
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:
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.
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.
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.
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>
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 http:// -alkuinen osoite (URL), 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
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ä.
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 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:
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]"
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 &
(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ä aina vierekkäin.
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>