چگونه سریعتر و راحت تر کد HTML و CSS بنویسیم؟ می خوام یک ابزار ساده در برنامه نویسی وب براتون معرفی کنم که باعث میشه وقتتون توی نوشتن کد ها کمتر تلف بشه و با این ابزار از کدنویسی خسته نشین و بیشتر لذت ببرین ، این ابزار رایگان که اسمش Emmet هست موجب میشه کد های Html و Css رو خیلی سریعتر از قبل بنویسید.به دلیل این که برای اغلب Editor های معروف ارائه شده،محبوبیت بالایی بین افراد پیدا کرده ، برای نصب Emmet در editor محبوب Brackets کافیه از قسمت extention manager با تایپ کردن emmet اون رو پیدا کنید.
نصب این ابزار بر روی editor دیگری به نام SublimeText هم باید مراحل زیر رو طی کنین:
(ممکنه دوباره لازم باشه برنامه رو restart کنید تا تغییرات اعمال شه) حالا برای استفاده از این ابزار فایل Html ای رو که میخواین باز کنید.استفاده از emmet بسیار راحته و فقط از یک سری سمبل استفاده می شه. برای نوشتن تگ های html کافیه اسم اوتگ رو بنویسید و بعد با فشردن Tab، براتون تگ رو باز می کنه و میبنده.(مثل a و img و h2 و h3 و h4 و p و nav)
1. سمبل . که برای اضافه کردن class به تگ مورد نظر هست:(اگه اسم تگ قبلش نوشته نشه به طور پیش فرض تگ div باز میشه)
.container
div.wrapper.success
header.siteHeader
نتیجه به این شکل هست:
<div class="container"></div> <div class="wrapper success"></div> <header class="siteHeader"></header>
2.سمبل # که برای اضافه کردن Id به تگ استفاده می شه:
#container
div#wrapper.success
header#siteHeader
که نتیجه به این شکل هست:
<div id="container"></div> <div id="wrapper" class="sucsess"></div> <header id="siteHeader"></header>
3.سمبل + که المان های مورد نظرتون رو زیر هم باز می کنه:
header+.main-container+footer
نتیجه به این شکل هست:
<header></header> <div class="main-container"></div> <footer></footer>
4. سمبل < که المان های فرزند برای المان مورد نظر ایجاد می کنه:
header>nav
header>nav>ul>li
نتیجه به این شکل هست:
<header> <nav></nav> </header> <header> <nav> <ul> <li></li> </ul> </nav> </header>
5.سمبل ^ که ترکیبی از دو سمبل + و < است : مثال:
header>nav^main>article^footer
نتیجه:
<header> <nav></nav> </header> <main> <article></article> </main> <footer></footer>
مثال دوم:(به تعداد < ها از ^ استفاده میشه)
header>nav>ul^^main>article+aside^footer
<header> <nav> <ul></ul> </nav> </header> <main> <article></article> <aside></aside> </main> <footer></footer>
6. سمبل () برای group کردن المان ها(شبیه به مورد قبلی):
مثال:
(header>nav)(main>article)(footer)
نتیجه:
<header> <nav></nav> </header> <main> <article></article> </main> <footer></footer>
7. سمبل * برای تعداد المان ها
li*3
نتیجه:
<li></li> <li></li> <li></li>
مثال دیگر:
header>nav>ul>li*3>a
نتیجه:
<header> <nav> <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </nav> </header>
8.لینک ها در emmet :
a
a:link
[""=a:link[title
["a[href="http://google.com
["a[href="http://google.com" title="visit google.com
نتیجه:
<a href=""></a> <a href="http://"></a> <a href="http://" title=""></a> <a href="http://google.com"></a> <a href="http://google.com" title="visit google.com"></a>
امیدوارم براتون مفید واقع شده باشه . موفق باشید.
فارغ التحصیل رشته مهندسی سخت افزار دانشگاه شاهد هستم. به حوزه شبکه علاقه مند می باشم و دوره MCSE را در مجتمع فنی تهران شعبه ابن سینا گذرانده ام. به یادگیری و کار تیمی علاقه مند می باشم. در زمینه هایی از قبیل high availability و load balancing سرور های لینوکسی در شرکت ویراتک شریف دارای تجربه می باشم. علاقه مند به انجام پروژه در زمینه شبکه های کامپیوتری هستم. در حوزه برنامه نویسی و توسعه اپلیکیشن های تحت وب فعالیت داشته و دارم. به عنوان کاربر نویسنده نیز چندین مطلب تخصصی در حوزه فناوری اطلاعات در
زمان پاسخ گویی روز های شنبه الی چهارشنبه ساعت 9 الی 18
فقط به موضوعات مربوط به محصولات آموزشی و فروش پاسخ داده می شود