HTML biçimlendirme ve küçültme
Online HTML biçimlendirici ve küçültücü — küçültülmüş bir paketi yapıştırıp girintili okuyun ya da yayına almadan önce bir e-posta şablonunun boyutunu düşürün. Otomatik algılama modu doğru yönü kendisi seçer (tek satırlık sıkışık girdi → girintili çıktı, girintili girdi → tek satırlık çıktı); isterseniz elle de seçebilirsiniz. Girintiyi 2 boşluk, 4 boşluk ya da sekme olarak ayarlayın. Boş öğeler (br, hr, img, input, meta, link) XHTML tarzında kendiliğinden kapatılabilir veya HTML5 tarzında açık bırakılabilir. <pre>, <script> ve <style> içeriği olduğu gibi korunur; bu blokları bozan biçimlendiriciler her blogdaki renklendirilmiş kod örneklerinin sözdizimini bozar. Yorumlar her iki yönde de isteğe bağlı olarak silinebilir.
Nasıl kullanılır
4 adımYön varsayılan olarak otomatik algılanır.
Çoğu ön yüz stil kılavuzunda standart olan 2 boşluktur.
Güzelleştirilmiş ya da küçültülmüş sürüm sağ tarafta görünür.
Tek tıkla panoya kopyalayın ya da .html olarak kaydedin.
HTML kodunu tarayıcıda güzelleştirin ya da küçültün — <pre>, <script>, <style> içeriği olduğu gibi kalır
Neler yapabilirsiniz
Tipik kullanımlar
- Kopyalanıp yapıştırılmış küçültülmüş bir HTML dosyasını yapısını incelemek için güzelleştirin.
- Yayına almadan önce bir HTML e-posta şablonunu küçültün — her gönderimde boyuttan tasarruf sağlar.
- XML kurallarına sıkı bir akış için HTML5 boş öğelerini XHTML tarzı kendiliğinden kapanan biçime dönüştürün.
- Üretim HTML derlemesinden geliştirici yorumlarını silin.
- Elle düzenlenmiş bir şablonun girintisini ekip kurallarına göre yeniden düzenleyin.
Neden bu araç
Tarayıcı tabanlı pek çok biçimlendirici <pre> veya <script> içeriğini bozar — bir kod parçasını bunlardan geçirirseniz girintiniz mahvolur. Bu araç ham metin öğelerini (script, style, pre, textarea) tanır ve içeriklerine bayt bayt dokunmaz. Geri kalan her şey blok blok temiz girinti alır. Kayıt gerekmez, dosya başına kota yoktur.
Sık sorulan sorular
“Boş öğe” (void element) nedir?
Kapanış etiketi ve içeriği olmayan HTML öğesi — br, hr, img, input, meta, link, source, track, area, base, col, embed, param, wbr. HTML5’te bunlar <br> (tercih edilen) veya <br /> (eski XHTML) biçiminde yazılabilir. Linter’ınız hangisini bekliyorsa onu seçin.
<script> veya <style> içindeki içeriği değiştirir mi?
Hayır. <script>, <style>, <pre> ve <textarea> içindeki her şey bayt bayt korunur. Bu etiketlerin çevresindeki boşluk işleme, HTML5 ham metin öğesi kurallarına uyar.
Küçültülmüş çıktımda neden hâlâ boşluklar var?
Küçültme etiketler arasındaki boşlukları birleştirir, ancak anlam taşıdığı yerlerde (<span> veya <a> gibi satır içi öğeler arasında) en az bir boşluğu korur — bu boşlukları silmek sayfanın görünümünü değiştirir. Daha agresif boşluk temizliği için ödünleşimi ayarlayabileceğiniz derleme aşamasında çalışan bir küçültücü (html-minifier-terser, htmlnano) kullanın.
Kapatılmamış etiketleri düzeltir mi?
Hayır — araç yalnızca bir biçimlendiricidir. Kapatılmamış <div> etiketleriniz varsa çıktı bu (bozuk) yapıyı yansıtır. Yapısal denetim için W3C Nu Validator gibi bir doğrulayıcı kullanın.
@{{ ... }} veya {% %} gibi şablon sözdizimini işler mi?
Şablon belirteçlerinin çoğunu olduğu gibi bırakmaya çalışır, ancak Blade ({{ }}), Twig ({% %}), Vue ({{ }}) vb. yine de tuhaf boşluklarla çıkabilir. Yoğun enterpolasyon içeren şablonlarda işlenmiş HTML’yi biçimlendirin ya da şablon farkındalığı olan bir araç kullanın.
Bu konudaki uzmanlar
Konuyu bir uzmanla birlikte çalış — online ders veya danışmanlık, saatler senin saat diliminde gösterilir.
Elbette yapabiliriz! Fikrinizle birlikte kısa bir mesaj gönderin. Ayrıntılı konuşmak istiyorsanız e-posta adresinizi bırakın, size geri döneceğiz. Anonim kalabilirsiniz.