Chromeda HTML Kodunu Görüntüleme

Cihaz Bağlantıları

• Android
• iPhone
• Chromebook
• Mac
• pencereler
• Cihaz Eksik mi?

Bir web sayfasını neyin oluşturduğunu merak ediyor musunuz? Web sitenizdeki yazı tipi boyutunu veya rengini nasıl değiştireceğinizi bilmek ister misiniz? Bir web sayfasının HTML kodunu görüntüleyerek tüm bunları ve daha fazlasını yapabilirsiniz.

Bu eğitimde, size bir web sayfasının HTML kodunu Chrome'da nasıl görüntüleyeceğinizi göstereceğiz.

HTML Kodunu Chrome'da Görüntüleme

HTML'de yazarken kaynak kodu, bir web sayfasının yapısını ve içeriğini tanımlamak için kullanılan etiketler ve nitelikler dizisidir.

Kaynak kodu web tarayıcıları tarafından okunur ve ekranda gördüğünüz grafik web sayfasına çevrilir. Kaynak kodu, bir web sayfasının görünümünü ve hissini tanımlamanın yanı sıra, açılır pencereler, formlar ve açılır menüler gibi etkileşim eklemek için de kullanılabilir.

Ortalama bir internet kullanıcısı hiçbir zaman bir web sayfasının HTML kaynak kodunu görüntülemeye ihtiyaç duymayabilir, ancak bazılarının bunu yapmak isteyebileceği çeşitli nedenler vardır.

Geliştiriciler için, kaynak kodunun görüntülenmesi, bir sayfanın nasıl yapılandırıldığını anlamanın ve hangi stil ve komut dosyası öğelerinin kullanıldığını belirlemenin yararlı bir yolu olabilir. Tasarımcılar için, diğer tasarımcıların etkili düzenler oluşturmak için HTML'yi nasıl kullandıklarını görmek faydalı olabilir.

Bazı durumlarda kullanıcılar, hataları gidermek veya belirli bir web sitesinin veya web uygulamasının nasıl çalıştığı hakkında daha fazla bilgi edinmek için kaynak kodunu da görüntülemek isteyebilir. Nedeni ne olursa olsun, HTML kaynak kodunu görüntülemek Chrome'da görece basit bir işlemdir.

Bir Windows PC'de Chrome'da Bir Web Sayfasının HTML Kodunu Görüntüleme

Windows işletim sistemi, Chrome'un en uyumlu sistemlerinden biridir. Chrome, Microsoft'un önemli bir katkıda bulunduğu açık kaynaklı Chromium projesi üzerine inşa edilmiştir. Bu uyumluluk, popüler tarayıcının kullanıcıların herhangi bir web sitesinin HTML kodunu görüntülemesine izin verdiği HTML alanına kadar uzanır.

HTML kodunu iki şekilde görüntüleyebilirsiniz.

Sayfa Kaynağını Görüntülemeyi Kullanma

Bu yöntem basittir:

1. Chrome'u açın ve HTML kaynak kodunu görüntülemek istediğiniz sayfaya gidin.
   
2. Sayfaya sağ tıklayın ve Sayfa Kaynağını Görüntüle'yi seçin veya kaynak kodunu yeni bir sekmede açmak için klavyenizde Ctrl + U tuşlarına basın.
   

Kaynak kodu yeni sekmede görünecek ve o sayfanın HTML işaretlemesini görüntülemek için kaydırabilirsiniz.

Geliştirici Araçlarını Kullanma

Google Chrome'da Geliştirici Araçlarını kullanarak bir web sayfasının kaynak kodunu incelemek için aşağıdaki adımları izleyin.

1. Google Chrome'u açın ve incelemek istediğiniz web sayfasına gidin.
   
2. Klavyenizde Ctrl + Shift + I tuşlarına basın. Geliştirici Araçları bölmesi, görüntülemekte olduğunuz web sayfasının yanında bir yuvada açılır.
   
3. Bölmenin üst kısmındaki “Öğeler” sekmesine tıklayın. Bu, web sayfası için HTML kaynak kodunu görüntüler.
   
4. Artık sayfanın kaynak kodunu inceleyebilirsiniz. Bir öğeyi daraltmak için etiket adının yanındaki üçgene tıklayın. Bir bileşen hakkında daha fazla bilgi görüntülemek için bileşene sağ tıklayın ve "İncele"yi seçin.
   

Bu yöntemin HTML sayfaları için en iyisi olduğunu unutmayın; diğer türdeki web sayfalarının kaynak kodunu görüntülemek mümkündür, ancak biçimlendirmeyi okumak daha zor olabilir.

Bir Web Sayfasının HTML Kodunu Mac'te Chrome'da Görüntüleme

Bir web geliştiricisiyseniz, bir web sayfasının HTML kodunu görüntüleyebilmeniz önemlidir. Bu, sayfanın nasıl yapılandırıldığını görmenizi ve ortaya çıkabilecek sorunları gidermenizi sağlar. Neyse ki, bunu bir Mac'te Chrome'da yapmak kolaydır. Basitçe şu adımları izleyin:

1. Chrome'u açın ve HTML kodunu görüntülemek istediğiniz web sayfasına gidin.
   
2. Sayfaya sağ tıklayın ve "İncele"yi seçin.
   
3. Ekranın altında HTML kodunu görüntüleyen yeni bir bölme açılacaktır.
   
4. Sayfada nasıl biçimlendiklerini görmek için HTML kodundaki belirli öğelere de tıklayabilirsiniz. Örneğin, bir öğeye hangi CSS stillerinin uygulandığını onu seçip açılan bölmede "Stiller" sekmesine tıklayarak görebilirsiniz.
   
5. Bölmeyi kapatmak için sağ üst köşedeki “X” işaretini tıklayın.
   

Alternatif olarak, kaynak kodunu görüntülemek için Chrome Geliştirici Araçlarını kullanabilirsiniz.

1. Google Chrome'u açın ve incelemek istediğiniz web sayfasına gidin.
   
2. Tarayıcının sağ üst köşesindeki menü simgesine (üç nokta) tıklayın ve açılır menüden Diğer Araçlar ve Geliştirici Araçları'nı seçin.
   
3. Geliştirici Araçları paneli ekranın alt kısmında açılacaktır. Bölmenin üst kısmındaki “Öğeler”i seçin.
   
4. Şimdi geçerli sayfanın HTML kodunu Öğeler panelinde göreceksiniz. Kodu gerektiği gibi incelemek ve hata ayıklamak için paneldeki farklı seçenekleri kullanabilirsiniz.
   

Yalnızca birkaç tıklamayla, herhangi bir web sayfasının HTML kodunu Mac'te Chrome'da kolayca görüntüleyebilirsiniz. Bu, web geliştirme sorunlarını gidermeye çalışırken veya belirli bir web sitesinin nasıl oluşturulduğuna daha yakından bakmak istediğinizde yardımcı olabilir.

Bir Web Sayfasının HTML Kodunu iPhone Uygulamasında Chrome'da Görüntüleme

iPhone kullanıyorsanız, herhangi bir sayfanın HTML kodunu Chrome'da iki şekilde görüntüleyebilirsiniz:

URL'de ince ayar

URL'de küçük bir ayar yaparak herhangi bir sayfanın HTML kodunu kolayca görüntüleyebilirsiniz:

1. Chrome'u açın ve HTML kodunu görüntülemek istediğiniz web sayfasına gidin.
   
2. Düzenleme modunu başlatmak için adres çubuğuna bir kez dokunun.
   
3. İmleci URL'nin önüne getirin.
   
4. “Kaynağı görüntüle” yazın ve ardından “Git” düğmesine basın. Web sayfası için HTML kodu Chrome'da görüntülenecektir.
   

Geliştirici Araçlarını Kullanma

Chrome Geliştirici Araçları, iOS'ta da mevcuttur, ancak onu başlatmak için PC'lere kıyasla farklı bir dizi adım gerekir.

1. Ekranın sağ üst köşesindeki üç noktaya dokunun ve "Ayarlar"ı seçin.
2. Aşağı kaydırın ve "Gelişmiş"e dokunun, ardından "Geliştirici araçları"nın yanındaki anahtarı etkinleştirin.
3. Sayfanın boş bir alanına dokunup basılı tutun, ardından "Öğeyi İncele"yi seçin. Bu, o sayfanın HTML kodunu içeren bir yan panel açacaktır.

Bir Web Sayfasının HTML Kodunu Android Uygulamasında Chrome'da Görüntüleme

Android telefonunuzda Chrome uygulamasını kullanırken, bir web sayfasının HTML kodunu görüntülemek isteyebilirsiniz. Sayfayla ilgili bir sorunu gidermeye çalışıyorsanız veya sayfanın nasıl yapılandırıldığını görmek istiyorsanız bu yararlı olabilir. Bir web sayfasının HTML kodunu Android telefonunuzdaki Chrome'da görüntülemek için şu adımları izleyin:

1. Android cihazınızda Chrome'u açın.
   
2. "view-source:" ve ardından kaynak kodunu görüntülemek istediğiniz sayfanın URL'sini yazın. Örneğin, www.google.com'un kaynak kodunu görüntülemek isterseniz, Chrome'un adres çubuğuna "view-source:www.google.com" yazarsınız.
   

Bu, Chrome'un yerleşik Geliştirici Araçları arayüzünde o sayfanın HTML kodunu açacaktır. Oradan, kodu istediğiniz gibi görüntüleyebilir ve düzenleyebilirsiniz. Bu yöntemin yalnızca, görüntülemeye çalıştığınız web sitesi kaynak koduna erişime izin veriyorsa işe yarayacağını unutmayın. Aksi takdirde, bir hata mesajından başka bir şey göremezsiniz.

Bir Web Sayfasının HTML Kodunu iPad'de Chrome'da Görüntüleme

iPad uygulamasındaki Chrome, herhangi bir web sayfasının HTML kodunu görüntülemeyi kolaylaştırır. Basitçe şu adımları izleyin:

1. Chrome'u açın ve “view-source:” yazıp ardından görüntülemek istediğiniz sayfanın URL'sini yazın. Örneğin, www.alphr.com'un kaynak kodunu görüntülemek isterseniz, Chrome'un adres çubuğuna “view-source:www.alphr.com” yazmanız gerekir.
   
2. "Git" düğmesine basın.
   

Bu, sayfanın kaynak kodunu Chrome'da yeni bir sekmeye yüklemelidir. Oradan, kodu gerektiği gibi kaydedebilir veya paylaşabilirsiniz.

Kaynak Kodu, Sayfaları Bir Arada Tutan Yapıştırıcıdır

HTML, herhangi bir web sitesinin temelidir. Ziyaretçilerin tarayıcılarına bir sayfa yüklediklerinde gördükleri yapıyı ve içeriği sağlar.

Bir sayfanın nihai görünümü CSS veya diğer stil dilleri tarafından belirlenebilirken, HTML kodu sayfanın temel yapısını ve içeriğini belirler. Bazı değişiklikler potansiyel olarak sayfayı bozabilir. Bu nedenle, kaynak kodunu görüntülerken veya üzerinde değişiklik yaparken HTML'yi iyi anlamak önemlidir.

Ayrıca, HTML kodunun görüntülenmesi bazı durumlarda yardımcı olabilirken, kodda yapılan değişikliklerin canlı web sayfasına yansımayacağını unutmayın. Yalnızca site yöneticisi tarafından yayınlanan değişiklikler ziyaretçiler tarafından görülebilir.

Bu eğitimde açıklanan yöntemlerden herhangi birini kullanarak herhangi bir web sayfasının HTML kodunu görüntülemeyi denediniz mi? Nasıl gitti?

Yorumlar bölümünde bize bildirin.