- Konu sahibi
- #1
HTML görüntüleyici, HTML kodunu tarayıcıda okunabilir bir web sayfası olarak gösteren veya mevcut bir sayfanın HTML yapısını incelemenizi sağlayan araçtır. Kullanım amacına göre iki farklı biçimde karşınıza çıkar: Yazdığınız HTML kodunun nasıl görüneceğini önizleyen editörler ve bir web sayfasının kaynak kodunu inceleyen tarayıcı araçları.
HTML, sayfanın başlık, paragraf, bağlantı, liste ve görsel gibi yapısal bölümlerini tanımlar. Tarayıcı HTML dosyasını okur, bu yapıyı DOM adı verilen belge ağacına dönüştürür ve ekranda görüntüler. CSS görünümü, JavaScript ise etkileşimi etkiler. Bu araçların bazıları bağımsız uygulama, bazıları tarayıcı veya editör özelliğidir. Ortak işlevleri, HTML kaynağını ya da tarayıcının oluşturduğu sonucu incelemeyi kolaylaştırmaktır; her aracın CSS ve JavaScript desteği aynı olmayabilir.
Bir HTML görüntüleyiciyle şu işlemleri yapabilirsiniz:
Burada ziyaretçi etiketleri değil, etiketlerin oluşturduğu sonucu görür. Kaynak kodu inceleyen bir araç ise aynı yapıyı kod biçiminde gösterir.
Kodunuzu test etmek için aşağıdaki sırayı izleyebilirsiniz:
Mevcut bir sayfanın HTML yapısını görmek istiyorsanız tarayıcının kaynak görüntüleme veya geliştirici araçlarını kullanın. Kaynak görüntüleme genellikle sunucudan gelen ilk HTML metnini gösterir. Geliştirici araçlarındaki Elements veya benzeri bölüm ise tarayıcının oluşturduğu güncel DOM yapısını gösterir. JavaScript sayfayı sonradan değiştirebildiği için bu iki görünüm her zaman aynı olmayabilir.
İhtiyaca göre seçim yapmak daha doğrudur:
Sonuç beklediğiniz gibi değilse önce HTML sözdizimini kontrol edin. Açılmayan veya yanlış kapanan etiketler, hatalı tırnak işaretleri ve iç içe elemanların yanlış sıralanması tarayıcının kodu farklı yorumlamasına yol açabilir. Ayrıca yalnız HTML görüntüleyici kullanarak CSS görünümü veya JavaScript davranışı hakkında kesin sonuç çıkarmayın; bu katmanları ayrıca test etmek gerekir.
En yaygın hata, kaynak kodu ile ekranda görünen sonucu aynı şey sanmaktır. Kaynak görüntüleyici kodu gösterir; HTML önizleyici ise kodun tarayıcıdaki görsel çıktısını gösterir. Bir diğer hata da geliştirici araçlarında yapılan geçici değişikliklerin dosyaya kaydedildiğini düşünmektir. Bu araçlardaki düzenlemeler çoğunlukla yalnızca mevcut tarayıcı oturumu için geçerlidir.
Önizleme ve gerekiyorsa HTML doğrulayıcısıyla yapıyı inceledikten sonra kodu dosyanızda düzeltin, CSS ve JavaScript dosyalarını ayrı test edin ve sayfayı farklı ekran boyutlarında yeniden kontrol edin.
Hayır. HTML editörü kod yazmayı ve düzenlemeyi sağlar; görüntüleyici ise kodun kaynak veya görsel sonucunu gösterir. Bazı uygulamalar iki işlevi birlikte sunabilir.
Yalnız HTML işleyen bir önizleyici PHP'yi çalıştırmaz. PHP'nin önce uygun sunucu ortamında işlenmesi, ürettiği HTML'nin ardından tarayıcıya iletilmesi gerekir. Bir dosyanın uzantısını değiştirmek bu ortamı oluşturmaz.
Normal Elements düzenlemesi yalnız kendi sayfa görünümünüzde geçicidir; sunucudaki kaynak dosyayı değiştirmez. Sayfa yenilenince kaybolabilir. Kalıcı değişiklik için kaynak projeyi düzenleyip uygun yayın sürecini kullanın; ayrıca yapılandırılan yerel dosya eşleme araçları bu varsayılan davranıştan ayrıdır.
HTML, sayfanın başlık, paragraf, bağlantı, liste ve görsel gibi yapısal bölümlerini tanımlar. Tarayıcı HTML dosyasını okur, bu yapıyı DOM adı verilen belge ağacına dönüştürür ve ekranda görüntüler. CSS görünümü, JavaScript ise etkileşimi etkiler. Bu araçların bazıları bağımsız uygulama, bazıları tarayıcı veya editör özelliğidir. Ortak işlevleri, HTML kaynağını ya da tarayıcının oluşturduğu sonucu incelemeyi kolaylaştırmaktır; her aracın CSS ve JavaScript desteği aynı olmayabilir.
HTML görüntüleyici ne işe yarar?
Bir HTML görüntüleyiciyle şu işlemleri yapabilirsiniz:
- Yazdığınız kodun ekranda doğru görünüp görünmediğini kontrol edebilirsiniz.
- Etiketlerin iç içe yapısının sonucunu inceleyebilirsiniz. Görsel önizleme tek başına sözdizimi doğrulayıcısı değildir.
- Bir web sayfasının kaynak HTML kodunu okuyabilirsiniz.
- CSS ve JavaScript eklenmeden önce temel HTML yapısını test edebilirsiniz.
- Başlık, paragraf, bağlantı veya form gibi öğelerin tarayıcıdaki karşılığını görebilirsiniz.
HTML:
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ürün sayfası</title>
</head>
<body>
<h1>Ürün sayfası</h1>
<p>Bu bölüm ürün hakkında kısa bilgi verir.</p>
<a href="https://example.com">Detayları incele</a>
</body>
</html>Burada ziyaretçi etiketleri değil, etiketlerin oluşturduğu sonucu görür. Kaynak kodu inceleyen bir araç ise aynı yapıyı kod biçiminde gösterir.
HTML görüntüleyici nasıl kullanılır?
Kodunuzu test etmek için aşağıdaki sırayı izleyebilirsiniz:
- Bir metin editörü veya HTML önizleme aracı açın.
- Temel HTML belgesini oluşturun. Belgenin ana yapısı için
html,headvebodybölümlerini kullanın. - Görüntülenecek içeriği
bodybölümüne yazın. - Önizleme veya çalıştırma seçeneğini kullanın.
- Ekrandaki sonucu kodla karşılaştırın. Beklenmeyen görünüm varsa etiket kapanışlarını, nitelik değerlerini ve iç içe yapıyı kontrol edin.
index.html adıyla kaydedip tarayıcıda açabilirsiniz. Değişiklik yaptıktan sonra dosyayı kaydedip sayfayı yenileyin. Basit HTML için bu yeterlidir. Modül betikleri, veri istekleri veya sunucu işlevleri varsa yerel dosya güvenlik sınırları nedeniyle bir yerel HTTP test sunucusu kullanmanız gerekebilir.Mevcut bir sayfanın HTML yapısını görmek istiyorsanız tarayıcının kaynak görüntüleme veya geliştirici araçlarını kullanın. Kaynak görüntüleme genellikle sunucudan gelen ilk HTML metnini gösterir. Geliştirici araçlarındaki Elements veya benzeri bölüm ise tarayıcının oluşturduğu güncel DOM yapısını gösterir. JavaScript sayfayı sonradan değiştirebildiği için bu iki görünüm her zaman aynı olmayabilir.
Hangi görüntüleyici tercih edilmeli?
İhtiyaca göre seçim yapmak daha doğrudur:
| İhtiyaç | Uygun seçenek | Sonuç |
|---|---|---|
| Kendi HTML kodunu denemek | HTML önizleme editörü | Kodun görsel karşılığını hızlıca görürsünüz |
| Bir sayfanın ilk kaynak kodunu okumak | Kaynak görüntüleme | Sunucudan gelen HTML metnini incelersiniz |
| Sayfanın sonradan oluşan yapısını incelemek | Geliştirici araçları | Güncel DOM ve öğe özelliklerini görürsünüz |
| Dosyayı yayınlamadan test etmek | Yerel HTML dosyası | Tarayıcıdaki temel çıktıyı kontrol edersiniz |
Sık yapılan hatalar
En yaygın hata, kaynak kodu ile ekranda görünen sonucu aynı şey sanmaktır. Kaynak görüntüleyici kodu gösterir; HTML önizleyici ise kodun tarayıcıdaki görsel çıktısını gösterir. Bir diğer hata da geliştirici araçlarında yapılan geçici değişikliklerin dosyaya kaydedildiğini düşünmektir. Bu araçlardaki düzenlemeler çoğunlukla yalnızca mevcut tarayıcı oturumu için geçerlidir.
Önizleme ve gerekiyorsa HTML doğrulayıcısıyla yapıyı inceledikten sonra kodu dosyanızda düzeltin, CSS ve JavaScript dosyalarını ayrı test edin ve sayfayı farklı ekran boyutlarında yeniden kontrol edin.
Sık sorulan sorular
HTML görüntüleyici ile HTML editörü aynı mıdır?
Hayır. HTML editörü kod yazmayı ve düzenlemeyi sağlar; görüntüleyici ise kodun kaynak veya görsel sonucunu gösterir. Bazı uygulamalar iki işlevi birlikte sunabilir.
Görüntüleyici PHP kodunun sonucunu gösterir mi?
Yalnız HTML işleyen bir önizleyici PHP'yi çalıştırmaz. PHP'nin önce uygun sunucu ortamında işlenmesi, ürettiği HTML'nin ardından tarayıcıya iletilmesi gerekir. Bir dosyanın uzantısını değiştirmek bu ortamı oluşturmaz.
DevTools'ta yaptığım değişiklikler siteyi herkes için değiştirir mi?
Normal Elements düzenlemesi yalnız kendi sayfa görünümünüzde geçicidir; sunucudaki kaynak dosyayı değiştirmez. Sayfa yenilenince kaybolabilir. Kalıcı değişiklik için kaynak projeyi düzenleyip uygun yayın sürecini kullanın; ayrıca yapılandırılan yerel dosya eşleme araçları bu varsayılan davranıştan ayrıdır.
