Alamin kung paano binuo ang isang website sa pamamagitan ng pagtingin sa source code nito
Noong una kong sinimulan ang aking karera bilang isang taga-disenyo ng web, natutunan ko ng napakaraming natutunan sa pagrepaso sa gawain ng iba pang mga taga-disenyo ng web na hinahangaan ko. Hindi ako nag-iisa sa ganito. Kung ikaw ay bago sa industriya ng web o isang napapanahong beterano, tinitingnan ang pinagmulan ng HTML ng iba't ibang mga web page ay isang bagay na malamang na gagawin mo nang maraming beses sa kurso ng iyong karera.
Para sa mga bago sa disenyo ng web, ang pagtingin sa source code ng isang site ay isa sa pinakamadaling paraan upang makita kung paano ang ilang mga bagay ay ginagawa upang matutunan mo mula sa gawaing iyon at simulang gamitin ang ilang mga code o pamamaraan sa iyong sariling gawain. Tulad ng anumang taga-disenyo ng web na nagtatrabaho ngayon, lalo na ang mga taong iyon mula pa noong mga unang araw ng industriya, at ito ay isang ligtas na mapagpipilian na sasabihin nila sa iyo na natuto sila ng HTML sa pamamagitan lamang ng pagtingin sa pinagmumulan ng mga web page na nakita nila at nasasabik sa pamamagitan ng. Bilang karagdagan sa pagbabasa ng mga libro sa disenyo ng web o pagdalo sa mga propesyonal na kumperensya , ang pagtingin sa source code ng isang site ay isang mahusay na paraan para sa mga nagsisimula upang matuto ng HTML.
Higit Pa sa HTML
Ang isang bagay na dapat tandaan ay ang mga pinagmumulan ng mga file ay maaaring maging lubhang kumplikado (at ang mas kumplikado sa website na iyong tinitingnan ay, ang mas kumplikadong code ng site na iyon ay malamang na maging). Bilang karagdagan sa HTML na istraktura na bumubuo sa pahina na iyong tinitingnan, magkakaroon din ng CSS (cascading style sheets) na magdikta sa visual na hitsura ng site na iyon. Bukod pa rito, maraming mga website sa araw na ito ay kasama ang mga file ng script kasama kasama ang HTML.
May posibilidad na maging maramihang mga file ng script kasama, sa katunayan, ang bawat isa powering iba't ibang mga aspeto ng site. Lantaran, ang source code ng isang site ay maaaring mukhang napakalaki, lalo na kung ikaw ay bago sa paggawa nito. Huwag kayong biguin kung hindi mo alam kung ano ang nangyayari sa site na iyon kaagad. Ang pagtingin sa pinagmulan ng HTML ay ang unang hakbang lamang sa prosesong ito. Sa isang maliit na karanasan, magsisimula kang mas mahusay na maunawaan kung paano magkasya magkasama ang lahat ng mga piraso upang lumikha ng website na nakikita mo sa iyong browser. Habang mas pamilyar ka sa code, mas matututunan mo ang higit pa mula dito at hindi ito mukhang nakakatakot sa iyo.
Kaya paano mo tinitingnan ang source code ng isang website? Narito ang sunud-sunod na mga tagubilin upang magawa ito gamit ang Google Chrome browser.
Hakbang sa Mga Tagubilin sa Hakbang
- Buksan ang web browser ng Google Chrome (kung wala kang naka-install na Google Chrome, ito ay isang libreng pag-download).
- Mag-navigate sa pahina ng web na gusto mong suriin .
- Mag-right-click ang pahina at tingnan ang menu na lilitaw. Mula sa menu na iyon, i-click ang Tingnan ang pinagmulan ng pahina .
- Lilitaw na ngayon ang source code para sa pahinang iyon bilang isang bagong tab sa browser.
- Bilang kahalili, maaari mo ring gamitin ang mga shortcut sa keyboard ng CTRL + U sa isang PC upang magbukas ng isang window na may ipinapakita na source code ng site. Sa isang Mac, ang shortcut na ito ay Command + Alt + U.
Mga Tool ng Developer
Bilang karagdagan sa simpleng Tingnan ang kakayahang mapagkukunan ng pahina ng pag- aalok ng Google Chrome, maaari mo ring samantalahin ang kanilang mahusay na Mga Tool sa Pag-develop upang humukay kahit na mas malalim sa isang site. Ang mga tool na ito ay magbibigay-daan sa iyo upang hindi lamang makita ang HTML, kundi pati na rin ang CSS na nalalapat upang tingnan ang mga elemento sa dokumentong HTML.
Upang magamit ang mga tool ng nag-develop ng Chrome:
- Buksan ang Google Chrome .
- Mag-navigate sa pahina ng web na gusto mong suriin .
- I-click ang icon na may tatlong linya sa kanang itaas na sulok ng window ng browser.
- Mula sa menu, mag-hover sa Higit pang mga tool at pagkatapos ay i-click ang Mga tool ng Developer sa menu na lilitaw.
- Magbubukas ito ng isang window na nagpapakita ng HTML source code sa kaliwa ng pane at ang kaugnay na CSS sa kanan.
- Bilang kahalili, kung tama kang mag-click sa isang elemento sa isang web page at piliin ang Siyasatin mula sa menu na lilitaw, ang mga tool ng developer ng Chrome ay magpa-pop up at ang eksaktong sangkap na napili mo ay ma-highlight sa HTML gamit ang kaukulang CSS na ipinapakita sa kanan. Ito ay sobrang nakakatulong kung gusto mong matuto nang higit pa tungkol sa kung paano ginawa ang isang tukoy na piraso ng isang site.
Ang Legal na Pagtingin sa Source Code ba?
Sa paglipas ng mga taon, marami akong bagong tanong sa mga designer ng web kung tinatanggap na tingnan ang source code ng isang site at gamitin ito para sa kanilang pag-aaral at sa huli para sa gawain na ginagawa nila. Habang ang pagkopya ng code ng isang site ng pakyawan at pagpapasa ito bilang iyong sarili sa isang site ay tiyak na hindi katanggap-tanggap, gamit ang code na bilang isang pambuwelo upang matuto mula sa ay talagang kung gaano karaming mga advancements ay ginawa sa industriya na ito.
Tulad ng nabanggit ko sa simula ng artikulong ito, masisikap ka upang makahanap ng isang nagtatrabaho web professional ngayon na hindi natutunan ang isang bagay sa pamamagitan ng pagtingin sa pinagmulan ng isang site! Oo, ang pagtingin sa source code ng isang site ay legal. Ang paggamit ng code na iyon bilang isang mapagkukunan upang bumuo ng isang bagay na katulad din ay pagmultahin. Ang pagkuha ng code bilang-ay at pagpasa ito bilang iyong trabaho ay kung saan ka magsimulang makatagpo ng mga problema.
Sa dulo, natututo ang mga propesyonal sa web mula sa isa't isa at madalas na nagpapabuti sa trabaho na nakikita nila at kinasihan ng, kaya huwag mag-atubiling tingnan ang source code ng site at gamitin ito bilang tool sa pag-aaral.