- COMP.CS.200
- 1. HTML: perusteet
- 1.4 Selaimen kehittäjätyökalut
Selaimen kehittäjätyökalut¶
Tällä kurssilla käytämme Google Chromea. Voit tietysti vapaasti käyttää mitä selainta ja työkaluja haluat, mutta ohjeet ovat Chromelle.
Verkkokehittäjille Chrome tarjoaa (ainakin tällä hetkellä) parhaat kehittäjätyökalut. Tarkastusten suorittaminen Chromessa tarjoaa paljon tietoa hakukoneoptimoinnista, saavutettavuudesta, suorituskyvystä, PWA-käytännöistä jne. Mm. näistä syystä esimerkeissämme on Chrome. Chromen lisäksi Edgen ja Firefoxin kehittäjätyökalut avataan painamalla F12.

Aukaise Chrome kehittäjätyökalunäkymä.

Voit myös valita minkä tahansa elementin napsauttamalla hiiren oikeaa painiketta ja valitsemalla “Inspect”.

Viemällä hiiri elementin päälle kehittäjätyökaluissa, korostaa sen sivunäkymässä.

Elementtejä voidaan muokata tässä tilassa, mutta muutokset eivät ole pysyviä.

Linkin teksti on muutettu

Elementit voidaan myös poistaa tarvittaessa

Vain navigointilinkit ja alatunniste jää jäljelle sisällön poistamisen jälkeen
Avaa tämä sivu ja kun olet sivustolla, avaa selaimen kehittäjätyökalut. Noudata kunkin kysymyksen ohjeita ja valitse oikea vastaus.
Laajentamalla <body>-elementin löydät kysymyksien 2-5 tagit. Esimerkiksi kysymyksessä 2 laajenna tagi <buttons> ja for kysymys 3 laajentaa tunnistetta <content> jne jne.