Verkkojulkaiseminen

Jos tehtävässä opeteltavat asiat ovat sinulle entuudestaan tuttuja, siirry huoletta seuraavan tehtävään.

1. Alkuvalmistelut ja työskentely

Harjoituksesa tarvittavat ohjlemat ovat tekstieditori (Crimson Editor) ja selain (Firefox). Kopioi aluksi valmis sivupohja editoriin. Tee yksinkertainen yhden otsikon ja kappaleen sisältävä testisivu, tallenna se kotisivuhakemistoosi (muista .html-pääte), ja avaa se selaimessa.

XHTML:n koodaaminen ei varsinaisesti ole mitään WYSIWYG-työskentelyä. Webbisivuja käsin koodatessa joudurtaan liikkumaan editorin ja selaimen välillä. Kuvio menee näin:

1. Muokkaa sivua tekstieditoirissa
2. Sirry selaimeen
3. Päivitä näkymä (Refresh)
4. Toista.

Ymmärrät idean? Hyvä.

2. Ensimmäinen webbisivu

Tutustu XHTML:n peruslementteihin jatkamalla testisivusi työstämistä. Käytä otsikoita, kappleita, listoja, korostuksia ja linkkejä kuvaamaan sivun sisältöä ja rakennetta. Keskity rakenteen kuvaamiseen, älä vielä mieti sivun ulkoasua.

Toteuta esim. joku seuraavista:

• Yksinkertainen kotisivu, joka sisältää esim. nimesi, esittelöyn, yhteystietosi, ajan jolloin sivua on viimeksi päivittetty, jne.
• Lempiruokasi resepti tai joikin muu ohje.
• Lyhyt uutinen tai ilmoitus (voit kopioida tekstin verkosta jostain oikeasta uutisesta).
• ...

3. Valmiin tekstin muotoileminen

Tutki seuraavia dokumentteja ja niiden rakennetta. Miten kuvailisit dokumenttien rakenteen XHTML:lla? Valitse toteutettavksi yksi tai ehtiessäsi parikin.

• Viikki tutuksi yhdessä päivässä (teksti, kuva)
• Muutos henkilöstökoulutuksen tiedottamisessa (teksti, kuva)
• AV-yksikön ilmoitus (teksti, kuva 1, kuva 2)
• Ohjaajuus ryhmässä (teksti, kuva 1, kuva 2, kuva 3)
• Wired / Tired / Expired (teksti)
• Ping (teksti)
• Survivor: Heartland (teksti, tausta, kuva 1, kuva 2, kuva 3, kuva 4)

Pyri mahdollisimman oikeaoppiseen ja semanttiseen merkkaukseen, eli merkkaa elementit niiden tehtävän, älä ulkoasun mukaan. Ulkoasun säätö jätetään ensi kertaan. Olisiko joitain kohtia tekstistä mielekästä merkata linkiksi?

Peruselementtien lisäksi voit tarvittessa käyttää myös muita elementtejä, esim. geneeristä div-elementtiä loogisten kokonaisuuksien ympäröimiseen, blockquote-elementtiä lainauksiin jne.

Voit kysyä tarkemmin sopivista sisältöä kuvaavista elementeistä ohjaajalta, vierustoverilta tai etsiä niitä HTML Dogin referenssistä - niitä on loppujen lopuksi aika vähän.

Kurssin harjoitustyö

Tässä vaiheessa kannatta vilkaista kurssin varsinaisen harkkatyön vaatimuksia. Harkkatyö voi perustua jo tänään merkkaamaasi dokumenttiin tai voit valita pohjdokumentiksi myös jonkin vapaavalintaisen tekstin.

Ensi kerta

Seuraavalla kerralla lisätään nyt tehtyiin sivuihin tyyeliä ja väriä CSS:lla. Voit valmistautua harkkoihin lukemalla esim. CSS Basics -oppaan lukuja 1-12 tai HTML Dogin CSS Beginneria.