Lue, miten verkkosivusto on rakennettu tarkastelemalla sen lähdekoodia
Kun aloin aloittaa uraani web-suunnittelija, opin niin paljon tarkastelemalla muiden web-suunnittelijoiden työtä, jota ihailin. En ole yksin tässä. 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 koodi paremmin, voit oppia lisää siitä, eikä se näytä pelottavan sinua.
Miten katsot verkkosivuston lähdekoodia? Seuraavassa on vaiheittaiset ohjeet Google Chrome -selaimella.
Askel askeleelta ohjeet
- Avaa Google Chrome -selaimella (jos sinulla ei ole asennettuna Google Chrome -ohjelmaa, tämä on ilmainen lataus).
- Siirry sivulle, jota haluat tarkastella .
- Napsauta sivua hiiren kakkospainikkeella ja katso näytettävää valikkoa. Valitse valikosta Näytä sivun lähde .
- Tämän sivun lähdekoodi näkyy nyt selaimessa uudessa välilehdessä.
- Vaihtoehtoisesti voit käyttää CTRL + U : n pikanäppäimiä tietokoneella avata ikkuna, jossa on sivuston lähdekoodi. Macilla tämä pikavalinta on Command + Alt + U.
Kehittäjän työkalut
Yksinkertaisen View-sivun lähde -ominaisuuden lisäksi, jota 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:
- Avaa Google Chrome .
- Siirry sivulle, jota haluat tarkastella .
- Napsauta kuvaketta, jossa on kolme riviä selainikkunan oikeassa yläkulmassa.
- Valitse valikosta Lisää työkaluja ja valitse sitten näytettävästä valikosta Kehittäjätyökalut .
- Tämä avaa ikkunan, joka näyttää ruudun oikealla puolella olevan HTML-lähdekoodin ja siihen liittyvän CSS: n.
- Vaihtoehtoisesti, jos napsautat hiiren kakkospainikkeella jotain elementtiä Web-sivulla ja valitsemalla valikosta Tarkista , näyttöön tulee Chromein kehittäjätyökalut ja tarkka elementti, joka olet valinnut, korostuu HTML-koodilla, jossa on oikea CSS-osoite. Tämä on erittäin hyödyllistä, jos haluat lisätietoja siitä, miten tietyn osan sivustoa valmistettiin.
Onko lähdekoodin katselu oikeutettua?
Vuosien varrella minulla on ollut paljon uusia web-suunnittelijoita kyseenalaiseksi, onko sivuston lähdekoodia hyväksyttävissä ja käyttää sitä koulutuksessaan 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 mainitsin tämän artikkelin alussa, teidän olisi vaikea etsiä toimivaa web-ammattilaista tänään, joka ei ole oppinut jotain katselemalla sivuston lähdettä! 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.