Son dönemlerde özellikle yeni jenerasyon IDE’lerde istediğiniz addon ve pluginleri yükleyebiliyorsunuz. Bunlardan bence en önemlilerinden bir tanesi Emmet. Özellikle web tasarımı yapıyorsanız sıfırdan, size büyük bir zaman kazandıracaktır.

Emmet’i verimli bir şekilde kullanabilmek için CSS biliyor olmanız gerekmiyor ama biliyorsanız CSS yazar gibi yazacağınız bir kodlama ile dakikalar kazanabilirsiniz. Nasıl mı ? Bakınız bir kaç örnek ile anlatayım.

#page>div.logo+ul#navigation>li*5>a{Item $}

Yukarıda yazan CSS benzeri kodu Emmet yüklü bir IDE de yazıp TAB tuşuna basarsanız aşağıdaki kodu otomatik oluşturursunuz.

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

Farkındaysanız kopyala yapıştırlar, kodun formasyonu ve hatta içeriğini bile otomatik oluşturabiliyorsunuz. Yukarıdaki kod ile sitenizin başlık kısmını neredeyse bir satır ile hazırlamış oldunuz.

İşleri daha anlaşılır ve basit hale getirmeme izin verin. Konu esasında basit bir “Nested” düzenli bir yapı kurmak ile ilgili. Bu Emmet ile sadece HTML veya XML yapısı değil esasında bir çok yazım süreçlerinizi (TEZ yazmak gibi) kolaylaştırabilirsiniz.

Önce Child Elements yani Alt Öğeleri (elemanlar) oluşturmayı göstereyim.

div>ul>li

bu yukarıdaki basit yazım size aşağıdaki kodu oluşturacaktır :

<div>
    <ul>
        <li></li>
    </ul>
</div>

Kolaymış değil mi ? Ama bu kadar kısa bir kod için bu yazım formatını aklınızda tutmak istemeyebilirsiniz peki ya birçok satırdan oluşan bir tablo yapısı oluşturmak istiyorsanız.

Diyelim ki örneğimizde bir tablo oluşturmak istiyorsunuz ve bu tablo 3 kolondan oluşsun. Ayrıca bir sırada başlık satırı olsun :

table>(tr>th*3)+(tr>td*3)*5

Bir sonraki paragrafımda yukarıda yazdığım kodu daha iyi anlayacaksınız ama dikkat etmenizi istediğim şey Child yapısını sadece CSS benzeri bir satır yazarak onlarca satır yazmaktan kurtulabileceğiniz. Bakınız yukarıdaki satır ile aşağıda oluşan yapı :

	<table>
		<tr>
			<th></th>
			<th></th>
			<th></th>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>

Yukarıdaki örnekte farklı iki yapıyı birleştirdim “+” işareti ile .Bunun anlaşılabilmesi için size basit bir örnek vereyim.

div+p+img

Yukarıdaki kısa kod ile yapmak istediğim sayfamıza birbirinden bağımsız yani Child yapısında olmayan bir tane div tagı bir tane p tagı ve bir tanede img tagı oluşturmak istedim. Sonuç :

   <div></div>
   <p></p>
   <img src="" alt="">

Peki bir önce kullandığımız yapıda “+” ların ne işe yaradığını anladım ama () ve * işaretlerini açar mısınız biraz dediğinizi duyar gibiyim. Hadi daha derine gidelim.

table > (tr > th*3) + (tr > td *3) *5

Önce tablo tagını oluşturduk “table” ve onun alt öğesi oluşturmak için “>” (küçüktür) işaretini kullandık …

(tr>th*3)

Böylece “table” tagı altına bir tane “tr” tagı yani Table Row oluşturup onunda altına “th” yani Table Header tagını oluşturduk ama “*3” ne demek derseniz onu şöyle açıklayalım. Oluşturduğunuz ya da oluşturacağınız tagın yanına * koyduğunuzda bu tagı kaç adet çoğaltmak istediğinizi belirtmiş oluyorsunuz.

Parantez içerisine koyduğunuz yapı ise aynı matematikte işlem önceliğinde olduğu gibi tekrarlamaların istediğiniz sıra ile yapılmasını sağlıyor. Mesela aşağıdaki örnek içerisinde TR oluşturduk ve altına 3 adet TD tagı oluşturduk ve sonra bu oluşturduuğumuz 3 adet TD içeren TR bloğundan 5 tane üretmesini şöyle yazdık:

(tr>td*3)*5

Önemli bir not vermeliyim bu arada. Kodun arasına boşluk koymayın!

Ayrıca demin hazırladığımız tablo yapısında ne istemiştik 3 kolonlu bir başlık, 3 kolonlu beş satır. Peki tablomuzun en alt satırına bir alt toplam için bir 3 kolon başlık daha eklemek istersek kodumuzu nasıl düzenleyeceğiz ? İşte aşağıdaki kod “+” işaretinin ne işe yaradığınızı anlamanıza yardımcı olacak.

table>(tr>th*3)+(tr>td*3)*5+(tr>th*3)

Dikkat ederseniz “+” işaretinden sonra kodun içerisine eklemek istediğim son dip toplam için başlık satırını da oluşturmuş olacak.

   <table>
   	<tr>
   		<th></th>
   		<th></th>
   		<th></th>
   	</tr>
   	<tr>
   		<td></td>
   		<td></td>
   		<td></td>
   	</tr>
   	<tr>
   		<td></td>
   		<td></td>
   		<td></td>
   	</tr>
   	<tr>
   		<td></td>
   		<td></td>
   		<td></td>
   	</tr>
   	<tr>
   		<td></td>
   		<td></td>
   		<td></td>
   	</tr>
   	<tr>
   		<td></td>
   		<td></td>
   		<td></td>
   	</tr>
   	<tr>
   		<th></th>
   		<th></th>
   		<th></th>
   	</tr>
   </table>

Bir sonraki yazımda Emmet’in daha da detayına ineceğim. Verdiğim örnekler çok uzun olduğu için sayfada kaybolmanızı istemem. Bir sonraki Emmet ile ilgili yazım için buraya tıklayınız.