unslug ar: move

8 files changed, 562 insertions, 387 deletions

diff --git a/files/ar/learn/common_questions/كيفية_عمل/index.html b/files/ar/learn/common_questions/how_does_the_internet_work/index.html
index 2a3cd7e46f..2a3cd7e46f 100644
--- a/files/ar/learn/common_questions/كيفية_عمل/index.html
+++ b/files/ar/learn/common_questions/how_does_the_internet_work/index.html
diff --git a/files/ar/learn/css/first_steps/how_css_is_structured/index.html b/files/ar/learn/css/first_steps/how_css_is_structured/index.html
new file mode 100644
index 0000000000..f65331a2bd
--- /dev/null
+++ b/files/ar/learn/css/first_steps/how_css_is_structured/index.html
@@ -0,0 +1,178 @@
+---
+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/learn/css/styling_text/styling_lists/index.html b/files/ar/learn/css/styling_text/styling_lists/index.html
new file mode 100644
index 0000000000..2b7fdeb726
--- /dev/null
+++ b/files/ar/learn/css/styling_text/styling_lists/index.html
@@ -0,0 +1,384 @@
+---
+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">&lt;ul&gt;
+  &lt;li class="open"&gt;Lorem ipsum&lt;/li&gt;
+  &lt;li class="closed"&gt;Dolor sit&lt;/li&gt;
+  &lt;li class="closed"&gt;Amet consectetuer&lt;/li&gt;
+  &lt;li class="open"&gt;Magna aliquam&lt;/li&gt;
+  &lt;li class="closed"&gt;Autem veleum&lt;/li&gt;
+&lt;/ul&gt;
+</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">القاعدة التّالية تجعل العناصر في القائمة المرتّبة &lt;ol&gt; والتي تٌميز بصنف .«info» مُرتبة بحروف لاتينية كبيرة.  </div>
+
+<div class="tuto_type" dir="rtl"> </div>
+
+<pre class="brush: html">&lt;ol class="info"&gt;
+  &lt;li&gt;Lorem ipsum&lt;/li&gt;
+  &lt;li&gt;Dolor sit&lt;/li&gt;
+  &lt;li&gt;Amet consectetuer&lt;/li&gt;
+  &lt;li&gt;Magna aliquam&lt;/li&gt;
+  &lt;li&gt;Autem veleum&lt;/li&gt;
+&lt;/ol&gt;</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">    هذه القاعدة تُنشئ عدّادًا لكلّ عنصر&lt;h3&gt; له تصنيف (كلاس) «numbered»:                                          </div>
+
+<pre class="brush:css">h3.numbered {
+    counter-reset: mynum;
+}
+</pre>
+
+<p dir="rtl"> أما هذه القاعدة فهى تعرض عّداد الـ &lt;p&gt;  والتي لها تصنيف «numbered»</p>
+
+<pre class="brush: html">&lt;p class="numbered"&gt;Lorem ipsum&lt;/p&gt;
+&lt;p class="numbered"&gt;Dolor sit&lt;/p&gt;
+&lt;p class="numbered"&gt;Amet consectetuer&lt;/p&gt;
+&lt;p class="numbered"&gt;Magna aliquam&lt;/p&gt;
+&lt;p class="numbered"&gt;Autem veleum&lt;/p&gt;
+</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;">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;title&gt;Sample document 2&lt;/title&gt;
+    &lt;link rel="stylesheet" href="style2.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+    &lt;h3 id="oceans"&gt;The oceans&lt;/h3&gt;
+    &lt;ul&gt;
+      &lt;li&gt;Arctic&lt;/li&gt;
+      &lt;li&gt;Atlantic&lt;/li&gt;
+      &lt;li&gt;Pacific&lt;/li&gt;
+      &lt;li&gt;Indian&lt;/li&gt;
+      &lt;li&gt;Southern&lt;/li&gt;
+    &lt;/ul&gt;
+
+    &lt;h3 class="numbered"&gt;Numbered paragraphs&lt;/h3&gt;
+    &lt;p class="numbered"&gt;Lorem ipsum&lt;/p&gt;
+    &lt;p class="numbered"&gt;Dolor sit&lt;/p&gt;
+    &lt;p class="numbered"&gt;Amet consectetuer&lt;/p&gt;
+    &lt;p class="numbered"&gt;Magna aliquam&lt;/p&gt;
+    &lt;p class="numbered"&gt;Autem veleum&lt;/p&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;
+</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/learn/html/forms/index.html b/files/ar/learn/forms/index.html
index 3c8f449476..3c8f449476 100644
--- a/files/ar/learn/html/forms/index.html
+++ b/files/ar/learn/forms/index.html
diff --git a/files/ar/learn/getting_started_with_the_web/أساسيات_صفحات_الطرز_المتراصة/index.html b/files/ar/learn/getting_started_with_the_web/css_basics/index.html
index 70be221b32..70be221b32 100644
--- a/files/ar/learn/getting_started_with_the_web/أساسيات_صفحات_الطرز_المتراصة/index.html
+++ b/files/ar/learn/getting_started_with_the_web/css_basics/index.html
diff --git a/files/ar/learn/how_to_contribute/index.html b/files/ar/learn/how_to_contribute/index.html
deleted file mode 100644
index e53fb8f34f..0000000000
--- a/files/ar/learn/how_to_contribute/index.html
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: كيف تساهم في قسم التعلم في الشبكة
-slug: Learn/How_to_contribute
-tags:
-  - توثيق
-  - دليل
-  - ساهم
-  - مبتدئين
-translation_of: Learn/How_to_contribute
----
-<div>{{LearnSidebar}}</div>
-
-<p dir="rtl">إن كنت هنا لأوَّل مرَّة أو بعد بحثٍ طويل، فمن المُرجَح أنَّ هذا يرجع لكونك مُهتماً في المساهمة في قسم شبكة مطوري موزيلا للتعلم. إنَّ هذا لنبؤٌ سعيد!</p>
-
-<p dir="rtl"><span class="seoSummary">ستجد في هذه الصفحة كل شيء ستحتاج إليه لتحسين محتوى قسم التعلم. يوجد العديد من الأشياء التي يمكنك القيام بها، بناءً على وقتك، وما إذا كنت <a href="/ar/Learn/How_to_contribute#I'm_a_beginner">مُبتدِئاً</a>، <a href="/ar/Learn/How_to_contribute#I'm_a_web_developer">مطوراً</a>، أو <a href="/ar/Learn/How_to_contribute#I'm_a_teacher">مُدرِساً</a>.</span></p>
-
-<div class="note">
-<p dir="rtl"><strong>ملاحظة</strong>: يمكنك إيجاد دليل إرشادي حول كتابة مقالة جديدة في قسم التعلم في مقالة "<a href="/ar/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">كيفيّة كتابة مقالة لمساعدة الناس على التعلُّم حول الويب</a>".</p>
-</div>
-
-<h2 dir="rtl" id="جِد_مهمة_محددة">جِد مهمة محددة</h2>
-
-<p dir="rtl">الطرق الشائعة للمساهمة في قسم التعلم هي قراءة المقالات، إصلاح الأخطاء المطبعيّة، واقتراح التحسينات. نُرحِب أيضاً بإضافة أمثلة إلى <a href="https://github.com/mdn/learning-area/">مستودعنا على جيتهاب</a>، والتواصل معنا إن رغبت بطرح سؤال ما.</p>
-
-<p dir="rtl">المساهمة هي طريقة رائعة لاكتساب المتعة في حين تعلم أشياء جديدة. إن شعرت يوماً بالضياع أو كان لديك سؤالاً ما، فلا تتردد أبداً بالتواصل معنا على <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">موضوع قسم التعلُّم في منصة ديسكورس</a>، أو على <a href="/ar/docs/MDN/Community#Get_into_IRC">قناة IRC</a> (اطّلع على نهاية هذه الصفحة للمزيد من التفاصيل).<span class="short_text" id="result_box" lang="ar"><span> <a href="/ar/profiles/chrisdavidmills">كريس ميلز</a></span></span> (Chris Mills) هو مدير المواضيع لهذا القسم، يمكنك أيضاً محاولة التواصل معه مباشرةً.</p>
-
-<p dir="rtl">توفِر الأقسام التاليّة بعض الأفكار العامة حول أنواع المهام التي يمكنك القيام بها.</p>
-
-<h2 dir="rtl" id="أنا_مُبتدِئ">أنا مُبتدِئ</h2>
-
-<p dir="rtl">هذا مُذهِل! المبتدئون هم عامل مُهم وقيّم جداً في تقديم التعليقات حول المواد الدراسيّة. لديك - بالتأكيد - وجهة نظر فريدة حول مقالتنا كعضو من جمهورنا المُستهدف، مما يجعلك عضواً لا يقدر بثمن في فريقنا. إن كنت تستخدم مقالاتنا لتتعلم شيئاً ما ووقعت في المشاكل، أو وجدت مقالة تحوي معلومات مُشتتة، يمكنك إما إصلاحها أو إعلامنا بذلك حتى نتحقق من المشكلة ونحلُها.</p>
-
-<p dir="rtl">إليك بعض الاقتراحات حول الطرق التي يمكنك المساهمة فيها:</p>
-
-<dl>
- <dt dir="rtl"><a href="/ar/docs/MDN/Contribute/Howto/Tag">إضافات الوسوم إلى المقالات</a> (<em>تستغرق العمليّة قرابة الخمس دقائق</em>)</dt>
- <dd dir="rtl">وسِم (tagging) محتوى الشبكة هو أحد أسهل الطرق التي يمكنك المساهمة فيها. في حين أنَّ العديد من المزايا لدينا تستخدم الوسوم (tags) لتساعدها في تقديم المعلومات بسياقها الصحيح، فيُعَد الوسِم مساهمة قيّمة جداً. ألقي نظرة على قائمة المصطلحات في <a href="/ar/docs/MDN/Doc_status/Glossary#No_tags">المسرد</a> و<a href="/ar/docs/MDN/Doc_status/Learn#No_tags">المقالات التعليميّة</a> التي لا تحتوي على وسوم لتبدأ بالمساهمة.</dd>
- <dt dir="rtl"><a href="/ar/docs/Glossary">قراءة ومراجعة المصطلحات في المسرد</a> (<em>تستغرق العمليّة قرابة الخمس دقائق</em>)</dt>
- <dd dir="rtl">كمبتدئ، نحتاج إلى أعين يقظة لمراجعة محتوانا. إذا وجدت مصطلحاً صعب الفهم، فهذا يعني أنَّ المسرد بحاجة ليُحسَن. لا تتردد بإجراء أي تغييرات تظنها ضروريّة. إذا كنت تظن أنَّك لا تملك المهارة الكافيّة لتعديل مصطلح بنفسك، يمكنك على الأقل إعلامنا بذلك على <a href="/ar/docs/MDN/Community#Join_our_mailing_lists">قائمتنا البريديّة</a>.</dd>
- <dt dir="rtl"><a href="/ar/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">كتابة مصطلح جديد في المسرد</a> (<em>تستغرق العمليّة قرابة العشرين دقيقة</em>)</dt>
- <dd dir="rtl">هذه أكثر الطرق فعاليّة لتتعلم شيئاً جديداً. اختر مفهوماً جديداً تريد فهمه، أقرأ عنه، واكتب شرحاً له في المسرد. الشرح للآخرين هي إحدى الطرق الرائعة "لتثبيت" المعرفة في ذهنك، وتساعدك على فهم الأشياء بنفسك، كل هذا في حين أنَّك تساعد الآخرين أيضاً. الجميع رابِح!</dd>
- <dt dir="rtl"><a href="/ar/Learn/Index">قراءة ومراجعة المقالات التعليميّة</a> (<em>تستغرق العمليّة قرابة الساعتين</em>)</dt>
- <dd dir="rtl">تشبه هذه المهمة كثيراً مراجعة المصطلحات في المسرد (انظر أعلاه). ولكن هذه المهمة تحتاج لوقتٍ أطول؛ بسبب أنَّ هذه المقالات عادةً ما تكون أطول قليلاً.</dd>
-</dl>
-
-<h2 dir="rtl" id="أنا_مُطوِّر">أنا مُطوِّر</h2>
-
-<p dir="rtl">عظيم! مهاراتك التقنيّة هي ما نحتاجه لتوفير محتوى تقني دقيق للمتبدئين. بما أنَّ هذا القسم من الشبكة مُخصص لتعليم الويب، كُن حريصاً على جعل توضيحاتك بسيطة قدر الإمكان، مع الحرص على كونها مفيدة.<span id="result_box" lang="ar"><span> من الأكثر أهميّة أن تكون مفهومة على أن تكون دقيقة للغاية.</span></span></p>
-
-<dl>
- <dt dir="rtl"><a href="/ar/docs/Glossary">قراءة ومراجعة المصطلحات في المسرد</a> (<em>تستغرق العمليّة قرابة الخمس دقائق</em>)</dt>
- <dd dir="rtl">كمطوِّر، نحتاج لتتأكد أنَّ محتوانا دقيق تقنياً بدون أن يكون مُتحذلق بشكل مبالغ. لا تتردد عن إجراء أي تغييرات تظن أنَّها ضروريّة. إذا أردت مناقشة المحتوى قبل إجراء أيّة تغييرات، تواصل معنا على <a href="/ar/docs/MDN/Community#Join_our_mailing_lists">قائمتنا البريديّة</a> أو على <a href="/ar/docs/MDN/Community#Get_into_IRC">قناة IRC</a>.</dd>
- <dt dir="rtl"><a href="/ar/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">كتابة مصطلح جديد في المسرد</a> (<em>تستغرق العمليّة قرابة العشرين دقيقة</em>)</dt>
- <dd dir="rtl">توضيح المصطلحات التقنيّة هي طريقة جيدة جداً للتعلم ولتصبح دقيق تقنياً وبسيطاً في شرحك. سيشكرك المبتدئون على ذلك. لدينا العديد من <a href="/ar/docs/Glossary#Contribute">المصطلحات الغير معرفة</a> والتي تحتاج لاهتمامك. اختر واحداً وابدأ بشرحه.</dd>
- <dt dir="rtl"><a href="/ar/Learn/Index">قراءة ومراجعة المقالات التعليميّة</a> (<em>تستغرق العمليّة قرابة الساعتين</em>)</dt>
- <dd dir="rtl">هذه المهمة مماثلة لمراجعة المصطلحات في المسرد (انظر أعلاه). الفرق هو أنَّ هذه المقالات أطول قليلاً مما سيتطلب وقتاً أطول.</dd>
- <dt dir="rtl"><a href="/ar/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">كتابة مقالة تعليميّة جديدة</a> (<em>تستغرق العمليّة قرابة الأربع ساعات أو أكثر</em>)</dt>
- <dd dir="rtl">تفتقر شبكة مطوري موزيلا إلى المقالات البسيطة حول استخدام تقنيات الويب (مثل <a href="/ar/docs/Learn/CSS">لغة ترميز النص الفائق</a>، <a href="/ar/docs/Learn/CSS">صفحات الأنماط الانسيابية</a>، <a href="/ar/docs/Learn/JavaScript">الجافاسكربت</a> ...إلخ). لدينا في الشبكة محتوى قديم يتطلب إعادة المراجعة والنشر. ادفع بمهاراتك إلى أقصى حد لتجعل تقنيات الويب قابلة للاستخدام من قبل المبتدئين.</dd>
- <dt dir="rtl"><a href="/ar/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">إنشاء تمرينات، عينات برمجيّة، أو أدوات تعليم تفاعليّة</a> (<em>تستغرق العمليّة وقتاً غير محدد</em>)</dt>
- <dd dir="rtl">تحتاج جميع مقالاتنا التعليميّة إلى ما ندعوه بمواد "التعليم النشطة"، ﻷنَّ الناس يتعلمون الشيء بشكل أفضل عندما يقومون به بأنفسهم. هذه المواد هي تمرينات أو محتويات تفاعليّة تساعد المُستخدمين على تطبيق والتلاعب بالمفاهيم المشروحة في المقالة. يوجد العديد من الطرق الممكنة لصنع محتوى تفاعلي، من إنشاء عينات برمجيّة باستخدام <a href="http://jsfiddle.net">JSFiddle</a> أو أشباهه، إلى بناء محتوى تفاعلي مُتكامل بواسطة <a href="https://thimble.mozilla.org/">Thimble</a>. أطلق العنان لإبداعك!</dd>
-</dl>
-
-<h2 dir="rtl" id="أنا_مُدرِس">أنا مُدرِس</h2>
-
-<p dir="rtl">تملك شبكة مطوري موزيلا تاريخ طويل من النجاح التقني، ولكننا نفتقر للفهم العميق حول الطرق الفُضلى لتعليم المفاهيم للجدد. هنا حيث نحتاج إليك بصفتك مُدرِس. يمكنك مساعدتنا على الحرص على أنَّ موادنا التعليميّة توفِر مسار تعليمي جيد وعملي لقرائِنا.</p>
-
-<dl>
- <dt dir="rtl"><a href="/ar/docs/Glossary">قراءة ومراجعة المصطلحات في المسرد</a> (<em>تستغرق العمليّة قرابة الخمس عشرة دقيقة</em>)</dt>
- <dd dir="rtl">تَفَقَد المصطلحات في المسرد ولا تتردد عن إجراء أيّة تغييرات تراها ضروريّة. إذا أردت مناقشة المحتوى قبل تعديله، تواصل معنا على <a href="/ar/docs/MDN/Community#Join_our_mailing_lists">قائمتنا البريديّة</a> أو على <a href="/ar/docs/MDN/Community#Get_into_IRC">قناة IRC</a>.</dd>
- <dt dir="rtl"><a href="/ar/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">كتابة مصطلح جديد في المسرد</a> (<em>تستغرق العمليّة قرابة الساعة</em>)</dt>
- <dd dir="rtl">تعريفات المصطلحات البسيطة والواضحة، واللمحات البسيطة عن المفاهيم في المسرد هو قطعاً ما يلبي احتياجات المبتدئِين. يمكن أن تساعد خبرتك كمُدرِس على إنشاء تعريفات ممتازة للمصطلحات. لدينا العديد من <a href="/ar/docs/Glossary#Contribute">المصطلحات الغير معرفة</a> والتي تحتاج لاهتمامك. اختر واحداً وابدأ بشرحه.</dd>
- <dt dir="rtl"><a href="/ar/docs/tag/needsSchema">إضافة رسوم توضيحيّة ومخططات للمقالات</a> (<em>تستغرق العمليّة قرابة الساعة</em>)</dt>
- <dd dir="rtl">كما تعلم، الرسوم التوضيحيّة (illustrations) هي جزء لا يقدر بثمن في أي محتوى تعليمي. تلك هي إحدى الأمور التي نفتقدها في الشبكة ومهاراتك يمكن أن تُحدِث فرقاً. تفقد <a href="/ar/docs/tag/تحتاج_لرسوم_توضيحيّة">المقالات التي تحوي نقصاً في المحتوى التوضيحي</a> واختر مقالة ترغَب بإنشاء رسماً توضيحياً يشرحها.</dd>
- <dt dir="rtl"><a href="/ar/Learn/Index">قراءة ومراجعة المقالات التعليميّة</a> (<em>تستغرق العمليّة قرابة الساعتين</em>)</dt>
- <dd dir="rtl">هذه المهمة مشابهة لمراجعة المصطلحات في المسرد (انظر أعلاه)، ولكنها تتطلب وقتاً أطول لكون المقالات بالعادة أطول قليلاً.</dd>
- <dt dir="rtl"><a href="/ar/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">كتابة مقالات تعليميّة جديدة</a> (<em>تستغرق العمليّة قرابة الأربع ساعات</em>)</dt>
- <dd dir="rtl">نحتاج إلى مقالات بسيطة وواضحة حول النظام الشابكي (Web ecosystem) والمواضيع الأخرى المتعلقة به. في حين أنَّ المقالات التعليميّة من الضروري أن تكون تدريسيّة بدلاً من أن تقوم بتغطيّة كل شيء حرفياً، فخبرتك بمعرفة الأشياء التي يجب شرحها وكيفيّة القيام بذلك ستكون مساعدة رائعة!</dd>
- <dt dir="rtl"><a href="/ar/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">إنشاء تمرينات، اختبارات، أو أدوات تعليم تفاعليّة</a> (<em>يستغرق الأمر وقتاً غير محدد</em>)</dt>
- <dd dir="rtl">تحتاج جميع مقالاتنا التعليميّة إلى مواد "التعليم النشط". هذه المواد هي تمرينات أو محتويات تفاعليّة تساعد المُستخدمين على تعلم استخدام والتوسع في المفاهيم المشروحة في المقالة. يوجد العديد من الأمور التي يمكنك القيام بها هنا، من إنشاء اختبارات (quizzes)، إلى بناء محتوى تفاعلي مُتكامل بواسطة <a href="https://thimble.mozilla.org/">Thimble</a>. أطلق العنان لإبداعك!</dd>
- <dt dir="rtl"><a href="/ar/docs/MDN/Contribute/Howto/Create_learning_pathways">إنشاء مسارات تعليميّة</a> (<em>تستغرق العمليّة وقتاً غير محدد</em>)</dt>
- <dd dir="rtl">بغرض توفير دورات شاملة وتدريجيّة، نحتاج إلى تهيئة محتوانا في مسارات. هذه طريقة لجمع المحتوى الحالي وإيجاد المفقود لإنشاء مقالات تعليميّة عنه.</dd>
-</dl>
diff --git a/files/ar/learn/html/الجداول/index.html b/files/ar/learn/html/tables/index.html
index 380e837a80..380e837a80 100644
--- a/files/ar/learn/html/الجداول/index.html
+++ b/files/ar/learn/html/tables/index.html
diff --git a/files/ar/learn/html/بسيطة_html_إنشاء_صفحة/index.html b/files/ar/learn/html/بسيطة_html_إنشاء_صفحة/index.html
deleted file mode 100644
index a6cdfdf6cf..0000000000
--- a/files/ar/learn/html/بسيطة_html_إنشاء_صفحة/index.html
+++ /dev/null
@@ -1,305 +0,0 @@
----
-title: إنشاء صفحة HTML بسيطة
-slug: Learn/HTML/بسيطة_HTML_إنشاء_صفحة
-tags:
-  - البداية
-translation_of: Learn/Getting_started_with_the_web
-translation_of_original: Learn/HTML/Write_a_simple_page_in_HTML
----
-<div class="summary">
-<p>فى هذا المقال سوف تتعلم كيق تنشئ صفحة ويب بسيطة باستخدام {{Glossary("HTML")}}</p>
-</div>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">المتطلبات الأساسية:</th>
-   <td>يجب ان يكون لديك <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">محرر نصوص</a> و أن تعلم كيف  <a href="/en-US/docs/Learn/Open_a_file_in_a_browser">كيف تفتح ملف فى متصفح</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">الهدف:</th>
-   <td>إنشاء صفحة ويب يمكنك عرضها باستخدام متصفحك.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="الملخص">الملخص</h2>
-
-<p>أن أبسط صفحة ويب هى فقط ملف {{Glossary("HTML")}} . فقط ملف HTML صحيح واحد موجود على حاسبك و متصفح ويب هى كل ما تحتاجه. سوف نرى كبف كيف يمكن استخدام HTML {{Glossary("Tag","tags")}} و سوف تكون فادر على عرض الصفحة التى أنشأتها فى متصفحك.</p>
-
-<h2 id="التعلم_النشط">التعلم النشط</h2>
-
-<p>أول شئ؛ تأكد أنه يوجد لديك محرر نصوص تجيد استخدامه و متصفح ويب. على الأغلب أى محرر نصوص سوف يكون كافى؛ على سبيل المثال Notepad فى Windows أو TextEdit فى Mac ؛ ولكن تأكد أنك ستنشئ ملفات نصوص بسيطة (حروف فقط بدون تنسيق). إذا كنت تستخدم TextEdit فى Mac يمكنك اختيار "Make Plain Text" من قائمة "Format".</p>
-
-<h3 id="الخطوة_الأولى_ملف">الخطوة الأولى: ملف</h3>
-
-<p>صفحة الويب الواحدة تتكون (على الأقل) من ملف HTML ؛ لذلك سنبدأ بإنشاء واحد. قم بفتح محرر النصوص و قم بإنشاء ملف نصى ؛ ثم اكتب شئ مثل هذا:</p>
-
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-  &lt;title&gt;Hi there&lt;/title&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  This is a page
-  a simple page
-&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p>يمكنك تعديل هذا كما تشاء؛ أنت حر فى أن تضيف أو تغير النص بين وسمى &lt;title&gt;&lt;/title&gt; و &lt;body&gt;&lt;/body&gt;. تأكد أن تعطى الملف اسم ينتهى بالإضافة ".html" . على سبيل المثال يمكنك تسميتها "my_page.html".</p>
-
-<p>الآن لديك ملف على حاسبك ؛ من الممكن أن يكون شكله يشبه هذا (هذا يتوقف على نظام التشغيل الذى تستخدمه) :</p>
-
-<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/8383/Capture%20du%202014-08-20%2021:20:25.png" style="height: 72px; width: 365px;"></p>
-
-<p>إذا قمت فقط بالضغط مرتين على هذا الملف سوف يُفتح فى متصفحك. إذا أردت فتحه فى محرر النصوص لتعديله قم بالضغط عليه بزر الفأرة الأيمن و اختر فتح الملف فى محرر النصوص. (أو قم بسحبه و إفلاته فى المحرر؛ أو قم بفتح الملف باختيار "open" من قائمة "File" فى المحرر.) ,حسب محررك الملف سوف يبدو مثل هذا:</p>
-
-<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/8385/Capture%20du%202014-08-20%2021:24:06.png" style="height: 180px; width: 311px;"></p>
-
-<h3 id="الخطوة_الثانية_متصفح_ويب">الخطوة الثانية: متصفح ويب</h3>
-
-<p>داخل متصفح الملفات الخاص بك(مثل Explorer فى Windows؛ أو Finder فى Mac أو Files فى Ubuntu)، اعثر على الملف الذى أنشأته و قم بفتحه فى متصفحك (بالضغط عليه مرتين؛ أو سحبه و إفلاته على أيقونة المتصفح) الآن المتصفح يعرض النص من ملف HTML الذى أنشأته والتبويب يعرض عنوان الصفحة. هذا يجب أن يشبه هذا؛ حسب نظام تشغيلك و متصفحك:</p>
-
-<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/8387/Capture%20du%202014-08-20%2021:28:22.png" style="border-style: solid; border-width: 1px; height: 111px; width: 513px;"></p>
-
-<p>يمكنك أن ترى محتوى جسم الصفحة (بين وسمى &lt;body&gt;&lt;/body&gt;)؛ و العنوان الذى اخترته (بين وسمى &lt;title&gt;&lt;/title&gt;) يظهر فى التبويب ولكن لا يوجد فاصل بين سطرى النص. شئ مثير للاهتمام.</p>
-
-<h3 id="الخطوة_الثالثة_التجربة_والتعلم">الخطوة الثالثة: التجربة والتعلم</h3>
-
-<p>جرب أن تحذف بعض أجزاء ملف HTML وشاهد ما يحدث. بعض الأخطاء لن تؤثر كثيرًا والصفحة ستظل قابلة للعرض فى المتصفح، البعض الاَخر سوف يسبب مشاكل واضحة للنتائج. هذا يحدث لأن المتصفحات تحاول أن تعوض عن بعض الأخطاء الشائعة.</p>
-
-<p> </p>
-
-<p>لشيء الذي يجب أن تلاحظه هو أن الشيء الوحيد الذي تراه معروضًا على الشاشة هو النص الذي ليس داخل أقواس الزاوية (والمعروف باسم الرموز الأكبر من وأقل من الرموز ، ولكننا نسميها أقواس معقوفة عند الحديث عن HTML). كل شيء داخل الأقواس الزاوية هو {{Glossary ("tag")}} ، والذي يمثل البنية أو الهيكل العظمي لصفحة الويب الخاصة بك. يظهر كل المحتوى المعروض بين العلامات.</p>
-
-<p>تحتوي صفحة HTML الخاصة بنا كمثال على قسمين رئيسيين: رأس ، ومضمون في كتلة {{HTMLElement ("head")}} ، وهيئة ، موجودة داخل {{HTMLElement ("body")}}. يحتوي النص على النص المعروض داخل الصفحة.</p>
-
-<p>لكل علامة معنى محدد ويجب استخدامها وفقًا لذلك ؛ على سبيل المثال ، يتم استخدام {{HTMLElement ("title")}} للإشارة إلى عنوان الصفحة ، والذي قد يختلف عن اسم الملف. لاحظ أيضًا أن العلامات يمكن أن تحدث داخل محتوى علامات أخرى. يتم تضمين {{HTMLElement ("title")}} داخل {@ HTMLElement ("head")}} ، على سبيل المثال.</p>
-
-<p>إذا كنت تريد إضافة شيء ما مثل صورة إلى صفحتك ، فستحتاج إلى إضافة علامة للصورة والصورة نفسها. فمثلا:</p>
-
-<p> </p>
-
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-  &lt;title&gt;Hi there&lt;/title&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  This is a page
-  a simple page
-  &lt;img src="unicorn_pic.png" alt="Unicorn picture :)" /&gt;
-  now with a unicorn
-&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p>عدّل ملفك ليتضمن علامة {{HTMLElement ("img")}} ، على النحو التالي:</p>
-
-<pre class="brush: html">&lt;img src="unicorn_pic.png" alt="Unicorn picture :)" /&gt;</pre>
-
-<p> </p>
-
-<p>يمكن أن تذهب إلى أي مكان داخل {{HTMLElement ("body")}}. لا تنس حفظ الصفحة التي تم تغييرها!</p>
-
-<p>ثم ضع ملفًا باسم "unicorn_pic.png" في المجلد نفسه كملف HTML. عند تحديث نافذة المتصفح (أو إعادة فتح ملف HTML في متصفحك) ، يجب أن تشاهد المحتوى الذي تم تغييره ، مع استكمال يونيكورن! (لا تنس حفظ صفحتك).</p>
-
-<p> </p>
-
-<p><img alt="Original file for the unicorn image" src="https://mdn.mozillademos.org/files/8495/unicorn_pic.png" style="height: 300px; width: 242px;"></p>
-
-<div class="note">
-<p><strong>ملاحظة: يمكنك الحصول على نسخة من صورة يونيكورن لاستخدامها في تجاربك عن طريق النقر بزر الماوس الأيمن فوق الصورة واختيار خيار "حفظ الصورة باسم ..." من القائمة التي تظهر.</strong></p>
-</div>
-
-<p>The files needed for this page to work now look something like this in your desktop:</p>
-
-<p><img alt="Screenshot of the explorer with 2 files : a html file and a picture file" src="https://mdn.mozillademos.org/files/8389/Capture%20du%202014-08-20%2021:37:14.png" style="height: 69px; width: 405px;"></p>
-
-<p>تبدو الملفات المطلوبة لهذه الصفحة الآن تبدو كشيء من هذا القبيل في سطح المكتب الخاص بك:</p>
-
-<p><img alt="Screenshot for the example with a picture" src="https://mdn.mozillademos.org/files/8499/Capture%20du%202014-09-04%2021:39:16.png" style="border-style: solid; border-width: 1px; height: 404px; width: 664px;"></p>
-
-<p> </p>
-
-<p>ربما لاحظت أن علامة {{HTMLElement ("img")}} تحتوي على {{Glossary ("attribute"، "attributes")}} التي توفر معلومات إضافية مطلوبة لبناء الكائن المطلوب ، وفي هذه الحالة ، اسم الملف الصورة التي سيتم عرضها والنص البديل الذي سيتم عرضه عندما يتعذر تحميل الصورة.</p>
-
-<p>هذا مثال على كيفية إضافة صورة إلى صفحتك ، ولكن يمكنك استخدام تقنيات مشابهة لإضافة الموسيقى ومقاطع الفيديو والمزيد ، وكل ذلك باستخدام لا شيء أكثر من HTML.<br>
-  </p>
-
-<p> </p>
-
-<p>الغوص أعمق<br>
- هذه ليست صفحة ويب جميلة جدا<br>
- كما قد تكون لاحظت ، هذه الصفحة ليست معجزة بالتصميم والجمال. وذلك لأن HTML تدور حول المحتوى وما يعنيه المحتوى (من حيث السياق والعلاقات بين كتل المحتوى) ، بدلاً من التصميم.</p>
-
-<p>يمكّنك {{Glossary ("CSS")}} من جعل المحتوى يتألق ، وذلك بإضافة التخطيط واللون والخطوط وما إلى ذلك. إن HTML الخالص جيد بما يكفي لصنع صفحات ويب بسيطة ، لكن الصفحات الأكثر تعقيدًا (أو حتى الصفحات البسيطة ذات التصميمات الجذابة) تحتاج عادة إلى CSS وربما {{Glossary ("JavaScript")}}. ينشئ HTML المحتوى وأنماط CSS للمحتوى وجافا سكريبت يجعل المحتوى ديناميكيًا.</p>
-
-<p>دعونا نجرب قليلا مع CSS بجعل النص الأساسي للصفحة باللون الأزرق:<br>
- alghaws 'aemaq<br>
-  </p>
-
-<p> </p>
-
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-  &lt;title&gt;Hi there&lt;/title&gt;
-  &lt;style&gt;
-    body {
-      color: blue;
-    }
-  &lt;/style&gt;
-&lt;/head&gt;
-  &lt;body&gt;
-    &lt;p&gt;This is a some blue text&lt;/p&gt;
-    &lt;img src="unicorn_pic.png" alt="Unicorn picture :)" /&gt;
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p> </p>
-
-<p>لاحظ إضافة عنصر {{HTMLElement ("style")}} إلى الصفحة {{HTMLElement ("head")}}. هذا يحدد CSS لتطبيقه على النص الأساسي.</p>
-
-<p>تريد أن يتم تسطير النص؟ حاول إضافة "زخرفة النص: تسطير ؛" حكم على أسلوبك:</p>
-
-<p> </p>
-
-<pre class="brush: css">body {
-  color: blue;
-  text-decoration: underline;
-}</pre>
-
-<p>تريد أن يكون النص بحجم محدد؟ جرب إضافة "font-size: 42px؛" مثله:</p>
-
-<pre class="brush: css">body {
-  color: blue;
-  text-decoration: underline;
-  font-size: 42px;
-}</pre>
-
-<p>والنهاية ستكون هكذا:</p>
-
-<pre class="brush: html">&lt;html&gt;
-&lt;head&gt;
-  &lt;title&gt;Hi there&lt;/title&gt;
-  &lt;style&gt;
-  body {
-    color: blue;
-    text-decoration: underline;
-    font-size: 42px;
-  }
-  &lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  &lt;p&gt;This is a blue underlined big text&lt;/p&gt;
-  &lt;img src="unicorn_pic.png" alt="Unicorn picture :)" /&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p>وإذا قمت بحفظ الصفحة في المحرر الخاص بك ، ثم قم بتحديث المتصفح ، فيجب أن تبدو الصفحة كما يلي:</p>
-
-<p><img alt="Screenshot of the browser with the page with some CSS" src="https://mdn.mozillademos.org/files/8497/Capture%20du%202014-09-04%2021:40:18.png" style="border-style: solid; border-width: 1px; height: 494px; width: 743px;"></p>
-
-<p>ينمو إلى صفحتين<br>
- عندما تتصفح الويب ، غالبًا ما تصادفك {{Glossary ("hyperlink" ، "links")}} ، وهي الطريقة الأكثر فائدة للانتقال من صفحة إلى أخرى. نظرًا لأن HTML عبارة عن محتوى وتعتبر الروابط نوعًا من المحتوى ، يمكنك إنشاء روابط بين الصفحات باستخدام HTML فقط.</p>
-
-<p>الربط بين صفحتين محليتين<br>
- في هذا التمرين ، ستحتاج إلى إنشاء ملف HTML ثاني على جهاز الكمبيوتر الخاص بك. سنضيف رابطًا إلى كل صفحة حتى يمكنك التبديل سريعًا ذهابًا وإيابًا فيما بينها.</p>
-
-<p>في الملف الأول يمكنك الاحتفاظ بنفس البنية العامة كما كان من قبل. المهم هو إضافة علامة جديدة ، {{HTMLElement ("a")}} ، على النحو التالي:</p>
-
-<p> </p>
-
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-  &lt;title&gt;Page 1 to ground control&lt;/title&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  This is page 1.
-  &lt;a href="page2.html" title="to page 2"&gt;What is going on on page 2?&lt;/a&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p>يجب أن ترتبط الصفحة الثانية بالصفحة الأولى:</p>
-
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-  &lt;title&gt;Page 2 :)&lt;/title&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  This is a page 2.
-  &lt;a href="page1.html" title="to page 1"&gt;<span>Want to go back to page 1? Click here</span>&lt;/a&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<div class="note">
-<p><strong>ملاحظة: تأكد من تطابق أسماء الملفات المحددة في سمة href للعلامة {{HTMLElement ("a")} مع أسماء الملفات التي أنشأتها على جهاز الكمبيوتر.</strong></p>
-</div>
-
-<p> </p>
-
-<p>يمكنك الآن التنقل بين اثنين من مستندات HTML. افتح الصفحة 1 في المستعرض الخاص بك وانقر فوق الارتباط لفتح الصفحة 2 ، والعكس. يمكنك أيضًا اختبار الزر "السابق" في متصفحك. ستعيدك إلى الصفحة الأخيرة التي كنت تبحث عنها.</p>
-
-<p>يجب أن يكون لمدير الملفات ملفي HTML في نفس المجلد ، على النحو التالي:</p>
-
-<p><img alt="Screenshot of the file explorer with two HTML documents in one directory/folder" src="https://mdn.mozillademos.org/files/8395/Capture%20du%202014-08-20%2022:06:05.png" style="height: 92px; width: 595px;"></p>
-
-<p>الصفحة الاولي تشبه هذه:</p>
-
-<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/8397/Capture%20du%202014-08-20%2022:11:31.png" style="border-style: solid; border-width: 1px; height: 114px; width: 365px;"></p>
-
-<p>والصفحة الثانية تشبهه هذه بعد الضغط علي link:</p>
-
-<p><img alt="Screenshot of the 2nd page of the 2 pages example in the browser" src="https://mdn.mozillademos.org/files/8401/Capture%20du%202014-08-20%2022:15:17.png" style="border-style: solid; border-width: 1px; height: 116px; width: 366px;"></p>
-
-<div class="note">
-<p><textarea></textarea></p>
-
-<p><textarea>Note: The link back to page 1 is violet because the browser "knows" that we've previously visited the first page.</textarea></p>
-
-<p><textarea></textarea></p>
-
-<p>113/5000</p>
-
-<p>ملاحظة: يعتبر الارتباط مرة أخرى إلى الصفحة رقم 1 هو البنفسجي لأن المتصفح "يعلم" بأننا سبق أن زرنا الصفحة الأولى.</p>
-
-<p> </p>
-</div>
-
-<p> </p>
-
-<p>إذا أردت ، يمكنك تجربة ذلك بأكثر من صفحتين ، أو المتابعة إلى القسم التالي للانتقال إلى المستوى التالي.</p>
-
-<p>الربط بموقع آخر<br>
- في هذا التمرين ، سنقوم بإضافة ارتباط إلى ملف HTML بحيث يمكن للقارئ الوصول بسرعة إلى بعض الصفحات المفيدة على الويب. يمكنك الربط بأي شيء متوفر على الويب العام. دعونا نحاول ربط ويكيبيديا:</p>
-
-<p> </p>
-
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-  &lt;title&gt;My page&lt;/title&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  One day,...Unicorns are great...See you.
-  &lt;a href="https://en.wikipedia.org/wiki/Unicorn" title="Unicorn page on Wikipedia"&gt;<span>Want to go know more about unicorns? Wikipedia is right here</span>&lt;/a&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p>يجب أن يبدو هذا أكثر أو أقل مثل هذا في المتصفح:</p>
-
-<p><img alt="Screenshot of the example page with a link to Wikipedia in the browser" src="https://mdn.mozillademos.org/files/8403/Capture%20du%202014-08-20%2022:22:24.png" style="height: 158px; width: 861px;"></p>
-
-<p>قم بتحريك مؤشر الماوس فوق الرابط ؛ سترى السمة {{htmlattrxref ("title")}} المعروضة في تلميح أداة تحويم. يمكن استخدام هذا لتوفير مزيد من المعلومات حول الارتباط ، بحيث يمكن للمستخدم اتخاذ قرار مستنير حول ما إذا كان سيتم النقر عليه أم لا.</p>
-
-<div class="note">
-<p><strong>تذكير: عندما تقوم بتحرير الصفحة ، لا تنس حفظ الملف على المحرر وتحديث الصفحة على متصفحك حتى تتمكن من رؤية التغييرات التي قمت بها.</strong></p>
-</div>
-
-<h2 id="الخطوات_التالية_كيفية_استخدام_علامات_HTML_هناك_الكثير_من_العلامات_في_HTML_؛_لقد_نظرنا_فقط_في_الأساسيات_هنا!_ستجد_المزيد_من_الموارد_حول_ما_هو_ممكن_هنا._تشريح_صفحة_الويب_تحتوي_HTML_على_بعض_القواعد_وقد_تحتوي_الصفحة_على_الكثير_من_المحتوى_؛_يمكن_أن_يساعدك_ذلك_في_فهم_صفحات_أكثر_تعقيدًا_،_مثل_تلك_المستخدمة_في_بعض_المواقع_الأكثر_شيوعًا_على_الويب!_فهم_الروابط_استخدمنا_بعض_الأمثلة_البسيطة_جدًا_مع_الروابط_؛_هذه_المقالة_لك_إذا_كنت_تريد_أن_تعرف_فهم_لماذا_الروابط_هي_أصل_اسم_ويب._يفيد_استخدام_الصور_وإضافة_الصوت_والفيديو_لإضافة_محتوى_متعدد_الوسائط_باستخدام_HTML_بسيط.">الخطوات التالية<br>
- كيفية استخدام علامات HTML: هناك الكثير من العلامات في HTML ؛ لقد نظرنا فقط في الأساسيات هنا! ستجد المزيد من الموارد حول ما هو ممكن هنا.<br>
- تشريح صفحة الويب: تحتوي HTML على بعض القواعد وقد تحتوي الصفحة على الكثير من المحتوى ؛ يمكن أن يساعدك ذلك في فهم صفحات أكثر تعقيدًا ، مثل تلك المستخدمة في بعض المواقع الأكثر شيوعًا على الويب!<br>
- فهم الروابط: استخدمنا بعض الأمثلة البسيطة جدًا مع الروابط ؛ هذه المقالة لك إذا كنت تريد أن تعرف فهم لماذا "الروابط" هي أصل اسم "ويب".<br>
- يفيد استخدام الصور وإضافة الصوت والفيديو لإضافة محتوى متعدد الوسائط باستخدام HTML بسيط.</h2>