Inspect Element

0 komentar

Dalam posting sebelumnya yaitu tentang persiapan yang sebaiknya kita lakukan agar lebih nyaman dalam belajar design template, saya ada sedikit menyinggung istilah Inspect Element. Buat teman-teman yang udah jago design pasti tahu tentang hal ini. Karena memang dengan adanya fitur Inspect Element ini proses design template ini akan 1000 kali lebih mudah.

Kenapa saya bilang demikian??
Karena dengan menggunakan fasilitas ini kita dapat melihat struktur code sesuai yang ditampilkan pada halaman web secara langsung. Code yang ditampilkan dalam inspect element tentunya merupakan code-code client-side, meliputi HTML, CSS dan JavaScript. Melalui fasilitas ini kita dapat melihat struktur code dan juga hasil tampilan yang kita lihat dalam browser. Kecuali Mozilla Firefox, Browser-browser populer saat ini seperti Opera dan Google Chrome telah menyediakan fasilitas ini. Fasilitas ini sudah terdapat secara langsung saat pertama kali menginstal.

Khusus Mozilla Firefox, untuk dapat menggunakan inspect element kita harus menambahkan sebuah add-on yaitu Firebug. Cara instalnya cukup mudah kok. Kita tinggal kunjungi Firebug untuk mendapatkan add-on inspect elementnya, install dan restart browser firefoxnya.

Cara Meng-Instalnya:

[1]. Pergi Ke Firebug
[2]. Klik Add To Firefox

[3]. Tunggu Beberapa Saat, Kemudian Akan Instalasi Software, Kemudain klik Klik Install Now

Cara Pengunaanya Sangat Mudah

Via Firefox:

{1}. Klik Kanan, Kemudain Pilih Inspect Element With Firebug

[2].Cari Text Yang Ingin Di Ubah

[3].Ubah Sesuka Anda

Via Google Chrome :

[1]. Lihat Tulisan "Populer Di YouTube" Sebelum Di Edit

[2]. Klik Periksa Elemen

[3]. Cari Tulisan "Populer di YouTube" Kemudian Ganti Sesuka Anda

[4].Taraaaa. Tulisan "Populer Di YouTube" Berubah Menjadi "Populer Di MyTube

Untuk system inspect element yang terbaru, akan ada banyak sekali bagian-bagian yang bisa kita gunakan. Namun untuk tahap awal maka kita cukup menggunakan 3 menu element saja.

3 menu utama dalam fitur Inspect Element ini yaitu:

Elements :
Pada menu elements kita dapat melihat struktur disain dari suatu halaman web yang di tampilkan dalam bentuk script atau kode dimana pada menu ini setiap elemen telah disusun berdasarkan posisi script dan setiap elemen halaman telah dikelompokkan masing-masing. Dengan fitur ini kita dapat dengan jelas melihat struktur desain dari halaman tersebut sesuai dengan coding asli yang telah di buat oleh programmer. Baik itu lebar area, tinggi area, background yang digunakan, komposisi warna yang dipakai dan lain sebagainya.
Resources :
Merupakan tampilan detail dari elemen-elemen halaman web seperti gambar dan style CSS yang digunakan (lebih mengarah ke interface web). Pada menu kita dapat melihat source lengkap dari setiap elemen gambar dalam halaman web, mulai dari gambar background, header, widget, icon, banner, dsb. bahkan kita bisa mendownload elemen tersebut dengan langsung menuju ke source yang ditunjukkan oleh gambar. Kelebihannya adalah pada menu ini setiap gambar dapat di preview secara langsung bahkan resolusi sebenarnya dari gambar tersebut juga akan ditampilkan.
Scripts :
Isi menu ini sama saja dengan isi halaman yang muncul pada saat kita melakukan view source pada halaman web.

Sekian Ilmu Dari Saya Moga Bermanfaat
Semoga Berhasil