Ketahui bagaimana sebuah laman web dibina dengan melihat kod sumbernya
Ketika pertama kali memulakan karir saya sebagai pereka web, saya banyak belajar dengan mengkaji karya pereka web lain yang saya dikagumi. Saya tidak bersendirian dalam hal ini. Sama ada anda baru dalam industri web atau veteran yang berpengalaman, melihat sumber HTML laman web yang berbeza adalah sesuatu yang anda mungkin lakukan berkali-kali selama karier anda.
Bagi mereka yang baru dalam reka bentuk web, melihat kod sumber tapak adalah salah satu cara yang paling mudah untuk melihat bagaimana perkara tertentu dilakukan supaya anda boleh belajar dari kerja itu dan mula menggunakan kod atau teknik tertentu dalam kerja anda sendiri. Seperti mana-mana pereka laman web yang bekerja hari ini, terutama mereka yang telah melakukannya sejak hari-hari awal industri, dan itu adalah pertaruhan yang selamat bahawa mereka dengan memberitahu anda mereka mempelajari HTML hanya dengan melihat sumber laman web yang mereka lihat dan tertarik oleh. Di samping membaca buku reka bentuk web atau menghadiri persidangan profesional , melihat kod sumber tapak adalah cara yang bagus untuk pemula untuk mempelajari HTML.
Lebih Daripada Hanya HTML
Satu perkara yang harus diingat adalah bahawa fail sumber boleh menjadi sangat rumit (dan lebih kompleks laman web yang anda lihat adalah, lebih kompleks kod laman web itu mungkin). Sebagai tambahan kepada struktur HTML yang membentuk halaman yang anda lihat, terdapat juga CSS (lembaran gaya yang melayari) yang menentukan penampilan visual tapak tersebut. Di samping itu, banyak laman web hari ini termasuk fail skrip yang disertakan bersama dengan HTML.
Terdapat kemungkinan terdapat beberapa fail skrip, sebenarnya, masing-masing memberi aspek yang berbeza dari laman web ini. Secara terang-terangan, kod sumber tapak boleh kelihatan hebat, terutama jika anda baru melakukan ini. Jangan kecewa jika anda tidak dapat mengetahui apa yang berlaku dengan laman web tersebut dengan segera. Melihat sumber HTML hanyalah langkah pertama dalam proses ini. Dengan sedikit pengalaman, anda akan mula memahami dengan lebih baik bagaimana semua bahagian ini sesuai untuk membuat laman web yang anda lihat di pelayar anda. Apabila anda lebih mengenali kod itu, anda akan dapat mengetahui lebih lanjut daripadanya dan ia tidak sepatutnya membuat anda tertarik.
Jadi bagaimana anda melihat kod sumber laman web? Berikut adalah arahan langkah demi langkah untuk melakukannya menggunakan penyemak imbas Google Chrome.
Arahan Langkah demi Langkah
- Buka penyemak imbas web Google Chrome (jika anda tidak memasang Google Chrome, ini muat turun percuma).
- Navigasi ke laman web yang ingin anda periksa .
- Klik kanan halaman dan lihat pada menu yang muncul. Dari menu itu, klik Lihat sumber halaman .
- Kod sumber untuk halaman itu sekarang akan muncul sebagai tab baharu dalam penyemak imbas.
- Sebagai alternatif, anda juga boleh menggunakan pintasan papan kekunci CTRL + U pada PC untuk membuka tetingkap dengan kod sumber tapak yang dipaparkan. Pada Mac, pintasan ini ialah Command + Alt + U.
Alat Pembangun
Sebagai tambahan kepada keupayaan sumber halaman View yang mudah yang ditawarkan Google Chrome, anda juga boleh memanfaatkan Alat Pembangun yang sangat baik untuk menggali lebih dalam ke dalam laman web. Alat ini akan membolehkan anda bukan sahaja melihat HTML, tetapi juga CSS yang digunakan untuk melihat elemen dalam dokumen HTML tersebut.
Untuk menggunakan alat pembangun Chrome:
- Buka Google Chrome .
- Navigasi ke laman web yang ingin anda periksa .
- Klik ikon dengan tiga baris di sudut kanan atas tetingkap penyemak imbas.
- Dari menu, hover ke atas Alat lebih lanjut dan kemudian klik Alat Pembangun dalam menu yang muncul.
- Ini akan membuka tetingkap yang menunjukkan kod sumber HTML di sebelah kiri anak tetingkap dan CSS berkaitan di sebelah kanan.
- Sebagai alternatif, jika anda mengklik kanan elemen di halaman web dan pilih Periksa dari menu yang muncul, alat pemaju Chrome akan muncul dan unsur yang tepat yang anda pilih akan diserlahkan dalam HTML dengan CSS yang sesuai ditunjukkan di sebelah kanan. Ini sangat membantu jika anda ingin mengetahui lebih lanjut mengenai bagaimana satu bahagian tapak tertentu dibuat.
Adakah Melihat Kod Sumber Undang-Undang?
Selama bertahun-tahun, saya mempunyai banyak pereka web baru yang mempersoalkan sama ada ia boleh diterima untuk melihat kod sumber tapak dan menggunakannya untuk pendidikan mereka dan akhirnya untuk kerja yang mereka lakukan. Semasa menyalin kod tapak borong dan melepaskannya sebagai milik anda di tapak pastinya tidak dapat diterima, menggunakan kod itu sebagai batu loncatan untuk belajar dari sebenarnya berapa banyak kemajuan yang dibuat dalam industri ini.
Seperti yang saya nyatakan pada permulaan artikel ini, anda akan ditekan keras untuk mencari profesional web kerja hari ini yang belum mempelajari sesuatu dengan melihat sumber tapak! Ya, melihat kod sumber tapak adalah sah. Menggunakan kod itu sebagai sumber untuk membina sesuatu yang serupa juga baik. Mengambil kod as-ada dan lulus sebagai kerja anda adalah di mana anda mula menghadapi masalah.
Pada akhirnya, para profesional web belajar antara satu sama lain dan sering memperbaiki kerja yang mereka lihat dan diilhami, jadi jangan teragak-agak untuk melihat kod sumber tapak dan menggunakannya sebagai alat pembelajaran.