Verkkosivun tekeminen tekstieditorilla

Vaikka laajat, useita sivuja sisältävät verkkosivustot tehdään usein erillisellä verkkosivueditorilla tai jollain julkaisujärjestelmällä, sinun kannattaa aloittaa XHTML-sivujen tuottaminen aivan tavallisella tekstieditorilla. Se on myös erinomainen tapa opetella XHTML-kieltä.

Verkkosivun tekeminen tekstieditorilla eroaa esimerkiksi tekstinkäsittelyohjelmista siten, että sivu ei näytä editorissa muokattaessa samalta kuin selaimella esitettäessä. Näköisnäyttö- eli nk. WYSIWYG-periaatteeseen tottuneille tämä voi vaatia hieman totuttelua, mutta XHTML-koodin kanssa työskentelyyn oppii kuitenkin nopeasti.

Työskentelyn vaiheet pähkinänkuoressa

  1. Avaa jokin tekstieditori, esimerkiksi HY:n mikroverkosta löytyvä Crimson Editor (osaa esittää XHTML-merkkauksen muusta tekstistä eroavalla värillä), Notepad (Windows-koneissa) tai pico (Linux-koneissa).
  2. Luo itsellesi XHTML-sivupohja, joka sisältää XHTML-dokumentin perusrakenteen. Helpoiten pääset kopioimalla pohjan koodin aiemmin esitetystä esimerkistä.
  3. Tallenna tiedosto verkkolevyllesi tai kotisivuhakemistoosi nimellä index.html (verkkosivujen tiedostopääte on yleensä .htm tai .html). Jos yhdessä hakemistossa on useita sivuja, niistä index.html-sivu on yleensä määritelty palvelimella hakemiston etusivuksi.
  4. Kirjoita verkkosivulla näytettävä teksti body-elementin sisään ja muotoile sen rakennetta haluamiesi elementtien avulla. Älä tee sivuun tyylimuotoiluja, vaan tee kirjasinlaji- ym. valinnat tyylitiedoston kautta. Muista lisäksi luoda linkit kunkin sivun head-elementistä käsin css-tyylitiedostoosi.
  5. Tarkista, että tekemässäsi merkkauksessa on kullakin alkavalla tunnisteella myös lopputunniste (esimerkiksi </p>). Voit käyttää rivinvaihtoja tekstissä selventämään koodia, sillä verkkoselain ei välitä niistä lainkaan.
  6. Tallenna muutokset verkkosivuun ja avaa tekemäsi sivu selaimen tiedostovalikon kautta. Muokkaa sivua tarpeen tullen uudelleen ja katso tekemiäsi muutoksia painamalla selaimen Refresh (Päivitä) -painiketta.
  7. Kun sivu on mielestäsi valmis, suorita sille merkkauksen tarkistus eli validointi.

Verkkosivujen tuottamisessa käytettäviä sivueditoreja ovat mm. Nvu (ilmainen!) ja  DreamWeaver (maksullinen).