Mencontek Website Lain

Melalui kelas ini, kamu diajak untuk:

  • Memahami fungsi dan perbedaan view source dan inspect.
  • Mengidentifikasikan langkah-langkah melihat source code melalui view source dan inspect.

Melihat Source Code Halaman Web

Setiap halaman web menggunakan bahasa pemrograman HTML. HTML mendefinisikan struktur berisi elemen-elemen yang ingin ditampilkan oleh browser. Struktur berisi elemen-elemen di browser ini dinamakan source code.

Kita bisa melihat source code halaman web kita dengan dua cara, melalui view source dan inspect. Ketuk dua akordion di bawah ini untuk melihat fungsi dan perbedaannya.

View Source

Melalui view source, kita bisa melihat struktur halaman HTML secara utuh. Jika kamu ingin mencari elemen spesifik, view source lebih ideal digunakan karena source code ditampilkan memenuhi layar.

Inspect

Inspect tidak hanya menampilkan source code, tetapi juga tampilan konten hasil terjemahan elemen HTML di browser. Kita bisa mengubah dan menghapus elemen-elemen tertentu melalui inspect untuk melihat bagaimana browser akan menerjemahkannya secara real-time.

Langkah-langkah Menggunakan View Source

Mula-mula, buka halaman web di browser. Untuk melihat source code melalui view source ada beberapa cara.

  • Cara pertama adalah dengan mengetik CTRL + U pada halaman web.
  • Cara kedua adalah dengan klik kanan pada halaman web, lalu pilih View Source.
  • Cara lainnya adalah dengan menambah “view-source:” sebelum “https://namawebsite.com”.

Browser akan menampilkan source code halaman web.

Langkah-langkah Menggunakan Inspect

Ada dua cara melihat source code melalui inspect. Setelah halaman web dibuka oleh browser, ikuti langkah ini:

  • ketik CTRL + SHIFT + I; atau
  • klik kanan, lalu pilih Inspect

Maka browser akan mengalihkan halaman web dengan tampilan seperti ini.

Setelah halaman terbuka, kamu bisa mengutak-atik elemen-elemen yang ada di source code secara real-time sembari melihat perubahan-perubahannya.

Selayang Pandang

  • Inspect element berguna untuk menguji tampilan.
  • Setiap web dapat diambil struktur kodenya lewat view-source, namun sebatas kode HTML dan CSS yang berada dalam satu file.

Kuis

Bagaimana cara mengambil teks HTML dari sebuah website?

Selamat, Anda telah menyelesaikan pelajaran ini
Klik untuk menyelesaikan