Kuinka katsella HTML-lähdettä Google Chromessa

Riippumatta siitä, oletko uusi web-toimiala tai kokenut veteraani, eri verkkosivujen HTML-lähteen katseleminen on jotain, jota olet todennäköisesti tekemässä monta kertaa urasi aikana.

Niille, jotka ovat uudet web-suunnittelussa, sivuston lähdekoodin katselu on yksi helpoimmista tavoista nähdä, kuinka tiettyjä asioita tehdään, jotta voit oppia tästä työstä ja aloittaa tietyn koodin tai tekniikan käytön omassa työssäsi. Kuten mikä tahansa verkon suunnittelija työskentelee tänään, etenkin niitä, jotka ovat olleet siellä alusta lähtien, ja se on turvallinen veto, että he kertovat, että he oppivat HTML: ää yksinkertaisesti katselemalla lähdettä verkkosivuista, joita he näkivät ja jotka olivat kiehtoneet mennessä. Web-suunnittelukirjojen lukemisen tai ammatillisten konferenssien lukemisen lisäksi sivuston lähdekoodin katselu on erinomainen tapa oppia HTML-aloittelijoille.

Enemmän kuin vain HTML

Yksi muistaa on, että lähdetiedostot voivat olla hyvin monimutkaisia (ja monimutkaisempi verkkosivusto, jota katselet on, sitä monimutkaisempi sivuston koodi on todennäköisesti). HTML-rakenne, joka muodostaa katsomasi sivun, sisältää myös CSS (Cascading style sheets), jotka sanovat kyseisen sivuston visuaalisen ilmeen. Lisäksi monet verkkosivustot sisältävät käsikirjatiedostot mukana HTML: n mukana.

Siihen sisältyy todennäköisesti useita komentojonotiedostoja, jotka itse asiassa kaikki käyttävät sivuston eri osa-alueita. Suoraan sanottuna sivuston lähdekoodi voi tuntua ylivoimalta, varsinkin jos olet uusi tekemättä. Älä turhauta, jos et voi selvittää, mitä sivustolla tapahtuu heti. HTML-lähteen katselu on vain ensimmäinen vaihe tässä prosessissa. Pienellä kokemuksella voit alkaa ymmärtää paremmin, miten kaikki nämä kappaleet sopivat yhteen luomaan verkkosivustosi, jonka näet selaimessasi. Kun tunnet koodin paremmin, voit oppia lisää siitä, eikä se näytä niin pelottavaa sinulle.

Miten katsot verkkosivuston lähdekoodia? Tässä on vaiheittaiset ohjeet Google Chromen selaimella.

Askel askeleelta ohjeet

Avaa Google Chrome -selaimessa (jos sinulla ei ole asennettuna Google Chromea, tämä on ilmainen lataus).
Siirry kohtaan jonka haluat tarkastella.
Oikealla painikkeella sivu ja katso valikkoa, joka tulee näkyviin. Valitse kyseisestä valikosta Näytä sivun lähdekoodi.
Tämän sivun lähdekoodi näkyy nyt selaimessa uudessa välilehdessä.
Vaihtoehtoisesti voit käyttää myös näppäimistön pikanäppäimiä CTRL + U avataksesi ikkunan, jossa on sivuston lähdekoodi. Macilla tämä pikavalinta on Komento + vaihtoehto + U.

Kehitystyökalut

Sen lisäksi, että yksinkertainen Näytä sivun lähdekoodi jonka Google Chrome tarjoaa, voit myös hyödyntää erinomaisia kehittäjätyökaluja kaivamaan entistä syvemmälle sivustoon. Näillä työkaluilla voit nähdä HTML: n lisäksi myös CSS: n, joka koskee kyseisen HTML-asiakirjan näkymän elementtejä.

Chrome-kehittäjätyökalujen käyttäminen:

Avata Google Chrome.
Navigoida johonkin sivu, jota haluat tarkastella.
Klikkaa kuvake kolmella rivillä selainikkunan oikeassa yläkulmassa.
Siirrä valikosta valikosta Lisää työkaluja ja napsauta sitten Kehitystyökalut valikossa, joka tulee näkyviin.
Tämä avaa ikkunan, joka näyttää ruudun oikealla puolella olevan HTML-lähdekoodin ja siihen liittyvän CSS: n.
Vaihtoehtoisesti, jos napsautat hiiren oikealla painikkeella Web-sivun elementti ja valitse Tarkastaa avautuvasta valikosta Chrome-kehittäjätyökalut avautuvat ja tarkka elementti, jonka olet valinnut, korostuu HTML-koodilla, jossa vastaava CSS näkyy oikealla. Tämä on erittäin hyödyllistä, jos haluat lisätietoja siitä, miten tietyn osan sivustoa valmistettiin.

Onko lähdekoodin katselu oikeutettua?

Vuosien mittaan meillä on ollut paljon uusia web-suunnittelijoita kysymään, onko sivuston lähdekoodia hyväksyttävää ja käyttää sitä koulutukselle ja lopulta tekemästään työstä. Kun kopioit sivuston koodin tukkumyyntiä ja siirrät sen pois omasta sivustossasi, ei varmastikaan ole hyväksyttävää. Käyttämällä tätä koodia ponnahduslautana oppimiseen on oikeastaan kuinka paljon kehitystä tehdään tällä alalla.

Kuten mainitsimme tämän artikkelin alussa, sinun olisi vaikea löytää toimiva web-ammattilainen tänään, joka ei ole oppinut jotain katselemalla sivuston lähde! Kyllä, sivuston lähdekoodin katselu on laillista. Käyttämällä tätä koodia resurssiksi rakentaa jotain vastaavaa on myös hieno. Kun koodi on-on ja siirrä se pois, koska työsi on, jos aiot kohdata ongelmia.

Loppujen lopuksi verkko-opiskelijat oppivat toisiltaan ja parantavat usein työtä, jota he näkevät ja ovat inspiroineet, joten älä epäröi tarkastella sivuston lähdekoodia ja käyttää sitä oppimistyökaluna.