Pelajari bagaimana situs web dibangun dengan melihat kode sumbernya
Ketika saya memulai karir saya sebagai perancang web, saya belajar banyak dengan meninjau karya perancang web lain yang saya kagumi. Saya tidak sendirian dalam hal ini. Apakah Anda baru di industri web atau veteran berpengalaman, melihat sumber HTML dari halaman web yang berbeda adalah sesuatu yang mungkin Anda lakukan berkali-kali selama karir Anda.
Bagi mereka yang baru mengenal desain web, melihat kode sumber situs adalah salah satu cara termudah untuk melihat bagaimana hal-hal tertentu dilakukan sehingga Anda dapat belajar dari pekerjaan itu dan mulai menggunakan kode atau teknik tertentu dalam pekerjaan Anda sendiri. Seperti halnya perancang web yang bekerja hari ini, terutama mereka yang telah bekerja sejak awal industri, dan itu adalah taruhan aman bahwa mereka memberi tahu Anda bahwa mereka belajar HTML hanya dengan melihat sumber laman web yang mereka lihat dan tertarik oleh. Selain membaca buku desain web atau menghadiri konferensi profesional , melihat kode sumber situs adalah cara yang bagus bagi pemula untuk belajar HTML.
Lebih dari sekedar HTML
Satu hal yang perlu diingat adalah bahwa file sumber bisa sangat rumit (dan semakin kompleks situs web yang Anda lihat, semakin kompleks kemungkinan kode situs itu). Selain struktur HTML yang membentuk halaman yang Anda lihat, juga akan ada CSS (cascading style sheets) yang menentukan tampilan visual situs tersebut. Selain itu, banyak situs web hari ini akan menyertakan file skrip yang disertakan bersama dengan HTML.
Kemungkinan ada beberapa file skrip yang disertakan, pada kenyataannya, masing-masing memberdayakan berbagai aspek situs. Terus terang, kode sumber situs dapat terasa luar biasa, terutama jika Anda baru melakukan hal ini. Jangan frustasi jika Anda tidak tahu apa yang terjadi dengan situs itu segera. Melihat sumber HTML hanyalah langkah pertama dalam proses ini. Dengan sedikit pengalaman, Anda akan mulai lebih memahami bagaimana semua bagian ini cocok untuk membuat situs web yang Anda lihat di browser Anda. Semakin Anda terbiasa dengan kode ini, Anda akan dapat belajar lebih banyak dari itu dan tidak akan terasa menakutkan bagi Anda.
Jadi bagaimana Anda melihat kode sumber situs web? Berikut petunjuk langkah demi langkah untuk melakukannya menggunakan browser Google Chrome.
Petunjuk Langkah demi Langkah
- Buka browser web Google Chrome (jika Anda belum menginstal Google Chrome, ini adalah unduhan gratis).
- Arahkan ke halaman web yang ingin Anda periksa .
- Klik kanan halaman dan lihat menu yang muncul. Dari menu itu, klik Lihat sumber halaman .
- Kode sumber untuk halaman itu sekarang akan muncul sebagai tab baru di browser.
- Atau, Anda juga dapat menggunakan pintasan keyboard CTRL + U pada PC untuk membuka jendela dengan kode sumber situs ditampilkan. Di Mac, pintasan ini adalah Command + Alt + U.
Alat pengembang
Selain kemampuan sumber laman Tampilan sederhana yang ditawarkan oleh Google Chrome, Anda juga dapat memanfaatkan Alat Pengembang yang sangat baik untuk menggali lebih dalam ke situs. Alat-alat ini akan memungkinkan Anda untuk tidak hanya melihat HTML, tetapi juga CSS yang berlaku untuk melihat elemen dalam dokumen HTML itu.
Untuk menggunakan alat pengembang Chrome:
- Buka Google Chrome .
- Arahkan ke halaman web yang ingin Anda periksa .
- Klik ikon dengan tiga garis di sudut kanan atas jendela browser.
- Dari menu, arahkan kursor ke Lebih banyak alat dan kemudian klik Alat pengembang di menu yang muncul.
- Ini akan membuka jendela yang menampilkan kode sumber HTML di sebelah kiri panel dan CSS terkait di sebelah kanan.
- Atau, jika Anda mengklik kanan suatu elemen di halaman web dan memilih Inspeksi dari menu yang muncul, alat pengembang Chrome akan muncul dan elemen yang tepat yang telah Anda pilih akan disorot dalam HTML dengan CSS yang sesuai ditampilkan di sebelah kanan. Ini sangat berguna jika Anda ingin mempelajari lebih lanjut tentang bagaimana satu bagian tertentu dari sebuah situs dibuat.
Apakah Melihat Kode Sumber Hukum?
Selama bertahun-tahun, saya telah memiliki banyak desainer web baru yang mempertanyakan apakah itu dapat diterima untuk melihat kode sumber situs dan menggunakannya untuk pendidikan mereka dan akhirnya untuk pekerjaan yang mereka lakukan. Meskipun menyalin kode situs secara grosir dan meneruskannya sebagai milik Anda di situs tentu tidak dapat diterima, menggunakan kode itu sebagai batu loncatan untuk belajar sebenarnya adalah seberapa banyak kemajuan yang dibuat dalam industri ini.
Seperti yang saya sebutkan di awal artikel ini, Anda akan sulit sekali menemukan web profesional yang bekerja hari ini yang belum belajar sesuatu dengan melihat sumber situs! Ya, melihat kode sumber situs adalah sah. Menggunakan kode itu sebagai sumber daya untuk membangun sesuatu yang serupa juga baik. Mengambil kode apa adanya dan menyerahkannya karena pekerjaan Anda adalah di mana Anda mulai mengalami masalah.
Pada akhirnya, web profesional belajar dari satu sama lain dan sering memperbaiki pekerjaan yang mereka lihat dan terinspirasi oleh, jadi jangan ragu untuk melihat kode sumber situs dan menggunakannya sebagai alat pembelajaran.