Tautan Perangkats
AndroidiPhoneChromebookMacWindowsDevice Missing?
Apakah Anda ingin tahu tentang apa yang membentuk sebuah halaman web? Ingin tahu cara mengubah ukuran atau warna font di situs web Anda? Dengan melihat kode HTML laman web, Anda dapat melakukan semua hal ini dan banyak lagi.
Dalam tutorial ini, kami akan menunjukkan cara melihat kode HTML laman web di Chrome.
Melihat Kode HTML di Chrome
Saat menulis dalam HTML, sumber kode adalah serangkaian tag dan atribut yang digunakan untuk menentukan struktur dan konten halaman web.
Kode sumber dibaca oleh browser web dan diterjemahkan ke dalam halaman web grafis yang Anda lihat di layar. Selain menentukan tampilan dan nuansa halaman web, kode sumber juga dapat digunakan untuk menambahkan interaktivitas, seperti jendela sembulan, formulir, dan menu tarik-turun.
Sementara rata-rata pengguna internet mungkin tidak perlu melihat kode sumber HTML halaman web, ada beberapa alasan beberapa orang mungkin ingin melakukannya.
Bagi pengembang, melihat kode sumber dapat menjadi cara yang berguna untuk memahami struktur halaman dan menentukan elemen gaya dan skrip mana yang digunakan. Untuk desainer, akan bermanfaat untuk melihat bagaimana desainer lain menggunakan HTML untuk membuat tata letak yang efektif.
Dalam beberapa kasus, pengguna mungkin juga ingin melihat kode sumber untuk memecahkan masalah atau mempelajari lebih lanjut tentang cara kerja situs web atau aplikasi web tertentu. Apa pun alasannya, melihat kode sumber HTML adalah proses yang relatif sederhana di Chrome.
Cara Melihat Kode HTML Halaman Web di Chrome di PC Windows
Sistem operasi Windows adalah salah satu sistem Chrome yang paling kompatibel. Chrome dibangun di atas proyek Chromium sumber terbuka, di mana Microsoft merupakan kontributor utamanya. Kompatibilitas ini meluas ke ranah HTML, di mana browser populer memungkinkan pengguna untuk melihat kode HTML situs web mana pun. ingin melihat kode sumber HTML.Klik kanan pada halaman dan pilih Lihat Sumber Halaman, atau tekan Ctrl + U pada keyboard untuk membuka kode sumber di tab baru.
Kode sumber akan muncul di tab baru, dan Anda dapat menggulirnya untuk melihat markup HTML untuk laman tersebut.
Menggunakan Alat Pengembang
Untuk memeriksa kode sumber laman web menggunakan Alat Pengembang di Google Chrome, ikuti langkah-langkah di bawah ini.
Buka Google Chrome dan navigasikan ke laman web yang ingin Anda periksa. Tekan Ctrl + Shift + I pada keyboard Anda. Panel Alat Pengembang akan terbuka di dok di samping halaman web yang sedang Anda lihat. Klik tab "Elemen" di bagian atas panel. Ini akan menampilkan kode sumber HTML untuk halaman web. Sekarang Anda dapat meninjau kode sumber untuk halaman tersebut. Untuk menciutkan elemen, klik segitiga di samping nama tagnya. Untuk melihat informasi lebih lanjut tentang suatu komponen, klik kanan komponen tersebut dan pilih “Periksa.”
Perlu diingat bahwa metode ini paling baik untuk halaman HTML; Anda dapat melihat kode sumber dari jenis halaman web lain, tetapi pemformatannya mungkin lebih sulit untuk dibaca.
Cara Melihat Kode HTML Halaman Web di Chrome di Mac
Jika Anda seorang pengembang web, penting untuk dapat melihat kode HTML halaman web. Ini memungkinkan Anda melihat struktur halaman dan memecahkan masalah apa pun yang mungkin muncul. Untungnya, ini mudah dilakukan di Chrome di Mac. Cukup ikuti langkah-langkah berikut:
Buka Chrome dan navigasikan ke laman web tempat Anda ingin melihat kode HTML.Klik kanan pada laman dan pilih "Periksa".Panel baru akan terbuka di bagian bawah layar yang menampilkan kode HTML.Anda juga dapat mengeklik elemen tertentu dalam kode HTML untuk melihat gayanya pada halaman. Misalnya, Anda dapat melihat gaya CSS mana yang diterapkan ke suatu elemen dengan memilihnya, lalu mengeklik tab "Gaya" di panel yang terbuka. Untuk menutup panel, klik "X" di kanan atas corner.
Atau, Anda dapat menggunakan Alat Pengembang Chrome untuk melihat kode sumber.
Buka Google Chrome dan navigasikan ke laman web yang ingin Anda periksa.Klik ikon menu (tiga titik) di pojok kanan atas browser dan pilih Alat Lainnya dan Alat Pengembang dari menu tarik-turun. Panel Alat Pengembang akan terbuka di bagian bawah layar. Pilih "Elemen" di bagian atas panel. Sekarang Anda akan melihat kode HTML untuk halaman saat ini ditampilkan di panel Elemen. Anda dapat menggunakan berbagai opsi di panel untuk memeriksa dan men-debug kode sesuai kebutuhan.
Hanya dengan beberapa klik, Anda dapat dengan mudah melihat kode HTML untuk laman web apa pun di Chrome pada Mac. Ini dapat berguna saat Anda mencoba memecahkan masalah pengembangan web atau ingin melihat lebih dekat bagaimana situs web tertentu dibuat.
Cara Melihat Kode HTML Halaman Web di Chrome di Aplikasi iPhone
Jika Anda menggunakan iPhone , Anda dapat melihat kode HTML laman mana pun di Chrome dengan dua cara:
Menyesuaikan URL
Anda dapat dengan mudah melihat kode HTML laman mana pun dengan melakukan sedikit penyesuaian pada URL:
Buka Chrome dan navigasikan ke laman web yang kode HTML-nya ingin Anda buat view.Tap sekali di bilah alamat untuk memulai mode edit. Pindahkan kursor ke bagian depan URL. Ketik "View-source" lalu tekan tombol "Go". Kode HTML untuk halaman web akan ditampilkan di Chrome.
Menggunakan Alat Pengembang
Alat Pengembang Chrome juga tersedia di iOS, tetapi serangkaian langkah berbeda diperlukan untuk meluncurkannya dibandingkan dengan PC.
Ketuk tiga titik di pojok kanan atas layar dan pilih "Pengaturan". Gulir ke bawah dan ketuk "Lanjutan", lalu aktifkan sakelar di samping "Alat pengembang". Ketuk dan tahan area kosong halaman, lalu pilih "Periksa Elemen". Ini akan membuka panel samping dengan kode HTML untuk halaman itu.
Cara Melihat Kode HTML Halaman Web di Chrome di Aplikasi Android
Saat menggunakan aplikasi Chrome di ponsel Android, Anda mungkin ingin melihat kode HTML untuk halaman web . Ini dapat membantu jika Anda mencoba memecahkan masalah dengan halaman atau ingin melihat bagaimana struktur halaman. Untuk melihat kode HTML laman web di Chrome pada ponsel Android Anda, ikuti langkah-langkah berikut:
Buka Chrome di Android Anda. Ketik “view-source:” diikuti dengan URL laman yang Anda inginkan di mana Anda ingin melihat kode sumbernya. Misalnya, jika Anda ingin melihat kode sumber untuk www.google.com, Anda akan mengetikkan “view-source:www.google.com” ke dalam bilah alamat Chrome.
Ini akan membuka kode HTML untuk laman tersebut di perangkat bawaan Chrome. -dalam antarmuka Alat Pengembang. Dari sana, Anda dapat melihat dan mengedit kode sesuai keinginan. Ingatlah bahwa metode ini hanya akan berfungsi jika situs web yang ingin Anda lihat mengizinkan akses ke kode sumbernya. Jika tidak, Anda tidak akan dapat melihat apa pun selain pesan kesalahan.
Cara Melihat Kode HTML Halaman Web di Chrome di iPad
Chrome di aplikasi iPad memudahkan untuk melihat kode HTML halaman web . Cukup ikuti langkah berikut:
Buka Chrome dan ketik “view-source:” diikuti dengan URL halaman yang ingin Anda lihat. Misalnya, jika Anda ingin melihat kode sumber untuk www.emka.web.id, Anda perlu mengetikkan “view-source:www.emka.web.id” ke bilah alamat Chrome. Tekan tombol “Go”. harus memuat kode sumber laman di tab baru dalam Chrome. Dari sana, Anda dapat menyimpan atau membagikan kode sesuai kebutuhan.
Kode Sumber Adalah Perekat yang Menyatukan Halaman
HTML adalah fondasi situs web apa pun. Ini memberikan struktur dan konten yang dilihat pengunjung saat mereka memuat halaman di browser mereka.
Meskipun tampilan akhir halaman dapat ditentukan oleh CSS atau bahasa gaya lainnya, kode HTML menentukan struktur dasar dan konten halaman. Beberapa perubahan berpotensi merusak halaman. Untuk alasan ini, penting untuk memiliki pemahaman yang baik tentang HTML saat melihat atau membuat perubahan pada kode sumber.
Selain itu, perlu diingat bahwa saat melihat kode HTML dapat membantu dalam beberapa kasus, perubahan yang dilakukan pada kode tidak akan tercermin pada halaman web langsung. Hanya perubahan yang diterbitkan oleh administrator situs yang akan terlihat oleh pengunjung.
Sudahkah Anda mencoba melihat kode HTML halaman web mana pun menggunakan metode yang dibahas dalam tutorial ini? Bagaimana hasilnya?
Beri tahu kami di bagian komentar.
