Lähdekoodi sivulle HTML

'''HTML''' (''Hypertext Markup Language'', suomennettuna ''hypertekstin merkintäkieli'') on kuvauskieli, jolla voidaan rakentaa nettisivuja ja sitä kautta myös virtuaalitalleja. HTML:lla voidaan merkitä tekstin rakenne eli esimerkiksi mikä osa tekstistä on otsikkoa ja mikä leipätekstiä. Merkintä tehdään tekstin sekaan kirjoitettavilla elementeillä ja elementeissä olevilla määritteillä. HTML:lla voi muokata myös sivuston tyyliä ja värejä, joskin monet käyttävät [[CSS]]-kieltä html dokumenttien tyylien muokkaamiseen.

Katso myös [[XHTML]]!

==Merkintä==
HTML-kuvauskieli on kulmasulkeilla (< & >) erotettua, avainsanoihin perustuvaa tekstiä (malli: <code><avainsana></code>). Peruskomennoissa yleensä sama avainsana aloittaa, sekä kautta-merkillä aloitettuna (malli: <code></avainsana></code>), lopettaa lauseen. Esimerkiksi lihavointi saadaan avainsanalla <code>b</code>, merkkijono <code><</code>b<code>></code>lihavoidut sanat<code><</code>/b<code>></code> tuottaa tekstin '''lihavoidut sanat'''. Erikoismerkit ja koodit alkavat &-merkillä ja loppuvat puolipisteeseen. Esimerkiksi sitova välilyönti saadaan koodilla <code>&amp;nbsp;</code> ja &copy;-merkki koodilla <code>&amp;copy;</code>. Useammat välilyönnit korvautuvat yhdellä välilyönnillä ja rivinvaihdot eivät tarkoita mitään vaan on tuotettava omalla komennollaan.

HTML-dokumentteja voi kirjoittaa millä tahansa tekstieditorilla (esim- windowsin notepad), mutta tehtävään on tarjolla myös erityisiä HTML-editoreja. On myös olemassa WYSIWYG-editoreja (What You See is What You Get), joilla voi tehdä html sivuja koskemattakaan koodiin. Esimerkiksi [[Freewebs.com]] tarjoaa Easy puolellaan tällaisen editorin. Periaatteessa HTML-koodin tulisi aina läpäistä [[validointi]], mutta käytännössä monet selaimet hyväksyvät myös dokumentteja, joiden HTML-koodi ei ole standardin mukaista. 

===Elementit===
Elementit ovat HTML-merkkauskielen perusrakenne. Elementeissä on kaksi perusominaisuutta: attribuutit ja sisältö. Kullakin attribuutilla ja kullakin elementin sisällöllä on selviä rajotteita ollakseen kelvollisia HTML-dokumenteille. Elementillä on tavallisesti aloitustunniste (s.o. <elementin-nimi>) ja lopetustunniste (s.o. </elementin-nimi>. Elementtien atribuutit sijaitsevat aloitustunnisteessa (s.o. <elementin-nimi attribuutti="arvo">Sisältö</elementin-nimi>). Joillakin elementeillä, kuten <code><</code>br<code>></code>, ei ole yhtään sisältöä ja niillä ei tarvitse olla lopetustunnistetta (xhtml:ssä pitää olla).

'''Rakenteelliset''' merkkaukset kuvaavat tekstin tarkoitusta. Esimerkiksi <nowiki><h2>Golf</h2></nowiki> merkitsee "Golf" toisen asteen otsikoksi, joka näytetään selaimessa samanlaisella tavalla kuin "Merkintä" otsikko tämän osion alussa. Rakenteellinen merkkaus ei määrittele yhtään erityistä näyttötapaa, mutta suurin osa www-selaimista on stanradisoinut, kuinka elementit pitää muotoilla. Tekstejä voi muotoilla edelleen CSS:llä (Cascading Style Sheets).

'''Esitykselliset''' merkkaukset kuvaavat tekstin ulkonäön, mutta ei tarkoitusta. Esimerkiksi <nowiki><b>vahvennettu</b></nowiki> merkitsee, että se tulisi näyttää vahvennetulta, mutta ei anna tietoa, mitä sellaisen tulostuslaitteen tulisi tehdä, joka ei kykene tekemään tätä (esimerkiksi äänellinen tulostin voi puhua tekstin kovalla äänellä). Kummassakin tapauksessa <nowiki><b>vahvennettu</b></nowiki> ja <nowiki><i>kursiivi</i></nowiki> on elementtejä, joilla on samanlainen visuaalinen ulkoasu, mutta enemmän merkityksen eroja luonnollisessa kielessä. Samoin <nowiki><strong>vahva tunne</strong></nowiki> ja <nowiki><em>tunne</em></nowiki>. On helpompi nähdä, kuinka äänellinen käyttöliittymä tulkitsee nämä kaksi viimeistä elementtiä. 

'''Hypertekstin''' merkkaukset linkittävät osia dokumentista toisiin dokumentteihin. HTML tarvitsee ankkurielementin luodakseen hyperlinkin tekstivirrassa: <nowiki><a>Virtuaaliwiki</a></nowiki>. Href-attribuutti pitää myös asettaa kelvolliselle osoitteelle. Esimerkiksi HTML-koodi <nowiki><a href="http://www.virtuaalihevoset.net/wiki/">Virtuaaliwiki</a></nowiki>, näyttää sanan "Virtuaaliwiki" linkkinä. Kuvan linkityksessä ankkuritunniste käyttää seuraavaa muotoa: <nowiki><a href="url"><img src="image.gif" alt="alternative text" width="50" height="50"></a></nowiki>.

==Kuinka HTML:ää voi oppia?==
Monet harrastajat ovat opiskelleet HTML:n itsenäisesti. Hyvä tapa oppia on esimerkiksi katselemalla toisten virtuaalitallien lähdekoodeja ja muokkailemalla niitä. Myös erilaisten [[Ulkoasu|valmisulkoasujen]] käyttäminen ja omiin tarpeisiinsa muokkaaminen on hyvää harjoitusta. Kirjastoissa on varmasti jonkinlaisia HTML kirjoja, ja netistä löytää helposti ohjeita. Muilta harrastajilta kannattaa myös kysyä apua ongelmatilanteissa.

== Miksi ei HTML, vaan XHTML? ==

HTML 4.1 on vanha HTML-kieli, jota varsinkin vanhemmat virtuaalihevostelijat osaavat. Miksi sitten HTML:llää ei kannata enää käyttää, vaan nykyään suositukset kääntyvät XHTML 1.0 suuntaan?

HTML on hyvin vanhentunutta ja näkyy useilla selaimilla väärin, koska tageja ei päätellä, ne ovat isoilla kirjaimilla, eikä HTML ei ole standardisoitua. Valid XHTML näkyy suurimmalla osalla selainjoukosta oikein, koska se on kehitetetty XML:län pohjalle ja on standardisoitua, joten selaimet oli helppo koodata lukemaan sitä. Eroja kielissä ei ole kuin johdonmukaisuudessa ja joidenkin tagien nimissä. HTML:stä on julkaistu versio 5, joka tarjoaa paljon uusia toimintoja ja se parantaa myös tagien johdonmukaisuutta. HTML 5 ei toimi toistaiseksi kaikilla selaimilla täydellisesti.

Lue lisää [[XHTML]]:stä.

==Opi lisää==
*[http://www.menthal27.net/ Menthal 27] (Ohjeita HTML:n, XHTML:n ja CSS:n käyttöön)
*[http://tekke.freeserverhost.com/Gin/sukutaulukoodit.html Sukutaulujen html-koodeja]

==Lähteet==
[http://fi.wikipedia.org/w/index.php?title=HTML Wikipedia]


[[Luokka: Kotisivujen teko]]