Wordistä HTML-sivulle

(Jatkoa tarinalle HTML -editori ja WYSIWYG)

Jos olet kirjoittanut tekstisi MS Wordillä ja haluat siitä sen HMTL-editoriin, seurauksena voi olla ongelmia, joista et edes tiedä.

Seuraavassa kuvassa oleva teksti on kopioitu suoraan MS Office Word 2007 -sivulta ja liitetty OPITin WYSIWYG -editoriin. Sen jälkeen se on tallennettu ja avattu Firefoxilla (3.5). Napsauta kuvaa, niin näet sen suurempana, kuten jatkossa muiden kuvien kohdalla. Näkymä on sama Googlen Chrome -selaimessa.

Kaikki näyttää siis olevan hyvin. MUTTA sama sivu näyttääkin Internet Explorerissa tältä:

Ongelman aiheuttavat Wordin ohjausmerkit! Vaikka joissain selaimissa teksti näyttää aivan oikeanlaiselta, on sivulle tuleva HTML-teksti moninkertainen pituudeltaan verrattuna normaaliin ja aiheuttaa siis hieman tilan ja ajan tuhlausta.

Tässä esimerkki samasta sivusta Blogger-blogissa, jollainen tämäkin blogi on. Esikatselussa teksti näyttää hyvältä,

mutta WYSIWYG -editori sekoaa esikatselun sulkemisen jälkeen täysin...

Miten vältyt näiltä ongelmilta?

Jos tekstisi on vielä kirjoittamatta, kirjoita se käyttäen NotePad -ohjelmaa, jossa ei ole muotoiluja tai kirjoita suoraan HTML-editoriin.

Jos teksti on jo tehty Wordillä, menettele seuraavasti:
Kopioi teksti Wordistä. Avaa HTML-editorista HTML-teksti merkitystä nappulasta.

Liitä teksti, jolloin kaikki muotoilut jäävät kopioitumatta.

Paina uudestaan edellä mainitusta nappulasta, jolloin palaat WYSIWYG-editoriin. Teksti on tallella, mutta rivinvaihdotkin ovat kadonneet.

Jaottele teksti

Ja muotoile se

Hankalaa, mutta nyt ei ole vaaraa, että sisältö näkyy pelkkänä puurona jollekin.


Muistakaa myös jos teette webbisivuja itse: Näkymä ei ehkä olekaan oikea kaikissa selaimissa. Olkaa siis tarkkoja. Tilanne on hankalin jos sinulla on käytössä ohjelmien uusimmat versiot ja lukija käyttää vanhoja versioita. Voi jopa olla, että lukija ei saa sivuasi auki ollenkaan!

Read more...

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...

Read more...