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
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
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
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
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
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
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
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
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
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
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
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
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
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
Loppusanat Kiitos mielenkiinnosta! Kokeile, ole utelias. Et voi rikkoa mitään ;-) ">Anna palautetta HTML editorin käyttö - 15