Site Kaynak Çıktısı

Mobil tarayıcılar, masaüstündeki "Sayfa kaynağını görüntüle" seçeneğini genellikle menüde sunmaz. Telefondan kaynak kodu görmenin en kolay yolu, adresi Site Kaynak Çıktısı aracına yazmaktır; araç herhangi bir uygulama gerektirmeden ham HTML'i gösterir ve Kopyala düğmesiyle kodu panoya alabilirsiniz.

Telefonda görüntülenen kaynak kodun masaüstündekinden farklı olabileceğini unutmayın. Bazı siteler mobil cihazlara farklı HTML gönderir. Site Kaynak Çıktısı aracı, isteği kendi sunucusundan gönderdiği için cihazınızdan bağımsız olarak sunucunun standart yanıtını gösterir.

Masaüstü tarayıcıların tamamı kaynak kodu görüntüleme özelliği sunar. Kısayollar tarayıcıya ve işletim sistemine göre farklılık gösterir.

Adres çubuğuna view-source: ön ekiyle adresi yazmak da Chrome, Edge ve Firefox'ta aynı sonucu verir. Geliştirici araçlarını açmak için ise F12 veya Ctrl + Shift + I (macOS'ta Cmd + Option + I) kullanılır; burada JavaScript çalıştıktan sonraki DOM görünür. Kaynak görünümünde Ctrl + F ile arama yaparak belirli bir etiketi hızla bulabilirsiniz. Tarayıcının gösterdiği kaynak önbellekten gelebilir; sunucunun güncel yanıtını görmek için Site Kaynak Çıktısı aracını kullanabilirsiniz.

Bir sayfanın HTML kodunu incelemek veya yedeklemek için birkaç yol vardır. Yöntem, yalnızca HTML'i mi yoksa görseller ve stillerle birlikte sayfanın tamamını mı almak istediğinize bağlıdır.

1. Site Kaynak Çıktısı ile: Adresi araca yazın, Kopyala düğmesine basın ve kodu bir metin düzenleyicisine yapıştırıp .html uzantısıyla kaydedin.
2. Tarayıcıdan sayfa kaydetme: Ctrl + S (macOS'ta Cmd + S) ile "Web sayfası, tamamı" seçeneğini seçtiğinizde HTML, görseller ve stil dosyaları bir klasörle birlikte kaydedilir.
3. Yalnızca HTML: Aynı pencerede "Yalnızca HTML" seçeneği yalnızca belgeyi kaydeder.
4. Kaynak görünümünden: Ctrl + U ile açılan kaynak sayfasında Ctrl + A ve Ctrl + C ile tüm kodu kopyalayabilirsiniz.
5. Komut satırından: curl -o sayfa.html https://ornek.com komutu ham HTML'i dosyaya kaydeder.

Önemli: Herkese açık HTML'i incelemek ve öğrenme amacıyla kaydetmek serbesttir; ancak bir sitenin tasarımını, metinlerini, görsellerini veya kodunu izinsiz kopyalayıp kendi sitenizde yayınlamak telif haklarını ihlal edebilir. Ayrıca kaydedilen HTML yalnızca ön yüzdür; sitenin sunucu tarafındaki PHP kodları, veritabanı ve yönetim paneli bu yolla alınamaz.

HTML dosyaları düz metin dosyalarıdır ve iki farklı amaçla açılabilir: sayfayı görüntülemek veya kodu düzenlemek. Her iki amaç için de ek bir ücretli programa ihtiyaç yoktur.

Dosyayı tarayıcıda açtığınızda görseller veya stiller eksik görünüyorsa, HTML'in bağlı olduğu dosyalar aynı klasörde bulunmuyor veya göreli adresler bozulmuş demektir. Türkçe karakterler bozuk görünüyorsa dosyanın UTF-8 olarak kaydedildiğinden ve head bölümünde <meta charset="utf-8"> etiketinin bulunduğundan emin olun. HTML dosyası hiç açılmıyorsa uzantının gerçekten .html olduğunu, .html.txt gibi gizli bir uzantı taşımadığını kontrol edin.

Başka bir sitenin kaynak kodunu kendi tarayıcınızda geçici olarak değiştirebilirsiniz, ancak bu değişiklik yalnızca sizin ekranınızda görünür ve sayfayı yenilediğinizde kaybolur. Gerçek bir değişiklik için sitenin sunucusuna veya yönetim paneline erişim gerekir.

• Geliştirici araçlarında düzenleme: F12 ile açılan araçlarda metinleri, renkleri ve öğeleri anlık değiştirmek mümkündür. Tasarım denemeleri ve hata ayıklama için kullanışlıdır, ancak sunucudaki dosyayı etkilemez.
• Kendi siteniz için: Kaynak kodu değiştirmek istediğinizde içerik yönetim sisteminin tema düzenleyicisini, şablon dosyalarını veya hosting panelindeki dosya yöneticisini kullanmanız gerekir.
• WordPress: Tema dosyalarını doğrudan düzenlemek yerine alt tema (child theme) kullanmak, güncellemelerde değişikliklerin kaybolmasını önler.
• Sahte ekran görüntüleri: Geliştirici araçlarıyla değiştirilmiş sayfaların ekran görüntüsü kolayca alınabildiği için, internette paylaşılan "kanıt" görüntülerine temkinli yaklaşın.

Bir sayfanın gerçek ve güncel halini görmek için Site Kaynak Çıktısı aracını kullanabilirsiniz; araç sunucunun gönderdiği yanıtı gösterir, tarayıcınızdaki yerel değişikliklerden etkilenmez. Siteniz izniniz olmadan değiştirilmişse bu bir güvenlik sorunudur ve hemen incelenmelidir.

Hayır, bir web sayfasının HTML, CSS ve JavaScript kodunu tamamen gizlemek mümkün değildir. Tarayıcının sayfayı gösterebilmesi için bu kodları indirmesi gerekir; indirilen her şey de kullanıcı tarafından görülebilir. Gizlemeye yönelik yöntemler yalnızca kodu okumayı zorlaştırır.

Gerçekten gizli kalması gereken iş mantığı, API anahtarları ve veritabanı bilgileri her zaman sunucu tarafında tutulmalıdır; bunlar zaten kaynak kodda görünmez. HTML Şifreleme aracı kodu okunmaz hale getirebilir; ancak arama motorlarının içeriği okumasını zorlaştırabileceği için SEO açısından önemli sayfalarda kullanılmamalıdır. İçeriğinizi korumanın asıl yolu telif hakkı bildirimleri ve kopya içerik takibidir.

Hacklenen sitelerde saldırganlar sayfaya ziyaretçinin göremeyeceği şekilde spam bağlantılar ekleyebilir. Bu bağlantılar sitenin itibarını zedeler ve Google'dan manuel işlem almasına yol açabilir. Kaynak kodda şu işaretleri arayın:

1. Gizleme stilleri: display:none, visibility:hidden, font-size:0 veya ekran dışına konumlandırılmış (left:-9999px) bölümlerin içindeki bağlantılar.
2. Alakasız konular: Kumar, ilaç, kripto, yetişkin içerik veya yabancı dillerde bağlantı metinleri.
3. Tanımadığınız alan adları: Hiç eklemediğiniz sitelere giden href değerleri.
4. Şüpheli betikler: eval(, atob(, document.write içeren ve uzun anlamsız metinler barındıran script blokları.
5. Sayfa sonundaki ekler: Kapanış etiketinden sonra eklenmiş kod parçaları.

Bazı saldırılar yalnızca arama motoru botlarına gösterilir; bu yüzden tarayıcınızda sorun görmeseniz bile Site Kaynak Çıktısı ile sunucunun ham yanıtını kontrol etmek önemlidir. Google Ban Kontrolü'ndeki cloaking belirtisi de bu durumu yakalayabilir. Sayfadaki tüm bağlantıları liste halinde görmek için Link Çıkartıcı aracını kullanın. Şüpheli kod bulursanız sitenin dosyalarını ve veritabanını temizleyip tüm şifreleri değiştirin.

HTML, web sayfalarının iskeletini oluşturan işaretleme dilidir ve öğrenmesi en kolay web teknolojilerinden biridir. Temel etiketleri birkaç gün içinde öğrenip basit bir sayfa yapabilirsiniz. Akıcı hale gelmek için düzenli pratik gerekir.

1. Temel yapıyı öğrenin: doctype, html, head, body etiketleri ve belgenin genel düzeni.
2. Metin etiketleriyle devam edin: Başlıklar (h1–h6), paragraf, liste, bağlantı ve görsel etiketleri.
3. Anlamsal etiketleri kullanın: header, nav, main, article, section, footer gibi etiketler hem erişilebilirlik hem SEO için önemlidir.
4. Tablo ve formları öğrenin: Veri gösterimi ve kullanıcı girişi için gerekli yapılar.
5. CSS ile birlikte çalışın: HTML yapıyı, CSS görünümü belirler; ikisi birlikte öğrenilmelidir.
6. Gerçek sayfaları inceleyin: Beğendiğiniz sitelerin kaynak kodunu Site Kaynak Çıktısı ile açıp yapılarını inceleyin.
7. Kendi projenizi yapın: Kişisel bir tanıtım sayfası hazırlamak en etkili öğrenme yoludur.

Ücretsiz kaynaklar arasında MDN Web Docs belgeleri, açık kaynaklı interaktif eğitim platformları ve YouTube'daki Türkçe dersler bulunur. Tarayıcınız ve ücretsiz bir kod düzenleyicisi dışında hiçbir programa ihtiyaç duymazsınız.

Bir web sayfasının büyük bölümü az sayıda temel etiketle oluşturulur. Aşağıdaki tablo, kaynak kodda en sık karşılaşacağınız etiketleri ve görevlerini gösterir.

Kaynak kodu incelerken bu etiketleri tanımak, sayfanın yapısını hızla anlamanızı sağlar.

Türkçe karakterlerin ş, ğ, ı, ö, ç, ü yerine "ÅŸ", "ÄŸ" veya soru işaretleri gibi bozuk görünmesi, sayfanın kaydedildiği karakter kodlaması ile tarayıcıya bildirilen kodlamanın uyuşmamasından kaynaklanır. En yaygın durum, dosyanın UTF-8 kaydedilip eski bir Türkçe kodlama (Windows-1254 veya ISO-8859-9) olarak bildirilmesi ya da tam tersidir.

Site Kaynak Çıktısı aracı farklı karakter setlerindeki sayfaları otomatik olarak UTF-8'e çevirmeye çalışır; bu yüzden araçta düzgün görünen bir sayfa tarayıcıda bozuk görünüyorsa sorun büyük olasılıkla sunucunun bildirdiği karakter setindedir. Sunucunun gönderdiği Content-Type başlığını Site HTTP Bilgisi aracıyla görebilirsiniz. Karakter seti meta etiketinin ilk 1024 bayt içinde olması gerektiğini de unutmayın; daha aşağıda kalırsa tarayıcı doğru kodlamayı geç algılayabilir.