campaign-edianeh-98

سرعت در کد نویسی CSS و HTML ، بخش اول : کار با پلاگین Emmet



visibility  
mode_comment   ۲۱

با سلام خدمت تمامی سون لرنی ها.انشا ا... از این به بعد در خدمتتون هستم.

در این مجموعه آموزشی به ترفند ها و کار با پلاگین هایی می پردازیم که به سرعت در نوشتن کد های css و html به شما بسیار کمک می کنند.چون این مجموعه آموزشی با هم مرتبط هستند باید از بخش اول شروع کنید و سعی کنید همه ی مراحل رو انجام بدید.

اگر با زبان های css  و html آشنا هستید و می خواهید از این به بعد به صورت حرفه ای کد نویسی کنید و همچنین سرعت بالایی داشته باشید،در ابتدا باید یک ادیتور متن عالی انتخاب کنید.

یکی از بهترین ادیتور ها در زمینه ی کد نویسی ادیتور Sublime Text می باشد.(به نظر من واقعا بهترین ادیتوره)

ابتدا اون رو از از اینجا دانلود کرده و نصب کنید. (اگه با مرورگر کروم کار میکنید که فبها وگرنه پیشنهاد من به شما اینه که از این به بعد با کروم کار کنید.)

sublimeText_thumb

وقتی  Sublime Text  رو نصب کردید ابتدا با اون یه فایل html باز کنید.میتونید از قسمت منوی بالا گزینه ی Edit همه ی میانبر های ادیتور رو به صورت کامل ببینید که خیلی مفید هستند. این بخش رو زیاد توضیح نمیدم فقط میانبر های خیلی کاربردی رو لیست میکنم.

Ctrl+d : انتخاب کلمه (معمولا کلمات داخل کوتیشن را به این صورت انتخاب میکنن)

Ctrl+Shift+Space :  مثل بالایی عمل میکنه فقط مقدار بیشتری از متن رو انتخاب میکنه.برای انتخاب یک قسمت به کار میره.

Ctrl+F : میتونید در کادری که باز میشه کلمه ی مورد نظرتون رو تایپ کنید . مثلا می خواهید هر چی تو صفحه تون کلاسی با نام bar دارید رو به foo تبدیل کنید؛ از همون سمت راست گزینه ی find All رو انتخاب کنید ...

Ctrl+L: خطی که روی اون هستید رو انتخاب میکنه.

End : نشانگر تایپ رو به آخر خط میبره.

Home: نشانگر تایپ رو به اول خط میاره.

خب بیشتر ادامه نمیدم میرم سراغ اصل مطلب.

emmet

بسیاری از کسانی که سریع کدنویسی مینویسند ( مثل خود من ) با افزونه ی Emmet  کار میکنند. ابتدا اون رو از اینجا (Emmet for ST) دانلود و نصب کنید.(نحوه ی نصبش رو هم توضیح داده.)

این پلاگین بر روی بیشتر ادیتور ها نصب می شود (ادیتور های متن باز) ولی چون در بخش بعد پلاگین دیگری رو برای بالا بردن سرعت کد نویسی معرفی میکنم که تنها بر روی ادیتور ST نصب میشود، فقط لینک دانلود پلاگین Emmet برای ST رو گذاشتم.

در این پست تنها به اختصارات HTML به صورت کامل می پردازم و در بخش بعد هم ، اختصارات CSS را به طور کامل توضیح میدهم.

اختصارات در HTML

(دقت داشته باشید بعد از هر خط بدون گذاشتن فاصله یا space دکمه ی tab رو بزنید.)

مثلا برای نوشتن یک قالب ساده ی html ، حداقل باید 10 خط کد بنویسید که میشود این کار را با نوشتن !(علامت تعجب) و یا html:5 و زدن دکه ی tab  انجام داد.

sublime Text 3

* با نوشتن تگ مورد نظر (بدون < و > مثلا تگ پاراگراف رو به صورت p مینویسید) و تایپ کردن یک مربع (#)، یک تگ پاراگرف با آیدی ای که جلوی مربع نوشتید، میتونید داشته باشید.اگه به جای مربع ، نقطه بذارید به جای id یک تگ با  class مشخص شده دارید.

emmet - sunblime Text

* برای اینکه داخل تگ هاتون متنی داشته باشید میتونید اون متن رو در جلوی تگ داخل { } قرار دهید.یا مثلا برای مشخص کردن خاصیت و مقدار یک تگ میتوینید اون هارو داخل [ ] بنویسید. به تصویر توجه کنید.

emmet - sunblime Text

* دقت داشته باشید اگر تگ رو مشخص نکنید و فقط کلاس یا آی دی رو مشخص کنید یک دایو (div) با کلاس یا آی دیه مشخص شده نوشته میشه. اگر همین کار رو داخل تگ ul کنید به جای یک div، یک تگ li باز میشود.

emmet - sunblime Text

* میتونید تگ هایی که می خواهید در یک خط بنویسید را با + از هم جدا کنید.و همچنین با علامت < میتونید در داخل تگی ، تگ هایی رو که می خواهید اضافه کنید. دقت داشته باشید که علامت  ^ برعکس < کار میکنه. با استفاده از علامت ^ میتونید به عنصر بالایی برید.

Emmet - Sublime Text

* میتونید با استفاده از *(ستاره) از یک تگ یا یک گروه از تگ ها  به تعداد عددی که جلوی ستاره تایپ میکنید، داشته باشید. به تصویر توجه کنید.

Emmet - Sublime Text

* برای اینکه یک گروه رو مشخص کنید میتونید اونهارو داخل پرانتز بزارید.

Emmet - Sublime Text

* میتونید با استفاده از $ ، اعدادی با گام های افزایشی داشته باشید.به تصویر نگاه کنید.

Emmet - Sublime Text

به این صورت هم با دقت و هم با سرعت کدهای HTML تون رو بنویسید.

برای اطلاعات بیشتر سری هم به اینجا بزنید.

خب این بخش هم به پایان رسید. در بخش بعدی اختصارات CSS رو به طور کامل توضیح میدم.

موفق باشید ؛ یا علی

comment دیدگاه کاربران
حسین محمدی replyپاسخ

سلام آقای امینی…
چه آموزش فوق العاده ای 😯 …من فکر نمی کردم همچین پلاگینی وجود داشته باشه…
خیلی ممنون 😛

علی امینی

سلام آقای محمدی
از این دسته پلاگین ها قبلا هم بود فقط به دلیل اینکه به اندازه ی Emmet کاربردی نبودند کمتر افرادی بودند که باهاشون کار میکردند.
برای حرفه ای شدن باید از ابزار های حرفه ای استفاده کرد و Emmet یک ابزار حرفه ایه.
البته پلاگین بعدی که معرفی میکنم حرفه ای تره …
تازه قسمت بعدی با اختصارات سی اس اس آشنا میشیم که تازه میفهمیم Emmet واقعا حرفه ایه.
خواهش میکنم

رضا ساطع بیدگلی replyپاسخ

نویسندگی تون رو تبریک میگم .
راستش تازه میفهمم هر چی میرم جلو هیچی بلد نیستم … 😛

علی امینی

ممنون.
واقعا …
البته CSS و HTML زبان برنامه نویسی نیستند،وقتی با زبان هایی چون JavaScript و به خصوص PHP کار کنی میفهمی هیچی نمیفهمی 🙁

N a S e R replyپاسخ

اموزش مطلب به کنار نحوه اموزش دادنتون نمره 20 داشت خیلی زیبا بود حرکتت ❓

علی امینی

خواهش میکنم داداش.
پس از این به بعد منتظر بقیه ی آموزش ها هم باش …

joojo82 replyپاسخ

سلام خوبین؟
خسته نباشین من این پلاگین رو نتونستم نصب کنم

لقمان آوند

سلام
کافیه فایل زیپ پلاگین رو دانلود کنید و محتویاتشو در پوشه ی Package در جایی که sublime رو نصب کردید کپی کنید .

joojo82

این کار انجام دادم ولی باز هم نمیشه!

علی امینی

سلام
وقتی فایل زیپ رو دانلود کردی، پوشه ی emmet-sublime-master رو Extrac کن تو پوشه ی Package ، جایی که ST هست.
معمولا در این مسیره:
C:\Program Files\Sublime Text 3\Packages

joojo82

سلام ممنون از پاسختون ولی باز هم کار نمیکنه
کد رو ک مینویسم بعد TAB رو میزنم کماکان کار نمیکنه!

مهشاد کلانتری

سلام از package control برای نصبش استفاده کن
آموزش نصب package control تو نت هست سرچ کنی پیدا میشه

Hamidreza Heidari

سلام
دوست عزیز احتمالا شما فایلتون رو ذخیره نکردید اگر فایل رو ذخیره کنید emmet به خوبی کار می کنه.

mm021 replyپاسخ

سلام این این برنامه توی برنامه های دیگه ویرایش متن میشه استفاده کرد مثل نود پد

hamed17n replyپاسخ

من نصب کردم ولی نمی دونم چرا کار نمی کنه

حسین محمدی replyپاسخ

از همه جالبتر اینه که حتی برای textareaها هم این پلاگین رو درست کردند….

مهرداد replyپاسخ

سلام من محتویات پوشه رو تو محل نصبSTریختم(Pakage)
ولی کار نمیکمه لطفا راهنمایی کنید …

jabran replyپاسخ

جهت اطلاعات بیشتر درباره emmet سری به karazmoodeh.com/video بزنید

Hamidreza Heidari replyپاسخ

سلام دوستان
برای اینکه emmet کار کنه باید فایلتون رو اول جایی ذخیره کنید وگرنه در فایل ذخیره نشده جواب نمی ده …

حدیث بنی اسد replyپاسخ

سلام من یه سوال دارم خواهش میکنم جواب بدید در پلا گین emmet وقتی کد مینویسیم و tabمیزنیم و کد اجرا میشود حالا اگه بخواهیم به کد رو تصحیح کنیم و بدون پاک کردن به کدمون برسیم باید کدوم دکمه رو بزنیم

سید مهدی لعل موسوی replyپاسخ

سلام ببخشید من که فیلتر شکن ندارم که دانلود کنم اگر میشه فایل رو برام لینک کنید تا دانلود کنم
بعدش بهم بگید که چطور اونو نصب کنم

add_circle ارسال دیدگاه

خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :