HTML -editori ja WYSIWYG

HTML on kieli, jota webbisivuilla käytetään. Wikipedian virallinen määritelmä:

HTML (lyhenne sanoista Hypertext Markup Language) on avoimesti standardoitu kuvauskieli, jolla voidaan kuvata hyperlinkkejä sisältävää tekstiä eli hypertekstiä. HTML tunnetaan erityisesti kielenä, josta webbisivut rakentuvat.

HTML:n kanssa joutuu nykyisin tekemisiin, vaikkei asiaa tuntisikaan. Blogeissa ja oppimisaluistoilla (esim. OPIT, Moodle) on käytössä HTML -sivun lisäys käyttäen WYSIWYG - editoria (What You See Is What You Get eli mitä näet, sitä saat).

Seuraava teksti perustuu OPITin versioon, koska se on tällä hetkellä iltalukiossa käytössä. Tehtäväpohjia on erilaisia, ja jos tiedät etukäteen tulevan sivun rakenteen, voit valita sopivimman vaihtoehdon:

Valitsen nyt kuitenkin tyhjän sivun, jota voi käyttää aina. Siihen voi tehdä aivan samoja asetteluja kuin tehtäväpohjiinkin, mutta työtä joutuu tosin itse tekemään hieman enemmän.
Napsauta kuvaa niin näet sen suurempana, kuten myös tulevien kuvien kohdalla!

Tekstin kokoon löytyy erilaisia valintoja, erikokoisia otsikoita ja normaali teksti.

Lisäksi voi valita tekstin asettelun oikelle, vasemmalle tai keskelle. Fonttivalikoima on yleensä pienempi kuin Wordissä. Lihavoinnille, alleviivauksille ja kursivoinnille kuten myös fontin ja taustan väreille löytyy tutut valikot. Suosittelen niiden käyttöä valitsemalla teksti maalaamalla ja lisäämällä haluttu muotoilu valmiiseen tekstiin.

Kuvan voi liittää painamalla maisemaa esittävää kuvaketta ja valitsemalla esim. omalta tietokoneelta haluttu kuva.

Tässä on muotoiltu teksti. Kaikki sanat on alleviivattu punaisella katkoviivalla siksi, että itselläni on käytössä englanninkielinen oikolukija. Suomenkielinenkin Firefoxiin löytynee, mutta en ole sitä tullut lisänneeksi.

Tässä edellisen esikatselukuva.

Molempien reunojen tasaus olisi ihan kiva, mutta suomen kieli on pitkien sanojensa takia hankalaa ja saattaa johtaa outoihin sanavälien pituuksiin. Löydätte niitä aivan varmasti blogistani. Tavuviivoja en suosittele, sillä niiden poistaminen tekstin muutoksen jälkeen teettää hirveästi turhaa työtä.

Linkki lisätään maalaamalla osa tekstiä ja painamalla linkki-ikonia (maapallo, jonka kulmassa ketju). Uusi ikkuna avautuu.

Jokaisella alustalla on omat ominaisuutensa tässä kohdassa, mutta jokaisessa liitetään linkin URL-osoite jonnekin. (kopioi ja liitä se selaimesi osoiteriviltä). OPITissa suosittelen lukijoiden takia, että valitset myös kohdan Määritä uusi ikkuna.

Ikkunaan avautuu uusi valikko, josta sitten voi lisätä ominaisuuksia sille avautuvalle ikkunalle. Mielestäni minimivaatimukset ovat työkalurivi ja osoiterivi. Kukin voi kokeilla mielestään parasta vaihtoehtoa.

Tässä on esikatselu. Kursorini oli linkin päällä, joten se näkyy nyt punaisena. Muuten linkki näkyy alleviivattuna, mutta mustana. Ehkä olisi hyvä vaihtaa myös linkkitekstin väriä, jotta kaikki huomaisivat sen linkiksi. Sininen on silloin paras tekstiväri.

Seuraavassa osiossa aion kertoa tarkemmin Wordillä kirjoitetun tekstin lisäämisestä HTML-sivulle. Se ei aina ole täysin ongelmatonta...