Samuelin sivukurssi

Web-sivut on HTML-dokumentteja. Dokumentit koostuvat tekstistä ja HTML-kielen elementeistä. Elementtien avulla on mahdollista merkitä tekstin rakennetta - listoja, taulukoita jne. - sekä liittää sivulle linkkejä, kuvia tms. Elementtejä merkitään tageilla, jotka erotetaan muusta tekstistä <- ja >-merkein. Koska HTML-dokumentti sisältää pelkkää tekstiä, sitä voi muokata tavallisella tekstieditorilla. Web-sivujen tekoon on kehitetty myös erilaisia HTML-editoreita.

Joitain editoreita mainostetaan kirjainyhdistelmällä WYSIWYG (what you see is what you get). Ne piilottavat HTML-tagit käyttäjältä, jolloin tämän ei tarvitse osata itse HTML-kieltä. WYSIWYG-periaate ei kuitenkaan toimi HTML-kielen yhteydessä, sillä HTML-dokumentteja eli web-sivuja katsotaan eri selaimilla ja eri ympäristöissä, eikä sama sivu siksi näytä aina samalta. Näin ollen WYSINWOG - what you see is not what others get.

Jotkut tekstinkäsittely- ja julkaisuohjelmat tarjoavat myös mahdollisuuden tallentaa niillä tehdyt dokumentit HTML-muodossa. Tulos ei kuitenkaan yleensä ole käyttäjän tahtoma, sillä HTML-kieli on tarkoitettu sisällön merkitsemiseen eikä tekstinkäsittely- ja julkaisuohjelmissa käytettävä ulkoasun tarkka määrittäminen onnistu HTML-kielellä. Myös muun tyyppiset ohjelmat tarjoavat yhä useammin mahdollisuuden tallentaa tietoa HTML-muodossa. Yleensä tulos ei ole suoraan julkaisukelpoinen vaan vaatii käsin muokkausta.

Vähän tyhjää on vähän tyhjää

HTML-dokumentissa olevat välilyönnit ja rivinvaihdot tulkitaan vain tyhjäksi tilaksi, ja ne näkyvät niiden oikeasta lukumäärästä riippumatta yleensä vain yhtenä välilyöntinä, blankona. Toisaalta suoraan tagin perässä olevan välilyönnin ei pitäisi näkyä lainkaan. Täten vaikka joka sanan voi kirjoittaa omalle rivilleen tai vastaavasti koko dokumentin yhdelle riville. Selainohjelman ikkunassa teksti täyttää ikkunan laidasta laitaan ja siirtyy seuraavalle riville.

Seuraavassa XHTML-esimerkissä pätkä tekstiä on merkitty kappaleeksi p-elementillä (paragraph). Lisäksi tekstiin on merkitty rivinvaihto tiettyyn kohtaan br-elementillä:

<p>
Kuinka    monella
rivillä<br />
tämä
teksti
näkyy?</p>

Kyseinen XHTML-koodi näyttää selaimellasi tältä:

Esimerkissä P-tagin jälkeinen rivinvaihto ei aiheuta blankoa, mutta muut peräkkäiset välilyönnit sekä rivinvaihdot näkyvät aina vain yhtenä blankona, ja rivi jatkuu, kunnes se katkaistaan br-tagilla.

Monissa web-selaimissa ei ole tavutusta, vaan rivi vaihtuu kahden sanan välistä, välilyönnin kohdalta. Mikäli kahden sanan tahdotaan aina pysyvän samalla rivillä, voidaan niiden välissä käyttää välilyönnin sijaan "rikkoutumatonta väliä"   (non-breaking space). Esimerkiksi puhelinnumeron voi merkitä (09) 123 4567, jolloin sen pitäisi aina näkyä yhdellä rivillä: (09) 123 4567.

Tagit kannattaa kirjoittaa pienillä kirjaimilla (gemenoilla). XHTML:ssä pienten kirjainten käyttö on pakollista. Vanhemmissa HTML-versioissa tagit sai kirjoittaa myös isoilla kirjaimilla (VERSAALEILLA). Osoitteet ja tiedostonimet on yleensä kirjoitettava täsmälleen oikein. Esimerkiksi kuva.jpg ei ole sama kuin kuva.JPG - paitsi joillakin web-palvelimilla, joiden käyttöjärjestelmä ei tee eroa tiedostonimien pienten ja isojen kirjainten välillä.