Bagi seorang web developer, adalah hal yang lumrah untuk belajar meracik website dengan meniru website yang telah ada. Ilmu seperti itu biasa kita sebut dengan ATM (Amati Tiru Mainkan/Modifikasi). Jutaan bahkan puluhan juta website telah tersebar di dunia maya. Di dalam website tersebut pastinya terdapat source code HTML, CSS, maupun Javascript yang terpampang di depan mata. Kita bisa menyalinnya, meniru, bahkan mempelajarinya tanpa sepengetahuan pemilik website. #ups

We know ! HTML, CSS and Javascript is client site programming that runs on the user interface of website. Maksudnya ketiga bahasa pemrograman tersebut merupakan bahasa pemrograman yang dipakai memanipulasi tampilan website secara langsung. Ketika sebuah website yang didalamnya berisi source code telah meluncur ke awan (internet), maka source code website tersebut sangat mungkin untuk kita pelajari bahkan kita tiru. Bagaimana caranya? Its easy and not so hard to get this. Yang kita butuhkan hanyalah browser Google Chrome. Mari kita pelajari !

Penulis menggunakan Google Chrome Canary terbaru. Silahkan unduh di website resmi Google Chrome di sini.

Case Study

Suatu saat kita mengunjungi sebuah website. Kita ambil contoh website tersebut adalah labs.mkhuda.com (silahkan dikunjungi). Kita ingin mengambil (jangan bilang mencuri) source code dari labs.mkhuda.com ini untuk kita taruh di localhost dan kita pelajari atau modifikasi.Misal seperti ini tampilan website tersebut

01 Inspect Element

labs.mkhuda.com sudah terpampang di peramban Google Chrome, dan aksi selanjutnya kita akan menggunakan tools Inspect Element. Caranya adalah

• Klik kanan di area browser
• Lalu pilih Inspect Element

Selanjutnya di bagian bawah dock browser Google Chrome akan muncul jendela baru bernama Inspect Element. Jendela tersebut terbagi menjadi beberapa tab yang merupakan fitur-fitur lengkap untuk para web developer yang ingin menulusuri lebih jauh mengenai halaman web tersebut.

Inspect Element Tab Elements

Tabs-tabs tersebut diantaranya adalah

• Elements: Menampilkan kode HTML yang terletak di konten sebelah kiri, dan CSS di konten kanan
• Resources: Menampilkan resources seluruh kode yang dipakai halaman web (ini akan kita eksplorasi)
• Network: Bagian yang akan memonitor performa dan kecepatan loading halaman website
• Sources: Fungsinya hampir sama seperti Resources
• Tab Timeline, Audits, dan Console akan kita pelajari di postingan selanjutnya.

Karena kita hanya ingin mengambil file HTML dan CSS saja. Maka kita akan berfokus bagaimana caranya mengambil struktur HTML dari labs.mkhuda.com tersebut. Mari kita beralih ke Tab Resources. Tab ini akan menampilkan bagian resources yang dipakai pada halaman labs.mkhuda.com. Kita buka bagian Frames->(labs.mkhuda.com/)->Stylesheet. Lihat gambar di bawah :

Tab Resources

Setelah tampil seperti gambar di atas, pilih child-menu  Stylesheet, maka akan muncul file CSS dan HTML yang dipakai untuk labs.mkhuda.com, tinggal kita klik saja file-file tersebut. Maka di bagian konten sebelah kanan akan terpampang source code-nya. Selanjutnya bisa kita copy-paste ke web editor favorit Anda.

Langkah selanjutnya kita siapkan folder baru di localhost, kita bisa memberi nama “labsku” (opsional). Buatlah dua file, pertama index.html (untuk menampung file index) dan style.css (untuk menampung file CSS). Lihat gambar di bawah ini :

Folder Labsku

Jika sudah selesai membuat file dan folder pada Localhost, kita beralih lagi ke Chrome. Klik bagian style.css pada Frames Resources, setelah muncul source code di bagian kanan, kita copy dengan cara seperti pada umumnya copy-paste. Bisa menggunakan kombinasi (CTRL+A) atau secara manual memakai block method copying.

Copy this

Salin copy-an CSS tadi ke file style.css yang telah kita buat sebelumnya di localhost. Lakukan juga pada file index labs.mkhuda.com untuk mendapatkan struktur HTML-nya. Oke, selamat mencoba !

Inspect Element umumnya dipakai untuk melihat apa isi dari struktur halaman sebuah website. Kita dapat belajar lebih banyak mengenai struktur halaman website melalui Inspect Element.