Kaynak kodu klavye kısayolu. Google Chrome Web Yöneticisi Araçları

İlk başta bazılarına bunun gerekli bir araç olmadığı görünebilir, ancak bir sitenin tüm HTML kodunu görüntülemek, kodda gerekli öğeleri bulmak için harikadır, bunlar bağlantılar, etiketler, meta etiketler, nitelikler ve diğer unsurlar.

Kısayol tuşu kombinasyonu +arama kutusunu açın, Chrome tarayıcısında sağ üstte görünür:

Şekil 3. Site koduna göre arama

Arama formuna bir istekte bulunduktan sonra, ekran, aralarında hareket edebileceğiniz okları kullanarak bulunan ilk öğeye gidecek ve ihtiyacınız olanı seçin:

Şekil 4. Web sitesi HTML koduna göre arama

Talimat 2: Google Chrome Tarayıcıda Web Sitesi HTML ve CSS Kodu Nasıl Görüntülenir ve Düzenlenir

Şimdi, sitenin HTML ve CSS kodunu tarayıcıda nasıl düzenleyebileceğinizi göstereceğim en önemli kısım. ardından değişiklikleri tarayıcıya aktarın.

İşte, tarayıcınızda her zaman mevcut olan çok kullanışlı bir araç, siteyi düzenlemenizi kolaylaştıracak diğer komutları deneyin.

İnternetteki sayısız siteye göz atarak, çok sevdiğimizleri bulabilirsiniz. Hemen bir takım sorular ortaya çıkıyor. Site, kendi kendine yazılan kod veya bir tür CMS kullanılarak mı yapılmış? CSS stilleri nelerdir? Meta etiketleri nelerdir? Vb.

Bir sitenin sayfa kodu hakkında bilgi almak için kullanılabilecek birçok araç vardır. Ama elimizde her zaman sağ fare düğmesi var. Sitemin örneğini kullanarak kullanacağız.

Sayfa kodu nasıl görüntülenir?

Bir web sitesi sayfasının kaynak kodunu görüntülemek için, fare imlecini web sayfasının herhangi bir alanı üzerinde hareket ettirmeniz gerekir (resimler ve bağlantılar hariç). Bundan sonra, sağ fare düğmesine tıklayın. Önümüzde birkaç seçenek içeren bir pencere açılacaktır (farklı tarayıcılarda biraz farklı olabilir). Örneğin, Google Chrome tarayıcısında komutlar şunlardır:

• geri;
• ileri;
• Tekrar yükle;
• farklı kaydet;
• mühürlemek;
• Rusçaya çevir;
• sayfa kodu görünümü;
• kodu görüntüle.

üzerine tıklamamız gerekiyor sayfa kodu görünümü, ve site sayfasının html kodu önümüzde açılacaktır.

Sayfa kodunu görüntüleme: ne aranmalı?

Bu nedenle, Html sayfa kodu, her biri bu sitenin nasıl yapıldığı hakkında bilgi taşıyan numaralı bir satır listesidir. Bu çok sayıda işareti ve özel karakteri anlamayı hızlı bir şekilde öğrenmek için kodun farklı bölümlerini ayırt etmeniz gerekir.

Örneğin, head etiketinin içinde bulunan kod satırları, arama motorları ve web yöneticileri için bilgiler içerir. Sitede görüntülenmiyorlar. Burada, bu sayfanın hangi anahtar kelimeler için tanıtıldığını, başlığının ve açıklamasının nasıl yazıldığını görebilirsiniz. Sitede kullanılan google font ailesi hakkında bilgi aldığımız linke de buradan tıklayarak ulaşabilirsiniz.

Site CMS WordPress veya Joomla'da yapılmışsa, bu burada da görünür olacaktır. Örneğin, bu alan bir WordPress teması veya bir Joomla site şablonu hakkında bilgi görüntüler. Mavi ile vurgulanan bağlantıların içeriğini okuyarak görebilirsiniz. Bir bağlantı, web sitesi şablonunu gösterir.

Örneğin:

//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3

Sayfanın CSS yazı tipi stillerini göreceğiz. Bu durumda, yazı tipi kullanılır. Bu burada görülebilir - yazı tipi ailesi: 'Source Sans Pro'.

Bu site Yoast SEO eklentisi kullanılarak optimize edilmiştir. Bu, yorum yapılan bu kod bölümünden görülebilir:

Bu site Yoast SEO eklentisi v3.4.2 ile optimize edilmiştir — https://yoast.com/wordpress/plugins/seo/

Gövde etiketi içindeki tüm bilgiler tarayıcı tarafından monitör ekranında görüntülenir. Burada sayfanın html kodunu görüyoruz ve en altta Yandex Metrics komut dosyası kodu var. Şu metinle birlikte yorumlanmış bir etikete sarılır:

/Yandex.Metrika sayacı

Özetliyor

Sitenin ana sayfasının kodunun oldukça yüzeysel bir analizini yaptıktan sonra, bu sayfanın hangi araçların yardımıyla yapıldığı sonucuna varabiliriz. Üzerinde gördük:

• CMS WordPress'i;
• Google yazı tipi Kaynak Sans Pro;
• WordPress teması - Sidney;
• Yoast eklentileri
• karşı Yandex metrikleri.

Artık bir site sayfasının html kodunu analiz etme ilkesi oldukça açıktır. İncelenen sayfayı tarayıcıda açık tutmak gerekli değildir. Sayfa kodunu ctrl + a, ctrl + c, ctrl + v tuş kombinasyonlarını kullanarak bilgisayarınıza kaydedebilirsiniz. Herhangi bir metin düzenleyiciye (tercihen Notepad++) yapıştırın ve html uzantısıyla kaydedin. Böylece, istediğiniz zaman daha derine inebilir ve kendiniz için daha faydalı bilgiler bulabilirsiniz.

Yeni bir kitap yayınladık, "Sosyal Medya İçerik Pazarlaması: Abonelerin kafasına nasıl girilir ve markanıza nasıl aşık olunur."

Bir sitenin kaynak kodu, tarayıcının web sunucusundan aldığı bir HTML işaretlemesi, CSS stilleri ve JavaScript komut dosyaları koleksiyonudur.

Kanalımızda daha fazla video - SEMANTICA ile internet pazarlamasını öğrenin

Komutan tarafından askerlere verilen bir dizi komuta benzetilebilir. Seyircinin patronu görmediğini veya duymadığını hayal edin. Onların bakış açısından, ordu bağımsız olarak eylemler gerçekleştirir. Bizim durumumuzda komutan tarayıcıdır, komutlar kaynak kodudur ve yürüyen askerler nihai sonuçtur.

Site, kullanıcının isteği üzerine sayfayı gönderen bir web sunucusunda saklanır. İstek, adres çubuğuna bir URL yazmak, bir bağlantıya tıklamak veya bir formdaki bir gönder düğmesini tıklamaktır. Web sayfalarının hangi dilde yazıldığı, bir yazılım bölümü içerip içermediği önemli değildir. Herhangi bir sunucu tarafı algoritmasının sonucu, bir dizi html etiketi ve metnidir.
Sayfa kaynak kodu, aşağıdakileri içeren bir veri kümesidir:

• html işaretlemesi;
• stil sayfası veya dosya bağlantısı ;
• JavaScript ile yazılmış programlar veya kodlu dosyalara bağlantılar.

Bu üç bölüm tarayıcı tarafından işlenir. Sunucu için bu, isteğe yanıt olarak gönderilmesi gereken metindir.

Kaynak kodunu neden incelememiz gerekebilir?

Gördüğümüz her şeyi, özellikle optimize ederken, siteyle çalışırken ortaya çıkan belirli sorunları çözmek için analiz edebilir ve uygulayabiliriz. Kaynak koduna bakarak şunları yapabiliriz:

• Analizleri için kendi sitenizin veya başka birinin sitesinin meta etiketlerine bakın.
• Sitede belirli öğelerin olup olmadığını görün: sayaçlar, çeşitli sistemlerdeki tanımlama kodları, belirli komut dosyaları ve daha fazlası.
• Öğelerin parametrelerini öğrenin: boyutlar, renkler, yazı tipleri.
• Sayfadaki fotoğraflara ve diğer öğelere giden yolu bulun.
• Sayfadaki bağlantıları inceleyin.
• Site optimizasyon sürecine müdahale eden kodla ilgili sorunları bulun: ayrı dosyalara taşınmamış stiller, komut dosyaları, geçersiz kod.

Bunlar ana özelliklerdir, ancak aslında kodu okuyabilerek sayfa hakkında çok daha fazla şey öğrenebilirsiniz.

Bir sitenin kaynak kodu nasıl görüntülenir?

Tamamen sunucuda düzenlendiği biçimde, bu tarayıcıdan yapılamaz. Ancak sağ fare tuşu ile sayfaya tıklayarak işaretlemenin tamamını görebilirsiniz. Google Chrome örneğinde burada ve aşağıda.

"Sayfa kodunu görüntüle" seçeneğini seçin ve tam listeyi ayrı bir sekmede alın.

Bu sadece anlamak için ayrıştırmanız gereken metindir. Ancak geliştirici araçlarını kullanarak etkileşimli kod alabilirsiniz.

Bir web sitesi sayfasının kaynak kodu nasıl bulunur?

Tarayıcıdaki menü simgesine tıklayın. Çoğu zaman sağdadır ve üç nokta veya şerit gibi görünür.

Ek araçlar bölümünde "Geliştirici Araçları"nı seçin.

Kodun aktif durumunu gösteren bir pencere açılacaktır. Bu, yanındaki işaretlemeye tıkladığınızda öğenin stilinin görüntüleneceği ve seçilen blokların sayfada vurgulanacağı anlamına gelir.

"Kaynak" sekmesinde bazı dosyaların içeriğini görüntüleyebilirsiniz: komut dosyaları, yazı tipleri, resimler.

"Güvenlik" sekmesinde site sertifikasının doğrulanması mevcuttur.

"Denetimler" sekmesi, barındırmada yayınlanan kaynağı kontrol etmenize yardımcı olacaktır.

Sağdaki panelin konumu uygun değilse, üç noktayı tıklayıp istediğiniz öğeyi seçerek değiştirebilirsiniz.

Meta etiketler nasıl görüntülenir?

Her html belgesi, yapı etiketleri içerir. Bunlardan bazıları:

1. html belgenin tamamıdır.
2. Head - servis başlıklarının bölümü.
3. Başlık – sayfanın başlığı (sekmede görüntülenir).
4. Gövde - belgenin gövdesi.
5. H1-H6 - sayfa metninin başlıkları.
6. Makale - makale.
7. Bölüm - bölüm.
8. Menü - menü.
9. Div - blok.
10. Span bir dizedir.
11. P - paragraf.
12. Tablo - masa.

Öğeler, bir sayfanın bölümlerini mantıksal olarak sınırlandırmak için tasarlanmıştır ve gerektiği gibi biçimlendirilir. Sayfada bir şekilde görünen metinler içerirler. Ancak Head etiketi hizmet bilgilerini içerir. Bunu belirtmek için meta etiketleri kullanılır. İçlerinde yazılan her şey sunucu ve arama motorlarına yöneliktir.

İçeriği başka türlü bilinemez.

Link etiketine dikkat edelim. Harici içerme dosyalarına bağlantılar belirtmek için kullanılır. İstenirse içeriği görebilir ve diske kaydedebilirsiniz. Bunu yapmak için adresin üzerine gelin ve sağ tıklayın. "Yeni Sekmede Aç"ı seçin.

Belirtilen dosya, görüntüleyebileceğiniz veya kaydedebileceğiniz yeni bir sekmede açılacaktır.

Bir komut dosyasında hata ayıklamak için bir sayfanın kaynak kodu nasıl görüntülenir?

Bu durumda, sayfayı yerel makinede açmak en uygunudur. Yalnızca işaretlemeyi, stilleri ve komut dosyalarını düzeltmeniz gerekiyorsa, bu doğrudan klasörden yapılabilir. Html kodu aynı şekilde görüntülenir. Ancak JavaScript kod hataları "Konsol" sekmesinde görülebilir. Hatanın açıklamasını ve oluştuğu satır numarasını gösterir.

Sözdizimi doğrudan kodda görülebilir. Bu, Kaynak sekmesidir.

Belirli bir öğenin kodu nasıl görüntülenir?

Birçok öğeye sahip büyük sayfalar için, tüm işaretlemelerde doğru kodu bulmak zordur. Bu durumda, içerik menüsünden özel bir komut kullanmalısınız. Fareyi parçanın üzerine getirin ve RMB'ye basın. Kodu Görüntüle komutunu seçin.

Aynı pencere açılır, ancak odak seçili nesne üzerindedir.

Özet

Bir sayfanın kaynak kodunun ne olduğunu anlattık. Temel HTML ve CSS bilgisine hakim olmak yeterlidir ve uygun geliştirici araçlarını kullanarak kendi html belgelerinizde hata ayıklayabilirsiniz.

Web'deki kaynak kodlarına göz atmak, yalnızca kendi deneyiminizden öğrenmenize değil, aynı zamanda gerçek çalışma örneklerini kullanmanıza da olanak tanır. Ve seo uzmanları için, site hakkında çok şey söyleyebilecek bilgiler olan meta etiketler faydalı olacaktır.

". Aynı öğe, metni sağ tıklarsanız bağlam menüsünde de bulunur. sayfalar. Ayrıca CTRL + U klavye kısayolunu da kullanabilirsiniz. Mozilla FireFox harici programlar kullanmaz - orijinal kod sayfalar sözdizimi ile vurgulama ayrı bir tarayıcı penceresinde açılır.

Internet Explorer'da Dosya menüsüne tıklayın ve Not Defteri'nde Düzenle'yi seçin. Notepad ismi yerine başka bir isim yazılabilir, orjinalini görmek için tarayıcı ayarlarında atamışsınız. kod fakat. Tıklamada sayfalar Sağ tıklama, kaynağı açmanıza izin veren bir öğeye de sahip olan bir bağlam menüsü açılır. kod sayfalar harici bir programda - "HTML'yi görüntüle- kod fakat".

Opera tarayıcısında menüyü açın, "Sayfa" bölümüne gidin ve "Geliştirme Araçları" alt bölümünde "Kaynak" öğesini seçme şansına sahip olacaksınız. kod” veya “Başlangıç kodçerçeve". Bu seçime sırasıyla CTRL+U ve CTRL+SHIFT+U kısayol tuşları atanır. Tıklamaya ekli bağlam menüsünde sayfalar sağ tıklayın, ayrıca "Kaynak kod". Opera kaynağı sayfalar HTML dosyalarını düzenlemek için işletim sisteminde veya tarayıcı ayarlarında atanan harici bir programda.

Google Chrome tarayıcısı, şüphesiz kaynak tarayıcının en iyi organizasyonuna sahiptir. kod fakat. Fareye sağ tıklayarak Görünüm'ü seçebilirsiniz. kod fakat sayfalar” ve ardından sözdizimi vurgulamalı kaynak kodu ayrı bir sekmede açılacaktır. Veya aynı menüde "Görünüm" satırını seçebilirsiniz. kod bir öğe" ve aynı sekmede HTML ve CSS'yi inceleyebileceğiniz iki ek çerçeve açacaktır - kod eleman sayfalar. Tarayıcı, imleci satırlar arasında hareket ettirmeye yanıt verecektir. kod ve sayfadaki HTML'nin bu bölümüne karşılık gelen öğeleri vurgulayarak kod fakat.

Başlangıca bakma olasılığı kod ağ sayfalar tarayıcı tarafından sunucuya yapılan bir istek sonucunda alınan , aslında her internet tarayıcısında bulunur. Karşılık gelen komuta erişim yaklaşık olarak aynı şekilde düzenlenmiştir, ancak ilk komutla hangi yöntemle ve hangi biçimde sunulacağı konusunda önemli farklılıklar vardır. kod .

Talimat

1. Mozilla FireFox tarayıcısında, menüden "Görünüm" bölümünü genişletin ve "İlk kod sayfalar". Aynı öğe, metne sağ tıkladığınızda görünen bağlam menüsünde de bulunur. sayfalar. CTRL + U klavye kısayoluna da izin verilir.Mozilla FireFox harici programlar kullanmaz - ilk kod sayfalar sözdizimi ile vurgulama ayrı bir tarayıcı penceresinde açılır.

2. Internet Explorer'da Dosya menüsüne tıklayın ve Not Defteri'nde Düzenle'yi seçin. Not Defteri adı yerine tarayıcı ayarlarınızda atadığınız ilk dosyayı görüntülemek için başka bir program yazılabilir. kod fakat. Tıklamada sayfalar farenin sağ tuşuyla, ilk menüyü açmanıza izin veren bir öğeye de sahip olan bir bağlam menüsü açılır. kod sayfalar harici bir programda - "HTML'yi görüntüle- kod fakat".

3. Opera tarayıcısında menüyü açın, “Sayfa” bölümüne gidin ve muhtemelen “Geliştirme Araçları” alt bölümündeki “İlk” öğesini tercih edeceksiniz. kod” veya “İlk kodçerçeve". Bu seçime sırasıyla CTRL+U ve CTRL+SHIFT+U kısayol tuşları atanır. Tıklamaya ekli bağlam menüsünde sayfalar sağ tıklayın, ayrıca "İlk kod". Opera açık kaynak sayfalar HTML dosyalarını düzenlemek için işletim sisteminde veya tarayıcı ayarlarında atanan harici bir programda.

4. Google Chrome tarayıcısı, hiç şüphesiz, ilk sayfaya göz atmak için en iyi organizasyona sahiptir. kod fakat. Bir sayfaya sağ tıklayarak Görünümü tercih edebilirsiniz. kod fakat sayfalar” ve ardından sözdizimi vurgulamalı kaynak kodu ayrı bir sekmede açılacaktır. Veya aynı menüde "Görünüm" satırını tercih edebilirsiniz. kod bir öğe" ve aynı sekmedeki tarayıcı, HTML ve CSS'yi inceleyebileceğiniz iki ek çerçeve açacaktır - kod herhangi bir eleman sayfalar. Tarayıcı, imleci satırlar arasında hareket ettirmeye yanıt verecektir. kod ve sayfadaki HTML'nin bu bölümüne karşılık gelen öğeleri vurgulayarak kod fakat.

5. Apple Safari tarayıcısında "Görünüm" bölümünü genişletin ve "HTML'yi Görüntüle" satırını seçin. kod fakat". Aç'a sağ tıkladığınızda çıkan menüde sayfalar, ilgili öğenin adı "Kaynağı Görüntüle"dir. Bu eyleme CTRL + ALT + U kısayol tuşları atanmıştır. kod ayrı bir tarayıcı penceresinde açılır.