مرجع مقالات رسمی طراحی سایت

کدنویسی 

HTML در شرای برنامه نویس می باشید (مخصوصا برنامه نویس front-end) مسلما تجربه کرده اید که نوشتن کدهای HTML حقیقتا خسته کننده میباشد . 

خسته کننده بودن کدنویسی در لهجه HTML عوارض مختلفی دارد که حیاتی ترین آن ها عبارت اند از: 

طراحی سایت در مشهد

گویش HTML زیاد راحت میباشد بنابراین کدنویسی در آن مشابه تکرار مکررات و بیش تر کاری است؛ در حالتی که کاری به هیچ وجه چالشی نباشد، زیاد خسته کننده می شود . یک مثال واضح آن استفاده از کدهای تقلب در بازی های کامپیوتری است؛ زمانی که در یک بازی کامپیوتری از کدهای تقلب به کار گیری نمائید و به اقتدار مطلق بازی تبدیل شوید، برایتان هیجان انگیز میباشد ولی پس از چندین روز از بازی خسته می شوید . 

قسمت های دیگر اینترنت تارنما از زبان هایی مانند جاوا اسکریپت به کارگیری می کنند که بسیار هیجان انگیزتر از HTML است؛ به همین خاطر در طول زمان کدنویسی به لهجه HTML دائما به اندیشه کدهای دیگر هستیم . 

به عامل تکراری بودن کدها، از یک برنامه نویس تبدیل به یک تایپیست می شوید که تنها در اکنون تایپ عبارات می‌باشد و وقت خود را هدر می دهد . 

بگذارید یک مثال برایتان بزنم . تصور فرمائید می خوا هیم یک لیست HTML بسازیم . 

در این موقعیت برای ساخت یک لیست ساده بایستی کدهای پایین را نوشت: 

class="title">My items

class="list"> 

Item 1

Item 2

Item 3

Item 4

1 

2 

3 

4 

5 

6 

7 

class="title">My items

class="list"> 

Item 1

Item 2

Item 3

Item 4

که 

خروجی اش چنین چیزی می‌شود: 

Item 

1 Item 

2 Item 

3 Item 

4 چرا 

وقت خویش را صرف تایپ کردن کنیم در حالی که این وقت با قیمت می بایست صرف حل مسئله و طرح کلی شود؟ 

معرفی 

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

آیا میخواهید بدانید Emmet چقدر فعالیت شما را آسوده تر می کند؟ می توانید مثال بالا را در یک خط بنویسید! 

h2 .title{My items}+ul .list>li .item .item--${Item 

$}*4 1 

h2 .title{My items}+ul .list>li .item .item--${Item 

$}*4 پس از نوشتن این کد کلید Tab کیبورد را بزنید و این کدها تبدیل به کدهای نمونه اولیه می شوند! شاید با خودتان بگویید این کد دیگر چه کد خیره کننده و غریبی است!؟ با 10 دقیقه وقت گذاشتن و تلاوت این مطلب شما نیز می توانید کدهایتان را به سادگی هرچه تمام تر بنویسید و این کد برایتان معمولی خواهد شد . 

برای 

نصب این افزونه روی ادیتورهای گوناگون به لینک و پیوند های تحت مراجعه کنید: 

نصب 

Emmet برای ادیتور VSCode => (به فیس پیش فرض در قابل انعطاف افزار جانور است) نصب 

Emmet برای ادیتور PHPStorm => (به فیس پیش فرض در قابل انعطاف افزار جانور است) نصب 

Emmet برای ادیتور Atom نصب 

Emmet برای ادیتور Sublime Text نصب 

Emmet برای ادیتور Brackets نکته‌ی مهم: پلاگین ی Emmet در برخی از ادیتورها به فیس پیش فرض فعال میباشد . این شرکت ها ممکن هست دستورات Emmet را یه خرده تغییر‌و تحول دهند اما ما در این مقاله امرها اصلی و خالص Emmet را ارزیابی می کنیم . برای اطمینان عمده در مورد طریق ی استعمال از اوامر Emmet در ادیتور خود، جستجوی اینترنتی انجام دهید . به طور مثال برای ادیتور PHPStorm به این ورقه مراجعه فرمائید . یک عدد از محدودیت های PHPStorm این می باشد که تنها هنگامی از کدهای Emmet خروجی می گیرد که حجمشان کمتر از 15 کیلوبایت باشد . 

علامت 

نقطه آرم نقطه، کلاس می‌سازد . شاید بتوان بیان کرد آرم نقطه پرکاربردترین علامت فی مابین نماد های افزونه ی Emmet هست . به این ترتیب اگر کد ul .list 

را بنویسیم یعنی یک عنصر

با کلاس list ساخت کن! بنابراین این: 

ul .list 

1 

ul .list 

می 

شود: 

class="list">

1 

class="list">

از این به بعد از آن امر Emmet را در خط اول کدها و فیض ی آن را در خط دوم می‌نویسم تا یکجا و تر و تمیز باشند . 

اما 

شما به یک کلاس محدود نیستید و می توانید از یکسری کلاس استعمال کنید: 

h1 .heading .heading--primary 

class="heading heading--primary">

1 

2 

3 

h1 .heading .heading--primary 

class="heading heading--primary">

نشانه 

# نماد # (هشتگ – هش – number sign و … اسم های متفاوت این نماد هستند) در افزونه ی Emmet برای ما id می سازد . 

بنابراین: 

#app> .container 

id="app">

1 

2 

3 

#app> .container 

id="app">

علامت 

براکت زمانی از آرم براکت {} استعمال می کنیم که بخواهیم علاوه بر ساختن تگ، محتوای داخل تگ را هم معین کنیم . 

به نمونه های زیر نگاهی بیندازید: 

h2{What 

do I like ?}

What 

do I like ?

1 

2 

h2{What 

do I like ?}

What 

do I like ?

و 

همینطور: 

p .text>{Emmet 

is really }em{Cool}

class="text">Emmet is really Cool

1 

2 

p .text>{Emmet 

is really }em{Cool}

class="text">Emmet is really Cool

توضیح این نمونه اینطور است که مقدمه p .text یک عنصر

با کلاس آن‌گاه

محتوای این تگ را به یار {em{Cool به آن بیشتر کرده ایم . خودِ {em{Cool یعنی تگ که محتوای آن cool باشد . در‌صورتی‌که اعتنا نمائید سپس از p .text 

یک علامت < داریم؛ آیا می دانید این نماد چیست؟ 

نشانه 

< علامت < برای تولید موادسازنده تو در تو (nested) استفاده می شوند، یعنی عنصری باطن عنصری دیگر باشد . 

به مثال های ذیل توجه کنید: 

ul>li 

1 

2 

3 

4 

5 

ul>li 

و 

همینطور: 

.container> .card>h1 .card__title 

class="container"> 

1 

2 

3 

4 

5 

.container> .card>h1 .card__title 

class="container"> 

نشانه 

+ نماد 

+ به جای این‌که عناصر را به صورت تو در تو ایجاد کند، آن ها را به تیتر خواهر و برادر (تگ های sibling) تولید می کند: 

header+nav+main+aside+footer 

1 

2 

3 

4 

5 

6 

7 

header+nav+main+aside+footer 

آیا متوجه تفاوت نماد + و < شدید؟ تگ های خواهر و برادر، در کنار هم می باشند و هر دو یک مرحله را گرفته اند اما تگ های تو در تو باطن نیز قرار دارا‌هستند و یکی شامل ی دیگری هست . 

علامت 

^ این نشانه کمتر استعمال می شود . عمل این علامت برگشتن به تراز قبلی در تگ های تو در تو می‌باشد . 

به نمونه پایین دقت کنید: 

header>p>span^^footer 

1 

2 

3 

4 

5 

6 

header>p>span^^footer 

به فرمان Emmet (خط اول) در کد بالا نگاه کنید؛ نصیب ابتدایی آن می گوید header>p>span به این ترتیب تا تگ وارد گردیده ایم . اکنون در‌صورتی‌که بخواهیم برای تگ بعدی به عقب برگردیم باید از ^ استعمال کنیم . چرا دو بار؟ از آن جا که در مثال بالا تگ span داخل تگ p و تگ p داخل تگ header قرار دارد، برای بیشتر کردن یک تگ که با header اخوی باشد باید 2 سطح به عقب برگردیم براین اساس 2 توشه از علامت ^ به کار گیری کرده ایم . 

نوع 

بندی تگ ها با () احتمالا برای خیلی از شما تلاوت کدهای Emmet در بعضا موردها دشوار شود . اگر کدهای Emmet شما طولانی شد و نیاز به دستی بندی تگ هایتان داشتید می توانید از آرم پرانتز استفاده نمائید . 

مثال: 

(header>p>span)+footer 

1 

2 

3 

4 

5 

6 

(header>p>span)+footer 

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

مثال: 

( .card>h1 .card__title+h3 .card__subtitle+button{Click 

here})*3 

class="card"> 

Click here

class="card"> 

Click here

class="card"> 

Click here

1 

2 

3 

4 

5 

6 

7 

8 

9 

10 

11 

12 

13 

14 

15 

16 

17 

( .card>h1 .card__title+h3 .card__subtitle+button{Click 

here})*3 

class="card"> 

Click here

class="card"> 

Click here

class="card"> 

Click here

نشانه 

$ این قابلیت می تواند در هر کجا که بخواهید عدد بیشتر کند . 

به طور نمونه درصورتی که چندین عنصر داشته باشیم و بخواهیم به آن ها کلاس های page-1 تا page-4 را بدهیم می گوییم: 

.page-$*4 

class="page-1">

class="page-2">

class="page-3">

class="page-4">

1 

2 

3 

4 

5 

6 

.page-$*4 

class="page-1">

class="page-2">

class="page-3">

class="page-4">

حتی 

می توانید با به کار گیری از نشانه @ مشخص و معلوم کنید که عدد گذاری از چه عددی استارت شود: 

ul>li .item-$@3*3 

1 

2 

3 

4 

5 

6 

7 

ul>li .item-$@3*3 

آرم 

آکولاد آرم 

آکولاد [] وقتی به کارگیری می شود که شما بخواهید از attribute خاصی استعمال کنید: 

input[type=number] 

 type="number" /> 1 

2 

3 

input[type=number] 

 type="number" /> در صورتیکه 

بخواهید بخش اعظم از یک attribute به تگ خود بیش تر نمائید بایستی در میان attribute های متعدد فاصله قرار دهید: 

img[src=logo .png 

alt=logo] 

 alt="logo" /> 1 

2 

3 

img[src=logo .png 

alt=logo] 

 alt="logo" /> کد 

های پر کاربرد بهتر 

می باشد مدام کدهای Emmet پایین را به حافظه داشته باشید: