Summary  
This chapter explains how to use browser developer tools to inspect and modify HTML structure and CSS rules for debugging and testing markup and style changes.  

General domain of usage  
Web development

# Kehittäjätyökalut
Nykyaikaisissa selaimissa on sisäänrakennetut kehittäjätyökalut, joiden avulla voit tarkastella ja debugata HTML-, CSS- ja JavaScript-koodia. Työkalut avataan painamalla **F12** tai napsauttamalla sivua hiiren oikealla painikkeella ja valitsemalla **Tarkastele**.

Esimerkiksi tarkastellaan `google.com`-sivua. Painamalla `F12` pääset seuraavaan näkymään:

- **Elements**-välilehti (vasemmalla) näyttää sivun HTML-rakenteen;
- **Styles**-välilehti (oikealla) näyttää valitun elementin CSS-säännöt.
- Kun viet hiiren elementin päälle, se korostetaan sivulla.

Elementtien tarkastelun lisäksi kehittäjätyökalut mahdollistavat **HTML**- ja **CSS**-koodin muokkaamisen. Muutokset näkyvät välittömästi verkkosivulla, mutta niitä ei tallenneta pysyvästi lähdekoodiin. Tämä ominaisuus on hyödyllinen merkkaus- ja tyylikokeiluihin sekä testaamiseen.

# Koodityyli
Koodityylillä tarkoitetaan HTML:n kirjoittamista selkeästi, luettavasti ja johdonmukaisesti. Vaikka HTML ei vaadi tiukkoja muotoilusääntöjä, hyvä rakenne helpottaa koodin ylläpitoa.

Hyvin muotoillun merkkauskoodin esimerkki:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9InV0Zi04IiAvPgogICAgPG1ldGEKICAgICAgbmFtZT0iZGVzY3JpcHRpb24iCiAgICAgIGNvbnRlbnQ9IkxlYXJuIHRoZSBwcmluY2lwbGVzIG9mIHdlYiBkZXZlbG9wbWVudC4iCiAgICAvPgogICAgPHRpdGxlPldlYiBEZXZlbG9wbWVudDwvdGl0bGU+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPGgxPldlbGNvbWUgdG8gV2ViIERldmVsb3BtZW50PC9oMT4KICAgICAgPG5hdj4KICAgICAgICA8dWw+CiAgICAgICAgICA8bGk+PGEgaHJlZj0iI2ludHJvZHVjdGlvbiI+SW50cm9kdWN0aW9uPC9hPjwvbGk+CiAgICAgICAgICA8bGk+PGEgaHJlZj0iI3R1dG9yaWFscyI+VHV0b3JpYWxzPC9hPjwvbGk+CiAgICAgICAgPC91bD4KICAgICAgPC9uYXY+CiAgICA8L2hlYWRlcj4KCiAgICA8bWFpbj4KICAgICAgPHNlY3Rpb24gaWQ9ImludHJvZHVjdGlvbiI+CiAgICAgICAgPGgyPkludHJvZHVjdGlvbjwvaDI+CiAgICAgICAgPHA+CiAgICAgICAgICBUaGlzIGlzIGEgZGVlcCBkaXZlIGludG8gd2ViIGRldmVsb3BtZW50LiBXZSB3aWxsIGV4cGxvcmUgdmFyaW91cwogICAgICAgICAgdGVjaG5vbG9naWVzLgogICAgICAgIDwvcD4KICAgICAgPC9zZWN0aW9uPgoKICAgICAgPHNlY3Rpb24gaWQ9InR1dG9yaWFscyI+CiAgICAgICAgPGgyPldlYiBEZXZlbG9wbWVudCBUdXRvcmlhbHM8L2gyPgogICAgICAgIDxwPkZvbGxvdyBhbG9uZyB0byBsZWFybiBIVE1MLCBDU1MsIEphdmFTY3JpcHQsIGFuZCBtb3JlITwvcD4KICAgICAgPC9zZWN0aW9uPgogICAgPC9tYWluPgoKICAgIDxmb290ZXI+CiAgICAgIDxwPiZjb3B5OyBNaWNoYWVsIEdyYW5kLiBBbGwgcmlnaHRzIHJlc2VydmVkLjwvcD4KICAgIDwvZm9vdGVyPgogIDwvYm9keT4KPC9odG1sPg==

Jos olet kiinnostunut koodin tyyliohjeiden parhaista käytännöistä, suositellaan tutustumaan seuraavaan lähteeseen: [Code Guide by @mdo](https://codeguide.co/).

Huomio

Mikä on kehittäjätyökalujen tärkein etu verkkoselaimissa?

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.

Kehittäjätyökalujen Käyttö HTML:n Tarkasteluun ja Virheiden Korjaukseen

Kehittäjätyökalut

Koodityyli