HTML Dosyasını Çevrimiçi Aç - HTML Görüntüleyici, Düzenleyici ve Canlı Önizleme

HTML dosyalarını çevrimiçi ücretsiz açın ve önizleyin. Gerçek zamanlı canlı önizleme ile HTML düzenleyin, kodu biçimlendirin ve web sayfalarını tarayıcıda güvenle test edin.

HTML Görüntüleyici

1487

Düzenleyici

Kod

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .card {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            border: 1px solid rgba(255, 255, 255, 0.18);
            text-align: center;
            max-width: 400px;
        }
        h1 { margin-top: 0; }
        button {
            background: white;
            color: #764ba2;
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 2rem;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.2s;
        }
        button:hover {
            transform: scale(1.05);
        }
    </style>
</head>
<body>
    <div class="card">
        <h1>Merhaba Dünya!</h1>
        <p>Bu, HTML kodunuzun canlı önizlemesidir.</p>
        <button onclick="alert('Çalışıyor!')">Bana Tıkla</button>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .card {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            border: 1px solid rgba(255, 255, 255, 0.18);
            text-align: center;
            max-width: 400px;
        }
        h1 { margin-top: 0; }
        button {
            background: white;
            color: #764ba2;
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 2rem;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.2s;
        }
        button:hover {
            transform: scale(1.05);
        }
    </style>
</head>
<body>
    <div class="card">
        <h1>Merhaba Dünya!</h1>
        <p>Bu, HTML kodunuzun canlı önizlemesidir.</p>
        <button onclick="alert('Çalışıyor!')">Bana Tıkla</button>
    </div>
</body>
</html>

Önizleme

Canlı Önizleme

Buna da ihtiyacınız olabilir

HTML'den JSON'a

HTML yapısını JSON ağacına dönüştürün.

Aracı aç

HTML Küçültücü/Biçimlendirici

HTML metnini 2/4 boşluk girintisiyle küçültün veya biçimlendirin.

Aracı aç

Markdown Görüntüleyici

Canlı görselleştirme ile Markdown'ı önizleyin ve düzenleyin.

Aracı aç

Cevrimici XML Goruntuleyici

XML dosyalarini agac gorunumu ve dogrulama ile cevrimici acin, goruntuleyin ve bicimlendirin.

Aracı aç

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

HTML kodunuzu düzenleyici bölmesine yazın veya yapıştırın.

Önizleme bölmesi, oluşturulan sonucu göstermek için otomatik olarak güncellenecektir.

Kopyalamak, Temizlemek veya Tam Ekrana Geçmek için araç çubuğu düğmelerini kullanın.

Temel Özellikler

Gerçek Zamanlı Önizleme

Yazarken HTML kodunuzun nasıl oluşturulduğunu anında görün.

Önce Gizlilik

Kodunuz asla tarayıcınızdan çıkmaz. Tüm işlemler yerel olarak yapılır.

Duyarlı Tasarım

Daha iyi bir düzenleme deneyimi için bölünmüş görünümü kullanın veya tam ekrana geçin.

Sıkça Sorulan Sorular

Bir HTML dosyasını çevrimiçi nasıl açıp önizleyebilirim?

HTML kodunu yapıştırın veya dosya yükleyin; işlenen önizleme anında güncellenir. Bu, hızlı HTML kontrolünü ve hata ayıklamayı kolaylaştırır.

Bu HTML görüntüleyicide harici CSS ve JavaScript test edebilir miyim?

Evet. Tarayıcı güvenlik politikalarınız izin verirse standart dış kaynaklar önizlemede yüklenebilir.