HTML editorin käyttö
KompoZer sivustoeditorin pikaopas (hae editori osoitteesta: http://kompozer.net/)
KompoZer editori
Kompozer on sivustoeditori, jolla voit koostaa sivustoasi (useamman sivun linkitetty ryhmä)
WYSIWYG-periaatteella.
Editori mahdollistaa teksturin kaltaisen käyttöliittymän mutta tarvittaessa koodia voi tarkastella myös
HTML-lähdekoodina.
Tässä pikaoppaassa tehdään samat toiminnot kuin HTML-tehtäviä osiossa eli käytämme samoja
tiedostoja.
Alkutoimet
Luo kotikoneellesi kansio (hakemisto) nimeltä "kotini".
Siirrä sinne kaikki tiedostot kansiostamme DocMus-materiaalit. Tämä "kotini"-kansio tulee olemaan
kotisivujemme sijoituspaikka.
Teemme hieman erilaisen sivuston.
Käynnistä KompoZer
Tallenna heti sivustosi valikosta File/Save
Kompozer kysyy ikkunan nimeä (se tulee näkymään selaimen ikkunan otsikkona).
Anna ikkunan nimeksi "Aloitus". Tämä on siis vain ikkunan nimi, ei tiedoston nimi.
HTML editorin käyttö - 1
© 2011 Otto Romanowski
Tallenna sivu kansioosi "kotini" nimellä "index.html" vaikka ohjelma ehdottaa nimeksi "Aloitus.html"
Tuo index.html mahdollistaa sen, että selaimessa ei tarvitse kirjoittaa ensimmäisen sivun nimeä,
vain kansion nimi riittää (http://webusers....../kotini/).
Otsikkotekstin kirjoitus
1. Klikkaa kursori Kompozerin sivualueelle ja kirjoita teksti: Tervetuloa aloitussivulle!
2. Aktivoi teksti raahamalla hiirellä sen yli
3. ja valitse tekstin kooksi "Heading 1"
Lisää huutomerkin jälkeen muutama rivinvaihto (kirjasin muuttuu automaattisesti Body Text
-muotoon).
HTML editorin käyttö - 2
© 2011 Otto Romanowski
Kirjoita teksti: Nyt kokeilen editorin käyttöä.
Lisää taas pari tyhjää riviä.
Tekstin muotoilua
Keskitämme tervetulotekstin.
Aktivoi teksti "Tervetuloa aloitussivulle!"
Valitse keskitetty tekstipalsta.
Näin voit asettaa sivuston palstoille/teksteille erilaisia muotoiluja
Muotoiluvaihtoehdot vasemmalta oikealle:
pienennä - suurenna kirjasinkokoa
lihavoitu (Bold)
kursivoitu (Italic)
alleviivattu (Underline)
vasen-, keski- ja oikeatasaus sekä tasapalsta
Kuvan sijoittaminen
Sijoitamme animaatiokuvasarjan (tyypillisesti .gif -tiedosto joita löytää kosolti netistä).
Tee muutama tyhjä rivi. Kirjoita vaikka teksti: Suomen lippu animoituna:
Tee rivinvaihto.
Klikkaa ylhäällä olevaa Image-kuvaketta (Linkin ja Tablen välissä).
HTML editorin käyttö - 3
© 2011 Otto Romanowski
1. Avautuvassa ikkunassa kysytään kuvatiedoston sijaintia (klikkaa pikkukasiota ja hae tiedosto
"animaatiogif.gif")
2. kirjoita myös kuvalle vaihtoehtotekstiä (kannattaa käyttää!)
3. varmista myös, että URL relative on valittuna (tarkoittaa, että kuva löytyy index-sivun kanssa
samasta kansiorakenteesta)
Animoitu kuva ei näy editorissa, mutta jos tallennat tämän tiedoston (File/Save) ja tuplaklikkaat sitä
hakemistossasi, avautuu se selaimessa ja näet suomen lipun heiluvan.
Muista sulkea testauksen jälkeen selainikkuna (punainen pallukka vasemmalla ylhäällä).
HTML editorin käyttö - 4
© 2011 Otto Romanowski
Skaalatun kuvan sijoitus
Joskus on tarpeen muuttaa sijoitetun kuvan kokoa
Mene pari rivia alaspäin ja kirjoita teksti: Seuraavana skaalattu kuva:
lisää yksi rivinvaihto
Klikkaa Image-painiketta ja hae "kuvajpg.jpg" sekä
kirjoita "Alternate text" -kenttään teksti: skaalattu kuva
1. Valitse välilehti Dimensions
2. Valitse Custom Size ja pidä huoli, että Constrain on aktivoitu (kuvamuutos tapahtuu oikeissa
mittasuhteissa)
3. kirjoita Width-kenttään teksti 200 (huomaa, että Height kenttä muuttuu suhteessa kirjoittamaasi
numeroon)
Paina OK
Kuva skaalautuu sivulle pienempään mutta kuvasuhteiltaan oikeaan kokoon.
Syötä taas lopuksi muutama rivinvaihto jotta saamme tilaa.
HTML editorin käyttö - 5
© 2011 Otto Romanowski
MIDI-tiedoston liittäminen
Tässä selaineditorissa ei kannata kirjoittaa syväytettyä komentoa (siis sellaista joka on <embed>
komentojen välissä) koska tämä Kompozer editori sekoaa.
Toisaalta tuo <embed> komento ei ole oikein hyvää HTML-koodia ja mikäli sitä käyttää, niin ei ole
takeita siitä, että kaikki maailman selaimet sen osaavat näyttää.
Sijoitamme siis MIDI-tiedostomme normaalin linkin avulla.
Kirjoita teksti: Sitten MIDI-tiedosto selaimen soittamana: MIDI-musaa
Aktivoi sitten teksti "MIDI-musaa" ja klikkaa ylhäältä Link-painiketta.
Tekstin linkkaus-ikkuna avautuu.
Hae pikkukansiota klikaten tiedosto musamidi.mid
Tallenna sivusto (File/Save).
Tuplaklikkaa kasiossasi index.html sivua ja kokeile miten MIDI-linkki soitetaan selaimessasi.
Soittamisen jälkeen on palattava alkuperäiselle sivulle selaimen omalla edellinen-sivu -painikkeella
(se kolmio joka osoittaa vasemmalle).
Sulje selaimessa index-sivu ja palaa Kompozeriin.
Lisää sinisen MIDI-musaa -linkin loppuun muutama rivivaihto.
HTML editorin käyttö - 6
© 2011 Otto Romanowski
Pakatun mp3-äänitiedoston lisääminen
Lisää teksti: Seuraavaksi musiikkia pakattuna: MP3-musaa
Aktivoi tekstiosa "MP3-musaa" ja linkitä (ylhäällä Link-ikoni) se tiedostoon: musapakattu.mp3
Lisää taas muutama tyhjä rivi ja tallenna dokumentti (File/Save).
Kun kokeilet tätä sivua jollain selaimella, on siellä soiton jälkeen palattava taas paluu-painikkeella.
Keskitämme vaihteeksi kuvan ja siihen liittyvän tekstin
Aktivoi jpg-kuva sekä sen yllä oleva teksti (vedä hiirellä kohdasta 1 kohtaan 2)
Valitse sitten palstatasauksista keskitetty. Tallenna ja testaa selaimella.
Huomaa, että kun muutat selaimen ikkunaleveyttä, pysyy keskitetty materiaali aina keskellä
suhteessa ikkunan leveyteen.
Sulje selainikkuna ja palaa editoriin.
HTML editorin käyttö - 7
© 2011 Otto Romanowski
Lisäämme linkin sivulle "tokasivu.html"
Voidaksemme tehdä linkin jollekin sivulle, täytyy sen sivun olla olemassa!
Teemme uuden välilehden (= sivun):
1. klikkaa ikonia "New"
2. valitse ponnahdusvalikosta "Page in New Tab"
Sait uuden välilehden (sivun) nimeltä (untitled)
Tallenna se valikosta: File/Save
Anna ikkunalle nimeksi: tokasivu (koska Sibelius-html tiedostossa oli jo tuo viittaus)
Tallenna se koti-kansioosi samalla nimellä eli tokasivu.html
Klikkaa välilehteä "Aloitus"
Kirjoita sivun loppuun uusi teksti: Linkki seuraavalle sivulle.
Aktivoi koko kirjoittamasi teksti.
Osoita ylhäällä ikonia "Link"
Avautuvassa linkki-ikkunassa osoita pikkukansiota ja valitse koti-kansiostasi äsken tallennettu
"tokasivu.html"
Linkki on nyt valmis ja voit kokeilla sen toimivuutta selaimellasi. Tokasivu on aika tyhjä...
Paluu takaisin tapahtuu selaimen painikkeesta "edellinen-sivu" joka on yleensä vasemmalle
osoittava kolmio sivun vasemmassa ylälaidassa.
HTML editorin käyttö - 8
© 2011 Otto Romanowski
Materiaalien lisäys sivulle tokasivu.html
Klikkaa editorin välilehteä "tokasivu".
Kirjoita alkuun teksti: Tervetuloa notaatiosivustolle
ja laita sen tekstityypiksi "Heading 2" ponnahdusvalikosta "Body Text"
Lisää pari tyhjää riviä ja kirjoita teksti: Ensin pieni nuottinäyte:
Lisää yksi rivivaihto
Sibeliuksessa rajatun nuottinäytten sijoittaminen
Tapahtuu kuten minkä tahansa kuvan sijoittaminen eli
Osoita ikonia "Image" ja hae tiedosto "nuottiesimerkki.png"
Laita kohtaan vaihtoehtoinen teksti: nuottiesimerkki
HTML editorin käyttö - 9
© 2011 Otto Romanowski
Kuvan muutos jälkikäteen
Emme ole tyytyväisiä kuvan kokoon joten haluamme sen puolet pienemmäksi.
Tuplaklikkaa editorissa näkyvää nuottiesimerkin kuvaa.
Valintalaatikko avautuu.
Valitse välilehti "Dimensions"
Aseta yllä olevat valinnat ja Width leveys arvoon 263 (korkeus skaalautuu automaattisesti).
Klikkaa OK ja nyt kuvamme on kohtuullisen kokoinen.
HTML editorin käyttö - 10
© 2011 Otto Romanowski
Ison PDF-tiedoston näyttäminen/lataaminen
Seuraavan toiminnon tulos riippuu selaimen asetuksista.
Oletusarvoisesti Safari-selain näyttää dokumentin uudella välilehdellä ja Firefox-selain taas lataa
dokumentin käyttäjän koneelle.
Tee taas muutama tyhjä rivi ja kirjoita teksti:
Minnehän tuo nuotti avautuu?
Iso nuotti
Aktivoi teksti "Iso nuotti" ja osoita ylhäältä ikonia "LInk"
Tekstin linkkimäärittelyssä:
1. hae tiedosto "nuottisivupdf.pdf"
2. aktivoi "Link is to be opened"
3. valitse ponnahdusvalikosta "in a new window"
Klikkaa OK
Tallenna (File/Save) ja kokeile molemmilla selaimilla; Safari sekä Firefox
HTML editorin käyttö - 11
© 2011 Otto Romanowski
Sibeliuksen soiva nuotti omaan välilehteen
Lisää muutama tyhjä rivi ja kirjoita teksti:
Linkki Sibeliuksen soivaan nuottikuvaan.
Aktivoi sana "nuottikuvaan" ja osoita ylhäällä ikonia "Link".
Hae tiedosto "Nyt_ma_meen.html" ja laita se avautumaan uuteen ikkunaan
(ks. kuva edellisessä kohdassa).
Nuotti avautuu nyt kaikissa selaimissa omalla välilehdellään (koska kyseessä on html-sivu).
Tiedostoon "Nyt_ma_meen.html" laittamamme paluulinkki tokasivulle on nyt tavallaan turha.
Lisää tokasivun loppuun paluulinkki Alkusivulle (index.html)
Lisää sivun loppuun teksti:
ja lopuksi alkuun.
Linkkaa sana "alkuun" sivuun "index.html" (ei tietenkään uuteen ikkunaan avautuvana).
Kokeile sivustosi toimintaa eri selaimilla!
Toivottavasti kaikki sujuu hyvin.
HTML editorin käyttö - 12
© 2011 Otto Romanowski
Kansion siirto Sibelius-Akatemian Amadeus-palvelimelle
WWW-hakemistosi nimi Sibelius-Akatemian Amadeus palvelimella on: public_html (huomaa
alaviiva).
Käynnistä Cyberduck.
Kirjoittaudu amadeus.siba.fi hakemistoosi (muista SFTP-suojattu yhteys).
Avaa siellä kansio: public_html
Raahaa tietokoneeltasi kansio "kotini" tuonne Cyberduckin public_html -ikkunaan.
HTML editorin käyttö - 13
© 2011 Otto Romanowski
Käyttöoikeuksien tarkistaminen
Voit varmuuden vuoksi tarkistaa, että kansiosi "kotini" käyttöoikeudet ovat asetettu oikein
www-selaimia varten.
Aktivoi Cyberduck-ikkunassa kansiosi "kotini"
Valitse hiiren kakkospaikkeella ponnahdusvalikosta "Info"
Aktivoi Info-ikkunassa ylävälilehti "Permissions" ja aseta valinnat kuvan mukaisella tavalla.
Paina lopuksi "Apply changes recursively" jotta kansiosi kaikki tiedostot saavat nämä perusoikeudet.
Selaimeen kirjoitettava URL-osoite
Kun siirrämme kotini-kansion (jonka sisällä on aloitussivu nimeltä index.html) tuonne public_html
kansioon,
niin selaimeen kirjoitettava osoite tulee olemaan muodossa: webusers.siba.fi/~tunnuksesi/kotini/
Tuon "tunnuksesi" alussa olevan tilde-merkin saat:
1. pitämällä alt-näppäintä pohjassa
2. ja painamalla Å-kirjaimen oikealla puolella olevaa hattu-painiketta
3. joudut vielä siirtymään nuolinäppäimellä oikealle, vasta sitten tuo merkki jää näkyviin.
(Juu, on tosi hankalaa mutta valittakaa Siban ATK-hemmoille!)
Sitten kun joskus teet lopulliset hienot kotisivusi, tallenna kaikki tiedostot suoraan kansioon
public_html
Tuolloin kotisivusi osoite on vain muotoa: webusers.siba.fi/~tunnuksesi/
HTML editorin käyttö - 14
© 2011 Otto Romanowski
Loppusanat
Kiitos mielenkiinnosta!
Kokeile, ole utelias. Et voi rikkoa mitään ;-)
">Anna palautetta
HTML editorin käyttö - 15
© 2011 Otto Romanowski