(X)HTML-dokumenttien tuottaminen

Periaatteessa (X)HTML-dokumentteja voi kirjoittaa melkein millä tahansa tekstieditorilla. Varsinaisia, eri ominaisuuksilla varustettuja editoreja verkkosivujen luomiseen ja hallintaan on kuitenkin kehitetty varsin mittava määrä. Usein ns. ammattikäyttöön soveltuviksi mainitaan Macromedian Dreamweaver ja Aboben GoLive.

Edellä esitellyt soveltuvatkin graafikkojen ja multimediasuunnittelijoiden yleistyövälineiksi, niiden sisältämien monipuolisten ominaisuuksien vuoksi.

Kyseisten editorien etuna on se, että ne mahdollistavat eri mediaelementtien ja niiden eri formaattien monipuolisen käsittelyn ja hallinnan. Kuitenkin nämä ns. WYSIWYG-editorit saattavat aiheuttaa monenlaisia ongelmia eri selaimilla ja kirjoitettaessa XHTML-dokumentteja. Useimmissa editoreissa on sisäänrakennettu validaattori, mutta se ei aina toimi niin kuin pitäisi.

Tuotetut sivut onkin hyvä käyttää jonkin ulkopuolisen validaattorin läpi (alla lista) ja tarkastaa, että ne on kirjoitettu rakenteellisesti oikein. Esimerkiksi nämä sivut on toteutettu noudattaen XHTML 1.0 transitionalia.

Monet uusimmat tekstinkäsittelyyn tarkoitetut ohjelmat osaavat muuttaa tuotetun dokumentin suoraan HTML-muotoon. Tosin tuotettu koodi ei välttämättä ole kovin hyvää. Lisäksi on tarjolla myös monia ohjelmia HTML-kielisen dokumentin muuttamiseen XHTML-kieliseksi.

WYSIWYG-editorit

Dreamweawer

Macromedian Dreamweawer MX2004 on ns. WYSIWYG-editori. Dreamweawer MX2004 on varsin helppokäyttöinen ja monipuolinen. Siinä on kolme erillistä sivujen muokkaustilaa. Pelkkä koodinäkymä, suunnittelunäkymä ja näiden yhdistelmä. Dreamweaverissa on myös sisäänrakennettu FTP-asiakas.

Helsingin yliopiston Dreamweaver MX-opetussivusto (huom. MX2004 sisältää paljon uudistuksia MX-versioon)

GoLive

Adobe GoLive CS on Adoben vastine Macromedian Dreamweaverille.

ilmaiset (X)HTML editorit

Mozillan sisäänrakennettu editori Composer (Ctrl + 4)

HTML - Kit on ilmainen, helppo ja varsin monipuolinen tekstieditori sivujen luomiseen.

TSW WebCoder

Emacs Windowsille

Xoonlogy Coda

Validaattorit

W3C:n validaattori W3C Markup Validation Service

Kotimainen LeHTori validaattori

Web Design Groupin validaattorilista WDG Kattava lista eri validaattoreista

Muita työkaluja

W3C:n Css validaattori CSS Validation Service

W3C:n (rikkinäisten) linkkien tarkistaja Link Checker

Lynx Viewer tarjoaa näkymän, siitä miltä sivusto näyttää tekstipohjaisella Lynx-selaimella

Writer2LaTeX on ohjelma, jolla voi muuttaa OpenOffice-dokumentin XHTML- tai LaTex muotoon. Ohjelma löytyy OpenOffice projektilistalta

HTML-tidy on ohjelma koodin siistimiseen esim. tekstinkäsittelyohjelmasta HTML-muotoon käännöksissä.

Watchfiren Bobby esteettömyyden tarkistukseen

Muutamia vinkkejä XHTML-dokumenttien laadintaan

Elementtien nimet aina pienellä esim.

Elementit on aina myös suljettava tyyliin aloittava tagi <p> tekstiä </p> lopettava tagi

Sisäkkäisten elementtien on oltava rakenteeltaan hyvinmuodostettuja

Linkkejä

Digitaalisen median tekniikat -kurssin materiaalit (Harri Laine, kevät 2004)

W3Schools HTML Tutorial ja XHTML Tutorial

HTML Dog on hyvä ja kattava opas HTML:n ja CSS:n saloihin. Ohjeet on jaoteltu eri taitotasoille.

ZenGarden - The Beauty of CSS Design

Verkkosivujen saavutettavuudesta

Verkkosivut jokaiselle sopiviksi - esteettömien Web-sivujen tekemisenopas (Tieke)

Käytettävyysasiantuntija Jakob Nielsenin kotisivut (artikkeleja, ohjeita ja suosituksia)

Web-saavutettavuuden 1-2-3 (W3C Suomen toimisto)

Essi - Esteetön sisällöntuotanto on erittäin kattava sivusto, jonka tuottamisessa on ollut mukana suuri tekijätiimi (Jyu)