Hyödynnä kesäkampanjan etuhinnat 100-300 €/kurssi – etu voimassa koodilla ”kesä26” 1.6.-14.8.2026 tulleisiin kurssi-ilmoittautumisiin valituista koulutuksista. Tarkemmat tiedot kesäkampanjan kursseista ja ehdoista löydät Kampanjat-sivulta.

HTML ja CSS haltuun

Opi ymmärtämään, mistä verkkosivut rakentuvat ja miten HTML ja CSS vaikuttavat sivun sisältöön, rakenteeseen ja ulkoasuun. Koulutuksen jälkeen tunnistat tavallisimmat HTML-elementit, osaat tehdä pieniä sisältöön ja tyyleihin liittyviä muutoksia sekä ratkaista julkaisujärjestelmissä vastaan tulevia ongelmia aiempaa varmemmin.
corellia_web

kesto 1 pv

890 + ALV
  • Kurssimuoto: Etä

Ymmärrä verkkosivujen rakennetta ja muotoilua

Mistä verkkosivun sisältö, rakenne ja ulkoasu muodostuvat? Mitä julkaisujärjestelmän koodinäkymässä näkyvät merkinnät tarkoittavat, ja kuinka sisältöön voi tehdä pieniä korjauksia turvallisesti?

Tällä käytännönläheisellä yhden päivän kurssilla opit HTML ja CSS keskeiset periaatteet. Koulutuksen jälkeen ymmärrät paremmin verkkosivujen toimintaa, tunnistat tavallisimmat HTML-elementit ja osaat tulkita sekä muokata yksinkertaista HTML- ja CSS-koodia.

Opi ymmärtämään, mistä verkkosivut rakentuvat ja miten HTML ja CSS vaikuttavat sivun sisältöön, rakenteeseen ja ulkoasuun. Koulutuksen jälkeen tunnistat tavallisimmat HTML-elementit, osaat tehdä pieniä muutoksia koodinäkymässä ja ratkaista julkaisujärjestelmissä vastaan tulevia ongelmia aiempaa varmemmin.

Ota verkkosivujen taustalla toimivat tekniikat haltuun

Julkaisujärjestelmät tekevät verkkosisällön tuottamisesta helppoa, mutta toisinaan pelkkä visuaalinen editori ei riitä. Sisällön rakenne voi rikkoutua, muotoilut käyttäytyä odottamattomasti tai sivulle kopioitu teksti tuoda mukanaan tarpeetonta koodia. Tällöin HTML ja CSS perusteiden ymmärtämisestä on suuri apu.

HTML määrittelee verkkosivun sisällön ja rakenteen. CSS puolestaan ohjaa sen ulkoasua, kuten värejä, tekstityylejä, välistyksiä ja elementtien sijoittelua. Kun ymmärrät näiden tekniikoiden erilaiset tehtävät, osaat muokata sisältöä hallitummin ja keskustella sujuvammin myös sivuston suunnittelijoiden ja teknisten toteuttajien kanssa.

Kurssilla tutkimme valmiita verkkosivuja ja sisältökatkelmia, teemme niihin pieniä muutoksia ja tarkastelemme muutosten vaikutuksia selaimessa. Samalla opit välttämään tavallisimpia virheitä ja käyttämään HTML:ää sisällön merkityksen mukaisesti.

Mitä opit tällä kurssilla?

Kurssin jälkeen osaat:

  • selittää, mitä HTML ja CSS tekevät verkkosivulla
  • tunnistaa HTML-dokumentin ja yksittäisen elementin rakenteen
  • lukea ja muokata yksinkertaista HTML-koodia
  • käyttää tavallisimpia tekstiin, otsikoihin, luetteloihin, linkkeihin ja kuviin liittyviä HTML-elementtejä
  • rakentaa sisällöstä loogista ja semanttisesti tarkoituksenmukaista
  • tunnistaa tavallisimmat virheet HTML-rakenteessa
  • ymmärtää CSS-säännön rakenteen ja kohdistaa tyylejä haluttuihin elementteihin
  • tehdä pieniä muutoksia esimerkiksi väreihin, tekstin ulkoasuun ja välistyksiin
  • käyttää selaimen kehittäjätyökaluja HTML ja CSS tutkimiseen
  • selvittää julkaisujärjestelmässä esiintyviä sisältö- ja muotoiluongelmia aiempaa varmemmin.

Kenelle kurssi sopii?

Kurssi sopii kaikille, jotka tuottavat, muokkaavat tai ylläpitävät verkkosisältöjä ja haluavat ymmärtää paremmin verkkosivujen taustalla toimivia tekniikoita. Se on suunnattu erityisesti:

  • verkkosivujen sisällöntuottajille ja päivittäjille
  • viestinnän ja markkinoinnin ammattilaisille
  • WordPressin tai muun julkaisujärjestelmän käyttäjille
  • verkkokauppojen sisällöstä vastaaville
  • henkilöille, jotka tilaavat tai koordinoivat verkkosivujen toteutuksia

Kurssin toteutustapa: Kurssi toteutetaan pääsääntöisesti etäkoulutuksena. Sovittaessa kurssi voidaan totettaa myös luokkakoulutuksena tai asiakkaan tiloissa.

Tietoa koulutuksista

Luokkakoulutukset
Corellian koulutustiloissa:
Kalevankatu 9 A, Helsinki

Kiinnostaako asiakaskohtainen toteutus? Meillä onnistuu.

Kurssin olennainen sisältö

Miten verkkosivu toimii?

  • Verkkosivun muodostuminen selaimessa
  • HTML, CSS ja JavaScriptin erilaiset tehtävät
  • Selain, palvelin ja verkko-osoite
  • Lähdekoodi ja selaimen muodostama sivu
  • Julkaisujärjestelmän tuottama HTML
  • Responsiivisen sivun perusajatus

HTML perusteet

  • HTML-elementit, tunnisteet ja attribuutit
  • Aloitus- ja lopetustunnisteet
  • Elementtien sijoittaminen sisäkkäin
  • HTML-dokumentin perusrakenne
  • Kommenttien käyttäminen
  • Erikoismerkit HTML-sisällössä
  • Tavallisimmat rakennevirheet

Tekstin ja sisällön merkitseminen

  • Otsikot ja niiden looginen järjestys
  • Tekstikappaleet
  • Numeroimattomat ja numeroidut luettelot
  • Korostukset ja niiden merkitys
  • Sisällön ryhmittely
  • Rakenteen ja ulkoasun erottaminen toisistaan
  • Semanttisen HTML perusteet

Linkit ja kuvat

  • Linkin rakenne ja kohdeosoite
  • Sivuston sisäiset ja ulkoiset linkit
  • Linkittäminen sivun tiettyyn kohtaan
  • Sähköposti- ja puhelinlinkit
  • Kuvaavat linkkitekstit
  • Kuvan lisääminen HTML-sisältöön
  • Kuvan osoite, koko ja vaihtoehtoinen teksti
  • Kuvatekstit
  • Kuvien tiedostomuodot verkkokäytössä

Lomakkeet

  • Lomakesuunnittelun merkitys
  • Kenttien pakollisuus ja merkitseminen, ohjeistus
  • Lomakekentät, input-tyypit
  • Lomakemetodit (GET ja POST)
  • Lomakkeen action

Saavutettavan HTML perusteet

  • Miksi HTML-elementin oikea valinta on tärkeää?
  • Otsikkorakenteen merkitys
  • Linkkien ja painikkeiden erilaiset tehtävät
  • Kuvien vaihtoehtoiset tekstit
  • Sisällön looginen lukujärjestys
  • Miten ruudunlukija hyödyntää HTML-rakennetta?
  • Tavallisimmat sisällöntuottajan vältettävissä olevat saavutettavuusvirheet

CSS perusteet

  • Mitä CSS tekee?
  • CSS-säännön rakenne
  • Valitsin, ominaisuus ja arvo
  • Tyylien kirjoittaminen ja liittäminen HTML-sivuun
  • Elementti-, luokka- (class) ja tunnistevalitsimet (id)
  • Useiden elementtien valitseminen
  • Periytyminen ja tyylien kohdistuminen
  • Miksi jokin CSS-sääntö ei vaikuta odotetusti?

Tekstin ja värien muotoilu CSSä

  • Tekstin väri ja taustaväri
  • Kirjasinperhe ja kirjasinkoko
  • Riviväli ja tekstin tasaus
  • Lihavointi ja muut tekstityylit
  • Linkkien ulkoasu
  • Värien merkitseminen CSSä
  • Luettavuuden ja riittävän kontrastin perusteet

Elementtien koko ja välistykset

  • CSS laatikkomalli
  • Sisältö, sisämarginaali, reunus ja ulkomarginaali
  • Leveyden ja korkeuden määrittäminen
  • Pikselit, prosentit ja suhteelliset mittayksiköt
  • Reunukset ja taustat
  • Elementtien näkyvyyden perusteet
  • Tavallisten asetteluongelmien tunnistaminen

Responsiivisuuden perusteet

  • Erilaisten näyttökokojen huomioiminen, asemointitekniikoita
  • Flexbox asemoinnin perusteet
  • Joustavat leveydet ja kuvat
  • Kiinteiden mittojen mahdolliset ongelmat
  • Media query -sääntöjen perusidea
  • Sisällön tarkasteleminen eri näyttöleveyksillä
  • Miksi sama sisältö voi näyttää erilaiselta eri laitteissa?

Selaimen kehittäjätyökalut

  • Sivun HTML-rakenteen tutkiminen
  • Elementin käyttämien CSS-tyylien tarkasteleminen
  • Tyylien kokeileminen selaimessa
  • Korvautuneiden ja periytyvien tyylien tunnistaminen
  • Elementin koon ja välistysten tutkiminen
  • Responsiivisen näkymän käyttäminen

Käytännön harjoitukset

Kurssilla opitaan osin tekemällä asioita alusta alkaen itse ja osin tutkimalla ja muokkaamalla valmiita sisältöjä, mikä mahdollistaa asioiden nopeamman käsittelyn. Koulutuksen aikana hyödynnetään koodieditorina Visual Studio Code työkalua.

Kurssin rajaus

Kurssi antaa yleiskuvan HTML ja CSS toiminnasta ja valmiudet tehdä pieniä sisältöön sekä ulkoasuun liittyviä muutoksia. Kurssilla ei rakenneta kokonaista verkkosivustoa eikä käsitellä JavaScript-ohjelmointia, palvelintekniikoita tai vaativia sivustojen asetteluratkaisuja.

Kurssin tavoitteena ei ole kouluttaa osallistujasta verkkokehittäjää yhdessä päivässä, vaan antaa käytännöllinen ymmärrys verkkosivujen rakenteesta ja muotoilusta.

Kurssin jälkeen

Ymmärrät, miten HTML muodostaa verkkosivun sisällön ja rakenteen sekä miten CSS ohjaa sen ulkoasua. Osaat tulkita yksinkertaista koodia, tehdä pieniä muutoksia ja selvittää tavallisia julkaisujärjestelmien sisältöongelmia.

Pystyt myös kuvaamaan teknisiä ongelmia täsmällisemmin ja keskustelemaan sivuston kehittäjien kanssa yhteisellä kielellä.

Ota HTML ja CSS haltuun – työskentele verkkosisältöjen kanssa aiempaa varmemmin!

Kurssin kesto

Kesto 1 pv.

Kurssityyppi

Etä

Kouluttajat

Kari Selovuo

Ilmoittaudu kurssille

Oletko kiinnostunut asiakaskohtaisesta toteutuksesta?

Kerro tarpeesi, niin suunnittelemme koulutuksen tarpeisiinne räätälöitynä.