How to write HTML code faster

Nov 19, 2025

Nasıl Yapılır

(Görüntü Kredi: Gelecek)

Modern web siteleri çok sayıda HTML kodu gerektirir. Birden fazla farklı görünüm ve devletlere sahip karmaşık düzenler sadece basit bir metin editörü ile oluşturmak zor olabilir. Neyse ki, çalışmak için orada bir ev sahibi HTML üretimi aracı var. İşte daha popüler araçlardan, emmet ve pug'dan ikisine hızlı bir şekilde bakıyoruz.

Ancak, HTML'nizi, bu güçlü zaman kazandıran araçların her ikisini de kullanmak için hala bilmeniz gerekir. Yani, dalıştan önce popüler anlamsal kullandığınızdan emin olun. Html etiketleri doğru yol. Ayrıca kullanmak için rehberimizi görün Html kazan plakası .

Kodu ezmek ister misin? Bunları dene Web Sitesi İnşaatçıları . Veya yol boyunca ekstra yardım için, bir ağ sağlayıcısı Teknik desteği ile servis.

Sinek üzerinde HTML oluşturun

Bir seferde büyük miktarda HTML yazarken, her etiketi elle yazarken çok sıkıcı olabilir. Örneğin, bir link listesi yazarken, emin olmamız gerekir. & l u ul & gt; ve & lt; a & gt; Etiketler hepsi açık ve doğru yerde kapatın. Aksi halde, bağlantılar işe yaramaz ve tüm sayfa düzeni tamamen haywire olacaktır.

Emmet Nasıl Kullanılır

Bunun olaylarını azalttığınızdan emin olmak için yeteneklerini kullanabilirsiniz. Emmet . Bu, size çok sayıda yazma tasarrufu sağlayacak ve HTML ve AMP'nizi büyük ölçüde geliştirecek bir araçtır; CSS iş akışı. EMMET, bir CSS benzeri bir seçici yazarak öğeler oluşturmanıza olanak sağlar. Daha sonra bu öğeyi normal HTML'ye ayrıştırır ve genişletecektir. Aşağıda, Emmet'te oluşturulan orijinal eleman.

nav>ul>li*3>a.chapter{Chapter $ of 3}

EMMET bu elemanı tespit edecek, ayrıştırır ve sonra elemanı aşağıda gösterildiği gibi standart HTML'ye dönüştürür. Emmet elementine hızlı bir görünüm olduğunu göstermektedir & l li & gt; ile çarpılır ( * 3 ) ve her biri & l li & gt; Örneğin, ardından uygun sayı (3'e kadar) takip edilecektir.

NotMMET elementinin kaç karakterin içerdiği ve standart HTML'nin içerdiği kaç karakter içerir. Bu küçük kod snippet bile, Emmet Shorthand'ı kullanarak ne kadar zamanın kaydedilebileceğini gösterir.

 & lt; nav & gt;
  & lt; ul & gt;
    & l li & gt; a href = "" sınıf = "bölüm" ve GT; Bölüm 1
 3; / a & gt; / li & gt;
    & l li & gt; a href = "" Class = "Bölüm" & GT; Bölüm 2
 3; / a & gt; / li & gt;
    & l li & gt; a href = "" Class = "Bölüm" & GT; Bölüm 3
 3; / a & gt; / li & gt;
  & lt; / ul & gt;
& lt; / nav & gt;

EMMET ayrıca bağlamın farkında. Örneğin, eğer düzenliyorsak & lt; tablo ve gt; muhtemelen biraz isteyeceğiz & lt; tr & gt; (Bunlar, doldurulması gereken satırlardır). Tek yapmamız gereken, kaç tane ihtiyacımız olduğunu belirtmek.

Bu, EMMET'in yapabileceklerinin hızlı bir örneğidir, ancak daha fazla yapılandırma seçeneği mevcuttur. Bunlar arasında CSS düzenleme, BEM (blok elemanı değiştirici) sınıf oluşturma ve hatta bir Lorem Ipsum jeneratörü var.

Ayrıca, çoğu kod editörünün, eklentiler aracılığıyla yerleşik bir EMMET'e sahip olduğundan veya desteklemeye değer. Bunun hakkında daha fazla şey öğrenebilirsiniz. Emmet belgeleri sayfa.

Dinamik içerik için pug kullanın

Emmet statik içerik için ideal olsa da, içeriğin daha dinamik olması gerekiyorsa ne olur? Örneğin, kişiselleştirilmiş ana sayfa, karmaşık sipariş tabloları veya genel html bloklarını tekrarlamak için gerekebilir. Bu, JavaScript'te mümkündür, ancak bu içeriği önceden işleyerek, kullanıcının tarayıcısına güvenmeden ek bir hız artışı elde edebiliriz. Unutmayın Medya-Ağır bir sayfanız varsa, güvenilir bir şekilde yedeklemek istersiniz. Bulut depolama .

Adım ilerleyin pug. Bu, HTML için bir şablonlama aracıdır. Sayfaları ".pug" biçiminde yazabilir ve pug bu dosyayı okuyacak, içine bazı dinamik veriler enjekte edecek ve standart HTML'yi döndürür. Aşağıdaki örnek, Pug'deki kodu, aynı HTML'yi EMMET örneği (yukarıda) oluşturmak için nasıl yazacağınızdır.

 ul
  Her val [1, 2, 3]
    li
      a (href = "", Sınıf = "bölüm") Bölüm
# {val} 3

Bir pug dosyası, yuvalamayı belirtmek için tek başına girintiyi kullanır.Bir geçişte büyük miktarda HTML üretmek için değerleri yineleyebilir.Bu ".pug" dosyaları bir proje boyunca birçok kez tekrar kullanılacak şekilde tasarlanmıştır.

PUG, paket yöneticisinden yüklenebilir npm .Ancak, pug ile nasıl başlayacağınız hakkında daha fazla bilgi istiyorsanız, İnternet sitesi .

Bu içerik başlangıçta Web Designer dergisinde ortaya çıktı.

Daha fazla oku:

En iyi 10 CSS Çerçeveleri
CSS animasyonu yeniden yaratmak için örnekler
8 HTML etiketleri kullanmanız gereken (ve önlemek için 5)

How to write HTML code faster

Sinek üzerinde HTML oluşturun

Emmet Nasıl Kullanılır

Dinamik içerik için pug kullanın

Nasıl Yapılır - En Popüler Makaleler

Daha iyi karakter animasyonları oluşturmanın 10 yolu

CSS kullanarak karmaşık düzenler nasıl oluşturulur

Boya kontrollü ve pürüzsüz vuruşlar ile eskiz

Elle çizilmiş bir görünüm oluşturmak için dijital araçların nasıl kullanılacağı

Bir tablodaki sesi nasıl iletilir

Klips Studio Boyundaki Özel Fırçalar Oluşturun

Master Kullanıcı Deneyimi Stratejisi

60 saniyede Photoshop ile bir sinemagraf oluşturun

Kategoriler