diff options
Diffstat (limited to 'files/ar/web')
| -rw-r--r-- | files/ar/web/api/geolocation_api/index.html (renamed from files/ar/web/api/geolocation/using_geolocation/index.html) | 0 | ||||
| -rw-r--r-- | files/ar/web/api/geolocation_api/using_the_geolocation_api/index.html (renamed from files/ar/web/api/geolocation/using_geolocation/using_the_geolocation_api/index.html) | 0 | ||||
| -rw-r--r-- | files/ar/web/api/history_api/example/index.html (renamed from files/ar/web/api/history_api/مثال/index.html) | 0 | ||||
| -rw-r--r-- | files/ar/web/api/navigator/battery/index.html (renamed from files/ar/web/api/navigator.battery/index.html) | 0 | ||||
| -rw-r--r-- | files/ar/web/css/comments/index.html (renamed from files/ar/web/css/التعليقات/index.html) | 0 | ||||
| -rw-r--r-- | files/ar/web/css/css_animated_properties/index.html (renamed from files/ar/web/css/العناصر_التي_يمكن_تحريكها_باستخدام_css_transitions/index.html) | 0 | ||||
| -rw-r--r-- | files/ar/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html (renamed from files/ar/web/css/css_flexible_box_layout/المفاهيم_الأساسية_للصندوق_المرن/index.html) | 0 | ||||
| -rw-r--r-- | files/ar/web/css/css_grid_layout/relationship_of_grid_layout/index.html (renamed from files/ar/web/css/css_grid_layout/relationship_of_grid_layout_arabic/index.html) | 0 | ||||
| -rw-r--r-- | files/ar/web/css/transform/index.html (renamed from files/ar/web/css/التحول/index.html) | 0 | ||||
| -rw-r--r-- | files/ar/web/guide/css/getting_started/index.html | 44 | ||||
| -rw-r--r-- | files/ar/web/guide/css/getting_started/readable_css/index.html | 178 | ||||
| -rw-r--r-- | files/ar/web/guide/css/getting_started/القوائم/index.html | 384 | ||||
| -rw-r--r-- | files/ar/web/guide/css/index.html | 24 | ||||
| -rw-r--r-- | files/ar/web/guide/graphics/index.html (renamed from files/ar/web/guide/الرسومات/index.html) | 0 | ||||
| -rw-r--r-- | files/ar/web/guide/html/html5/html5_element_list/index.html | 599 | ||||
| -rw-r--r-- | files/ar/web/guide/mobile/index.html | 18 | ||||
| -rw-r--r-- | files/ar/web/html/element/article/index.html | 153 | ||||
| -rw-r--r-- | files/ar/web/html/element/bdo/index.html | 108 | ||||
| -rw-r--r-- | files/ar/web/html/element/heading_elements/index.html | 244 | ||||
| -rw-r--r-- | files/ar/web/html/element/index.html | 239 | ||||
| -rw-r--r-- | files/ar/web/html/element/span/index.html | 122 | ||||
| -rw-r--r-- | files/ar/web/html/element/tt/index.html | 161 | ||||
| -rw-r--r-- | files/ar/web/html_لغة_ترميز_النص_الفائق/index.html | 88 | ||||
| -rw-r--r-- | files/ar/web/javascript/guide/functions/index.html (renamed from files/ar/web/javascript/guide/الدوال/index.html) | 0 | ||||
| -rw-r--r-- | files/ar/web/javascript/introduction_to_object-oriented_javascript/index.html | 424 | ||||
| -rw-r--r-- | files/ar/web/javascript/reference/functions/get/index.html (renamed from files/ar/web/javascript/reference/الدوال/get/index.html) | 0 | ||||
| -rw-r--r-- | files/ar/web/javascript/reference/functions/index.html (renamed from files/ar/web/javascript/reference/الدوال/index.html) | 0 | ||||
| -rw-r--r-- | files/ar/web/javascript/reference/global_objects/number/index.html (renamed from files/ar/web/javascript/reference/global_objects/الارقام/index.html) | 0 | ||||
| -rw-r--r-- | files/ar/web/reference/index.html (renamed from files/ar/web/مرجع/index.html) | 0 | ||||
| -rw-r--r-- | files/ar/web/security/index.html (renamed from files/ar/web/حماية/index.html) | 0 |
30 files changed, 1045 insertions, 1741 deletions
diff --git a/files/ar/web/api/geolocation/using_geolocation/index.html b/files/ar/web/api/geolocation_api/index.html index a27275b2b5..a27275b2b5 100644 --- a/files/ar/web/api/geolocation/using_geolocation/index.html +++ b/files/ar/web/api/geolocation_api/index.html diff --git a/files/ar/web/api/geolocation/using_geolocation/using_the_geolocation_api/index.html b/files/ar/web/api/geolocation_api/using_the_geolocation_api/index.html index d696d6c9f2..d696d6c9f2 100644 --- a/files/ar/web/api/geolocation/using_geolocation/using_the_geolocation_api/index.html +++ b/files/ar/web/api/geolocation_api/using_the_geolocation_api/index.html diff --git a/files/ar/web/api/history_api/مثال/index.html b/files/ar/web/api/history_api/example/index.html index 1bcce72374..1bcce72374 100644 --- a/files/ar/web/api/history_api/مثال/index.html +++ b/files/ar/web/api/history_api/example/index.html diff --git a/files/ar/web/api/navigator.battery/index.html b/files/ar/web/api/navigator/battery/index.html index 563c6d5288..563c6d5288 100644 --- a/files/ar/web/api/navigator.battery/index.html +++ b/files/ar/web/api/navigator/battery/index.html diff --git a/files/ar/web/css/التعليقات/index.html b/files/ar/web/css/comments/index.html index 4fbf59d3f9..4fbf59d3f9 100644 --- a/files/ar/web/css/التعليقات/index.html +++ b/files/ar/web/css/comments/index.html diff --git a/files/ar/web/css/العناصر_التي_يمكن_تحريكها_باستخدام_css_transitions/index.html b/files/ar/web/css/css_animated_properties/index.html index d9a0da44f2..d9a0da44f2 100644 --- a/files/ar/web/css/العناصر_التي_يمكن_تحريكها_باستخدام_css_transitions/index.html +++ b/files/ar/web/css/css_animated_properties/index.html diff --git a/files/ar/web/css/css_flexible_box_layout/المفاهيم_الأساسية_للصندوق_المرن/index.html b/files/ar/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html index c30338c62b..c30338c62b 100644 --- a/files/ar/web/css/css_flexible_box_layout/المفاهيم_الأساسية_للصندوق_المرن/index.html +++ b/files/ar/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html diff --git a/files/ar/web/css/css_grid_layout/relationship_of_grid_layout_arabic/index.html b/files/ar/web/css/css_grid_layout/relationship_of_grid_layout/index.html index 7ccf10282f..7ccf10282f 100644 --- a/files/ar/web/css/css_grid_layout/relationship_of_grid_layout_arabic/index.html +++ b/files/ar/web/css/css_grid_layout/relationship_of_grid_layout/index.html diff --git a/files/ar/web/css/التحول/index.html b/files/ar/web/css/transform/index.html index 93ef2bb84e..93ef2bb84e 100644 --- a/files/ar/web/css/التحول/index.html +++ b/files/ar/web/css/transform/index.html diff --git a/files/ar/web/guide/css/getting_started/index.html b/files/ar/web/guide/css/getting_started/index.html deleted file mode 100644 index 2bfc5c76bb..0000000000 --- a/files/ar/web/guide/css/getting_started/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Getting started with CSS -slug: Web/Guide/CSS/Getting_started -tags: - - Beginner - - CSS - - 'CSS:Getting_Started' - - Guide - - Needs - - NeedsBeginnerUpdate - - NeedsTranslation - - NeedsUpdate - - TopicStub - - Web -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started ---- -<p><span class="seoSummary">This tutorial introduces you to the basic features and language (the syntax) for <a href="/en-US/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS"><strong>Cascading Style Sheets</strong></a> (CSS). You use CSS to change the look of a structured document, such as a web page. The tutorial also includes sample exercises you can try on your own computer to see the effects of CSS and features that work in modern browsers. </span></p> -<p>The tutorial is for beginners and anyone who would like to review the basics of CSS. If you have more experience with CSS, the CSS main page <a href="/en-US/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS">lists</a> more advanced resources.</p> -<nav class="fancyTOC"> - <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/What_is_CSS" rel="next" title="Chapter 'What is CSS' of the CSS tutorial">What is CSS</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="Chapter 'Why use CSS' of the CSS tutorial">Why use CSS</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/How_CSS_works" title="Chapter 'How CSS works' of the CSS tutorial">How CSS works</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="Chapter 'Cascading and inheritance' of the CSS tutorial">Cascading and inheritance</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors" title="Chapter 'Selectors' of the CSS tutorial">Selectors</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="Chapter 'Readable_CSS' of the CSS tutorial">Readable CSS</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="Chapter 'Text_styles' of the CSS tutorial">Text styles</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Color" title="Chapter 'Color' of the CSS tutorial">Color</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="Chapter 'Content' of the CSS tutorial">Content</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Lists" title="Chapter 'Lists' of the CSS tutorial">Lists</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes" title="Chapter 'Boxes' of the CSS tutorial">Boxes</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout" title="Chapter 'Layout' of the CSS tutorial">Layout</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="Chapter 'Tables' of the CSS tutorial">Tables</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Media" title="Chapter 'Media' of the CSS tutorial">Media</a></nav> -<h2 id="What_you_need_to_get_started">What you need to get started</h2> -<ul> - <li>A text editor</li> - <li>A modern browser</li> - <li>Some experience working with a text editor and browser</li> -</ul> -<p>Although the exercises can help you learn, you are not required to complete them. You can simply read the tutorial and look at the pictures.</p> -<p><strong>Note:</strong> The tutorial covers how CSS works with color. It will be easier to complete these sections with a color display and normal color vision.</p> -<h2 id="How_to_use_this_tutorial">How to use this tutorial</h2> -<p>To use this tutorial, read the pages carefully and in sequence. If you skip a page, it may be difficult to understand pages later in the tutorial.</p> -<h3 id="Part_I_The_Basics_of_CSS">Part I: The Basics of CSS</h3> -<p>On each page, use the <em>Information</em> section to understand how CSS works. Use the <em>Action</em> section to try using CSS on your own computer.</p> -<p>To test your understanding, take the challenge at the end of each page. Solutions to the challenges are linked under the challenges, so you don't need to look at them if you don't want to.</p> -<p>To understand CSS in more depth, read the information that you find in boxes captioned <em>More details</em>. Use the links there to find reference information about CSS.</p> -<h3 id="Part_II_The_Scope_of_CSS">Part II: The Scope of CSS</h3> -<p>A second part of the tutorial provides examples, which show the scope of CSS with other web and Mozilla technologies.</p> -<ol> - <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></li> - <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/SVG_and_CSS" title="en/CSS/Getting_Started/SVG_graphics">SVG graphics</a></li> - <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">XML data</a></li> - <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL bindings</a></li> - <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">XUL user interfaces</a></li> -</ol> diff --git a/files/ar/web/guide/css/getting_started/readable_css/index.html b/files/ar/web/guide/css/getting_started/readable_css/index.html deleted file mode 100644 index f65331a2bd..0000000000 --- a/files/ar/web/guide/css/getting_started/readable_css/index.html +++ /dev/null @@ -1,178 +0,0 @@ ---- -title: Readable CSS -slug: Web/Guide/CSS/Getting_started/Readable_CSS -translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable -translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS ---- -<p dir="rtl">{{ CSSTutorialTOC() }}</p> - -<p dir="rtl">{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}<span class="seoSummary">This is the 6th section of the <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> tutorial; it discusses the style and grammar of the CSS language itself. You change the way your sample CSS file looks, to make it more readable.</span></p> - -<h2 class="clearLeft" dir="rtl" id="معلومة_CSS_مقروء_(قابل_للقراءة_سهل_القراءة)">معلومة: CSS مقروء (قابل للقراءة = سهل القراءة)</h2> - -<p dir="rtl">يمكنك إضافة مساحات فارغة وأيضا تعليقات داخل ملف النمط لجعل الشيفرة البرمجية (code) أكثر قابلية وسهولة للقراءة. أيضا يمكنك تجميع العناصر المختلفة معا عندما تتطابق الخصائص بينهم.</p> - -<h3 dir="rtl" id="المساحة_الفارغة">المساحة الفارغة</h3> - -<p dir="rtl">المساحة الفارغة أوالبيضاء هي عبارة عن مسافات قد تكون مسافة من خطوة واحدة أو من عدة خطوات وقد تكون عبارة عن سطر جديد. يمكنك إضافة المساحات البيضاء إلى ملف النمط الخاص بك لجعله أكثر قابلية وسهولة للقراءة.</p> - -<p dir="rtl">في سياق تخطيط وتكوين الصفحة، المساحات الفارغة تكون جزءًا من الصفحة كمسافات بين الأعمدة والسطور أو كهوامش.</p> - -<p dir="rtl">يحتوي ملف النمط الخاص بك حاليا على قاعدة واحدة لكل سطر، وعدد أدنى من المساحات الفارغة أو البيضاء. في الأنماط المعقدة سيكون من الصعب قراءة ملف النمط، مما يجعل من الصعب الحفاظ عليها.</p> - -<p dir="rtl">التخطيط دائما ما يكون شَخْصِـيًّا، ولكن إذا كان ملف النمط بين مجموعة من الأفراد بصفته جزءً من مشاريع مشتركة، من المحتمل أن تلك المشاريع تحمل اتفاقيات خاصة بها يتم الأعتماد عليها والعمل بها.</p> - -<p dir="rtl"> </p> - -<div class="tuto_example" dir="rtl"> -<div class="tuto_type">Examples</div> - -<p>بعض الأشخاص يفضلون دمج الخصائص مع بعضها، فقط يقومون بتقسيم الخط عندما يصبح طويلا جدا:</p> - -<p dir="ltr">.carrot {color: orange; text-decoration: underline; font-style: italic;}</p> - -<p><br> - بعض الناس يفضلون خاصية واحدة لكل سطر:</p> - -<pre class="brush: css" dir="rtl">.carrot -{ -color: orange; -text-decoration: underline; -font-style: italic; -} -</pre> - -<p>بعض الأشخاص يستخدمون مسافتين أو أربع أو علامة التبويب الشائعة:</p> - -<pre class="brush: css">.carrot { - color: orange; - text-decoration: underline; - font-style: italic; -} -</pre> - -<p><br> - (بعض الأشخاص يفضلون جعل كل شيء عموديا (ولكن تخطيط مثل هذا من الصعب الحفاظ عليه.</p> - -<pre class="brush: css">.carrot - { - color : orange; - text-decoration : underline; - font-style : italic; - } -</pre> - -<p>بعض الأشخاص يستخدمون مزيج من المسافات الفارغة أو البيضاء لتعزيز سهولة القراءة.</p> - -<pre class="brush: css">.vegetable { color: green; min-height: 5px; min-width: 5px } -.vegetable.carrot { color: orange; height: 90px; width: 10px } -.vegetable.spinach { color: darkgreen; height: 30px; width: 30px } -</pre> -</div> - -<p dir="rtl">بعض الأشخاص يستخدمون علامة التبويب والبعض الآخر يستخدم فقط المسافات البيضاء.</p> - -<h3 dir="rtl" id="التعليقات">التعليقات<br> - </h3> - -<p dir="rtl">التعليقات في ملف النمط تبدأ بـ «*/» وتنتهي بـ«/*».<br> - <br> - يمكنك استخدام التعليقات في ملف النمط الخاص بك لكتابة تعليقات وتعليمات، وأيضا لكتابة تعليمات مؤقتة قد يكون الغرض منها هو اختبار العملية.<br> - <br> - التعليق في جزء من النمط، ضع هذا الجزء في تعليق بحيث يتجاهله المتصفح عند قراءة الملف، وكن حذرا في بداية ونهاية التعليق. بقية الأنماط والخصائص يجب أن يكون لها البنية الصحيحة.</p> - -<div class="tuto_example" dir="rtl"> -<div class="tuto_type">Example</div> - -<pre class="brush: css">/* style for initial letter C in first paragraph */ -.carrot { - color: orange; - text-decoration: underline; - font-style: italic; - } -</pre> -</div> - -<h3 dir="rtl" id="تجميع_العناصر_عندما_يكون_لمجموعة_من_العناصر_عدد_من_الخصائص_المتشابهة_في_النمط،_يمكنك_تجميع_العناصر_مع_الفصل_بينهم_بعلامة_فاصلة._وتـنطبق_هذة_الخصائص_على_جميع_العناصر_المجمعة.">تجميع العناصر<br> - <br> - <span style="font-size: 14px;">عندما يكون لمجموعة من العناصر عدد من الخصائص المتشابهة في النمط، يمكنك تجميع العناصر مع الفصل بينهم بعلامة فاصلة. وتـنطبق هذة الخصائص على جميع العناصر المجمعة.</span><br> - </h3> - -<p dir="rtl">في أماكن أخرى من ملف النمط يمكنك أيضا تجميع عدد من العناصر ولكن فرديا، وتطبيق خصائص فردية عليهم.</p> - -<div class="tuto_example" dir="rtl"> -<div class="tuto_type">Example</div> - -<p>This rule makes {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, and {{ HTMLElement("h3") }} elements the same color.</p> - -<p>إنها مناسبة لتحديد اللون لمجموعة من العناصر في مكان واحد، في حالة لابد من تغييرها.</p> - -<pre class="brush: css">/* color for headings */ -h1, h2, h3 {color: navy;} -</pre> -</div> - -<h2 dir="rtl" id="العمل_إضافة_تعليقات_و_تحسين_التخطيط">العمل: إضافة تعليقات و تحسين التخطيط</h2> - -<ol dir="rtl"> - <li>قم بتعديل ملف النمط الخاص بك، وقم بالتأكد أن لديها هذه القواعد في ذلك (في أي أمر): - <pre class="brush: css">strong {color: red;} -.carrot {color: orange;} -.spinach {color: green;} -#first {font-style: italic;} -p {color: blue;} -</pre> - </li> - <li>جعلها أكثر قابلية للقراءة من خلال إعادة ترتيبها بطريقة منطقية، وذلك من خلال إضافة مساحات بيضاء أو فارغة وأيضا تعليقات مناسبة.</li> - <li>قم بحفظ التعديلات واذهب إلى المتصفح لتشاهد الصفحة للتَّـأكد أنه لا يوجد أي تأثير على ملف النمط من خلال عمله. - <table style="border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - </li> -</ol> - -<div class="tuto_details" dir="rtl"> -<div class="tuto_type">تحدي</div> - -<div class="tuto_type"> </div> - -<p class="tuto_type">ضع تعليقا يوجد به جزء من ملف النمط الخاص بك، بدون تغيير أي شيء آخر ، لعمل أول حرف من الوثيقة أحمر اللون.</p> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<p>(هناك العديد من الطرق لفعل ذلك)</p> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>One way to do this is to put comment delimiters around the rule for <code>.carrot</code>:</p> - -<pre class="brush: css">/*.carrot { - color: orange; -}*/</pre> - -<p><a class="hideAnswer" href="#challenge">Hide solution</a></p> -</div> - -<p><a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></p> -</div> - -<h2 dir="rtl" id="ما_التالي؟">ما التالي؟</h2> - -<h2 dir="rtl" id="nextPage(en-USdocsWebGuideCSSGetting_StartedText_styles_Text_styles)_Your_sample_stylesheet_has_used_italic_text_and_underlined_text._The_next_page_describes_more_ways_to_specify_the_appearance_of_text_in_your_document.">{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles") }}Your sample stylesheet has used italic text and underlined text. The next page describes more ways to <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" style="font-size: 14px; font-weight: normal;" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles">specify the appearance of text</a><span style="color: #3b3c40; font-size: 14px; font-weight: normal;"> in your document</span><strong style="color: #3b3c40; font-size: 14px;">.</strong></h2> diff --git a/files/ar/web/guide/css/getting_started/القوائم/index.html b/files/ar/web/guide/css/getting_started/القوائم/index.html deleted file mode 100644 index 2b7fdeb726..0000000000 --- a/files/ar/web/guide/css/getting_started/القوائم/index.html +++ /dev/null @@ -1,384 +0,0 @@ ---- -title: القوائم -slug: Web/Guide/CSS/Getting_started/القوائم -translation_of: Learn/CSS/Styling_text/Styling_lists -translation_of_original: Web/Guide/CSS/Getting_started/Lists ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p dir="rtl"> الصفحة السابقة هي ("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content") أما هذا الجزء فهو العاشِر في سلسلة تعليم لغة CSS على هذا الموقع <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a>، وهو يصف كيف يُمكن استخدام لغة الـCSS لتحديد مظهر القائمة. ستقوم بإنشاء مثال مستند يحتوي على قائمة بالـHTML وملف تنسيق بلغة الـCSS والذي من خلاله سوف نقوم بتنسيق القائمة التي قمنا بإنشَائها. </p> - -<h2 class="clearLeft" dir="rtl" id="معلومات_عن_القوائم">معلومات عن القوائم </h2> - -<p dir="rtl">لو نظرت إلى الجزء السابق، سوف يتضح لك كيف يمكن إضافة محتـوًى قبل أي عنصر بحيث يظهر وكأنّه عنصرٌ في قائمة.</p> - -<p dir="rtl">تقدم لغة الـCSS بعض الخواص المُصَمَّـمَـة للقائمة، والتي يجب استخدامها دائما مع القوائم.</p> - -<p dir="rtl">لتحديد نمط القائمة، عليك استخدام هذه الخاصية «<strong>list-style</strong>» وذلك لتحديد نوع العلامة الموجودة قبل كل عنصر في القائمة. </p> - -<div class="note" dir="rtl"> -<p>من الممكن أن يتم اختيار القائمة ككل بهذا الوسم «<em>ul</em>» أو اختيار عنصر بداخل القائمة من خلال هذا الوسم «<em>li</em>». </p> - -<p>وعند اختيار القائمة ككل فإنَّ هذا الوسم يسمى الأب للقائمة وهو«<em>ul</em>»، ويورث الخواص التى تٌطبق عليه لكُـلِّ عنصر في القائمة. </p> -</div> - -<h3 dir="rtl" id="القوائم_غير_المرتبة">القوائم غير المرتبة</h3> - -<p dir="rtl"> في القوائم غير المُرَتَّـبة، يكون كل عنصر من القائمة معَلَّــمًا بنفس الطريقة. </p> - -<p dir="rtl"> يوجد ثلاثة أنواع من العلامات، وأدناه هي كيفية عرض المتصفح لهذه العلامات:</p> - -<p dir="rtl">• disc قرص </p> - -<p dir="rtl">○ circle دائرة</p> - -<p dir="rtl">◘ square مربع</p> - -<p dir="rtl">بدلا من ذلك، يمكن تحديد رابط صورة لاستخدامها كعلامة للعناصر بدل من العلامات السابقة.</p> - -<div class="tuto_example"> -<h3 dir="rtl" id="مثال">مثال </h3> - -<p dir="rtl"> هذه القواعد تُـوَضِّح علامات مختلفة لأصناف (classes) مختلفة من عناصر القائمة:</p> - -<pre class="brush:css" dir="rtl">li.open { - list-style: circle; -} -li.closed { - list-style: disc; -} -</pre> - -<p dir="rtl">عندما يتم استعمال هذه الأصناف (classes) في قائمة، تقوم بالتمييز بين العناصر المفتوحة والمغلقة (مثلًا في قائمة مهامّ).</p> - -<pre class="brush: html" dir="rtl"><ul> - <li class="open">Lorem ipsum</li> - <li class="closed">Dolor sit</li> - <li class="closed">Amet consectetuer</li> - <li class="open">Magna aliquam</li> - <li class="closed">Autem veleum</li> -</ul> -</pre> - -<p dir="rtl">وهكذا تبدو النتيجة: </p> - -<div class="syntaxbox"> ○ Lorem ipsum</div> - -<div class="syntaxbox"> • Dolor sit</div> - -<div class="syntaxbox"> • Amet consectetuer</div> - -<div class="syntaxbox"> ○ Magna aliquam</div> - -<div class="syntaxbox"> • Autem veleum</div> - -<div class="syntaxbox"> </div> -</div> - -<h3 dir="rtl" id="القوائم_المُـرَتَّـبة">القوائم المُـرَتَّـبة </h3> - -<p dir="rtl">في القوائم المُرتّبة، يكون لكل عنصر علامة مختلفة تُميّز موضعه في القائمة.</p> - -<p dir="rtl">استخدم الخاصية «list-style» لتعيين نمط القائمة، لتحديد نوع العلامة التي تظهر قبل كل عنصرفي القائمة.</p> - -<ul style="padding-left: 2em;"> - <li style=""><code>decimal (تعداد بأرقام عشرية)</code></li> - <li style=""><code>lower-roman (تعداد بحروف رومانية صغيرة)</code></li> - <li style=""><code>upper-roman (تعداد بحروف رومانية كبيرة)</code></li> - <li style=""><code>lower-latin (تعداد بحروف لاتيتنية صغيرة)</code></li> - <li style=""><code>upper-latin (تعداد بحروف لاتينية كبيرة)</code></li> -</ul> - -<div class="tuto_example"> -<div class="tuto_type" dir="rtl"> </div> - -<h4 class="tuto_type" dir="rtl" id="مثال_2">مثال </h4> - -<div class="tuto_type" dir="rtl">القاعدة التّالية تجعل العناصر في القائمة المرتّبة <ol> والتي تٌميز بصنف .«info» مُرتبة بحروف لاتينية كبيرة. </div> - -<div class="tuto_type" dir="rtl"> </div> - -<pre class="brush: html"><ol class="info"> - <li>Lorem ipsum</li> - <li>Dolor sit</li> - <li>Amet consectetuer</li> - <li>Magna aliquam</li> - <li>Autem veleum</li> -</ol></pre> - -<pre class="brush:css">ol.info { - list-style: upper-latin; -} -</pre> - -<div class="note" dir="rtl"> -<p>عند تطبيق خاصية النمط على الـ «<em>ol</em>» يُوَرِّثُ هذه الخاصية إلى الأبناء وهم عناصر القائمة المرتبة وهي العناصر المسبوقة بوسم «<em>li</em>».</p> -</div> - -<p dir="rtl">فتكون النتيجة كالتالي:</p> - -<div class="syntaxbox">ِA. Lorem ipsum</div> - -<div class="syntaxbox">B. Dolor sit</div> - -<div class="syntaxbox">C. Amet consectetuer</div> - -<div class="syntaxbox">D. Magna aliquam</div> - -<div class="syntaxbox">E. Autem veleum</div> -</div> - -<div class="tuto_details"> -<div class="tuto_type"> -<h3 dir="rtl" id="تفاصيل_أكثر">تفاصيل أكثر </h3> - -<div class="syntaxbox" dir="rtl">الخاصية «list-style» هي خاصية مختصرة أي أنه من الممكن استخدامها إذا أردت أن يكون نمط القائمة سواء كان </div> - -<div class="syntaxbox" dir="rtl"> (صورة أو رقم أو شكل أو حرف )</div> - -<div class="syntaxbox" dir="rtl"> ولكن يمكن أن تستخدم خواص منفردة لكل شكل على حدة وليكن للصورة لها خاصية محددة مثل «list-style-image» </div> - -<p dir="rtl">يمكنك مراجعة هذه الخاصية وما بها من تفاصيل من خلال هذه الصفحة <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style">list style</a> </p> - -<div class="syntaxbox" dir="rtl">إن كنت تستخدم لغة HTML فإنها تُـوفر وسوما مُختلفة، فعلى سبيل المثال للقوائم المرتبة يُستخدم هذا الوسم «ol»</div> - -<div class="syntaxbox" dir="rtl">والقوائم الغير مرتبة «ul»</div> - -<div class="syntaxbox" dir="rtl"> فيفضّل استخدام هذه القوائم بحسب دلالتها ولكن من الممكن إذا أردت أن تجعل القوائم المرتبة كغير المرتبة شكلا </div> - -<div class="syntaxbox" dir="rtl">والعكس، فذلك يتم من خلال الـCSS أيضا يتم كل هذا باستخدام الخواص المختلفة لتحصل على ما تريد من نتائج </div> - -<div class="syntaxbox" dir="rtl">ولكن يُفَضَّـل أن تُسْتَخدم كل قائمة حسب وضعها والاستخدام الخاص بها. </div> - -<div class="syntaxbox" dir="rtl"> </div> - -<p dir="rtl">قد تختلف المتصفّحات في طرق عرضها لتنسيق القوائم، لا يُمكن أن تحصُل على نفس النتيجة في كل المتصفحات. </p> -</div> -</div> - -<h3 dir="rtl" id="العَـدَّادَات">العَـدَّادَات</h3> - -<div dir="rtl" style="border: 1px solid red; padding: 6px; margin: 0px -6px 0.5em 0px; width: 100%;"> -<p><strong>ملاحظة هامّة</strong>:</p> - -<div class="syntaxbox"> بعض المتصفحات لا تدعم العدّادات، تقدّم هذه الصّفحة <a href="http://www.quirksmode.org/css/contents.html">CSS contents and browser comptability</a> على موقع <a href="http://www.quirksmode.org/">QuirksMode</a> معلومات تفصيلية عن دعم المتصفحات لهذه الميزة وميزات أخرى.</div> - -<div class="syntaxbox">كما توفّر الصّفحات الفرديّة في <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference" rel="external noopener noreferrer">CSS</a> مرجعا للمعلومات عن دعم المتصفحات أيضا لهذه الخاصية وغيرها.</div> -</div> - -<p> </p> - -<div class="syntaxbox" dir="rtl">يُمكن استخدام العدّادات لعدّ أيّة عناصر، وليس فقط عناصر القوائم، فمثلًا يمكن عدّ العناوين والفقرات في المستند.</div> - -<div class="syntaxbox" dir="rtl">تحتاج إلى إنشاء عدّاد counter باسم خاص بك لتستخدمه فى العّد.</div> - -<div class="syntaxbox" dir="rtl"> </div> - -<div class="syntaxbox" dir="rtl"> يمكن تهيئة العدّاد قبل البدء بالعدّ باستخدام الخاصية «counter-reset» واسم العدادَ الخاص بك الذي أنشأته. </div> - -<div class="syntaxbox" dir="rtl">وعليك أن تعلم أن الأب للعنصر الذي تقوم بِعده هو المكان الأنسب لتهيئة العّداد، ولكن يمكن استخدام أي عنصر يأتي قبل العناصر المطلوب عدّها.</div> - -<div class="syntaxbox"> </div> - -<div class="syntaxbox" dir="rtl"> في كلّ عنصر ترغب بعدّه، استخدم الخاصية «counter-increment» مع اسم العّداد الذي تٌريده.</div> - -<div class="syntaxbox" dir="rtl"> استخدم «befor» ،«:after:» لعرض العدّاد، مع استخدام هذه الخاصية «content» مع العنصر المٌحدد المُراد عّده (سيتم شرح ذلك لاحقاَ).</div> - -<div class="syntaxbox" dir="rtl">يمكنك معرفة معلومات أكثر عن هذه الخاصية في هذه الصفحة <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Content">Content</a>. </div> - -<div class="syntaxbox"> </div> - -<h4 class="syntaxbox" dir="rtl" id="استخدام_()counter_مع_اسم_العّداد_كقيمة_لـcontent">استخدام ()counter مع اسم العّداد كقيمة لـcontent </h4> - -<div class="syntaxbox" dir="rtl">ويمكن كذلك استخدام نوع للعلامة فى العد. الأنواع المُتاحة هي التي تم عرضها في فقرة القوائم المرتّبة.</div> - -<p dir="rtl">عادةً يزيد العنصر الّذي يعرض العدّاد من قيمته. </p> - -<div class="tuto_example"> -<div class="tuto_type" dir="rtl"> مثال </div> - -<div class="tuto_type" dir="rtl"> </div> - -<div class="tuto_type" dir="rtl"> هذه القاعدة تُنشئ عدّادًا لكلّ عنصر<h3> له تصنيف (كلاس) «numbered»: </div> - -<pre class="brush:css">h3.numbered { - counter-reset: mynum; -} -</pre> - -<p dir="rtl"> أما هذه القاعدة فهى تعرض عّداد الـ <p> والتي لها تصنيف «numbered»</p> - -<pre class="brush: html"><p class="numbered">Lorem ipsum</p> -<p class="numbered">Dolor sit</p> -<p class="numbered">Amet consectetuer</p> -<p class="numbered">Magna aliquam</p> -<p class="numbered">Autem veleum</p> -</pre> - -<pre class="brush:css">body { - counter-reset: mynum; -} -p.numbered:before { - content: counter(mynum) ": "; - counter-increment: mynum; - font-weight: bold; -} -</pre> - -<p dir="rtl">والنتيجة ستبدُو هكذا:</p> - -<div class="syntaxbox"><strong>1:</strong> Lorem ipsum</div> - -<div class="syntaxbox"><strong>2:</strong> Dolor sit</div> - -<div class="syntaxbox"><strong>3:</strong> Amet consectetuer</div> - -<div class="syntaxbox"><strong>4:</strong> Magna aliquam</div> - -<div class="syntaxbox"><strong>5:</strong> Autem veleum</div> - -<div class="syntaxbox"> </div> -</div> - -<div class="tuto_details"> -<div class="tuto_type" dir="rtl">تفاصِيل أكثر </div> - -<div class="syntaxbox" dir="rtl"> </div> - -<div class="syntaxbox" dir="rtl"> لا تستطيع استخدام العَدادات إلا إذا تيقنت من أنَ كل شخص يستخدم العدادات يستعمل متصفحاً يُدعمها. </div> - -<div class="syntaxbox" dir="rtl"> العًدادات بها مِيزات ويمكن تنسيقها منفصلة عن عنصر القَائمة المرافِقة لها كما في المثال السابق </div> - -<div class="syntaxbox" dir="rtl">ترى أن العًدادات لها تنسيق خاص فهي بِخط عريض غير عناصر القّائمة. </div> - -<div class="syntaxbox" dir="rtl"> </div> - -<div class="syntaxbox" dir="rtl">يمكن أيضًا استخدام العدّادات بطرق أكثر تعقيدًا؛ مثلًا: لعدّ الفقرات والعناوين والعناوين الفرعيّة والفقرات في المستندات الرسمية.</div> - -<div class="syntaxbox" dir="rtl"> ولتفاصِيل أكثر عليك الرجوع إلى هذِه الصفحة <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a>.</div> -</div> - -<h2 dir="rtl" id="تمرين_قوائم_مُنسقة">تمرين: قوائم مُنسقة</h2> - -<p dir="rtl"> قم بإنشاء ملف HTML باسم doc2.html، انسخ والصق هذا المحتوى إلى الملف الخاص بك:</p> - -<pre class="brush:html;"><!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8"> - <title>Sample document 2</title> - <link rel="stylesheet" href="style2.css"> - </head> - <body> - - <h3 id="oceans">The oceans</h3> - <ul> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - - <h3 class="numbered">Numbered paragraphs</h3> - <p class="numbered">Lorem ipsum</p> - <p class="numbered">Dolor sit</p> - <p class="numbered">Amet consectetuer</p> - <p class="numbered">Magna aliquam</p> - <p class="numbered">Autem veleum</p> - - </body> -</html> -</pre> - -<p dir="rtl"> قم بإنشاء ملف CSS وقُم بتسميته style2.css، انسخ والصق هذه الشيفرة البرمجية إلى صفحتك:</p> - -<pre class="brush:css;">/* numbered paragraphs */ -h3.numbered {counter-reset: mynum;} - -p.numbered:before { - content: counter(mynum) ": "; - counter-increment: mynum; - font-weight: bold; -} -</pre> - -<p dir="rtl">قم بتغيير أسلوب التعليقات كما تحبّ إن لم يعجبك هذا.</p> - -<p dir="rtl">افتح الملف على المٌتصفح الخاص بِك. إذا كان متصفحط يَدعم العّدادات سوف ترى النتيجة كما هي موضحة أدناه، وإن لم يكُن يُدعمها فلن ترى إلاَّ الأرقام والنُقتطان قبل القائمة التي هي بعنوان «Numbered paragraphs» :</p> - -<h3 id="The_oceans">The oceans</h3> - -<div class="syntaxbox">Arctic</div> - -<div class="syntaxbox">Atlantic</div> - -<div class="syntaxbox">Pacific</div> - -<div class="syntaxbox">Indian</div> - -<div class="syntaxbox">Southern</div> - -<h3 id="Numbered_paragraphs">Numbered paragraphs</h3> - -<div class="syntaxbox"><strong>1:</strong>Lorem ipsum</div> - -<div class="syntaxbox"><strong>2:</strong>Dolor sit</div> - -<div class="syntaxbox"><strong>3:</strong>Amet consectetuer</div> - -<div class="syntaxbox"><strong>4:</strong>Magna aliquam</div> - -<div class="syntaxbox"><strong>5:</strong>Autem veleum</div> - -<div class="tuto_example"> -<div class="tuto_type" dir="rtl"> تمرين إضافي </div> - -<div class="syntaxbox" dir="rtl"> أضِف قاعدة لملف التنسيق الخاص بك بحيث تجعل النمط قبل عناصِر القائِمة بحروف رومانية من i إلى v، بحيث تحصل على هذه النتيجة: </div> - -<div class="syntaxbox" dir="rtl"> </div> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 0 6em 1em 1em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p> - - <ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - </td> - </tr> - </tbody> -</table> - -<p dir="rtl">وقم بتغييرها مرة أُخرى إلى حروف لاتينية كبيرة قبل عناصرالقائمة، وستكون النتيجة هكذا: </p> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 0 6em 1em 1em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(A) The oceans</p> - - <p><strong>. . .</strong></p> - - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(B) Numbered paragraphs</p> - - <p><strong>. . .</strong></p> - </td> - </tr> - </tbody> -</table> -</div> - -<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Lists" title="en-US/docs/Web/Guide/CSS/Getting started/Challenge solutions#Lists">See solutions to these challenges.</a></p> - -<h2 dir="rtl" id="ما_هو_القادم_؟">ما هو القادم ؟</h2> - -<p dir="rtl">الصفحة القادمو هي ("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Boxes")</p> - -<p dir="rtl">عندما يعرض المتصفّح مستند الخاص بك، فإِنه يُنشئ مساحات حول العناصر عندما يضعها في مواضعها في الصّفحة. الصفّحة القادِمة تصف كيف يُمكن استخدام لغة الـCSS لتَّعامل مع هذه الأشكال من خلال الـ<a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes" title="en-US/docs/Web/Guide/CSS/Getting_Started/Boxes">boxes</a>.</p> diff --git a/files/ar/web/guide/css/index.html b/files/ar/web/guide/css/index.html deleted file mode 100644 index 2bd34295c7..0000000000 --- a/files/ar/web/guide/css/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: CSS developer guide -slug: Web/Guide/CSS -tags: - - CSS - - Guide - - Landing - - NeedsTranslation - - TopicStub -translation_of: Learn/CSS -translation_of_original: Web/Guide/CSS ---- -<p>{{draft}}</p> -<p><span class="seoSummary">Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML</span> or other markup languages such as SVG<span class="seoSummary">. CSS describes how the structured elements in the document are to be rendered on screen, on paper, in speech, or on other media.</span> The ability to adjust the document's presentation depending on the output medium is a key feature of CSS.</p> -<p>CSS is one of the core languages of the open Web and has a standardized <a class="external" href="http://w3.org/Style/CSS/#specs">W3C specification</a>.</p> -<p>{{LandingPageListSubpages}}</p> -<h2 id="Pages_elsewhere">Pages elsewhere</h2> -<p>Here are other pages related to CSS that should be linked to from here.</p> -<h2 id="See_also">See also</h2> -<ul> - <li><a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/HTML">CSS</a></li> - <li><a href="/en-US/docs/Web/Reference" title="/en-US/docs/Web/Reference">Web developer reference</a></li> - <li><a href="/en-US/docs/Web/Guide" title="/en-US/docs/Web/Guide">Web developer guide</a></li> -</ul> diff --git a/files/ar/web/guide/الرسومات/index.html b/files/ar/web/guide/graphics/index.html index 9c8335471a..9c8335471a 100644 --- a/files/ar/web/guide/الرسومات/index.html +++ b/files/ar/web/guide/graphics/index.html diff --git a/files/ar/web/guide/html/html5/html5_element_list/index.html b/files/ar/web/guide/html/html5/html5_element_list/index.html deleted file mode 100644 index 4c2a85ac03..0000000000 --- a/files/ar/web/guide/html/html5/html5_element_list/index.html +++ /dev/null @@ -1,599 +0,0 @@ ---- -title: مجموعه عناصر لغة HTML5 -slug: Web/Guide/HTML/HTML5/HTML5_element_list -tags: - - اتش تي ام ال - - اتش تي ام ال 5 - - المبتدئين - - الويب - - انترنت - - دليل - - وسوم -translation_of: Web/HTML/Element -translation_of_original: Web/Guide/HTML/HTML5/HTML5_element_list ---- -<p dir="rtl">كل <strong>عناصر HTML5 المعتمدة</strong> مدرجة هنا، حيث أن اسماءها تصفها ومرتبة في مجموعات حسب وظائفها.</p> - -<p dir="rtl">على عكس <a href="/en-US/docs/HTML/Element" title="فهرس عناصر HTML">فهرس عناصر HTML </a>الذي يشمل جميع عناصر HTML بما فيها المعتمدة وغير المعتمدة والصالحة والمهملة والملغية أيضًا، هذه الصفحة تتضمن عناصر HTML5 الصالحة فقط، العناصر الموجودة هنا هي التي يتوجب أن تستعمل في إنشاء المواقع الجديدة.</p> - -<p dir="rtl">العلامة <a href="/en-US/docs/HTML/HTML5"><img alt="This element was added as part of HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a> ترمز إلى أن العنصر قد تمت إضافته في HTML5، لاحظ أن العناصر الأخرى الموجودة هنا قد تكون ممددة أو معدلة في معانيها ضمن مواصفات HTML5.</p> - -<h2 dir="rtl" id="عنصر_الجذر">عنصر الجذر</h2> - -<table class="standard-table" dir="rtl"> - <thead> - <tr> - <th scope="col">العنصر</th> - <th scope="col">نبذة عنه</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("html")}}</td> - <td>وهو يمثل جذر الـ HTML أو مستند XHTML و <font>يجب أن تكون جميع العناصر الأخرى من نسل هذا العنصر.</font></td> - </tr> - </tbody> -</table> - -<h2 dir="rtl" id="البيانات_الرئيسة_للوثيقة">البيانات الرئيسة للوثيقة</h2> - -<table class="standard-table" dir="rtl"> - <thead> - <tr> - <th scope="col">العنصر</th> - <th scope="col">نبذة عنه</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("head")}}</td> - <td>وهو يمثل مجموعة من البيانات الوصفية حول الوثيقة بما في ذلك الوصلات أو تعريفات و البرامج النصية والسكريبتات و انماط الـ CSS .</td> - </tr> - <tr> - <td>{{HTMLElement("title")}}</td> - <td>يحدد عنوان الوثيقة كما هو موضح في شريط عنوان المتصفح أو في علامة التبويب الصفحة <font>ولابد أن يحتوي على نصوص فقط لا غير .</font></td> - </tr> - <tr> - <td>{{HTMLElement("base")}}</td> - <td>وهو يحدد الرابط الفتراضي للوثيقة كي يتم من خلاله فرز الروابط المنتسبة لصفحة من الرابط التابعه لاجناس اخرى .</td> - </tr> - <tr> - <td>{{HTMLElement("link")}}</td> - <td>وهو يستخدم لربط ملفات ألـ CSS والـ Javascript الخارجي مع وثيقة HTML .</td> - </tr> - <tr> - <td>{{HTMLElement("meta")}}</td> - <td>يستخدم لتعريف العناصر التي لايمكن تعريفها مثل الترميز وغير من الاستخدامات الاخرى .</td> - </tr> - <tr> - <td>{{HTMLElement("style")}}</td> - <td>يستخدم لكتابة CSS داخل وثيقة HTML .</td> - </tr> - </tbody> -</table> - -<h2 dir="rtl" id="البرمجة">البرمجة</h2> - -<table class="standard-table" dir="rtl"> - <thead> - <tr> - <th scope="col">العنصر</th> - <th scope="col">نبذة عنه</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("script")}}</td> - <td>يستخدم لربط ملف نصي برمجي خارجي او تضمين ملف نص برمجي ويمكن الكتابة داخله بالغات متعدده مثل javascript او php و غيره .</td> - </tr> - <tr> - <td>{{HTMLElement("noscript")}}</td> - <td>يحدد محتوى بديل لعرضه عندما لا يدعم المتصفح البرمجة .</td> - </tr> - <tr> - <td>{{HTMLElement("template")}}<a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>حاوية للمحتوى العميل أثناء وقت التشغيل باستخدام جافا سكريبت .</td> - </tr> - </tbody> -</table> - -<h2 dir="rtl" id="اقسام_التضمين">اقسام التضمين</h2> - -<table class="standard-table" dir="rtl"> - <thead> - <tr> - <th scope="col">العنصر</th> - <th scope="col">نبذة عنه</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("body")}}</td> - <td> - <div>وهو يمثل محتوى وثيقة HTML ولابد ان تكون كل العناصر الضاهره في الجسم داخلة .</div> - </td> - </tr> - <tr> - <td>{{HTMLElement("section")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>يمثل قطعه في في المستند .</td> - </tr> - <tr> - <td>{{HTMLElement("nav")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>يحدد المقطع الذي يحتوي على ارتباطات التنقل .</td> - </tr> - <tr> - <td>{{HTMLElement("article")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>يحدد محتوى منفصل بذاته والذي يمكن أن يوجد بشكل مستقل عن بقية المحتوى.</td> - </tr> - <tr> - <td>{{HTMLElement("aside")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>يعرف بعض المحتويات التي لها علاقة فضفاضة إلى محتوى الصفحة. إذا تم إزالته ، والمحتوى المتبقية لا يزال من المنطقي .</td> - </tr> - <tr> - <td><a href="/en-US/docs/HTML/Element/Heading_Elements"><code><h1>,<h2>,<h3>,<h4>,<h5>,<h6></code></a></td> - <td>وهو يمثل 6 مستويات من عناوين النصية واكبرهم حجماً <h1> وعكسه <h6></td> - </tr> - <tr> - <td>{{HTMLElement("header")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>يحدد محتوى بذاتها التي يمكن أن توجد بشكل مستقل عن بقية المحتوى . </td> - </tr> - <tr> - <td>{{HTMLElement("footer")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>>يحدد تذييل للصفحة أو قسم فإنه غالبا ما يحتوي على إشعار حقوق التأليف والنشر وبعض الروابط على المعلومات القانونية أو عناوين .</td> - </tr> - <tr> - <td>{{HTMLElement("address")}}</td> - <td>يعرف الجزء الذي يحتوي على معلومات للإتصال به.</td> - </tr> - <tr> - <td>{{HTMLElement("main")}}<a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>يحدد المحتوى الرئيسي أو مهم في الوثيقة. هناك واحد فقط <main> عنصر في الوثيقة.</td> - </tr> - </tbody> -</table> - -<h2 dir="rtl" id="جداول_البيانات">جداول البيانات</h2> - -<table class="standard-table" dir="rtl"> - <thead> - <tr> - <th scope="col">العنصر</th> - <th scope="col">نبذة عنه</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("p")}}</td> - <td>يحدد الجزء الذي يجب أن يتم عرض كفقرة .</td> - </tr> - <tr> - <td>{{HTMLElement("hr")}}</td> - <td>يمثل خط فاصل بين موضوعين .</td> - </tr> - <tr> - <td>{{HTMLElement("pre")}}</td> - <td>يحدد النص المكتوب كما هو بالسطر وافراغ .</td> - </tr> - <tr> - <td>{{HTMLElement("blockquote")}}</td> - <td> - <p>يمثل المحتوى الذي يتم نقلا عن مصدر آخر.</p> - </td> - </tr> - <tr> - <td>{{HTMLElement("ol")}}</td> - <td>يحدد قائمة مرتبة مرقمة من العناصر .</td> - </tr> - <tr> - <td>{{HTMLElement("ul")}}</td> - <td>يحدد قائمة غير مرتبة من البنود.</td> - </tr> - <tr> - <td>{{HTMLElement("li")}}</td> - <td>يحدد عنصر من قائمة التعداد.</td> - </tr> - <tr> - <td>{{HTMLElement("dl")}}</td> - <td>تعرف على قائمة تعريف ، وهذا هو ، على قائمة المصطلحات والتعاريف المرتبطة بها .</td> - </tr> - <tr> - <td>{{HTMLElement("dt")}}</td> - <td>يمثل مصطلح يعرفه القادم < DD > .<dd>.</td> - </tr> - <tr> - <td>{{HTMLElement("dd")}}</td> - <td>يمثل تعريف المصطلحات الواردة فورا قبل ذلك.</td> - </tr> - <tr> - <td>{{HTMLElement("figure")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>يمثل الرقم يتضح كجزء من الوثيقة.</td> - </tr> - <tr> - <td>{{HTMLElement("figcaption")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>يمثل أسطورة شخصية .</td> - </tr> - <tr> - <td>{{HTMLElement("div")}}</td> - <td>يمثل وعاء العامة مع عدم وجود معنى خاص .</td> - </tr> - </tbody> -</table> - -<h2 dir="rtl" id="عناصر_النصوص">عناصر النصوص</h2> - -<table class="standard-table" dir="rtl"> - <thead> - <tr> - <th scope="col">العنصر</th> - <th scope="col">نبذة عنه</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("a")}}</td> - <td>يمثل <em>الارتباط التشعبي</em> وربط إلى مورد آخر .</td> - </tr> - <tr> - <td>{{HTMLElement("em")}}</td> - <td>يمثل خط مائل .</td> - </tr> - <tr> - <td>{{HTMLElement("strong")}}</td> - <td> يمثل خط مشدد .</td> - </tr> - <tr> - <td>{{HTMLElement("small")}}</td> - <td>يمثل خط نحيف .</td> - </tr> - <tr> - <td>{{HTMLElement("s")}}</td> - <td>يمثل نص مشطوب او محذوف</td> - </tr> - <tr> - <td>{{HTMLElement("cite")}}</td> - <td> - <p>يمثل عنوان العمل. .</p> - </td> - </tr> - <tr> - <td>{{HTMLElement("q")}}</td> - <td>يمثل الاقتباس المضمنة. .</td> - </tr> - <tr> - <td>{{HTMLElement("dfn")}}</td> - <td>يمثل مصطلح الذي يرد في أقرب محتوى الجد التعريف.</td> - </tr> - <tr> - <td>{{HTMLElement("abbr")}}</td> - <td>يمثل اختصار أو اختصار . التوسع في اختصار يمكن أن تكون ممثلة في سمة العنوان.</td> - </tr> - <tr> - <td>{{HTMLElement("data")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>الزميلة ل محتواه ما يعادل المقروءة آليا . ( هذا العنصر فقط في إصدار WHATWG للمعيار HTML ، و ليس في الإصدار W3C من HTML5</td> - </tr> - <tr> - <td>{{HTMLElement("time")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>يمثل قيمة التاريخ والوقت . أي ما يعادل المقروءة آليا يمكن أن تكون ممثلة في سمة التاريخ والوقت .</td> - </tr> - <tr> - <td>{{HTMLElement("code")}}</td> - <td>يمثل عنصر يكتب بداخله الكود</td> - </tr> - <tr> - <td>{{HTMLElement("var")}}</td> - <td>يمثل المتغير ، وهذا هو ، تعبير أو البرمجة الرياضية السياق الفعلي ، معرف تمثل ثابت ، رمزا تحديد الكمية الفعلية ، معلمة وظيفة ، أو مجرد نائب في النثر .</td> - </tr> - <tr> - <td>{{HTMLElement("samp")}}</td> - <td>يمثل الناتج من برنامج أو جهاز كمبيوتر .</td> - </tr> - <tr> - <td>{{HTMLElement("kbd")}}</td> - <td>تمثل مدخلات المستخدمين، في كثير من الأحيان من لوحة المفاتيح ، ولكن ليس بالضرورة . قد تمثل المدخلات الأخرى ، مثل الأوامر الصوتية كتب .</td> - </tr> - <tr> - <td>{{HTMLElement("sub")}},{{HTMLElement("sup")}}</td> - <td>يمثل نص منخفظ او مرتفع</td> - </tr> - <tr> - <td>{{HTMLElement("i")}}</td> - <td>تمثل بعض النص في صوت بديل أو المزاج، أو على الأقل من نوعية مختلفة ، مثل تسمية التصنيف، مصطلح تقني ، عبارة اصطلاحية ، الفكر، أو اسم السفينة</td> - </tr> - <tr> - <td>{{HTMLElement("b")}}</td> - <td>يمثل نص مشدد .</td> - </tr> - <tr> - <td>{{HTMLElement("u")}}</td> - <td>يمثل annoatation غير النصية التي العرض التقليدية و التسطير ، واصفة هذا النص كما يجري أخطأ في الهجاء أو وصفها الاسم الصحيح في النص الصيني</td> - </tr> - <tr> - <td>{{HTMLElement("mark")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>يمثل نص مشار اليه بالون الاصفر</td> - </tr> - <tr> - <td>{{HTMLElement("ruby")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>يمثل المحتوى إلى أن تكون علامة مع شروح روبي ، المديين القصير من النص قدمت جنبا إلى جنب مع النص. وكثيرا ما يستخدم هذا بالتزامن مع لغة شرق آسيا حيث تعمل شروح كدليل للنطق ، مثل furigana الياباني . .</td> - </tr> - <tr> - <td>{{HTMLElement("rt")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>يمثل نص الشرح روبي .</td> - </tr> - <tr> - <td>{{HTMLElement("rp")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>يمثل قوسين حول الشرح روبي ، وتستخدم لعرض الشرح بطريقة بديلة من قبل المتصفحات لا تدعم العرض القياسية ل شروحه.</td> - </tr> - <tr> - <td>{{HTMLElement("bdi")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>يمثل النص الذي يجب أن تكون معزولة عن محيطها ل تنسيق النص ثنائي الاتجاه . لأنها تتيح تضمين فترة من النص مع مختلف أو غير معروف، الاتجاهية .</td> - </tr> - <tr> - <td>{{HTMLElement("bdo")}}</td> - <td>يمثل اتجاهها من أبنائها ، من أجل تجاوز صراحة خوارزمية ثنائية الاتجاه يونيكود</td> - </tr> - <tr> - <td>{{HTMLElement("span")}}</td> - <td>يمثل النص مع عدم وجود معنى محدد . هذا لابد من استخدامها عند ينقل أي عنصر النص الدلالي الآخرين معنى كاف، وهو ، في هذه الحالة، وغالبا ما رفعتها سمات عالمية مثل الطبقة ، لانج ، أو دير.</td> - </tr> - <tr> - <td>{{HTMLElement("br")}}</td> - <td>يمثل سطر جديد</td> - </tr> - <tr> - <td>{{HTMLElement("wbr")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>يمثل فرصة كسر خط ، وهذا هو نقطة المقترحة لل التفاف النص من أجل تحسين إمكانية القراءة من تقسيم النص على عدة أسطر .</td> - </tr> - </tbody> -</table> - -<h2 dir="rtl" id="التعديلات">التعديلات</h2> - -<table class="standard-table" dir="rtl"> - <thead> - <tr> - <th scope="col">العنصر</th> - <th scope="col">نبذة عنه</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("ins")}}</td> - <td>عنصر مضاف او تم تعديله</td> - </tr> - <tr> - <td>{{HTMLElement("del")}}</td> - <td>عنصر محذوف وهو مثيل العنصر {{HTMLElement("s")}}</td> - </tr> - </tbody> -</table> - -<h2 dir="rtl" id="التضمين_و_الميديا">التضمين و الميديا</h2> - -<table class="standard-table" dir="rtl"> - <thead> - <tr> - <th scope="col">العنصر</th> - <th scope="col">نبذة عنه</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("img")}}</td> - <td>يستخدم لربط الصور بالوثيقه</td> - </tr> - <tr> - <td>{{HTMLElement("iframe")}}</td> - <td>يمثل السياق تصفح متداخلة ، وهذا هو وثيقة HTML المضمنة.</td> - </tr> - <tr> - <td>{{HTMLElement("embed")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>تمثل نقطة التكامل ل خارجي ، في كثير من الأحيان غير HTML ، تطبيق أو المحتوى التفاعلي .</td> - </tr> - <tr> - <td>{{HTMLElement("object")}}</td> - <td>تمثل الموارد الخارجية ، التي تعامل على أنها صورة، وثيقة الفرعية HTML ، أو الموارد الخارجية التي سيتم تجهيزها من قبل في المكونات .</td> - </tr> - <tr> - <td>{{HTMLElement("param")}}</td> - <td>تعرف المعلمات للاستخدام من قبل المكونات الإضافية التي يحتج بها <كائن > العناصر.</td> - </tr> - <tr> - <td>{{HTMLElement("video")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>يمثل الفيديو ، والملفات المرتبطة به الصوت و تعليق عليها، مع واجهة اللازمة لتشغيله .</td> - </tr> - <tr> - <td>{{HTMLElement("audio")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>يمثل الصوت ، أو تيار الصوت.</td> - </tr> - <tr> - <td>{{HTMLElement("source")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>يسمح المؤلفين لتحديد الموارد وسائل الإعلام البديلة ل عناصر الوسائط مثل {{HTMLElement("video")}} or {{HTMLElement("audio")}}.</td> - </tr> - <tr> - <td>{{HTMLElement("track")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>يسمح المؤلفين لتحديد مسار النص توقيت ل عناصر الوسائط مثل {{HTMLElement("video")}}<em>or {{HTMLElement("audio")}}.</em></td> - </tr> - <tr> - <td>{{HTMLElement("canvas")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>تمثل منطقة خريطة أبيت أن النصوص يمكن استخدامها ل تقديم الرسومات ، مثل الرسوم البيانية والرسوم البيانية لعبة ، أو أي الصور المرئية على الطاير .</td> - </tr> - <tr> - <td>{{HTMLElement("map")}}</td> - <td>بالتزامن مع {{HTMLElement("area")}}, يحدد مخطط صورة.</td> - </tr> - <tr> - <td>{{HTMLElement("area")}}</td> - <td>بالتزامن مع {{HTMLElement("map")}},يحدد مخطط صورة.</td> - </tr> - <tr> - <td>{{SVGElement("svg")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>تعرف على إد الإدارة الانتخابية دائرة التنمية الاقتصادية صورة اتجاهي .</td> - </tr> - <tr> - <td>{{MathMLElement("math")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>يحدد صيغة رياضية.</td> - </tr> - </tbody> -</table> - -<h2 dir="rtl" id="Tabular_data">Tabular data</h2> - -<table class="standard-table" dir="rtl"> - <thead> - <tr> - <th scope="col">العنصر</th> - <th scope="col">نبذة عنه</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("table")}}</td> - <td>تمثل البيانات مع أكثر من بعد واحد.</td> - </tr> - <tr> - <td>{{HTMLElement("caption")}}</td> - <td>يمثل عنوان الجدول.</td> - </tr> - <tr> - <td>{{HTMLElement("colgroup")}}</td> - <td>تمثل مجموعة من واحد أو أكثر من الأعمدة من الجدول.</td> - </tr> - <tr> - <td>{{HTMLElement("col")}}</td> - <td>يمثل عمود من الجدول.</td> - </tr> - <tr> - <td>{{HTMLElement("tbody")}}</td> - <td>يمثل كتلة من الصفوف التي تصف البيانات ملموسة من الجدول.</td> - </tr> - <tr> - <td>{{HTMLElement("thead")}}</td> - <td>يمثل كتلة من الصفوف التي تصف التسميات عمود من الجدول.</td> - </tr> - <tr> - <td>{{HTMLElement("tfoot")}}</td> - <td>يمثل كتلة من الصفوف التي تصف ملخصات عمود من الجدول.</td> - </tr> - <tr> - <td>{{HTMLElement("tr")}}</td> - <td>يمثل صف من الخلايا في الجدول.</td> - </tr> - <tr> - <td>{{HTMLElement("td")}}</td> - <td>يمثل خلية البيانات في الجدول.</td> - </tr> - <tr> - <td>{{HTMLElement("th")}}</td> - <td>يمثل خلية رأس في الجدول.</td> - </tr> - </tbody> -</table> - -<h2 dir="rtl" id="الاشكال"> الاشكال</h2> - -<table class="standard-table" dir="rtl"> - <thead> - <tr> - <th scope="col">العنصر</th> - <th scope="col">نبذة عنه</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("form")}}</td> - <td>عنصر تبادل المعلومات مع الخادم حيث يكون داخله مجموعه من العناصر تتيح لمستخدم التعديل والاضافه</td> - </tr> - <tr> - <td>{{HTMLElement("fieldset")}}</td> - <td>مثل عنصار او ضوابط مرتبة</td> - </tr> - <tr> - <td>{{HTMLElement("legend")}}</td> - <td>يمثل عنوان <code><fieldset> </code>.</td> - </tr> - <tr> - <td>{{HTMLElement("label")}}</td> - <td>يعتبر توضيح او اسم عنصر داخل <form></td> - </tr> - <tr> - <td>{{HTMLElement("input")}}</td> - <td>يمثل حقل من البينات مما يتحُيح للمستخدم استعمالها</td> - </tr> - <tr> - <td>{{HTMLElement("button")}}</td> - <td>عباره عن وز .</td> - </tr> - <tr> - <td>{{HTMLElement("select")}}</td> - <td> يمثل مجموعه من الخيارات المٌسدله المرتبة .</td> - </tr> - <tr> - <td>{{HTMLElement("datalist")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>يمثل قائمة منسدله تحوي مجموعه من الخيارات المعدة مسبقاً اشبه باقائمة .</td> - </tr> - <tr> - <td>{{HTMLElement("optgroup")}}</td> - <td>يمثل عنوان لمجموعه خيارات <option> الي تكون ادخل {{HTMLElement("optgroup")}} الي هي داخل {{HTMLElement("datalist")}}.</td> - </tr> - <tr> - <td>{{HTMLElement("option")}}</td> - <td>يمثلخيارات داخل العنصر{{HTMLElement("select")}} أو اقتراح من{{HTMLElement("datalist")}}.</td> - </tr> - <tr> - <td>{{HTMLElement("textarea")}}</td> - <td>مربع يكتب بداخله نص يمكن التحكم به .</td> - </tr> - <tr> - <td>{{HTMLElement("keygen")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>يمثل سطر مولد مفاتيح .</td> - </tr> - <tr> - <td>{{HTMLElement("output")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>سَحاب يمكن التحكم به .</td> - </tr> - <tr> - <td>{{HTMLElement("progress")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>يمثل شريط اخذ بالمتلاء يعني مثل الداون لود منيجر لما يكون ايحمل</td> - </tr> - <tr> - <td>{{HTMLElement("meter")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>يمثل قيمة مئويه اخذه بالمتلاء بشكل صغير .</td> - </tr> - </tbody> -</table> - -<h2 dir="rtl" id="العناصر_التفاعلية" style="line-height: 30px;">العناصر التفاعلية</h2> - -<table class="standard-table" dir="rtl"> - <thead> - <tr> - <th scope="col">العنصر</th> - <th scope="col">نبذة عنه</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("details")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>يمثل قائمة مُنسدله من الخيارات</td> - </tr> - <tr> - <td>{{HTMLElement("summary")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>وهو يمثل عنوان لقائمة العنصر <details<span style="line-height: 1.5;">> .</span></td> - </tr> - <tr> - <td>{{HTMLElement("menuitem")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>يمثل <em>الأوامر</em> التي تمكن المستخدم من الاستدعاء.</td> - </tr> - <tr> - <td>{{HTMLElement("menu")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>يمثل قائمة من العناصر .</td> - </tr> - </tbody> -</table> - -<h2 dir="rtl" id="وهنُاك_أيضاً">وهنُاك أيضاً</h2> - -<ul> - <li dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5" title="HTML/HTML5">وهناك مجموعة من الوثائق حول HTML5</a>.</li> - <li dir="rtl">في <a href="https://developer.mozilla.org/en-US/docs/HTML/Element" title="HTML / العنصر">إشارة لجميع علامات HTML</a> ، بما في ذلك عناصر لم تعد صالحة في HTML5.</li> -</ul> diff --git a/files/ar/web/guide/mobile/index.html b/files/ar/web/guide/mobile/index.html new file mode 100644 index 0000000000..cc288a9c45 --- /dev/null +++ b/files/ar/web/guide/mobile/index.html @@ -0,0 +1,18 @@ +--- +title: Mobile Web development +slug: Web_Development/Mobile +tags: + - Mobile + - NeedsTranslation + - TopicStub + - Web Development +translation_of: Web/Guide/Mobile +translation_of_original: Web_Development/Mobile +--- +<p>Developing web sites to be viewed on mobile devices requires approaches that ensure a web site works as well on mobile devices as it does on desktop browsers. The following articles describe some of these approaches.</p> +<ul> + <li><a class="vt-p" href="/en/Web_Development/Mobile/Mobile-friendliness" title="/en/Web_development/Mobile/Mobile-friendliness">What is mobile-friendliness?</a></li> + <li><a class="vt-p" href="/en/Web_Development/Mobile/Separate_sites" title="en/Web_development/Mobile/Separate sites">Separate sites</a></li> + <li><a class="vt-p" href="/en/Web_Development/Mobile/Responsive_design" title="/en/Web_development/Mobile/Responsive design">Responsive design</a></li> + <li><a class="vt-p" href="/en/Web_development/Mobile/A_hybrid_approach" title="A New Approach to Web Applications (external)">A hybrid approach</a></li> +</ul> diff --git a/files/ar/web/html/element/article/index.html b/files/ar/web/html/element/article/index.html new file mode 100644 index 0000000000..4ffbdbe80a --- /dev/null +++ b/files/ar/web/html/element/article/index.html @@ -0,0 +1,153 @@ +--- +title: عنصر المقالة <article> +slug: HTML/Element/article +translation_of: Web/HTML/Element/article +--- +<div>{{HTMLRef}}</div> + +<p dir="rtl">عنصر الـ <article> الموجود في الـ html فهو مفهوم من عنوانه والذي يعني (مقال) ونعرف جميعنا ان المقالات بنية مستقلة بذاتها. وتوجد في الوثائق, الصفحات, التطبيقات او المواقع. ما نتحدث عنه اليوم هو كيف نكتب عناصر الـ html لصفحة تحتوي على مقالات مثل : منشور المنتديات, مقالات الصفحات و المجلات. حتى منشورات المدونات blogs تعتبر مقالة. </p> + +<p dir="rtl">في حالة اردت ان تبرمج صفحة تختص بالمقالات لابد لك ان تقوم باستخدام تاك او عنصر <article>. المثال التالي يوضع استخدام المقالة بابسط صوره لها: </p> + +<div>{{EmbedInteractiveExample("pages/tabbed/article.html", "tabbed-standard")}}</div> + +<div></div> + +<div class="hidden" dir="rtl">مصدر هذا المثال موجود في موقع GitHub ويمكنك المشاركة من خلال نسخ المثال الموجود في الرابط ادناه <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>بعدها يمكن ان ترسل لنا طلبا.</div> + +<p dir="rtl">يمكن لصفحة الواحدة ان تحتوي على الكثير من المقالات. وهذا المثال دليل على ذلك. ليس هذا فحسب, فيمكن ان يكون عنصر المقالة يحتوي على عناصر مقالة بداخله ( تسمى nested element اي العناصر المتداخلة ).</p> + +<p dir="rtl">اليك معلومات خاطفة عن هذا العنصر:</p> + +<table class="properties" dir="rtl"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">فئة المكون </a></th> + <td> + <p><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Sectioning_content">sectioning content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Palpable_content">palpable content</a></p> + </td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a>. Note that an <code><article></code> element must not be a descendant of an {{HTMLElement("address")}} element.</td> + </tr> + <tr> + <th scope="row">Implicit ARIA role</th> + <td><code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Article_Role">article</a></code></td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("main")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="الخصائص">الخصائص</h2> + +<p dir="rtl">هذا العنصر يحتوي على الخصائص العامة فقط.<a href="/ar/docs/docs/HTML/Global_attributes"> يمكنك زيارتها من هنا</a></p> + +<h2 dir="rtl" id="ملاحظات_الاستخدام">ملاحظات الاستخدام</h2> + +<p dir="rtl">انت حر في استخدام هذا العنصر. ولكننا نفضل ان تقوم بمراعات هذه النقاط على الاقل.</p> + +<ul> + <li dir="rtl">كل عنصر <article> يجب ان يتم تعريفه من خلال تضمين عناوين heading باستخدام <a href="/ar/docs/Web/HTML/Element/Heading_Elements">h1-h6 </a>وتكون هذه العناصر بداخل هذا العنصر</li> + <li dir="rtl">عندما تحاول ان تكتب عنصر <article> (اي عندما تحول كتابة nested element) عليك مراعاة ان يكون العنصر الداخلي متصل بالعنصر الخارجي. مثلا تعليقات المنشور يجب ان تكون article . </li> + <li dir="rtl">معلومات مؤلف المنشور اذا امكن ان تكون في عنصر الـ <address> </li> + <li dir="rtl">التواريخ الخاص بالمقالة مثل تاريخ النشر وغيرها يجب ان تكون من اختصاص العنصر <a href="/ar/docs/Web/HTML/Element/time#attr-datetime"><time> ويمكنك الاطلاع على هذا العنصر من هنا</a></li> +</ul> + +<p dir="rtl">المثال التالي يلخص لك هذه النقاط:</p> + +<pre class="brush: html notranslate"><article class="film_review"> + <header> + <h2>Jurassic Park</h2> + </header> + <section class="main_review"> + <p>Dinos were great!</p> + </section> + <section class="user_reviews"> + <article class="user_review"> + <p>Way too scary for me.</p> + <footer> + <p> + Posted on + <time datetime="2015-05-16 19:00">May 16</time> + by Lisa. + </p> + </footer> + </article> + <article class="user_review"> + <p>I agree, dinos are my favorite.</p> + <footer> + <p> + Posted on + <time datetime="2015-05-17 19:00">May 17</time> + by Tom. + </p> + </footer> + </article> + </section> + <footer> + <p> + Posted on + <time datetime="2015-05-15 19:00">May 15</time> + by Staff. + </p> + </footer> +</article> +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sections.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.article")}}</p> + +<h2 dir="rtl" id="يمكنك_زيارة_التالي">يمكنك زيارة التالي:</h2> + +<ul> + <li dir="rtl">العناصر المرتبطة بهذا العنصر - او ربما تستخدمها معه: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li> + <li><a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Using HTML sections and outlines</a></li> +</ul> diff --git a/files/ar/web/html/element/bdo/index.html b/files/ar/web/html/element/bdo/index.html new file mode 100644 index 0000000000..ee154b30c1 --- /dev/null +++ b/files/ar/web/html/element/bdo/index.html @@ -0,0 +1,108 @@ +--- +title: '<bdo>: عنصر تجاوز النص ثنائي الاتجاه' +slug: HTML/Element/bdo +translation_of: Web/HTML/Element/bdo +--- +<div>{{HTMLRef}}</div> + +<p dir="rtl"><span class="seoSummary"><strong>HTML </strong>عنصر تجاوز النص ثنائي الاتجاه(<strong><code><bdo></code></strong>) يتجاوز الاتجاه الحالي للنص، بحيث يتم تقديم النص داخل في اتجاه مختلف. يتم رسم أحرف النص من نقطة البداية في الاتجاه المحدد. لا يتأثر اتجاه الحروف الفردية (حتى لا تحصل على أحرف إلى الوراء، على سبيل المثال).</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">يحتوي الفئات</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">المحتوى المسموح به</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">وسم الإقفال</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">يسمح الآباء</th> + <td>أي عنصر يقبل <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">صياغة المحتوى.</a></td> + </tr> + <tr> + <th scope="row">قواعد ARIA مسموح</th> + <td>الكل</td> + </tr> + <tr> + <th scope="row">DOM واجهة</th> + <td>{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the <code><a href="/en-US/docs/Web/API/HTMLSpanElement">HTMLSpanElement</a></code> interface for this element.</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="السِمات">السِمات</h2> + +<p dir="rtl">تتضمن سمات هذه العناصر <a href="/en-US/docs/HTML/Global_attributes">السمات العامة.</a></p> + +<dl> + <dt dir="rtl">{{htmlattrdef("dir")}}</dt> + <dd dir="rtl">الاتجاه الذي يجب أن يظهر فيه النص في محتويات هذا العنصر.</dd> + <dd dir="rtl">القيم المحتملة هي:</dd> + <dd> + <ul> + <li dir="rtl"><code>ltr</code>: يشير إلى أن النص يجب أن يسير في الاتجاه من اليسار إلى اليمين.</li> + <li dir="rtl"><code>rtl</code>:يشير إلى أن النص يجب أن يكون في الاتجاه من اليمين إلى اليسار.</li> + </ul> + </dd> +</dl> + +<h2 dir="rtl" id="الأمثلة">الأمثلة</h2> + +<pre class="brush: html"><!-- Switch text direction --> +<p>This text will go left to right.</p> +<p><bdo dir="rtl">This text will go right +to left.</bdo></p> +</pre> + +<h3 id="النتيجة">النتيجة</h3> + +<p> </p> + +<p>{{EmbedLiveSample('Examples')}}</p> + +<p> </p> + +<h2 dir="rtl" id="ملاحظات">ملاحظات</h2> + +<p dir="rtl">مواصفات HTML 4 لم تحدد أحداث لهذا العنصر؛ تمت إضافتها في XHTML. وهذا على الأرجح سهو.</p> + +<h2 dir="rtl" id="مميزات">مميزات</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">المميزات</th> + <th scope="col">الحالة</th> + <th scope="col">تعليق</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-bdo-element', '<bdo>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-bdo-element', '<bdo>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'dirlang.html#h-8.2.4', '<bdo>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="التكامل(دعم)_مع_المتصفح">التكامل(دعم) مع المتصفح</h2> + + + +<p>{{Compat("html.elements.bdo")}}</p> diff --git a/files/ar/web/html/element/heading_elements/index.html b/files/ar/web/html/element/heading_elements/index.html new file mode 100644 index 0000000000..acd3267d37 --- /dev/null +++ b/files/ar/web/html/element/heading_elements/index.html @@ -0,0 +1,244 @@ +--- +title: '<h1>–<h6>: عناصر العناوين' +slug: HTML/Element/headings_elements +translation_of: Web/HTML/Element/Heading_Elements +--- +<p dir="rtl"> عناصر <span class="seoSummary"><strong><code><h1></code>–<code><h6></code></strong></span> تقدم لنا سته مستويات من عناوين الأقسام. حيث أن العنصر<span class="seoSummary"><code><h1></code> يمثل العنوان الأعلى مستوى في الأهمية بينما العنصر <code><h2></code> هو الأقل.</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">فئات المحتوى </a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, heading content, palpable content.</td> + </tr> + <tr> + <th scope="row">المحتوى المسموح به</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">إغفال الوسوم</th> + <td>لا شئ، كلاً من وسمّي الفتح والإقفال إجباري</td> + </tr> + <tr> + <th scope="row">الأباء المسموح بهم للعنصر</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>; don't use an heading element as a child of the {{HTMLElement("hgroup")}} element — it is now deprecated.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLHeadingElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="السمات">السمات</h2> + +<p dir="rtl">هذه العناصر تتضمن <a href="/en-US/docs/Web/HTML/Global_attributes">السمات العامة</a>.</p> + +<div class="note" dir="rtl"> +<p>السمة <code>align</code> عفاء عنها الزمن، لا تستخدمها</p> +</div> + +<h2 id="ملاحظات_الإستخدام" style="direction: rtl;">ملاحظات الإستخدام</h2> + +<ul> + <li dir="rtl">يمكن إستخدام معلومات العناوين من قبل الـ user agents, على سبيل المثال لإنشاء جدول المحتويات لمستند بشكل تلقائي.</li> + <li dir="rtl">لا تستخدم عناوين بمستويات منخفضة لتقليل حجم خط العناوين: إستخدم خاصية لغة CSS المسؤولة عن التحكم بأحجام الخطوط <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size">font-size</a> بدلاً من ذلك.</li> + <li dir="rtl"> تجنب تخطي مستويات العناوين: دائماً إبدا من <code><h1></code>، من ثم إستخدم <code><h2></code> وهكذا.</li> + <li dir="rtl">يجب أن تأخذ بعين الإعتبار تجنب إستخدام العنصر <h1> أكثر من مرة في الصفحة. إطلع على <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Defining_sections">تعريف الأقسام</a> في <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">إستخدام الأقسام و وتسلسل العناوين في الـ HTML</a> لمعلومات أكثر.</li> +</ul> + +<h2 id="أمثلة" style="direction: rtl;">أمثلة</h2> + +<h3 id="جميع_العناوين" style="direction: rtl;">جميع العناوين</h3> + +<p style="direction: rtl;">الكود التالي يظهر كل مستويات العناوين، قيد الإستخدام.</p> + +<pre class="brush: html"><h1>Heading level 1</h1> +<h2>Heading level 2</h2> +<h3>Heading level 3</h3> +<h4>Heading level 4</h4> +<h5>Heading level 5</h5> +<h6>Heading level 6</h6> +</pre> + +<p style="direction: rtl;">هنا نتيجة هذا الكود:</p> + +<p>{{ EmbedLiveSample('All_headings', '280', '300', '') }}</p> + +<h3 id="مثال_لصفحة" style="direction: rtl;">مثال لصفحة</h3> + +<p style="direction: rtl;">الكود التالي يظهر بعض العناوين مع بعض المحتوى بأسفلها.</p> + +<pre class="brush: html"><h1>Heading elements</h1> +<h2>Summary</h2> +<p>Some text here...</p> + +<h2>Examples</h2> +<h3>Example 1</h3> +<p>Some text here...</p> + +<h3>Example 2</h3> +<p>Some text here...</p> + +<h2>See also</h2> +<p>Some text here...</p> +</pre> + +<p style="direction: rtl;">هنا نتيجة هذا الكود:</p> + +<p>{{ EmbedLiveSample('Example_page', '280', '480', '') }}</p> + +<h2 id="سهولة_الوصول" style="direction: rtl;">سهولة الوصول</h2> + +<h3 id="التنقل_بين_الأجزاء_والصفحات" style="direction: rtl;">التنقل بين الأجزاء والصفحات</h3> + +<p style="direction: rtl;">من الأساليب الشائعة للتنقل بين أجزاء الصفحة من قبل مستخدمي قارئات الشاشات هو القفز من عنوان لأخر لتحديد محتوى الصفحة بشكل سريع. </p> + +<p style="direction: rtl;">لهذا السبب، من المهم عدم تخطي أحد مستويات العناوين فالقيام بذلك قد يسبب ارتباك للشخص الذي يقوم بالتنقل بين أجزاء الموقع بهذه الطريقة وربما يترك لدية نوع من الحيرة عن أين هو العنوان المفقود.</p> + +<h4 id="لا_تقم_بالتالي" style="direction: rtl;">لا تقم بالتالي:</h4> + +<pre class="brush: html example-bad"><h1>Heading level 1</h1> +<h3>Heading level 3</h3> +<h4>Heading level 4</h4> +</pre> + +<h4 id="قم_بالتالي" style="direction: rtl;">قم بالتالي:</h4> + +<pre class="brush: html example-good"><h1>Heading level 1</h1> +<h2>Heading level 2</h2> +<h3>Heading level 3</h3> +</pre> + +<h4 id="تسلسل_العناوين_-_Nesting" style="direction: rtl;">تسلسل العناوين - Nesting</h4> + +<p style="direction: rtl;">قد يتم عمل تسلسل لبعض العناوين لتبدو كعناوين أقسام فرعية لعكس تنظيم محتوى الصفحة. أغلب قارئات الشاشات تستطيع أيضا تكوين قائمة مرتبة لكل العناوين التي في الصفحة، ما قد يساعد الشخص لتحديد التسلسل الهرمي للمحتوى بسرعة :</p> + +<ol> + <li><code>h1</code> Beetles + + <ol> + <li><code>h2</code> Etymology</li> + <li><code>h2</code> Distribution and Diversity</li> + <li><code>h2</code> Evolution + <ol> + <li><code>h3</code> Late Paleozoic</li> + <li><code>h3</code> Jurassic</li> + <li><code>h3</code> Cretaceous</li> + <li><code>h3</code> Cenozoic</li> + </ol> + </li> + <li><code>h2</code> External Morphology + <ol> + <li><code>h3</code> Head + <ol> + <li><code>h4</code> Mouthparts</li> + </ol> + </li> + <li><code>h3</code> Thorax + <ol> + <li><code>h4</code> Prothorax</li> + <li><code>h4</code> Pterothorax</li> + </ol> + </li> + <li><code>h3</code> Legs</li> + <li><code>h3</code> Wings</li> + <li><code>h3</code> Abdomen</li> + </ol> + </li> + </ol> + </li> +</ol> + +<p>When headings are nested, heading levels may be "skipped" when closing a subsection.</p> + +<ul> + <li><a href="https://www.w3.org/WAI/tutorials/page-structure/headings/">Headings • Page Structure • WAI Web Accessibility Tutorials</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_—_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Understanding WCAG, Guideline 2.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html">Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-headings.html">Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h3 id="Labeling_section_content">Labeling section content</h3> + +<p>Another common navigation technique for users of screen reading software is to generate a list of <a href="/en-US/docs/Web/HTML/Element#Content_sectioning">sectioning content</a> and use it to determine the page's layout.</p> + +<p>Sectioning content can be labeled using a combination of the <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> and {{htmlattrxref("id")}} attributes, with the label concisely describing the purpose of the section. This technique is useful for situations where there is more than one sectioning element on the same page.</p> + +<h4 id="Example">Example</h4> + +<pre class="brush: html"><header> + <nav aria-labelledby="primary-navigation"> + <h2 id="primary-navigation">Primary navigation</h2> + <!-- navigation items --> + </nav> +</header> + +<!-- page content --> + +<footer> + <nav aria-labelledby="footer-navigation"> + <h2 id="footer-navigation">Footer navigation</h2> + <!-- navigation items --> + </nav> +</footer> +</pre> + +<p>In this example, screen reading technology would announce that there are two {{HTMLElement("nav")}} sections, one called "Primary navigation" and one called "Footer navigation". If labels were not provided, the person using screen reading software may have to investigate each <code>nav</code> element's contents to determine their purpose.</p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Using the aria-labelledby attribute</a></li> + <li><a href="https://www.w3.org/WAI/tutorials/page-structure/labels/#using-aria-labelledby">Labeling Regions • Page Structure • W3C WAI Web Accessibility Tutorials</a></li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.h1")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTMLElement("p")}}</li> + <li>{{HTMLElement("div")}}</li> + <li>{{HTMLElement("section")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/ar/web/html/element/index.html b/files/ar/web/html/element/index.html new file mode 100644 index 0000000000..a2fb5187e7 --- /dev/null +++ b/files/ar/web/html/element/index.html @@ -0,0 +1,239 @@ +--- +title: HTML element reference +slug: HTML/Element +translation_of: Web/HTML/Element +--- +<p><font><font>يسرد مرجع HTML هذا جميع </font></font><strong><font><font>عناصر HTML</font></font></strong><font><font> ، المحددة في HTML5 أو في مواصفات سابقة. </font><font>عند تضمينها داخل أقواس زاوية ، فإنها تشكل </font></font><em><font><font>علامات HTML</font></font></em><font><font> : </font></font><code><elementname>.</code><font><font>العناصر عبارة عن كيانات تحدد كيفية إنشاء مستندات HTML ، ونوع المحتوى الذي يجب وضعه في أي جزء من </font><font>مستند </font></font><a href="https://developer.mozilla.org/en-US/docs/HTML" title="/ EN-US / مستندات / HTML"><font><font>HTML</font></font></a><font><font> .</font></font></p> + +<p><font><font>تسرد هذه الصفحة جميع علامات HTML5 القياسية ، ولكنها تحتوي أيضًا على العلامات القديمة والبالية والمهملة ، بالإضافة إلى العلامات غير القياسية التي قد تدعمها المتصفحات. </font><font>غالبًا ما يشار إلى </font><font>العناصر التي تم تقديمها في </font></font><a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5" title="/ EN-US / مستندات / HTML / HTML5"><font><font>HTML5</font></font></a><font><font> على أنها عناصر HTML5 الجديدة ، على الرغم من أن العناصر القياسية الأخرى صالحة أيضًا في HTML5.</font></font></p> + +<p><font><font>في مستند HTML ، يتم تعريف عنصر بواسطة </font></font><em><font><font>علامة البداية</font></font></em><font><font> . </font><font>إذا احتوى عنصر المحتويات الأخرى، وينتهي مع </font></font><em><font><font>علامة إغلاق</font></font></em><font><font>، حيث يسبق اسم العنصر بواسطة خط مائل: </font></font><code></elementname></code><font><font>. </font><font>لا تحتاج إلى إغلاق بعض العناصر ، مثل عناصر الصورة.</font><font>هذه هي المعروفة باسم </font><font>العناصر </font></font><em><font><font>باطلة</font></font></em><font><font> . </font><font>تحتوي مستندات HTML على شجرة من هذه العناصر. </font><font>يدعى كل لتمثيل ما يفعله. </font><font>على سبيل المثال ، </font></font><code><title></code><font><font>يمثل العنصر عنوان المستند. </font><font>فيما يلي قائمة أبجدية بعناصر HTML.</font></font></p> + +<p><a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5"><img alt="تمت إضافة هذا العنصر في HTML5" src="https://developer.mozilla.org/files/3843/HTML5_Badge_32.png" title="تمت إضافة هذا العنصر في HTML5"></a><font><font>يشير </font><font>الرمز </font><font>إلى أنه تمت إضافة العنصر في HTML5. </font><font>لاحظ أنه ربما تم تعديل أو توسيع العناصر الأخرى المدرجة هنا حسب مواصفات HTML5. </font><font>العناصر البعدية غير قياسية أو قديمة أو متوقفة ؛ </font><font>يجب عدم استخدامها في مواقع ويب جديدة ، ويجب إزالتها بشكل تدريجي من المواقع الحالية لتجنب النتائج غير المرغوب فيها.</font></font></p> + +<p>يشير الرمز Ⓒ إلى أن العنصر معرف في مجموعة المواصفات Web Components.</p> + +<div class="index widgeted"><span id="A">A</span> + +<ul> + <li>{{ HTMLElement("a") }}</li> + <li>{{ HTMLElement("abbr") }}</li> + <li><s class="obsoleteElement">{{ HTMLElement("acronym") }}</s></li> + <li>{{ HTMLElement("address") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("applet") }}</s></li> + <li>{{ HTMLElement("area") }}</li> + <li class="html5">{{ HTMLElement("article") }}</li> + <li class="html5">{{ HTMLElement("aside") }}</li> + <li class="html5">{{ HTMLElement("audio") }}</li> +</ul> +<span id="B">B</span> + +<ul> + <li>{{ HTMLElement("b") }}</li> + <li>{{ HTMLElement("base") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("basefont") }}</s></li> + <li class="html5">{{ HTMLElement("bdi") }}</li> + <li>{{ HTMLElement("bdo") }}</li> + <li><s class="nonStdElement">{{ HTMLElement("bgsound") }}</s></li> + <li><s class="obsoleteElement">{{ HTMLElement("big") }}</s></li> + <li><s class="nonStdElement">{{ HTMLElement("blink") }}</s></li> + <li>{{ HTMLElement("blockquote") }}</li> + <li>{{ HTMLElement("body") }}</li> + <li>{{ HTMLElement("br") }}</li> + <li>{{ HTMLElement("button") }}</li> +</ul> +<span id="C">C</span> + +<ul> + <li class="html5">{{ HTMLElement("canvas") }}</li> + <li>{{ HTMLElement("caption") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("center") }}</s></li> + <li>{{ HTMLElement("cite") }}</li> + <li>{{ HTMLElement("code") }}</li> + <li>{{ HTMLElement("col") }}</li> + <li>{{ HTMLElement("colgroup") }}</li> +</ul> +<span id="D">D</span> + +<ul> + <li class="html5">{{ HTMLElement("data") }}</li> + <li class="html5">{{ HTMLElement("datalist") }}</li> + <li>{{ HTMLElement("dd") }}</li> + <li class="webcomp">{{ HTMLElement("decorator")}}</li> + <li>{{ HTMLElement("del") }}</li> + <li class="html5">{{ HTMLElement("details") }}</li> + <li>{{ HTMLElement("dfn") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("dir") }}</s></li> + <li>{{ HTMLElement("div") }}</li> + <li>{{ HTMLElement("dl") }}</li> + <li>{{ HTMLElement("dt") }}</li> +</ul> +<span id="E">E</span> + +<ul> + <li>{{HTMLElement("em") }}</li> + <li class="html5">{{ HTMLElement("embed") }}</li> +</ul> +<span id="F">F</span> + +<ul> + <li>{{ HTMLElement("fieldset") }}</li> + <li class="html5">{{ HTMLElement("figcaption") }}</li> + <li class="html5">{{ HTMLElement("figure") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("font") }}</s></li> + <li class="html5">{{ HTMLElement("footer") }}</li> + <li>{{ HTMLElement("form") }}</li> + <li><s class="obsoleteElement">{{ HTMLElement("frame") }}</s></li> + <li><s class="obsoleteElement">{{ HTMLElement("frameset") }}</s></li> +</ul> +<span id="G">G H</span> + +<ul> + <li>{{ HTMLElement("h1") }}</li> + <li>{{ HTMLElement("h2") }}</li> + <li>{{ HTMLElement("h3") }}</li> + <li>{{ HTMLElement("h4") }}</li> + <li>{{ HTMLElement("h5") }}</li> + <li>{{ HTMLElement("h6") }}</li> + <li>{{ HTMLElement("head") }}</li> + <li class="html5">{{ HTMLElement("header") }}</li> + <li class="html5"><s class="deprecatedElement obsoleteElement">{{ HTMLElement("hgroup") }}</s></li> + <li>{{ HTMLElement("hr") }}</li> + <li>{{ HTMLElement("html") }}</li> +</ul> +<span id="I">I</span> + +<ul> + <li>{{ HTMLElement("i") }}</li> + <li>{{ HTMLElement("iframe") }}</li> + <li>{{ HTMLElement("img") }}</li> + <li>{{ HTMLElement("input") }}</li> + <li>{{ HTMLElement("ins") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("isindex") }}</s></li> +</ul> +<span id="J">J K</span> + +<ul> + <li>{{ HTMLElement("kbd") }}</li> + <li class="html5">{{ HTMLElement("keygen") }}</li> +</ul> +<span id="L">L</span> + +<ul> + <li>{{ HTMLElement("label") }}</li> + <li>{{ HTMLElement("legend") }}</li> + <li>{{ HTMLElement("li") }}</li> + <li>{{ HTMLElement("link") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("listing") }}</s></li> +</ul> +<span id="M">M</span> + +<ul> + <li class="html5">{{HTMLElement("main")}}</li> + <li>{{ HTMLElement("map") }}</li> + <li class="html5">{{ HTMLElement("mark") }}</li> + <li><s class="nonStdElement">{{ HTMLElement("marquee") }}</s></li> + <li class="html5">{{ HTMLElement("menu") }}</li> + <li class="html5">{{ HTMLElement("menuitem") }}</li> + <li>{{ HTMLElement("meta") }}</li> + <li class="html5">{{ HTMLElement("meter") }}</li> +</ul> +<span id="N">N</span> + +<ul> + <li class="html5">{{ HTMLElement("nav") }}</li> + <li><s class="nonStdElement">{{ HTMLElement("nobr") }}</s></li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("noframes") }}</s></li> + <li>{{ HTMLElement("noscript") }}</li> +</ul> +<span id="O">O</span> + +<ul> + <li>{{ HTMLElement("object") }}</li> + <li>{{ HTMLElement("ol") }}</li> + <li>{{ HTMLElement("optgroup") }}</li> + <li>{{ HTMLElement("option") }}</li> + <li class="html5">{{ HTMLElement("output") }}</li> +</ul> +<span id="P">P</span> + +<ul> + <li>{{ HTMLElement("p") }}</li> + <li>{{ HTMLElement("param") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("plaintext") }}</s></li> + <li>{{ HTMLElement("pre") }}</li> + <li class="html5">{{ HTMLElement("progress") }}</li> +</ul> +<span id="Q">Q</span> + +<ul> + <li>{{ HTMLElement("q") }}</li> +</ul> +<span id="R">R</span> + +<ul> + <li class="html5">{{ HTMLElement("rp") }}</li> + <li class="html5">{{ HTMLElement("rt") }}</li> + <li class="html5">{{ HTMLElement("ruby") }}</li> +</ul> +<span id="S">S</span> + +<ul> + <li>{{ HTMLElement("s") }}</li> + <li>{{ HTMLElement("samp") }}</li> + <li>{{ HTMLElement("script") }}</li> + <li class="html5">{{ HTMLElement("section") }}</li> + <li>{{ HTMLElement("select") }}</li> + <li>{{ HTMLElement("small") }}</li> + <li class="html5">{{ HTMLElement("source") }}</li> + <li><s class="nonStdElement">{{ HTMLElement("spacer") }}</s></li> + <li>{{ HTMLElement("span") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("strike") }}</s></li> + <li>{{ HTMLElement("strong") }}</li> + <li>{{ HTMLElement("style") }}</li> + <li>{{ HTMLElement("sub") }}</li> + <li class="html5">{{ HTMLElement("summary") }}</li> + <li>{{ HTMLElement("sup") }}</li> +</ul> +<span id="T">T</span> + +<ul> + <li>{{ HTMLElement("table") }}</li> + <li>{{ HTMLElement("tbody") }}</li> + <li>{{ HTMLElement("td") }}</li> + <li class="webcomp">{{ HTMLElement("template")}}</li> + <li>{{ HTMLElement("textarea") }}</li> + <li>{{ HTMLElement("tfoot") }}</li> + <li>{{ HTMLElement("th") }}</li> + <li>{{ HTMLElement("thead") }}</li> + <li class="html5">{{ HTMLElement("time") }}</li> + <li>{{ HTMLElement("title") }}</li> + <li>{{ HTMLElement("tr") }}</li> + <li class="html5">{{ HTMLElement("track") }}</li> + <li><s class="obsoleteElement">{{ HTMLElement("tt") }}</s></li> +</ul> +<span id="U">U</span> + +<ul> + <li>{{ HTMLElement("u") }}</li> + <li>{{ HTMLElement("ul") }}</li> +</ul> +<span id="V">V</span> + +<ul> + <li>{{ HTMLElement("var") }}</li> + <li class="html5">{{ HTMLElement("video") }}</li> +</ul> +<span id="W">W</span> + +<ul> + <li class="html5">{{ HTMLElement("wbr") }}</li> +</ul> +<span id="X">X Y Z </span> + +<ul> + <li><span id="X"><s class="deprecatedElement obsoleteElement">{{ HTMLElement("xmp") }}</s></span></li> +</ul> +</div> + +<p> </p> diff --git a/files/ar/web/html/element/span/index.html b/files/ar/web/html/element/span/index.html new file mode 100644 index 0000000000..79a265b804 --- /dev/null +++ b/files/ar/web/html/element/span/index.html @@ -0,0 +1,122 @@ +--- +title: <span> +slug: HTML/Element/span +translation_of: Web/HTML/Element/span +--- +<p><font><font>و </font></font><strong><font><font>HTML </font></font><code><span></code><font><font>العنصر</font></font></strong><font><font> هو حاوية مضمنة عامة لمحتوى الصيغة، التي لا تمثل في حد ذاتها أي شيء. </font><font>يمكن استخدامه لتجميع العناصر لأغراض التصميم (باستخدام </font></font><code>class</code><font><font>أو </font></font><code>id</code><font><font>السمات) ، أو لأنها تتشارك في قيم السمات ، مثل </font></font><code>lang</code><font><font>. </font></font><font><font>يجب استخدامه فقط عندما يكون أي عنصر دلالي آخر مناسبًا. </font></font><code><span></code><font><font>تشبه إلى حد كبير على </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div" title="عنصر قسم محتويات HTML (<div>) هو الحاوية العامة لمحتوى التدفق. ليس له تأثير على المحتوى أو التخطيط حتى يتم تصميمه باستخدام CSS."><code><div></code></a><font><font>عنصر، ولكن </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div" title="عنصر قسم محتويات HTML (<div>) هو الحاوية العامة لمحتوى التدفق. ليس له تأثير على المحتوى أو التخطيط حتى يتم تصميمه باستخدام CSS."><code><div></code></a><font><font>هو </font></font><a href="https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements"><font><font>عنصر على مستوى الكتلة</font></font></a><font><font> في حين أن </font></font><code><span></code><font><font>هو </font></font><a href="https://developer.mozilla.org/en-US/docs/HTML/Inline_elements"><font><font>عنصر المضمنة</font></font></a><font><font> .</font></font></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"> + <table> + <tbody> + <tr> + <th scope="row"><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories"><font><font>فئات المحتوى</font></font></a></th> + </tr> + </tbody> + </table> + </th> + <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content"><font><font>محتوى التدفق</font></font></a><font><font> ، </font></font><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content"><font><font>محتوى الصياغة</font></font></a><font><font> .</font></font></td> + </tr> + <tr> + <th scope="row">المحتوى المسموح به</th> + <td> + <table> + <tbody> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content"><font><font>محتوى الصياغة</font></font></a></td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">إغفال العلامة</th> + <td>الآباء المسموح بهم</td> + </tr> + <tr> + <td><font><font>أي عنصر يقبل </font></font><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content"><font><font>محتوى الصياغة</font></font></a><font><font> ، أو أي عنصر يقبل </font></font><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content"><font><font>محتوى التدفق</font></font></a><font><font> .</font></font></td> + </tr> + <tr> + <th scope="row">يسمح أدوار ARIA</th> + <td>أي</td> + </tr> + <tr> + <th scope="row">واجهة DOM</th> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElement" title="تمثل واجهة HTMLSpanElement عنصر <span> وتستمد من واجهة HTMLElement ، ولكن دون تنفيذ أي خصائص أو طرق إضافية."><code>HTMLSpanElement</code></a><font><font>(قبل HTML 5 ، كانت الواجهة </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" title="تمثل واجهة HTMLElement أي عنصر HTML. تقوم بعض العناصر بتنفيذ هذه الواجهة مباشرة ، بينما يقوم بعضها الآخر بتنفيذها من خلال واجهة توارثها."><code>HTMLElement</code></a><font><font>)</font></font></td> + </tr> + </tbody> +</table> + +<h2 id="السمات"><font><font>السمات</font></font></h2> + +<p><font><font>هذا العنصر يشمل فقط </font></font><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes"><font><font>السمات العالمية</font></font></a><font><font> .</font></font></p> + +<h2 id="المثال_1"><font><font>المثال 1</font></font></h2> + +<pre class="brush:html;gutter:false"><p><span>Some text</span></p></pre> + +<h3 id="نتيجة"><font><font>نتيجة</font></font></h3> + +<p><font><font>بعض النصوص</font></font></p> + +<p> </p> + +<h2 id="المثال_2"><font><font>المثال 2</font></font></h2> + +<pre class="brush:html;gutter:false"><li><span> + <a href="portfolio.html" target="_blank">See my portfolio</a> +</span></li> +</pre> + +<h3 id="CSS">CSS:</h3> + +<div class="note"> +<p>li span {<br> + background: gold;<br> + }</p> +</div> + +<h2 id="مواصفات"><font><font>مواصفات</font></font></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">تخصيص</th> + <th scope="col">الحالة</th> + <th scope="col">تعليق</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-span-element', '<span>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-span-element', '<span>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>واجهة DOM هي الآن {{domxref("HTMLSpanElement")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#edef-SPAN', '<span>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="توافق_التصفح">توافق التصفح</h2> + + + +<p>{{Compat("html.elements.span")}}</p> + +<h2 id="انظر_أيضا"><font><font>انظر أيضا</font></font></h2> + +<ul> + <li>HTML {{HTMLElement("div")}} عنصر </li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/ar/web/html/element/tt/index.html b/files/ar/web/html/element/tt/index.html new file mode 100644 index 0000000000..30cfcc09f9 --- /dev/null +++ b/files/ar/web/html/element/tt/index.html @@ -0,0 +1,161 @@ +--- +title: '<tt>: The Teletype Text element (obsolete)' +slug: HTML/Element/tt +translation_of: Web/HTML/Element/tt +--- +<div>{{ obsolete_header() }}</div> + +<p><font><font>وعفا عليها الزمن </font></font><strong><font><font>HTML المبرقة الكاتبة عنصر نص</font></font></strong><font><font> ( </font></font><strong><code><tt></code></strong><font><font>) بإنشاء النص المضمن الذي يقدم باستخدام </font></font><a href="https://developer.mozilla.org/en-US/docs/Glossary/user_agent" title="وكيل المستخدم: وكيل المستخدم هو برنامج كمبيوتر يمثل الشخص ، على سبيل المثال ، متصفح في سياق الويب."><font><font>وكيل المستخدم</font></font></a><font><font> وجه الافتراضي أحادي المسافة الخط. </font></font><font><font>تم إنشاء هذا العنصر لغرض تقديم نص كما سيتم عرضه على شاشة عرض ثابت مثل نمط teletype أو نص فقط أو طابعة خط</font></font></p> + +<p><font><font>تُستخدم المصطلحات </font></font><strong><font><font>غير المتناسبة</font></font></strong><font><font> ، </font></font><strong><font><font>والنمط الأحادي</font></font></strong><font><font> ، </font></font><strong><font><font>والمونوسبيس</font></font></strong><font><font> بشكل تبادلي ولها نفس المعنى العام: فهي تصف حرفًا محرفًا تكون جميع أحرفه هي نفس عدد وحدات البكسل على نطاق واسع.</font></font></p> + +<p><font><font>هذا العنصر عفا عليه الزمن ، ومع ذلك. </font><font>يجب عليك استخدام أكثر مفيدة لغويا </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code" title="يعرض عنصر <code> HTML محتوياته بطريقة مصممة للإشارة إلى أن النص عبارة عن جزء قصير من رمز الكمبيوتر."><code><code></code></a><font><font>، </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd" title="يمثل عنصر إدخال لوحة مفاتيح HTML (<kbd>) امتدادًا للنص المضمن يشير إلى إدخال المستخدم النصي من لوحة المفاتيح أو الإدخال الصوتي أو أي جهاز إدخال نص آخر."><code><kbd></code></a><font><font>، </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var" title="يمثل عنصر HTML متغير (<var>) اسم متغير في تعبير رياضي أو سياق برمجة."><code><var></code></a><font><font>، أو</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/samp" title="يتم استخدام عنصر عينة HTML (<samp>) لإحاطة النص المضمن الذي يمثل عينة (أو اقتباس) من برنامج كمبيوتر."><code><samp></code></a><font><font>عناصر النص المضمن الذي يحتاج إلى أن تقدم في نوع أحادي المسافة، أو </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre" title="يمثل عنصر <pre> HTML النص المنسق مسبقًا والذي سيقدم بالضبط كما هو مكتوب في ملف HTML."><code><pre></code></a><font><font>شعارا لالمحتوى الذي ينبغي أن تقدم ككتلة منفصل.</font></font></p> + +<div class="note"><font><font>إذا لم يكن أي من العناصر الدلالية مناسبًا لحالة الاستخدام الخاصة بك (على سبيل المثال ، إذا كنت تحتاج ببساطة إلى عرض بعض المحتوى بخط غير تناسبي) ، فيجب أن تفكر في استخدام </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span" title="عنصر HTML <span> عبارة عن حاوية مضمنة عامة لمحتوى الصياغة ، والتي لا تمثل أي شيء بطبيعته. يمكن استخدامه لتجميع العناصر لأغراض التصميم (باستخدام صفات الصف أو الهوية) ، أو لأنها تتشارك في قيم السمات ، مثل lang."><code><span></code></a><font><font>العنصر ، وأن تصممه كما تريد باستخدام CSS. </font><font>و </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-family" title="تحدد الخاصية CSS لعائلة الخط قائمة ذات أولوية من اسم عائلة خط واحد أو أكثر و / أو أسماء عامة للعنصر المحدد."><code>font-family</code></a><font><font>الخاصية هي مكان جيد للبدء</font></font></div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories"><font><font>فئات المحتوى</font></font></a></th> + <td> + <table> + <tbody> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content"><font><font>محتوى التدفق</font></font></a><font><font> ، </font><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content"><font>ومحتوى </font></a></font><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content"><font><font>الصياغة</font></font></a><font><font> ، ومحتوى واضح</font></font></td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">المحتوى المسموح به</th> + <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content"><font><font>محتوى الصياغة</font></font></a><font><font> .</font></font></td> + </tr> + <tr> + <th scope="row">إغفال العلامة</th> + <td>لا شيء ، كل من علامة البداية والنهاية إلزامية.</td> + </tr> + <tr> + <th scope="row">الآباء المسموح بهم</th> + <td><font><font>ي عنصر يقبل </font></font><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content"><font><font>محتوى الصياغة</font></font></a></td> + </tr> + <tr> + <th scope="row">يسمح أدوار ARIA</th> + <td>أي</td> + </tr> + <tr> + <th scope="row"> + <table> + <tbody> + <tr> + <th scope="row"><font><font>واجهة DOM</font></font></th> + </tr> + </tbody> + </table> + </th> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" title="تمثل واجهة HTMLElement أي عنصر HTML. تقوم بعض العناصر بتنفيذ هذه الواجهة مباشرة ، بينما يقوم بعضها الآخر بتنفيذها من خلال واجهة توارثها."><code>HTMLElement</code></a></td> + </tr> + </tbody> +</table> + +<h2 id="السمات"><font><font>السمات</font></font></h2> + +<p><font><font>هذا العنصر يشمل فقط </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/global_attributes"><font><font>السمات العالمية</font></font></a></p> + +<h2 id="أمثلة"><font><font>أمثلة</font></font></h2> + +<h3 id="المثال_الأساسي"><font><font>المثال الأساسي</font></font></h3> + +<p><font><font>يستخدم هذا المثال </font></font><code><tt></code><font><font>لإظهار النص الذي تم إدخاله والإخراج بواسطة تطبيق طرفي.</font></font></p> + +<pre class="brush:html"><p>Enter the following at the telnet command prompt: <code>set localecho</code><br /> + +The telnet client should display: <tt>Local Echo is on</tt></p> +</pre> + +<h4 id="نتيجة"><font><font>نتيجة</font></font></h4> + +<p>{{EmbedLiveSample("Basic_example", 650, 80)}}</p> + +<h3 id="تجاوز_الخط_الافتراضي"><font><font>تجاوز الخط الافتراضي</font></font></h3> + +<p>يمكنك تجاوز الخط الافتراضي للمتصفح - إذا كان المتصفح يسمح لك بذلك ، وهو أمر غير مطلوب - باستخدام CSS:</p> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">tt { + font-family: "Lucida Console", "Menlo", "Monaco", "Courier", + monospace; +}</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>Enter the following at the telnet command prompt: <code>set localecho</code><br /> + +The telnet client should display: <tt>Local Echo is on</tt></p></pre> + +<h4 id="نتيجة_2"><font><font>نتيجة</font></font></h4> + +<p>{{EmbedLiveSample("Overriding_the_default_font", 650, 80)}}</p> + +<h2 id="ملاحظات_الاستخدام"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tt$edit#Usage_notes" rel="nofollow, noindex"><font><font>ملاحظات الاستخدام</font></font></a></h2> + +<p> </p> + +<p><font><font>يتم تقديم </font></font><code><tt></code><font><font>العنصر افتراضيًا باستخدام الخط الافتراضي غير المتناسب في المستعرض. </font><font>يمكنك إلغاء ذلك باستخدام CSS عن طريق إنشاء قاعدة باستخدام </font></font><code>tt</code><font><font>المحدد ، كما هو موضح في المثال </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tt#Overriding_the_default_font"><font><font>تجاوز الخط الافتراضي</font></font></a><font><font> أعلاه.</font></font></p> + +<p> </p> + +<div class="note"> +<p> </p> + +<p><font><font>التغييرات التي تمت تهيئتها بواسطة المستخدم على إعداد خط أحادي المسافة الافتراضي قد تكون لها الأسبقية على CSS الخاص بك.</font></font></p> + +<p> </p> +</div> + +<p><font><font>على الرغم من أن هذا العنصر لم يتم إهماله رسميًا في HTML 4.01 ، إلا أنه تم تثبيط استخدامه بسبب العناصر الدلالية و / أو CSS. </font><font>و </font></font><code><tt></code><font><font>العنصر عفا عليه الزمن في HTML 5.</font></font></p> + +<h2 id="مواصفات"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tt$edit#Specifications" rel="nofollow, noindex"><font><font>مواصفات</font></font></a></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'obsolete.html#tt', '<tt>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'obsolete.html#elementdef-tt', '<tt>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<tt>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="التوافق_المتصفح"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tt$edit#Browser_compatibility" rel="nofollow, noindex"><font><font>التوافق المتصفح</font></font></a></h2> + + + +<p>{{Compat("html.elements.tt")}}</p> + +<h2 id="See_also" name="See_also"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tt$edit#See_also" rel="nofollow, noindex"><font><font>انظر أيضا</font></font></a></h2> + +<ul> + <li>The semantic {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("kbd")}}, and {{HTMLElement("samp")}} elements</li> + <li>The {{HTMLElement("pre")}} element for displaying preformatted text blocks</li> +</ul> + +<div>{{ HTMLRef }}</div> diff --git a/files/ar/web/html_لغة_ترميز_النص_الفائق/index.html b/files/ar/web/html_لغة_ترميز_النص_الفائق/index.html deleted file mode 100644 index b228c2f893..0000000000 --- a/files/ar/web/html_لغة_ترميز_النص_الفائق/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: HTML (لغة ترميز النص الفائق) -slug: Web/HTML_لغة_ترميز_النص_الفائق -translation_of: Web/HTML ---- -<div>{{HTMLSidebar}}</div> - -<p class="summary" dir="rtl"><span class="seoSummary">HTML (</span> لغة ترميز النصوص التشعبية <span class="seoSummary">) هي اللبنة الأساسية للويب. فهي تقوم بوصف و تعريف <em>محتوى</em> صفحة الويب. التقنيات الأخرى إلى جانب HTML تعمل عادةً على وصف مظهر صفحة الويب (<a href="https://developer.mozilla.org/ar/docs/Web/CSS">CSS</a>) أو تفاعلها مع المستخدم (<a href="https://developer.mozilla.org/ar/docs/Web/JavaScript">الجافاسكربت</a>). </span></p> - -<p dir="rtl">مصطلح "نص تشعبي" يشير إلى الروابط التي تربط صفحات الويب ببعضها, إما بموقع واحد أو بين مواقع متعددة. فالروابط هي جانب أساسي من الويب. عبر رفعك لمحتوى على الأنترنت و ربطه بصفحات أخرى أنشأها أشخاص آخرون, فأنت تصبح مشارك نشيط في شبكة الأنترنت.</p> - -<p dir="rtl">تستخدم HTML "الوسوم" لوصف النصوص, الصور, وغيرها من المحتويات لعرضعها على متصفح الويب. وسوم HTML تتضمن "عناصر" خاصة مثل {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, وغيرها الكثير.</p> - -<p dir="rtl">المقالات أدناه ستساعدك على تعلم المزيد حول HTML.</p> - -<section class="cleared" id="sect1"> -<ul class="card-grid"> - <li dir="rtl"><span>مقدمة عن HTML</span>إذا كنت جديداً على تطوير الويب, فاحرص على قراءة مقالتنا حول <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">أساسيات HTML</a> لتعرف ماهي HTML وكيف يمكنك استخدامها.</li> - <li dir="rtl"><span>دورات عن HTML</span>للحصول على مقالات عن كيفية استخدام HTML, و كذلك على دورات و أمثلة شاملة, تفقد منطقة <a href="/en-US/docs/Learn/HTML">تعلم HTML</a> خاصتنا.</li> - <li dir="rtl"><span>مرجع HTML</span> - <p>في قسم <a href="/en-US/docs/Web/HTML/Reference">مرجع HTML</a> الشامل خاصتنا, ستجد تفاصيل حول كل عنصر و صِفة في HTML . </p> - </li> -</ul> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Tools" dir="rtl" id="Tools" name="Tools">دورات للمبتدئين</h2> - -<p dir="rtl"><a href="/en-US/docs/Learn/HTML">منطقة تعلم HTML</a> خاصتنا تتميز بوحدات متعددة و التي تقوم بتعليم HTML من الألف إلى الياء — لا تتطلب معرفة مسبقة.</p> - -<dl> - <dt dir="rtl"><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">مقدمة عن HTML</a></dt> - <dd dir="rtl">هذا الوحدة تقوم بتحديد المستوى, تأخذك لتعلم المفاهيم المهمة و تركيب اللغة, كيف يمكنك إنشاء وصلات أنترنت, و كيف يمكنك استخدام HTML لبناء صفحة ويب.</dd> - <dt dir="rtl"><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">الوسائط المتعددة و التضمين</a></dt> - <dd dir="rtl">هذه الوحدة تشرح كيف يمكنك استخدام أتش تي أم إل لتضمين وسائط متعددة في صفحات الويب خاصتك, وتتضمن المقالة طرق مختلفة يمكنك استخدامها لإضافة صورة, و كيف يمكنك تضمين فيديو, صوت, و حتى صفحات ويب أخرى كاملة.</dd> - <dt dir="rtl"><a href="/en-US/docs/Learn/HTML/Tables">جداول HTML</a></dt> - <dd dir="rtl">يمثل عرض البيانات المجدولة على صفحة الويب بطريق مفهومة و سهلة الوصول تحدياً. هذه الوحدة تغطي وسوم الجدول الأساسية, إلى جانب ميزات أكثر تعقيداً مثل إضافة تسميات توضيحية و ملخصات.</dd> - <dt dir="rtl"><a href="/en-US/docs/Learn/HTML/Forms">استمارات HTML</a></dt> - <dd dir="rtl">الاستمارات هي جزئ مهم جداً من الويب — فهذا يوفر الكثير من الوظائف التي ستحتاجها للتفاعل مع الموقع, مثل التسجيل و تسجيل التدخول, ارسال دعم, شراء منتجات, و المزيد. هذه الوحدة ستأخذك لتبدأ بإنشاء استمارة من ناحية جهة الخادم.</dd> - <dt dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">استخدام HTML لحل مشاكل شائعة</a></dt> - <dd dir="rtl">توفر هذه المقالة روابط لأقسام تحتوي على شرح لكيفية استخدام HTML لحل مشاكل شائعة جداً عندما تقوم بإنشاء صفحة ويب مثل: التعامل مع العناوين, إضافة صورة أو فيديو, تأكيد المحتوى, إنشاء استمارة بسيطة و المزيد.</dd> -</dl> - -<h2 dir="rtl" id="مواضيع_متقدمة">مواضيع متقدمة</h2> - -<dl> - <dt class="landingPageList" dir="rtl"><a href="/en-US/docs/Web/HTML/Focus_management_in_HTML">ادارة التركيز في HTML</a></dt> - <dd class="landingPageList" dir="rtl">الصفة <code><a href="/en-US/docs/Web/API/Document/activeElement">activeElement</a></code><a href="/en-US/docs/Web/API/Document/activeElement"> </a>و الدالة <code><a href="/en-US/docs/Web/API/Document/hasFocus">hasFocus()</a></code> التي تساعدك على تتبع و التحكم بتفاعلات المستخدم مع عناصر صفحة الويب. </dd> - <dt class="landingPageList" dir="rtl"><a href="/en-US/docs/Web/HTML/Using_the_application_cache">استخدام ذاكرة التخزين المؤقت للتطبيق</a></dt> - <dd class="landingPageList" dir="rtl">ذاكرة التخزين المؤقت تسمح للتطبيقات المبنية على الويب بالعمل في وضع عدم الإتصال. يمكنك استخدام واجهة <strong>ذاكرة التخزين المؤقت للتطبيق</strong> (<em>AppCache</em>) لتحديد الموارد التي يجب على المتصفح تخزينها و إتاحتها للمستخدمين في وضع عدم الإتصال. التطبيقات التي يتم تحميلها مؤقتاً تعمل بشكل صحيح حتى و لو قام المستخدمون بالضغط على زر التحديث عندما يكونون في وضع عدم الإتصال. </dd> -</dl> -</div> - -<div class="section"> -<h2 class="Documentation" dir="rtl" id="مراجع">مراجع</h2> - -<dl> - <dt class="landingPageList" dir="rtl"><a href="/en-US/docs/Web/HTML/Reference">مرجع HTML</a></dt> - <dd class="landingPageList" dir="rtl">تتألف HTML من <strong>عناصر</strong>, كل منها يمكن تعديلها بواسطة عدد من <strong>الصفات</strong>. وثائق HTML متلصة ببعضها البعض بواسطة <a href="/en-US/docs/Web/HTML/Link_types">روابط</a>.</dd> - <dt class="landingPageList" dir="rtl"><a href="/en-US/docs/Web/HTML/Element">مرجع عناصر HTML</a></dt> - <dd class="landingPageList" dir="rtl">تصفح قائمة لجميع <a class="glossaryLink" href="/en-US/docs/Glossary/HTML">عناصر HTML</a>.</dd> - <dt class="landingPageList" dir="rtl"><a href="/en-US/docs/Web/HTML/Attributes">مرجع صفات HTML</a></dt> - <dd class="landingPageList" dir="rtl">العناصر في HTML تمتلك صفات. تعد هذه الصفات قيم إضافية تقوم بتعديل العناصر أو تخصيص وظيفتها بطرق مختلفة.</dd> - <dt class="landingPageList" dir="rtl"><a href="/en-US/docs/Web/HTML/Global_attributes">الصفات الشاملة</a></dt> - <dd class="landingPageList" dir="rtl">الصفات الشاملة قد يمكن استخدامها على جميع <a href="/en-US/docs/Web/HTML/Element">عناصر HTML</a>, <em>حتى العناصر الغير معيارية</em>. هذا يعني أنَّ أي عنصر غير معياري لا يزال يجب أن يسمح باستخدام هذه الصفات, على الرغم أنَّ هذه العناصر تجعل مستند HTML5 غير متوافق.</dd> - <dt class="landingPageList" dir="rtl"><a href="/en-US/docs/Web/HTML/Inline_elements">العناصر المضمنة</a> و <a href="/en-US/docs/Web/HTML/Block-level_elements">العناصر المستحوذة</a></dt> - <dd class="landingPageList" dir="rtl">العناصر في <strong>HTML</strong> عادةً إما "مضمنة" أو "مستحوذة". العنصر المضمن يأحذ المساحة المحصورة بواسطة الوسوم التي تحدده. أما العنصر المستحوذ فأنه يأخذ كامل مساحة العنصر الأب (الحاوي), وبالتالي فإنه ينشئ "كتلة".</dd> - <dt class="landingPageList" dir="rtl"><a href="/en-US/docs/Web/HTML/Link_types">أنواع الرابط</a></dt> - <dd class="landingPageList" dir="rtl">في HTML, أنواع روابط متنوعة يمكن استخدامها لإنشاء أو تعريف صلة بين وثيقتين. تتضمن عناصر الرابط التي يمكن استخدامها على <a href="/en-US/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/en-US/docs/Web/HTML/Element/area"><code><area></code></a>, و <a href="/en-US/docs/Web/HTML/Element/link"><code><link></code></a>.</dd> - <dt class="landingPageList" dir="rtl"><a href="/en-US/docs/Web/HTML/Supported_media_formats">صيغ الوسائط المدعومة في HTML و عناصر الصوت و الفيديو</a></dt> - <dd class="landingPageList" dir="rtl">عنصر <a href="/en-US/docs/Web/HTML/Element/audio"><code><audio></code></a> و <a href="/en-US/docs/Web/HTML/Element/video"><code><video></code></a> يسمح لك بتشغيل وسائط الصوت و الفيديو. هذه العناصر توفر بدائل مشابهة للمتصفح كالتي موجودة في أدوبي فلاش و الإضافات الأخرى.</dd> - <dt class="landingPageList" dir="rtl"><a href="/en-US/docs/Web/HTML/Kinds_of_HTML_content">أنواع محتوى HTML</a></dt> - <dd class="landingPageList" dir="rtl">تتألف HTML من عدة أنواع من المحتوى, كل نوع يسمح لك باستخدام عدة سياقات و يمنعك استخدامها في أخرى. وبالمثل كل نوع يملك مجموعة من الفئات يمكن أن تحتوي على عناصر يمكن أو لا يمكن استخدامها. هذا دليل لهذه الفئات.</dd> - <dt class="landingPageList" dir="rtl"><a href="/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">وضع المراوغة و الوضع المعياري</a></dt> - <dd class="landingPageList" dir="rtl">معلومات تاريخية عن وضع المراوغة و الوضع المعياري.</dd> -</dl> - -<h2 class="landingPageList" dir="rtl" id="مواضيع_متعلقة">مواضيع متعلقة</h2> - -<dl> - <dt dir="rtl"><a href="/en-US/docs/Web/HTML/Applying_color">إضافة لون إلى عناصر HTML باستخدام السي أس أس</a></dt> - <dd dir="rtl">هذه المقالة تغطي معظم الطرق التي يمكن ان تستخدمها لإضافة لون لمحتوى HTML, و تسرد ما الأجزاء من وثيقة HTML التي يمكن تلوينها و ما خصائص السي أس أس التي يمكنك استخدامها لفعل ذلك. تتضمن أمثلة, روابط لأدوات تصميم أنماط (اختيار ألوان, اختيار تدرج لوني ..), و المزيد.</dd> -</dl> -</div> -</div> - -<p dir="rtl"><span class="alllinks"><a href="/en-US/docs/tag/HTML">رؤية المزيد..</a></span></p> -</section> diff --git a/files/ar/web/javascript/guide/الدوال/index.html b/files/ar/web/javascript/guide/functions/index.html index af934b397d..af934b397d 100644 --- a/files/ar/web/javascript/guide/الدوال/index.html +++ b/files/ar/web/javascript/guide/functions/index.html diff --git a/files/ar/web/javascript/introduction_to_object-oriented_javascript/index.html b/files/ar/web/javascript/introduction_to_object-oriented_javascript/index.html deleted file mode 100644 index 65ce0c788a..0000000000 --- a/files/ar/web/javascript/introduction_to_object-oriented_javascript/index.html +++ /dev/null @@ -1,424 +0,0 @@ ---- -title: مدخل إلى جافاسكريبت كائنية التوجه -slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript -tags: - - الأفراد - - البرمجة الكائنية - - التغليف - - الجافاسكريبت - - المتوسط - - المجال - - المشيد - - ب.ك.ت - - كائن -translation_of: Learn/JavaScript/Objects -translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript ---- -<div>{{jsSidebar("Introductory")}}</div> - -<p>كائنية التوجه حتى النخاع، ميزات جافا سكريبت القوية، القدرات المرنة {{Glossary("OOP")}}. يبدأ هذا المقال بمقدمة إلى البرمجة الكائنية التوجه، ثم مراجعات لنموذج كائن جافا سكريبت، و أخيراً يوضح مفاهيم البرمجة الكائنية التوجه في جافا سكريبت. لا يصف هذا المقال البناء اللغوي الجديد <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">للبرمجة الكائنية التوجه في ECMAScript 6</a>.</p> - -<div style="font-size: 15; font-family: 'tahoma';"> -<h2 id="مراجعة_جافا_سكريبت">مراجعة جافا سكريبت</h2> - -<p>إذا كنت لا تشعر بالثقة حول مفاهيم جافا سكريبت مثل المتغيرات والأنواع والوظائف و المجال ، يمكنك ان تقرأ عن هذه المواضيع في <a href="/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript">مدخل إلى جافا سكريبت</a>. يمكنك أيضا الاطلاع علي <a href="/en-US/docs/Web/JavaScript/Guide">دليل جافا سكريبت</a>.</p> - -<h2 id="البرمجة_الكائنية_التوجه_(Object-oriented_programming)">البرمجة الكائنية التوجه (Object-oriented programming)</h2> - -<p>إن البرمجة الكائنية (OOP) ما هي إلا نمط برمجي يَستخدم التجريد في إنشاء نماذج/نسخ لتجسيد العالم الحقيقي، وتَستخدم البرمجة الكائنية في ذلك أساليب مُتعدّدة من هذا النمط، فهي تستخدم الوحدات module، وتعدديّة الأشكال polymorphism والتغليف encapsulation، وتجدر الإشارة إلى أن معظم لغات البرمجة تدعم مفهوم OOP أمثال اللغات البرمجية: جافا، بايثون، روبي، وطبعًا جافا سكريبت.</p> - -<p>يُعالج أو لنقل يَتصور مفهوم البرمجة الكائنية OOP البرنامج كتشكيلة من الأشياء/الكائنات المتعاونة/المترابطة بدلًا من يتصوّره كتشكيلة من الدوال (functions) أو كسرد من الأوامر. ففي مفهوم OOP، كل كائن/شيء له القدرة على استقبال الرسائل، ومعالجة البيانات، وإرسال الرسائل إلى باقي الكائنات، ويُمكن اعتبار أنه لكل كائن object كينونة خاصة به ودور/وظيفة مستقلة عن الكائن الآخر.</p> - -<p>تُعزز البرمجة الكائنية القدرة على صيانة الشيفرة البرمجية والمرونة في التطوير، وأثبتت جدارتها على نطاق واسع في هندسة البرمجيات الكبيرة، ولأن البرمجة الكائنية تُشدد على استخدام الوحدات module، فإن الشيفرة/الكود المكتوب بمفهوم البرمجة الكائنية هو أبسط في التطوير وأسهل في الفهم مستقبلًا (عند التنقيح والتعديل)، وكما يعزز مفهوم البرمجة الكائنية التحليل المباشر للشيفرة، وفهم الحالات الشائكة فهمًا أفضل من باقي الأساليب البرمجية الأخرى.</p> - -<h2 id="مصطلحات_البرمجة_الكائنية">مصطلحات البرمجة الكائنية</h2> - -<dl> - <dt dir="ltr"> - <h3 dir="rtl" id="المجال_في_البرمجة_الكائنية_Namespace">المجال في البرمجة الكائنية Namespace</h3> - - <p dir="rtl">ما هو إلا عبارة عن حاوي تسمح للمطوّر بتحزيم جميع الوظائف تحت اسم محدد وفريد.</p> - - <h3 dir="rtl" id="الصنف_أو_الفئة_Class_في_البرمجة_الكائنية">الصنف أو الفئة Class في البرمجة الكائنية</h3> - - <p dir="rtl">يعتني الصنف بكل ما يتعلّق بميزات وخصائص الكائن، والصنف ما هو إلا قالب template تعريفي بخاصيات properties وبطُرق/وظائف methods الكائن object.</p> - - <h3 dir="rtl" id="الكائن_Object_في_البرمجة_الكائنية">الكائن Object في البرمجة الكائنية</h3> - - <p dir="rtl">الكائن ما هو إلا حالة/أمثولة instance من صنف class.</p> - - <h3 dir="rtl" id="الخاصية_property_في_البرمجة_الكائنية">الخاصية property في البرمجة الكائنية</h3> - - <p dir="rtl">ما هي إلا مميزات وخصائص الكائن، كاللون مثلًا.</p> - - <h3 dir="rtl" id="الطريقة_أو_الوظيفة_Method_في_البرمجة_الكائنية">الطريقة أو الوظيفة Method في البرمجة الكائنية</h3> - - <p dir="rtl">تعتني الطريقة أو الوظيفة كما يُسميها البعض بقدرات الكائن، مثل قدرة المشي مثلًا، وهي دور أو وظيفة مرتبطة مع صنف class.</p> - - <h3 dir="rtl" id="المشيد_Constructor_في_البرمجة_الكائنية">المشيد Constructor في البرمجة الكائنية</h3> - - <p dir="rtl">ما هو إلا طريقة method تُستدعى في لحظة استهلال instantiate الكائن، وعادةً ما يكون له نفس اسم الصنف الذي يحتويه.</p> - - <h3 dir="rtl" id="الوراثة_Inheritance_في_البرمجة_الكائنية">الوراثة Inheritance في البرمجة الكائنية</h3> - - <p dir="rtl">يُمكن للصنف أن يرث مميزات من صنف آخر.</p> - - <h3 dir="rtl" id="التغليف_Encapsulation_في_البرمجة_الكائنية">التغليف Encapsulation في البرمجة الكائنية</h3> - - <p dir="rtl">طريقة في تحزيم البيانات data والطُرق methods التي تستخدم البيانات.</p> - - <h3 dir="rtl" id="التجريد_Abstraction_في_البرمجة_الكائنية">التجريد Abstraction في البرمجة الكائنية</h3> - - <p dir="rtl">يجب على الاقتران الحاصل من: الوراثة والطُرق methods والخاصيات properties لكائن معقد وشائك التمثيل برمجيًا أن يعكس الواقع المراد محاكاته في البرمجة الكائنية.</p> - - <h3 dir="rtl" id="تعددية_الأشكال_Polymorphism_في_البرمجة_الكائنية">تعددية الأشكال Polymorphism في البرمجة الكائنية</h3> - - <p dir="rtl">تحمل كلمة Poly بحد ذاتها المعنى "متعدد" وتحمل الكلمة morphism المعنى "أشكال، ويُشير المفهوم ككل إلى أن أكثر من صنف قد يُعرّف نفس الطريقة method أو الخاصية property.</p> - </dt> -</dl> - -<p>للحصول على وصف أكثر شمولية للبرمجة الكائنية التوجه، أنظر {{interwiki("wikipedia", "البرمجة كائنية التوجه")}} على ويكيبيديا.</p> - -<h2 id="البرمجة_المعتمدة_على_النموذج_الأولي_Prototype">البرمجة المعتمدة على النموذج الأولي Prototype</h2> - -<p>البرمجة المعتمدة على النموذج الأوّلي (Prototype-based programming) ما هي إلا نموذج من البرمجة الكائنية OOP ولكنها لا تستخدم الأصناف classes، بل تقوم أولًا بإعداد سلوك أي صنف class ما ومن ثم تُعيد استخدامه، ويُطلق البعض على هذا النموذج: البرمجة بلا أصناف classless، أو البرمجة المَبْدَئِية المنحى prototype-oriented، أو البرمجة المعتمدة على الأمثولة instance-based).</p> - -<p>يعود أصل اللغة المعتمدة على النموذج الأولي إلى لغة <a href="http://en.wikipedia.org/wiki/Self%20(programming%20language" rel="external nofollow noopener noreferrer">Self</a>، والتي طوّرها David Ungar وRandall Smith، ولكن أسلوب البرمجة بدون أصناف class-less توسّع ونال شهرة كبيرة في العقد الأخير، واُعتمد من قبل العديد من اللغات البرمجية أشهرهم جافا سكريبت.</p> - -<p dir="ltr"> </p> - -<h2 id="البرمجة_الكائنية_باستخدام_جافا_سكريبت">البرمجة الكائنية باستخدام جافا سكريبت</h2> - -<h3 id="المجال_Namespace_في_جافا_سكريبت">المجال Namespace في جافا سكريبت</h3> - -<p>المجال هو أشبه بمستوعب/بحاوية (container) تسمح للمطوّر في تحزيم وظائف تحت اسم فريد، أو اسم تطبيق محدد، ففي جافا سكريبت المجال هو مجرد كائن object كأي كائن آخر يحتوي على طُرق methods، وخاصيات properties، وحتى كائنات objects.</p> - -<div class="note"> -<p><strong>ملاحظة هامة</strong>: من المهم جدًا الانتباه إلى أنه في جافا سكريبت، لا يوجد فرق بين الكائنات العادية والمجالات namespaces، وهذا يختلف عن اللغات الكائنية الأخرى، الأمر الذي قد يُربك المبرمجين المبتدئين في جافا سكريبت.</p> -</div> - -<p>إن إنشاء مجال namespace في جافا سكريبت بسيطٌ للغاية، فمن خلال إنشاء كائن عام/مشترك/شامل global، ستصبح جميع المُتغيّرات variables والطرق methods، والدوال functions خاصياتٍ لهذا الكائن، ويٌقلل استخدام المجالات namespaces أيضًا من احتمالية تضارب الأسماء في التطبيق، منذ أن كل كائن من كائنات التطبيق ما هي إلى خاصيات كائن شامل/عام معرّفة على مستوى التطبيق.</p> - -<p>سيُنشئ في الخطوة التالية كائنًا عامًا global وبالاسم <code>MYAPP</code>:</p> - -<pre class="brush: js" dir="rtl">// مجال عالمي -var MYAPP = MYAPP || {};</pre> - -<p>يُظهر المثال السابق، كيف تم التأكّد أولًا فيما إذا كان <code>MYAPP</code> معرفًا (سواء في نفس الملف أو في آخر)، ففي حال الإيجاب سيُستخدم الكائن العام <code>MYAPP</code>، وفي حال عدم تعريفه مُسبقًا سيُنشئ كائنًا خالٍ وبالاسم<code>MYAPP</code> والذي سيغلّف encapsulate الطرق methods والدوال functions والمتغيرات variables والكائنات objects.</p> - -<p>كما يُمكن أيضًا إنشاء مجال فرعي sub-namespaces:</p> - -<pre class="brush: js" dir="rtl">// مجال فرعي -MYAPP.event = {};</pre> - -<p>يوضّح المثال التالي الصيغة المستخدمة في إنشاء مجال namespace وإضافة متغيرات ودوال:</p> - -<pre class="brush: js" dir="rtl">// إنشاء حاوي يدعى MYAPP.commonMethod للوظائف و الخصائص الشائعة -MYAPP.commonMethod = { - regExForName: "", // تعريف تعبير نظامي للتحقق من الإسم - regExForPhone: "", // تعريف تعبير نظامي للهاتف، لا يوجد تحقق من الصحة - validateName: function(name){ - // إفعل شيئا ما بالإسم، يمكنك الوصول إلى المتغير regExForName - // بإستعمال "this.regExForName" - }, - - validatePhoneNo: function(phoneNo){ - // إفعل شيئا ما برقم الهاتف - } -} - -// تعريفات الكائن مع الزظيفة في نفس الوقت -MYAPP.event = { - addListener: function(el, type, fn) { - // بعض الأكواد - }, - removeListener: function(el, type, fn) { - // بعض الأكواد - }, - getEvent: function(e) { - // بعض اﻷكواد - } - - // يمكن إضافة وظائف و خصائص أخرى -} - -// البناء اللغوي لإستعمال وظيفة addListener: -MYAPP.event.addListener("yourel", "type", callback);</pre> - -<h3 id="sect1"> </h3> - -<h3 id="الكائنات_الأساسيةالقياسية_المبنية_داخل_لغة_جافا_سكريبت_(Standard_built-in_objects)">الكائنات الأساسية/القياسية المبنية داخل لغة جافا سكريبت (Standard built-in objects)</h3> - -<p>تتضمن لغة جافا سكريبت العديد من الكائنات في تركيبتها، على سبيل المثال، يوجد كائنات مثل <code>Math</code>،<code>Object</code>، <code>Array</code>، <code>String</code>، ويُظهر المثال التالي كيفيّة استخدام الكائن <code>Math</code> للحصول على رقم عشوائي باستخدام أحد طُرق method هذا الكائن وهي الطريقة ()<code>random</code>.</p> - -<pre class="brush: js" dir="rtl">console.log(Math.random()); -</pre> - -<div class="note"> -<p><strong>ملاحظة</strong>: يَفترض المثال السابق وجميع الأمثلة التالية في المقال وجود دالة function بالاسم()<code>console.log</code> معرّفة تعريفًا عامًا (globally)، مع العلم أن هذه الدالة ليست جزء من اللغة نفسها، ولكنها دالة متوفّرة في العديد من متصفحات الإنترنت لأغراض تشخيص الشيفرة البرمجية debugging.</p> -</div> - -<p>يُمكن العودة إلى <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects" rel="external nofollow noopener noreferrer">مرجع لغة جافا سكريبت: الكائنات الأصلية المعيارية</a> للحصول على قائمة بالكائنات المبينة داخل لغة جافا سكريبت نفسها.</p> - -<p>كل كائن في جافا سكريبت هو حالة/أمثولة instance من الكائن <code>Object</code> ويَرث كافة خاصياته properties وطُرقه methods.</p> - -<h3 id="sect2"> </h3> - -<h3 id="الكائنات_الخاصة_الصنف_(الفئة)">الكائنات الخاصة<br> - <span style='font-family: "Open Sans Light",Helvetica,Arial,sans-serif; font-size: 1.286rem; letter-spacing: -0.014em;'>الصنف (الفئة</span><span style='font-family: "Open Sans Light",Helvetica,Arial,sans-serif; font-size: 1.286rem; letter-spacing: -0.014em;'>)</span></h3> - -<h4 id="لغة_جافا_سكريبت_لغة_من_النوع_prototype-based_ولا_تحتوي_على_العبارة_class_كما_هو_حال_باقي_لغات_البرمجة_الكائنية،_كما_في_روبي_أو_بايثون،_ويُربك_هذا_الأمر_المبرمجين_المعتادين_على_اللغات_التي_تعتمد_على_هذه_العبارة_أو_المفهوم،_وتستخدم_جافا_سكريبت_بدلًا_من_ذلك_الدوال_functions_لمحاكات_مفهوم_الأصناف_classes،_وتعريف_صنف_هو_بسهولة_تعريف_أي_دالّة">لغة جافا سكريبت لغة من النوع prototype-based ولا تحتوي على العبارة <code>class</code> كما هو حال باقي لغات البرمجة الكائنية، كما في روبي أو بايثون، ويُربك هذا الأمر المبرمجين المعتادين على اللغات التي تعتمد على هذه العبارة أو المفهوم، وتستخدم جافا سكريبت بدلًا من ذلك الدوال functions لمحاكات مفهوم الأصناف classes، وتعريف صنف هو بسهولة تعريف أي دالّة:</h4> - -<pre class="brush: js" dir="rtl">var Person = function () {}; -</pre> - -<h4 id="الكائن_(أمثولة_الصنف_class_instance)">الكائن (أمثولة الصنف class instance)</h4> - -<p>يتطلب إنشاء حالة/أمثولة instance جديدة من كائن <code>obj</code> استخدام العبارة <code>new obj</code>، وتعيين النتيجة إلى متغيّر بغرض الوصول إلى فيما بعد.</p> - -<p>عُرّف في الشيفرة السابقة صنف class بالاسم <code>Person</code>، وفي الشيفرة التالية، سيُنشئ حالتين/أمثولتين instances من هذا الصنف، الأولى بالاسم <code>person1</code> والثانية بالاسم <code>person2</code>.</p> - -<pre class="brush: js" dir="rtl">var person1 = new Person(); -var person2 = new Person(); -</pre> - -<div class="note">فضلا أنظر {{jsxref("Object.create()")}} للحصول على وظيفة الإنشاء الجديدة الإضافية التي تنشأ حالة غير مهيأة</div> - -<h4 id="المشيد_The_constructor">المشيد The constructor</h4> - -<p>يُستدعى المُشيّد constructor في لحظة الاستهلال instantiation (اللحظة التي يُنشئ فيها الكائن)، والمُشيّد ما هو إلا طريقة method من طُرق الصنف class، وفي جافا سكريبت تعمل الدالة على تشييد الكائن، ولذلك لا داعي إلى تعريف طريقة method من أجل عميلة التشييد، وكل إجراء مصرّح في الصنف class يُنفّذ في لحظة الاستهلال instantiation.</p> - -<p>يُستخدم المُشيّد في تعيين خاصيات properties الكائن، أو في استدعاء طُرق methods معينة لتحضير الكائن للاستخدام، وأما إضافة طُرق صنف وتعريفها يحدث باستخدام صيغة syntax مختلفة سنتطرّق إليها فيما بعد خلال المقال.</p> - -<p>تُظهر الشيفرة التالية كيف يُسجّل log (يُرسل رسالة نصية إلى طرفية المتصفح console) مُشيّد الصنف<code>Person</code> رسالة نصية حينما يُستهل instantiated.</p> - -<pre class="brush: js" dir="rtl">var Person = function () { - console.log('تم إنشاء حالة'); -}; - -var person1 = new Person(); -var person2 = new Person(); - -</pre> - -<h4 id="الخاصية_The_property_(خاصية_الكائن_object_attribute)">الخاصية The property (خاصية الكائن object attribute)</h4> - -<p>الخاصيات properties ما هي إلا متغيرات محتوات في الصنف class، وكل حالة/أمثولة من الكائن تمتلك هذه الخاصيات، وتُعيّن الخاصيات في دالة مُشيّد الصنف بحيثُ تُنشئ مع كل حالة/أمثولة instance.</p> - -<p>إن الكلمة المفتاحية <code>this</code>، والتي تُشير إلى الكائن الحالي، تسمح للمطوّر بالعمل مع الخاصيات من ضمن الصنف، والوصول (قراءةً وكتابةً) إلى الخاصية property من خارج الصنف يكون من خلال الصيغة<code>InstanceName.Property</code> كما هو الأمر في لغة C++ (سي بلس بلس) وJava والعديد من اللغات الأخرى، ومن داخل الصنف تُستخدم الصيغة <code>this.Property</code> للحصول على قيمة الخاصية أو لتعيين قيمتها.</p> - -<p>في الشيفرة التالية، عُرّفت الخاصية <code>firstName</code> للصنف <code>Person</code> وفي لحظة الاستهلال instantiation:</p> - -<pre class="brush: js" dir="rtl">var Person = function (firstName) { - this.firstName = firstName; - console.log('تم إنشاء حالة من Person'); -}; - -var person1 = new Person('سفيان'); -var person2 = new Person('محمد'); - -// Show the firstName properties of the objects -console.log('الشخص1 هو ' + person1.firstName); // النتيجة ==> "الشخص1 هو سفيان" -console.log('الشخص2 هو ' + person2.firstName); // النتيجة ==> "الشخص2 هو محمد" -</pre> - -<h4 id="الطرق_The_methods">الطرق The methods</h4> - -<p>الطرق methods ما هي إلا دوال (وتُعرّف كما تعرّف الدوال functions)، فيما عدا ذلك فهي تُشبه الخاصيات properties، واستدعاء طريقة method مشابه إلى الوصول إلى خاصيّة ما، ولكن مع إضافة <code>()</code> في نهاية اسم الطريقة، وربما مع مُعطيات arguments، ولتعريف طريقة، تُعيّن دالة إلى خاصيّة مُسمّات من خاصيّة الصنف <code>prototype</code>، ويُمكن فيما بعد استدعاء الطريقة على الكائن بنفس الاسم الذي عُيّن للدالة.</p> - -<p>في الشيفرة التالية، عُرّفت ومن ثم اُستخدِمت الطريقة ()<code>sayHello</code> للصنف <code>Person</code>.</p> - -<pre class="brush: js" dir="rtl">var Person = function (firstName) { - this.firstName = firstName; -}; - -Person.prototype.sayHello = function() { - console.log("مرحبا، أنا " + this.firstName); -}; - -var person1 = new Person("سفيان"); -var person2 = new Person("محمد"); - -// إستدعاء طريقة Person sayHello. -person1.sayHello(); // النتيجة ==>"مرحبا، أنا سفيان" -person2.sayHello(); // النتيجة ==> "مرحبا، أنا محمد" -</pre> - -<p>إن الطُرق methods في جافا سكريبت ما هي إلا دالة كائن عادية مرتبطة مع كائن كخاصية property، وهذا يعني أنه يُمكن استدعاء الطُرق خارج السياق، كما في المثال التالي:</p> - -<pre class="brush: js" dir="rtl">var Person = function (firstName) { - this.firstName = firstName; -}; - -Person.prototype.sayHello = function() { - console.log("مرحبا، أنا " + this.firstName); -}; - -var person1 = new Person("سفيان"); -var person2 = new Person("محمد"); -var helloFunction = person1.sayHello; - -// النتيجة ==> "مرحبا، أنا سفيان" -person1.sayHello(); - -// النتيجة ==> "مرحبا، أنا محمد" -person2.sayHello(); - -// النتيجة ==> "مرحبا، أنا undefined" (أو أخطاء -// TypeError في الوضع الصارم) -helloFunction(); - -// النتيجة ==> true -console.log(helloFunction === person1.sayHello); - -// النتيجة ==> true -console.log(helloFunction === Person.prototype.sayHello); - -// النتيجة ==> "مرحبا، أنا سفيان" -helloFunction.call(person1);</pre> - -<p>كما يُظهر المثال السابق، جميع الإحالات المستخدمة في استدعاء الدالة <code>sayHello</code> تُشير إلى <strong><em>نفس الدالة</em></strong>سواءً الاستدعاء الحاصل مع <code>person1</code> أو <code>Person.prototype</code> أو حتى في المتغيّر <code>helloFunction</code>وقيمة <code>this</code> خلال استدعاء الدالة يعتمد على الكيفية التي تُستدعى فيها، حيث تُشير الكلمة المفتاحية<code>this</code> إلى الكائن الحالي الذي تُستدعى عليه الطريقة method، بمعنى عندما تم استدعاء الطريقة()<code>sayHello </code>على الكائن <code>person1</code> فإن <code>this</code> تُشير إلى الكائن <code>person1</code>، وعند استدعاء <code>sayHello</code>على الكائن <code>person2</code> فإن <code>this</code> تُشير إلى الكائن <code>person2</code>، ولكن إن تم الاستدعاء بطريقة مختلفة، فإن<code>this</code> ستُعيّن تعينًا مختلفًا، فاستدعاء <code>this</code> من المتغيّر (كما في ()<code>helloFunction</code>) سيُعيّن <code>this</code> إلى الكائن العام global (والذي سيكون window في متصفح الإنترنت)، ومنذ أن هذا الكائن (على الأغلب) لا يملك الخاصّيّة <code>firstName</code>، ستكون النتيجة كما هو الحال في المثال السابق “Hello, I’m undefined”، كما يمكن دائمًا تعيين <code>this</code> صراحةً باستخدام <code>Function#call</code> (أو <code>Function#apply</code>) وهو كما كان في نهاية المثال.</p> - -<div class="note"><strong>ملاحظة:</strong> أنظر المزيد حول <code>this</code> على <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call">call</a> و <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply">apply</a></div> - -<h4 id="الوراثة">الوراثة</h4> - -<p>تُستخدم الوراثة في جافا سكريبت في إنشاء صنف class كمثيل مخصص لصنف أو أكثر (<strong><em>تدعم جافا سكريبت وراثة وحيدة فقط single inheritance</em></strong>)، ويُطلق على الصنف المخصص عادةً <strong><em>ابن</em></strong> (child)، ويطلق على الصنف الآخر عادةً <strong><em>الأب</em></strong> (parent)، وفي جافا سكريبت يتمّ ذلك من خلال إسناد حالة/أمثولة من الصنف الأب إلى الصنف الابن، ومن ثم تخصيصه، وفي متصفحات الإنترنت الحديثة يُمكن استخدام<code>Object.create</code> في تحقيق الوراثة inheritance أيضًا.</p> - -<div class="note" dir="ltr"> -<p dir="rtl"><strong>ملاحظة</strong>: لا تتفقد جافا سكريبت مُشيّد صنف الابن <code>prototype.constructor</code> (راجع<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype" rel="external nofollow noopener noreferrer"><code>Object.prototype</code></a>)، وعليه يجب التصريح عن ذلك يدويًا، لمزيد من التفصيل راجع السؤال التالي على<a href="http://stackoverflow.com/questions/8453887/why-is-it-necessary-to-set-the-prototype-constructor" rel="external nofollow noopener noreferrer">Stackoverflow</a>.</p> -</div> - -<p>عُرّف في الشيفرة التالية الصنف <code>Student</code> كصنف ابن للصنف <code>Person</code>، ومن ثم أُعيد تعريف الطريقة()<code>sayHello</code> وأُضيفت الطريقة ()<code>sayGoodBye</code> علاوة على ذلك.</p> - -<pre class="brush: js" dir="rtl">// تعريف المشيد Person -var Person = function(firstName) { - this.firstName = firstName; -}; - -// إضافة زوج من الطرق إلى Person.prototype -Person.prototype.walk = function(){ - console.log("أنا أتمشى!"); -}; - -Person.prototype.sayHello = function(){ - console.log("مرحبا، أنا " + this.firstName); -}; - -// تعريف مشيد Student -function Student(firstName, subject) { - // إستدعاء المشيد اﻷب, التأكد (عن طريق الإستدعاء) - // من أن "this" وضعت بشكل صحيح أثناء اﻹستدعاء - Person.call(this, firstName); - - // تهيئة خصائص الطالب المحددة - this.subject = subject; -} - -// إنشاء كائن Student.prototype الذي يرث من Person.prototype. -// ملاحظة: خطأ شائع أن يستعمل "new Person()" ﻹنشاء -// Student.prototype. هذا غير صحيح لعدة أسباب، -// ليس أقل أننا ليس لدينا أي شيء ﻹعطاء Person إلى المعامل "firstName". -// الطريقة الصحيحة ﻹستدعاء Person هي في الأعلى حيث -// إستدعيناه من Student. -Student.prototype = Object.create(Person.prototype); // See note below - -// وضع الخاصية "constructor" للإشارة إلى Student -Student.prototype.constructor = Student; - -// إستبدال الطريقة "sayHello" -Student.prototype.sayHello = function(){ - console.log("مرحبا، أنا " + this.firstName + ". أنا أدرس " - + this.subject + "."); -}; - -// إضافة الطريقة "sayGoodBye" -Student.prototype.sayGoodBye = function(){ - console.log("وداعا!"); -}; - -// إستعمال المثال: -var student1 = new Student("سفيان", "المناجم"); -student1.sayHello(); // "مرحبا، أنا سفيان. أنا أدرس المناجم." -student1.walk(); // "أنا أتمشى!" -student1.sayGoodBye(); // "وداعا!" - -// التحقق من أن instanceof يعمل بشكل صحيح -console.log(student1 instanceof Person); // true -console.log(student1 instanceof Student); // true -</pre> - -<p>فيما يخص السطر ;(<code>Student.prototype = Object.create(Person.prototype</code> في الإصدارات القديمة من جافا سكريبت والتي لا تدعم <code>Object.create</code> يمكن إما استخدام بعض الحيل في خداع المتصفحات –هذه الخدع معروفة إما بالاسم polyfill أو shim—أو استخدام دالة تحقق نفس النتيجة كما في المثال التالي:</p> - -<pre class="brush: js" dir="rtl">function createObject(proto) { - function ctor() { } - ctor.prototype = proto; - return new ctor(); -} - -// الإستعمال: -Student.prototype = createObject(Person.prototype); -</pre> - -<div class="note"><strong>ملاحظة:</strong> أنظر <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create" title="Object.create">Object.create</a> للمزيد من المعلومات حول ما يقوم به, و الرقاقات للمحركات القديمة.</div> - -<p>التأكّد من أن <code>this</code> تُشير إلى الكائن المطلوب بغض النظر عن كيف للكائن أن يُستهل يمكن أن يكون صعبًا، ومع ذلك يوجد صياغة أبسط من شأنها أن تسهّل الأمر.</p> - -<pre class="brush: js" dir="rtl">var Person = function(firstName) { - if (this instanceof Person) { - this.firstName = firstName; - } else { - return new Person(firstName); - } -} -</pre> - -<h4 id="التغليف_Encapsulation">التغليف Encapsulation</h4> - -<p>ليس بالضرورة أن يعلم الصنف <code>Student</code> كيف تمّ تنفيذ/تعريف الطريقة ()<code>walk</code> للصنف <code>Person</code> لكي يستطيع استخدام تلك الطريقة، ولا يحتاج الصنف <code>Student</code> إلى تعريف تلك الطريقة صراحةً إلا إذا كان المطلوب التعديل عليها، ويُطلق على هذا الإجراء مفهوم التغليف encapsulation، والذي فيه يَحزم كل صنف البيانات والطُرق methods داخل وحدة/كينونة وحيدة.</p> - -<p>إخفاء المعلومات سمة شائعة في باقي اللغات البرمجية وعادةً ما توجد كخاصيات/كطُرق إما بالاسم<code>private</code> أو <code>protected</code>، وعلى الرغم من أنه يُمكن مماثلة/محاكاة ذات الأمر في جافا سكريبت، إلا أن هذا الأمر ليس مطلبًا من متطلبات البرمجة الكائنية.</p> - -<h4 id="التجريد_Abstraction">التجريد Abstraction</h4> - -<p>التجرير ما هو إلا ميكانيكية تسمح للمطوّر في تجسيد جانب من المشكلة التي يُعمل عليها، إما من خلال الوراثة inheritance (التخصيص specialization) أو التركيب composition، وتُحقق جافا سكريبت التخصيص من خلال الوراثة، والتركيب من خلال السماح لحالات/أمثولات الصنف لتكون قيمًا لخاصيات attributes الكائنات الأخرى.</p> - -<p>الصنف Function في جافا سكريبت يرث من الصنف <code>Object</code> (وهذا يوضّح التخصيص في هذا النموذج) والخاصية <code>Function.prototype</code> ما هي إلا حالة/أمثولة من الصنف <code>Object</code> (وهذا يوضّح جزئية التركيب composition).</p> - -<pre class="brush: js" dir="rtl">var foo = function () {}; - -// النتيجة ==> "foo عبارة عن وظيفة: true" -console.log('foo عبارة عن وظيفة: ' + (foo instanceof Function)); - -// النتيجة ==> "foo.prototype عبارة عن كائن: true" -console.log('foo.prototype عبارة عن كائن: ' + (foo.prototype instanceof Object));</pre> - -<h4 id="تعددية_الأشكال_Polymorphism">تعددية الأشكال Polymorphism</h4> - -<p>كما أن جميع الطُرق methods والخاصيات properties معرّفة ضمن الخاصية prototype، فيُمكن لبقية الأصناف أن تُعرِّف طُرقًا methods بنفس الاسم، وستكون الطُرق في نطاق الصنف الذي عُرفت به، إلا إذا كان الصنفان على علاقة من نوع أب وابن parent-child، بمعنى آخر أحد الصنفان يرث من الآخر<br> - <br> - هذه المقالة تُرجمة الي العربية بواسطة : <a href="https://academy.hsoub.com/profile/12-%D9%85%D8%AD%D9%85%D8%AF-%D8%A3%D8%A8%D8%B1%D8%B5/" id="ips_uid_2904_3" title="الذّهاب إلى الملف الشّخصي لعضو : محمد أبرص">محمد أبرص</a></p> - -<h2 id="ملاحظات">ملاحظات</h2> - -<p>هذه ليست الطرق الوحيدة التي يمكنك من خلالها تنفيذ البرمجة الشيئية في جافا سكريبت ، والتي تعد مرنة للغاية في هذا الصدد. وبالمثل ، فإن التقنيات الموضحة هنا لا تستخدم أي لغة خارقة ، ولا تحاكي تطبيقات اللغات الأخرى لنظرية الكائن.</p> - -<p>هناك تقنيات أخرى تجعل البرمجة الكائنية التوجه أكثر تقدما لكنها خارج نطاق الهذه المقالة التمهيدية.</p> -</div> - -<h2 id="المراجع">المراجع</h2> - -<ol> - <li><a href="https://ar.wikipedia.org/wiki/Object-oriented_programming" id="cite-1">ويكيبيديا - البرمجة الكائنية التوجه</a></li> - <li><a href="https://en.wikipedia.org/wiki/Prototype-based_programming" id="cite-2">ويكيبيديا - البرمجة القائمة على النوذج</a></li> - <li><a href="http://en.wikipedia.org/wiki/Encapsulation_%28object-oriented_programming%29" id="cite-3">ويكيبيديا - التغليف (البرمجة الكائنية التوجه</a><a href="http://ar.wikipedia.org/wiki/Encapsulation_%28object-oriented_programming%29">)</a></li> -</ol> - -<h2 id="أنظر_أيضا">أنظر أيضا</h2> - -<ul> - <li dir="ltr">{{jsxref("Function.prototype.call()")}}</li> - <li dir="ltr">{{jsxref("Function.prototype.apply()")}}</li> - <li dir="ltr">{{jsxref("Object.create()")}}</li> - <li dir="ltr"><a dir="rtl" href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">الوضع الصارم</a></li> -</ul> diff --git a/files/ar/web/javascript/reference/الدوال/get/index.html b/files/ar/web/javascript/reference/functions/get/index.html index d3789ba7bd..d3789ba7bd 100644 --- a/files/ar/web/javascript/reference/الدوال/get/index.html +++ b/files/ar/web/javascript/reference/functions/get/index.html diff --git a/files/ar/web/javascript/reference/الدوال/index.html b/files/ar/web/javascript/reference/functions/index.html index 368d8af03d..368d8af03d 100644 --- a/files/ar/web/javascript/reference/الدوال/index.html +++ b/files/ar/web/javascript/reference/functions/index.html diff --git a/files/ar/web/javascript/reference/global_objects/الارقام/index.html b/files/ar/web/javascript/reference/global_objects/number/index.html index cb667fd3d8..cb667fd3d8 100644 --- a/files/ar/web/javascript/reference/global_objects/الارقام/index.html +++ b/files/ar/web/javascript/reference/global_objects/number/index.html diff --git a/files/ar/web/مرجع/index.html b/files/ar/web/reference/index.html index fc7fd86cda..fc7fd86cda 100644 --- a/files/ar/web/مرجع/index.html +++ b/files/ar/web/reference/index.html diff --git a/files/ar/web/حماية/index.html b/files/ar/web/security/index.html index c9c30e8ca4..c9c30e8ca4 100644 --- a/files/ar/web/حماية/index.html +++ b/files/ar/web/security/index.html |