initial commit

3 files changed, 941 insertions, 0 deletions

diff --git a/files/fa/html/attributes/index.html b/files/fa/html/attributes/index.html
new file mode 100644
index 0000000000..70c73bc06b
--- /dev/null
+++ b/files/fa/html/attributes/index.html
@@ -0,0 +1,607 @@
+---
+title: مرجع صفت‌های HTML
+slug: HTML/Attributes
+translation_of: Web/HTML/Attributes
+---
+<p dir="rtl">عنصرها در HTM <strong>صفت‌ها</strong>یی دارند؛ این‌ها مقادیر اضافه‌ای هستند که عنصرها را پیکربندی می‌کنند یا رفتار آنها را در راه‌های گسترده‌ای به‌صورت مناسب با شرایطی که کاربران می‌خواهند تطبیق میدهند.</p>
+<table class="standard-table" dir="rtl">
+ <thead>
+  <tr>
+   <th style="text-align: center;">نام صفت</th>
+   <th style="text-align: center;">عنصرها</th>
+   <th style="text-align: center;">توضیح</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="text-align: center;">accept</td>
+   <td style="text-align: center;">{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
+   <td style="text-align: right;">فهرست انواعی که سرور قبول می‌کند، معمولا از نوع فایل.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">accept-charset</td>
+   <td style="text-align: center;">{{ HTMLElement("form") }}</td>
+   <td style="text-align: right;">فهرستی از مجموعه کاراکترهای پشتیبانی شده.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">accesskey</td>
+   <td style="text-align: center;"><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td style="text-align: right;">تعیین کلید میانبری از صفحه‌کلید جهت فعال‌سازی یا افزودن focus به عنصر مورد نظر.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">action</td>
+   <td style="text-align: center;">{{ HTMLElement("form") }}</td>
+   <td style="text-align: right;">نشانی فایلی که قرار است اطلاعات ارسالی از فرم را پردازش کند.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">align</td>
+   <td style="text-align: center;">{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }},  {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }},  {{ HTMLElement("td") }},  {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}</td>
+   <td style="text-align: right;">تنظیمات مربوط به چینش عنصر را تعیین می‌کند.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">alt</td>
+   <td>
+    <p style="text-align: center;">{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}</p>
+   </td>
+   <td style="text-align: right;">متن جایگزین تصویر، زمانی که تصویر قابل نمایش نباشد.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">async</td>
+   <td style="text-align: center;">{{ HTMLElement("script") }}</td>
+   <td style="text-align: right;">نشان‌دهنده‌ی این است که اسکریپت باید به صورت نامتقارن اجرا شود.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">autocomplete</td>
+   <td style="text-align: center;">{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
+   <td style="text-align: right;">نشان‌دهنده‌ی این است که آیا کنترل‌های موجود در این فرم قابلیت اختیار مقادیر پیش‌فرض مرورگر را دارند یا خیر.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">autofocus</td>
+   <td style="text-align: center;">{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td style="text-align: right;">بعد از بارگذاری صفحه، عنصر مورد نظر focus را به خود می‌گیرد.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">autoplay</td>
+   <td style="text-align: center;">{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+   <td style="text-align: right;">پخش صوت یا تصویر به محض آماده شدن.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">bgcolor</td>
+   <td style="text-align: center;">{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }}</td>
+   <td style="text-align: right;">
+    <p>رنگ پیش‌زمینه‌ی عنصر.</p>
+    <p>یادداشت: این یک صفت قدیمی است که باید از ویژگی {{ Cssxref("background-color") }} در CSS به جای آن استفاده کرد.</p>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <td style="text-align: center;">border</td>
+   <td style="text-align: center;">{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }}</td>
+   <td>
+    <p style="text-align: right;">نشان‌دهنده‌ی حاشیه‌ی عنصر مورد نظر.</p>
+    <p style="text-align: right;">یادداشت: این یک صفت قدیمی است که باید از ویژگی {{ Cssxref("border") }} در CSS به جای آن استفاده کرد.</p>
+   </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">buffered</td>
+   <td style="text-align: center;">{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+   <td style="text-align: right;">شامل بازه‌ی زمانی است که محتوای مورد نظر در آن بازه بافر شده است.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">challenge</td>
+   <td style="text-align: center;">{{ HTMLElement("keygen") }}</td>
+   <td style="text-align: right;">رشته‌ای از حروف که به همراه کلید عمومی ارسال می‌شود.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">charset</td>
+   <td style="text-align: center;">{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}</td>
+   <td style="text-align: right;">نوع کدگذاری کاراکترهای موجود در صفحه یا اسکریپت را تعیین می‌کند.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">checked</td>
+   <td style="text-align: center;">{{ HTMLElement("command") }}, {{ HTMLElement("input") }}</td>
+   <td style="text-align: right;">نشان‌دهنده‌ی این است که آیا عنصر مورد نظر در زمان بارگذاری صفحه باید انتخاب شود یا خیر.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">cite</td>
+   <td style="text-align: center;">{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}</td>
+   <td style="text-align: right;">به نشانی منبع نقل قول اشاره می‌کند.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">class</td>
+   <td style="text-align: center;"><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td style="text-align: right;">اغلب به همراه CSS به کار می‌رود تا عنصرهایی با ویژگی‌های مشترک را سبک‌دهی کند.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">code</td>
+   <td style="text-align: center;">{{ HTMLElement("applet") }}</td>
+   <td style="text-align: right;">نشانی فایل با پیشوند class که اپلت برای بارگذاری و اجراشدن به آن نیاز دارد را، شامل می‌شود.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">codebase</td>
+   <td style="text-align: center;">{{ HTMLElement("applet") }}</td>
+   <td style="text-align: right;">این صفت نشانی مطلق یا نسبی دایرکتوری که فایل‌های با پیشوند class مورد نیاز اپلت هستند، را شامل می‌شود.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">color</td>
+   <td style="text-align: center;">{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }}</td>
+   <td>
+    <p style="text-align: right;">این صفت رنگ متن را با توجه به دو الگوی "نام رنگ" یا "مقدار هگزادسیمال رنگ" مشخص می‌کند.</p>
+    <p style="text-align: right;">یادداشت: این یک صفت قدیمی است که باید از ویژگی {{ Cssxref("color") }} در CSS به جای آن استفاده کرد.</p>
+   </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">cols</td>
+   <td style="text-align: center;">{{ HTMLElement("textarea") }}</td>
+   <td style="text-align: right;">تعداد ستون‌های ناحیه‌ی متنی را مشخص می‌کند.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">colspan</td>
+   <td style="text-align: center;">{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td>
+   <td style="text-align: right;">تعداد ستون‌های یک سلول (خانه) از جدول را مشخص می‌کند.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">content</td>
+   <td style="text-align: center;">{{ HTMLElement("meta") }}</td>
+   <td style="text-align: right;">مقداری که منطبق با <code>http-equiv</code> یا <code>name</code> است.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">contenteditable</td>
+   <td style="text-align: center;"><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td style="text-align: right;">نشان‌دهنده‌ی این است که آیا محتوای عنصر قابل ویرایش هستنند یا خیر.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">contextmenu</td>
+   <td style="text-align: center;"><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td style="text-align: right;">ID یک {{ HTMLElement("menu") }} را به عنوان منو تعیین می‌کند.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">controls</td>
+   <td style="text-align: center;">{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+   <td style="text-align: right;">نشان‌دهنده‌ی این است که آیا مرورگر دکمه‌های کنترل فایل صوتی یا تصویری را باید نشان بدهد یا خیر.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">coords</td>
+   <td style="text-align: center;">{{ HTMLElement("area") }}</td>
+   <td style="text-align: right;">مجموعه‌ای از مقادیر که نشان‌دهنده‌ی مختصات ناحیه‌ی مورد نظر هستند.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">data</td>
+   <td style="text-align: center;">{{ HTMLElement("object") }}</td>
+   <td style="text-align: right;">نشانی منبع مورد نیاز را تعیین می‌کند.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">datetime</td>
+   <td style="text-align: center;">{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}</td>
+   <td style="text-align: right;">نشان‌دهنده‌ی تاریخ و زمان به کار رفته در عنصر مورد نظر است.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">default</td>
+   <td style="text-align: center;">{{ HTMLElement("track") }}</td>
+   <td style="text-align: right;">نشان‌دهنده‌ی این است که track قبل از اینکه تنظیمات کاربر تغییر کند، باید فعال شود.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">defer</td>
+   <td style="text-align: center;">{{ HTMLElement("script") }}</td>
+   <td style="text-align: right;">نشان‌دهنده‌ی این است که اسکریپت بلافاصله بعد از بارگذاری و تفسیر صفحه باید اجرا شود.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">dir</td>
+   <td style="text-align: center;"><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td style="text-align: right;">جهت نوشته‌شدن متن را مشخص می‌کند. مقادیر قابل قبول عبارتند از ltr (چپ به راست)و rtl (راست به چپ)</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">dirname</td>
+   <td style="text-align: center;">{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td style="text-align: center;"> </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">disabled</td>
+   <td style="text-align: center;">{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td style="text-align: right;">نشان‌دهنده‌ی این است که آیا کاربر امکان تعامل با عنصر مورد نظر را دارد یا خیر.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">draggable</td>
+   <td style="text-align: center;"><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td style="text-align: right;">قابلیت کشیده‌شدن عنصر (کلیک بر روی آن و حرکت دادنش) را تعیین می‌کند.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">dropzone</td>
+   <td style="text-align: center;"><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td style="text-align: right;">ناحیه‌ای که عنصر کشیده‌شده را می‌توان در آن رها (drop) کرد.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">enctype</td>
+   <td style="text-align: center;">{{ HTMLElement("form") }}</td>
+   <td style="text-align: right;">وقتی از <code>method</code> ای مانند POST برای ارسال مقادیر فرم استفاده می‌شود، این صفت نوع محتوای داده‌ای را در فرم تعیین می‌کند.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">for</td>
+   <td style="text-align: center;">{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td>
+   <td style="text-align: right;">تعیین عنصرهایی که به عنصر مورد نظر تعلق دارند.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">form</td>
+   <td style="text-align: center;">{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td style="text-align: right;">نشان‌دهنده‌ی فرمی است که مالک (پدر) عنصر مورد نظر است.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">headers</td>
+   <td style="text-align: center;">{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td>
+   <td style="text-align: right;">IDهای عنصر(های) &lt;th&gt; که به این عنصر مربوط می‌شوند.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">height</td>
+   <td style="text-align: center;">{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td>
+   <td dir="ltr" style="text-align: center;">
+    <p style="text-align: left;">در برخی کاربردها مانند {{ HTMLElement("div") }}، این یک صفت قدیمی است که باید از ویژگی {{ Cssxref("height") }} در CSS به جای آن استفاده کرد. در سایر موارد مانند {{ HTMLElement("canvas") }} استفاده از این صفت ضروری است.</p>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <td style="text-align: center;">hidden</td>
+   <td style="text-align: center;"><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td style="text-align: right;">ارتباط یک عنصر را نشان می‌دهد.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">high</td>
+   <td style="text-align: center;">{{ HTMLElement("meter") }}</td>
+   <td style="text-align: right;">پایین‌ترین مرز از بالاترین محدوده را نشان می‌دهد.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">href</td>
+   <td style="text-align: center;">{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }}</td>
+   <td style="text-align: right;">نشانی منبعی که پیوند (لینک) به آن اشاره دارد.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">hreflang</td>
+   <td style="text-align: center;">{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td>
+   <td style="text-align: right;">زبان منبعی که پیوند (لینک) به آن اشاره دارد.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">http-equiv</td>
+   <td style="text-align: center;">{{ HTMLElement("meta") }}</td>
+   <td style="text-align: center;"> </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">icon</td>
+   <td style="text-align: center;">{{ HTMLElement("command") }}</td>
+   <td style="text-align: right;">تصویری که نشان‌دهنده‌ی command باشد را تعیین می‌کند.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">id</td>
+   <td style="text-align: center;"><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td style="text-align: right;">اغلب با CSS به کار می‌رود تا عنصر مورد نظر را سبک دهی کند. مقدار این صفت باید منحصر به فرد (یکتا) باشد.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">ismap</td>
+   <td style="text-align: center;">{{ HTMLElement("img") }}</td>
+   <td style="text-align: right;">نشان‌دهنده‌ی این است که آیا تصویر بخشی از یک image map سمت سرور می‌باشد یا خیر.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">itemprop</td>
+   <td style="text-align: center;"><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td style="text-align: center;"> </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">keytype</td>
+   <td style="text-align: center;">{{ HTMLElement("keygen") }}</td>
+   <td style="text-align: right;">نوع کلید تولید شده را مشخص می‌کند.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">kind</td>
+   <td style="text-align: center;">{{ HTMLElement("track") }}</td>
+   <td style="text-align: right;">گونه‌ی متنی track را مشخص می‌کند.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">label</td>
+   <td style="text-align: center;">{{ HTMLElement("track") }}</td>
+   <td style="text-align: right;">متنی خوانا برای track مشخص می‌کند.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">lang</td>
+   <td style="text-align: center;"><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td style="text-align: right;">زبانی که در عنصر مورد نظر به کار رفته است را مشخص می‌کند.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">language</td>
+   <td style="text-align: center;">{{ HTMLElement("script") }}</td>
+   <td style="text-align: right;">زبان اسکریپت را در عنصر مورد نظر تعیین می‌کند.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">list</td>
+   <td style="text-align: center;">{{ HTMLElement("input") }}</td>
+   <td style="text-align: right;">فهرستی از گزینه‌های از پیش تعریف شده را برای کاربر مشخص می‌کند.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">loop</td>
+   <td style="text-align: center;">{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}</td>
+   <td style="text-align: right;">نشان‌دهنده‌ی این است که آیا محتوای مورد نظر (متن، صوت یا تصویر) پس از تمام شدن، دوباره باید اجرا شود یا به نمایش دربیاید یا خیر.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">low</td>
+   <td style="text-align: center;">{{ HTMLElement("meter") }}</td>
+   <td style="text-align: right;">بالاترین مرز از پایین‌ترین محدوده را نشان می‌دهد.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">manifest</td>
+   <td style="text-align: center;">{{ HTMLElement("html") }}</td>
+   <td style="text-align: right;">نشانی فایل cache manifest (جهت مرور آفلاین صفحات) را در سند مشخص می‌کند.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">max</td>
+   <td style="text-align: center;">{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td>
+   <td style="text-align: right;">نشان‌دهنده‌ی بیشترین مقدار مجاز است.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">maxlength</td>
+   <td style="text-align: center;">{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td style="text-align: right;">بیشترین تعداد کاراکترها را در عنصر مورد نظر تعیین می‌کند.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">media</td>
+   <td style="text-align: center;">{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}</td>
+   <td style="text-align: right;">بخش کوچکی از رسانه که منبع پیوند داده شده برای آن طراحی شده است، را مشخص می‌کند.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">method</td>
+   <td style="text-align: center;">{{ HTMLElement("form") }}</td>
+   <td style="text-align: right;">مشخص می‌کند که از کدام متد HTTP برای ارسال داده‌های فرم استفاده شود، که می‌تواند GET (پیش‌فرض) یا POST باشد.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">min</td>
+   <td style="text-align: center;">{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td>
+   <td style="text-align: right;">نشان‌دهنده‌ی کمترین مقدار مجاز است.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">multiple</td>
+   <td style="text-align: center;">{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
+   <td style="text-align: right;">
+    <p>نشان‌دهنده‌ی این است که آیا مقدارهای چندتایی می‌توانند در ورودی‌های <code>email</code> یا <code>file</code> وارد شوند یا خیر.</p>
+   </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">name</td>
+   <td style="text-align: center;">{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}</td>
+   <td dir="ltr" style="text-align: center;">
+    <p style="text-align: right;">نام عنصر. برای نمونه از این صفت برای شناسایی فیلدهای مورد نظر که به سمت سرور ارسال شده‌اند استفاده می‌شود.</p>
+   </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">novalidate</td>
+   <td style="text-align: center;">{{ HTMLElement("form") }}</td>
+   <td dir="ltr" style="text-align: center;">
+    <p style="text-align: right;">این صفت نشان‌دهنده‌ی این است که هنگام ارسال فرم، داده‌های آن نباید مورد سنجش و ارزیابی قرار بگیرند.</p>
+   </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">open</td>
+   <td style="text-align: center;">{{ HTMLElement("details") }}</td>
+   <td dir="ltr" style="text-align: center;">
+    <p style="text-align: right;">نشان‌دهنده‌ی این است که آیا جزییات زمان بارگذاری صفحه نمایش داده می‌شوند یا خیر.</p>
+   </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">optimum</td>
+   <td style="text-align: center;">{{ HTMLElement("meter") }}</td>
+   <td dir="ltr" style="text-align: center;">
+    <p style="text-align: right;">نشان‌دهنده‌ی مقدار عددی بهینه است.</p>
+   </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">pattern</td>
+   <td style="text-align: center;">{{ HTMLElement("input") }}</td>
+   <td dir="ltr" style="text-align: center;">
+    <p style="text-align: right;">عبارتی منظم را تعریف می‌کند که مقدار عنصر مورد نظر برابر آن مورد سنجش و ارزیابی قرار می‌گیرد.</p>
+   </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">ping</td>
+   <td style="text-align: center;">{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td>
+   <td style="text-align: center;"> </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">placeholder</td>
+   <td style="text-align: center;">{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td dir="ltr" style="text-align: center;">
+    <p style="text-align: right;">با نمایش کادری کوچک به کاربر اطلاع می‌دهد که چه چیزی در فیلد قابل نوشتن است.</p>
+   </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">poster</td>
+   <td style="text-align: center;">{{ HTMLElement("video") }}</td>
+   <td dir="ltr" style="text-align: center;">
+    <p style="text-align: right;">نشانی که به یک فریم از فیلم اشاره دارد تا زمانی که کاربر هنوز اقدام به پخش فیلم نکرده است به وی نمایش داده شود.</p>
+   </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">preload</td>
+   <td style="text-align: center;">{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+   <td style="text-align: right;">نشان‌دهنده‌ی این است که آیا تمام منبع، بخشی از آن یا هیچ چیز باید از قبل از اقدام کاربر برای پخش محتوا، بارگذاری شود.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">pubdate</td>
+   <td style="text-align: center;">{{ HTMLElement("time") }}</td>
+   <td dir="ltr" style="text-align: center;">
+    <p dir="rtl" style="text-align: right;">نشان‌دهنده‌ی این است که آیا این تاریخ و زمان مطابق با تاریخ نزدیک‌ترین عنصر {{ HTMLElement("article") }} والد خود است یا خیر.</p>
+   </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">radiogroup</td>
+   <td style="text-align: center;">{{ HTMLElement("command") }}</td>
+   <td style="text-align: center;"> </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">readonly</td>
+   <td style="text-align: center;">{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td dir="ltr" style="text-align: center;">
+    <p dir="rtl" style="text-align: right;">نشان‌دهنده‌ی این است که آیا این عنصر قابل ویرایش است یا خیر.</p>
+   </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">rel</td>
+   <td style="text-align: center;">{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td>
+   <td style="text-align: right;">ارتباط بین شی هدف و شی پینوندی را مشخص می‌کند.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">required</td>
+   <td style="text-align: center;">{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td style="text-align: right;">نشان‌دهنده‌ی این است که آیا این عنصر (از فرم) نیاز به تکمیل شدن از طرف کاربر دارد یا خیر.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">reversed</td>
+   <td style="text-align: center;">{{ HTMLElement("ol") }}</td>
+   <td style="text-align: right;">نشان‌دهنده‌ی این است که آیا فهرست باید به ترتیب نزولی نمایش داده شود، بر خلاف ترتیب صعودی.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">rows</td>
+   <td style="text-align: center;">{{ HTMLElement("textarea") }}</td>
+   <td style="text-align: right;">تعداد سطرهای ناحیه‌ی متنی را مشخص می‌کند.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">rowspan</td>
+   <td style="text-align: center;">{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td>
+   <td style="text-align: right;">تعداد سطرهایی که سلول (خانه) جدول باید بر اساس آن ایجاد شود را مشخص می‌‌کند.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">sandbox</td>
+   <td style="text-align: center;">{{ HTMLElement("iframe") }}</td>
+   <td style="text-align: center;"> </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">spellcheck</td>
+   <td style="text-align: center;"><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td style="text-align: right;">نشان‌دهنده‌ی این است که آیا عملیات بررسی واژه‌ها برای این عنصر مجاز است یا خیر.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">scope</td>
+   <td style="text-align: center;">{{ HTMLElement("th") }}</td>
+   <td style="text-align: center;"> </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">scoped</td>
+   <td style="text-align: center;">{{ HTMLElement("style") }}</td>
+   <td style="text-align: center;"> </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">seamless</td>
+   <td style="text-align: center;">{{ HTMLElement("iframe") }}</td>
+   <td style="text-align: center;"> </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">selected</td>
+   <td style="text-align: center;">{{ HTMLElement("option") }}</td>
+   <td style="text-align: right;">مقداری را تعیین می‌کند که در زمان بارگذاری صفحه، در فهرست انتخاب شده است.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">shape</td>
+   <td style="text-align: center;">{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td>
+   <td style="text-align: center;"> </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">size</td>
+   <td style="text-align: center;">{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
+   <td style="text-align: right;">عرض عنصر را (بر اساس پیکسل) تعیین می‌کند. اگر عنصر مورد نظر از نوع <code>text</code> یا <code>password</code> باشد این صفت تعداد کاراکترهای عنصر را تعیین می‌کند.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">sizes</td>
+   <td style="text-align: center;">{{ HTMLElement("link") }}</td>
+   <td style="text-align: center;"> </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">span</td>
+   <td style="text-align: center;">{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}</td>
+   <td style="text-align: center;"> </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">src</td>
+   <td style="text-align: center;">{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}</td>
+   <td style="text-align: right;">نشانی فایلی که عنصر مورد نظر از آن به عنوان منبع استفاده می‌کند.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">srcdoc</td>
+   <td style="text-align: center;">{{ HTMLElement("iframe") }}</td>
+   <td style="text-align: center;"> </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">srclang</td>
+   <td style="text-align: center;">{{ HTMLElement("track") }}</td>
+   <td style="text-align: center;"> </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">start</td>
+   <td style="text-align: center;">{{ HTMLElement("ol") }}</td>
+   <td style="text-align: right;">اولین عدد در فهرست را تعیین می‌کند، اگر غیر از ۱ باشد.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">step</td>
+   <td style="text-align: center;">{{ HTMLElement("input") }}</td>
+   <td style="text-align: center;"> </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">style</td>
+   <td style="text-align: center;"><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td style="text-align: right;">سبک‌های CSS را تعریف می‌کند که در صورت وجود فایل‌های قدیمی بر روی آن‌ها نوشته می‌شوند.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">summary</td>
+   <td style="text-align: center;">{{ HTMLElement("table") }}</td>
+   <td style="text-align: center;"> </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">tabindex</td>
+   <td style="text-align: center;"><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td style="text-align: right;">با ویرایش این صفت، ترتیب انتخاب شدن عنصر‌های صفحه در مرورگر به حالتی که برایش تعیین شود تغییر می‌یابد.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">target</td>
+   <td style="text-align: center;">{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }}</td>
+   <td style="text-align: center;"> </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">title</td>
+   <td style="text-align: center;"><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td style="text-align: right;">متنی که در یک کادر کوچک با قرار دادن mouse روی عنصر مورد نظر نمایش می‌یابد.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">type</td>
+   <td style="text-align: center;">{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}</td>
+   <td style="text-align: right;">نوع عنصر را تعریف می‌کند.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">usemap</td>
+   <td style="text-align: center;">{{ HTMLElement("img") }},  {{ HTMLElement("input") }}, {{ HTMLElement("object") }}</td>
+   <td style="text-align: center;"> </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">value</td>
+   <td style="text-align: center;">{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}</td>
+   <td style="text-align: right;">مقدار پیش‌فرضی که در زمان بارگذاری صفحه برای عنصر انتخاب می‌شود را تعیین می‌کند.</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">width</td>
+   <td style="text-align: center;">{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td>
+   <td dir="ltr" style="text-align: center;">
+    <p style="text-align: left;">در برخی موارد مانند {{ HTMLElement("div") }} این یک صفت قدیمی به حساب می‌آید که باید از ویژگی {{ Cssxref("width") }} در CSS به جای آن استفاده کرد. در سایر موارد مانند {{ HTMLElement("canvas") }} این یک صفت ضروری است که باید ذکر شود.</p>
+   </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">wrap</td>
+   <td style="text-align: center;">{{ HTMLElement("textarea") }}</td>
+   <td style="text-align: right;">نشان‌دهنده‌ی این است که آیا متن باید کوتاه شود یا خیر.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 dir="ltr" id="Content_versus_IDL_attributes" style="margin-bottom: 20px; font-size: 28px; line-height: 28px; color: rgb(77, 78, 83); text-align: left;">Content versus IDL attributes</h2>
+<p dir="ltr" style="line-height: 1.5em; color: rgb(77, 78, 83);">In HTML, most attributes have two faces: the <strong>content attribute</strong> and the <strong>IDL attribute</strong>.</p>
+<p dir="ltr" style="line-height: 1.5em; color: rgb(77, 78, 83);">The content attribute is the attribute as you set it from the content (the HTML code) and you can set it or get it via {{domxref("element.setAttribute()")}} or {{domxref("element.getAttribute()")}}. The content attribute is always a string even when the expected value should be an integer. For example, to set an {{HTMLElement("input")}} element's <code style="font-size: 14px;">maxlength</code> to 42 using the content attribute, you have to call<code style="font-size: 14px;">setAttribute("maxlength", "42")</code> on that element.</p>
+<p dir="ltr" style="line-height: 1.5em; color: rgb(77, 78, 83);">The IDL attribute is also known as a JavaScript property. These are the attributes you can read or set using JavaScript properties like <code class="moz-txt-verticalline" style="font-size: 14px;">element.foo</code>. The IDL attribute is always going to use (but might transform) the underlying content attribute to return a value when you get it and is going to save something in the content attribute when you set it. In other words, the IDL attributes, in essence, reflect the content attributes.</p>
+<p dir="rtl" style="line-height: 1.5em; color: rgb(77, 78, 83);">Most of the time, IDL attributes will return their valules as they are really used. For example, the default <code style="font-size: 14px;">type</code> for {{HTMLElement("input")}} elements is "text", so if you set<code style="font-size: 14px;">input.type="foobar"</code>, the <code style="font-size: 14px;">&lt;input&gt;</code> element will be of type text (in the appearance and the behavior) but the "type" content attribute's value will be "foobar". However, the<code style="font-size: 14px;">type</code> IDL attribute will return the string "text".</p>
+<p dir="ltr" style="line-height: 1.5em; color: rgb(77, 78, 83);">IDL attributes are not always strings; for example, <code style="font-size: 14px;">input.maxlength</code> is a number (a signed long). When using IDL attributes, you read or set values of the desired type, so<code style="font-size: 14px;">input.maxlength</code> is always going to return a number and when you set<code style="font-size: 14px;">input.maxlength</code> ,it wants a number. If you pass another type, it is automatically converted to a number as specified by the standard JavaScript rules for type conversion.</p>
+<p dir="ltr" style="line-height: 1.5em; color: rgb(77, 78, 83);">IDL attributes can <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">reflect other types</a> such as unsigned long, URLs, booleans, etc. Unfortunately, there are no clear rules and the way IDL attributes behave in conjunction with their corresponding content attributes depends on the attribute. Most of the time, it will follow <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">the rules laid out in the specification</a>, but sometimes it doesn't. HTML specifications try to make this as developer-friendly as possible, but for various reasons (mostly historical), some attributes  behave oddly (<code style="font-size: 14px;">select.size</code>, for example) and you should read the specifications to understand how exactly they behave.</p>
+<h2 dir="ltr" id="See_also" style="margin-bottom: 20px; font-size: 28px; line-height: 28px; color: rgb(77, 78, 83);">See also</h2>
+<ul dir="ltr" style="margin-bottom: 1.286em; padding-left: 0px; list-style-type: none; color: rgb(77, 78, 83);">
+ <li style="padding-bottom: 0px;"><a href="https://developer.mozilla.org/en-US/docs/HTML/Element" title="/en-US/docs/HTML/Element">HTML elements</a></li>
+</ul>
diff --git a/files/fa/html/canvas/drawing_graphics_with_canvas/index.html b/files/fa/html/canvas/drawing_graphics_with_canvas/index.html
new file mode 100644
index 0000000000..9cacec88bf
--- /dev/null
+++ b/files/fa/html/canvas/drawing_graphics_with_canvas/index.html
@@ -0,0 +1,179 @@
+---
+title: رسم گرافیک با Canvas
+slug: HTML/Canvas/Drawing_Graphics_with_Canvas
+translation_of: Web/API/Canvas_API/Tutorial
+---
+<div class="note">
+  <p dir="rtl">بخش عمده‌ای از این مطلب (به جز مستندات drawWindow) به صفحه‌ی اصلی <a href="/en/Canvas_tutorial" title="/en/Canvas_tutorial">آموزش Canvas</a> منتقل شده است، بنابراین این صفحه نیز به احتمال زیاد به آن قسمت منتقل می‌شود تا از ایجاد محتوای تکراری جلوگیری شود.</p>
+</div>
+<h3 dir="rtl" id="Introduction" name="Introduction">مقدمه</h3>
+<p dir="rtl">با انتشار <a href="/en/Firefox_1.5_for_developers" title="/en/Firefox_1.5_for_developers">فایرفاکس ۱.۵</a>، عنصر جدیدی از HTML برای برنامه‌نویسی حالت گرافیکی در فایرفاکس به وجود آمد. <code>&lt;canvas&gt;</code> بر اساس <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas" title="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">مستندات WHATWG برای Canvas</a> پیاده‌سازی شده است که خود این مستندات نیز بر پایه‌ی عنصر <code>&lt;canvas&gt;</code> در مرورگر سافاری از اپل ایجاد شده است. از آن می‌توان برای ترسیم نمودار، عنصرهای واسط کاربری و سایر عنصرهای گرافیکی در مرورگر استفاده کرد.</p>
+<p dir="rtl"><code>&lt;canvas&gt;</code> با ایجاد یک سطح ترسیمی با اندازه‌ی ثابت سبب می‌شود که یک یا چند <em>فضای گرافیکی</em> به وجود بیایند. در این مقاله ما بر روی فضای گرافیکی ۲ بعدی تمرکز می‌کنیم. برای گرافیک ۳ بعدی، شما باید از <a href="/en/WebGL" title="/en/WebGL">فضای گرافیکی WebGL</a> استفاده کنید.</p>
+<h3 dir="rtl" id="The_2D_Rendering_Context" name="The_2D_Rendering_Context">فضای گرافیکی ۲ بعدی</h3>
+<h4 dir="rtl" id="یک_نمونه‌ی_ساده">یک نمونه‌ی ساده</h4>
+<p dir="rtl">برای شروع، با نمونه‌ای ساده که دو مستطیل با فضای مشترک شفاف مشخص شده‌اند، آغاز می‌کنیم:</p>
+<p><img align="right" alt="Example 1." class="internal" src="/@api/deki/files/602/=Canvas_ex1.png"></p>
+<pre class="brush: js">&lt;html&gt;
+ &lt;head&gt;
+  &lt;script type="application/javascript"&gt;
+function draw() {
+ var canvas = document.getElementById("canvas");
+ var ctx = canvas.getContext("2d");
+
+ ctx.fillStyle = "rgb(200,0,0)";
+ ctx.fillRect (10, 10, 55, 50);
+
+ ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+ ctx.fillRect (30, 30, 55, 50);
+}
+  &lt;/script&gt;
+ &lt;/head&gt;
+ &lt;body onload="draw()"&gt;
+   &lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<p dir="rtl">تابع <code>draw</code> با دریافت عنصر <code>canvas</code> فضای ۲ بعدی آن را مشخص می‌کند. شی <code>ctx</code> می‌تواند برای رسم گرافیک روی بوم استفاده شود. در این کد، دو مستطیل با تنظیمات <code>fillStyle</code> و <code>fiilRect</code> با فضای مشترک شفاف رسم می‌شوند. <code>fillStyle</code> دوم از <code>rgba</code> برای مشخص کردن شفافیت با رنگ مورد نظر، استفاده می‌کند.</p>
+<p dir="rtl"><code>fillRect</code> برای رسم مستطیل، <code>strokeRect</code> برای رسم حاشیه‌های مستطیل و <code>clearRect</code> برای پاک‌کردن مستطیل استفاده می‌شوند. برای ایجاد شکل‌های پیچیده‌تر، از مسیرها استفاده می‌شود.</p>
+<h4 dir="rtl" id="Using_Paths" name="Using_Paths">استفاده از مسیرها</h4>
+<p dir="rtl">تابع <code>beginPath</code> یک مسیر جدید را آغاز می‌کند و متدهای <code>moveTo</code>, <code>lineTo</code>, <code>arcTo</code>, <code>arc</code> و از این قبیل، بخش‌های مختلفی را به مسیر تعریف‌شده اضافه می‌کنند. مسیر ایجاد شده توسط تابع <code>closePath</code> بسته می‌شود. زمانی که یک مسیر ایجاد شود، شما می‌توانید با <code>fill</code> یا <code>stroke</code> فضای داخل یا حاشیه‌ی مسیر را روی بوم رسم کنید.</p>
+<p><img align="right" alt="Example 2." class="internal" src="/@api/deki/files/603/=Canvas_ex2.png"></p>
+<pre class="brush: js">&lt;html&gt;
+ &lt;head&gt;
+  &lt;script type="application/javascript"&gt;
+function draw() {
+  var canvas = document.getElementById("canvas");
+  var ctx = canvas.getContext("2d");
+
+  ctx.fillStyle = "red";
+
+  ctx.beginPath();
+  ctx.moveTo(30, 30);
+  ctx.lineTo(150, 150);
+  // was: ctx.quadraticCurveTo(60, 70, 70, 150); which is wrong.
+  ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // &lt;- this is right formula for the image on the right -&gt;
+  ctx.lineTo(30, 30);
+  ctx.fill();
+}
+   &lt;/script&gt;
+ &lt;/head&gt;
+ &lt;body onload="draw()"&gt;
+   &lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<p dir="rtl">فراخوانی هر یک از توابع <code>fill</code> یا <code>stroke</code>، روی مسیر فعلی تاثیر می‌گذارد. اگر دوباره قصد رنگ‌آمیزی یا ایجاد حاشیه در مسیر را داشته باشیم باید مجدد آن را تعریف کنیم.</p>
+<h4 dir="rtl" id="Graphics_State" name="Graphics_State">حالت گرافیکی</h4>
+<p dir="rtl">صفت‌های یک فضای گرافیکی مانند <code>fillStyle</code>, <code>strokeStyle</code>, <code>lineWidth</code> و <code>lineJoin</code> قسمتی از حالت گرافیکی فعلی هستند. فضای گرافیکی شامل دو متد <code>save</code> و <code>restore</code> است که می‌توانند برای انتقال حالت کنونی به مجموعه‌ی حالت‌ها یا از مجموعه‌ی حالت‌ها استفاده شوند.</p>
+<h4 dir="rtl" id="A_More_Complicated_Example" name="A_More_Complicated_Example">یک نمونه‌ی پیچیده‌تر</h4>
+<p dir="rtl">در ادامه به نمونه‌ای پیچیده‌تر می‌پردازیم که شامل مسیرها، حالت، و همچنین ماتریس انتقال است. متدهای این فضا یعنی <code>translate</code>, <code>scale</code> و <code>rotate</code> برای انتقال ماتریس  به کار می‌روند که تمامی نقطه‌های ایجاد شده ابتدا توسط این ماتریس منتقل می‌شوند.</p>
+<p><img align="right" alt="Example 3." class="internal" src="/@api/deki/files/604/=Canvas_ex3.png"></p>
+<pre class="brush: js"> &lt;html&gt;
+  &lt;head&gt;
+   &lt;script type="application/javascript"&gt;
+ function drawBowtie(ctx, fillStyle) {
+
+   ctx.fillStyle = "rgba(200,200,200,0.3)";
+   ctx.fillRect(-30, -30, 60, 60);
+
+   ctx.fillStyle = fillStyle;
+   ctx.globalAlpha = 1.0;
+   ctx.beginPath();
+   ctx.moveTo(25, 25);
+   ctx.lineTo(-25, -25);
+   ctx.lineTo(25, -25);
+   ctx.lineTo(-25, 25);
+   ctx.closePath();
+   ctx.fill();
+ }
+
+ function dot(ctx) {
+   ctx.save();
+   ctx.fillStyle = "black";
+   ctx.fillRect(-2, -2, 4, 4);
+   ctx.restore();
+ }
+
+ function draw() {
+   var canvas = document.getElementById("canvas");
+   var ctx = canvas.getContext("2d");
+
+   // note that all other translates are relative to this
+   // one
+   ctx.translate(45, 45);
+
+   ctx.save();
+   //ctx.translate(0, 0); // unnecessary
+   drawBowtie(ctx, "red");
+   dot(ctx);
+   ctx.restore();
+
+   ctx.save();
+   ctx.translate(85, 0);
+   ctx.rotate(45 * Math.PI / 180);
+   drawBowtie(ctx, "green");
+   dot(ctx);
+   ctx.restore();
+
+   ctx.save();
+   ctx.translate(0, 85);
+   ctx.rotate(135 * Math.PI / 180);
+   drawBowtie(ctx, "blue");
+   dot(ctx);
+   ctx.restore();
+
+   ctx.save();
+   ctx.translate(85, 85);
+   ctx.rotate(90 * Math.PI / 180);
+   drawBowtie(ctx, "yellow");
+   dot(ctx);
+   ctx.restore();
+ }
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body onload="draw()"&gt;
+    &lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
+  &lt;/body&gt;
+ &lt;/html&gt;
+</pre>
+<p dir="rtl">قطعه کد بالا دو متد <code>drawBowtie</code> و <code>dot</code> را که هر کدام ۴ مرتبه فراخوانی شده‌اند، دربرمی‌گیرد. قبل از هر فراخوانی، از متدهای <code>translate</code> و <code>rotate</code> برای ایجاد ماتریس انتقال استفاده می‌شود که به ترتیب نقطه و پاپیون را مکان‌دهی می‌کنند. <code>dot</code> یک مستطیل کوچک به مرکز (0, 0) و <code>drawBowtie</code> یک پاپیون کوچک را با استفاده از مسیرها و رنگ مورد نظر به وجود می‌آورد.</p>
+<p dir="rtl">هر چه عملیات ماتریس انباشته‌تر می‌شوند، متدهای <code>save</code> و <code>restore</code> برای ذخیره‌سازی و بازگرداندن حالت گرافیکی استفاده می‌شوند. چیزی که باید به یاد داشت این است که چرخش همیشه در مسیر فعلی شکل می‌گیرد یعنی ترتیب<code> translate() rotate() translate()</code> به یک شکل و ترتیب <code>translate() translate() rotate()</code> به شکلی دیگر منجر می‌شوند.</p>
+<h3 dir="rtl" id="Compatibility_With_Apple_.3Ccanvas.3E" name="Compatibility_With_Apple_.3Ccanvas.3E">سازگاری با عنصر &lt;canvas&gt; اپل</h3>
+<p dir="rtl">در اکثر موارد، <code>&lt;canvas&gt;</code> با نمونه‌ی پیاده‌سازی شده‌ی اپل سازگاری دارد. اگرچه چند مورد هستند که باید به آن‌ها توجه کرد.</p>
+<h4 dir="rtl" id="Required_.3C.2Fcanvas.3E_tag" name="Required_.3C.2Fcanvas.3E_tag">برچسب پایانی مورد نیاز است</h4>
+<p dir="rtl">در پیاده‌سازی سافاری از اپل، <code>&lt;canvas&gt;</code> عنصری است که مشابه <code>&lt;img&gt;</code> پیاده‌سازی شده است، یعنی به برچسب پایانی نیازی ندارد. اگرچه، برای این‌که <code>&lt;canvas&gt;</code> به صورت گسترده در وب استفاده شود، برخی امکانات برای محتوای بازگشتی بایستی فراهم شوند. از این رو، پیاده‌سازی موزیلا از این عنصر، نیازمند استفاده از برچسب پایانی است.</p>
+<p dir="rtl">اگر به محتوای بازگشتی نیازی نباشد، یک نمونه‌ی ساده مانند <code>&lt;canvas id="foo" ...&gt;&lt;/canvas&gt;</code> با هر دو پیاده‌سازی سافاری و موزیلا سازگاری دارد، با این تفاوت که سافاری برچسب پایانی را در نظر نمی‌گیرد.</p>
+<p dir="rtl">اگر محتوای بازگشتی مورد استفاده قرار گیرد، بایستی از برخی تکنیک‌های CSS برای ایجاد آن در سافاری استفاده کرد و همچنین از برخی تکنیک‌ها برای فهماندن این مطلب به IE!</p>
+<h3 dir="rtl" id="Additional_Features" name="Additional_Features">ویژگی‌های دیگر</h3>
+<h4 dir="rtl" id="فراهم‌کردن_محتوای_وب_در_داخل_Canvas">فراهم‌کردن محتوای وب در داخل Canvas</h4>
+<div class="note" dir="rtl">
+  این ویژگی تنها با مجوزهای مرورگر Chrome قابل اعمال است و در صفحه‌های HTML معمولی استفاده نمی‌شود. <a href="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352" title="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352">علت آن را بدانید</a>.</div>
+<p dir="rtl">پیاده‌سازی موزیلا از <code>canvas</code> با استفاده از متد <a href="/en/DOM/CanvasRenderingContext2D#drawWindow()" title="/en/DOM/CanvasRenderingContext2D#drawWindow()"><code>drawWindow</code></a> گسترش یافته است. این متد تصویری از یک <code>صفحه‌ی</code> DOM را در داخل canvas رسم می‌کند. برای نمونه:</p>
+<p>Mozilla's <code>canvas</code> is extended with the <a href="/en/DOM/CanvasRenderingContext2D#drawWindow()" title="en/DOM/CanvasRenderingContext2D#drawWindow()"><code>drawWindow()</code></a> method. This method draws a snapshot of the contents of a DOM <code>window</code> into the canvas. For example,</p>
+<pre class="brush: js">ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)");
+</pre>
+<p dir="rtl">قطعه‌کد بالا محتوای پنجره‌ی فعلی را در مستطیلی با ابعاد ذکر شده به پیکسل نسبت به گوشه‌ی بالا و چپ پنچره در یک پیش‌زمینه‌ی سفید از بوم، رسم می‌کند. با مشخص کردن "rgba(255,255,255,0)" به عنوان رنگ، محتوا با پیش‌زمینه‌ی شفاف رسم می‌شود.</p>
+<p dir="rtl">معمولا استفاده از رنگ پیش‌زمینه‌ای به جز سفید "rgb(255,255,255)" یا شفاف کار درستی نیست چرا که تمامی مرورگرها از این استاندارد برای نمایش صفحات وب استفاده می‌کنند.</p>
+<p dir="rtl">با این روش، ممکن است بتوان یک IFRAME پنهان با محتوای دلخواه (برای نمونه متنی که با CSS سبک‌دهی شده باشد یا SVG) را در یک بوم رسم کرد، که به این صورت می‌توان آن را مقیاس‌دهی کرد یا چرخاند یا هر عمل دیگری که با انتقال‌های فعلی می‌توان انجام داد.</p>
+<p dir="rtl">Ted Mielczarek با افزونه‌ی <a href="http://ted.mielczarek.org/code/mozilla/tabpreview/" title="http://ted.mielczarek.org/code/mozilla/tabpreview/">tab preview</a> خود در chrome این امکان را فراهم می‌کند تا بتوان تصویرهای کوچک از وب‌سایت‌ها را مشاهده کرد، و کد آن نیز در دسترس است.</p>
+<div class="note" dir="rtl">
+  <strong>یادداشت</strong>: استفاده از <code>canvas.drawWindow()</code> در داخل رخداد <code>onload</code> سند عمل نمی‌کند. در فایرفاکس ۳.۵ به بعد، می‌توان با استفاده از رخداد <a href="/en/Gecko-Specific_DOM_Events#MozAfterPaint" title="/en/Gecko-Specific_DOM_Events#MozAfterPaint">MozAfterPaint</a> این حالت را در زمان بارگذاری صفحه پیاده‌سازی کرد.</div>
+<h3 id="See_also" name="See_also">See also</h3>
+<ul>
+  <li><a href="/en/HTML/Canvas" title="en/HTML/Canvas">Canvas topic page</a></li>
+  <li><a href="/en/Canvas_tutorial" title="en/Canvas_tutorial">Canvas tutorial</a></li>
+  <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">WHATWG specification</a></li>
+  <li><a class="external" href="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html" title="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html">Apple Canvas Documentation</a></li>
+  <li><a class="external" href="http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html">Rendering Web Page Thumbnails</a></li>
+  <li>Some <a href="/Special:Tags" title="Site Tags">examples</a>:
+    <ul>
+      <li><a class="external" href="http://azarask.in/projects/algorithm-ink">Algorithm Ink</a></li>
+      <li><a class="external" href="http://www.tapper-ware.net/canvas3d/">OBJ format 3D Renderer</a></li>
+      <li><a href="/en/A_Basic_RayCaster" title="en/A_Basic_RayCaster">A Basic RayCaster</a></li>
+      <li><a class="external" href="http://awordlike.textdriven.com/">The Lightweight Visual Thesaurus</a></li>
+      <li><a class="external" href="http://caimansys.com/painter/">Canvas Painter</a></li>
+    </ul>
+  </li>
+  <li><a href="/Special:Tags" title="Site Tags">And more...</a></li>
+</ul>
+<p>{{ languages( { "fr": "fr/Dessiner_avec_canvas", "ja": "ja/Drawing_Graphics_with_Canvas", "pl": "pl/Rysowanie_grafik_za_pomoc\u0105_Canvas", "ko": "ko/Drawing_Graphics_with_Canvas" } ) }}</p>
diff --git a/files/fa/html/html5/index.html b/files/fa/html/html5/index.html
new file mode 100644
index 0000000000..f2ae6b581b
--- /dev/null
+++ b/files/fa/html/html5/index.html
@@ -0,0 +1,155 @@
+---
+title: HTML5
+slug: HTML/HTML5
+translation_of: Web/Guide/HTML/HTML5
+---
+<p dir="rtl"><span class="seoSummary">HTML5 آخرین نسخه از مجموعه استانداردهای <a href="/fa/docs/HTML" title="/fa/docs/HTML">HTML</a> است</span>، که نشان‌دهنده‌ی دو مفهوم متفاوت است:</p>
+
+<ul dir="rtl">
+ <li>نسخه‌ای جدید از <em>زبان</em> HTML، با عنصرهای جدید، صفت‌ها و رفتار آن‌ها.</li>
+ <li>مجموعه‌ای بزرگتر از فناوری‌ها که منجر به تولید وب‌سایت‌ها و برنامه‌های قدرتمند و گوناگونی می‌شوند: که به این مجموعه <em>HTML5 و دوستان</em> یا به اختصار HTML5 گفته می‌شود.</li>
+</ul>
+
+<p dir="rtl"><span class="seoSummary">این صفحه به منابع متفاوتی از فناوری‌های HTML5 پیوند خورده است، دسته‌بندی شده در گروه‌های مختلف</span>، که هر گروه دربرگیرنده‌ی فعالیتی متفاوت است: <em>semantics (عنصر‌های معناگرا)</em>، که در توضیح هر چه بیشتر و دقیق‌تر محتوا نقش دارند، <em>connectivity (اتصال)</em>، که روش‌های جدیدی برای برقراری ارتباط با سرور معرفی می‌کند، <em>offline &amp; storage (ذخیره‌سازی آفلاین)</em>، که وب‌سایت را برای ذخیره‌ی داده‌های آفلاین و عملکرد بهتر زمانی که مرورگر کاربر در حالت آفلاین قرار دارد بهینه می‌کند، <em>multimedia (محتوای چندرسانه‌ای)</em>، که صوت و تصویر را به عنوان شهروند درجه یک وب معرفی می‌کند، <em>3D، Graphics &amp; Effects (سه‌بعدی، گرافیک و جلوه‌های تصویری)</em>، که به ارایه‌ی جلوه‌های تصویری پیچیده‌تر منجر می‌شود، <em>performance &amp; integration (عملکرد و جامعیت)</em>، که وب‌سایتی سریع‌تر و در عین حال منطبق‌تر با رایانه‌ی کاربر می‌سازد، <em>device access (دسترسی از طریق سایر دستگاه‌ها)</em>، که اجازه‌ی استفاده‌ی دستگاه‌های ورودی/خروجی بیشتری را می‌دهد، و <em>styling (سبک‌دهی)</em>، که دست توسعه‌دهندگان در ایجاد قالب‌های پیچیده‌تر را باز می‌کند.</p>
+
+<div class="cleared row topicpage-table">
+<div class="section">
+<h2 dir="rtl" id="Semantics_(عنصرهای_معناگرا)" style="margin: 0px 0px 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Semantics (عنصرهای معناگرا)</h2>
+
+<dl>
+ <dt dir="rtl"><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document">بخش‌های مختلف صفحه در HTML5</a></dt>
+ <dd dir="rtl">نگاهی به عنصرهای بخش‌بندی صفحه در HTML5:</dd>
+ <dd>{{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }} و {{ HTMLElement("hgroup") }}.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/Using_HTML5_audio_and_video" title="/en-US/docs/Using_HTML5_audio_and_video">استفاده از audio و vedio در HTML5</a></dt>
+ <dd dir="rtl">عنصرهای {{ HTMLElement("audio") }} و {{ HTMLElement("video") }} با قرارگرفتن در صفحه، اجازه‌ی تغییراتی جدید در نحوه‌ی اجرای محتوای چندرسانه‌ای را می‌دهند.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/HTML/Forms_in_HTML" title="/en-US/docs/HTML/Forms_in_HTML">فرم‌ها در HTML5</a></dt>
+ <dd dir="rtl">نگاهی به بهبودهای ایجادشده در فرم‌های وب، constraint validation API، چند صفت جدید، مقدارهای جدیدی برای {{ HTMLElement("input") }} صفت {{ htmlattrxref("type", "input") }} و عنصر جدید {{ HTMLElement("output") }}.</dd>
+ <dt dir="rtl">عنصرهای معناگرای جدید</dt>
+ <dd dir="rtl">علاوه بر عنصرهای بخش‌بندی، رسانه و فرم، عنصرهای متعددی مانند {{ HTMLElement("mark") }}، {{ HTMLElement("figure") }}، {{ HTMLElement("figcaption") }}، {{ HTMLElement("data") }}، {{ HTMLElement("time") }}، {{ HTMLElement("output") }}، {{ HTMLElement("progress") }}، یا {{ HTMLElement("meter") }} تعداد <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="/en-US/docs/HTML/HTML5/HTML5_element_list">عنصرهای مجاز HTML5</a> را افرایش می‌دهند.</dd>
+ <dt dir="rtl">بهبودهای ایجادشده در {{HTMLElement("iframe")}}</dt>
+ <dd dir="rtl">با استفاده از صفت‌های{{htmlattrxref("sandbox", "iframe")}}، {{htmlattrxref("seamless", "iframe")}} و {{htmlattrxref("srcdoc", "iframe") }} توسعه‌دهندگان می‌توانند میزان امنیت و کارکرد یک عنصر {{HTMLElement("iframe")}} را به دقت بررسی کنند.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/MathML" title="/en-US/docs/MathML">MathML</a></dt>
+ <dd dir="rtl">استفاده از فرمول‌های ریاضی را به صورت مستقیم در کد، ممکن می‌سازد.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="/en-US/docs/HTML/HTML5/Introduction_to_HTML5">مقدمه‌ای بر HTML5</a></dt>
+ <dd dir="rtl">این مقاله به معرفی مشکلات موجود HTML5 که در طراحی وب یا برنامه‌ی وب ممکن است وجود داشته باشند، می‌پردازد.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="/en-US/docs/HTML/HTML5/HTML5_Parser">مفسر منطبق بر HTML5</a></dt>
+ <dd dir="rtl">مفسر، که بایت به بایت از یک سند HTML را به درخت DOM تبدیل می‌کند، گسترش یافته‌است و به دقت رفتاری که در تمامی حالت‌ها پیش می‌آید بررسی کرده، حتی کد نامعتبر HTML را، که منجر به بهینه‌تر شدن و قابل‌پیش‌بینی‌تر شدن مرورگرهای منطبق با HTML5 می‌شود.</dd>
+</dl>
+
+<h2 dir="rtl" id="Connectivity_(اتصال)" style="margin: 0px 0px 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Connectivity (اتصال)</h2>
+
+<dl>
+ <dt dir="rtl"><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt>
+ <dd dir="rtl">اجازه‌ی برقراری یک ارتباط پایدار بین صفحه و سرور را می‌دهد که از طریق آن می‌توان به مبادله‌ی داده‌هایی غیر از سند HTML پرداخت.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="/en-US/docs/Server-sent_events/Using_server-sent_events">رخدادهای سمت سرور</a></dt>
+ <dd dir="rtl">سابق بر این سرور تنها با دریافت درخواست از مرورگر (کاربر) می‌توانست به آن پاسخ دهد اما الان می‌تواند این کار را بدون درخواست مرورگر نیز انجام دهد.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/WebRTC" title="/en-US/WebRTC">WebRTC</a></dt>
+ <dd dir="rtl">این فناوری، که مخفف Real-Time Communication یا ارتباط بلادرنگ است، اجازه‌ی برقراری ارتباط با سایر افراد و کنترل ویدیوکنفرانس به طور مستقیم از مرورگر را می‌هد بدون آن‌که به افزونه‌ای خاص یا برنامه‌ای خارجی نیاز باشد.</dd>
+</dl>
+
+<h2 dir="rtl" id="Offline_storage_(ذخیره‌سازی_آفلاین)" style="margin: 0px 0px 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Offline &amp; storage (ذخیره‌سازی آفلاین)</h2>
+
+<dl>
+ <dt dir="rtl"><a href="/en-US/docs/HTML/Using_the_application_cache" title="/en-US/docs/HTML/Using_the_application_cache">منابع آفلاین: حافظه‌ی نهان برنامه</a></dt>
+ <dd dir="rtl">Firefox به طور کامل منابع آفلاین در HTML5 را پشتیبانی می‌کند. سایر مرورگرها نیز این ویژگی را کمابیش پشتیبانی می‌کنند.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/Online_and_offline_events" title="/en-US/docs/Online_and_offline_events">رخدادهای آنلاین و آفلاین</a></dt>
+ <dd dir="rtl">Firefox 3 مستندات WHATWG درباره‌ی رخدادهای آنلاین و آفلاین را پشتیبانی می‌کند، که به برنامه‌ها اجازه می‌دهد تشخیص بدهند آیا یک اتصال اینترنت فعال موجود است یا خیر، یا اینکه آیا یک اتصال قطع و وصل می‌شود یا خیر.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/DOM/Storage" title="/en-US/docs/DOM/Storage">نشست سمت-مرورگر WHATWG و ذخیره‌سازی پایدار (در برابر ذخیره‌سازی DOM)</a></dt>
+ <dd dir="rtl">نشست سمت-مرورگر و ذخیره‌سازی پایدار به برنامه‌های وب اجازه می‌دهند که ساختارداده‌های مورد نیاز خود را در مرورگر کاربر ذخیره‌سازی کنند.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a></dt>
+ <dd dir="rtl">یک استاندارد وب است که برای ذخیره‌سازی داده‌ها با حجم بالا در مرورگر کاربر به کار می‌رود و برای جستجوهای با سرعت بالا بر این داده‌ها با استفاده از اندیس‌ها، صورت می‌پذیرد.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/Using_files_from_web_applications" title="/en-US/docs/Using_files_from_web_applications">استفاده از فایل‌ها توسط برنامه‌های وب</a></dt>
+ <dd dir="rtl">پشتیبانی از API جدید فایل در HTML5 به Gecko اضافه‌شده است تا برنامه‌های وب بتوانند به فایل‌هایی که کاربر انتخاب می‌کنند دسترسی داشته باشند، که این امر شامل پشتیبانی از فایل‌های چندگانه  با استفاده از عنصر <span style="font-family: monospace;">{{ HTMLElement("input") }}</span> که از <a href="/en-US/docs/HTML/Element/Input#attr-type" title="/en-US/docs/HTML/Element/Input#attr-type">نوع</a> فایل می‌باشد، می‌شود یا صفت جدید <a href="/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a>. همچنین <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a> نیز وجود دارد.</dd>
+</dl>
+
+<h2 dir="rtl" id="Multimedia_(چندرسانه‌ای)" style="margin: 0px 0px 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Multimedia (چندرسانه‌ای)</h2>
+
+<dl>
+ <dt dir="rtl"><a href="/en-US/docs/Using_HTML5_audio_and_video" title="/en-US/docs/Using_HTML5_audio_and_video">استفاده از audio و vedio در HTML5</a></dt>
+ <dd dir="rtl">عنصرهای {{ HTMLElement("audio") }} و {{ HTMLElement("video") }} با قرارگرفتن در صفحه، اجازه‌ی تغییراتی جدید در نحوه‌ی اجرای محتوای چندرسانه‌ای را می‌دهند.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/WebRTC" title="/en-US/WebRTC">WebRTC</a></dt>
+ <dd dir="rtl">این فناوری، که مخفف Real-Time Communication یا ارتباط بلادرنگ است، اجازه‌ی برقراری ارتباط با سایر افراد و کنترل ویدیوکنفرانس به طور مستقیم از مرورگر را می‌هد بدون آن‌که به افزونه‌ای خاص یا برنامه‌ای خارجی نیاز باشد.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/DOM/Using_the_Camera_API" title="/en-US/docs/DOM/Using_the_Camera_API">استفاده از API دوربین</a></dt>
+ <dd dir="rtl">اجازه‌ی استفاده، تغییر و ذخیره‌سازی یک تصویر (عکس) را از دوربین رایانه‌ی کاربر می‌دهد.</dd>
+</dl>
+
+<h2 dir="rtl" id="3D_graphics_effects_(سه‌بعدی،_گرافیک_و_جلوه‌های_تصویری)" style="margin: 0px 0px 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3D, graphics &amp; effects (سه‌بعدی، گرافیک و جلوه‌های تصویری)</h2>
+
+<dl>
+ <dt dir="rtl"><a href="/en-US/docs/Canvas_tutorial" title="/en-US/docs/Canvas_tutorial">خودآموز Canvas</a></dt>
+ <dd dir="rtl">درباره‌ی عنصر جدید <code>{{ HTMLElement("canvas") }}</code> و چگونگی رسم نمودارها و سایر اشیا در Firefox بیاموزید.</dd>
+ <dt dir="rtl">API متن HTML5 برای عنصرهای <a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas"><code>&lt;canvas&gt;</code></a><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas"> </a></dt>
+ <dd dir="rtl">API متن در HTML5 توسط عنصرهای {{ HTMLElement("canvas") }} پشتیبانی می‌شوند.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt>
+ <dd dir="rtl">WebGL گرافیک سه‌بعدی را با معرفی APIای که بسیار نزدیک به OpenGL ES 2.0 عمل می‌کند، به صفحات وب می‌آورد که می‌تواند در عنصرهای {{ HTMLElement("canvas") }} در HTML5 به کار رود.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/SVG" title="/en-US/docs/SVG">SVG</a></dt>
+ <dd dir="rtl">فرمتی مبتنی بر XML از تصاویر برداری که به صورت مستقیم می‌تواند در سند HTML به کار رود.</dd>
+</dl>
+
+<dl>
+</dl>
+</div>
+
+<div class="section">
+<h2 dir="rtl" id="Performance_integration_(عملکرد_و_جامعیت)" style="margin: 0px 0px 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Performance &amp; integration (عملکرد و جامعیت)</h2>
+
+<dl>
+ <dt dir="rtl"><a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt>
+ <dd dir="rtl">به فایل‌های JavaScript اجازه می‌دهد که در پس‌زمینه و بدون این‌که رخدادهای فعال را درگیر خود سازند، اجرا شوند.</dd>
+ <dt dir="rtl"><code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> سطح ۲</dt>
+ <dd dir="rtl">اجازه‌ی برقراری ارتباط بخشی از صفحه با سرور را می‌دهد، تا محتوای پویا را بر اساس فعالیت کاربران یا زمان تغییر دهد. این فناوری پایه و اساس <a href="/en-US/docs/AJAX" title="/en-US/docs/AJAX">Ajax</a> است.</dd>
+ <dt dir="rtl">JIT - کامپایل‌کردن موتورهای JavaScript</dt>
+ <dd dir="rtl">نسل‌ جدید موتورهای JavaScript بسیار قدرتمندتر از نسل قبلی هستند که در اجرا و عملکرد برنامه‌های JavaScript بسیار تاثیرگذار هستند.</dd>
+ <dt dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history">History API</a></dt>
+ <dd dir="rtl">اجازه‌ی دستکاری تاریخچه (history) مرورگر را می‌دهد که این کار برای صفحاتی که شامل اطلاعات جدید هستند، مفید می‌باشد.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/HTML/Content_Editable" title="/en-US/docs/HTML/Content_Editable">صفت contentEditable: وب‌سایت خود را به یک wiki تبدیل کنید!</a></dt>
+ <dd dir="rtl">HTML5 صفت contentEditable را استاندارد کرده است. درباره‌ی این ویژگی بیشتر بدانید.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="/en-US/docs/DragDrop/Drag_and_Drop">کشیدن و رهاکردن</a></dt>
+ <dd dir="rtl">API کشیدن و رهاکردن در HTML5 پشتیبانی از این عملیات را در وب‌سایت‌ها و بین‌ وبسایت‌ها میسر می‌کند. همچنین یک API ساده‌تر را جهت استفاده در extensionها و برنامه‌های مبتنی بر Mozilla شامل می‌شود.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/Focus_management_in_HTML" title="/en-US/docs/Focus_management_in_HTML">مدیریت Focus در HTML</a></dt>
+ <dd dir="rtl">صفت‌های جدید <code>activeElement</code> و <code>hasFocus</code>  در HTML5 پشتیبانی می‌شوند.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/Web-based_protocol_handlers" title="/en-US/docs/Web-based_protocol_handlers">protocol handlerهای مبتنی بر وب</a></dt>
+ <dd dir="rtl">شما اکنون می‌توانید برنامه‌های وب را با استفاده از متد <code>navigator.registerProtocolHandler()</code> به عنوان protocol handler ثبت کنید.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/DOM/window.requestAnimationFrame" title="/en-US/docs/DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt>
+ <dd dir="rtl">اجازه‌ی کنترل رندرشدن انیمیشن‌ها را برای دستیابی به عملکردی بهینه، می‌دهد.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/DOM/Using_full-screen_mode" title="/en-US/docs/DOM/Using_full-screen_mode">Fullscreen API</a></dt>
+ <dd dir="rtl">چگونگی استفاده از حالت تمام‌صفحه را کنترل می‌کند، بدون این‌که واسط کاربری (پیش‌فرض) مرورگر نمایش داده شود.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/API/Pointer_Lock_API" title="/en-US/docs/API/Pointer_Lock_API">Pointer Lock API</a></dt>
+ <dd dir="rtl">اجازه‌ی قفل شدن اشاره‌گر (ماوس) روی محتوا را می‌دهد، تا بازی‌ها و برنامه‌های مشابه دیگر مشکل از دست‌رفتن focus را نداشته باشند.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/Online_and_offline_events" title="/en-US/docs/Online_and_offline_events">رخدادهای آنلاین و آفلاین</a></dt>
+ <dd dir="rtl">برای ایجاد یک برنامه‌ی وب با قابلیت اجرای آفلاین، شما باید بدانید چه زمانی برنامه‌ی شما واقعا در حالت آفلاین قرار می‌گیرد. همین‌طور باید بدانید چه زمانی برنامه‌ی شما در حالت آفلاین باز می‌گردد.</dd>
+</dl>
+
+<h2 dir="rtl" id="Device_access_(دسترسی_از_طریق_سایر_دستگاه‌ها)" style="margin: 0px 0px 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Device access (دسترسی از طریق سایر دستگاه‌ها)</h2>
+
+<dl>
+ <dt dir="rtl"><a href="/en-US/docs/DOM/Using_the_Camera_API" title="/en-US/docs/DOM/Using_the_Camera_API">استفاده از API دوربین</a></dt>
+ <dd dir="rtl">اجازه‌ی استفاده، تغییر و ذخیره‌سازی یک تصویر (عکس) را از دوربین رایانه‌ی کاربر می‌دهد.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/DOM/Touch_events" title="/en-US/docs/DOM/Touch_events">رخدادهای Touch</a></dt>
+ <dd dir="rtl">handlerهایی که به رخدادهای ایجادشده توسط کاربری که با صفحه‌ی لمسی کار می‌کند، پاسخ می‌دهد.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/Using_geolocation" title="/en-US/docs/Using_geolocation">استفاده از geolocation</a></dt>
+ <dd dir="rtl">این اجاره را به مرورگر می‌دهد تا موقعیت جغرافیایی کاربر را شناسایی کند.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/Detecting_device_orientation" title="/en-US/docs/Detecting_device_orientation">شناسایی جهت دستگاه</a></dt>
+ <dd dir="rtl">این اجازه را به مرورگر می‌دهد تا هرگاه جهت دستگاهی که مرورگر روی آن کار می‌کند تغییر یافت، اطلاعات آن را دریافت کند. از این ویژگی می‌توان به عنوان یک دستگاه ورودی استفاده کرد برای نمونه (ساخت بازی‌هایی که به تغییر جهت دستگاه واکنش نشان می‌دهند یا منطبق ساختن ظاهر یک صفحه با جهت نمایش دستگاه - افقی یا عمودی).</dd>
+ <dt dir="rtl"><a href="/en-US/docs/API/Pointer_Lock_API" title="/en-US/docs/API/Pointer_Lock_API">Pointer Lock API</a></dt>
+ <dd dir="rtl">اجازه‌ی قفل شدن اشاره‌گر (ماوس) روی محتوا را می‌دهد، تا بازی‌ها و برنامه‌های مشابه دیگر مشکل از دست‌رفتن focus را نداشته باشند.</dd>
+</dl>
+
+<h2 dir="rtl" id="Styling_(سبک‌دهی)" style="margin: 0px 0px 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Styling (سبک‌دهی)</h2>
+
+<p dir="rtl"><a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a> گسترش یافته است تا سبک‌دهی به عنصرها را به حالتی پیشرفته‌تر منتقل کند. از این ویژگی‌ها اغلب به عنوان <a href="/en-US/docs/CSS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a> یاد می‌شود، از این رو CSS دیگر یک استاندارد یک‌پارچه نیست و ماژول‌های مختلف آن در سطح ۳ نیستند، بعضی در سطح ۱ و بعضی در سطح ۴، با تمام سطح‌های میانی که وجود دارند.</p>
+
+<dl>
+ <dt dir="rtl">ویژگی‌های جدید در سبک‌دهی تصویر پس‌زمینه</dt>
+ <dd dir="rtl">اکنون ایجاد سایه در یک عنصر (جعبه) با استفاده از {{ cssxref("box-shadow") }} میسر است و <a href="/en-US/docs/CSS/Multiple_backgrounds" title="/en-US/docs/CSS/Multiple_backgrounds">تصویرهای پس‌زمینه‌ی چندگانه</a> قابل استفاده هستند.</dd>
+ <dt dir="rtl">حاشیه‌هایی جذاب‌تر</dt>
+ <dd dir="rtl">اکنون نه تنها می‌توان با استفاده از تصویر‌ها و به کارگیری {{ cssxref("border-image") }} ،‌حاشیه‌ی عنصرها را ایجاد کرد بلکه کناره‌های گرد (rounded-borders) نیز با استفاده از ویژگی {{ cssxref("border-radius") }} قابل پیاده‌سازی هستند.</dd>
+ <dt dir="rtl">پویانمایی</dt>
+ <dd dir="rtl">با استفاده از <a href="/en-US/docs/CSS/Using_CSS_transitions" title="/en-US/docs/CSS/Using_CSS_transitions">تبدیلات در CSS</a> برای پویانمایی بین حالت‌های مختلف یا از <a href="/en-US/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">پویانمایی در CSS</a> جهت پویانمایی بخشی از صفحه بدون نیاز به رخدادهای جاوااسکریپت، شما می‌توانید عنصرهای متحرک در صفحه‌ی خود را کنترل کنید.</dd>
+ <dt dir="rtl">بهبودهای ایجاد شده در Typography</dt>
+ <dd dir="rtl">توسعه‌دهندگان برای دسترسی به Typography بهتر اکنون کنترل بیشتری دارند. آن‌ها می‌توانند {{ cssxref("text-overflow") }} و <a href="/en-US/docs/CSS/hyphens" title="/en-US/docs/CSS/hyphens">فاصله‌گذاری</a> را کنترل کنند، همچنین <a href="/en-US/docs/CSS/text-shadow" title="/en-US/docs/CSS/text-shadow">سایه‌ای</a> که به متن اعمال می‌شود یا <a href="/en-US/docs/CSS/text-decoration" title="/en-US/docs/CSS/text-decoration">جزییات‌متن</a> را به دقت کنترل کنند. به لطف ویژگی {{ cssxref("@font-face") }} فونت‌های مختلفی را می‌توان به صفحه‌ی خود پیوست کرد.</dd>
+ <dt dir="rtl">لایه‌های نمایشی جدید</dt>
+ <dd dir="rtl">در راستای ارتقای انعطاف‌پذیری در طراحی، دو لایه‌ی جدید افزوده شده‌اند: <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="/en-US/docs/CSS/Using_CSS_multi-column_layouts">CSS multi-column layout</a> و <a href="/en-US/docs/CSS/Flexbox" title="/en-US/docs/CSS/Flexbox">CSS flexible box layout</a>.</dd>
+</dl>
+</div>
+</div>