HTML mewakili Hypertext Markup Language dan merupakan bahasa skrip berbasis web. Tujuan utamanya adalah membuat dan mendesain halaman situs web. Rekaman dengan augmentasi HTML (atau HTM) hanya menahan teks dan referensi ke berbagai dokumen, mirip dengan gambar atau video
Setiap browser Internet utama memungkinkan pengguna untuk melihat kode sumber HTML halaman web mana pun. Bagian berikut berisi informasi tentang berbagai cara untuk melihat kode sumber di setiap browser utama. Untuk melanjutkan, pilih entri dari daftar di bawah dan ikuti petunjuknya
Informasi pengantar
Saat melihat kode sumber halaman web, informasi dan kode yang diproses oleh server tidak akan muncul. Misalnya, mesin pencari memproses informasi di server dan kemudian menampilkan hasilnya di halaman web. Dengan kata lain, Anda dapat melihat kode yang menyusun halaman hasil, tetapi Anda tidak dapat melihat kode sumber mesin pencari
Aturan ini berlaku untuk semua skrip sisi server, SSI, dan kode pemrograman. Oleh karena itu, Anda tidak dapat melihat kode sumber skrip yang digunakan di mesin telusur, forum, jajak pendapat, obrolan, dll. Selain itu, menyalin informasi dari kode sumber dapat menyebabkan kesalahan atau mengarahkan Anda kembali ke halaman tempat Anda menyalin informasi tersebut
Google Chrome
Untuk melihat kode sumber halaman web di Google Chrome, gunakan salah satu metode berikut
Lihat kode sumber saja
Metode satu
Untuk hanya melihat kode sumber, tekan tombol pintas Ctrl+U di keyboard komputer Anda
Metode dua
Klik kanan bagian kosong halaman web dan pilih Lihat sumber halaman dari menu pop-up yang muncul
Lihat sumber halaman dengan elemen
- Buka Chrome dan navigasikan halaman web yang kode sumbernya ingin Anda lihat
- Klik ikon Sesuaikan dan kontrol Google Chrome di pojok kanan atas jendela browser.
- Dari menu tarik-turun yang muncul, pilih Alat lainnya, lalu pilih Alat pengembang
- Klik tab Elemen di pojok kiri atas bagian baru yang muncul di bagian bawah layar
Tip
Di Chrome, menekan F12 atau Ctrl+Shift+I juga menampilkan alat pengembang interaktif. Alat ini memberikan lebih banyak interaksi dengan kode sumber dan pengaturan CSS, memungkinkan pengguna untuk melihat bagaimana perubahan kode memengaruhi halaman web dengan segera
Mozilla Firefox
Untuk melihat kode sumber halaman web di Mozilla Firefox, gunakan salah satu metode berikut
Lihat kode sumber saja
Metode satu
Untuk hanya melihat kode sumber, tekan Ctrl+U di keyboard komputer Anda
Metode dua
Klik kanan bagian kosong halaman web dan pilih View Page Source dari menu pop-up yang muncul
Lihat sumber halaman dengan elemen
- Buka Firefox dan arahkan ke halaman web yang kode sumbernya ingin Anda lihat
- Klik ikon Menu di pojok kanan atas layar.
- Pilih Alat lainnya di menu tarik-turun, lalu pilih Alat Pengembang Web dari menu yang diperluas
- Klik tab Inspektur di pojok kiri atas bagian yang muncul di bagian bawah layar
Tip
Di Firefox, menekan F12 atau Ctrl+Shift+I juga menampilkan alat pengembang interaktif. Alat ini memberikan interaksi dengan kode sumber dan pengaturan CSS, memungkinkan pengguna untuk melihat bagaimana perubahan kode memengaruhi halaman web secara real-time
Lihat bagian kode sumber halaman
- Sorot bagian halaman web tempat Anda ingin melihat kode sumber
- Klik kanan bagian yang disorot dan pilih View Selection Source
Tip
Anda dapat menggunakan add-on Firebug untuk melihat dan mengedit kode sumber halaman, dan melihat perubahannya secara langsung melalui browser
Microsoft Edge
Untuk melihat kode sumber halaman web di Microsoft Edge, gunakan salah satu metode berikut
Lihat kode sumber saja
Metode satu
Untuk hanya melihat kode sumber, tekan Ctrl+U di keyboard komputer Anda
Metode dua
Klik kanan bagian kosong halaman web dan pilih Lihat sumber halaman dari menu pop-up yang muncul
Lihat sumber halaman dengan elemen
- Buka Microsoft Edge dan arahkan ke halaman web yang kode sumbernya ingin Anda lihat
- Klik ikon Setelan dan lainnya di pojok kanan atas layar.
- Gerakkan mouse Anda ke Lebih banyak alat di menu tarik-turun, dan pilih Alat pengembang dari menu yang diperluas
- Klik tab Elemen di bagian atas jendela yang muncul di sisi kanan layar
Tip
Di Microsoft Edge, menekan F12 atau Ctrl+Shift+I juga menampilkan alat pengembang interaktif. Alat ini memberikan interaksi dengan kode sumber dan pengaturan CSS, memungkinkan pengguna untuk melihat bagaimana perubahan kode memengaruhi halaman web secara real-time
Microsoft Internet Explorer
Untuk melihat kode sumber halaman web di Microsoft Internet Explorer, gunakan salah satu dari metode berikut ini
Lihat kode sumber saja
Metode satu
Untuk hanya melihat kode sumber, tekan Ctrl+U di keyboard komputer Anda
Metode dua
Klik kanan bagian kosong halaman web dan pilih View source dari menu pop-up yang muncul
Lihat sumber halaman dengan elemen
- Buka Internet Explorer dan arahkan ke halaman web yang kode sumbernya ingin Anda lihat
- Klik Alat di pojok kanan atas.
- Pilih Alat Pengembang F12 dari menu tarik-turun
- Klik tab DOM Explorer di pojok kiri atas menu alat pengembang
Tip
Di Internet Explorer, menekan F12 menampilkan alat DOM. Alat ini memberikan interaksi dengan kode sumber dan pengaturan CSS, memungkinkan pengguna untuk melihat bagaimana perubahan kode memengaruhi halaman web dengan segera
Safari
Di Safari, melihat kode sumber halaman web memerlukan pengaktifan opsi pengembang. Bagian berikut menunjukkan kepada Anda cara mengaktifkan fitur ini dan kemudian cara melihat kode sumber halaman web
Mengakses opsi pengembang di Safari
- Buka browser Safari
- Pilih dari bilah menu di pojok kiri atas layar.
- Di menu tarik-turun yang muncul, pilih Preferensi
- Klik tab Advanced, dan centang kotak di sebelah menu Show Develop di bilah menu
- Sekarang Anda akan melihat pemilih Kembangkan di bilah menu Apple di bagian atas layar
Melihat kode sumber
Catatan
Anda harus mengaktifkan opsi pengembang agar langkah-langkah berikut berfungsi
Metode satu
- Buka Safari dan arahkan ke halaman web yang kode sumbernya ingin Anda lihat
- Di bilah menu Apple di bagian atas layar, klik pemilih Kembangkan dan pilih Tampilkan Sumber Halaman dari menu tarik-turun
- Di tengah layar, klik tab Elemen di bagian atas alat pengembang
Metode 2
Klik kanan bagian kosong halaman web dan pilih Show Page Source dari menu pop-up yang muncul
Tip
Setelah opsi pengembang diaktifkan, Anda juga dapat menekan Command+option+U untuk melihat kode sumber
Opera
Untuk melihat kode sumber halaman web di Opera, gunakan salah satu metode berikut
Lihat kode sumber saja
Metode satu
Untuk hanya melihat kode sumber, tekan Ctrl+U di keyboard komputer Anda
Metode dua
Klik kanan bagian kosong halaman web dan pilih Sumber halaman dari menu pop-up yang muncul
Lihat sumber halaman dengan elemen
- Buka Opera dan arahkan ke halaman web yang kode sumbernya ingin Anda lihat
- Klik ikon Opera di pojok kiri atas jendela browser.
- Gerakkan mouse Anda ke atas Pengembang di menu tarik-turun dan pilih alat Pengembang dari menu yang diperluas
- Klik tab Elemen di bagian atas jendela yang muncul di sisi kanan layar
Tip
Jika Anda tidak melihat submenu Pengembang, pilih Alat lainnya → Tampilkan menu pengembang. Kemudian, klik tombol menu
Tip
Di Opera, menekan Ctrl+Shift+I juga menampilkan alat pengembang interaktif. Alat ini memberikan interaksi dengan kode sumber dan pengaturan CSS, memungkinkan pengguna untuk melihat bagaimana perubahan kode memengaruhi halaman web secara real-time
Ponsel atau tablet Android menggunakan Chrome
- Buka browser Google Chrome di ponsel atau tablet Android Anda
- Buka halaman web yang kode sumbernya ingin Anda lihat
- Ketuk sekali di bilah alamat dan gerakkan kursor ke depan URL
- Ketik sumber tampilan. dan ketuk Enter atau Go
Tip
Misalnya, untuk melihat kode beranda kami, Anda harus mengetik view-source. https. // www. computerhope. com
Jika langkah-langkah di atas tidak berhasil di ponsel Android Anda, gunakan cara di bagian tersebut. Kode yang sama berfungsi di ponsel Android. Satu-satunya perbedaan adalah menggunakan Chrome, bukan Safari, dan cara membuat bookmark
- Cara membuat favorit atau bookmark Internet
- Cara menghapus dan mengatur favorit dan bookmark Internet
Tip
Jika Anda kesulitan menavigasi kode sumber di perangkat seluler menggunakan metode di atas, Anda mungkin juga ingin mempertimbangkan
iPhone atau iPad menggunakan Safari
Melihat kode sumber halaman web di iPhone atau iPad membutuhkan lebih banyak pekerjaan, tetapi itu mungkin. Prosesnya mengharuskan Anda untuk membuat bookmark, menetapkan kode JavaScript ke dalamnya, dan menggunakan bookmark di halaman web untuk melihat kode sumbernya
Catatan
Jika Anda lebih suka menggunakan aplikasi untuk melihat kode sumber halaman web, Anda dapat mengunduh aplikasi View Source gratis dari iOS App Store
Buat bookmark untuk melihat kode sumber
- Buka browser Safari di iPhone atau iPad Anda
- Akses halaman web apa pun, seperti www. computerhope. com
- Ketuk ikon Lainnya di bagian bawah layar
Tip
Anda juga dapat menekan dan menahan jari Anda pada ikon Bookmark di bagian bawah layar hingga muncul menu
- Di menu yang terbuka, ketuk opsi Tambahkan Bookmark
- Ketuk bidang nama bookmark, ketuk x di sisi kanan untuk menghapus nama saat ini, dan masukkan "Lihat kode sumber halaman web" sebagai nama baru
- Ketuk Simpan di pojok kanan atas untuk menyimpan bookmark
- Salin seluruh cuplikan kode JavaScript di bawah ini
- Di Safari, akses bookmark dengan mengetuk ikon bookmark di bagian bawah layar
- Temukan bookmark yang Anda buat di atas, lalu tekan dan tahan jari Anda pada bookmark hingga menu terbuka di bagian bawah layar
- Ketuk opsi Edit pada menu
- Pada layar Edit Bookmark, ketuk URL, ketuk x untuk menghapus URL, dan rekatkan kode JavaScript dari langkah 7 ke bidang URL
- Ketuk Selesai di kanan bawah layar untuk menyimpan perubahan bookmark
Gunakan bookmark untuk melihat kode sumber
Setelah membuat bookmark di atas, kini Anda dapat melihat kode sumber untuk halaman web
- Di Safari, akses halaman web tempat Anda ingin melihat kode sumber
- Ketuk ikon bookmark di bagian bawah layar
- Ketuk bookmark Lihat kode sumber halaman web yang Anda buat
Tab penjelajahan Safari baru terbuka, menampilkan kode sumber untuk halaman web
Tip
Jika Anda kesulitan menavigasi kode sumber di perangkat seluler menggunakan metode di atas, Anda juga dapat mempertimbangkan untuk menggunakan
Cara menutup halaman atau alat kode sumber
Setelah selesai melihat kode sumber di halaman web, Anda mungkin ingin keluar atau menutupnya. Menutup kode sumber tergantung pada metode yang digunakan untuk membukanya
- Jika Anda telah menggunakan metode Ctrl+U (kecuali Edge) atau metode klik kanan, tutup tab baru yang terbuka di bagian atas jendela browser Anda
- Jika Anda telah menggunakan metode pengembang (menggunakan F12 atau Ctrl+Shift+I), tekan kembali tombol yang sama, atau klik ikon di pojok kanan atas .
Gunakan alat online untuk melihat kode sumber
Selain menggunakan browser, beberapa alat online memungkinkan Anda melihat kode sumber halaman web mana pun. Alat-alat ini mungkin bermanfaat karena sebagian besar dapat memformat, menyesuaikan gaya, dan menyorot kode agar lebih mudah dibaca. Di bawah ini adalah daftar singkat dari beberapa alat