HTML, CSS ve JavaScript yazın ve yazarken canlı, korumalı alanda önizleme görün. Duyarlı cihaz genişlikleri, Monako sözdizimi vurgulama, Daha güzel biçimlendirme, yerel otomatik kaydetme ve HTML, yazdırma veya PDF dışa aktarma. Ücretsiz, kayıt yok.
Canlı önizlemeli bu çevrimiçi HTML düzenleyici, siz yazmayı bıraktıktan yaklaşık 300 ms sonra kodun yanında HTML, CSS ve JavaScript'inizi oluşturur. Masaüstü, tablet (768px) ve mobil (375px) genişliklerindeki düzeni kontrol edin, Prettier ile işaretlemeyi düzenleyin ve .html veya PDF'ye aktarın. Kodunuz yalnızca bu tarayıcıda otomatik olarak kaydedilir ve hiçbir zaman yüklenmez.
Bu canlı HTML düzenleyici, siz yazarken kodun yanında işaretlemenizi de işler; böylece bir proje oluşturmadan düzenleri prototipleyebilir, parçacıkları test edebilir ve denemeler yaparak öğrenebilirsiniz. Sözdizimi vurgulama ve otomatik tamamlama için Monaco'yu (VS Code'un arkasındaki editör motoru) kullanır ve hiçbir kayıt olmadan tamamen tarayıcınızda çalışır.
Özellikler
Bölme, Kodlama ve Önizleme modlarıyla gerçek zamanlı korumalı alan önizlemesi
Bu tarayıcının yerel depolama alanına otomatik olarak kaydedilir, hiçbir zaman yüklenmez
.html olarak dışa aktarın, PDF olarak yazdırın/kaydedin veya hızlı çok sayfalı PDF
Canlı HTML Düzenleyici nasıl kullanılır?
1
HTML'nizi yapıştırın veya yazın
Tam bir belge veya bir parça yazın. CSS'yi bir <style> etiketine ve JavaScript'i bir <script> etiketine yerleştirin veya bunları https üzerinden bir CDN'den yükleyin.
2
Canlı önizlemeyi izleyin
Önizleme bölmesi siz yazmayı bıraktıktan yaklaşık 300 ms sonra yeniden oluşturulur. Çalışma alanını düzenlemek için Bölme, Kod veya Önizleme görünümünü kullanın.
3
Duyarlı genişlikleri kontrol edin
Düzenin nasıl yeniden aktığını görmek için masaüstü (tam genişlik), tablet (768 piksel) ve mobil (375 piksel) arasında geçiş yapın.
4
İşaretlemeyi güzelleştirin
Belgeyi Daha Güzel (2 boşluklu girinti, 100 karakterlik satırlar) ile yeniden girintilemek için Güzelleştir'i tıklayın.
5
Çalışmanızı dışa aktarın
Tam kodu .html olarak indirin, seçilebilir çok sayfalı metin için Yazdır → PDF Olarak Kaydet'i kullanın veya hızlı bir görüntü yakalamak için PDF'ye tıklayın.
Yaygın kullanım durumları
Yeni başlayan biri bir HTML etiketi yazar ve ne yaptığını hemen görür.
Bir geliştirici, bozuk bir parçacığı izole eder ve projeyi başlatmadan hata ayıklamasını yapar.
Bir pazarlamacı, incelemeye göndermeden önce bir HTML e-postasını veya açılış sayfası bloğunu 375 piksel çözünürlükte önizler.
Bir öğretmen sınıfta kodu ve işlenmiş çıktıyı yan yana gösteriyor.
Serbest çalışan bir bileşenin modelini oluşturur ve müşteriye bir .html dosyası veya PDF gönderir.
Ayrıntılı kılavuz
HTML kodunu çevrimiçi olarak test etme
Kodunuzu düzenleyiciye yapıştırın ve önizleme, Çalıştır düğmesine basmanıza gerek kalmadan otomatik olarak güncellenir. <!DOCTYPE html>, <head> ve <body> ile tam bir belgeyi veya birkaç stil içeren <div> gibi bir parçayı yapıştırabilirsiniz; tarayıcı eksik yapıyı doldurur. Sonucu tam boyutta görmek için Önizleme görünümüne veya yazmak için yer istediğinizde Kod görünümüne geçin. Bir şey doğru görünmüyorsa, önce Güzelleştir'i tıklayın: temiz girinti, kapatılmamış bir etiketi veya yanlış yerleştirilmiş bir </div> etiketinin fark edilmesini çok daha kolaylaştırır.
HTML, CSS ve JavaScript'i birlikte yazın
Düzenleyici tek bir HTML belgesi üzerinde çalışır, dolayısıyla CSS ve JavaScript bunun içine girer. <head> içindeki bir <style> bloğuna veya satır içi stil nitelikleri olarak stiller ekleyin ve davranışı <body> bloğunun sonundaki bir <script> bloğuna veya onclick gibi olay nitelikleri olarak ekleyin. Ayrıca bir https URL'sini işaret eden normal bir <link> veya <script src> etiketiyle Google Font, Tailwind's Play CDN veya grafik kitaplığı gibi bir CDN'den bir kitaplık veya çerçeve de yükleyebilirsiniz. Önizleme, komut dosyalarınızı gerçek bir tarayıcı motorunda çalıştırır; böylece DOM olayları, zamanlayıcılar, tuval ve CORS özellikli API'lere yapılan getirme çağrılarının tümü, canlı bir sayfada olduğu gibi davranır.
Duyarlı düzenleri telefon ve tablet genişliklerinde test edin
Genişliğini sınırlamak için önizlemenin üzerindeki cihaz düğmelerini kullanın. Medya sorgularının önizleme genişliğine telefondakiyle aynı şekilde yanıt vermesi için <meta name="viewport" content="width=device-width, startup-scale=1"> öğesini <head>'inize ekleyin.
Ön ayar
Önizleme genişliği
Ne kontrol edilmeli
Masaüstü
Tam bölme genişliği
Maksimum genişlikte kaplar, çok sütunlu ızgaralar, fareyle üzerine gelme durumları
Tablet
768px
Ortak md kesme noktası: gezinmenin çökmesi, 2 sütunlu düzenler
Mobil
375px
Metin kaydırma, hedef boyutuna dokunma, taşan resimler, yatay kaydırma
Canlı önizlemenin yapabilecekleri ve yapamayacakları
Önizleme, kodunuzdan yüklenen korumalı alana alınmış bir çerçevedir. Güvenlik açısından şeffaf olmayan bir kökene sahiptir: komut dosyalarınız bu sitenin çerezlerini veya depolama alanını okuyamaz ve bu site de sayfanızı okuyamaz. Bu tasarım, aşağıda listelenen birkaç öngörülebilir sınıra yol açar; böylece kodunuz yerine düzenleyicide hata ayıklamakla zaman kaybetmezsiniz.
Eserler
Çalışmıyor (ve neden)
Satır içi <stil>, stil nitelikleri ve <script>
src="img/logo.png" gibi göreceli yollar: sunucuda bunların çözümleneceği bir klasör yoktur. Tam https URL'lerini veya veri URI'lerini kullanın
https üzerinden CDN'den CSS ve JS
betiğinizin içindeki localStorage, sessionStorage ve çerezler: sanal alan bunları engeller (bir SecurityError atarlar)
uyarı(), onayla(), formlar ve bağlantılar yeni bir sekmede açılıyor
CORS başlıklarını göndermeyen API'lere fetch() : tarayıcı, tıpkı gerçek bir sitede olduğu gibi yanıtı engeller
Herkese açık URL'lerdeki resimler ve yazı tipleri
Birden fazla dosya, npm içe aktarma veya oluşturma adımları: bu bir proje IDE'si değil, tek belgeli bir düzenleyicidir
Prettify, tarayıcınızda Prettier'in HTML biçimlendiricisini çalıştırır. İç içe geçmiş etiketleri 2 boşlukla yeniden girintiler, uzun satırları 100 karakter olacak şekilde sarar ve etiket çok genişlediğinde nitelikleri kendi satırlarına yerleştirir. HTML yapısına göre ayarlanmıştır, bu nedenle <style> ve <script> bloklarının içerikleri büyük oranda sizin onları yazdığınız şekilde kalır. Sayfanızın nasıl oluşturulduğunu değiştirmez. İşaretlemede Prettier'in ayrıştıramadığı bir sözdizimi hatası varsa bir mesaj görürsünüz ve kodunuz tam olarak olduğu gibi kalır.
HTML veya PDF'ye aktar
Her biri farklı bir işe uygun üç dışa aktarma seçeneği vardır. .html indirmesi, düzenleyicideki bayt bayt koddur; bir tarayıcıda açılmaya veya bir projeye bırakılmaya hazırdır. Yazdır, oluşturulan önizlemeyi tarayıcınızın yazdırma iletişim kutusuna gönderir: seçilebilir metin, çalışan çok sayfalı aralar ve JavaScript'inizin çizdiği her şeyi almak için PDF Olarak Kaydet'i seçin. PDF düğmesi, statik HTML ve CSS'yi görüntü olarak yakalayan, onu A4 sayfalara bölen ve indiren tek tıklamalı bir kısayoldur. Bu bir resim olduğu için metni seçilemez ve JavaScript tarafından oluşturulan içerik görünmez. Hızlı PDF başarısız olursa bunun genel nedeni CORS üstbilgileri olmayan harici bir görüntüdür; bunun yerine Yazdır'ı kullanın.
HTML e-posta şablonlarını önizleyin
E-posta istemcileri, tarayıcılara göre çok daha az HTML ve CSS'yi destekler, bu nedenle e-posta şablonları eski kuralları takip eder: tablo tabanlı bir düzen, yaklaşık 600 piksel genişliğinde bir içerik sütunu, <style> blokları yerine satır içi stil nitelikleri ve sabit genişlik niteliklerine sahip görüntüler. Burada bu şekilde oluşturun ve e-postanın telefonda nasıl yığıldığını kontrol etmek için 375 piksel ön ayarına geçin. Önizleme, modern bir tarayıcının e-postanızı nasıl işlediğini gösterir; bu iyi bir ilk kontroldür. Bazı istemciler, özellikle de Windows'ta Outlook bunu farklı şekilde oluşturacaktır; bu nedenle, bir kampanya yayınlanmadan önce her zaman gerçek gelen kutularına bir test gönderin.
Yapıştırılacak başlangıç parçacıkları
Yazabileceğiniz ve uyarlayabileceğiniz kısa desenler. Her biri yalnızca birkaç satıra ihtiyaç duyar ve sonucunu anında önizlemede gösterir.
Yazdığınız hiçbir şey bir sunucuya gönderilmez. Ziyaretler arasında çalışmanızı sürdürmek için düzenleyici, kodunuzu bu tarayıcının bu cihazdaki yerel depolama alanına otomatik olarak kaydeder; böylece yenilemeden sonra hâlâ orada kalır ancak diğer cihazlarla veya diğer tarayıcılarla senkronize edilmez. Sıfırla'ya tıklamak, kodunuzu örnek belgeyle değiştirir. Tarayıcı ayarlarınızda bu sitenin verilerini temizlediğinizde kaydedilen kopya silinir. Paylaşılan bir bilgisayarda ayrılmadan önce Sıfırla'ya basın.
Bunun yerine tam kodlu bir oyun alanı ne zaman kullanılmalı?
Bu düzenleyici hızlı, özel, tek dosyalı çalışmalar için tasarlanmıştır: herhangi bir hesap gerekmeden bir pasajı test etmek, HTML öğrenmek, telefon genişliğinde bir düzeni kontrol etmek veya bir e-posta bloğunun önizlemesini yapmak. Birkaç dosyaya, npm paketine, bir çerçeve oluşturma adımına, paylaşılabilir bir bağlantıya veya gerçek zamanlı işbirliğine ihtiyacınız varsa CodePen, JSFiddle veya PlayCode gibi tam bir oyun alanı daha uygun olacaktır. Birçok geliştirici her ikisini de kullanır: bunun gibi kontroller için hızlı bir karalama defteri ve paylaşmak istedikleri projeler için tam bir oyun alanı.
HTML kodunu çevrimiçi olarak ücretsiz olarak nasıl test edebilirim?
HTML'nizi düzenleyiciye yazın veya yapıştırın. Önizleme, yazmayı bıraktıktan yaklaşık 300 ms sonra yeniden oluşturulur ve gerçek bir tarayıcının kodunuzu nasıl görüntülediğini gösterir. Çalıştır düğmesi yok, yükleme yok ve kaydolma yok.
HTML düzenleyicisine CSS ve JavaScript ekleyebilir miyim?
Evet. CSS'yi bir <style> bloğuna veya stil niteliklerine, JavaScript'i ise bir <script> bloğuna veya onclick gibi olay niteliklerine yerleştirin. Kitaplıkları ve yazı tiplerini https URL'si olan bir CDN'den de yükleyebilirsiniz. Tek belgeli bir düzenleyici olduğundan ayrı .css ve .js dosyaları desteklenmez.
HTML kodunu çevrimiçi olarak nasıl güzelleştiririm?
Dağınık veya küçültülmüş HTML'nizi yapıştırın ve Güzelleştir'i tıklayın. Prettier, iç içe geçmiş etiketleri 2 boşlukla yeniden girintiler ve sayfanın nasıl oluşturulduğunu değiştirmeden uzun satırları 100 karakterle kaydırır. HTML'de Prettier'in ayrıştıramadığı bir sözdizimi hatası varsa kodunuza dokunulmaz ve bir mesaj görürsünüz.
HTML kodumu PDF olarak dışa aktarabilir miyim?
Evet, iki yol. Yazdır → PDF olarak kaydet tarayıcınızın yazdırma motorunu kullanır; bu motor seçilebilir metin, çok sayfalı çıktı ve JavaScript'inizin oluşturduğu her şeyi sağlar. PDF düğmesi, A4 sayfalara bölünmüş olarak statik HTML ve CSS'nin tek tıklamayla hızlı bir şekilde yakalanmasını sağlar; metni seçilemez ve JavaScript çıktısı dahil edilmez.
HTML kodum herhangi bir yere kayıtlı mı?
Yalnızca kendi tarayıcınızda. Düzenleyici bu tarayıcının yerel depolama alanına otomatik olarak kaydeder, böylece çalışmanız yenilemeden sonra hayatta kalır, ancak sunucuya hiçbir şey yüklenmez ve diğer cihazlarla senkronize edilmez. Kaldırmak için Sıfırla'yı tıklayın veya bu sitenin verilerini temizleyin.
Resmim veya harici CSS dosyam neden önizlemede yüklenmiyor?
İmg/logo.png veya style.css gibi göreli yolların çözümlenecek bir klasörü yoktur, çünkü önizleme sunucudaki dosyalardan ziyade kodunuzdan oluşturulur. Tam bir https URL'si kullanın, CSS'yi bir <style> bloğuna yapıştırın veya küçük bir resmi veri URI'sine dönüştürün.
LocalStorage betiğimde neden hata veriyor?
Önizleme, opak bir kökene sahip korumalı alanlı bir çerçevede çalışır, dolayısıyla bu sitenin verilerine dokunamaz. Sonuç olarak, localStorage, sessionStorage ve çerezler orada kodunuz için kullanılamaz ve bir SecurityError hatası verir. Depolama mantığını yerel bir dosyada veya tam bir oyun alanında test edin.
Yeni başlayan biri olarak HTML öğrenmek için bu HTML düzenleyiciyi kullanabilir miyim?
Evet. Bir etiket yazın ve sonucu hemen görün. Temel yapıyla başlayın (<h1>, <p>, <a>, <img>), ardından bir <style> bloğu ekleyin ve renkleri ve düzeni deneyin. Bu anlık geri bildirim, bir dosyayı düzenlemekten ve bir tarayıcı sekmesini yenilemekten çok daha hızlıdır.
Duyarlı bir önizleme olarak çalışıyor mu?
Evet. Önizlemeyi masaüstü (tam genişlik), tablet (768 piksel) ve mobil (375 piksel) arasında değiştirin. Medya sorgularınızın gerçek bir telefondaki gibi yanıt vermesi için <head> dosyanıza bir görünüm meta etiketi ekleyin.
