Kısa cevap
Temiz HTML, etiketlerin içeriğin ne olduğunu anlattığı (başlık, paragraf, liste, tablo, link), Word'de nasıl göründüğü hakkında hiçbir şey söylemediği HTML'dir. Yazı tipi adı, punto, renk, MsoNormal gibi sınıf adları ya da boş span'ler yoktur. Böyle bir HTML sitenin stil dosyasına uyum sağlar ve sonradan kolay düzenlenir.
Word bunu kendi başına üretemez, çünkü dışa aktarımı sayfanın birebir görünümünü kopyalamaya çalışır. Yapıya dayalı bir dönüştürücü belgeyi tersinden okur: her paragrafın hangi stili kullandığına bakar ve onu bir etikete eşler. Aşağıdaki dönüştürücüye bir .docx bırak, Dönüştür'ü HTML'de bırak, kodun yanındaki önizlemeye bak, sonra Kopyala ya da İndir'e bas.
Burada dene: Word'den HTML'e
Aracın tam sayfasını açWord'ün kendi HTML'i neden bu kadar karışık?
Word, Web Sayfası ve Web Sayfası, Filtrelenmiş olarak kaydetme seçenekleri sunar. İkisi de HTML'i basılı sayfaya benzetmeye çalışır, bu yüzden her görsel ayrıntıyı koda yazar. Kısa tek bir paragraf; bir sınıf, yazı tipi, boyut ve aralıkları sayan bir style özniteliği ve her biçim değişikliği için iç içe span'lerle birkaç satırlık koda dönüşebilir.
Word'den kopyalayıp bir içerik yönetim sistemine yapıştırmak da pano üzerinden benzer bir şey yapar: düzenleyici Word'ün HTML'ini alır ve bu stillerin bir kısmını ya da hepsini korur. Sonuç; sitenin geri kalanına uymayan metin, paragraftan paragrafa değişen yazı tipleri ve görünmez biçimlendirme sürekli geri geldiği için düzenlemesi zor sayfalardır.
| Yöntem | Başlık ve listeler | Satır içi stil ve Office kodu | Görseller |
|---|---|---|---|
| Web Sayfası olarak kaydet | Kalır, stilli paragraf olarak | Çok fazla, üstüne Office'e özel etiketler | Ayrı klasör |
| Web Sayfası, Filtrelenmiş | Kalır, stilli paragraf olarak | Daha az, ama sınıflar ve satır içi CSS kalır | Ayrı klasör |
| CMS'e kopyala yapıştır | Düzenleyiciye bağlı | Çoğu zaman kalır | Çoğu zaman kaybolur ya da bilgisayardaki dosyaya bağlanır |
| Google Dokümanlar, Web sayfası olarak indir | Kalır | Üretilmiş sınıf adları ve bir stil bloğu | ZIP içinde ayrı klasör |
| Bu sayfadaki dönüştürücü | Gerçek h1-h6, ul, ol | Yok | Gömülü ya da hariç |
Neler kalır, neler gider?
Dönüştürücü anlam taşıyan her şeyi korur, sadece görünüşü belirleyen her şeyi dışarıda bırakır:
- Kalanlar: Word'ün Başlık 1 ile Başlık 6 arası stillerinden gelen başlıklar, Konu Başlığı (h1) ve Alt Konu Başlığı (h2) stilleri, paragraflar, kalın ve italik (strong ve em), iç içe seviyeleriyle madde işaretli ve numaralı listeler, tablolar, linkler, dipnotlar, Alıntı stilindeki alıntılar ve görseller.
- Gidenler: yazı tipleri, punto, renkler, vurgulama, hizalama, satır aralığı, sayfa kenar boşlukları, üst ve alt bilgiler ve Word açıklamaları.
- Görseller: Görselleri ekle işaretliyken HTML'e data URI olarak gömülür, kod tek başına çalışır. Görselleri CMS'ine ayrıca yükleyeceksen işareti kaldır, kod hafifler.
- Tam HTML sayfası: işaretlersen doctype, karakter seti ve başlığıyla tarayıcıda tek başına açılan eksiksiz bir dosya alırsın. İçeriği var olan bir sayfaya yapıştıracaksan kapalı bırak.
En temiz sonuç için belgeyi hazırla
Çıktı ancak belge kadar düzenli olabilir. En sık sürpriz, kalın normal paragraf olarak çıkan bir başlıktır. Bu, metin başlık stili yerine elle büyütülüp kalın yapıldığında olur; Word'de başlık gibi görünür ama dosyada normal paragraf yazar.
- Word'ün yerleşik stillerini kullan: satırı seç ve Giriş sekmesindeki Stiller galerisinden Başlık 1, Başlık 2 gibi stilleri seç.
- Gerçek liste kullan. Elle yazılmış tire ya da numarayla başlayan satırlar liste öğesi değil paragraf olur; Madde İşaretleri ve Numaralandırma düğmelerini kullan.
- Boşluk için boş paragraf kullanma. Boş satırda her Enter boş bir paragraf olur.
- Tabloları sade tut: tek başlık satırı, mümkünse birleştirilmiş hücre yok, sadece yerleşim için kullanılan tablo yok.
- HTML karşılığı olmayan özel stiller normal paragraf olarak aktarılır; dönüştürücü bunu sonucun altında kısa bir notla söyler.
HTML'i WordPress, Shopify ve diğer düzenleyicilere yapıştırmak
Çoğu düzenleyicinin bir kod ya da HTML görünümü vardır. Yapıştırmadan önce ona geç; HTML'i görsel görünüme yapıştırırsan düzenleyici etiketleri metin olarak gösterir. WordPress blok düzenleyicide Özel HTML bloğu ekle ya da blok menüsünden HTML olarak düzenle'yi seç. Klasik düzenleyicide ve Shopify ürün açıklamasında Metin ya da HTML'i göster düğmesini kullan. Ticimax, İdeasoft gibi altyapıların ürün açıklama alanlarında da genelde bir kaynak kodu düğmesi bulunur.
Kodda satır içi stil olmadığı için metin hemen temanın yazı tipini, boyutunu ve renklerini kullanır. Bir başlık seviyesi tasarımın için fazla büyük görünüyorsa stil eklemek yerine etiketi değiştir (örneğin h2 yerine h3); böylece sayfa yapısı arama motorları ve ekran okuyucular için doğru kalır.
E-posta şablonlarında temiz HTML iyi bir başlangıçtır, ama birçok e-posta programı tutarlı görünüm için satır içi stil ister. Bunları Word'de değil e-posta aracında ekle.
Sık sorunlar
- Dosya .docx değil .doc: dönüştürücü sadece .docx okur. Dosyayı Word'de ya da LibreOffice'te açıp .docx olarak kaydet ve tekrar dene.
- Başlıklar yok: elle biçimlendirilmişler. Word'de başlık stillerini uygula ve tekrar dönüştür.
- HTML çok büyük: büyük kısmını gömülü görseller oluşturur; data URI, görsel dosyasından yaklaşık üçte bir daha büyüktür. Görselleri ekle işaretini kaldır ve görselleri ayrıca yükle.
- Metin kutuları, şekiller ve SmartArt eksik ya da yanlış sırada: bunlar akıştaki metin değil çizim nesneleridir. Önemli metni dönüştürmeden önce normal paragraflara taşı.
- Yapıştırdıktan sonra Türkçe karakterler bozuk: HTML'i UTF-8 olarak kaydet ya da sun. Tam HTML sayfası seçeneği UTF-8 tanımını zaten içerir.
Gizlilik ve güvenlik
Sözleşme, teklif ve şirket içi belgeler bilinmeyen dönüştürücülere yüklenmemeli. Burada .docx tarayıcında açılır ve dönüştürülür, belge cihazından hiç çıkmaz. Sayfayı bir kez açtıktan sonra internetsiz de çalışır.
Çıkan HTML izin verilen etiketler listesinden geçirilir; belge içeriyor olsa bile script, olay öznitelikleri ve javascript: linkleri sonuca asla giremez.