Bir sayfanın kaynak kodu, HTML biçimlendirmesi, CSS görünümleri ve JavaScript komut dosyalarından oluşan bir koleksiyondur. Öğretmenin öğrencilere verdiği görevlerle bir analoji çizebilirsiniz. Öğrenciler sonuca ulaşmak için bir dizi görevi (fonksiyonu) tamamlamalıdır. Bizim durumumuzda, öğretmen tarayıcıdır ve gerçekleştirilen görevler tartışılan koddur.
Bu yazıda, kısayol tuşlarını ve temel tarayıcı ayarlarını, geliştirici araçlarını veya banal bir sağ tıklamayı kullanarak sayfa kodunun nasıl açılacağına bakacağız.
Sayfa kodu nedir?
Sayfanın kaynak kodunun standart bileşenleri:
- HTML satırı;
- Stil kombinasyonu veya CSS bağlantısı;
- JavaSkript ile oluşturulan dosyalar/bağlantılar/programlar.
Her biri gerekli verileri elde etmek için tarayıcı tarafından "incelenir". Bilgi seti sayesinde, sayfadaki tüm içeriği alıyoruz. Kodda, her şey biraz farklı bir varyasyonda bulunur, orada görüntü yoktur. Bir komut dosyası, başvurular, karakterler ve diğer kod öğeleri vardır.
Basit bir deyişle, sitedeki tüm bilgiler, tüm verilerin özel bir dilde belirtildiği küçük bir yapılandırılmış metinde toplanır.
Bir web sayfasını doğru bir şekilde oluşturmaya yardımcı olan belirli öğeleri kullanır. Böyle bir veri kümesi nasıl ve neden analiz edilmelidir?
Kodu neden görüntülemeniz gerekiyor?
Kodu analiz ettikten veya görüntüledikten sonra, neyin ne olduğunu ve hangi verilerin neyden sorumlu olduğunu bilerek, tarayıcının çalışmasını gerçekleştirebilirsiniz. Yani, siteye yönlendirmeyle ilgili herhangi bir sorunu çözebiliriz. Bu, müşterinin kodu inceleyerek başa çıkabileceği ana görevidir, ancak diğer parametreleri elde etmek kolaydır.
Kodu inceledikten sonra şunları yapabilirsiniz:
- Belirli bir siteyi analiz etmek için etiketleri görüntüleme;
- Belirli bir öğenin sayfada olup olmadığını öğrenin. Örneğin, bazı komut dosyalarının, sayaçların, belirli kodların ve diğer birçok parçanın varlığını kontrol etmek kolaydır;
- Parçaların parametrelerini tanımlayın. Örneğin, yazı tipleri veya renkleri;
- Sayfada bulunan eklere ve diğer öğelere ulaşın;
- Sitede yer alan tüm bağlantıları görüntüleyin;
- Siteye gitmenizi veya sitede belirli eylemleri gerçekleştirmenizi engelleyen kodla ilgili sorunları belirleyin.
Bu, web sayfasını tam olarak keşfedebileceğiniz dikkatli bir değerlendirmeden sonra çok yararlı verilerdir. Bu tür bilgiler sayesinde, gerekli tüm bağlantıları kolayca tespit etmek ve bunları kullanmak, web platformundaki tüm ekleri bulmak mümkündür.
Tabii ki, kodu incelerken çıkarılabilecek tüm veriler bu değildir. Öğenin kodu birkaç kat daha fazla bilgi içerir, ancak bunun için daha fazla bilgiye sahip olmanız gerekir.
Öncelik kuralı
Sayfa kodunu Google Chrome'da görüntülemek için:
- İlgilendiğimiz sayfaya gidin ve bağlam menüsünü açmak için farenin sağ tuşuyla herhangi bir yere tıklayın.
- Listede "Sayfa kodunu görüntüle" yi buluyoruz ve üzerine tıklıyoruz.
Ayrıca, bir klavye kısayolu veya geliştirici araçları kullanarak koda ulaşabilirsiniz. Takımlar, sırayla, hızlı bir kombinasyonla da çağrılabilir.
Bu yöntemlere daha yakından bakalım.
Kısayol tuşlarını kullanma
Basit ve hızlı bir seçenek, klavye panelindeki iki düğmeye aynı anda basmanız yeterlidir.
Kodu açmak için Ctrl + U tuşlarına basın. Yeni pencerede, kesinlikle sayfanın tüm kodu açılır.
İşte bu, verileri, bağlantıları, başlıkları, komut dosyalarını ve diğer bilgileri incelemeye başlayalım.
Geliştirici araçlarını kullanma
Bir sayfanın kaynak kodunu geliştirici araçları aracılığıyla açmak için:
- Tarayıcının sağ üst köşesinde, üç noktaya tıklayın.
- Açılan menüde "Ek Araçlar" – "Geliştirici Araçları" nı seçin.
- Açılan araç penceresinde Öğeler sekmesini seçin.
Geliştirici araçlarına erişmek için hızlı kombinasyon Ctrl + Shift + I
Koddan gerekli verileri çıkarmak ve kendi amaçlarınız için kullanmak için kalır. Sorun veya başka nüanslar bulursanız, bu kodu kolayca değiştirebilir ve ardından sonucu kaydedebilirsiniz.
Örneğin, sosyal ağlarda, avatarın rengini maviden turuncuya değiştirebilirsiniz. Arkadaşlarınızın, takipçilerinizin, beğenilerinizin sayısını değiştirin, ancak tüm bunlar sitede, yalnızca cihazınızda geçersiz olacaktır.
Tabii ki, bu işlev sosyal ağlara abone eklemek için gerekli değildir, çünkü kullanımı çok geniştir. Örneğin, kişisel hizmet veya ürün sitesinin sayfasının yapısını kolayca değiştirebilir, web sitesinin editöründe değiştirilemeyen verileri (varsa) değiştirebilirsiniz.
Peki kodu nasıl değiştirirsiniz?
Kaynak kodu nasıl düzenlenir ve kaydedilir
Google Chrome'da sayfanın kodu nasıl gösterilir, ancak nasıl değiştirilir?
Bazıları yanlışlıkla bunun için deneyimli bir programcı olmanız, davanın tüm inceliklerini bilmeniz ve çok daha fazlasını bilmeniz gerektiğine inanıyor. Tabii ki, bu böyle değil, her şey çok daha basit.
İşte aşağıdaki plan:
- Gerekli sayfayı açın.
- "F12" tuşuna basın (klavyenin üst kısmında bulunur).
- Bu, yineleyebileceğiniz kodu açar.
- Web sayfasının alt kısmında, alınan verilere bakarız ve neyin değiştirilmesi gerektiğini ararız. Bu, belirli bir parça veya mevcut verilerin büyük bir kısmı olabilir.
- Kodun farenin sağ tuşuyla görüntülenen gerekli kısmına tıklayın ve görünen olası komutlar listesinde "HTML Olarak Düzenle" yi seçin.
- Gerekli kod parçası, bilgileri düzenleyebileceğiniz yeni bir sekmede açılacaktır.
- İş bittikten sonra, değiştirilen verileri kaydetmeniz gerekir. Bunu yapmak için "F12" düğmesine geri dönün ve son pencereyi kapatın.
Değişiklikleri izlemek! Sayfa, koddaki bilgiler değiştirilerek ve programlama alanından belirli bir bilgiye sahip olmadan değiştirilir. Herhangi bir nedenle içerik değişmediyse, web platformunu güncelleyin.
Umarız bu makale sizin için yararlı olmuştur ve bir web sayfasının kodunun ne olduğunu, neden oluşturulduğunu ve ne içerdiğini, nasıl ve neden değiştirilmesi gerektiğini öğrendiniz.
