HTML Görüntüleyici Nedir?

Sunucu kurmadan HTML'nizin nasıl göründüğünü görmek mi istiyorsunuz? Bu araç tam olarak bunu yapıyor. HTML Görüntüleyici, HTML (HyperText Markup Language)'nizi alıyor ve kodunuzun yanındaki önizleme bölmesinde canlı olarak render ediyor.

İster bir açılış sayfasının prototipini yapıyor, ister bir e-posta şablonunu hata ayıklıyor, ister işaretlemenizin doğru olup olmadığını kontrol ediyor olun, bu araç size anında görsel geri bildirim sağlar. Dosya kaydetmeye veya yerel sunucu çalıştırmaya gerek yok.

Her şey tarayıcınızda çalışır. HTML'niz sunucularımıza hiç değmez. Hızlı, ücretsiz ve gizlidir.

HTML Görüntüleyici Nasıl Kullanılır

HTML'nizi önizlemek için bu adımları izleyin.

HTML'nizi Yapıştırın veya Örnek Yükleyin

HTML'nizi sol editöre yapıştırın. <html>, <head> ve <body> etiketleri içeren tam bir sayfa veya sadece bir parçacık olabilir. Örnek HTML yüklemek için Örnek düğmesine tıklayın.

<div style="font-family: Arial, sans-serif; padding: 20px;">
  <h1 style="color: #333;">Merhaba Dünya</h1>
  <p>Bu bir <strong>örnek HTML</strong> sayfasıdır.</p>
  <ul>
    <li>Öğe 1</li>
    <li>Öğe 2</li>
    <li>Öğe 3</li>
  </ul>
</div>

Siz yazarken önizleme otomatik olarak güncellenir.

Canlı Önizlemeyi Görün

Sağ panel HTML'nizi anında render eder. Tarayıcının işaretlemenizi tam olarak nasıl yorumladığını görürsünüz — stiller, düzen, görüntüler ve tümü. Önizleme güvenlik için bir iframe içinde çalışır.

Ayarlayın ve Tekrarlayın

Sol panelde HTML'nizi düzenleyin ve önizlemenin gerçek zamanlı güncellenmesini izleyin. Panel boyutlarını ayarlamak için bölücüyü sürükleyin. Önizlemeyi tam ekranda görmek için Büyüt'e tıklayın.

Çalışmanızı Paylaşın

HTML'niz için paylaşılabilir bir bağlantı oluşturmak için Paylaş'a tıklayın.

Ne Zaman Kullanırsınız

UI Parçacıklarını Prototipleme

Hızlıca bir düğme stili, kart düzeni veya navigasyon çubuğunu test etmek mi istiyorsunuz? HTML'nizi buraya yapıştırın ve anında render edildiğini görün.

E-posta Şablonlarını Hata Ayıklama

E-posta HTML'si gerçekten karmaşıktır — satır içi stiller, tablo düzenleri, tuhaf render. Şablonunuzu göndermeden önce nasıl göründüğünü görmek için buraya yapıştırın.

HTML Öğrenme

HTML öğreniyorsanız, bu araç deney yapmak için mükemmeldir. Etiketler yazın, ne yaptıklarını görün. Farklı özellikler deneyin, sonucu anında kontrol edin.

Kod Parçacıklarını Gözden Geçirme

Birisi size Slack'te veya bir PR yorumunda HTML parçacığı gönderdi mi? Gerçekte nasıl göründüğünü görmek için buraya yapıştırın.

Sık Sorulan Sorular

HTML verilerim bir yerde saklanıyor mu?

Hayır. Her şey tamamen tarayıcınızda JavaScript ile çalışır. Bağlantı oluşturmak için "Paylaş"a tıklamadığınız sürece HTML'niz bilgisayarınızı terk etmez.

CSS ve JavaScript destekleniyor mu?

Evet. Satır içi stiller ve <style> etiketleri doğru şekilde render edilir. <script> etiketlerindeki JavaScript, güvenli önizleme iframe içinde çalıştırılır.

Önizleme güvenli mi?

Önizleme, sandbox'lanmış bir iframe içinde render edilir ve bu onu ana sayfadan izole eder.

Tam HTML belgeleri kullanabilir miyim?

Kesinlikle. <!DOCTYPE html>, <html>, <head> ve <body> etiketleri içeren tam bir HTML belgesi veya sadece bir <div> gibi bir parçacık yapıştırabilirsiniz.

Canlı önizleme nasıl çalışıyor?

Editörde yazdıkça, araç 300 ms'lik kısa bir gecikmenin ardından HTML içeriğinizle önizleme iframe'ini günceller.

Editör ve önizleme panellerini yeniden boyutlandırabilir miyim?

Evet. İki panel arasındaki bölücü çubuğu sürükleyerek boyutlarını ayarlayabilirsiniz. Mobilde paneller dikey olarak üst üste gelir.

Diğer HTML ve İşaret Araçları

Bu görüntüleyici HTML önizleme için harikadır, ancak bazen başka şeylere ihtiyaç duyarsınız: