Verkkojulkaiseminen, syksy 2004

Tervetuloa verkkojulkaisemisen kurssin harjoituksiin! Pari ensimmäistä harjoituskertaa ovat melko vapaamuotoista webistelyn perustekniikoihin tututstumista. Ensimmäisen harjoituskerran jälkeen sinun tulisi osata

• XHTML-merkkaukielen perusteet, XHTML-dokumentin perusrakenne ja joitain yleisimpiä elementtejä
• Semanttisen merkkauksen periaatteet (Tärkeää!)
• Tehdä yksinkertaisia webbisivuja ja julkaista niitä omassa kotisivuhakemistossa

Jos webistely on sinulle ennestään tuntematonta puuhaa, kannattaa nyt keskittyä XHTML-kielen perusteisiin ja aloitella tyylien opettelua seuraavissa harkoissa. Kokeneempien webistelijöidenkin kannattaa tutustua XHTML:n erityispiirteisiin ja erityisesti semanttisen merkkauksen periaatteisiin.

Ohjeet ja muut resurssit

Parhaimmat ohjeet webistelyyn löytyvät webistä. Kurssin verkkomateriaaleista löytyy jotain erityisesti kurssia varten kirjoitettuja ohjeita. Enimmäksen metariaalit koostuvat kuitenkin linkeistä muualla verkossa oleviin oppaaisiin ja artikkeleihin.

Kurssin virallisen oppaan virkaa toimittavat HTML-Dogin oppaat. Sivuilta löytyvät kolmen tasoiset oppaat sekä XHTML:sta, että CSS:sta. Sivuilta löytyy myös luettelot kaikista XHTML-elementeistä ja CSS-säännöistä.

Ekassa harkassa hötömölökoiran tietoja voi täydentää kurssin omien oppimateriaalien XHTML-ohjeilla.

Ohjelmat, eli webistelijän työkalupakki

Webbisivujen tekemistä varten tarvitaan webbieditori ja niiden katseluun tietenkin selain. Kurssia varten mikroluokan koneille on asennettu pari ylimääräistä ohjelmaa.

• Mozilla Firefox on Mozilla-selainsarjan uusin tuote. Firefox on nopea ja kevyt selain, josta löytyy monia näppäriä toimintoja, kuten väliehdet ja RSS-lukija. Lisää toimintoja saa helposti erilaisten laajennusten avulla. Firefoxin CSS-tuki on huomattavasti MSIE:ta parempi, joten Firefox toimii kurssin "virallisena" selaimena.
• HTML-Kit on näppärä webbieditori (X)HTML-koodin kirjoittamiseen. HTML-tunnisteet värjäävä tekstieditori helpottaa koodin kanssa työskentelyä.

Mozilla Firefox ja HTML-kit löytyvät paikallisesti asennettuina Start napin takaa kohdasta Programs. Molemmat ohjelmat ovat ilmaisia ja ne voi asentaa myös kotikoneelle ohjelmien kotisivuilta.

Mikroverkosta löytyy myös muita työkaluja webbisivujen tekemeiseen. Mozilla-selaimeen kuluu Composer-webbieditori, joka tuottaa ihan siistä HTML-koodia. Composeria voi käyttää halutessaan esim. pidemmän tekstin muuttamiseen HTML-muotoon. WYSIWYG-tyyppinen editori ei kuitenkaan sovellu hyvin XHTML:n opetteluun.

Koneilta löytyy myös ammattilaistatason webbieditori Dreaweaver, johon halukkaat voivat myös tutustua. Dreamweaver saattaa tosin olla ainakin webistelyn opetteluun turhan järeä ja monimutkainen työkalu.

Kuvankäsittelyyn mikroverkosta löytyy ainakin Corel Photo-Paint -ohjelma. Mikroverkkoon on myös (ehkä) tulossa erityisesti webbigrafiikan tekemiseen tarkoitettu Photoshop Elements.

Alkuvalmisteluja

Kotisivuhakemisto

Ellei käytössäsi ole vielä omaa kotisivuhakemistoa tilaa sellainen nyt. Olemassa olevan kotisivuhakemiston saa käyttöön Kotisivu-kuvaketta klikkaammalla. Kotisivuhakemistoon pääsee käsiksi myös kotoa käsin tietokeniikkaosaston ohjeen avulla.

Kotisivuhakemistoon tallenntut tiedostot näkyvät verkossa osoitteessa

http://www.mv.helsinki.fi/home/omatunnus/tidostonimi

Kurssin kokeiluja ja harjoituksia varten voit luoda hakemistoon oman alahakemiston, vaikkapa nimellä 'webbikurssi', 'harkat', tms. Tallentaessasi tiedostoja webbiin muista:

• Älä käytä tiedostonimissä ääkkösiä, välilyontejä tai erikoismerkkejä.
• Anna aina webbisivuille tidostopäätteeksi .html ja tyylitiedostoille .css.

Sivupohja

Mitä ohjelmaa webistelyyn käytätkin, voit käyttää sivujen valmiina pohjana oppimateriaaleissa kuvattua XHTML-dokumentin perusrakennetta. Koodin voi asettaa myös uusien sivujen oletuspohjaksi HTML-Kitissä.

XHTML-tehtäviä

Harjoitusten ohjelma on melko lailla vapaa: voit opetella XHTML:aa joko seuraamalla HTML-dogin ohjeita ja harjoituksia tai tehdä esim. seuraavia harjoituksia.

Elementteihin tutustuminen

Kokeile erilaisia elementtimerkkauksia. Kirjoittele itse tai hae jostain valmista tekstiä ja muotoile sitä XHTML-tunnisteilla.

• Otsikoita ja kappeleita
• Erilaisia listoja
• Korostuksia
• Linkkejä
• Kuvia
• Taulukoita

Tee koodista ilmavaa ja luettevaa. Harjoituksessa on tarkoitus opetella selkeää ja virheetöntä merkkausta ja tutustua XHTML:n sisältämiin elementteihin. Koodin oikeaoppisuuden voi tarkistaa helpoiten validoimalla.

Jos peruselementit ovat tuttuja, voit tutustua uusiin elemntteihin HTMLDogin HTML Tags -oppaasta.

Valmista tekstiä saa tuotettua helposti tekstigenereaattoreilla. Tarjolla on esim. lipsumia ja postmodernia esseistiikkaa.

Semanttisen merkkauksen harjoituksia

Kun peruselementtien käyttö on hallussa, voit kokeilla valmiin tekstin semanttista muotoilua. Ohessa on neljä pientä, Yliopistolainen-lehdessä julkaistua juttua tai ilmoitusta.

Miten merkkaisit seuraavat lehtijutut XHTML:lla?

• Viikki tutuksi yhdessä päivässä (teksti, kuva)
• Muutos henkilöstökoulutuksen tiedottamisessa (teksti, kuva)
• AV-yksikön ilmoitus (teksti, kuva, kuva)

Pyri mahdollisimman oikeaoppiseen ja semanttiseen merkkaukseen, eli merkkaa elementit niiden tehtävän, älä ulkoasun mukaan. Lopputuoksen ei tarvitse tai kuulukaan näyttää samalta kuin alkuperäinen. Peruselementtien lisäksi voit tarvittessa käyttää geneeristä div-elementtiä loogisten kokonaisuuksien ympäröimiseen.

Tyylittelyä CSS:lla

Tyylit ovat oikeastaan vasta seuraavan harkkakerran ohjelmaa, mutta jos XHTML on jo tuttua, voit hyvin jatkaa jo tyyleihin.