Kapat
Emmetin Tanıtılması
Anasayfa 307 0

Emmet Nedir? Neden ve Nasıl Kullanılır?

Emmet, Html ve CSS iş akışını büyük ölçüde geliştiren, web geliştiricilerinin sıklıkla kullandığı bir eklentidir. Kodları daha hızlı yazıp zamandan tasarruf etmek için tercih ederiz.

Emmet ( Zen Coding  ), HTML , XML , XSL ve diğer yapılandırılmış kod formatlarında içerik yardımı aracılığı yapar. Yüksek hızlı kodlama ve düzenlemeye olanak tanıyan, metin düzenleyiciler için bir dizi eklentidir . Proje, Vadim Makeev tarafından 2008’de  başlatıldı. Sergey Chikuyonok ve Emmet kullanıcıları tarafından aktif olarak geliştirilmeye devam ediyor. 2015’ten beri Mikael Geletsyan  Emmet’te UX’ten sorumludur. Araçlar birkaç popüler metin editörüne dahil edilmiştirEmmet ekibi tarafından geliştirilen bazı eklentiler ve diğerleri bağımsız olarak uygulandı. Bununla birlikte, motor herhangi bir yazılımla değil, doğrudan metinle çalışır. Bunun için Emmet, öncelikle herhangi bir metin düzenleyiciden bağımsızdır. 

Emmet, MIT Lisansı altında açık kaynaklıdır .

Neden Kullanmalıyız?

Emmet’in temel mantığı, yazılımcıya kodlama yaparken zaman kazandırmasıdır. Bu yüzden çoğu yazılımcı text editöründe Emmet eklentisini kullanır. Sonuçta; bir örnek üzerinden açıklayacak olursak;

şeklindeki iç içe girmiş bir kod yapısını tek tek iç içe yazmak yerine;
div>ul>li*5>a şeklinde yazarak ekrandaki kod yapısını elde etmiş oluruz.

Emmet birçok Text Editörü ile uyumlu şekilde çalışır. Bunun için yapmanız gereken sadece emmet.io adresine gitmek. Burada Download sekmesine gittikten sonra ekranda bulunan text editörlerinden size uygun olanı seçip, indirmek. Bu kısaltmalarınızın editörünüzde çalışması için, kısa kodları yazdıktan sonra editörün tamamlaması için klavyenizden TAB tuşuna basmalısınız.

Emmet ile HTML 5 İskeleti Oluşturmak

Bir HTML sayfası oluştururken bunun için yapmanız gereken ilk şey sayfa için bir iskelet oluşturmaktır. Bazen bu iskeleti oluştururken hangi kodun nerede olduğu unutabiliyoruz. İşte bunun için, Emmet tam burada devreye giriyor ve HTML uzantılı dosyamıza sadece “ ! ” yazdıktan sonra TAB tuşana basmamız yeter. sadece tek bir ünlem işareti ile HTML 5 iskeletimizi oluşturmuş oluyoruz.

Yerleştirme Operatörleri

–Multiplication: * = Elementin kaç defa üretileceğini belirtir. Bu sayede tekrarlı yazımlar gerçekleştirilmesine gerek kalmaz.

div>ul>li*5

–Sibling: + = Elementin yanına elamanlar ekler.

body>div+div+div

–Child: > = Elemente alt elemanlar eklemek için kullanabilirsiniz. Bu sayede her element için çocuk ekleyebilirsiniz.

div>ul>li*5>a

–Class: . = . (nokta) karakteri ile oluşturmak istediğiniz elemente class özelliği eklemiş olur ve bu sayede girmiş olduğunuz değer atamasıda class özelliğine atamış olursunuz.

div.diskutu>ul>li.menu

–ID: #= # karakteri ile oluşturmak istediğiniz elemente id özelliği eklemiş olur ve bu sayede girmiş olduğunuz değer atamasında id özelliğine atamış olursunuz.

div#diskutu>p#metin

–Item numbering: $ =$ işareti ile sayısal olarak otomatik artan değer üretimi sağlayabilirsiniz.

ul>li.item$*5

–Text: {} = {} eklerseniz bu sayede belirttiğimiz elementin için metin eklememize yardımcı olur.

p{Merhaba Dünya}

Daha fazla kısayol öğrenmek ve detaylı şemalarını görmek için, Emmet.io dökümanlarına buradan ulaşabilirsiniz…

[Toplam: 1   Ortalama: 5/5]
Avatar

Merve Kibir {Merve Kibir}