Mitä tietää
- Napsauta verkkosivua hiiren kakkospainikkeella ja valitse Näytä sivun lähdekoodi.
- Pikanäppäin: Paina Ctrl+sinä (Windows PC) tai Tehtävä+Valinta+sinä (Mac).
- Jos haluat käyttää Chromen kehittäjätyökaluja, valitse Valikko (kolme pistettä) > Lisää työkaluja > Kehitystyökalut.
Tässä artikkelissa kerrotaan, kuinka pääset käyttämään verkkosivuston HTML-lähdekoodia Google Chrome -selaimella ja kuinka pääset käyttämään ja käyttämään Chromen kehittäjätyökaluja. Sivuston lähdekoodin tarkasteleminen on erinomainen tapa aloittelijoille oppia HTML:ää.
Näytä lähdekoodi Chromessa
Joten miten tarkastelet verkkosivuston lähdekoodia? Tässä on vaiheittaiset ohjeet sen tekemiseen Google Chrome -selaimella.
-
Avaa Google Chrome -selain (jos sinulla ei ole Google Chromea asennettuna, se on ilmainen lataus).
-
Navigoi kohtaan verkkosivu, jota haluat tarkastella.
-
Oikealla painikkeella sivulle ja katso näkyviin tulevaa valikkoa. Napsauta sitä valikkoa Näytä sivun lähdekoodi.
-
Sivun lähdekoodi näkyy nyt uutena välilehtenä selaimessa.
-
Vaihtoehtoisesti voit käyttää myös pikanäppäimiä Ctrl+sinä tietokoneessa avataksesi ikkunan, jossa näkyy sivuston lähdekoodi. Macissa tämä pikakuvake on: Tehtävä+Valinta+sinä.
Käytä Chromen kehittäjätyökaluja
Yksinkertaisten lisäksi Näytä sivun lähdekoodi Google Chromen tarjoaman mahdollisuuden, voit myös hyödyntää heidän erinomaisia kehittäjätyökaluja kaivaaksesi sivustoa entistä syvemmälle. Näiden työkalujen avulla voit nähdä HTML:n lisäksi myös CSS:n, joka koskee HTML-dokumentin näyttöelementtejä. Chromen kehittäjätyökalujen käyttäminen:
-
Avata Google Chrome.
-
Navigoida johonkin verkkosivu, jota haluat tarkastella.
-
Valitse valikko kolmella pisteellä selainikkunan oikeassa yläkulmassa.
-
Aseta hiiren osoitin valikkoon Lisää työkaluja ja valitse sitten Kehitystyökalut näkyviin tulevassa valikossa.
-
Näyttöön tulee ikkuna, jossa on HTML-lähdekoodi paneelin vasemmalla puolella ja siihen liittyvä CSS oikealla.
-
Vaihtoehtoisesti, jos napsautat hiiren kakkospainikkeella Web-sivun elementti ja valitse Tarkastaa näkyviin tulevassa valikossa Chromen kehittäjätyökalut tulevat näkyviin ja korostavat HTML-koodista valitsemasi osan CSS-syötteen oikealla puolella. Se on erittäin hyödyllinen, jos haluat oppia lisää tietystä sivuston osasta.
Onko lähdekoodin katselu laillista?
Vuosien varrella monet uudet web-suunnittelijat ovat kyseenalaistaneet, onko hyväksyttävää tarkastella sivuston lähdekoodia ja käyttää sitä koulutuksessaan ja lopulta työssään. Vaikka sivuston koodin joukkokopioiminen ja sen välittäminen verkkosivustolle omana koodina ei ole hyväksyttävää, koodin käyttäminen ponnahduslautana oppimiseen osoittaa, kuinka paljon tällä alalla on edistytty. Kuten mainitsimme tämän artikkelin alussa, tänään olisi vaikea löytää toimivaa verkkoammattilaista, joka ei olisi oppinut mitään katsomalla sivuston lähdettä! Kyllä, on laillista nähdä sivuston lähdekoodi. On myös turvallista käyttää tätä koodia työkaluna samanlaisen rakentamiseen. Kun otat koodin sellaisenaan ja välität sen työksesi, alat törmätä ongelmiin. Viime kädessä verkkoammattilaiset oppivat toisiltaan ja usein parantavat näkemäänsä työtä ja saavat inspiraatiota, joten älä epäröi katsoa sivuston lähdekoodia ja käyttää sitä oppimistyökaluna.
Enemmän kuin pelkkä HTML
Yksi asia on muistaa, että lähdetiedostot voivat olla hyvin monimutkaisia (ja mitä monimutkaisempi verkkosivusto katselet, sitä monimutkaisempi sen koodi todennäköisesti on). Sivun muodostavan HTML-rakenteen lisäksi mukana tulee myös CSS-tyylisivuja (Cascading style sheets), jotka sanelevat kyseisen sivuston visuaalisen ulkoasun. Lisäksi monet verkkosivustot sisältävät nykyään komentosarjatiedostoja, jotka sisältyvät HTML-koodiin. Useita komentosarjatiedostoja on todennäköisesti mukana; itse asiassa jokainen niistä ohjaa sivuston eri puolia. Suoraan sanottuna sivuston lähdekoodi voi tuntua ylivoimaiselta, varsinkin jos et ole tehnyt tätä aiemmin. Älä turhaudu, jos et heti ymmärrä, mitä kyseiselle sivustolle tapahtuu. HTML-lähteen tarkasteleminen on vasta ensimmäinen askel tässä prosessissa. Pienellä kokemuksella ymmärrät paremmin, kuinka kaikki nämä osat sopivat yhteen luomaan selaimessasi näkemäsi verkkosivuston. Kun tutustut koodiin paremmin, voit oppia siitä enemmän, eikä se näytä sinusta niin pelottavalta.