HTML, CSS ve JavaScript Playground

Nasıl kullanılır

1. Yukarıdaki düğmelerle HTML, CSS ve JavaScript editörleri arasında geçiş yapıp kodunuzu yazın.
2. Siz yazmayı duraklattığınızda önizleme otomatik güncellenir; bunu kapatıp Çalıştır’a tıklayabilirsiniz.
3. Çıktı ve hatalar için konsolu kontrol edin, ardından sayfanızı kaydetmek için HTML indir’e tıklayın.

Seçeneklerin açıklaması

Korumalı alan

Önizleme, bu sitenin çerezlerini veya depolamasını okuyamayan ve iletişim kutuları açamayan yalıtılmış bir korumalı alanda çalışır.

Konsol

console.log, warn ve error çıktılarının yanı sıra satır numaralı yakalanmamış hataları gösterir ve en son 200 girdiyi tutar.

İndirme

Üç bölümü tek HTML dosyasında birleştirir; stiller style etiketinde, betik body’nin sonunda yer alır.

Sayfa nasıl bir araya getirilir

Üç düzenleyici, bu sırayla tek bir belgede birleştirilir. HTML indir’e tıkladığınızda da aynı düzeni elde edersiniz; yalnızca konsol çıktısını önizlemenin altındaki sayfaya gönderen küçük betik indirmeye dahil edilmez.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* your CSS */
</style>
</head>
<body>
<!-- your HTML -->
<script>
// your JavaScript
</script>
</body>
</html>

Betik HTML’inizden sonra geldiği için sayfanın yüklenmesini beklemeden doğrudan document.getElementById kullanabilirsiniz. HTML düzenleyicisine html, head veya body etiketlerinin kendisini değil, yalnızca gövdeye ait olanı yazarsınız. Önizleme yalnızca betik çalıştırma izni olan bir iframe’dir; uyarı (alert) pencerelerinin ve bu sitenin çerezlerine erişimin engellenmesinin nedeni budur.

Sıkça sorulan sorular

Gizlilik

Bu araç tamamen tarayıcınızda çalışır. Dosyalarınız ve metinleriniz cihazınızda işlenir, sunucularımıza asla yüklenmez.