Summary  
This chapter explains the programming concepts of structuring content with HTML, styling it with CSS, and adding interactivity through JavaScript.

General domain of usage  
Front-end web development

Verkkosivusto koostuu eri tiedostoista, jotka toimivat yhdessä muodostaen sen, mitä näet selaimessa. Kolme pääkomponenttia ovat **HTML**, **CSS** ja **JavaScript**, joilla jokaisella on oma tehtävänsä.

### HTML-tiedosto
HTML on jokaisen verkkosivun perusta.
Jos verkkosivusto olisi talo, HTML olisi tiilet, materiaali, josta rakenne rakennetaan. HTML määrittelee tekstin, kuvat, painikkeet, linkit ja kaiken sisällön, joka näkyy sivulla.

### CSS-tiedosto
CSS vastaa verkkosivuston visuaalisesta ulkoasusta.
Jatkaen talovertauksella, CSS on maali, koristeet ja suunnitteluratkaisut, eli asiat, jotka vaikuttavat siihen, miltä talo näyttää. CSS:n avulla voi muuttaa värejä, muotoilla tekstiä, luoda asetteluja, lisätä välejä ja tehdä elementeistä visuaalisesti houkuttelevia.

CSS ottaa raakasisällön HTML:stä ja saa sen näyttämään hyvältä.

### JavaScript-tiedosto
JavaScript lisää toiminnallisuutta ja vuorovaikutteisuutta.
Talovertauksessa JavaScript on sähkö, kodinkoneet ja työkalut, eli ominaisuudet, jotka tekevät talosta toimivan. JavaScript mahdollistaa verkkosivujen reagoimisen käyttäjän toimintoihin, interaktiivisten elementtien näyttämisen, sisällön dynaamisen päivittämisen, lomakkeiden validoinnin ja elementtien animoinnin.

Ilman JavaScriptiä verkkosivu pysyisi staattisena ja ei-vuorovaikutteisena.

Mitkä ovat kolme tiedostotyyppiä, jotka yleisimmin vastaanotetaan palvelimelta verkkosivua käytettäessä?

Mikä on HTML-tiedostojen tarkoitus verkkosivustolla?

Mikä on CSS-tiedostojen tarkoitus verkkosivustolla?

Mikä on JavaScript-koodin tarkoitus verkkosivustolla?

Opi HTML:n (HyperText Markup Language) perusteet, joka on verkkokehityksen perusta. Tämä aloittelijaystävällinen kurssi kattaa tunnisteet, attribuutit, elementit ja verkkosivujen rakenteen. Hanki käytännön taitoja otsikoiden, kappaleiden, listojen, kuvien, linkkien, lomakkeiden ja taulukoiden luomisessa. Tutustu parhaisiin käytäntöihin, optimointiin ja verkkosivustojen saavutettavuuteen. Aloita verkkokehityksen matkasi HTML:n avulla.

Tutki verkon sisäistä toimintaa. Opi, miten data kulkee verkkojen läpi, tutustu protokollien rooliin ja selvitä IP-osoitteiden ja verkkotunnusten mysteerit. Saa korkeatasoinen ymmärrys siitä, miten verkkoselaimet ja palvelimet kommunikoivat toimittaakseen verkkosisältöä.

Tutustu tunnisteiden voimaan sisällön jäsentämisessä, otsikoista ja kappaleista listoihin ja taulukoihin. Opi, kuinka voit parantaa elementtejä attribuuteilla.

HTML-dokumentin rakenteen ydin. Opi HTML-dokumentin osat, mukaan lukien doctype-ilmoitus, head ja body. Ymmärrä kunkin elementin tarkoitus ja miten ne vaikuttavat verkkosivun kokonaisrakenteeseen.

Tee verkkosivusta houkuttelevampi median, kuten kuvien, äänen ja videon avulla. Työskentele jäsennellyn taulukkomuotoisen datan kanssa taulukoiden muodossa.

Tutustu HTML-lomakkeiden monipuolisuuteen. Opi suunnittelemaan intuitiivisia ja käyttäjäystävällisiä lomakkeita hyödyntämällä keskeisiä käsitteitä ja tekniikoita. Selvitä, kuinka lomakkeet mahdollistavat käyttäjän vuorovaikutuksen ja tietojen lähettämisen verkkosivustoilla.

Verkkosivustojen Toiminnan Ymmärtäminen

HTML-tiedosto

CSS-tiedosto

JavaScript-tiedosto

1. Mitkä ovat kolme tiedostotyyppiä, jotka yleisimmin vastaanotetaan palvelimelta verkkosivua käytettäessä?

2. Mikä on HTML-tiedostojen tarkoitus verkkosivustolla?

3. Mikä on CSS-tiedostojen tarkoitus verkkosivustolla?

4. Mikä on JavaScript-koodin tarkoitus verkkosivustolla?