Anda perlu cepat melihat semua perubahan pada tapak itu sendiri, tanpa menjejaskan fail dan kod tapak yang disiarkan di Internet. Contohnya, tukar skema warna blok, alihkan elemen yang telah dialih keluar, dsb.
Untuk melakukan ini, ramai juruweb menggunakan pelayan Denwer atau OpenServer tempatan, menjalankan salinan penuh tapak pada komputer mereka. Kaedah ini universal dan sesuai untuk profesional; ia boleh digunakan untuk menguji operasi pelbagai skrip dan pemalam, bereksperimen dengan menukar reka bentuk dan mengedit semua fail tapak, dan selepas ujian, pindahkan perubahan yang sesuai terus ke tapak.
Bagi pengguna yang jauh dari seni juruweb, saya mengesyorkan menggunakan penyemak imbas untuk tujuan ini. Memandangkan saya menggunakan Chrome, saya akan memberikan arahan dengan tangkapan skrin untuk penyemak imbas khusus ini. Dengan analogi, anda boleh bekerja dengan Opera, Yandex.Browser, Mozilla Firefox dan pelayar lain; prinsip alat mereka adalah serupa.
Arahan 1: cara melihat keseluruhan kod HTML tapak dalam pelayar
Buka halaman web yang diperlukan untuk tapak anda. Klik kanan pada elemen yang diperlukan, menu lungsur turun konteks pelayar dengan arahan yang tersedia akan muncul:
Rajah 1. Melihat keseluruhan kod HTML halaman web dalam penyemak imbas Chrome
Penting: Perintah dalam menu lungsur mungkin berbeza, contohnya, untuk elemen aktif (pautan, gambar, video) dan yang tidak aktif (teks, latar belakang, div):
Rajah 2. Menu lungsur turun penyemak imbas Chrome
Jadi jika anda tidak menemui arahan yang anda perlukan, cuma klik kanan di tempat lain atau gunakan kekunci pintas penyemak imbas anda.
Mari kembali ke Rajah 1, ia menunjukkan arahan yang diperlukan untuk melihat semua kod HTML halaman web sumber, ia dipanggil " Lihat kod halaman". Klik pada arahan, tab baharu akan dibuka dengan kod penuh halaman web sumber, satu kelebihan yang besar kepada segala-galanya - tontonan tersedia dengan penyerlahan sintaks:
Rajah 3. Serpihan kod laman web ini
Alat ini sangat berguna untuk mencari dan mengedit elemen yang anda cari.
Cara alternatif untuk melihat semua kod HTML halaman web
Untuk akses yang lebih pantas, anda boleh menggunakan cara lain untuk memanggil alat ini
- Dalam Rajah 1 kita juga melihat bahawa arahan ini tersedia melalui pintasan papan kekunci
+ ; - Tampal view-source:site ke dalam bar alamat penyemak imbas dan bukannya domain saya, masukkan alamat anda;
Kedua-dua kaedah adalah universal dan harus berfungsi dalam semua penyemak imbas.
Pada mulanya, sesetengah mungkin berfikir bahawa ini bukan alat yang diperlukan sama sekali, tetapi melihat keseluruhan kod HTML tapak adalah bagus untuk mencari elemen yang diperlukan dalam kod, ini boleh menjadi pautan, tag, tag meta, atribut dan elemen lain. .
Gabungan hotkey
Rajah 3. Cari mengikut kod tapak
Selepas anda memasukkan permintaan ke dalam borang carian, skrin akan beralih ke elemen pertama yang ditemui, menggunakan anak panah yang anda boleh bergerak di antara mereka dan pilih yang anda perlukan:
Rajah 4. Cari mengikut kod tapak HTML
Arahan 2: cara melihat dan mengedit kod HTML dan CSS tapak dalam penyemak imbas Google Chrome
Sekarang bahagian yang paling penting, di mana saya akan menunjukkan bagaimana anda boleh mengedit kod HTML dan CSS tapak web dalam pelayar. kemudian pindahkan perubahan ke penyemak imbas.
![](https://i2.wp.com/samsebewebmaster.ru/wp-content/uploads/2015/12/%D0%9A%D0%BE%D0%BC%D0%B0%D0%BD%D0%B4%D0%B0-%D0%9F%D1%80%D0%BE%D1%81%D0%BC%D0%BE%D1%82%D1%80%D0%B5%D1%82%D1%8C-%D0%BA%D0%BE%D0%B4.jpg)
Alat berguna ini sentiasa tersedia dalam penyemak imbas anda; percubaan dengan arahan lain yang akan memudahkan anda mengedit tapak anda.
Saiz dan warna beberapa elemen penting blog - seperti tajuk blog atau post, lebih banyak tag, dan seumpamanya. Saya mencari kod yang diperlukan secara manual, bereksperimen dengan domain ujian, berdasarkan artikel itu kemudian ditulis.
Dan baru-baru ini saya perlu menukar warna pautan. Setelah menyaring sekumpulan literatur mengenai isu ini, saya menyedari satu perkara yang mudah: setiap orang memberikan contoh daripada templat mereka sendiri, tetapi kita semua mempunyai templat yang berbeza dan adalah baik jika kod daripada contoh itu sekurang-kurangnya serupa sedikit: tanpa merengek, Saya masih akan mencarinya dengan mencari - menggunakan kaedah poke.
Nombor itu tidak berfungsi dengan kod pautan. Semua orang menunjukkan jalan yang sama sekali berbeza. Saya tertanya-tanya sama ada terdapat alat yang mudah dan tepat, bagaimana untuk mencari kod html yang diperlukan di mana-mana laman web. Ramai blogger, walaupun berpengalaman, mengalami kesukaran dalam pengubahsuaian kecil pada templat. Tidak ada yang salah dengan ini, kerana setiap orang mempunyai minat dan matlamat mereka sendiri untuk membuat laman web.
Jika anda ingin membuat perubahan kecil pada templat, mis. menukar sebarang tajuk, tajuk artikel dan bahagian, warna dan saiz fon dan pautan, Biasanya sudah cukup untuk mempelajari prinsip mudah yang dibincangkan dalam artikel ini. Tetapi terdapat juga kes kompleks yang memerlukan sama ada kajian yang lebih mendalam tentang html dan css, atau bantuan pakar.
Pada suatu hari, seorang kenalan meminta saya mencari tempat untuk menukar warna panel kategori dalam templatnya. Memuat naik topik ke subdomain ujian. Tetapan untuk elemen ini tidak disimpan dalam style.css, tetapi dalam fail lain, jadi seseorang tidak dapat mencarinya.
Bagaimana untuk mencari dan menukar kod html dan css tapak
Jika anda tidak suka artikel panjang, ini untuk anda pada akhir artikel tutorial video yang memberitahu bagaimana anda boleh melihat kod html tapak web menggunakan Notepad++ dan membuat perubahan pada reka bentuk mana-mana templat menggunakan contoh cara menukar warna fon. Dalam video tersebut terdapat kehalusan lain pengendalian blog. Dan bagi mereka yang lebih dekat dan lebih mudah difahami dengan teks, di bawah adalah analisis terperinci topik dengan tangkapan skrin.
httpv://youtu.be/uIlVvwCt2ho
Terma dan konsep
Adalah lebih tepat untuk memberi tajuk artikel " Bagaimana untuk mencari kod css", tetapi saya memutuskan untuk menggunakan nama yang "salah", kerana pada dasarnya jawapan untuk soalan ini terdapat dalam html. CSS dan HTML adalah perkara yang sangat berbeza, walaupun ia adalah dua bahagian sistem yang sama. Terdapat banyak artikel teknikal di Internet, di sini sudah cukup untuk kita memahami bahawa:
- HTML— bertanggungjawab untuk struktur tapak (apa yang mengikuti apa, dalam susunan apa, dll.). Ini adalah asas di mana tapak dibuat. Jika kita bandingkan dengan rumah, maka ini adalah susun aturnya, susunan bilik.
- CSS— bertanggungjawab untuk reka bentuk (fon, saiz, warna, dll.). Ini adalah gaya umum rumah dan gaya bilik individunya: jenis kertas dinding yang akan ada, lampu, langsir, perabot. Oleh itu, dokumen yang menyatakan kod css, dipanggil "helaian gaya"
Dan jika anda tertanya-tanya bagaimana untuk menukar, contohnya, warna tajuk tapak, saiz fon dalam teks, atau warna pengepala dalam bar sisi, maka anda perlu mencari semua ini dalam helaian gaya CSS. Ini adalah satu-satunya perkara yang patut difahami terlebih dahulu untuk membuat perubahan pada kod itu sendiri.
Saya suka menjadikan kompleks itu mudah. Saya masih ingat dahulu, ketika saya mempunyai kereta pertama saya, ia sangat lama, pendawaian reput, fius sering bertiup, dan setiap kali saya menundanya ke stesen servis. Bayangkan berapa banyak wang yang dibazirkan, walaupun pada hakikatnya menggantikannya sendiri, ternyata, menelan kos beberapa sen.
Suatu hari saya melihat apa sebenarnya yang dilakukan oleh tuan. Saya masih tidak tahu bagaimana fius berfungsi. Tetapi saya tahu di mana untuk menukarnya). Saya tidak akan membaiki motor itu sendiri, dan tidak sukar untuk menggantikan fius. Begitu juga dengan laman web.
Jika anda tidak mahu menjadi seorang pengaturcara, maka tidak perlu mempunyai pemahaman yang mendalam tentang pengaturcaraan. Ia cukup jelas untuk memahami apa yang dimaksudkan untuk apa, di mana untuk mencarinya dan bagaimana untuk mengubahnya. Adalah lebih baik untuk mengubah apa yang anda boleh sendiri, dan menyerahkan segala-galanya kepada pakar. Artikel tentang mempunyai pautan berguna mengenai topik ini.
Adakah anda perlu menjadi pakar dalam segala-galanya?
Selalunya terdapat perbincangan di blog SEO tentang sama ada seorang pemula perlu mempunyai pemahaman yang mendalam tentang HTML, atau lebih baik lagi, belajar cara menulis laman web sendiri supaya semuanya unik.. Baiklah, saya tidak tahu - untuk setiap orang sendiri, dan di sini apa yang lebih dekat dengan siapa yang lebih dekat. Saya berminat sedikit lagi, jadi saya kini belajar lebih banyak daripada Vladimir. Pada bulan November tahun ini, Vladimir membuka blognya sendiri. Blognya dibuat pada templat yang paling ringkas dan percuma, dia hanya mengubah suai sedikit mengikut kesesuaian dirinya.
Selepas 10 hari kewujudan, blog itu menduduki tempat ke-104 dalam ranking semua tapak Runet dengan trafik kira-kira 1.5 ribu orang setiap hari. Dalam 10 hari. Jadi apa urusannya? Vladimir mahir dalam HTML dan boleh memesan dan membeli sendiri templat unik. Jadi anda mesti faham itu Rahsianya bukan terletak pada templat, tetapi pada kegunaan maklumat.
Di manakah kod html tersembunyi?
Maaf atas penyelewengan, mari kembali ke kod kami). Katakan anda ingin menukar warna fon tajuk blog anda. Mari lihat contoh tapak ujian saya.
- Buka tapak dalam penyemak imbas Google Chrome (jika anda belum menggunakannya lagi, pasangkannya - ia direka bentuk dengan baik untuk bekerja dengan tapak web, ia mempunyai banyak alatan terbina dalam).
- Kami menggerakkan kursor tetikus ke atas elemen yang akan kami ubah . Dalam kes ini - nama blog. Kami klik kanan padanya dan dalam tetingkap yang muncul, pilih LIHAT KOD ELEMEN.
PENTING: jangan mengelirukan ini dengan MELIHAT KOD HALAMAN! Kami tidak memerlukan keseluruhan halaman sekarang, hanya elemen yang berasingan.
Klik padanya - tetingkap melihat kod muncul di bahagian bawah penyemak imbas:
Baris kod yang kami ubah diserlahkan dengan warna merah.
Tetapi kawasan yang diserlahkan dengan warna biru mengandungi perkara yang kami cari. Di sinilah anda boleh mencari baris kod yang tepat (bukan anggaran) yang bertanggungjawab untuk fon, warna, saiz, penyerlahan, dsb. Dengan cara ini anda boleh mengetahui SEBARANG kod mana-mana elemen mana-mana templat.
Cari baris yang dikehendaki dalam blok yang diserlahkan dengan warna biru. Terdapat gelangsar di sebelah kanan, anda boleh menatal dan mencari baris yang anda perlukan.
Prinsip umum tempat mencari sesuatu:
Nama fon - dalam baris FONT FAMILY
Saiz fon - dalam baris FONT SIZE
Warna fon - dalam baris COLOR
Berikut ialah tiga baris utama di mana nama, saiz dan warna fon mana-mana elemen berubah. Di sebelah kanan dalam baris gaya css kedudukan baris dalam dokumen diberikan. Jika anda perlu menukar beberapa elemen lain (contohnya, anda perlu mengetahui di mana garisan tempat anda boleh menukar warna bar menu atau warna pautan), semuanya dilakukan dengan sama.
PERHATIAN:
Garis yang akan kami salin diserlahkan dengan warna merah dalam rajah,
supaya anda boleh menemuinya kemudian dalam helaian gaya.
4. Salin baris. Oleh kerana dalam contoh ini kita ingin menukar warna nama tapak, saya menyalin baris yang diserlahkan dalam segi empat merah dalam gambar kedua. Dalam templat saya, ia bertanggungjawab untuk menukar warna tajuk tapak:
#header h1 a, #header h1 a:dilawati (
Cari baris yang diperlukan dalam fail "style sheet (style.css)". Ini sudah dilakukan dalam panel pentadbir. Saya sangat meminta bahawa, walaupun tiada keyakinan dan pemahaman yang lengkap, semua eksperimen harus dijalankan pada subdomain ujian untuk mengecualikan .
Jadi, pergi ke panel pentadbir: CONSOLE - PENAMPILAN - EDITOR. Di bar sisi kanan kita dapati fail STYLE TABLE (STYLE.CSS), bukanya.
Sekarang buka baris carian menggunakan kekunci CTRL + F: tetingkap baris kosong akan muncul di tetingkap atas. Kami menampal ke dalamnya baris yang kami salin dalam langkah 4.
Dan anda akan melihat bagaimana baris ini akan diserlahkan dalam helaian gaya (dalam oren dalam gambar):
Kami membuat perubahan kepada elemen. Dalam kes kami, kami menukar warna fon, jadi dalam baris COLOR kami menggantikan nilai lain - warna yang kami mahu. Dalam contoh, warnanya hitam, maksudnya ialah:
Anda boleh memilih warna dalam mana-mana perkhidmatan palet warna web: taip "Palet warna web" dalam enjin carian dan pilih yang anda mahu. Kami memilih warna, menyalin nilai digitalnya dan berhati-hati menggantikannya dengan yang lama. selepas itu kita klik KEMASKINI FAIL dan pergi untuk melihat apa yang berlaku.
Jika perubahan tidak dipaparkan, selama sejam yang lalu dan pergi ke halaman sekali lagi - kali ini semuanya harus dipaparkan.
Ia mengambil masa yang lama untuk menerangkan, tetapi dalam amalan semuanya dilakukan dengan cepat, terutamanya apabila kemahiran awal muncul.
Secara lebih terperinci, cara menukar elemen tertentu:
Itu sahaja untuk hari ini, saya tidak akan mengganggu anda dengan kod lagi. Saya harap kini anda sendiri boleh mencari dan menukar mana-mana elemen kod html dengan mudah, atau lebih tepat lagi, kod css - semoga pakar memaafkan saya kerana memudahkannya. Dan jika anda tidak memahaminya, masih lawati halaman tersebut. Jangan buang masa dengan perkara yang bukan-bukan.
Saya cadangkan menonton video Artem Abramovich tentang cara mencari dan mencari apa-apa perkataan atau elemen dalam mana-mana tema/templat, untuk mana-mana enjin (wordpress, joomla, dll.) dan menggantikannya dengan apa yang anda perlukan:
Sila kongsi jika anda menyukainya:
Anda juga mungkin berminat untuk mengetahui:
![](https://i2.wp.com/opartnerke.ru/wp-content/uploads/2012/09/nazvanie_saita.jpg)
Kami telah mengeluarkan buku baharu, Pemasaran Kandungan Media Sosial: Cara Mendalami Kepala Pengikut Anda dan Membuat Mereka Jatuh Cinta dengan Jenama Anda.
Kod sumber tapak ialah koleksi penanda HTML, gaya CSS dan skrip JavaScript yang diterima oleh penyemak imbas daripada pelayan web.
Lebih banyak video di saluran kami - pelajari pemasaran internet dengan SEMANTICA
Ia boleh dibandingkan dengan satu set arahan yang diberikan kepada askar oleh seorang komander. Bayangkan bahawa penonton tidak melihat atau mendengar bos. Dari sudut pandangan mereka, tentera menjalankan tindakan secara bebas. Dalam kes kami, komander adalah penyemak imbas, arahan adalah kod sumber, dan tentera yang berbaris adalah hasil akhir.
Tapak ini disimpan pada pelayan web, yang menghantar halaman atas permintaan pengguna. Permintaan ialah menaip URL dalam bar alamat, mengklik pautan atau mengklik butang hantar pada borang. Tidak kira bahasa apa halaman web ditulis atau sama ada halaman web itu termasuk komponen perisian. Hasil akhir mana-mana algoritma bahagian pelayan ialah set tag html dan teks.
Kod sumber halaman ialah satu set data yang merangkumi:
- penanda html;
- helaian gaya atau pautan fail;
- atur cara yang ditulis dalam JavaScript atau pautan ke fail dengan kod.
Tiga bahagian ini diproses oleh penyemak imbas. Untuk pelayan, ini hanyalah teks yang perlu dihantar sebagai tindak balas kepada permintaan.
Mengapa kita mungkin perlu mengkaji kod sumber
Semua yang kami lihat, kami boleh menganalisis dan memohon untuk menyelesaikan masalah tertentu yang timbul semasa bekerja dengan tapak, terutamanya apabila mengoptimumkannya. Dengan melihat kod sumber, kita boleh:
- Lihat teg meta tapak anda atau orang lain untuk menganalisisnya.
- Lihat kehadiran atau ketiadaan elemen tertentu di tapak: kaunter, kod pengenalan dalam pelbagai sistem, skrip tertentu dan perkara lain.
- Ketahui parameter elemen: saiz, warna, fon.
- Cari laluan ke foto dan elemen lain yang terdapat pada halaman.
- Teroka pautan daripada halaman.
- Cari masalah dengan kod yang mengganggu proses pengoptimuman tapak web: gaya tidak diletakkan dalam fail berasingan, skrip, kod tidak sah.
Ini adalah ciri asas, tetapi sebenarnya, dengan dapat membaca kod, anda boleh mengetahui lebih banyak tentang halaman tersebut.
Cara melihat kod sumber tapak
Ia tidak mungkin untuk melakukan ini sepenuhnya dalam bentuk di mana ia disiarkan pada pelayan dari penyemak imbas. Tetapi anda boleh melihat semua penanda dengan mengklik kanan pada halaman. Di sini dan di bawah menggunakan Google Chrome sebagai contoh.
Pilih pilihan "Lihat kod halaman" dan dapatkan penyenaraian penuh dalam tab berasingan.
Ia hanya teks yang anda perlu analisis untuk memahami. Tetapi anda boleh mendapatkan kod interaktif menggunakan alat pembangun.
Bagaimana untuk mencari kod sumber halaman laman web
Klik pada ikon menu dalam penyemak imbas. Selalunya ia berada di sebelah kanan dan kelihatan seperti tiga titik atau jalur.
Dalam bahagian alat tambahan, pilih "Alat Pembangun".
Tetingkap akan terbuka menunjukkan keadaan aktif kod. Ini bermakna apabila anda mengklik pada penanda, gaya elemen akan muncul di sebelahnya, dan blok yang dipilih akan diserlahkan pada halaman.
Dalam tab "Sumber" anda boleh melihat kandungan beberapa fail: skrip, fon, imej.
Dalam tab "Keselamatan", anda boleh menyemak sijil tapak.
Tab "Audit" akan membantu anda menyemak sumber yang disiarkan pada pengehosan.
Jika lokasi panel di sebelah kanan menyusahkan, anda boleh mengklik tiga titik dan menukarnya dengan memilih item yang dikehendaki.
Bagaimana untuk melihat tag meta
Setiap dokumen HTML termasuk tag struktur. Berikut adalah sebahagian daripada mereka:
- Html – keseluruhan dokumen.
- Ketua – bahagian pengepala perkhidmatan.
- Tajuk – tajuk halaman (dipaparkan pada tab).
- Badan – badan dokumen.
- H1-H6 – tajuk teks halaman.
- Artikel – artikel.
- Bahagian - bahagian.
- Menu – menu.
- Div – blok.
- Span – rentetan.
- P – perenggan.
- Meja – meja.
Elemen direka bentuk untuk mengehadkan bahagian secara logik pada halaman; jika perlu, ia direka bentuk menggunakan gaya. Ia mengandungi teks yang entah bagaimana boleh dilihat pada halaman. Tetapi teg Ketua mengandungi maklumat perkhidmatan. Tag meta digunakan untuk menunjukkannya. Segala-galanya yang tertulis di dalamnya bertujuan untuk pelayan dan enjin carian.
Kandungan mereka tidak dapat diketahui dengan cara lain.
Mari kita perhatikan teg Pautan. Dengan bantuannya, pautan ke fail yang disertakan luaran ditentukan. Jika mahu, anda boleh melihat kandungan dan menyimpan ke cakera. Untuk melakukan ini, alihkan penuding ke alamat dan tekan RMB. Pilih "Buka dalam Tab baharu".
Fail yang ditentukan akan dibuka dalam tab baharu, yang boleh anda lihat atau simpan.
Cara melihat kod sumber halaman untuk nyahpepijat skrip
Dalam kes ini, adalah paling mudah untuk membuka halaman pada mesin tempatan. Jika anda hanya perlu membetulkan penanda, gaya dan skrip, maka ini boleh dilakukan terus dari folder. Kod HTML dilihat dengan cara yang sama. Tetapi ralat kod JavaScript boleh dilihat dalam tab "Konsol". Ini menunjukkan perihalan ralat dan nombor baris tempat ia berlaku.
Sintaks boleh dilihat secara langsung dalam kod. Inilah kegunaan tab "Sumber".
Cara melihat kod elemen tertentu
Untuk halaman besar dengan banyak elemen, sukar untuk mencari kod yang diperlukan dalam semua markup. Dalam kes ini, anda harus menggunakan arahan menu konteks khas. Gerakkan tetikus ke atas serpihan dan tekan RMB. Pilih arahan "Lihat Kod".
Tetingkap yang sama akan dibuka, tetapi dengan fokus pada objek yang dipilih.
Ringkasan
Kami memberitahu anda apa itu kod sumber halaman. Ia cukup untuk menguasai pengetahuan asas HTML dan CSS, dan menggunakan alat pembangun yang mudah, anda akan dapat menyahpepijat dokumen HTML anda sendiri.
Mengkaji kod sumber di Internet akan membolehkan anda belajar bukan sahaja dari pengalaman anda sendiri, tetapi juga menggunakan contoh kerja sebenar. Dan untuk pakar SEO, tag meta akan berguna, maklumat yang boleh memberitahu banyak tentang tapak.
Kebarangkalian melihat ke dalam permulaan kod web muka surat, yang diterima oleh penyemak imbas hasil daripada permintaan kepada pelayan, tersedia dalam hampir setiap pelayar Internet. Akses kepada arahan yang sepadan disusun lebih kurang sama, tetapi terdapat perbezaan yang ketara dalam kaedah dan bentuk di mana kod .
Arahan
1. Dalam pelayar Mozilla FireFox, kembangkan bahagian "Lihat" dalam menu dan klik "Awal" kod muka surat" Item yang sama juga terdapat dalam menu konteks yang muncul jika anda mengklik kanan teks muka surat. Anda juga boleh menggunakan kombinasi kekunci CTRL + U. Mozilla FireFox tidak menggunakan program luaran - permulaan kod muka surat dengan penonjolan sintaks akan dibuka dalam tetingkap penyemak imbas yang berasingan.
2. Dalam Internet Explorer, klik menu Fail dan pilih Edit dalam Notepad. Daripada nama Notepad, program lain boleh ditulis yang telah anda tetapkan dalam tetapan penyemak imbas untuk melihat permulaan kod A. Pada klik muka surat dengan butang tetikus kanan, menu konteks muncul, yang juga mempunyai item yang membolehkan anda membuka huruf awal kod muka surat dalam program luaran – “Lihat HTML- kod A".
3. Dalam penyemak imbas Opera, buka menu, pergi ke bahagian "Halaman" dan anda akan mempunyai peluang untuk memilih item "Mula" dalam subseksyen "Alat Pembangunan" kod"atau item "Awal kod bingkai." Kekunci pintas CTRL + U dan CTRL + SHIFT + U masing-masing diberikan kepada pilihan ini. Dalam menu konteks terikat pada satu klik muka surat klik kanan, terdapat juga item “Initial kod" Opera sumber terbuka muka surat dalam program luaran yang ditetapkan dalam OS atau dalam tetapan penyemak imbas untuk mengedit fail HTML.
4. Penyemak imbas Google Chrome tanpa sebarang keraguan mempunyai organisasi terbaik untuk melihat permulaan kod A. Dengan mengklik kanan halaman, anda boleh memilih untuk melihat kod A muka surat"dan kemudian kod sumber dengan penonjolan sintaks akan dibuka dalam tab berasingan. Atau anda mungkin lebih suka baris "Lihat" dalam menu yang sama kod elemen” dan penyemak imbas dalam tab yang sama akan membuka dua bingkai tambahan di mana anda boleh memeriksa HTML dan CSS kod setiap elemen muka surat. Penyemak imbas akan bertindak balas kepada kursor yang bergerak merentasi baris kod dan, menyerlahkan elemen pada halaman yang sepadan dengan bahagian HTML ini kod A.
5. Dalam penyemak imbas Apple Safari, kembangkan bahagian Lihat dan pilih Lihat HTML kod A". Dalam menu yang muncul apabila anda klik kanan buka muka surat, item yang sepadan dipanggil "Lihat sumber". Tindakan ini diberikan kekunci pintas CTRL + ALT + U. Permulaan kod dibuka dalam tetingkap penyemak imbas yang berasingan.
Jika anda membuka mana-mana halaman web, ia akan mengandungi elemen biasa yang tidak berubah bergantung pada jenis dan fokus tapak. Contoh 4.1 menunjukkan kod untuk dokumen ringkas yang mengandungi tag asas.
Contoh 4.1. Kod sumber halaman web
Tajuk
Perenggan pertama.
Perenggan kedua.
Salin kandungan contoh ini dan simpan dalam folder c:\www\ sebagai example41.html. Selepas itu, lancarkan penyemak imbas dan buka fail melalui item menu Fail > Buka Fail (Ctrl+O). Dalam dialog pemilihan dokumen, pilih fail example41.html. Halaman web yang ditunjukkan dalam Rajah 1 akan dibuka dalam penyemak imbas. 4.1.
nasi. 4.1. Hasil menjalankan contoh
unsurbertujuan untuk menunjukkan jenis dokumen semasa - DTD (takrif jenis dokumen, perihalan jenis dokumen). Ini adalah perlu supaya penyemak imbas memahami cara mentafsir halaman web semasa, kerana HTML wujud dalam beberapa versi, di samping itu, terdapat XHTML (Extensible HyperText Markup Language), yang serupa dengan HTML, tetapi berbeza daripadanya dalam sintaks. Supaya penyemak imbas "tidak keliru" dan memahami mengikut standard mana untuk memaparkan halaman web, adalah perlu untuk menetapkan dalam baris pertama kod .
Terdapat beberapa jenis, ia berbeza bergantung pada versi HTML yang mereka sasarkan. Dalam jadual 4.1. Jenis dokumen utama dengan penerangannya diberikan.
DOCTYPE | Penerangan |
---|---|
HTML 4.01 | |
Sintaks HTML yang ketat. | |
Sintaks HTML peralihan. | |
Dokumen HTML menggunakan bingkai. | |
HTML 5 | |
Versi HTML ini hanya mempunyai satu doctype. | |
XHTML 1.0 | |
Sintaks XHTML yang ketat. | |
Sintaks XHTML peralihan. | |
Dokumen itu ditulis dalam XHTML dan mengandungi bingkai. | |
XHTML 1.1 | |
Pembangun XHTML 1.1 menjangkakan ia akan menggantikan HTML secara beransur-ansur. Seperti yang anda lihat, takrifan ini tidak mempunyai pembahagian kepada jenis, kerana sintaksnya adalah sama dan mematuhi peraturan yang jelas. |
Perbezaan antara perihalan dokumen yang ketat dan peralihan ialah pendekatan yang berbeza untuk menulis kod dokumen. HTML yang ketat memerlukan pematuhan yang ketat pada spesifikasi HTML dan tidak boleh memaafkan kesilapan. HTML peralihan lebih santai tentang beberapa kelemahan kod, jadi jenis ini lebih baik digunakan dalam kes tertentu.
Contohnya, dalam HTML dan XHTML yang ketat, kehadiran teg diperlukan
Pada masa hadapan kita akan menggunakan yang ketat, melainkan jika dinyatakan. Ini akan membolehkan kami mengelakkan kesilapan biasa dan mengajar kami menulis kod yang betul secara sintaksis.
Anda selalunya boleh mencari kod HTML tanpa menggunakan apa-apa, halaman web masih akan dipaparkan dalam kes ini. Walau bagaimanapun, ia mungkin berlaku bahawa dokumen yang sama muncul secara berbeza dalam penyemak imbas apabila anda menggunakandan tanpanya. Di samping itu, penyemak imbas boleh memaparkan dokumen sedemikian dengan cara mereka sendiri, akibatnya halaman "hancur", i.e. akan dipaparkan secara berbeza daripada keperluan pembangun. Untuk mengelakkan situasi sedemikian, sentiasa tambahke permulaan dokumen.
Tag mentakrifkan permulaan fail HTML, pengepala disimpan di dalamnya (
) dan badan dokumen (Tajuk dokumen, juga dipanggil blok
, boleh mengandungi teks dan teg, tetapi kandungan bahagian ini tidak ditunjukkan secara langsung pada halaman, kecuali dalam bekas
Tag adalah universal dan menambah seluruh kelas keupayaan, khususnya, dengan bantuan tag meta, kerana tag ini biasanya dipanggil, anda boleh menukar pengekodan halaman, menambah kata kunci, penerangan dokumen dan banyak lagi. Supaya penyemak imbas memahami bahawa ia berurusan dengan pengekodan UTF-8 (format transformasi Unicode), dan baris ini ditambah.
Tag
nasi. 4.2. Paparan pengepala dalam penyemak imbas
Tag
Anda mesti menambah teg penutup untuk menunjukkan bahawa blok tajuk dokumen telah lengkap.
Badan dokumen
Tajuk
HTML menawarkan enam tajuk teks dari pelbagai peringkat yang menunjukkan kepentingan relatif bahagian berikut tajuk. Ya, tag
mewakili tajuk tahap pertama yang paling penting, dan teg berfungsi untuk menunjukkan tajuk tahap keenam dan paling tidak signifikan. Secara lalai, tajuk tahap pertama dipaparkan dalam fon tebal terbesar, dan tajuk tahap berikutnya bersaiz lebih kecil. Tag ...Rujuk kepada elemen sekat, ia sentiasa bermula pada baris baharu, dan selepasnya, elemen lain muncul pada baris seterusnya. Selain itu, ruang putih ditambah sebelum dan selepas tajuk.
...Rujuk kepada elemen sekat, ia sentiasa bermula pada baris baharu, dan selepasnya, elemen lain muncul pada baris seterusnya. Selain itu, ruang putih ditambah sebelum dan selepas tajuk.
Sesetengah teks boleh disembunyikan daripada ditunjukkan dalam penyemak imbas dengan menjadikannya ulasan. Walaupun teks ini tidak akan dilihat oleh pengguna, ia masih akan dihantar dalam dokumen, jadi jika anda melihat kod sumber, anda boleh menemui nota tersembunyi.