HTML Görüntüleyici

HTML yazın veya yapıştırın ve tarayıcıda anında render edilmiş sonucu görün.

Düzen:Scriptler sandbox'ta ve çalıştırılamaz.

HTML Kodu

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; padding: 16px; color: #1e293b; }
    h1 { color: #3b82f6; }
    button { background: #3b82f6; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; }
    button:hover { background: #2563eb; }
  </style>
</head>
<body>
  <h1>HTML Viewer</h1>
  <p>Edit the HTML on the left to see it rendered here.</p>
  <button>Click me</button>
</body>
</html>

Önizleme

Bu araç hakkında

HTML Görüntüleyici, HTML kodu yazmanıza veya yapıştırmanıza ve tarayıcıda hemen nasıl görüneceğini görmenize olanak tanır. Önizleme, scriptleri devre dışı bırakılmış bir sandbox iframe'de gösterilir; güvenilmez kaynaklardan HTML'i güvenle önizleyebilirsiniz.

Araç, tam HTML belgelerini (head, satır içi CSS ve style blokları dahil) ve HTML parçalarını destekler. Tüm işleme tarayıcınızda yerel olarak gerçekleşir.

Nasıl kullanılır

HTML'nizi soldaki kod düzenleyicisine yazın veya yapıştırın.
Önizlemeyi güncellemek için Render Et'e tıklayın.
Daha yüksek bir önizleme alanı için Üst üste düzenine geçin.
Düzenleyicide satırları girintili yazmak için Tab tuşunu kullanın.

Kullanım senaryoları

Frontend geliştiriciler HTML parçalarını hızlı test eder. E-posta geliştiricileri HTML e-posta şablonlarını önizler. HTML öğrenen öğrenciler etiketlerle deney yapar ve anında sonuç görür. Kod inceleyiciler render çıktısını görsel olarak doğrular.

Sık sorulan sorular

Scriptler neden devre dışı? — Önizleme iframe'i JavaScript çalıştırmasını engellemek için sandbox="allow-same-origin" kullanır; bilinmeyen kaynaklardan HTML'i güvenle önizleyebilirsiniz.
CSS önizleyebilir miyim? — Evet. HTML'inize style etiketleri ekleyin veya satır içi stiller kullanın. Diğer kaynaklardaki harici stil sayfaları CSP tarafından engellenebilir.
Tam HTML belgelerini destekliyor mu? — Evet. DOCTYPE, head ve body etiketleri dahil tam bir HTML belgesi yapıştırabilirsiniz.