Composer ja esteettömyys

Johdanto

Tässä kuvataan erään sivunteko-ohjelman, Mozilla- ja Netscape-selainten mukana tulevan Composerin, käyttöön liittyviä esteettömyyskysymyksiä. Tämä ei ole Composerin käyttöohje, joskin tämänkin perusteella voinee ohjelmaa oppia käyttämään. Ohjelmasta itsestään löytyy hyvä englanninkielinen ohje, ja lisäksi siitä on saatavilla jäljempänä kuvattavaa suomenkielistä aineistoa. Sen sijaan tässä tarkastellaan, mitä ongelmia ja mahdollisuuksia Composeriin sisältyy esteettömyyden kannalta, esimerkiksi miten kuville kirjoitetaan vaihtoehtotekstit ja sivulle saadaan looginen, suositusten mukainen rakenne.

Composer on valittu tarkasteltavaksi seuraavista syistä:

Composer on luonteeltaan melko tyypillinen sivunteko-ohjelma, jota voi käyttää sekä ns. wysiwyg-tilassa ("what you see is what you get", 'näet mitä saat') että suoraan HTML-koodia muokaten. Siksi tässä esiteltävät asiat sopivat periaatteiden osalta melko hyvin myös esimerkiksi FrontPage-ohjelmaan.
Composerissa on sekä esteettömyyttä tukevia piirteitä että joitakin ongelmia, jotka voidaan välttää sopivilla menettelytavoilla.
Composer on maksuton.
Composer on vanha ja vakiintunut ja laajasti käytetty ohjelma, joskin sen eri versioissa on jonkin verran eroja.
Composer tukee Unicodea ja siten monien eri kielten käyttöä sivuilla.
Composer on näistä syistä hyvin harkinnanarvoinen vaihtoehto niille, jotka ovat vasta valitsemassa sivuntekotyökalua. Silloin on hyvä alusta alkaen tuntea ne tavat, joilla esteettömyys otetaan huomioon Composeria käytettäessä.

Tämä esitys kuvaa ensisijaisesti Mozilla 1.4.1 Composeria. Erot esim. Netscape Composer 6:een ovat pieniä. Valikoiden ja painikkeiden ulkoasussa yms. on kuitenkin eroja. Eräät toiminnot eivät toimi Mozilla 1.5:ssä, joka ei tätä kirjoitettaessa (marraskuussa 2003) siis ilmeisesti ole vielä kovin valmis. Composer on Netscape Goldin seuraaja, ja suuri osa tässä esitettävästä koskee myös Goldin käyttöä

Tämä kuvaus sopii parhaiten luettavaksi Netscape- tai Mozilla-selaimella, jolloin voit käynnistää Composerin ja kokeilla sen käyttöä tämän dokumentin muokkaamisen. Kutakin käsiteltyä toimintoa kannattaa kokeilla saman tien, koska sillä tavoin saa parhaan tuntuman asiaan. Tällöin ei yleensä kannata tallentaa muutoksia. (Composer kysyy käyttöä lopetettaessa, halutaanko muutokset tallentaa.)

Composerin käytön perusteita

Composer on Mozilla-selaimeen liittyvä ohjelma, ja sen saa hankittua ja asennettua Mozillan yhteydessä automaattisesti. Mozillan saa sivustosta mozilla.org, jossa on pääsivulla suoraan linkit Mozillan versioihin eri käyttöympäristöjä varten. Asentaminen on helppoa, mutta ellet ole aiemmin asentanut ohjelmia, kannattaa ehkä pyytää apua joltakulta kokeneemmalta.

Composer vie suhteellisen paljon tietokoneen resursseja. Ennen sen käynnistämistä kannattaa siksi sulkea ne ohjelmat, joita ei tarvitse.

Kun Mozilla on käynnistetty, päästään Composeriin joko File-valikon kohdasta "Edit Page" tai yksinkertaisesti control-E:llä. Composer avautuu uuteen ikkunaan. Jos Mozillassa oli avoinna jokin sivu, niin Composer-ikkunaan tulee tällöin tämä sivu muokattavaksi.

Composerin ikkunan osat

Jäljempänä on esimerkkikuvia Composerin ikkunoista. Ikkuna jakautuu seuraaviin osiin ylhäältä alas lukien:

yläpalkki, jossa on sivun ulkoinen (title-elementillä asetettu) otsikko ja hakasulkeissa sivun osoite tai sen osa
kohdat File Edit ..., joista avautuu komentovalikkoja tavanomaiseen tapaan; näiden kautta voidaan hoitaa kaikki toiminnot Composerissa, mutta monille niistä on vaihtoehtoisia, usein näppärämpiä tapoja kuten työkalurivien käyttö
ensimmäinen työkalurivi New Open Save ...
toinen työkalurivi, jossa on ensimmäisenä pudotusvalikko, jossa on alkutilassa "Body Text"
käsiteltävän sivun esitys jossakin muodossa; tämä vie yleensä suurimman osan ikkunasta
painikkeet Normal, HTML Tags, <HTML> Source ja Preview, joista voi valita sivun esitysmuodon; joissakin Composerin versioissa nimen "<HTML> Source" tilalla on "Show All Tags"
alin rivi, jossa on erilaisia aiheeseemme liittymättömiä pieniä painikkeita mutta myös tieto siitä, millaisessa kohtaa sivua kursori on, merkkauksen mukaan jäsennettynä.

Työkalurivit siis tarjoavat oikoteitä erilaisiin toimintoihin, vaihtoehtona komentovalikoiden kautta kulkemiselle. Käyttäjä voi muokata työkalurivejä, ja yleensä niitä on hyväkin muokata jopa ihan alussa. Tällöin käyttöliittymästä saadaan selkeämpi ja vähennetään houkutusta käyttää eräitä toimintoja, joiden vaikutukset eivät ole esteettömyyden kannalta suotavia. Tätä muokkausta käsitellään jäljempänä erikseen.

Komentovalikoita voi käyttää paitsi hiiren avulla myös näppäimistöltä Alt-näppäimen avulla, kuten yleensä tämäntyyppisissä käyttöliittymissä. Esimerkiksi File-komentovalikon voi avata Alt-f:llä eli näpäyttämällä f-näppäintä siten, että Alt-näppäin on alas painettuna. Tämän merkiksi on File-sanassa F-kirjain alleviivattu. Tätä toimintatapaa kannattaa ainakin kokeilla, koska se usein nopeuttaa työskentelyä ja koska siten saa myös tuntumaa yhteen esteettömyyden kannalta tärkeään tietokoneen käyttötapaan ("hiirettömään käyttöön").

Tallennus

Kun sivua on muokattu Composerilla, se voidaan tallentaa joko oman koneen kovalevylle Save-painikkeella tai Web-palvelimeen Publish-painikkeella. Jälkimmäisessä tapauksessa on ensi kerralla ilmoitettava palvelimeen liittyviä tietoja, kuten FTP-tiedostonsiirron käyttäjätunnus ja salasana, jotka on normaalisti saatu palveluntarjoajalta sopimusta tehtäessä. Yleensä kannattaa ensin tallentaa sivu paikallisesti ja sitten palvelimeen. Työskentelyn aikana kannattaa aika ajoin napsauttaa Save-painiketta, jotta ei menisi kovin paljon työtä hukkaan, jos ohjelmaan tai koneeseen tulee toimintahäiriö.

Ohjeita

Composerissa on hyvä käyttöohje, johon pääsee Help-valikon kohdasta "Help Contents" tai suoraan näppäilyllä Alt-h h. Jos englannin kieli tuottaa vaikeuksia, voi apua olla suomenkielisistä ohjeista, joskin monet niistä ovat osittain vanhentuneita taikka johonkin erityiseen käyttöön ja ympäristöön suunnattuja. Muutamia vaihtoehtoja:

Netscape 6 - Composer. Havainnollinen esitys perustoiminnoista.
Miten teen WWW-sivuja Netscape Composer:lla. Toisentyylinen havainnollinen esitys.
Netscape Gold -editorin käyttö. Laaja, mutta kirjoitettu jo v. 1997 ja kuvaa Composerin varhaista edeltäjää.
Kotisivujen päivitys composerilla. Lyhyehkö, uudehko, selkeä.

Composerin toimintatilat

Normaalitila (Normal)

[Kuva otsikon lisäämisestä Composerin perustoimintatilassa.]

Kun Composer on käynnistetty, sen toimintatilana on "Normal", joka tarkoittaa niin sanottua wysiwyg-tilaa eli tekstinkäsittelyohjelman tyyppistä käyttöä. Tekstiin voidaan lisätä esimerkiksi toisen tason otsikko siten, että kirjoitetaan otsikon teksti, maalataan se hiirellä ja valitaan selaimen toisen työkalurivin alussa olevasta pudotusvalikosta vaihtoehto "Heading 2". Tällöin otsikon teksti muuttuu isommaksi tai yleisemmin sanottuna otsikkotyylin mukaiseksi.

Tällöin käyttäjän ei tarvitse tuntea HTML-merkkausta eikä esimerkiksi tietää, että hän itse asiassa tuli lisänneeksi h2-elementin. Tässäkin toimintatilassa voidaan siis monelta osin käyttää esteettömyyttä edistäviä rakenteita, kuten otsikoiden merkkaamista otsikoiksi eikä vain isokokoiseksi tekstiksi.

HTML Tags -tila

Toinen toimintatila on sellainen, että normaalin esityksen lisäksi näkyy tietoja sivulla olevista HTML-elementeistä. Tämä tila voidaan valita napsauttamalla ikkunassa alhaalla olevaa tekstiä "HTML Tags". Tällöin tulee näkyviin esimerkiksi koodi h2 keltaisella pohjalla ikään kuin tarrana, joka on liimattu elementin alkuun.

Tässä toimintatilassa havaitaan esimerkiksi sellainen tilanne kuin edellisessä kuvassa. Siinä on merkattu strong-elementiksi teksti, joka on luonteeltaan otsikko. Olisi hyvä korjata tällainen rakenne niin, että kyseinen teksti edellä kuvatulla tavalla määritellään 3. tason otsikoksi (h3).

[Ote sivusta, jossa on napsautettu "tarraa".]

Tässä tilassa "tarrat" kertovat kunkin elementin alun, mutta elementin loppu jää osoittamatta. Kuitenkin jos napsauttaa "tarraa", niin Composer näyttää elementin esittämällä sen käänteisin värein (valkeaa tummalla). Tällä tavoin siis saa näkyviin, mihin asti elementti ulottuu. Oheisessa esimerkissä on näin saatu näkyviin, että i-elementti, jossa on sana "Marsupialia", on h2-elementin sisällä. Lisäksi napsauttamalla "tarraa" kahdesti saa näkyviin elementin määritteet, ja niitä voi sitten muuttaa.

Tässä tilassa ei kuitenkaan nähdä aivan kaikkia elementtejä. Erityisesti br-elementit (<br>), joita Composer lisäilee joskus yllättävästikin, eivät tule näkyviin. Ne aiheuttavat pakotettuja rivinvaihtoja, mutta yleensä Composer itse lisää niitä vain tilanteissa, joissa haittana on enintään ylimääräinen tyhjä tila (tyhjä rivi).

Muut tilat

Kolmas perustila on HTML Source, jossa näkyy sivun HTML-merkkaus sellaisenaan. Sitä tarvitaan joissakin tilanteissa esimerkiksi määritteiden lisäämiseen. Seuraavassa käsitellään tätä puolta vasta, kun on käyty läpi sellaisia perustoimintoja, joita voi käyttää muilla tavoin.

Lisäksi on Preview-toiminto, joka näyttää sivun sellaisena, kuin se näkyy Mozillan normaalissa näytössä. Tämä saattaa jonkin verran poiketa Composerin Normal-tilasta.

Toiminta-asetusten säätäminen

Composerin toiminnoista osa edistää esteettömyyttä, mutta monet ovat suorastaan vaarallisia, ja tämä koskee myös useita työkaluvalikossa olevia toimintoja. Niitä ovat ennen muuta fyysiseen merkkaukseen vaikuttavat toiminnot, joille on järkevää käyttöä vain harvoin, ja silloin ne voi tehdä komentovalikoiden kautta. Jos ne ovat näkyvissä, niitä tulee liian helposti käytetyksi.

Työkaluvalikkoa kannattaa siis muokata. Samalla voidaan tarkistaa muutkin toiminta-asetukset. Etenkin jos asiantuntija asentaa Composerin ns. tavallisen käyttäjän koneeseen, on syytä tehdä näin, mutta tarkistukset ja muutokset on melko helppo tehdä itsekin.

Valitaan Edit-valikosta Preferences-kohta, jolloin avautuu erillinen ikkuna. Näin päästään Mozillan yleisiin toiminta-asetuksiin, tarkemmin sanoen niiden Composer-osaan. Siinä on kolme alaosaa, jotka valitaan napsauttamalla ikkunassa vasemmalla olevan Category-listan kohtaa:

Composer-osassa kannattaa tarkistaa, että on valittuna kohta "Use CSS styles instead of HTML elements and attributes". Tällöin Composerin tuottama koodi on periaatteessa parempaa, joskin sen tuottama CSS-koodi on vain ns. inline-koodia eli suoraan elementteihin liittyvissä style-määritteissä. (Suositeltavampi tapa on kirjoittaa CSS-koodi erilliseen tiedostoon.)
New Page Settings -osassa voi asettaa tekijän nimen sekä sivun värit ja taustakuvan. Mikään näistä ei ole välttämätön. Värit ja taustakuva on parempi asettaa erillisessä CSS-tiedostossa. Joka tapauksessa jos niitä asettaa, on muistettava riittävä kontrasti tekstien ja taustojen välillä.
Toolbars-osassa voi valita, mitkä toiminnot ovat mukana työkaluriveillä. Seuraava kuva esittää tässä suositeltavia asetuksia. Pois on jätetty ne toiminnot, jotka vastaavat fyysistä merkkausta. Print-painike on jätetty pois, koska kokemusten mukaan se aiheuttaa usein turhia tulostuksia. Toisaalta on otettu mukaan toiminto, jolla lisätään sivulle ankkuri eli linkin mahdollinen kohde. Esimerkiksi otsikoiden tekstit on yleensä hyvä määritellä ankkureiksi, jotta niitä vastaaviin kohtiin voi suoraan viitata muilta sivuilta.

(Kaikissa Composerin verioissa ei ole kaikkia näitä kohtia.)

[Composerin suositellut työkalupainikkeiden asetukset]

Tällöin työkalupalkki on seuraavanlainen. Kuvasta näkyy myös esimerkki vihjetekstistä, joka tulee näkyviin, kun kursori viedään painikkeen päälle.

Valitettavasti työkalupalkkeja ei voi kaikilta osin muokata, vaan mukana on kyseenalaisia toimintoja, eikä painikkeiksi toisaalta voi lisätä haluamiaan toimintoja. Mutta kokonaisuutena valikoima on melko käyttökelpoinen. Ylemmän rivin painikkeiden merkitykset ovat seuraavat:

New: aloita uuden sivun tekeminen.
Open: avaa paikallinen (oman koneen levyllä oleva) sivu muokattavaksi.
Save: tallenna sivu paikallisesti.
Publish: tallenna sivu Web-palvelimeen.
Browse: avaa sivu Mozillaan.
Link: lisää linkki tai muuta maalattu teksti linkiksi.
Anchor: lisää ankkuri tai muuta maalattu teksti ankkuriksi.
Image: lisää kuva.
Table: lisää taulukko.
Spell: tarkista sivun tai maalatun alueen (englanninkielisen) tekstin oikeinkirjoitus.

Alemman rivin osat ovat vasemmalta oikealle seuraavat:

Pudotusvalikko, josta valitaan elementin perusrakenne, esimerkiksi kappale (paragraph) tai otsikko.
Mustan ja valkean neliön muodostama painike, joka avaa värinvalintaikkunan. Tätä voi käyttää tekstin värin muuttamiseen, mutta suositeltavampaa olisi tehdä värinmuutos erillisen CSS-tiedoston ja tarvittaessa lisämerkkauksen avulla.
Korostuskynää esittävä painike, jolla voi vastaavasti asettaa tekstille taustavärin ("highlight color").
Painike, jolla aloitetaan numeroimaton luetelma, kuten sen ulkoasu kertonee.
Painike, jolla aloitetaan numeroitu luetelma.
Painike, jolla pienennetään tekstin sisennystä eli siirretään tekstiä vasemmalle.
Painike, jolla lisätään tekstin sisennystä 40 pikseliä. Periaatteessa sisennykset olisi parempi tehdä erillisen CSS-tiedoston avulla ja em-yksikköä käyttäen.
Painike, jolla tasataan teksti vasempaan reunaan (oletusarvo).
Painike, jolla keskitetään teksti vaakasuunnassa (keskittämällä tekstin kukin rivi erikseen).
Painike, jolla tasataan teksti oikeaan reunaan. Sopii joskus esim. ingresseihin.
Painike, jolla tasataan teksti molemmista reunoista. Tätä ns. justify-toimintoa on syytä välttää mm. siksi, että selaimet eivät tavuta sanoja, jolloin syntyy helposti häiritsevän isoja sananvälejä varsinkin kapeassa selainikkunassa.

Esteettömät perusrakenteet

Composeria voidaan enimmäkseen käyttää Normal-tilassa tekstinkäsittelyohjelman tapaan. Tällöin on syytä olla painamatta Enter-näppäintä turhaan. Enter-näppäimellä lopetetaan erilaisia rakenteita, esimerkiksi listan kohta. Sen käyttö normaalin tekstin joukossa aiheuttaa pakotetun rivinvaihdon sivun esitykseen, ja tästä seuraa usein ongelmia.

Sivun ulkoinen otsikko

Kun uutta sivua yritetään ensi kerran tallentaa, Composer kysyy sivulle ulkoisen otsikon eli title-elementin, ellei sitä ole jo kirjoitettu. Tämä on erittäin tärkeä elementti myös esteettömyyden kannalta, vaikka se ei useimmissa selaimissa näykään sivun osana. Sen sijaan se näkyy usein selaimen yläpalkissa, hakupalveluiden antamissa hakutuloksissa ym.

Ulkoisen otsikon voi kuitenkin kirjoittaa jo aiemmin, ja tämä on ehkä hyväkin tehdä. Ulkoinen otsikko kannattaa yleensä miettiä samalla kuin sivun näkyvä pääotsikko. Niiden teksti voi olla samakin. Ulkoinen otsikko voidaan lisätä Format-komentovalikon kohdan "Page Title and Properties" kautta. Sen kautta voidaan myös muuttaa ulkoista otsikkoa.

Vaikka title-elementille on varattu tilaa näennäisesti melko vähän, se voi olla pitempikin. Laatikkoon voi kyllä kirjoittaa enemmän, kuin kerralla mahtuu näkyviin. Tekstin olisi kuitenkin hyvä olla lyhyehkö, noin 70 merkkiä. Tärkeintä on, että teksti kuvaa sivun sisällön tavalla, joka on helppo ymmärtää, mieluiten missä tahansa asiayhteydessä esitettynä.

Tekijän nimi (Author) näkyy esitäytettynä, jos se on asetettu Composerin yleisissä asetuksissa. Tästä syntyy itse asiassa meta-elementti, josta ei ole suurtakaan hyötyä, jos ei haittaakaan. Olennaista on, että se ei tule näkyviin osaksi itse sivua, vaan tekijän nimi on syytä kirjoittaa sivulle erikseen. Myös Description-kohtaan kirjoitetusta tekstistä tulee meta-elementti, jonka käytännön merkitys on vähäinen. Siihen voi halutessaan kirjoittaa lyhyen, hakujärjestelmille tarkoitetun kuvauksen sivun (ei sivuston!) sisällöstä.

Otsikot ja kappaleet

Otsikko voidaan kirjoittaa siten, että oltaessa uuden rivin alussa valitaan toisen työkalurivin pudotusvalikosta haluttu otsikkotaso, kirjoitetaan otsikon teksti ja painetaan Enteriä.

Otsikon jälkeen aloitetaan yleensä kappale, ja tätä varten valitaan pudotusvalikosta Paragraph. Muuten nimittäin teksti jää ikään kuin irralliseksi, kappaleiden ulkopuolelle.

Sama koskee myös tekstin jatkamista listan, taulukon tms. jälkeen: se on syytä erikseen merkata kappaleeksi. Sen, että kaikki kappaleet on merkattu, voi tarkistaa siirtymään HTML Tags -tilaan. Tällöin kunkin kappaleen alussa näkyy P-kirjain keltaisessa laatikossa.

Kun on kirjoitettu kappale, voidaan aloittaa uusi kappale painamalla Enter-näppäintä kahdesti. Jos sitä painetaan vain kerran, Composer kirjoittaa sivulle niin sanotun pakollisen rivinvaihdon, joka on aivan eri asia kuin kappale. Tekstinkäsittelyohjelmiin tottuneiden pitää siis tässä asiassa opetella uusi tapa.

Jos sivuja muokattaessa huomataan, että jotain otsikoksi tarkoitettua ei ole merkattu otsikoksi, voidaan maalata kyseinen teksti ja sitten valita pudotusvalikosta sopiva otsikkotaso. Samalla tavalla voi korjata tekstiä muutenkin. Esimerkiksi yksinkertainen pelkkää tekstiä sisältävä tiedosto voidaan tällä tavoin muokata HTML-dokumentiksi.

Pudotusvalikossa on muitakin vaihtoehtoja. Composerin ohjeet käyttävät sekavaa käsitteistöä, koska ne käyttävät sanaa "paragraph" tarkoittamassa sekä kappaletta HTML-mielessä (p-elementtinä) että yleiskäsitteenä, joka kattaa myös valikon muut vaihtoehdot:

Body Text: "alaston" teksti, jota ei ole merkattu millään tavalla. Tämä on sallittua mutta ei suotavaa (eikä sallittua HTML:n ankarassa versiossa, HTML Strict).
Paragraph: kappale sanan varsinaisessa merkityksessä.
Heading 1, ..., Heading 6: eri otsikkotasot ylimmän tason otsikoista alempiin. Niitä tulisi käyttää sivun osien eritasoisten otsikoiden merkkaamiseen.
Address: tekstilohko, jossa on sivun tekijän osoitetietoja.
Preformat: valmiiksi muotoiltu teksti, joka olisi esitettävä aivan sellaisenaan, rivijako tarkoin säilyttäen. Tätä on syytä välttää. Erityisesti jos kyse on taulukoiduista tiedoista, tulisi käyttää taulukkorakennetta (Table-toiminto).

Tällainen toiminto kohdistuu tekstin lohkoon eli osaan, joka alkaa uudelta riviltä ja jota seuraa rivinvaihto. Jos siis halutaan esimerkiksi erottaa kappaleen alussa oleva teksti otsikoksi, mennään ensin kyseisen tekstin loppuun ja painetaan Enteriä. Sen jälkeen voidaan muuttaa teksti otsikoksi ja tarkistaa, että sitä seuraava teksti on merkattu kappaleeksi.

Listat

Tavallisia listoja (numeroimattomia ja numeroituja) voi lisätä edellä mainituilla työkalurivin painikkeilla. Listan kohta lopetetaan painamalla Enteriä. Koko lista lopetetaan painamalla Enteriä vielä uudestaan.

Määritelmälistan (definition list) voi lisätä Format-komentovalikon List-kohdan kautta. Sen kautta voi myös muuttaa listojen ominaisuuksia, esimerkiksi numerointitapaa.

Insert-valikko ja sisällysluettelo

Insert-komentovalikon kautta voi lisätä sivulle

vaakaviivan erottimeksi (Horizontal Line, hr-elementti)
erikoismerkkejä (Characters and Symbols, esim. ĝ ja ®)
sisällysluettelon (Table of Contents), jonka Composer tuottaa automaattisesti ja joka voidaan myös muutosten jälkeen päivittää automaattisesti tämän kohdan kautta
ns. kellutuksen lopetuksen (Break Below Image(s), <br clear="all">).

Sivun alussa oleva sivun sisällysluettelo auttaa usein suuresti lukijaa hahmottamaan sivun sisällön. Lisäksi se toimii kätevänä tapana siirtyä suoraan haluttuun kohtaan, koska luettelon kohdat ovat samalla linkkejä. Kun käytetään sisällysluettelon lisäämisen toimintoa (insert - Table of Contents), Composer käy läpi kaikki sivun otsikkoelementit ja rakentaa niistä sisällysluettelon siihen kohtaan, jossa sillä hetkellä ollaan. Sopiva paikka on yleensä pääotsikon tai ingressin jälkeen. Jos halutaan jättää sisällysluettelosta pois joitakin otsikkotasoja (esimerkiksi 1. tason otsikko ei siihen yleensä kuulu), valitaan pudotusvalikosta otsikkotason osalta vaihtoehto "--".

Sisällysluettelon teossa on kuitenkin eräitä ongelmia. Ensinnäkin se tuottaa otsikoita vastaaville ns. ankkureille hankalannäköiset nimet kuten mozTocId674632, jolloin niihin viittaavat URLit ovat ikäviä kirjoittaa, kun halutaan viitata sivun kohtiin sivun ulkopuolelta. Toiseksi sisällysluettelon päivitystoiminto (Insert - Table of Contents - Update) ei tunnu toimivan vaan sekoittaa sivun pahasti. Tämä ratkeaa sillä, että päivitystoiminnon asemesta poistetaan sisällysluettelo ja lisätään uusi. Vielä on ongelmana se, että toiminto tekee sivun ensimmäisestä mukaan otettavasta otsikosta sisällysluettelon ylimmän tason kohdan. Tämä täytyy korjata erikseen HTML-tilassa.

Linkit

Linkin tekemiseksi voidaan maalata se osa tekstistä, joka halutaan linkiksi, ja napsauttaa työkalurivin Link-painiketta. Tällöin avautuu Link Properties -ikkuna, jossa voidaan ilmoittaa linkin kohteen osoite (URL) ja napsauttaa OK-painiketta. Muuta ei välttämättä tarvitse tehdä.

Linkkien tekemiseen Composerilla ei juurikaan liity erityisiä esteettömyysongelmia tai -tekniikoita. Kuitenkin voidaan esteettömyyttä periaatteessa parantaa linkkielementin (a-elementin) osalta title-määritteellä. Lisäksi jos linkkiteksti tai linkin kohde on eri kieltä kuin sivu, jolla linkki on, voi kyseiseen elementtiin liittää lang- tai hreflang-määritteen. Jos määritteitä halutaan lisätä, voidaan Link Properties -ikkunassa napsauttaa painiketta Advanced Edit.

Käytännössä tärkeää on, linkkien tekemisen tekniikasta riippumatta, että linkkiteksti kuvaa linkin kohteen sisältöä. Usein onkin parempi kirjoittaa teksti normaalisti, ajattelematta linkkejä, ja sitten miettiä, mikä osa tekstistä olisi luonnollista valita linkin tekstiksi.

Tekstitason merkkaus

Format-komentovalikosta voi lisätä sivulle merkkausta esimerkiksi sanojen korostamiseksi. Ensin maalataan sana tai sanat hiirellä, sitten valitaan haluttu merkkaus joko valikkokomennolla tai näppäinoikotietä käyttäen. Toinen vaihtoehto on se, että ensin annetaan haluttu komento ja sitten kirjoitetaan teksti, mutta tällöin on merkattavan tekstin kirjoittaminen lopetettava control-shift-y:llä (siis painamalla control-näppäin ja sen yläpuolella oleva shift-näppäin alas ja näpäyttämällä y-näppäintä). Jos siis esimerkiksi haluttaisiin kirjoittaa sana "kissa" tärkeäksi merkattuna (näyttää tältä: kissa), voidaan toimia kahdella vaihtoehtoisella tavalla:

kirjoitetaan itse tekstiosuus valmiiksi ja sitten maalataan hiirellä kissa-sana ja sen jälkeen näppäillään Alt-o se (taulukossa esitetty lyhyemmin Alt-o se, tarkoittaa seuraavaa: painetaan Alt-näppäin alas, näpäytetään o-näppäintä, päästetään Alt-näppäin ylös ja näpäytetään s-näppäintä ja lopuksi e-näppäintä)
näppäillään Alt-o se kissa control-shift-y (missä siis control-shift-y tarkoittaa merkkauksen lopettamista, ja se vastaakin valikkokomentoa Format - Discontinue Text Styles).

Seuraavassa taulukossa on esitetty tärkeimmät elementit, jotka näin voi lisätä, ja niiden näppäinoikotiet. Järjestys on tässä HTML-elementtien nimien mukainen, mutta tätä varten ei välttämättä tarvitse tuntea HTML:ää, vaan riittää käyttää elementtejä tässä kuvatuissa merkityksissä.

Eräiden elementtien lisäämisen menetelmiä
elementti	merkitys	näppäinoikotie	valikkokomento
cite	teoksen tms. nimi	Alt-o sc	Format - Text Style - Citation
code	tietokonekoodi	Alt-o so	Format - Text Style - Code
em	korostus, painotus	Alt-o se	Format - Text Style - Emphasis
i	kursivointi	control-i	Format - Text Style - Italic
strong	voimakas korostus	Alt-o st	Format - Text Style - Stronger Emphasis
subscript	alaindeksi	Alt-o ss	Format - Text Style - Subscript
superscript	yläindeksi	Alt-o sp	Format - Text Style - Superscript

Myös fonttilaji voidaan asettaa Format-komentovalikon kautta, sen Font-kohdasta. Periaatteessa suositeltavampaa on kuitenkin merkata haluttu alue <span>-merkkauksella (tekstikappaleen tms. sisällä oleva teksti) tai <div>-merkkauksella (laajempi kokonaisuus, joka koostuu yhdestä tai useammasta kappaleesta tai muusta rakenteesta), liittää siihen class-määrite ja sitten erillisessä CSS-tiedostossa asettaa halutut ominaisuudet. Esteettömyyden kannalta tällä ei kuitenkaan ole kovin suurta merkitystä, ja nämä menettelyt vaativat HTML-tilan käyttöä.

Sen sijaan on olennaista, että fontin kokoa ei aseteta ajattelemattomasti. Edellä neuvottiin poistamaan työkaluvalikosta painikkeet, joilla fonttia pienennetään tai suurennetaan. Ne ovat kyllä sinänsä melko vaarattomia, koska ne tekevät saman kuin Format-valikon Font Size -kohdasta löytyvät valinnat Smaller ja Larger. Merkkauksen tasolla ne lisäävät <small>- tai <big>-elementin. Mutta fontin suurentamisen asemesta on useimmiten paras käyttää otsikoita, ja pienentäminen taas on yleensä parempi tehdä CSS:llä prosentuaalisena koon muuttamisena. Esteettömyyden kannalta on myönteistä, että Composerissa ei ole mitään, mikä houkuttelisi asettamaan fonttikoon fyysisinä yksiköinä kuten pisteinä tai pikseleinä.

Kuvat

Kuva voidaan lisätä sivulle napsauttamalla ensin haluttua lisäyskohtaa ja sitten työkalupalkin Image-painiketta. Tällöin avautuu Image Properties -ikkuna, jossa ilmoitetaan kuvatiedosto (jonka voi hakea levyltä Choose File -painikkeen avulla) ja kirjoitetaan kuvalle vaihtoehtoteksti (Alternate text, alt-määrite). Vaihtoehtoteksti kirjoitetaan sellaisenaan, ilman lainausmerkkejä. Kuvalle voi kirjoittaa myös kuvauksen eli ns. Tooltip-tekstin, title-määritteen, joka saattaa tulla näkyviin, kun osoitin viedään kuvan päälle.

Composer huomauttaa, jos yrität jättää vaihtoehtotekstin tyhjäksi. Pääset jatkamaan vain joko kirjoittamalla vaihtoehtotekstin tai valitsemalla kohdan "Don't use alternate text", jolloin Composer itse asiassa tuottaa tyhjän vaihtoehtotekstin (alt=""). Tämä on siis hiukan epäloogista, mutta käytännössä aika toimivaa.

Composer liittää kuvaelementtiin automaattisesti korkeus- ja leveysmääritteet, joista on etua hitailla verkkoyhteyksillä. Niihin ei siis yleensä kannata koskea, paitsi ehkä silloin, kun kuvan vaihtoehtoteksti on pitkä kuvan kokoon verrattuna. Silloin on riski, että teksti tulee näkyviin vain osittain, koska se ei mahdu kuvaa vastaavan tilaan. Tällöin voi harkita sitä, että poistaa width- ja height-määritteen eli tyhjentää kyseiset kentät Appearance-kohdan kautta.

Kuvaa lisättäessä voi määrätä myös kuvan suhteen tekstiin, tai oikeammin sanoen tekstin suhde kuvaan. Tämäkin tapahtuu Apperance-kohdan kautta. Erikoista on, että siellä määrätään, miten teksti kulkee suhteessa kuvaan eikä toisinpäin kuten HTML:ssä ja CSS:ssä ajatellaan. Täten kohdassa "Align Text to Image" arvo "Wrap to the left" vastaa sitä, että kuvaan liitetään HTML-määrite align="right" tai CSS-ominaisuus float: right.

Taulukot

Taulukko voidaan lisätä seuraavasti. Aluksi napsautetaan kohtaa, johon taulukko halutaan. Sitten napsautetaan työkalurivin Table-painiketta, jolloin avautuu Insert Table -ikkuna. Siinä on syytä yleensä tyhjentää Width-kohta, koska tällöin taulukon leveys parhaiten mukautuu kulloinkin käytettävissä olevaan tilaan eikä toisaalta vie tarpeettomasti leveyttä. Erityisesti on syytä välttää pikselimääräisen leveyden asettamista, mutta myös prosenttimääräinen on yleensä tarpeeton. Pudotusvalikossa ei ole vaihtoehtoa, joka ilmoittaisi, että leveyttä ei aseteta, mutta saman asian ajaa se, että sen edessä olevasta tekstikentästä poistetaan merkit (eli siinä alkutilassa oleva 100).

Rows- ja Columns-kohtiin voi kirjoittaa rivien ja sarakkeiden lukumäärän, joiden oletusarvot ovat vain 2 ja 2. Niitä ei kuitenkaan tarvitse tässä vaiheessa miettiä, sillä rivien ja sarakkeiden määriä voi muuttaa myöhemmin.

Insert Table -ikkunan Painikkeesta "Advanced Edit" päästään haluttaessa muuttamaan taulukon yleisiä määritteitä. Usein halutaan asettaa cellspacing-kohtaan 0, koska muuten solut ovat ikäänkuin irti toisistaan eli niiden välissä hiukan tyhjää tilaa. Näissä Advanced Edit -asetuksissa voidaan myös lisätä taulukolle summary-määrite, jota esteettömyysohjeissa suositellaan. Määritteen arvoksi kirjoitetaan taulukon yleisen rakenteen lyhyt kuvaus. Hyvä nyrkkisääntö on: ennen taulukkoa kuvataan tavallisessa tekstissä ne asiat taulukosta, jotka kaikkien on hyvä tietää, kun taas summary-määrite sopii sellaiselle olennaiselle lisätiedolle, joka on näkeville ihmisille selvää, kun he vilkaisevat taulukkoa kokonaisuutena. Valitettavasti summary-määrite joudutaan kirjoittamaan pienehköön syöttökenttään, josta näkyy kerrallaan vain osa siitä. Tosin ylempänä määritteiden luettelossa näkyy sen alkuosaa.

Taulukon ominaisuuksia, esimerkiksi reunaviivojen paksuutta, voi muuttaa seuraavasti: Napsautetaan jonnekin taulukon alueelle ja sitten työkalurivin Table-painiketta. Tällöin avautuu Table Properties -ikkuna. Yleensä siinä on tällöin näkyvissä osa "Cells", jonka kautta voi muuttaa sen solun ominaisuuksia, jota napsautettiin. Voi myös muuttaa kokonaisen rivin (row) tai sarakkeen (column) ominaisuuksia, sen mukaan, mitä valitaan Selection-valikosta. Jos halutaan muuttaa koko taulukon ominaisuuksia, valitaan on "Table".

Composer näyttää kuitenkin taulukoiden reunaviivat jossain määrin erilaisina kuin selaimet. Esimerkiksi jos taulukolle ei ole lainkaan asetettu reunaviivoja, Composer silti näyttää punaisen pisteviivan, jotta taulukon rakenne näkyy. Tämä koskee myös Composerin Preview-tilaa. Mutta Composerin Browse-painikkeella voi avata sivun Mozillassa sen tarkastamiseksi, miten selain näyttää sivun.

Useimmille tietotaulukoille on syytä kirjoittaa taulukon otsikko (caption-elementti). Composerissa tätä ei ole tehty ihan luonnolliseksi, vaan ensin on luotava taulukko ja sitten mentävä muokkaamaan sen ominaisuuksia. Koko taulukon ominaisuuksien muuttamisessa on myös kohta "Caption", jossa tehtävä valinta määrää sekä taulukon otsikon olemassaolon että sen sijainnin. Oletusarvo on "None", jolloin otsikkoa ei ole lainkaan. Kun tilalle vaihdetaan "Above Table", taulukon yläpuolelle ilmestyy elementti, johon voi kirjoittaa halutun otsikon. Otsikon voi sijoittaa myös taulukon alapuolelle, mutta se on harvinaisempaa. Taulukon vasemmalle tai oikealle puolelle sijoittaminen ei toimi useimmissa selaimissa. Taulukon otsikon ulkoasu kannattaa säätää CSS:llä. Esimerkiksi lihavointi on usein hyvä ajatus (CSS-sääntö tätä varten: caption { font-weight: bold; }).

Solujen ominaisuuksien muuttamisessa on myös mahdollisuus määritellä solu otsikkosoluksi (header cell, th-elementti). Tämä on syytä tehdä ainakin niille soluille, jotka loogisesti toimivat sarakkeiden otsikkoina. Tämä voidaan tehdä edellä mainitussa Table Properties -ikkunassa Cells-kohdassa, jossa on pudotusvalikko "Cell Style". Siinä arvo "Normal" vastaa tietosolua (td-elementtiä), arvo "Header" otsikkosolua (th-elementtiä). Jos Selection-kohdasta valitaan "Row" (tai "Column"), voidaan koko rivi (tai sarake) muuttaa otsikkosoluiksi yhdellä kertaa.

Composerilla voi myös muuntaa tekstiä taulukkomuotoon, kunhan teksti on sopivassa muodossa. Sopiva muoto on sellainen, jossa taulukon yhdeksi riviksi tarkoitettu tieto on yhtenä tekstirivinä (tai yhtenä kappaleena, jossa ei ole rivinvaihtoja) ja alkioiden välissä on jokin erotinmerkki, joka ei esiinny itse alkioissa. Erotinmerkki voi olla esimerkiksi välilyönti, pilkku tai kaksoispiste. Valitettavasti tab-merkki ei käy, ei myöskään puolipiste. Esimerkiksi Excel-taulukon voi tallentaa mainitunlaiseen muotoon Excelistä Tallenna nimellä -toiminnolla.

Taulukoksi muuntaminen tapahtuu yleisesti seuraavasti:

Maalataan haluttu sivulla oleva teksti hiirellä.
Valitaan Table-valikosta kohta "Create Table from Selection".
Ilmoitetaan ruudulle ilmestyvässä Convert to Table -ikkunassa oikea erotinmerkki (pilkku, välilyönti tai muu merkki) ja napsautetaan OK-painiketta, jolloin teksti muuttuu taulukoksi.
Muutetaan taulukon ominaisuuksia halutulla tavalla. Yleensä on syytä ainakin poistaa taulukon Width-asetus edellä kuvatulla tavalla. Tämä toiminto nimittäin tuottaa täyslevyisen (100%) taulukon.

Tätä menettelyä voi käyttää esimerkiksi silloin, kun sivulla on valmiiksi muotoiltua tekstiä pre-elementtinä ja kyse on luonteeltaan taulukoidusta tiedosta. Oikea taulukkoesitys on yleensä esteettömämpi, koska monet ohjelmat pystyvät tällöin tulkitsemaan tietoa sen rakenteen mukaan. Seuraavassa on esimerkki pre-elementistä:

Islanti Reykjavík
Norja   Oslo
Ruotsi  Tukholma
Suomi   Helsinki
Tanska  Kööpenhamina

Tämä voidaan muuntaa taulukoksi maalaamalla se hiirellä ja valitsemalla Table - Create Table from Selection ja sitten ilmoittamalla erottimeksi välilyönti (space).Tulos on seuraavanlainen, ja sitä voi seuraavaksi muokata muuttamalla taulukon ominaisuuksia edellä kuvatuilla tavoilla.

Islanti	Reykjavík
Norja	Oslo
Ruotsi	Tukholma
Suomi	Helsinki
Tanska	Kööpenhamina

Jos teksti oli ennen muuntamista pre-elementtinä, niin Composer jättää taulukon jälkeen tyhjän pre-elementin. Se aiheuttaa ylimääräistä tyhjää tilaa taulukon jälkeen ja on syytä poistaa. (Jos taulukon alle halutaan tilaa, on parempi asettaa taulukolle alamarginaali CSS:llä.) Poistaminen voidaan tehdä esimerkiksi HTML Tags -tilassa siten, että napsautetaan keltaista "tarraa" PRE ja sitten kirjoitetaan control-x.

Merkkauksen tarkastaminen ja muuttaminen

Miksi?

Composerin tuottaman merkkauksen tarkastaminen tai muuttaminen voi olla tarpeen seuraavissa tilanteissa:

halutaan tarkistaa, onko merkkaus esteettömyys- tai muiden ohjeiden mukaista
halutaan poistaa sivulta merkkausta (esim. tekstin korostus)
halutaan lisätä sivulle elementti, jota varten ei Composerissa ole erityistä toimintoa, esimerkiksi div- tai span-elementti tai lomake (form-elementti)
koetaan HTML:n kirjoittaminen suoraan helpommaksi kuin Composerin toimintojen käyttö, esimerkiksi jonkin määrätyn merkkauksen lisäämiseksi.

Määritteet

Kuten edellä on kuvattu, sivulla jo olevan elementin määritteiden eli attribuuttien tarkasteleminen ja muuttaminen onnistuu myös HTML Tags -tilassa. Silloin napsautetaan kahdesti keltaista "tarraa", joka näkyy elementin edessä, esimerkiksi keltaista suorakaidetta, jossa on merkit "LI" . Silloin avautuu Advanced Property Editor -ikkuna, jossa näkyvät kaikki määritteet ja jossa niitä voidaan myös muuttaa, poistaa ja lisätä.

Määritteitä lisättäessä kannattaa valita nimi Attribute-pudotusvalikosta, jos mahdollista, koska näin vältetään nimen väärinkirjoittamisesta johtuvat virheet. Määritteiden nimet ja arvot kirjoitetaan sellaisinaan, ilman lainausmerkkejä. (Composer automaattisesti lisää tuottamaansa HTML-koodiin lainausmerkit määritteen arvon ympärille.)

Esimerkiksi CSS:ää käytettäessä on usein tarpeellista lisätä elementteihin class-määritteitä. Seuraavassa kuvassa ollaan lisäämässä P-elementtiin määritettä, ja pudotusvalikosta on juuri valittu haluttu kohta. Seuraavaksi kirjoitetaan valikon oikealla puolella olevaan Value-laatikkoon haluttu arvo (luokan nimi).

[Advanced Property Editor -ikkuna]

Jos halutaan esimerkiksi suurentaa fonttia yhden kappaleen sisällä, niin tyylikkäin vaihtoehto on lisätä kappale-elementille class-määrite, arvona esimerkiksi "ingressi" (lainausmerkkejä ei tällöin kirjoiteta), ja lisätä erilliseen tyyliohjeeseen sopiva sääntö, kuten p.ingressi { font-size: 120%; } Mutta voi myös valita edellä kuvatusta ikkunasta kohdan "Inline Style" ja kirjoittaa siellä halutulle CSS-ominaisuudelle (Property) halutun arvon (Value), esimerkiksi siis ominaisuudelle "font-size" arvo "120%" (molemmat kirjoitetaan ilman lainausmerkkejä).

Merkkauksen poisto ja elementin vaihtaminen toiseksi

Elementti kokonaisuudessaan, sisältöineen, voidaan poistaa usealla tavalla. Usein on kätevintä maalata elementin alue hiirellä ja näpäyttää Delete-näppäintä. HTML Tags -tilassa voidaan vaihtoehtoisesti napsauttaa elementin "tarraa" ja sitten kirjoittaa control-x. Näin voidaan poistaa myös tyhjä elementti (eli elementti, jolla ei ole mitään sisältöä).

Mutta jos halutaan poistaa sivulta vain merkkausta, esimerkiksi tekstin lihavointi, mutta ei itse tekstiä, pitää olla tarkkana, ettei teksti häviä merkkauksen mukana. Monille on varmaankin kätevintä tehdä tällaiset muutokset Composerin HTML-tilassa (<HTML> Source). Mutta merkkauksen poisto tekstiä poistamatta onnistuu (joissakin Composerin versioissa) seuraavastikin:

Mennään HTML Tags -tilaan.
Napsautetaan elementin edessä olevaa keltaista "tarraa". Tällöin tulee näkyviin, mikä kaikki teksti kuuluu elementtiin.
Poistetaan elementti control-x:llä (tai Edit-valikon Cut-toiminnolla).
Liitetään elementin teksti samaan paikkaan Alt-e w:llä (tai Edit-valikon toiminnolla "Paste Without Formatting").

Jos halutaan vaihtaa elementti kokonaan, siis muuttaa elementti toisennimiseksi ja merkitykseltään erilaiseksi, voidaan joissakin tapauksissa käyttää työkalurivin pudotusvalikkoa. Kun esimerkiksi napsautetaan jonnekin kohtaa tekstiä, tulee kyseiseen pudotusvalikkoon näkyviin vaihtoehto "Paragraph", jos teksti on merkattu kappaleeksi eli p-elementiksi. Jos se halutaan vaihtaa esimerkiksi h2-elementiksi eli toisen tason otsikoksi, valitaan pudotusvalikosta kohta "Heading 2". Tämä on kätevää esimerkiksi muokattaessa vanhoja sivuja, joilla otsikkotekstejä ei ole merkattu otsikoksi.

Mutta yleisessä tapauksessa täytyy elementin vaihtamiseksi ensin poistaa vanha merkkaus (kohdat 1, 2 ja 3) ja sitten, juuri ennen tekstin liittämistä takaisin, valita sopiva merkkaus esimerkiksi valikkokomennolla. Seuraavassa on esimerkki väliotsikoksi tarkoitetusta tekstistä, joka on toteutettu huonosti eli kappaleena, jonka sisällä on fonttitason merkkausta (size="+1" face="Arial"):

HTML-tila

Se voidaan muokata seuraavanlaiseksi oikeaksi otsikoksi edellä esitetyllä tavalla, alkaen P-tarran napsauttamisesta. Menettelyssä häviää myös sisempi merkkaus, font-elementti. Ennen tekstin liittämistä takaisin (siis kohtaa 4) valitaan työkalurivin pudotusvalikosta sopiva otsikkorakenne, tässä tapauksessa "Heading 3".

HTML-tila

Composerissa on tavallaan kaksi HTML-tilaa eli sellaista tilaa, jossa voidaan ja pitää kirjoittaa suoraan HTML-merkkausta. Tällöin on kirjoitettava tarkasti oikein ja muistettava muun muassa panna lopputägit paikoilleen ja kirjoittaa määritteiden arvot lainausmerkkeihin. Composer ei tarkista merkkauksen oikeellisuutta. Skandinaaviset kirjaimet kuten ä ja ö voi kirjoittaa teksteihin tällöinkin sellaisenaan, vaikka Composer sisäisesti muuntaa ne ns. entiteeteiksi.

Yksinkertaisempi HTML-tila on HTML:n lisäämisen tila, johon päästään Insert-valikon kohdasta "HTML" tai näppäinoikotiellä Alt-i h. Tällöin avautuu pienehkö ikkuna, johon voi kirjoittaa HTML-merkkauksen (ja myös tavallista tekstiä). Lopuksi napsautetaan kyseisessä ikkunassa olevaa Insert-painiketta. Lisäys menee siihen kohtaan, jossa viimeksi oltiin (ja jossa kohdistin on).

Tätä tilaa käyttämällä voidaan esimerkiksi merkata sivun jokin osa div-elementiksi, johon voidaan viitata CSS:ssä. Tällöin lisätään ensin halutun alkukohdan eteen sopiva div-tägi, esimerkiksi <div class="navigointi">, ja sitten halutun loppukohdan jälkeen lopputägi </div>.

Composerin varsinainen HTML-tila, <HTML> Source, on melko hankala käyttää. Kun siirrytään siihen muusta tilasta, Composer ei säilytä tietoa paikasta, jossa oltiin. Lisäksi Composer muuttaa mm. skandinaaviset kirjaimet ns. entiteeteiksi eli esimerkiksi ä:stä tulee ä, mikä ei haittaa toimivuutta (pikemminkin parantaa sitä joissakin erikoistilanteissa) mutta hankaloittaa HTML-muotoisen version lukemista.

Niinpä onkin parempi käyttää tätä tilaa vain silloin, kun muilla keinoilla ei selvitä. Esimerkiksi erilaisten tarkistusohjelmien ilmoituksia tulkittaessa joudutaan lukemaan HTML-koodia. Muutoinkin voi erilaisten korjausten tekeminen sujua parhaiten HTML-tilassa. Valitettavasti tässäkään tilassa ei ole rivinumerointia.

Tyylit

Kuten edellä on mainittu, Composer tuottaa monissa tilanteissa elementteihin liittyvää CSS-koodia style-määritteiden muodossa. Näitä määritteitä voi myös itse lisätä elementteihin, kuten muitakin määritteitä.

Suositeltava tapa on kuitenkin kirjoittaa sivu ensin yksinkertaisella tavalla, kiinnittämättä juurikaan huomiota ulkoasuun, ja sitten suunnitella tyyli ulkoista tyyliohjetta (CSS-tiedostoa) käyttäen. Tällöin tulee pääosin automaattisesti hoidetuksi yksi esteettömyysperiaate: huolehdi siitä, että sivu toimii myös ilman tyyliohjeita.

Ulkoisen tyyliohjeen käyttö edellyttää, että sivulla on siihen viittaava link-elementti. Sen lisääminen täytyy tehdä varsinaisessa HTML-tilassa, koska link-elementti on saatava sivun head-osaan, johon ei voi muulla tavoin lisätä elementtejä. Seuraava kuva esittää link-elementin lisäämistä. Muut tässä näkyvät rakenteet ovat Composerin tuottamia, paitsi <html>-tägin lang-määrite, joka on lisätty HTML-tilassa.

[link-elementin lisääminen HTML Source-tilassa]

Itse tyylitiedosto voidaan tehdä millä tahansa tekstieditorilla. Koska se on tyypillisesti varsin lyhyt, jopa NotePad (Muistio) käy hyvin.

Jos kuitenkaan ei haluta käyttää erillistä tyylitiedostoa, voidaan link-elementin asemesta lisätä sivulle style-elementti, joka sisältää itse tyyliohjeen. Yksinkertainen esimerkki style-elementistä:

<style type="text/css">
  body { font-family: Arial, sans-serif;       
    line-height: 1.35; }
</style>

Esteettömyyttä edistäviä työkaluja

Merkkauksen tarkistus (validointi)

Yleensä Composerin tuottama HTML-merkkaus on muodollisesti oikeaa eli validia. Jos kuitenkin itse lisäät HTML-merkkausta "käsin", voi koodiin tulla virheitä.

Sivun HTML-merkkauksen muodollisen oikeellisuuden voi tarkistaa Tools-komentovalikon kohdan "Validate HTML" kautta. Tämä on vain käyttöliittymä W3C:n validaattoriin ja edellyttää verkkoyhteyttä. Tarkistus onnistuu parhaiten, jos sivu on tallennettu palvelimeen viimeisimmän muutoksen jälkeen. Tällöin nimittäin Composer välittää automaattisesti sivun osoitteen validaattorille, joten saadaan suoraan validoinnin tulos (uuteen selainikkunaan).

Validoinnista on hyötyä lähinnä niille, jotka osaavat lukea ja korjata HTML-merkkausta. Validaattorin virheilmoitukset eivät useinkaan kerro asiaa tuntemattomalle, mikä virhe varsinaisesti on kyseessä, vaan ne vain ilmaisevat, että merkkauksessa on virhe. Oikea merkkaus on tarkistettava HTML-oppaista ja -referensseistä. Korjaus sujuu yleensä parhaiten <HTML> Source -tilassa. Seuraavassa on esimerkki tulosikkunasta, jossa näkyy osa validaattorin raporttia. Tässä tapauksessa virheen syynä on se, että merkkaukseen on "käsin" yritetty lisätä määrite HREFLANG mutta määritteen nimeen on tullut kirjoitusvirhe. Seuraamalla rivinumerolinkkiä (esimerkissä 747) pääsee näkemään HTML-koodin rivin ympäristöineen sellaisena, kuin se näkyy validaattorin raportin lopussa. Valitettavasti rivinumeron avulla ei voi suoraan paikantaa riviä Composerissa.

[Ote validaattorin raportista]

Validoinnin kannalta ja muutoinkin on olennaista, että Composer käsittelee DOCTYPE-määrittelyjä jossain määrin omituisesti. Se

lisää uuden, Composerilla luotavan sivun alkuun määrittelyn <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
lisää olemassaolevan, Composerilla avattavan sivun alkuun saman määrittelyn (tosin html:n tilalla jostain syystä HTML, millä ei ole merkitystä), jos sivun alussa ei jo ole DOCTYPE-määrittelyä
ei muuta <!DOCTYPE HTML PUBLIC ...> -muotoista määrittelyä, jos sivulla jo on sellainen
muuttaa <!DOCTYPE HTML SYSTEM ...> -muotoisen määrittelyn virheelliseksi poistamalla siitä SYSTEM-sanan
näyttää DOCTYPE-määrittelyn vain <HTML> Source -tilassa ja harmaalla taustalla merkiksi siitä, että sitä ei voi muuttaa Composerilla.

Jos siis haluat käyttää jotain muuta kuin HTML 4.01 Transitional -määrittelyä, niin sinun on itse kirjoitettava se sivulle jollakin muulla ohjelmalla kuin Composerilla. Tähän käy toki mikä tahansa tekstieditori.

Oikeinkirjoituksen tarkistus

Työkalurivin Spell-painike käynnistää oikeinkirjoituksen tarkistuksen (spelling check). Kuitenkin oletusarvona, ja ainoana Composerin mukana tulevana vaihtoehtona, on amerikanenglannin tarkistus.

Yleensä tätä toimintoa siis kannattaa käyttää vain englanninkielisille teksteille. Niille se onkin varsin hyödyllinen. Tarkistuksen käyttämä sanasto kattaa englannin yleiskielen aika hyvin. Jos tarkistus ilmoittaa jostakin sanasta ja sanan on tarkoitus olla englantia, voi sanan liittää käyttäjän lisäsanastoon, jolloin tarkistus ei myöhemmin ilmoita siitä. Mutta ennen kuin lisää sanastoon esimerkiksi oman ammattialan sanoja, kannattaa miettiä, eikö ole itse asiassa hyvä, että tarkistus huomauttaa niistä. Ovathan erikoissanat usein tuntemattomia tai merkitykseltään epäselviä monille.

Jos sivulla vain osa tekstistä on englanninkielistä, voit maalata kyseisen osan hiirellä ja sitten napsauttaa Spell-painiketta. Tällöin Composer tarkistaa vain maalatun tekstin.

Seuraava kuva havainnollistaa sitä, että tarkistustoiminnon tekemiä ehdotuksia ei pidä automaattisesti hyväksyä. Tässä tarkistus on löytänyt sanan "internet", jota ei ollut sen sanastossa. Se tarjoaa tilalle vaihtoehtoja, joista mikään ei ole oikea. Tässä kannattaa valita toiminto "Add Word". (Kuvassa on Composerin alkuperäinen, muokkaamaton työkaluvalikko.)

[Kuva, jossa ollaan lisäämässä sanaa sanastoon]

Periaatteessa Composeriin voidaan lisätä muidenkin kielten tuki. Tämä on kuitenkin monin tavoin ongelmallista. Seuraavista tiedoista on hyötyä niille, jotka haluavat kokeilla näitä mahdollisuuksia. Tarkistusmenetelmä perustuu kunkin kielen oikeinkirjoituksen niin sanottuun ispell-muotoiseen kuvaukseen, joka koostuu sanaluettelosta (.dic-tiedostosta) ja affeksien eli alku- ja loppuliitteiden kuvauksesta. Menetelmä sopii hyvin englannin kielelle mutta varsin huonosti esimerkiksi suomen kielelle, jossa myös sanan vartalo muuttuu taivutuksessa ja affikseja on hyvin paljon. Osittain tästä syystä ei suomen kielestä ole käyttökelpoista ispell-muotoista kuvausta. Paras yritys lienee ispell-fi: Suomen kielen oikaisulukusanasto ispellille, mutta sekään ei tekijänsäkään mukaan sovellu vakavaan käyttöön.) Muille kielille voi löytyä sopivia kuvauksia sivun Dictionaries for International Ispell kautta. Jokin kielen oikeinkirjoituksen tarkistuksen liittämiseksi Mozillaan kopioidaan .dic- ja .aff-tiedosto Mozillan asennushakemiston components-alihakemistoon, jossa alkutilanteessa on tiedostot en-US.dic ja en-US.aff.

Jukka K. Korpela (jkorpela@cs.tut.fi)