Görsel HTML Editör

Çoğu HTML editörü sizi bir seçime zorlar: ya markup'ı zaten bildiğinizi varsayan ham bir kod editörü, ya da sizi kendi bileşenlerine ve dışa aktarma formatına kilitleyen ağır bir sayfa oluşturucu. Bu görsel HTML editör bilinçli olarak ikisinin ortasında durur. Elinizdeki mevcut bir HTML belgesini — bir açılış sayfası, bir e-posta şablonu, dışa aktarılmış bir rapor, kaydedilmiş bir web sayfası — getirir ve tıpkı bir sunumdaki slaytı düzenler gibi, doğrudan ekrandaki sonucun üzerinde düzenlersiniz. Kurulacak bir şey yok, üye olunacak bir yer yok; ve bu yükleme yapmayan, tarayıcı tabanlı bir HTML editör olduğundan üzerinde çalıştığınız dosya asla cihazınızdan çıkmaz.

Akış üç mod etrafında kurgulanmıştır; böylece tek bir tıklama asla istemediğiniz bir şeyi yapmaz. Gezin modunda önizleme normal, tamamen etkileşimli bir web sayfası gibi davranır: bağlantılar çalışır, düğmeler tepki verir, akordeonlar açılır. Bir şeyi değiştirmeden önce belgeyi okumak ve dolaşmak için güvenli varsayılan budur. Metni düzenle modunda tüm belge düzenlenebilir hâle gelir — herhangi bir başlığa, paragrafa, liste öğesine veya düğme metnine tıklayıp yazmaya başlarsınız. Arka planda bu, tarayıcının yerel contentEditable ve designMode özelliklerini kullanır; böylece girdiğiniz metin, içinde bulunduğu öğenin yazı tipini, rengini ve boşluğunu birebir devralır. Bir kopyayı değil, gerçek öğeyi düzenlersiniz — dışa aktardığınız an sonucun orijinaliyle aynı görünmesinin nedeni tam olarak budur.

Yapı modu, görsel HTML editörün adını hak ettiği yerdir. Önizlemenin üzerinde gezindiğinizde her blok çerçevelenir; seçmek için tıklarsınız. Araç çubuğu ardından o bloğu çoğaltmanıza, kardeşleri arasında yukarı ya da aşağı taşımanıza veya silmenize izin verir. İnsanların en çok başvurduğu özellik çoğaltmadır: bir fiyat kartını, bir özellik kutusunu ya da bir referansı seçip Çoğalt'a basarsınız ve hemen ardından — her sınıfı, her inline stili, her iç içe alt öğesiyle — birebir bir kopya belirir. Klon orijinalin stilini taşıdığından, elle yeni bir blok üretmeniz veya CSS'i tahmin etmeniz hiç gerekmez; zaten doğru görünen bir şeyi kopyalar, sonra kopyanın metnini Düzenle modunda değiştirirsiniz. HTML bloklarını tek satır kod yazmadan yeniden dizip boyutlandırmak işte böyle olur.

Boyutlandırma da aynı seç-sonra-ayarla ritmiyle yapılır. Bir blok seçiliyken onu görsel olarak büyütebilir veya küçültebilirsiniz — bu, o öğenin hem metnini hem düzenini orantılı ölçekleyen CSS zoom özelliğini kullanır; yani bir kart ve içindeki her şey bir bütün olarak büyür ya da küçülür. Ayrıca bir öğeyi yüzde onluk adımlarla genişletip daraltabilirsiniz ve seçili blok bir CSS grid içinde yer alıyorsa tek bir Tam satır düğmesiyle tüm satırı kaplamasını sağlarsınız. Bir Sıfırla kontrolü, mevcut öğedeki tüm boyut değişikliklerini temizler. Editörün kendi hover ve seçim çerçevelerinin aksine, bu boyut değişiklikleri sizin isteyerek yaptığınız düzenlemeler olduğundan dışa aktarılan dosyada silinmeden korunur.

Dışa aktarma, gerçek bir editörü oyuncaktan ayıran adımdır. Sonucu indirdiğinizde araç önce çalışırken enjekte ettiği her şeyi temizler: hover ve seçim çerçevelerini çizen geçici stylesheet, seçili öğelerdeki işaret sınıfları, contentEditable bayrakları ve designMode'un kendisi kaldırılır. Diske yazılan şey, gördüğünüz belgedir — canlı DOM'dan serileştirilmiş ve başında doğru bir doctype olan bağımsız bir .html dosyası; herhangi bir tarayıcıda açabilir, bir depoya işleyebilir, bir e-postaya ekleyebilir veya bir geliştiriciye verebilirsiniz. Ayrıca dilediğiniz an canlı düzenlemelerinizi kaynak kutusuna geri gönderip ham markup üzerinde elle çalışmaya devam edebilirsiniz.

Hızlı, tek seferlik değişiklikler için üyeliksiz bir WYSIWYG HTML editörü alternatiflere tercih etmenin sağlam nedenleri vardır. Dışa aktarılmış bir faturada üç kelimeyi değiştirmek için koca bir IDE açmak abartıdır. Gizli markup'ı — müşteri verisi, dahili URL'ler ya da yayımlanmamış metin içeren bir sayfayı — sunucuya yükleyen çevrimiçi bir güzelleştiriciye yapıştırmak çoğu zaman şirket politikasına aykırıdır. Bir sayfa oluşturucu ise her şeyi kendi şablon motorundan yeniden dışa aktarır ve başladığınız temiz HTML'i nadiren geri verir. Bu editör orijinal markup'ı olduğu gibi korur, yalnızca dokunduğunuz yeri değiştirir ve dosyayı, düzenlemeleriniz dışında, geldiği hâle neredeyse birebir yakın biçimde geri verir.

Birkaç pratik not deneyimi kolaylaştırır. Belgeyi önce editöre yükleyin (örnekten, yüklediğiniz bir .html dosyasından ya da kaynak kutusuna yapıştırıp Yükle'ye basarak), sonra bir mod seçin. Metni düzenle ve Yapı bilinçli olarak ayrıdır: metin düzenleme ile blok seçimi aynı tıklama üzerinde çekişebilir, bu yüzden mod değiştirmek her etkileşimi öngörülebilir tutar. Bir bloğu çoğalttığınızda kopya hemen orijinalin ardına düşer ve yeni seçim olur; böylece onu hemen taşıyabilir veya metnini düzenleyebilirsiniz. Fazla küçük bir şey seçtiyseniz — bir kartın içindeki tek bir kelime gibi — Üst öğe düğmesiyle kartın kendisine çıkın. Ayrıca gövde ve belge kökü, tüm sayfayı kazara silmemeniz için bilerek korunur.

Gizlilik, araç setinin geri kalanıyla aynı modeldedir: her şey yerel olarak tarayıcınızda çalışır. Yüklediğiniz HTML kendi cihazınızda ayrıştırılır, işlenir, düzenlenir ve yeniden serileştirilir; çalışırken network sekmesini izleyerek hiçbir dışa giden istek olmadığını doğrulayabilirsiniz. Bu, kod yazmadan HTML düzenleme akışını tam olarak sunucu tabanlı araçların masada olmadığı durumlar için güvenli kılar — hassas şablonlar, yayın öncesi sayfalar ve bir veri işleme politikası kapsamındaki her şey. Sunucunun dayattığı bir boyut sınırı da yoktur; tek tavan, gerçek dünyadaki belgelerin ezici çoğunluğunu oluşturan açılış sayfalarını, e-posta şablonlarını ve raporları rahatça kaldıran tarayıcınızın belleğidir.

Editör, geliştirici araç setinin geri kalanıyla doğal biçimde eşleşir. Dışa aktardığınız markup dağınıksa güzelleştirmek veya sıkıştırmak için HTML Formatter aracından geçirin. Dokümantasyon ile markup arasında geçiş yaparken Markdown ↔ HTML Dönüştürücü düzenlenmiş HTML'i Markdown'a ve geri çevirir. Bir sayfayı yayınlamadan önce Open Graph & Twitter Kart Önizleme head meta verinizin sosyal platformlarda doğru göründüğünü denetler ve Schema.org JSON-LD Oluşturucu yapılandırılmış veri eklemenize yardımcı olur. Birlikte, bir sayfayı görsel olarak düzenlemekten biçimlendirmeye, önizlemeye ve yayınlamaya kadar tüm döngüyü kapsarlar.