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.

../../_images/jwt_dt_1.png

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


../../_images/jwt_dt_2.png

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


../../_images/jwt_dt_3.png

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


../../_images/jwt_dt_4.png

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

../../_images/jwt_dt_5.png

Linkin teksti on muutettu


../../_images/jwt_dt_6.png

Elementit voidaan myös poistaa tarvittaessa

../../_images/jwt_dt_7.png

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.

Valitse oikea sivun otsikko

Kuinka monta painiketta HTML-koodista löytyy?

Poista attribuutti “hidden” kohteesta <content>. Kuinka monta Hellota näet?

Mitä kommentti <comment>-tagin sisällä sanoo?

Mitä tapahtuu, kun poistat määritteen open <dialogista>?

Palautusta lähetetään...