Merhaba arkadaşlar bir önceki konuda Zen Coding 'in Notepad++ ' a nasıl yüklendiğini anlatmıştım. Küçük bir tanım yapmıştım ama kullanmadığımız için havada kalmıştı . Şimdi ise örnek kodlar vereceğim . Umarım yararlı olur.
ilk olarak html in olmazsa olmazı kodlarından başlayalım. (Notepad++ da çalışmaya devam ediyorum.)
ilk olarak Notepad++ da yeni bir sayfa açıp uzantısı .html olacak şekilde kaydedin.
Ve ilk kodumuz olan html:xt yazın. Ctrl+Alt+Enter veya Ctrl+E 'e basın.Tuş kombinasyonunun hangisi olduğunu öğrenmek için;
Şimdi deneyelim;
"Bunları ezberlemekte zorlanır mıyım?" diyorsanız endişelenmeyin bu kod haricinde diğerleri belirli bir mantığa göre yazılıyor. Örneklere devam ...
Div veya herhangi bir tag oluştururken class istiyorsak .(nokta) ,id istiyorsak da #(diyez) kullanmamız gerekmektedir.
id'si "genel" olan bir div ve altına class'ı "konu" olan bir span oluşturalım.
Yaptığımız iş mantığına uygun yazmak ve satır sonunda Ctrl+Alt+Enter tuşlarına basmak
( tuş kombinasyonu hangisi ise).
1)
2)
1)
2)
Biraz daha açıklayıcı olması için liste oluşturalım içine link ve bir image ekleyelim :
1)
2)
Yukarıda gördüğünüz gibi a tagımızdaki href="" ve img tagımızdaki src="", alt="" alanlarına deger vermek için "[ ]" köşeli parantez kullanmamız gerekir.Listemizde ki madde sayısını belirlemek için ise li tagımızın yanına "*" işareti ile ne kadar istediğimizi yazmamız gerekir.(Mesela 3 olsun.)
1)
2)
a tagımızın href="?" olması yerine sırayla #-1,#-2 ,#-3 değerini almasını istiyorsak "$" dolar işaretini kullanırız. # yerine ? veya ! gibi karakterlerde kullanabilirsiniz.
1)
2)
tagları iç içe değilde yan yana yazmak istersek "+" karakterini kullanırız. Mesela yukarıda img tagımız, a tagımızın içinde yer almakta bunları yan yana yazalım.
1)
2)
Şimdilik bu kadar arkadaşlar mantığı ögrenirseniz digerleri de aynı şekilde. Bu eklenti ile kod yazmak daha hızlı ve daha eğlenceli hale geldi tavsiye ederim. Umarım yararlı olmuştur.
Zen Coding HTML kodlarının tamamına burdaki bağlantıdan ulaşabilirsiniz.
Hiç yorum yok:
Yorum Gönder