{"id":571,"date":"2022-10-28T15:08:57","date_gmt":"2022-10-28T12:08:57","guid":{"rendered":"https:\/\/melic.com\/wp1\/?p=571"},"modified":"2022-10-28T15:20:20","modified_gmt":"2022-10-28T12:20:20","slug":"emmet-nedir-ve-ne-ise-yarar","status":"publish","type":"post","link":"https:\/\/melic.com\/wp1\/emmet-nedir-ve-ne-ise-yarar\/","title":{"rendered":"Emmet Nedir ve Ne \u0130\u015fe Yarar!"},"content":{"rendered":"\n

Son d\u00f6nemlerde \u00f6zellikle yeni jenerasyon IDE’lerde istedi\u011finiz addon ve pluginleri y\u00fckleyebiliyorsunuz. Bunlardan bence en \u00f6nemlilerinden bir tanesi Emmet. \u00d6zellikle web tasar\u0131m\u0131 yap\u0131yorsan\u0131z s\u0131f\u0131rdan, size b\u00fcy\u00fck bir zaman kazand\u0131racakt\u0131r.<\/p>\n\n\n\n

Emmet’i verimli bir \u015fekilde kullanabilmek i\u00e7in CSS biliyor olman\u0131z gerekmiyor ama biliyorsan\u0131z CSS yazar gibi yazaca\u011f\u0131n\u0131z bir kodlama ile dakikalar kazanabilirsiniz. Nas\u0131l m\u0131 ? Bak\u0131n\u0131z bir ka\u00e7 \u00f6rnek ile anlatay\u0131m.<\/p>\n\n\n\n

#page>div.logo+ul#navigation>li*5>a{Item $}\n<\/code><\/pre>\n\n\n\n
Yukar\u0131da yazan CSS benzeri kodu Emmet y\u00fckl\u00fc bir IDE de yaz\u0131p TAB tu\u015funa basarsan\u0131z a\u015fa\u011f\u0131daki kodu otomatik olu\u015fturursunuz.<\/p>\n\n\n\n
<div id=\"page\">\n    <div class=\"logo\"><\/div>\n    <ul id=\"navigation\">\n        <li><a href=\"\">Item 1<\/a><\/li>\n        <li><a href=\"\">Item 2<\/a><\/li>\n        <li><a href=\"\">Item 3<\/a><\/li>\n        <li><a href=\"\">Item 4<\/a><\/li>\n        <li><a href=\"\">Item 5<\/a><\/li>\n    <\/ul>\n<\/div><\/code><\/pre>\n\n\n\n
Fark\u0131ndaysan\u0131z kopyala yap\u0131\u015ft\u0131rlar, kodun formasyonu ve hatta i\u00e7eri\u011fini bile otomatik olu\u015fturabiliyorsunuz. Yukar\u0131daki kod ile sitenizin ba\u015fl\u0131k k\u0131sm\u0131n\u0131 neredeyse bir sat\u0131r ile haz\u0131rlam\u0131\u015f oldunuz.<\/p>\n\n\n\n
\u0130\u015fleri daha anla\u015f\u0131l\u0131r ve basit hale getirmeme izin verin. Konu esas\u0131nda basit bir “Nested” d\u00fczenli bir yap\u0131 kurmak ile ilgili. Bu Emmet ile sadece HTML veya XML yap\u0131s\u0131 de\u011fil esas\u0131nda bir \u00e7ok yaz\u0131m s\u00fcre\u00e7lerinizi (TEZ yazmak gibi) kolayla\u015ft\u0131rabilirsiniz.<\/p>\n\n\n\n
\u00d6nce Child Elements yani Alt \u00d6\u011feleri (elemanlar) olu\u015fturmay\u0131 g\u00f6stereyim.<\/p>\n\n\n\n
div>ul>li<\/code><\/pre>\n\n\n\n
bu yukar\u0131daki basit yaz\u0131m size a\u015fa\u011f\u0131daki kodu olu\u015fturacakt\u0131r :<\/p>\n\n\n\n
<div>\n    <ul>\n        <li><\/li>\n    <\/ul>\n<\/div><\/code><\/pre>\n\n\n\n
Kolaym\u0131\u015f de\u011fil mi ? Ama bu kadar k\u0131sa bir kod i\u00e7in bu yaz\u0131m format\u0131n\u0131 akl\u0131n\u0131zda tutmak istemeyebilirsiniz peki ya bir\u00e7ok sat\u0131rdan olu\u015fan bir tablo yap\u0131s\u0131 olu\u015fturmak istiyorsan\u0131z.<\/p>\n\n\n\n
Diyelim ki \u00f6rne\u011fimizde bir tablo olu\u015fturmak istiyorsunuz ve bu tablo 3 kolondan olu\u015fsun. Ayr\u0131ca bir s\u0131rada ba\u015fl\u0131k sat\u0131r\u0131 olsun : <\/p>\n\n\n\n
table>(tr>th*3)+(tr>td*3)*5<\/code><\/pre>\n\n\n\n
Bir sonraki paragraf\u0131mda yukar\u0131da yazd\u0131\u011f\u0131m kodu daha iyi anlayacaks\u0131n\u0131z ama dikkat etmenizi istedi\u011fim \u015fey Child yap\u0131s\u0131n\u0131 sadece CSS benzeri bir sat\u0131r yazarak onlarca sat\u0131r yazmaktan kurtulabilece\u011finiz. Bak\u0131n\u0131z yukar\u0131daki sat\u0131r ile a\u015fa\u011f\u0131da olu\u015fan yap\u0131 :<\/p>\n\n\n\n
\t<table>\n\t\t<tr>\n\t\t\t<th><\/th>\n\t\t\t<th><\/th>\n\t\t\t<th><\/th>\n\t\t<\/tr>\n\t\t<tr>\n\t\t\t<td><\/td>\n\t\t\t<td><\/td>\n\t\t\t<td><\/td>\n\t\t<\/tr>\n\t\t<tr>\n\t\t\t<td><\/td>\n\t\t\t<td><\/td>\n\t\t\t<td><\/td>\n\t\t<\/tr>\n\t\t<tr>\n\t\t\t<td><\/td>\n\t\t\t<td><\/td>\n\t\t\t<td><\/td>\n\t\t<\/tr>\n\t\t<tr>\n\t\t\t<td><\/td>\n\t\t\t<td><\/td>\n\t\t\t<td><\/td>\n\t\t<\/tr>\n\t\t<tr>\n\t\t\t<td><\/td>\n\t\t\t<td><\/td>\n\t\t\t<td><\/td>\n\t\t<\/tr>\n\t<\/table><\/code><\/pre>\n\n\n\n
Yukar\u0131daki \u00f6rnekte farkl\u0131 iki yap\u0131y\u0131 birle\u015ftirdim “+” i\u015fareti ile .Bunun anla\u015f\u0131labilmesi i\u00e7in size basit bir \u00f6rnek vereyim.<\/p>\n\n\n\n
div+p+img<\/code><\/pre>\n\n\n\n
Yukar\u0131daki k\u0131sa kod ile yapmak istedi\u011fim sayfam\u0131za birbirinden ba\u011f\u0131ms\u0131z yani Child yap\u0131s\u0131nda olmayan bir tane div tag\u0131 bir tane p tag\u0131 ve bir tanede img tag\u0131 olu\u015fturmak istedim. Sonu\u00e7 :<\/p>\n\n\n\n
   <div><\/div>\n   <p><\/p>\n   <img src=\"\" alt=\"\"><\/code><\/pre>\n\n\n\n
Peki bir \u00f6nce kulland\u0131\u011f\u0131m\u0131z yap\u0131da “+” lar\u0131n ne i\u015fe yarad\u0131\u011f\u0131n\u0131 anlad\u0131m ama () ve * i\u015faretlerini a\u00e7ar m\u0131s\u0131n\u0131z biraz dedi\u011finizi duyar gibiyim. Hadi daha derine gidelim.<\/p>\n\n\n\n
table > (tr > th*3) + (tr > td *3) *5<\/code><\/pre>\n\n\n\n
\u00d6nce tablo tag\u0131n\u0131 olu\u015fturduk “table” ve onun alt \u00f6\u011fesi olu\u015fturmak i\u00e7in “>” (k\u00fc\u00e7\u00fckt\u00fcr) i\u015faretini kulland\u0131k …<\/p>\n\n\n\n
(tr>th*3)<\/code><\/pre>\n\n\n\n
B\u00f6ylece “table” tag\u0131 alt\u0131na bir tane “tr” tag\u0131 yani Table Row olu\u015fturup onunda alt\u0131na “th” yani Table Header tag\u0131n\u0131 olu\u015fturduk ama “*3” ne demek derseniz onu \u015f\u00f6yle a\u00e7\u0131klayal\u0131m. Olu\u015fturdu\u011funuz ya da olu\u015fturaca\u011f\u0131n\u0131z tag\u0131n yan\u0131na * koydu\u011funuzda bu tag\u0131 ka\u00e7 adet \u00e7o\u011faltmak istedi\u011finizi belirtmi\u015f oluyorsunuz.<\/p>\n\n\n\n
Parantez i\u00e7erisine koydu\u011funuz yap\u0131 ise ayn\u0131 matematikte i\u015flem \u00f6nceli\u011finde oldu\u011fu gibi tekrarlamalar\u0131n istedi\u011finiz s\u0131ra ile yap\u0131lmas\u0131n\u0131 sa\u011fl\u0131yor. Mesela a\u015fa\u011f\u0131daki \u00f6rnek i\u00e7erisinde  TR olu\u015fturduk ve alt\u0131na 3 adet TD tag\u0131 olu\u015fturduk ve sonra bu olu\u015fturduu\u011fumuz 3 adet TD i\u00e7eren TR blo\u011fundan 5 tane \u00fcretmesini \u015f\u00f6yle yazd\u0131k:<\/p>\n\n\n\n
(tr>td*3)*5<\/code><\/pre>\n\n\n\n
\u00d6nemli bir not vermeliyim bu arada. Kodun aras\u0131na bo\u015fluk koymay\u0131n<\/strong>!<\/p>\n\n\n\n
Ayr\u0131ca demin haz\u0131rlad\u0131\u011f\u0131m\u0131z tablo yap\u0131s\u0131nda ne istemi\u015ftik 3 kolonlu bir ba\u015fl\u0131k, 3 kolonlu be\u015f sat\u0131r. Peki tablomuzun en alt sat\u0131r\u0131na bir alt toplam i\u00e7in bir 3 kolon ba\u015fl\u0131k daha eklemek istersek kodumuzu nas\u0131l d\u00fczenleyece\u011fiz ? \u0130\u015fte a\u015fa\u011f\u0131daki kod “+” i\u015faretinin ne i\u015fe yarad\u0131\u011f\u0131n\u0131z\u0131 anlaman\u0131za yard\u0131mc\u0131 olacak.<\/p>\n\n\n\n
table>(tr>th*3)+(tr>td*3)*5+(tr>th*3)<\/strong><\/code><\/pre>\n\n\n\n
Dikkat ederseniz “+” i\u015faretinden sonra kodun i\u00e7erisine eklemek istedi\u011fim son dip toplam i\u00e7in ba\u015fl\u0131k sat\u0131r\u0131n\u0131 da olu\u015fturmu\u015f olacak.<\/p>\n\n\n\n
   <table>\n   \t<tr>\n   \t\t<th><\/th>\n   \t\t<th><\/th>\n   \t\t<th><\/th>\n   \t<\/tr>\n   \t<tr>\n   \t\t<td><\/td>\n   \t\t<td><\/td>\n   \t\t<td><\/td>\n   \t<\/tr>\n   \t<tr>\n   \t\t<td><\/td>\n   \t\t<td><\/td>\n   \t\t<td><\/td>\n   \t<\/tr>\n   \t<tr>\n   \t\t<td><\/td>\n   \t\t<td><\/td>\n   \t\t<td><\/td>\n   \t<\/tr>\n   \t<tr>\n   \t\t<td><\/td>\n   \t\t<td><\/td>\n   \t\t<td><\/td>\n   \t<\/tr>\n   \t<tr>\n   \t\t<td><\/td>\n   \t\t<td><\/td>\n   \t\t<td><\/td>\n   \t<\/tr>\n   \t<tr>\n   \t\t<th><\/th>\n   \t\t<th><\/th>\n   \t\t<th><\/th>\n   \t<\/tr><\/strong>\n   <\/table><\/code><\/pre>\n\n\n\n
Bir sonraki yaz\u0131mda Emmet’in daha da detay\u0131na inece\u011fim. Verdi\u011fim \u00f6rnekler \u00e7ok uzun oldu\u011fu i\u00e7in sayfada kaybolman\u0131z\u0131 istemem. Bir sonraki Emmet ile ilgili yaz\u0131m i\u00e7in buraya t\u0131klay\u0131n\u0131z.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Son d\u00f6nemlerde \u00f6zellikle yeni jenerasyon IDE’lerde istedi\u011finiz addon ve pluginleri y\u00fckleyebiliyorsunuz. Bunlardan bence en \u00f6nemlilerinden bir tanesi Emmet. \u00d6zellikle web tasar\u0131m\u0131 yap\u0131yorsan\u0131z s\u0131f\u0131rdan, size b\u00fcy\u00fck bir zaman kazand\u0131racakt\u0131r. Emmet’i verimli bir \u015fekilde kullanabilmek i\u00e7in CSS biliyor olman\u0131z gerekmiyor ama biliyorsan\u0131z CSS yazar gibi yazaca\u011f\u0131n\u0131z bir kodlama ile dakikalar kazanabilirsiniz. Nas\u0131l…<\/p>\n","protected":false},"author":1,"featured_media":300,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[57,1,89,56,54,55,94],"tags":[61,289,293,294,291,62,296,65,292,290],"class_list":["post-571","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-html","category-genel","category-java","category-javascript","category-programala-dilleri-ve-programlamaya-giris","category-python","category-web-arayuzleri","tag-css","tag-emmet","tag-emmet-addon","tag-emmet-io","tag-hizli-kodlama","tag-html","tag-html5","tag-java","tag-nested-yapi","tag-zen-code"],"_links":{"self":[{"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/posts\/571","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/comments?post=571"}],"version-history":[{"count":10,"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/posts\/571\/revisions"}],"predecessor-version":[{"id":582,"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/posts\/571\/revisions\/582"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/media\/300"}],"wp:attachment":[{"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/media?parent=571"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/categories?post=571"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/tags?post=571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}