Chromeda HTML Kodunu Görüntüleme

Kaydolun ve günde 1000 $ kazanın ⋙

Cihaz Bağlantıları

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.

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

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.
    Chrome'da HTML Kodunu Görüntüleme
  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.
    Chrome'da HTML Kodunu Görüntüleme

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.
    Chrome'da HTML Kodunu Görüntüleme
  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.
    Chrome'da HTML Kodunu Görüntüleme
  3. Bölmenin üst kısmındaki “Öğeler” sekmesine tıklayın. Bu, web sayfası için HTML kaynak kodunu görüntüler.
    Chrome'da HTML Kodunu Görüntüleme
  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.
    Chrome'da HTML Kodunu Görüntüleme

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.
    Chrome'da HTML Kodunu Görüntüleme
  2. Sayfaya sağ tıklayın ve "İncele"yi seçin.
    Chrome'da HTML Kodunu Görüntüleme
  3. Ekranın altında HTML kodunu görüntüleyen yeni bir bölme açılacaktır.
    Chrome'da HTML Kodunu Görüntüleme
  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.
    Chrome'da HTML Kodunu Görüntüleme
  5. Bölmeyi kapatmak için sağ üst köşedeki “X” işaretini tıklayın.
    Chrome'da HTML Kodunu Görüntüleme

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.
    Chrome'da HTML Kodunu Görüntüleme
  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.
    Chrome'da HTML Kodunu Görüntüleme
  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.
    Chrome'da HTML Kodunu Görüntüleme
  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.
    Chrome'da HTML Kodunu Görüntüleme

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.
    Chrome'da HTML Kodunu Görüntüleme
  2. Düzenleme modunu başlatmak için adres çubuğuna bir kez dokunun.
    Chrome'da HTML Kodunu Görüntüleme
  3. İmleci URL'nin önüne getirin.
    Chrome'da HTML Kodunu Görüntüleme
  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.
    Chrome'da HTML Kodunu Görüntüleme

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.
    Chrome'da HTML Kodunu Görüntüleme
  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.
    Chrome'da HTML Kodunu Görüntüleme

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.
    Chrome'da HTML Kodunu Görüntüleme
  2. "Git" düğmesine basın.
    Chrome'da HTML Kodunu Görüntüleme

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.

Sign up and earn $1000 a day ⋙

Baldurs Gate 3 Çapraz Platform mu? Henüz değil

Baldurs Gate 3 Çapraz Platform mu? Henüz değil

Büyük heyecan ve beklentinin ardından “Baldur's Gate 3” yayınlandı. Ancak oyuna dalmadan önce birçok oyuncu bunun olup olmadığını bilmek isteyecektir.

DS4Windows Denetleyici Hatasını Algılamaması Nasıl Düzeltilir

DS4Windows Denetleyici Hatasını Algılamaması Nasıl Düzeltilir

Kontrol cihazınıza bağlanırken sorun mu yaşıyorsunuz? Oyuna hazırsınız ancak kontrol cihazınızı kullanmadan oyun biter. Tek oyuncu sen değilsin

Diablo 4te Beceriler Nasıl Sıfırlanır

Diablo 4te Beceriler Nasıl Sıfırlanır

“Diablo 4”te yeni bir karakter yaratmadan oynatıcınızın yapısını değiştirmenin bir yolunu mu arıyorsunuz? Şanslısın. Oyun size izin veriyor

Windows 10 PCde Parlaklık Nasıl Ayarlanır

Windows 10 PCde Parlaklık Nasıl Ayarlanır

Hangi cihazı kullanırsanız kullanın ekran parlaklığı ayarı çok önemli bir özelliktir. Ancak parlaklık seviyesini elde etmek özellikle önemlidir

Blox Meyvelerinde Yama Nasıl Elde Edilir

Blox Meyvelerinde Yama Nasıl Elde Edilir

Yama, oyunun Lanetli Katanalarından biridir ve Efsanevi statüsünü taşır. "Blox Fruits" açık dünyasında böylesine güçlü bir silahı kullanmak size şunları sunacak:

Eksik Windows 10 Ağ Bağdaştırıcısı Nasıl Onarılır

Eksik Windows 10 Ağ Bağdaştırıcısı Nasıl Onarılır

Windows işletim sistemindeki ağ bağdaştırıcısı, ağ bağlantılarının sorunsuz çalışmasını sağlayan hayati bir cihazdır. Ağ bağdaştırıcısı aldığından beri

Windowsta Nasıl Yardım Alınır

Windowsta Nasıl Yardım Alınır

Windows'u uzun süredir kullanıyor olsanız bile zaman zaman uzman yardımı gerektiren zorluklarla karşılaşabilirsiniz. Karşı karşıya olup olmadığınızı

Windows 11de Kayıtlı Wi-Fi Şifreleri Nasıl Görüntülenir

Windows 11de Kayıtlı Wi-Fi Şifreleri Nasıl Görüntülenir

İnternet ağınızın kilitlenmesinden daha sinir bozucu çok az şey vardır. Şifreyi yazmadıysanız erişimi kaybetme riskiyle karşı karşıya kalırsınız

PCnizde Windows Duvar Kağıdı Konumunu Nerede Bulabilirsiniz?

PCnizde Windows Duvar Kağıdı Konumunu Nerede Bulabilirsiniz?

İşte Windows 8 ve 10 için Windows duvar kağıdı konumu; böylece bu yüksek çözünürlüklü görüntüleri diğer cihazlarla veya Windows'un eski sürümleriyle kullanabilirsiniz.

Windows 10 PCde Kamera Nasıl Test Edilir

Windows 10 PCde Kamera Nasıl Test Edilir

Windows 10 PC'nizle fotoğraf çekmek istiyorsanız öncelikle kamera işlevini test etmeniz gerekir. Sadece birkaç selfie çekmek isteyip istemediğinizi

Windows 10 veya 11 PCdeki Geçici Dosyalar Nasıl Silinir

Windows 10 veya 11 PCdeki Geçici Dosyalar Nasıl Silinir

Bilgisayarınız yavaşlamaya başladığında, bu biraz yer açmanız gerektiğinin bir işaretidir. Genellikle geçici dosyaları silmek, başlamak için mükemmel bir yerdir.

Windows 10daki Filmler ve TV uygulama kısayollarının özeti

Windows 10daki Filmler ve TV uygulama kısayollarının özeti

Windows 10'da Filmler ve TV uygulama kısayollarının özeti, Windows 10'da Filmler ve TV'nin Özeti uygulama kısayolları size harika bir deneyim sunar. Belki

Windows için Discordda Mesajlar Yüklenemedi hatası nasıl düzeltilir

Windows için Discordda Mesajlar Yüklenemedi hatası nasıl düzeltilir

Windows için Discord'da Mesajlar Yüklenemedi hatası nasıl düzeltilir? Başkalarının yazdıklarını okuyamıyorsanız Discord eğlenceli değildir. Mesajlar hatasını nasıl düzelteceğiniz aşağıda açıklanmıştır

Bu PC simgesi Windows 11 masaüstünde nasıl görüntülenir?

Bu PC simgesi Windows 11 masaüstünde nasıl görüntülenir?

Windows 11 masaüstünde Bu Bilgisayar simgesi nasıl görüntülenir, Windows 11'i kullanma işlemi sırasında birçok kullanıcının Bu Bilgisayara (yönetim) erişmesi gerekir.

Windows Kayıt Defterindeki bilgileri hızlı bir şekilde nasıl bulabilirim?

Windows Kayıt Defterindeki bilgileri hızlı bir şekilde nasıl bulabilirim?

Windows Kayıt Defteri'ndeki bilgileri hızlı bir şekilde nasıl bulabilirsiniz? Windows Kayıt Defteri'nde bilgi bulmakta zorlanıyor musunuz? Aşağıda kayıt defterini bulmanın hızlı yolları verilmiştir

Windows 10da başarısız oturum açma denemelerinin sayısı nasıl sınırlanır?

Windows 10da başarısız oturum açma denemelerinin sayısı nasıl sınırlanır?

Windows 10'da başarısız oturum açma denemelerinin sayısı nasıl sınırlandırılır. Windows 10'da başarısız parola oturum açma denemelerinin sayısını sınırlamak bilgisayar güvenliğini artırmaya yardımcı olur. İşte nasıl

Windowsta sahte hata mesajları nasıl oluşturulur?

Windowsta sahte hata mesajları nasıl oluşturulur?

Windows'ta sahte hata mesajları nasıl oluşturulur? Windows oldukça yaratıcı hata mesajları üretebilir ancak neden onlarla dalga geçilecek kendi içeriğinizi oluşturmayı denemiyorsunuz?

Windows Araçlarını Windows 11de açmanın yolları

Windows Araçlarını Windows 11de açmanın yolları

Windows Araçlarını Windows 11'de, Windows Yönetimsel Araçlarını veya Windows Araçlarını açma yolları Windows 11'de hala kullanışlıdır. Windows Araçlarını Windows 11'de nasıl bulacağınız aşağıda açıklanmıştır.

Windows Hızlı Yardım çalışmıyor hatası nasıl düzeltilir

Windows Hızlı Yardım çalışmıyor hatası nasıl düzeltilir

Windows Hızlı Yardım çalışmıyor hatası nasıl düzeltilir, Windows Hızlı Yardım uzaktaki bir bilgisayara kolayca bağlanmanıza yardımcı olur. Ancak bazen hatalara da neden olur. Ancak,

Word, Excel ve PowerPoint dosyaları Windows 11 görev çubuğundaki ilgili uygulama simgesine nasıl sabitlenir?

Word, Excel ve PowerPoint dosyaları Windows 11 görev çubuğundaki ilgili uygulama simgesine nasıl sabitlenir?

Word, Excel ve PowerPoint dosyaları Windows 11 görev çubuğundaki ilgili uygulama simgesine nasıl sabitlenir, Office dosyaları Windows 11'de görev çubuğu simgesine nasıl sabitlenir? Davet etmek