Cara melihat kode halaman. Cara membuka kode sumber halaman

Ctrl+U

Bagaimana cara melihat kode sumber suatu elemen?

Klik tombol kanan mouse pada elemen halaman yang diinginkan.

Google Chrome: “Lihat kode elemen”

Opera: "Memeriksa elemen"

Firefox: “Analisis elemen”

Di browser lain, cari item menu serupa.

Halo semua!

Terutama di awal artikel saya menjelaskan keseluruhan poin, bagi mereka yang mencari jawaban cepat.

Informasinya mungkin diketahui banyak orang, tetapi karena saya menulis untuk blogger pemula, programmer web, dan penambang lainnya, artikel bantuan ini harus ada.

Di masa depan, Anda pasti akan mempelajari kode sumber halaman dan elemen individual.

Mari kita lihat contoh spesifik tentang bagaimana Anda dapat menggunakan tampilan sumber halaman.

Misalnya, kita ingin melihat kata kunci apa yang digunakan untuk halaman tertentu. Kami pergi ke halaman web yang kami minati dan tekan Ctrl + U. Kode sumber halaman ini akan terbuka di jendela terpisah atau di tab terpisah. Tekan Ctrl+F untuk mencari sepotong kode. Dalam hal ini, kami mengetik di kotak pencarian kata “ kata kunci". Anda akan secara otomatis diarahkan ke cuplikan kode dengan tag meta ini dan kata pencarian akan disorot.

Dengan analogi, Anda dapat mencari dan mempelajari potongan kode lainnya.

Melihat seluruh kode sumber halaman dalam banyak kasus sangat tidak nyaman, jadi di semua browser dimungkinkan untuk melihat kode satu elemen atau fragmen.

Mari kita gunakan contoh konkret untuk melihat kode elemen. Misalnya, mari kita lihat apakah tautan memiliki atribut nofollow. Kami mengklik kanan tautan yang menarik bagi kami dan di menu konteks tarik-turun, klik kiri pada item “Lihat kode elemen” atau serupa (tergantung pada browser Anda). Di bawah, di jendela khusus untuk analisis kode, kami mendapatkan sesuatu yang serupa.

Kami melihat bahwa ada di kode tautan. Artinya link ini tidak akan “bocor” dan PR. Kami akan membicarakan ini secara lebih rinci di artikel mendatang. Untuk saat ini, yang penting adalah Anda sekarang tahu cara melihat kode sumber halaman dan kode sumber masing-masing elemen.

Selamat siang, para pembaca blog saya yang terkasih. Terkadang Anda menemukan beberapa fitur indah di situs dan pertanyaan mulai menyiksa bagaimana pencipta mencapai efek yang begitu menarik.

Ternyata jawabannya cukup mudah. Dan jika Anda memiliki beberapa keterampilan, Anda dapat mengumpulkan banyak chip tersebut dan membuat situs web unik Anda sendiri dalam waktu singkat.

Hari ini kita akan berbicara tentang cara membuka kode halaman, elemen tertentu dan mempelajari cara menggunakan keterampilan ini untuk keuntungan Anda.

Pengetahuan dasar tentang kode

Situs saya untuk pemula dan pertama saya ingin berbicara singkat tentang situs dan kode secara umum.

Untuk menggambar, lalu potong menjadi potongan-potongan kecil, tulis kode, berkat itu browser akan kembali mengumpulkan semua elemen menjadi satu kesatuan. Semuanya tampak sangat rumit, bukan? Tidak sama sekali, dan tidak ada gunanya mengkhawatirkannya.

Begitulah cara situs web berkualitas dibangun. Jika Anda mau - masuk ke bisnis ini dan belajar, tidak ada keinginan - tidak ada yang bisa memaksa Anda.

Saya hanya bisa mengatakan satu hal ... tidak ada yang lebih menyenangkan daripada melihat bagaimana kata-kata yang tidak dapat dipahami yang Anda tulis diubah menjadi satu kesatuan dan menjadi hidup: tautan berfungsi, tombol bergerak, gambar bergerak, teks merangkak. Saya rasa saya tahu bagaimana perasaan Victor Frankenstein.

Ketika Anda mulai memahami bahasa rahasia dan melihat bahwa semuanya sebenarnya jauh lebih sederhana daripada yang terlihat pada awalnya, Anda tidak bisa tidak percaya pada kekuatan dan kemampuan otak Anda sendiri. Ini keren sekali.

Bagaimana website dibuat? Idealnya, pertama. Dia hanya melukis gambar. Misalnya seperti pada gambar di bawah ini. Sejauh ini, ini hanya sebuah gambar, sebuah foto. Tidak ada tautan yang berfungsi, ketika Anda mengklik Anda tidak pergi ke mana pun, pencarian tidak dilakukan.

Menurut gambar ini. Lihatlah tangkapan layar di bawah ini. Anda mungkin berpikir bahwa ini adalah kumpulan karakter yang konyol dan sangat kompleks. Faktanya, semuanya tidak begitu sulit, ada algoritma tertentu.

Hanya ada sekitar 150 tag dan masing-masing bertanggung jawab untuk tindakan tertentu: tautan, transfer, cetak tebal, warna, judul, dan sebagainya. Memahami mereka tidak begitu sulit jika Anda memiliki keinginan dan tidak keberatan dengan waktu.

Berkat pengetahuan tentang atribut ini, hampir semua masalah dapat diselesaikan. Berikut adalah cara untuk mencapai tujuan, setiap pengembang menemukan caranya sendiri.

Pembuat konten yang berpengalaman langsung melihat bagaimana mencapai hasil, sementara yang lain harus berpikir, mencari jawaban di artikel atau di kode sumber pesaing. Mereka hanya mengambil bagian yang diperlukan di situs pihak ketiga dan mengeditnya sendiri. Ini secara signifikan mempersingkat proses kerja.

Beberapa saat kemudian, saya akan menunjukkan kepada Anda sebuah contoh konkret.

Lihat kode

Jadi, izinkan saya menunjukkan terlebih dahulu kepada Anda bagaimana melanjutkan jika Anda perlu mempelajari html orang lain. Kemudian kita akan melihat lebih dekat pada semua masalah lainnya.

Jalan terbaik

Metode yang akan saya uraikan pertama sedikit rumit untuk pemula, tetapi sebagai pengantar, baca terus. Buka halaman dan klik tombol kanan mouse. Pilih "Simpan Sebagai..."

Simpan seluruh halaman web. Seperti yang Anda lihat di tangkapan layar, saya sudah mengunduh semuanya terlebih dahulu. Di sini kita memiliki dua folder.

Semua yang Anda butuhkan ada di sini. Setiap elemen. Jika Anda memahami ini, Anda dapat dengan cepat mendapatkan semua yang Anda butuhkan. Tapi, tugas seperti itu semakin menjadi tidak mungkin. Download tidak dilakukan. Apa yang harus dilakukan jika dilarang menyalin halaman?

Ini google chrome

Seperti yang mungkin Anda perhatikan, saya paling sering menggunakan Google Chrome dan mudah untuk mengenali kode orang lain di browser ini. Seperti pada prinsipnya dan lainnya. Skema tidak akan serupa, tetapi identik. Kami membuka halaman yang kodenya ingin kami ketahui, dan klik di mana saja dengan tombol kanan mouse. Di jendela yang muncul, klik "Lihat kode halaman".

Selembar kode akan terbuka di jendela baru, yang cukup sulit dipahami oleh pemula. Tapi, jangan takut dulu.

Jika Anda perlu mengetahui kode hanya satu elemen, arahkan kursor ke atasnya dengan mouse dan klik kanan. Kami memilih fungsi chrome lain: "Lihat kode elemen".

Misalnya, saya mungkin tertarik dengan bagaimana logo itu dibuat, menggunakan gambar atau bahasa pemrograman? Bagaimanapun, Anda dapat menggambar persegi menggunakan css. Banyak ahli menyarankan untuk menulis informasi sebanyak mungkin dalam kode. Dan bagaimana cara kerja situs populer?

Berikut adalah informasi yang Anda butuhkan. html atas, css bawah. Ini adalah dua bahasa. Yang pertama bertanggung jawab untuk komponen teks, dan yang kedua untuk desain. Jika tidak ada css, maka Anda harus menentukan warna, ukuran font setiap kali. Untuk setiap halaman, itu sangat panjang. Tetapi jika tidak ada html, maka kita tidak akan memiliki teks. Secara kasar dijelaskan, tetapi secara umum, semuanya begitu.

Omong-omong, jika Anda tertarik dengan cara kerjanya di sini, Anda dapat melihat tautan ke gambar di bawah ini. Inilah jawaban Anda.

Mozilla Firefox

Jika Anda suka bekerja di moncong, maka semuanya akan sama persis. Buka halaman dan klik tombol kanan mouse. "Kode sumber halaman" jika Anda ingin melihat seluruh kode.

Saat Anda mengarahkan kursor ke suatu elemen, Anda dapat membuka kodenya.

Di sini data ditampilkan di bagian bawah layar, tetapi yang lainnya persis sama.

Peramban Yandex

Di browser Yandex, semuanya persis sama seperti pada dua opsi sebelumnya, buka halaman, klik kanan, lihat kode halaman.

Kami mengarahkan kursor ke elemen jika kami ingin mengetahui dengan tepat kodenya.

Semuanya ditampilkan di sini dengan cara yang sama seperti di chrome.

Opera

Dan terakhir, Opera.

Omong-omong, Anda mungkin telah memperhatikan bahwa tidak perlu menggunakan mouse. Untuk membuka kode, ada pintasan keyboard cepat dan untuk semua browser itu sama: CTRL+U.

Untuk elemen: Ctrl+Shift+C.

Seperti inilah hasilnya.

Ini akan menarik untuk pemula

Sekarang lihat bagaimana semuanya bekerja. Anda menemukan sebuah situs dan Anda sangat menyukai beberapa elemen. Misalnya, yang satu ini. Anda sudah tahu cara membuka kode elemen.

Sekarang salin.

Saya menggunakan , saya menempelkan kode ini ke file html baru, di tag body (body dalam bahasa Inggris).

Sekarang mari kita lihat bagaimana semuanya terlihat di browser.

Siap. Agar teks disejajarkan di tepinya dan memperoleh warna kehijauan, Anda perlu menghubungkan css ke dokumen ini dan menyalin satu kode lagi dari situs tempat kami mencuri kode ini.

Sekarang saya tidak akan melakukannya. Dibutuhkan lebih banyak waktu: baik milikku maupun milikmu. Saya pikir saya akan menjelaskan semua detailnya dalam publikasi saya yang akan datang. Berlangganan buletin dan jadilah yang pertama tahu kapan sebuah artikel muncul.

Jika Anda tidak tahan, tetapi Anda ingin mempelajari lebih lanjut tentang html dan css sekarang, maka saya secara tradisional dapat merekomendasikan Anda kursus pelatihan gratis.

Berikut adalah 33 pelajaran yang akan memungkinkan Anda untuk menguasai html - "Kursus HTML Gratis" .

Dan inilah informasi lengkap tentang css - "Kursus CSS Gratis (45 Pelajaran Video!)" .

Sekarang Anda tahu sedikit lebih banyak. Saya berharap Anda sukses dalam usaha Anda. Sampai berjumpa lagi!

Jadi, hari ini kita akan melihat beberapa alat yang berguna untuk wizard Web yang membuat hidup lebih mudah saat meletakkan situs. Mari kita mulai dengan konsol webmaster di Google Chrome. Dan mari kita bahas pertanyaan yang paling sering muncul dari webmaster selama tata letak situs.

Untuk membuka konsol, buka situs Anda di Google Chrome, klik kanan di mana saja di halaman web, dan pilih Lihat Kode Halaman dari menu tarik-turun konteks, atau pada elemen tertentu untuk dijelajahi dengan memilih Lihat elemen Kode".

Di bagian atas Anda akan memiliki beberapa tab yang terdaftar. Hari ini kita akan berbicara tentang tab "Elemen" , yang menyajikan elemen halaman web dengan tag penyorotan, properti, penyorotan elemen bersarang, mewakili hierarki elemen di pohon DOM (petunjuk di bagian bawah, dari induk akar ke induk saat ini sedang diperiksa), kemampuan untuk mengedit elemen, daftar propertinya, pertimbangkan untuk mencari berdasarkan elemen, dan juga Mari berkenalan dengan melihat gaya css yang terkait dengan elemen, dll..

Bagaimana cara melihat semua gaya yang terkait dengan elemen tertentu? Yang mana yang digunakan sekarang? Di file apa mereka?

Jadi, tidak ada yang lebih mudah! Kami membuka browser Google Chrome, membuka situs kami - sumber pertanyaan, klik kanan pada elemen yang diinginkan jika terlihat dalam konteks halaman, dan pilih item "Lihat kode elemen" di menu konteks.

Di bagian bawah, kami memiliki konsol dengan tab yang disorot di sebelah kiri " Elemen"Dan semua gaya yang terkait dengan elemen di sebelah kanan, di mana: Gaya yang Dihitung- ini adalah gaya "ringkasan" umum yang telah ditetapkan ke elemen dari aturan css dan pengaturan browser pengguna (lingkungannya), dan pada saat yang sama tab diciutkan.

Tetapi kami tertarik pada tab "Gaya" yang ditempatkan di bawahnya, yang pada gilirannya mencantumkan semua gaya yang ditetapkan ke elemen, serta file di mana aturan ini ditentukan untuk elemen ini berdasarkan jenisnya, id, kelas, nama, properti, atribut, dll. Pada saat yang sama, jika aturan css dicoret, itu berarti aturan itu didefinisikan ulang sebelumnya/berikutnya (yang memudahkan untuk melacak aturan css mana yang menjadi prioritas dan diterapkan ke elemen dalam kasus ini).

Di bawah konsol adalah garis yang menunjukkan elemen dalam hierarki dokumen, dengan mudah memungkinkan Anda untuk melihat seluruh daftar elemen induk dari root hingga elemen yang dipilih. Sesuatu seperti remah roti.

Tag HTML tidak terlihat dalam konteks halaman? Atau apakah Anda perlu menemukan semua tag, misalnya, berdasarkan kelas, nama, properti, jenis tertentu?

Buka situs di Google Chrome, klik kanan, panggil menu konteks, pilih « Lihat kode halaman » . Tekan kombinasi tombol "CTRL + F" secara bersamaan, masukkan frasa yang kita butuhkan ( Misalnya: kelas="lapisan") dan menelusuri daftar hasil yang ditemukan, sekaligus melihat semua gaya yang terkait dengan elemen yang diinginkan di sisi kanan halaman.

Cara melihat kode html dari elemen (elemen) yang dimuat secara dinamis (misalnya: oleh Ajax)

Menunggu halaman dimuat di Google Chrome. Kami melakukan tindakan yang diperlukan agar Ajax berfungsi. Kami klik kanan pada data yang diunduh, pilih "Lihat kode elemen" di menu konteks, periksa hasilnya di konsol pada tab "Elemen" di sebelah kiri.

Lihat perubahan gaya css secara real time

Omong-omong, juga nyaman untuk mengamati, jika perlu, gaya apa yang ditetapkan ke elemen dengan cepat, misalnya, saat menggulir galeri dan acara pengatur waktu lainnya. Semua gaya yang ditetapkan melalui javascript secara real time akan ditampilkan di properti gaya elemen yang dipilih di jendela pada tab Elemen.

Tampilan interaktif dari dampak aturan css pada penyajian tag html

Google Chrome menyediakan konsol interaktif untuk gaya css. Dan ini berarti Anda tidak hanya dapat melihat gaya mana yang diterapkan ke elemen, tetapi juga memindahkan kursor mouse ke properti css tertentu, mengaktifkannya dengan tanda centang pop-up di sebelah kanan, atau menonaktifkannya dengan menghapus centang pada bendera dan melihat hasil yang dihasilkan pada halaman.

Kami mengubah struktur penyajian elemen html dengan cepat (tepat di browser)

Jadi, kita telah mempelajari cara menjelajahi struktur dokumen web di Google Chrome, sekarang mari kita lihat elemen pengeditan dengan cepat. Kami pergi ke konsol dengan cara apa pun yang nyaman bagi kami. Kami menemukan elemen yang diinginkan di tab "Elemen", klik kanan padanya, dengan demikian memanggil menu konteks pop-up:

• Tambahkan atribut- Menambahkan atribut ke elemen yang ditentukan. Segera setelah kursor menjadi aktif, kita mulai mengatur properti yang diinginkan. Sebagai contoh: Mari kita tulis name="itemImage", yang akan segera ditambahkan ke elemen kita.
• Edit atribut– jika Anda mengklik kanan pada atribut suatu elemen, item tersebut menjadi tersedia editatribut. Klik, edit.

Contoh penggunaan: kami lupa kata sandi yang disimpan di bawah tanda bintang di Google Chrome (jika kata sandi disimpan di browser ini). Klik kanan pada elemen dengan kata sandi, klik "Lihat Kode Elemen" , di konsol di sisi kiri tab Elemen klik kanan pada atribut type="password", klik kiri pada Suntingatribut, ubah atribut ketik="kata sandi" di ketik="teks", dan di sini kita sudah memiliki kata sandi yang sama dalam bentuk teks, bukan tanda bintang.

• Suntinghtml- klik kanan pada elemen di konsol Elemen, memilih Suntinghtml, ubah kode sesuai keinginan Anda.
• SalinansebagaiHTML- salin bagian HTML yang kita perlukan untuk penelitian lebih lanjut, katakanlah, di buku catatan, atau untuk tujuan lain di mana kita perlu menerapkan tata letak yang persis sama. Kami menghemat waktu.
• SalinanXPATH– menyalin representasi XPATH dari struktur dari akar elemen induk ke elemen yang dipilih.
• Menghapussimpul– jika Anda perlu menghapus elemen yang dipilih saat ini dan semua turunannya dari konteks halaman web, dan lihat hasilnya.
• Katamembungkus- akan membuat tampilan halaman web dalam konteks konsol Elemen lebih mudah dibaca.

Dalam artikel berikut, kita akan terus melihat alat webmaster, dan khususnya, kita akan berkenalan dengan tab alat webmaster lainnya di Google Chrome, dan juga pertimbangkan untuk men-debug kesalahan javascript menggunakan browser yang berbeda

Liburan semakin dekat - Hari Perempuan Internasional. Mari kita bersiap-siap untuk itu. Anda dapat memberi selamat kepada anak perempuan dan perempuan dengan cara yang orisinal menggunakan layanan kartu pos, yang akan dibahas di bawah ini.

Anda dapat menggunakan layanan yang sama dengan yang kami gunakan.

Layanan kartu pos siap pakai

Buat kartu pos 8 Maret online

Gunakan layanan berikut untuk membuat kartu pos dari awal.

1. Canva adalah editor foto fungsional yang terkenal. Di sini Anda akan menemukan banyak template. Pendaftaran diperlukan.
2. Printclick Jika Anda memiliki bisnis sendiri, Anda dapat memesan sejumlah kartu pos dengan logo dan kontak perusahaan Anda. Anda juga dapat menggunakan generator kartu pos princlick. Promosi hebat dan murah.
3. Crello adalah editor yang membutuhkan pendaftaran. Jangan takut dengan bahasa Inggris, dalam pengaturan Anda dapat beralih ke bahasa Rusia.
4. Kartu pos online - bagi mereka yang memiliki imajinasi yang berkembang dengan baik, karena mereka harus membuat kartu pos dari awal.
5. Mumotiki - siapkan gambar yang indah dan Anda dapat menambahkan teks ucapan selamat di sini. Omong-omong, jika Anda hanya perlu menambahkan teks ke gambar, maka Anda dapat memeriksanya.

Saya harap dengan menggunakan salah satu generator ini, Anda dapat memberi selamat kepada wanita Anda secara memadai pada 8 Maret!