Verkkojulkaisu: harjoitukset

HARJOITUS 1 – Hyperteksti sivujen kuvauskielenä

Tässä harjoituksessa teet verkkosivun XHTML-koodilla.
  1. Avaa tekstieditori (esim. NotePad) ja luo sen avulla sivupohja määrittämällä sivupohjaan kaikki verkkosivulle pakolliset osiot. Voit kopioida tarvittavan koodin aiemmin tässä luvussa esitetystä XHTML-sivupohjasta.
  2. Tallenna verkkosivu harjoituskansioosi nimellä index.html. Avaa sivu tämän jälkeen selainohjelmaasi ja tarkista, että sivu näkyy oikein.
  3. Siirry takaisin tekstieditoriin ja jatka sivusi muokkaamista. Lisää tekstiin yksi h1-tason otsikko (valitse aihe itse).
  4. Kirjoita luomasi otsikon alle lyhyt kuvaus otsikon mukaisesta aiheesta ja lisää tämän jälkeen sivulle aiheeseen liittyvä valokuva sekä muutama linkki jollekin internetissä olevalle ja em. aihetta käsittelevälle sivulle.
  5. Luo sivullesi myös h2-tason otsikkoja (muutama riittää).
  6. Tallenna sivulle tekemäsi muutokset aika ajoin. Kun olet muokannut sivua haluamallasi tavalla, tarkista luomasi koodin toimivuus sekä validaattorilla että testaamalla sivun toimivuus useilla eri selaimilla.

HARJOITUS 2 – CSS-tyylitiedostot

Tässä harjoituksessa luot tyylisivun ja teet siihen haluamiasi muotoiluja.
  1. Luo uusi tyylisivu tekstieditorilla. Voit hyödyntää aiemmin tässä luvussa kuvattua tyylisivua. Tallenna tyylitiedosto kotisivuhakemistoosi esimerkiksi tyyliharjoitus.css-nimellä – tai valitse tiedostolle oma, haluamasi nimi.
  2. Määritä tyylisivulle seuraavat tyylit:
    1. h1: määritä kirjasinlaji Verdana-nimiseksi
    2. h2: määritä kirjasinlaji Arial-nimiseksi.
  3. Linkitä tyylisivu kaikkiin sivustosi sivuihin lisäämällä linkkikoodi kaikkien sivujesi head-elementtiin.
  4. Varmista, että sivujesi ulkoasu muuttuu tyylitiedostojen käyttöönoton myötä.
  5. Kun tyyli on mielestäsi valmis, validoi tyyli.