Yandex tarayıcısında sayfa kodu nasıl düzenlenir. Bu özelliği Google Chrome tarayıcısında kullanmanın diğer yolları. Bir öğenin kaynak kodu nasıl görüntülenir?

Ctrl+U

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

İlgilenilen sayfa öğesinde farenin sağ tuşuna tıklayın.

Google Chrome : "Öğe kodunu görüntüle"

Opera: "Öğeyi inceleyin"

Firefox: "Öğeyi analiz et"

Diğer tarayıcılarda benzer bir menü öğesi arayın.

Herkese selam!

Özellikle makalenin başında, hızlı bir cevap arayanlar için tüm noktayı ortaya koydum.

Bilgi birçok kişi tarafından biliniyor olabilir, ancak acemi blogcular, web programcıları ve diğer araştırmacılar için yazdığım için bu yardım makalesi mevcut olmalıdır.

Gelecekte, sayfaların ve bireysel öğelerin kaynak kodunu kesinlikle inceleyeceksiniz.

Sayfa kaynak görünümünü nasıl kullanabileceğinize dair belirli bir örneğe bakalım.

Örneğin, belirli bir sayfa için hangi anahtar kelimelerin kullanıldığını görmek istiyoruz. İlgilendiğimiz web sayfasına gidiyoruz ve Ctrl + U tuşlarına basıyoruz. Bu sayfanın kaynak kodu ayrı bir pencerede veya ayrı bir sekmede açılacaktır. Ctrl+F'ye basın bir kod parçası aramak için. Bu durumda, arama kutusuna “ kelimesini yazıyoruz. anahtar kelimeler". Bu meta etiketle otomatik olarak bir kod parçacığına yönlendirileceksiniz ve arama kelimesi vurgulanacaktır.

Benzer şekilde, diğer kod parçacıklarını arayabilir ve inceleyebilirsiniz.

Bir sayfanın kaynak kodunun tamamını görüntülemek çoğu durumda çok uygun değildir, bu nedenle tüm tarayıcılarda tek bir öğenin veya parçanın kodunu görüntülemek mümkündür.

Öğenin kodunu görüntülemek için somut bir örnek kullanalım. Örneğin, bağlantının nofollow özelliği olup olmadığını görelim. İlgilendiğimiz bağlantıya sağ tıklıyoruz ve açılır içerik menüsünde öğeye sol tıklıyoruz "Öğe kodunu görüntüle" veya benzeri (tarayıcınıza bağlı olarak). Aşağıda, kod analizi için özel bir pencerede benzer bir şey elde ediyoruz.

Bağlantı kodunda rel=”nofollow” ifadesinin bulunduğunu görüyoruz. Bu, bu bağlantının “sızdırmayacağı” ve PR anlamına gelir. Bundan sonraki yazılarımızda daha detaylı bahsedeceğiz. Şimdilik önemli olan, artık sayfanın kaynak kodunu ve tek bir öğenin kaynak kodunu nasıl görüntüleyeceğinizi bilmenizdir.

Her İnternet kullanıcısının uzun zaman geçirdiği favori siteleri vardır. Ve sadece tembel, nasıl yaratıldığını ve neyden oluştuğunu görmeyi düşünmedi. Bir site oluşturmanın birçok yolu olduğu için tüm bu soruları cevaplamak mümkün olmayacak, ancak içerdiği komutlara ve kodlara bakmak mümkün ve herkese açık.

Diğer bir soru ise, programlama ile uğraşmayan bir kişinin kodu oluşturan bazı sembolleri anlayıp anlayamayacağıdır. Ancak aşağıda gösterilecek örneklerden herhangi bir Google Chrome kullanıcısı sitelerin öğelerini tek tek görüntüleyebilir.

Bir Google tarayıcısında bir html sayfasının kaynak kodu nasıl görüntülenir?

Sayfa kodunu Chrome'da görüntüleyebilmeniz için ilgilendiğiniz siteye gitmeniz ve şu adımları izlemeniz gerekir:

Bu iki nokta, işlevsellikleri ve kullanıcı, programcı veya bilgisayar korsanı için bilgi içeriği bakımından farklılık gösterir.

Sayfa kodu ile sadece "Kodu Görüntüle" komutu arasındaki fark nedir?

Bu işlevlerin her birini analiz ederek ayrı bir makale yazabilirsiniz. Programcılar için bu fark önemlidir ve Google Chrome tarayıcısında hangi durumlarda “Kod Görüntüle” ve hangi “Sayfa Kodunu Görüntüle” kullanılması gerektiğini anlarlar.

Ancak ortalama bir kullanıcı için bu işlevler aşağıdaki amaçlara ayrılabilir:

1. "Sayfa kodu görünümü" yalnızca sayfanın ana kombinasyonunu görmek için gereklidir. Temel olarak, bu sitenin yapısıdır (CSS dosyaları şeklinde ek modeller ve site oluşturucunun klasöründe kalan diğer eklemeler olmadan). Bu yapı kopyala-yapıştır ile kendi sayfanızı oluşturmaya uygun değildir ancak programcının tam olarak ne yaptığını ve hangi sırayla yaptığını görmenizi sağlayacak ve böylece Google Chrome tarayıcısındaki site böyle bir dış tasarıma sahip olacaktır.
2. "Kodu Görüntüle", sayfada etkilenen tüm alanları vurgulayan ayrıntılı bir yapı görüntüler. Fareyle belirli bir liste kodunun üzerine gelirseniz, ait olduğu sitedeki öğeyi vurgulayacaktır.
3. Sayfa kodunun görüntülenmesi, düzenleme olanağı olmadan ayrı bir tarayıcıda açılır. Yani sadece site kodunu kopyalamak ve okumak için uygundur. Ama aynı derecede kullanışlı bir özellik.
4. “Kodu Görüntüle” değiştirilebilir ve herhangi bir öğeyi size uygun şekilde düzenleyebilirsiniz. Tabii ki, tüm bu değişiklikler sayfa yenilenene kadar "canlı" olacak, ancak bazen bu ayarlara tırmanmak ve sadece şu veya bu değerin ne için olduğunu ve değiştirirseniz ne olacağını anlamak eğlencelidir. Bu tür eylemlerle kendinize veya siteye zarar vereceğinizi varsaymamalısınız - bu değişiklikler yalnızca Google Chrome'unuzun kodunu etkiler ve çevrimiçi olmaz.

Eleman kodunun nasıl görüntüleneceği sorusu düşünüldüğünde

Böyle bir soruya cevap vereceksek, o zaman sadece örnekli bir varyant kendini gösterir. Çünkü bu konuyu anlayan bir kişi (web geliştirici) olmak tek bir yazıda çok zor, ama bir örnekle göstermek çok daha kolay ki soru çözülmüş olsun.

Öğe kodunun işlevselliği çok geniştir, bu nedenle Google Chrome tarayıcı web sitesindeki kelimelerden birini alıyoruz. Sitemiz için hangi anahtar kelimelerin (kodda "anahtar kelimeler" olarak yazılacağı) kullanıldığını düşünmek istedik. Bunu yapmak için aşağıdaki algoritmayı gerçekleştiriyoruz:

Bu özelliği Google Chrome tarayıcısında kullanmanın diğer yolları

Genel olarak, elemanın koduna nasıl bakılacağı ve neden gerekli olduğu sorusuna cevap vermeye devam ederek, işlevlerini listelemek gerekir. Yani, Google Chrome tarayıcısında herhangi bir sitenin bir öğesinin kodunu görüntüleme yeteneği sayesinde şunları yapabiliriz:

• Head ("site başlığı") ile başlayan ve end (herhangi bir programın son komutu) ile biten site yapısına bakın;
• Sitenin tüm işlevlerini görüntüleyin, yani: diğer sitelere bağlantılar, harici sitelerden ek modüller ve çeşitli bilgileri toplamak için yerleşik sayaçların varlığı;
• Siteden kopyalamanın yasak olup olmadığını öğrenin;
• Kod, sitenin diğer sayfalarına verilen tüm bağlantıları, bunların tasarımlarını ve üzerlerine tıkladıktan sonraki eylemleri kaydeder.

Bu kapsamlı bir liste olmaktan uzaktır. Ancak, özel bilgi olmadan bir Google Chrome sayfasının kodunu “okumanın” neredeyse imkansız olduğu ve alınan verilere sıradan bir kullanıcı tarafından pratik olarak ihtiyaç duyulmadığı unutulmamalıdır.

"Öğe kodunu görüntüle" öğesi çalışmıyor

Hemen her sitenin eleman kodlarına açık erişime sahip olacağı söylenmelidir. Yani en popüler ve pahalı siteler bile kodlarını görüntülemeye açık olacak. Bu nedenle, Google Chrome tarayıcısındaki öğe etkin değilse veya bir hata veriyorsa, aşağıdaki olası nedenleri vardır:

• Kullanıcı profili bozuk;
• Bilgisayarda kötü amaçlı yazılımın varlığı;
• Performansı artırmak için belirli bir uzantıyla engelleme (bu bile olabilir).

Bozuk bir kullanıcı profilini düzeltme

Yeni bir profil oluşturmak için eskisini bilgisayarınızdan kaldırmanız gerekir. Bunu yapmak için aşağıdakileri yapın:

1. Google Chrome'u kapatın ve yerleşik Windows Gezgini tarayıcısını başlatın.
2. Adres çubuğuna şu komutu girin: %LOCALAPPDATA%\Google\Chrome\User Data\.
3. Dizin açıldığında, “Varsayılan” klasörünü arayın ve aşağıdakileri almak için adına “Yedekleme” ekleyin: “Varsayılan Yedekleme”.
4. Şimdi, Chrome tarayıcısının yeni bir açılışından sonra yeni bir profil oluşturulacak.

Kötü amaçlı yazılımı veya kalıntılarını kaldırma

Yeni profil bize sayfa elemanı koduna erişim hakkı vermediyse ve hala hatayı görüyorsak aşağıdakileri yapmalıyız:

1. Windows Komut İstemi'ni (Çalıştır) açın ve içine "cmd" yazın.
2. Satıra şu komutu girin: RD /S /Q "%WinDir%\System32\GroupPolicyUsers".
3. Eylemi onayladıktan sonra şunu sürüyoruz: RD / S / Q "% WinDir% \ System32 \ GroupPolicy".
4. Şimdi "gpupdate /force" (tırnak işaretleri olmadan).

Her şey doğru yapıldıysa, bilgisayarı yeniden başlattıktan sonra Google Chrome, öğelerin kodunu açacak ve tarayıcı normal şekilde çalışacaktır.

Blog veya gönderi başlığı, daha fazla etiketi ve benzeri gibi bazı önemli blog öğelerinin boyutu, rengi. Makalenin daha sonra yazıldığı test alanını deneyerek gerekli kodu manuel olarak aradım.

Ve son zamanlarda bağlantıların rengini değiştirmek aldı. Bu konuyla ilgili bir sürü literatür taraması yaptıktan sonra basit bir şey fark ettim: herkes kendi şablonlarından örnekler veriyor, ancak hepimizin şablonları farklı ve örnekteki kodun en azından biraz benzer olması iyi: sızlanma değil, bu yüzden Yine de yuvarlayarak bulacağım - dürtme yöntemini kullanarak.

Numara, bağlantı koduyla birlikte geçmedi. Hepsi tamamen farklı yolları işaret etti. Basit ve hassas bir alet olup olmadığını merak ettim. Herhangi bir sitede doğru html kodu nasıl bulunur. Birçok blogcu, deneyimli bile olsa, şablonu biraz değiştirmeyi zor buluyor. Endişelenecek bir şey yok çünkü herkesin bir site oluşturmak için kendi ilgi alanları ve hedefleri var.

Şablonda küçük değişiklikler yapmak istiyorsanız, herhangi bir başlığı, makale ve başlıkların başlığını, yazı tipi ve bağlantıların rengini ve boyutunu değiştirmek, Bu makalede tartışılan basit bir ilkeyi öğrenmek genellikle yeterlidir. Ancak, daha derin bir html ve css çalışmasını veya bir uzmanın yardımını gerektiren karmaşık durumlar da vardır.

Bir gün bir arkadaşım şablonundaki başlıklar panelinin rengini nerede değiştireceğimi bulmamı istedi. Bir test alt etki alanına bir tema yüklendi. Bu öğenin ayarları style.css'de değil, başka bir dosyada saklandı, bu yüzden bir kişi onu bulamadı.

Sitenin html ve css kodu nasıl bulunur ve değiştirilir

Uzun yazılardan hoşlanmıyorsanız bu yazı tam size göre. makalenin sonunda Notepad ++ kullanarak sitenin html kodunu nasıl görebileceğinizi ve yazı tipi renginin nasıl değiştirileceğine ilişkin bir örnek kullanarak herhangi bir şablonun tasarımında nasıl değişiklik yapabileceğinizi gösteren bir video eğitimi. Videoda blogla uğraşmanın başka incelikleri de var. Ve metne daha yakın ve daha anlaşılır olanlar için, konunun ekran görüntüleri ile ayrıntılı bir analizi aşağıdadır.
httpv://youtu.be/uIlVvwCt2ho

Terimler ve kavramlar

Yazının başlığını koymak daha doğru olur" css kodu nasıl bulunur“, ancak “yanlış” isimde durmaya karar verdim, çünkü temelde bu sorunun cevabı html'de aranıyor. CSS ve HTML, aynı sistemin iki parçası olmalarına rağmen çok farklı şeylerdir. İnternette birçok teknik makale var, burada şunu anlamamız yeterli olacaktır:

• HTML- sitenin yapısından sorumlu (neden sonra, hangi sırayla, vb.). Bu, sitenin üzerine inşa edildiği temeldir. Bir evle karşılaştırırsak, bu onun düzeni, odaların düzenidir.
• css- tasarımdan sorumlu (hangi yazı tipi, boyut, renk vb.). Bu, evin genel tarzı ve bireysel odalarının tarzıdır: duvar kağıdı ne olacak, lambalar, perdeler, mobilyalar. Bu nedenle, öngören belge, css kodları"stil sayfası" olarak adlandırılan

Ve örneğin, site başlığının rengini, metinlerdeki yazı tipi boyutunu veya kenar çubuğundaki başlıkların rengini nasıl değiştireceğinizi merak ettiyseniz, tüm bunları CSS stil sayfasında aramanız gerekir. Kodda kendiniz değişiklik yapmak için bir başlangıç ​​için anlamaya değer tek şey budur.

Karmaşıkları basite dönüştürmeyi severim. Uzun zaman önce, ilk arabama sahip olduğum zamanı hatırlıyorum, çok eskiydi, kablolar çürümüştü, sigortalar sık ​​sık yanmıştı ve her seferinde yedekte servis istasyonuna çekmiştim. Görünüşe göre bağımsız bir değiştirmenin bir kuruşa mal olmasına rağmen, ne kadar paranın atıldığını hayal edin.

Bir keresinde ustanın tam olarak ne yaptığına baktım. Sigortanın nasıl çalıştığını hala bilmiyorum. Ama nerede değiştireceğimi biliyorum). Motoru kendim tamir etmem ve sigortayı değiştirmek zor değil. Web sitelerinde de durum aynı.

Bir programcı olmak istemiyorsanız, programlamayı derinlemesine anlamanıza gerek yoktur. Neyin amaçlandığını, nerede aranacağını ve nasıl değiştirileceğini açıkça anlamak yeterlidir. Kendiniz yapabileceklerinizi değiştirmek ve diğer her şeyi uzmanlara bırakmak daha iyidir. Hakkında makalenin bu konuyla ilgili yararlı bir bağlantısı var.

Her konuda uzman olmak zorunda mısınız?

Seo bloglarında, genellikle yeni başlayan birinin html'yi derinlemesine anlaması veya daha da iyisi, her şeyin benzersiz olması için siteleri kendi başlarına nasıl yazacağını öğrenmesi gerekip gerekmediği konusunda tartışmalar vardır. ve burada biri daha yakın. Biraz daha ilgileniyorum, bu yüzden şimdi ayrıca Vladimir ile çalışıyorum. Bu yılın Kasım ayında Vladimir kendi blogunu açtı. Blogu en basit, ücretsiz şablonda yapıldı, kendisi için sadece biraz değiştirdi.

10 günlük varlığın ardından blog, günde yaklaşık 1,5 bin kişi trafiği olan tüm Runet siteleri sıralamasında 104. sırada yer aldı. 10 gün için. Anlaşma nedir? Vladimir, html konusunda bilgilidir, kendisi için benzersiz bir şablon sipariş edebilir ve satın alabilir. İşte bunu anlamalısın sır kalıplarda değil, bilginin kullanışlılığındadır.

Html kodu nerede saklanıyor?

Ara verdiğimiz için özür dilerim, hadi kodlarımıza geri dönelim). Diyelim ki blog başlığının yazı tipi rengini değiştirmek istiyorsunuz. Test sitemin örneğini ele alacağız.

1. Siteyi Google Chrome tarayıcısında açma (Henüz kullanmadıysanız kurun - web siteleriyle çalışmak için iyi bir şekilde keskinleştirilmiştir, birçok yerleşik araca sahiptir).
2. Fare imlecini değiştirmek istediğiniz öğenin üzerine getirin . Bu durumda, blogun başlığı. “Sağ” fare ile üzerine tıklıyoruz ve çıkan pencerede ELEMENT KODUNU GÖRÜNTÜLE seçeneğini seçiyoruz.

ÖNEMLİ: SAYFA KODUNU GÖRMEK ile karıştırmayın! Şimdi tüm sayfaya ihtiyacımız yok, sadece ayrı bir öğeye ihtiyacımız var.

Üzerine tıklıyoruz - tarayıcının altında bir kod görüntüleme penceresi belirir:

Değiştirmekte olduğumuz kod satırı kırmızı ile vurgulanmıştır.

Ancak mavi ile vurgulanan alan aradığımız şeyi içeriyor. Yazı tiplerinden, renkten, boyuttan, vurgulamadan ve daha fazlasından sorumlu olan tam (yaklaşık değil) kod satırını burada bulabilirsiniz. Bu şekilde, herhangi bir şablonun herhangi bir öğesinin HERHANGİ bir kodunu bulabilirsiniz.

Mavi ile vurgulanan blokta istenen satırı buluyoruz. Sağ tarafta bir kaydırıcı var, kaydırarak istediğiniz satırı bulabilirsiniz.

Neyin arandığı genel prensip:

Yazı tipi adı - FONT AİLESİ satırında

Yazı tipi boyutu - FONT SIZE satırında

Yazı tipi rengi - RENK satırında

İşte herhangi bir öğenin adını, boyutunu ve yazı tipi rengini değiştiren üç ana satır. Sağda, stil css satırı, belgedeki satırın konumunu verir. Başka bir öğeyi değiştirmeniz gerekiyorsa (örneğin, menü çubuğunun rengini veya bağlantıların rengini değiştirebileceğiniz satırın nerede olduğunu bulmanız gerekir), her şey aynı şekilde yapılır. .

DİKKAT:

Kopyalayacağımız satır şekilde kırmızı ile vurgulanmıştır,

stil sayfasında daha sonra bulmak için.

4. Satırı kopyalayın. Bu örnekte site adının rengini değiştirmek istediğimiz için ikinci resimde vurgulanan satırı kırmızı bir dikdörtgenle kopyalıyorum. Şablonumda site adının rengini değiştirmekten sorumludur:

#header h1 a, #header h1 a:ziyaret edilen (

"Stil sayfası (style.css)" dosyasında istenen satırı buluyoruz. Bu zaten yöneticide yapılır. Güven ve tam bir anlayış sağlanana kadar, hariç tutmak için tüm deneyleri bir test alt etki alanında gerçekleştirmenizi rica ediyorum.

Öyleyse yönetici paneline gidin: KONSOL - GÖRÜNÜM - EDİTÖR. Sağ kenar çubuğunda STYLE TABLE (STYLE.CSS) dosyasını buluyoruz, açın.

Şimdi CTRL + F tuşlarıyla arama çubuğunu açıyoruz: üst pencerede boş bir satır penceresi görünecektir. 4. adımda kopyaladığınız satırı yapıştırın.

Ve bu çizginin stil sayfasında nasıl vurgulandığını göreceksiniz (şekilde - turuncu renkte):

Öğede bir değişiklik yapıyoruz. Bizim durumumuzda yazı tipi rengini değiştiriyoruz, bu nedenle COLOR satırında başka bir değeri değiştiriyoruz - istediğimiz renk. Örnekte renk siyahtır, anlamı şudur:

Herhangi bir web renk paleti hizmetinde bir renk seçebilirsiniz: "Web Renk Paleti" arama motoruna yazın ve istediğinizi seçin. Bir renk seçiyoruz, dijital değerini kopyalıyoruz ve eskisiyle dikkatlice değiştiriyoruz. ardından DOSYA GÜNCELLE'yi tıklayın ve ne olduğunu görün.

Değişiklikler görüntülenmezse, son bir saat içinde sayfaya tekrar gidin - bu sefer her şey görüntülenmelidir.

Bu uzun bir süre açıklanmıştır, ancak pratikte her şey hızlı bir şekilde yapılır, özellikle ilk beceri ortaya çıktığında.

Daha ayrıntılı olarak, belirli öğelerin nasıl değiştirileceği:

Bugünlük bu kadar, artık size kodlarla işkence etmeyeceğim. Umarım şimdi kendiniz html kodunun herhangi bir öğesini veya daha doğrusu css kodunu kolayca bulabilir ve değiştirebilirsiniz - evet, uzmanlar basitleştirdiğim için beni affedecektir. Ve anlamadıysanız, yine de sayfayı ziyaret edin. Saçma sapan şeylerle zaman kaybetmeyin.

Artem Abramovich'in herhangi bir temada / şablonda herhangi bir kelimeyi veya öğeyi, herhangi bir motor (wordpress, joomla, vb.) için nasıl arayacağınız ve bulacağınız ve ihtiyacınız olanla nasıl değiştireceğiniz hakkında bir video izlemenizi öneririm:

Beğendiyseniz lütfen paylaşın:

Ayrıca bilmek ilginizi çekebilir:

Beceri sayfa kaynak kodunu değiştir- ileri düzey bir İnternet kullanıcısı için faydalı bir beceri. HTML kod değiştirme yardımı ile açık olan web sayfasını istediğiniz gibi değiştirebilirsiniz. Bu yazıda anlatacağız sayfa kodu nasıl değiştirilir Google Chrome'da. Ancak, diğer tarayıcılarda her şey aynı şekilde yapılır, bu nedenle herhangi bir zorluk olmamalıdır.

Bir sayfanın HTML kodu nedir?

Tarayıcınızda açtığınız her sayfanın HTML biçimlendirme dilinde kendi kodu vardır. Bu kod etiketler ve metindir. Etiketler, tarayıcıya sitenin belirli bir bölümünü nasıl görüntüleyeceğini söyleyen bir tür etikettir. Metin, kullanıcının gördüğü sayfanın içeriğidir. Ayrıca, sayfa öğelerinin görünümünü ayarlayan CSS stilleri sayfaya bağlanabilir. İle site kaynak kodunu değiştir HTML ve CSS'yi tam olarak bilmenize gerek yok ve yakında kendiniz göreceksiniz.

Bir web sayfası neden değiştirilir?

Sitedeki verileri değiştirebilir, mesajın metnini değiştirebilir, sahte ekran görüntüsü alabilirsiniz. Lütfen tüm değişikliklerin yalnızca sizin tarafınızdan görülebileceğini ve sayfayı yeniden yüklediğinizde kaybolacağını unutmayın. Ayrıca değiştirilen veriler gerçek olmayacaktır. Örneğin, 10 dolarım yoksa ve onu 100 dolara değiştirirsem, daha fazla param olmayacak. Bu sadece sayfanın tarayıcı tarafından oluşturulmasıdır. Örnek:

Sonrasında:

Örneğin aynı siteyi alıp daha önceki “” yazısının duyurusunu değiştireceğim Google Chrome'da ana sayfayı açıyorum. Değiştirmek istediğim öğeye, örneğin duyuru başlığına sağ tıklıyorum ve “Kodu Görüntüle” seçeneğini seçiyorum.

Açılan pencerede Elements sekmesine gidin ve sayfanın HTML kodunu görün. İlgilendiğimiz metni bulmamız gerekiyor. (kırmızı ile vurgulanmıştır)

Şimdi eski metni silip yenisini gireceğim.

İşte bu, duyurunun adı değiştirildi. Şimdi duyurunun kendisini, etiketleri ve kategorisini değiştireceğim.

img etiketindeki src niteliğini değiştirerek başka bir resim ekleyebilirsiniz.

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

Abone olmak

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. İşte onlardan 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 değil, aynı zamanda gerçek çalışma örneklerinden yararlanmanıza da izin verecektir. Ve seo uzmanları için, site hakkında çok şey söyleyebilecek bilgiler olan meta etiketler faydalı olacaktır.