initial commit

8 files changed, 2071 insertions, 0 deletions

diff --git a/files/ar/learn/html/forms/index.html b/files/ar/learn/html/forms/index.html
new file mode 100644
index 0000000000..3c8f449476
--- /dev/null
+++ b/files/ar/learn/html/forms/index.html
@@ -0,0 +1,114 @@
+---
+title: نماذج HTML
+slug: Learn/HTML/Forms
+tags:
+  - Beginner
+  - Featured
+  - Forms
+  - Guide
+  - HTML
+  - Landing
+  - Learn
+  - NeedsTranslation
+  - TopicStub
+  - Web
+translation_of: Learn/Forms
+---
+<div style="direction: rtl;">{{LearnSidebar}}</div>
+
+<p class="summary" style="direction: rtl;">توفر هذه الوحدة سلسلة من المقالات التي ستساعدك على إتقان نماذج HTML. تعد نماذج HTML أداة قوية جدًا للتفاعل مع المستخدمين ؛ ومع ذلك ، لأسباب تاريخية وتقنية ، ليس من الواضح دائمًا كيفية استخدامها بكامل طاقتها. في هذا الدليل ، سنغطي جميع جوانب نماذج HTML ، من البنية إلى التصميم ، من معالجة البيانات إلى الأدوات المخصصة.</p>
+
+<h2 id="المتطلبات_الأساسية" style="direction: rtl;">المتطلبات الأساسية</h2>
+
+<p style="direction: rtl;">قبل البدء في هذه الوحدة ، يجب أن تعمل على الأقل من خلال <a href="/ar/docs/Learn/HTML/Introduction_to_HTML">مقدمة إلى HTML</a>. في هذه المرحلة ، يجب أن تجد {{anch ("Basic Guides")}} سهل الفهم ، كما يمكنك الاستفادة من دليل <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Basic_native_form_controls">أدوات النماذج الأصلية</a>.</p>
+
+<p style="direction: rtl;">ومع ذلك ، تعد بقية الوحدة أكثر تقدمًا - فمن السهل وضع أدوات النموذج على صفحة ، ولكن لا يمكنك فعل الكثير معها دون استخدام بعض ميزات النموذج المتقدمة و CSS و JavaScript. لذلك ، قبل إلقاء نظرة على الأقسام الأخرى ، نوصيك بالابتعاد وتعلم بعض <a href="/ar/docs/Learn/CSS">CSS</a> و <a href="/ar/docs/Web/JavaScript/About_JavaScript">JavaScript</a> أولاً.</p>
+
+<div class="note">
+<p style="direction: rtl;"><strong>ملاحظة: إذا كنت تعمل على جهاز كمبيوتر / جهاز لوحي / جهاز آخر حيث لا يمكنك إنشاء ملفاتك الخاصة ، فيمكنك تجربة (معظم) أمثلة التعليمات البرمجية في برنامج تشفير عبر الإنترنت مثل <a href="http://jsbin.com/">JSBin</a> أو <a href="https://glitch.com/">Glitch</a>.</strong></p>
+</div>
+
+<h2 id="أدلة_أساسية" style="direction: rtl;">أدلة أساسية</h2>
+
+
+
+<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Your_first_form">أول نموذج HTML خاص بك </a></strong></div>
+
+<div style="direction: rtl;"><span style="">تقدم المقالة الأولى في سلسلتنا تجربتك الأولى في إنشاء نموذج HTML ، بما في ذلك تصميم نموذج بسيط وتنفيذه باستخدام عناصر HTML الصحيحة وإضافة بعض الأنماط البسيطة جدًا عبر CSS وكيفية إرسال البيانات إلى الخادم.</span></div>
+
+<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/How_to_structure_a_web_form">كيفية بناء نموذج HTML</a></strong></div>
+
+<div style="direction: rtl;"><span style="">مع استبعاد الأساسيات ، ننظر الآن بمزيد من التفصيل في العناصر المستخدمة لتوفير البنية والمعنى للأجزاء المختلفة من النموذج.</span></div>
+
+<h2 id="ما_هو_شكل_الحاجيات_المتاحة؟" style="direction: rtl;">ما هو شكل الحاجيات المتاحة؟</h2>
+
+
+
+<div style="direction: rtl;"><strong><span style="">حاجيات النموذج الأصلي</span></strong></div>
+
+<div style="direction: rtl;"><span style="">نحن الآن نلقي نظرة على وظائف أدوات النماذج المختلفة بالتفصيل ، وننظر في الخيارات المتاحة لجمع أنواع مختلفة من البيانات.</span></div>
+
+<h2 id="التحقق_من_صحة_بيانات_النموذج_وإرسالها" style="direction: rtl;">التحقق من صحة بيانات النموذج وإرسالها</h2>
+
+
+
+<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">إرسال بيانات النموذج</a></strong></div>
+
+<div style="direction: rtl;"><span style="">تتناول هذه المقالة ما يحدث عندما يرسل المستخدم نموذجًا - إلى أين تذهب البيانات ، وكيف نتعامل معها عندما تصل إلى هناك؟ نحن ننظر أيضًا في بعض المخاوف الأمنية المرتبطة بإرسال بيانات النموذج.</span></div>
+
+<div style="direction: rtl;"></div>
+
+<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">التحقق من صحة بيانات النموذج</a></strong></div>
+
+<div style="direction: rtl;"><span style="">لا يعد إرسال البيانات كافيًا - نحتاج أيضًا إلى التأكد من أن البيانات التي يملأها المستخدمون في النماذج بالتنسيق الصحيح الذي نحتاجه لمعالجتها بنجاح ، وأن ذلك لن يفسد تطبيقاتنا. نريد أيضًا مساعدة مستخدمينا على ملء نماذجنا بشكل صحيح وعدم الشعور بالإحباط عند محاولة استخدام تطبيقاتنا. يساعدنا التحقق من صحة النموذج في تحقيق هذه الأهداف - تخبرك هذه المقالة بما تحتاج إلى معرفته.</span></div>
+
+<h2 id="أدلة_متقدمة" style="direction: rtl;">أدلة متقدمة</h2>
+
+
+
+<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">كيفية بناء الحاجيات النموذجية المخصصة</a></strong></div>
+
+<div style="direction: rtl;"><span style="">ستصادف بعض الحالات التي لا توفر فيها أدوات النموذج الأصلية ما تحتاجه ، على سبيل المثال بسبب التصميم أو الوظيفة. في مثل هذه الحالات ، قد تحتاج إلى إنشاء عنصر واجهة مستخدم للنموذج من HTML خام. تشرح هذه المقالة كيفية القيام بذلك والاعتبارات التي يجب أن تكون على دراية بها عند القيام بذلك ، مع دراسة حالة عملية.</span></div>
+
+<div style="direction: rtl;"></div>
+
+<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript">إرسال النماذج من خلال JavaScript</a></strong></div>
+
+<div style="direction: rtl;"><span style="">تبحث هذه المقالة في طرق استخدام نموذج لتجميع طلب HTTP وإرساله عبر JavaScript مخصص ، بدلاً من إرسال النموذج القياسي. يبحث أيضًا في سبب رغبتك في القيام بذلك ، والآثار المترتبة على القيام بذلك. (راجع أيضًا استخدام كائنات <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects">FormData</a>.)</span></div>
+
+<div style="direction: rtl;"></div>
+
+<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls">نماذج HTML في المتصفحات القديمة</a></strong></div>
+
+<div style="direction: rtl;"><span style="">اكتشاف ميزة تغطية المقالة ، وما إلى ذلك ، يجب إعادة توجيه هذا إلى وحدة اختبار عبر المتصفح ، حيث تتم تغطية نفس الأشياء بشكل أفضل هناك.</span></div>
+
+<h2 id="أدلة_تصميم_النموذج" style="direction: rtl;">أدلة تصميم النموذج</h2>
+
+
+
+<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms">تصميم نماذج HTML</a></strong></div>
+
+<div style="direction: rtl;"><span style="">توفر هذه المقالة مقدمة لنماذج التصميم باستخدام CSS ، بما في ذلك جميع الأساسيات التي قد تحتاج إلى معرفتها لمهام التصميم الأساسية.</span></div>
+
+<div style="direction: rtl;"></div>
+
+<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling">التصميم المتقدم لنماذج HTML</a></strong></div>
+
+<div style="direction: rtl;"><span style="">هنا نلقي نظرة على بعض تقنيات تصميم النماذج الأكثر تقدمًا والتي يجب استخدامها عند محاولة التعامل مع بعض العناصر الأكثر صعوبة في التصميم.</span></div>
+
+<div style="direction: rtl;"></div>
+
+<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/UI_pseudo-classes">جدول توافق الخاصية لعناصر واجهة المستخدم للنموذج</a></strong></div>
+
+<div style="direction: rtl;"><span style="">توفر هذه المقالة الأخيرة مرجعًا مفيدًا يسمح لك بالبحث عن خصائص CSS المتوافقة مع عناصر النموذج.</span></div>
+
+<div style="direction: rtl;"></div>
+
+<div style="direction: rtl;"><a href="https://developer.mozilla.org/en-US/Learn/HTML/Introduction_to_HTML">مقدمة إلى HTML </a>| <a href="https://developer.mozilla.org/en-US/Learn/HTML">تعلم HTML </a>| <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5">HTML5 </a>| <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML">دليل المطور </a>| <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">مرجع العنصر </a>| <a href="https://orientdetectors.com/ar/" rel="noopener">المرجع</a></div>
+
+<h2 id="إقرأ_أيضا" style="direction: rtl;">إقرأ أيضا</h2>
+
+<ul>
+ <li style="direction: rtl;"><a href="/en-US/docs/Web/HTML/Element#Forms">مرجع عنصر نماذج HTML</a></li>
+ <li style="direction: rtl;"><a href="/en-US/docs/Web/HTML/Element/input">مرجع أنواع &lt;input&gt; HTML</a></li>
+</ul>
diff --git a/files/ar/learn/html/index.html b/files/ar/learn/html/index.html
new file mode 100644
index 0000000000..c9a9e88aa2
--- /dev/null
+++ b/files/ar/learn/html/index.html
@@ -0,0 +1,60 @@
+---
+title: 'تعلم HTML: أدلة ودروس'
+slug: Learn/HTML
+tags:
+  - Beginner
+  - CodingScripting
+  - HTML
+  - NeedsContent
+  - NeedsTranslation
+  - TopicStub
+translation_of: Learn/HTML
+---
+<p> </p>
+
+<p><font><font><font>لبناء المواقع، يجب أن نعرف عن {{معجم ( 'HTML')}} - التكنولوجيا الأساسية المستخدمة لتحديد هيكل صفحة ويب. </font></font></font><font><font>يستخدم HTML لتحديد ما إذا كان ينبغي الاعتراف محتوى الويب الخاص بك كفقرة، القائمة، العنوان، وصلة، صورة، لاعب الوسائط المتعددة، شكل، أو واحد من العديد من العناصر الأخرى المتاحة أو حتى عنصر الجديد الذي قمت بتحديده.</font></font></p>
+
+<h2 id="مسار_التعلم"><font><font>مسار التعلم</font></font></h2>
+
+<p><font><font>من الناحية المثالية يجب أن تبدأ رحلة التعلم عن طريق تعلم HTML. ابدأ القراءة </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction"><font><font>مقدمة إلى HTML</font></font></a><font><font> . ثم تستطيع الانتقال إلى تعلم حول مواضيع أكثر تقدما مثل:</font></font></p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS"><font><font><font>CSS</font></font></font></a><font><font><font> ، وكيفية استخدامه لHTML أسلوب (على سبيل المثال تغيير حجم النص والخطوط المستخدمة، إضافة الحدود والظلال، تخطيط صفحتك مع عدة أعمدة، إضافة الرسوم المتحركة والتأثيرات البصرية الأخرى.)</font></font></font></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript"><font><font><font>جافا سكريبت</font></font></font></a><font><font><font> ، وكيفية استخدامها لإضافة وظائف حيوية على صفحات الويب (على سبيل المثال العثور على موقعك ورسم على الخريطة، جعل تظهر عناصر واجهة المستخدم / تختفي عند تبديل زر، حفظ بيانات المستخدمين محليا على أجهزة الكمبيوتر الخاصة بهم، والكثير أكثر بكثير.)</font></font></font></li>
+</ul>
+
+<p><font><font>قبل البدء في هذا الموضوع، يجب أن يكون لديك معرفة أساسية على الأقل مع استخدام أجهزة الكمبيوتر، واستخدام شبكة الإنترنت بشكل سلبي (أي مجرد النظر اليها، واستهلاك المحتوى). </font></font><font><font><font>يجب ان تكون بيئة العمل الأساسية اقامة النحو المفصل في</font></font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software"><font><font><font>تثبيت البرامج الأساسية</font></font></font></a><font><font><font> ، وفهم كيفية إنشاء وإدارة الملفات، كما هو مفصل في </font></font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files"><font><font><font>التعامل مع الملفات</font></font></font></a><font><font><font> - على حد سواء هي جزء من لدينا </font></font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web"><font><font><font>الشروع في العمل مع شبكة الإنترنت</font></font></font></a><font><font><font> وحدة مبتدئا كاملة ل.</font></font></font></p>
+
+<p><font><font>فمن المستحسن أن تعمل من خلال </font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web"><font><font>الشروع في العمل مع شبكة الإنترنت</font></font></a><font><font> قبل محاولة هذا الموضوع، ومع ذلك فإنه ليس من الضروري على الاطلاق. كثيرا ما تتم تغطيتها في </font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics"><font><font>أساسيات HTML</font></font></a><font><font> تغطي المادة أيضا فيما لدينا </font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML"><font><font>مقدمة إلى HTML</font></font></a><font><font> وحدة، وإن كان ذلك في مزيد من التفاصيل الكثير.</font></font></p>
+
+<h2 id="وحدات"><font><font>وحدات</font></font></h2>
+
+<p><font><font>هذا الموضوع يحتوي على الوحدات التالية، في الترتيب المقترح للعمل من خلالها. يجب عليك بالتأكيد تبدأ مع أول واحد.</font></font></p>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML"><font><font>مقدمة إلى HTML</font></font></a></dt>
+ <dd><font><font>هذه الوحدة يمهد الطريق، والحصول على استخدمته لمفاهيم هامة وتركيب، والنظر في تطبيق HTML إلى النص، وكيفية إنشاء ارتباطات تشعبية، وكيفية استخدام HTML لهيكلة صفحة ويب.</font></font></dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding"><font><font>الوسائط المتعددة وتضمينها</font></font></a></dt>
+ <dd><font><font>هذه الوحدة يستكشف كيفية استخدام HTML لتشمل الوسائط المتعددة في صفحات الويب الخاصة بك، بما في ذلك الطرق المختلفة التي يمكن أن تكون الصور المدرجة، وكيفية تضمين الفيديو والصوت، وحتى صفحات الويب الأخرى كلها.</font></font></dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables"><font><font>جداول HTML</font></font></a></dt>
+ <dd><font><font>يمكن أن تمثل جداول البيانات على صفحة ويب في ومفهومة {{معجم ( "الوصول"، "الوصول")}} الطريقة يكون تحديا. هذه الوحدة تغطي العلامات الجدول الأساسية، جنبا إلى جنب مع ميزات أكثر تعقيدا مثل تنفيذ التسميات وملخصات.</font></font></dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms"><font><font>نماذج HTML</font></font></a></dt>
+ <dd><font><font>أشكال هي جزء مهم جدا من الشبكة - هذه توفر الكثير من الوظائف التي تحتاج إليها للتفاعل مع المواقع على شبكة الإنترنت، على سبيل المثال تسجيل وتسجيل الدخول، وإرسال ردود الفعل، وشراء المنتجات، وأكثر من ذلك. هذه الوحدة التي يحصل لك مع خلق الأجزاء العميل من الأشكال.</font></font></dd>
+</dl>
+
+<h2 id="حل_المشاكل_المشتركة_HTML"><font><font>حل المشاكل المشتركة HTML</font></font></h2>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto"><font><font>استخدام HTML لحل المشاكل المشتركة</font></font></a><font><font> يوفر روابط لأقسام المحتوى شرح كيفية استخدام HTML لحل مشاكل شائعة جدا عند إنشاء صفحة ويب: التعامل مع العناوين، وإضافة الصور ومقاطع الفيديو، مؤكدا المحتوى، وخلق شكل أساسي، الخ</font></font></p>
+
+<h2 id="أنظر_أيضا"><font><font>أنظر أيضا</font></font></h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML"><font><font>HTML (لغة توصيف النص التشعبي)</font></font></a><font><font> على MDN</font></font></dt>
+ <dd><font><font>نقطة الدخول الرئيسية للثائق HTML على MDN، بما في ذلك عنصر مفصلة والسمة المراجع - إذا كنت تريد أن تعرف ما سمات عنصر ديه أو ما تقدر سمة لها، على سبيل المثال، وهذا هو مكان عظيم للبدء.</font></font></dd>
+</dl>
+
+<p> </p>
+
+<p> </p>
+
+<div id="eJOY__extension_root" style=""> </div>
diff --git a/files/ar/learn/html/introduction_to_html/getting_started/index.html b/files/ar/learn/html/introduction_to_html/getting_started/index.html
new file mode 100644
index 0000000000..35213057e3
--- /dev/null
+++ b/files/ar/learn/html/introduction_to_html/getting_started/index.html
@@ -0,0 +1,760 @@
+---
+title: ابدء مع HTML
+slug: Learn/HTML/Introduction_to_HTML/Getting_started
+translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary" dir="rtl">في هذه المقالة سنغطي أساسيات لغة ترميز النص الفائق (HTML). سنقوم بتوفير تعريف للعناصر، السمات، وجميع المصطلحات الأخرى التي قد تكون قد سمعتها من قبل، ومتى يتم استخدامها في اللغة. سنقوم أيضاً بشرح كيف يتم كتابة العنصر في اللغة، وكيف يتم تنظيم وثيقة لغة ترميز النص الفائق، وسنشرح الميزات الأساسية الأخرى في اللغة. على طول الشرح، سنقوم باستخدام بعض الأمثلة، لنخلق نوعاً من الإثارة!</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th dir="rtl" scope="row">المتطلبات:</th>
+   <td dir="rtl">أساسيات استخدام الحاسوب، <a href="https://developer.mozilla.org/ar/docs/Learn/Getting_started_with_the_web/%D8%AA%D8%AB%D8%A8%D9%8A%D8%AA_%D8%A7%D9%84%D8%A8%D8%B1%D9%85%D8%AC%D9%8A%D8%A7%D8%AA_%D8%A7%D9%84%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A%D8%A9">البرمجيات الأساسية مثبتة</a>، <a href="https://developer.mozilla.org/ar/docs/Learn/Getting_started_with_the_web/%D8%A7%D9%84%D8%AA%D8%B9%D8%A7%D9%85%D9%84_%D9%85%D8%B9_%D8%A7%D9%84%D9%85%D9%84%D9%81%D8%A7%D8%AA">معرفة أساسية حول التعامل</a> <a href="https://developer.mozilla.org/ar/docs/Learn/Getting_started_with_the_web/%D8%A7%D9%84%D8%AA%D8%B9%D8%A7%D9%85%D9%84_%D9%85%D8%B9_%D8%A7%D9%84%D9%85%D9%84%D9%81%D8%A7%D8%AA">مع الملفات</a>.</td>
+  </tr>
+  <tr>
+   <th dir="rtl" scope="row">الهدف:</th>
+   <td dir="rtl">الحصول على معرفة مبدئية باللغة، والحصول على بعض التدريبات لكتابة بعض العناصر في اللغة.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 dir="rtl" id="ما_هي_HTML؟">ما هي HTML؟</h2>
+
+<p dir="rtl">لغة ترميز النص الفائق ليس لغة برمجة؛ وإنما <em>لغة ترميزيّة</em> (markup language) تُستخدم لإخبار المتصفح بكيفيّة تنظيم صفحات الويب التي تزورها. يُمكن أن تكون هذه اللغة معقدة أو بسيطة كما يرغبها أن تكون مطور الويب. تتألف هذه اللغة من مجموعة من العناصر، والتي تحيط أو <em>تُرَمِز</em> أجزاء من المحتوى لتجعلها تظهر أو تتصرف بطريقة معينة. الوسوم المغلقة يُمكن أن تحوِّل جزء من النص إلى رابط يشير لموقع آخر، أو يمكن أن تجعل الكلمات مائلة، وهلم جرا. على سبيل المثال، انظر للسطر التالي:</p>
+
+<pre dir="rtl">قطتي شديدة الجمال</pre>
+
+<p dir="rtl">إذا أردنا جعل هذا النص فقرة، يمكننا القيام بهذا عن طريق توصيفه على أنه فقرة عن طريق إحاطته بعنصر الفقرة ({{htmlelement("p")}}):</p>
+
+<pre class="brush: html">&lt;p&gt;قطتي شديدة الجمال&lt;/p&gt;</pre>
+
+<div class="note">
+<p dir="rtl"><strong>ملاحظة</strong>: عناصر لغة ترميز النص الفائق غير حساسة لحالة الحرف، أي يُمكِن كتابتها باستخدام حروف صغيرة أو كبيرة. على سبيل المثال يمكن كتابة العنصر {{htmlelement("title")}} بالشكل <code>&lt;title&gt;</code>، أو <code>&lt;TITLE&gt;</code>، أو <code>&lt;Title&gt;</code>، أو <code>&lt;TiTlE&gt;</code>، إلخ. جميع تلك الأشكال ستعمل بدون مشاكل. الأفضل هو كتابة جميع العنصار بحروف صغيرة لأسباب تنسيقيّة، ومقروئيّة، وغيرها من الأسباب الأخرى.</p>
+</div>
+
+<h2 dir="rtl" id="تشريح_عنصر_لغة_ترميز_النص_الفائق">تشريح عنصر لغة ترميز النص الفائق</h2>
+
+<p dir="rtl">دعنا نستكشف عنصر الفقرة ذاك أكثر قليلاً:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15908/beautiful-cat.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>
+
+<p dir="rtl">الأجزاء الرئيسية من عنصرنا هي:</p>
+
+<ol dir="rtl">
+ <li><strong>وسم الفتح</strong> (أو وسم البداية أو الوسم الإفتتاحي): يتألف من اسم العنصر (في حالتنا <code>p</code>)، محاطاً بقوس مفتوح وآخر مُغلَق. هذا المكوِّن يحدد بداية العنصر، أو بداية تأثيره (في حالتنا يحدد أين تبدأ الفقرة).</li>
+ <li><strong>وسم الإغلاق</strong> (أو وسم النهاية أو الوسم الختامي): مشابه لوسم البداية، ماعدا أنه يتضمن شرطة مائلة (/) قبل اسم العنصر. هذا المكوِّن يحدد نهاية (في حالتنا نهاية الفقرة). يُعَد نسيان وضع وسم الإغلاق أحد الأخطاء الشائعة التي يقع بها المبتدئون والتي تؤدي إلى مشاكل تنظيميّة في الصفحة (خروج النص من مكان مثلاً).</li>
+ <li><strong>المحتوى</strong>: هذا المكوِّن يمثل محتوى الذي يُرمِزُهُ العنصر، والذي هو في حالتنا النص.</li>
+ <li><strong>العنصر</strong>: يتألف من وسم البداية، ووسم الإغلاق، والمحتوى (جميع المحتويات السابقة).</li>
+</ol>
+
+<h3 dir="rtl" id="التعلم_النشط_إنشاء_أول_عنصر_لك_في_لغة_ترميز_النص_الفائق">التعلم النشط: إنشاء أول عنصر لك في لغة ترميز النص الفائق</h3>
+
+<p dir="rtl">قم بتعديل السطر أدناه في منطقة <em>الإدخال</em> عن طريق إحاطته باستخدام الوسمين <code>&lt;em&gt;</code> و <code>&lt;/em&gt;</code> (ضع <code>&lt;em&gt;</code> قبله <em>لفتح العنصر</em>، و <code>&lt;/em&gt;</code> بعده <em>لإغلاق العنصر</em>)، هذا ينبغي أن يحوِّل النص إلى مائل. يمكنك رؤية التغييرات في منطقة <em>الخرج</em>.</p>
+
+<p dir="rtl">إذا قمت بخطأ ما، فيمكنك دائماً تصفير (إعادتها إلى ما كانت عليه) الشيفرة باستخدام زر <em>التصفير</em>. إذا كنت عالقاً بشكل كامل، فيمكنك الضغط على <em>زر عرض الحل</em> لرؤية الجواب.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"&gt;
+  This is my text.
+&lt;/textarea&gt;
+
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Show solution" /&gt;
+&lt;/div&gt;
+</pre>
+
+<p> </p>
+
+<pre class="brush: css">html {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}
+</pre>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;em&gt;This is my text.&lt;/em&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+
+<p> </p>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 dir="rtl" id="العناصر_المتداخلة">العناصر المتداخلة</h3>
+
+<p dir="rtl">يمكنك وضع عنصر بداخل عنصر أخر أيضاً، وهذا ما يدعى <strong>بالتداخل</strong> (nesting). إذا أردنا تحديد أن قطتنا جميلة <strong>جداً</strong>، يمكننا إحاطة الكلمة "جداً" بالعنصر <a class="new" href="https://developer.mozilla.org/ar/docs/Web/HTML/Element/strong" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>&lt;strong&gt;</code></a>، الذي يدل على تأكيد الكلمة بشدّة:</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;قطتي جميلة</span></span> <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>strong</span><span class="punctuation token">&gt;جداً</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>strong</span><span class="punctuation token">&gt;</span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p dir="rtl">عليك أن تتأكد من أن عناصرك متداخلة بشكل صحيح. في المثال أعلاه قمنا بفتح العنصر <a class="new" href="https://developer.mozilla.org/ar/docs/Web/HTML/Element/p" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>&lt;p&gt;</code></a> أولاً، وبعده العنصر <a class="new" href="https://developer.mozilla.org/ar/docs/Web/HTML/Element/strong" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>&lt;strong&gt;</code></a>، وبالتالي علينا إغلاق العنصر <a class="new" href="https://developer.mozilla.org/ar/docs/Web/HTML/Element/strong" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>&lt;strong&gt;</code></a> ويليه الآخر. فالشكل التالي ليس صحيحاً:</p>
+
+<pre class="example-bad brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;قطتي جميلة</span></span> <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>strong</span><span class="punctuation token">&gt;جداً</span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>strong</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p dir="rtl">على العناصر أن تُفتَح وتُغلَق بشكل صحيح ليكونوا بشكل واضح داخل أو خارج بعضهما البعض. فإذا تشابكوا بشكل خاطئ كما في الأعلى، سيقوم مُتصفحك بمحاولة القيام بأفضل تخمين حيال ما تحاول القيام به، والذي قد يؤدي إلى نتائج تنسيقيّة خاطئة. لذلك لا تقم بهذا!</p>
+
+<h3 dir="rtl" id="العناصر_المستحوذة_والمُضمَنِة">العناصر المستحوذة والمُضمَنِة</h3>
+
+<p dir="rtl">يوجد تصنيفين مهمين للعناصر في لغة الترميز النص الفائق، والذين ينبغي عليك معرفتهم، وهم العناصر المستحوذة (أو الكتلية block elements) والعناصر المُضمَنِة (inline elements).</p>
+
+<ul dir="rtl">
+ <li>ستظهر العناصر الكتلية (Block-level elements) الموجودة في كتلة ظاهرة في الصفحة في سطر جديد مهما كان المحتوى الذي قبلها، وأي محتوى سيأتي بعدها سيظهر أيضاً في سطر جديد. تميل العناصر الكتلية إلى أن تكون عناصر هيكلية للصفحة التي تُمثلُها، فعلى سبيل المثال، الفقرات، والقوائم، وقوائم الملاحة (Navigation Menus)، والذيول (Footers)، إلخ. لا تتداخل العنصر الكتلي بداخل عنصر مضمن، ولكن قد يتداخل بداخل عنصر كتلي آخر.</li>
+ <li>العناصر المضمنة هي تلك العناصر لتي تُحتوى بداخل العناصر الكتلية وتحيط بأجزاء صغيرة فقط من محتوى الوثيقة، وليس فقرات كاملة أو مجموعات من المحتويات. العنصر المضمن لا يُنشئ سطر جديد ليظهر في الوثيقة، فيمكن أن يظهر بشكل طبيعي بجانب فقرة، على سبيل المثال العنصر {{htmlelement("a")}} (رابط تشعيبي) أو العناصر التوكيدية مثل {{htmlelement("em")}} أو {{htmlelement("strong")}}.</li>
+</ul>
+
+<p dir="rtl">خذ المثال التالي:</p>
+
+<pre class="brush: html">&lt;em&gt;first&lt;/em&gt;&lt;em&gt;second&lt;/em&gt;&lt;em&gt;third&lt;/em&gt;
+
+&lt;p&gt;fourth&lt;/p&gt;&lt;p&gt;fifth&lt;/p&gt;&lt;p&gt;sixth&lt;/p&gt;
+</pre>
+
+<p dir="rtl">العنصر {{htmlelement("em")}} هو عنصر مضمن، لذلك كما ترى أدناه، العناصر الثلاثة الأولى تتوضع بنفس السطر بدون وجود مسافات بينها. من الناحية الأخرى، العنصر {{htmlelement("p")}} هو عنصر كتلي، لذلك كل عنصر يظهر على سطر جديد، بمسافات سفلية وعلوية بين كل واحد (تخضع المسافات <a href="/ar/docs/Learn/CSS/Introduction_to_CSS">لتنسيق لغة صفحات الطرز المتراصة</a> الإفتراضي الذي يفرضه على الفقرات).</p>
+
+<p>{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p dir="rtl"><strong>ملاحظة</strong>: لغة ترميز النص الفائق الإصدار الخامس أعادت تعريف تصنيفات العناصر: انظر إلى <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">تصنيفات محتوى العناصر</a>. في حين أن هذه التعريفات أكثر دقة وأقل غموضاً من السابقة، إلاّ أنهم أكثر تعقيداً من ناحية الفهم، لذلك سنكمل باستخدام التعريفات القديمة في هذا الموضوع</p>
+</div>
+
+<div class="note">
+<p dir="rtl"><strong>ملاحظة</strong>: المصطلحات "كتلي" و "ضمني" المستخدمة في هذا الموضوع، لا ينبغي أن يشوشوك مع المصطلحات المستخدمة في مقالة <a href="/ar/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">أنواع صناديق لغة صفحات الطرز المتراصة</a> التي تحمل نفس الاسم. في حين أنهم مرتبطين إفتراضياً، إلا أن تغيير نوع العرض في صفحات الطرز المتراصة لا يغير تصنيف العنصر ولا يؤثر على العناصر التي تحتوي وعلى ولا على العناصر التي سيتم إحتواءها. أحد الأسباب التي جعلت لغة ترميز النص الفائق الإصدار الخامس تتخلى عن هذه المصطلحات هي لمنع هذا الارتباك.</p>
+</div>
+
+<div class="note">
+<p dir="rtl"><strong>ملاحظة</strong>: يمكنك إيجاد صفحات مرجعية مفيدة تتضمن قوائم تحوي العناصر الكتلية والمضمنة، انظر إلى <a href="/ar/docs/Web/HTML/Block-level_elements">العناصر الكتلية</a> و <a href="/ar/docs/Web/HTML/Inline_elements">العناصر المضمنة</a>.</p>
+</div>
+
+<h3 dir="rtl" id="العناصر_الفارغة">العناصر الفارغة</h3>
+
+<p dir="rtl">لا تتبع جميع العناصر النمط المشروح أعلاه، والذي هو عبارة عن وضع وسم الفتح، وبعده المحتوى، وبعده وسم الإغلاق. فبعض العناصر تتألف من وسم مُفرَد، والذي يستخدم عادةً لإدخال/تضمين شيء في الوثيقة. على سبيل المثال، يُضمِن العنصر {{htmlelement("img")}} صورة في الصفحة في الموضع الذي عُرِفَ فيه:</p>
+
+<pre class="brush: html">&lt;img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"&gt;</pre>
+
+<p dir="rtl">ينبغي أن يُخرِج ذلك السطر الشكل التالي في صفحتك:</p>
+
+<p>{{ EmbedLiveSample('Empty_elements', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p dir="rtl"><strong>ملاحظة</strong>: تسمى العناصر الفارغة أحياناً <em>بالعناصر الخاوية</em> (void elements).</p>
+</div>
+
+<h2 dir="rtl" id="السمات">السمات</h2>
+
+<p dir="rtl">يمكن للعناصر أيضاً أنت تحتوي على سمات، والتي تبدو كشيء من هذا القبيل:</p>
+
+<p><img alt='&amp;amp;amp;lt;p class="editor-note">قطتي شديدة الجمال&amp;amp;amp;lt;/p>' src="https://mdn.mozillademos.org/files/15909/beautiful-cat-attribute.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>
+
+<p dir="rtl">تحتوي السمات على معلومات إضافية حول العنصر والتي لا تريد أن تظهرها في المحتوي الفعلي. في حالتنا تسمح لك السمة <code>class</code> أن تعطي العنصر مُعرِف والذي يمكن استخدامه لاحقاً للإشارة للعنصر وإعطائه تنسيق معين وأشياء أخرى.</p>
+
+<p dir="rtl">السمة يجب أن تملك دائماً:</p>
+
+<ol dir="rtl">
+ <li>مسافة بينها وبين اسم العنصر (أو السمة التي تسبقها، إذا كان العنصر يملك بالفعل سمةً أو أكثر).</li>
+ <li>اسم السمة، متبوعاً بإشارة يساوي.</li>
+ <li>علامتي تنصيص تحيط بقيمة السمة.</li>
+</ol>
+
+<h3 dir="rtl" id="التعلم_النشط_إضافة_سمات_إلى_عنصر">التعلم النشط: إضافة سمات إلى عنصر</h3>
+
+<p dir="rtl">يمكننا أخذ العنصر {{htmlelement("a")}} كمثال آخر. يعد الحرف "a" إختصاراً لكلمة "مرساة (anchor)"، يحول هذا العنصر النص الذي يحيط به إلى رابط تشعبي. يُمكن أن يأخذ هذا العنصر عدداً من السمات، منها:</p>
+
+<ul dir="rtl">
+ <li>السمة <code>href</code>: تحدد قيمة هذه السمة عنوان الويب الذي يشير إليه الرابط؛ لينتقل إلى المتصفح عند الضغط عليه. على سبيل المثال، <code>href="https://www.mozilla.org/"</code>.</li>
+ <li>السمة <code>title</code>: تحدد قيمة هذه السمة معلومات إضافية حول الرابط، مثل ما هي الصفحة التي يشير إليها هذا الرابط. على سبيل المثال، يمكننا وضع القيمة: <code>title="The Mozilla homepage"</code>. سيظهر هذا النص كتلميح عند التحويم على الرابط.</li>
+ <li>السمة <code>target</code>: تحدد هذه السمة سياق التصفح الذي سيفتح به الرابط. فعلى سبيل المثال، القيمة <code>target="_blank"</code> ستعرض الرابط (الموقع الذي يشير إلى الرابط) في نافذة جديدة. إذا أردت عرض الرابط في الصحة الحالية، فلا تستخدم هذه السمة وحسب.</li>
+</ul>
+
+<p dir="rtl">قم بتعديل السطر أدناه في منطقة <em>الإدخال</em> لتحويله إلى رابط يشير لموقعك المفضل. أولاً، أضف العنصر <code>&lt;a&gt;</code>. ثانياً، أضف السمتين <code>href</code> و <code>title</code>. وأخيراً، عَرِف السمة <code>target</code> لفتح الرابط في نافذة جديدة. ستكون قادراً على رؤية التغييرات بشكل حي في منطقة <em>الإخراج</em>. ينبغي أن ترى أنه عند التحويم على الرابط سيُعرض محتوى السمة <code>title</code>، وعند الضغط عليه سيتم الإنتقال إلى عنوان الويب الموجود في السمة <code>href</code>. تذكر أنه ينبغي عليك وضع مسافة بين اسم العنصر وكل سمة يملكها.</p>
+
+<p dir="rtl">إذا قمت بخطأ ما، فيمكنك دائماً تصفير (إعادت الشيفرة إلى ما كانت عليه) الشيفرة باستخدام زر <em>التصفير</em>. إذا كنت عالقاً بشكل كامل، فيمكنك الضغط على <em>زر عرض الحل</em> لرؤية الجواب.</p>
+
+<div class="hidden">
+<h6 id="Playable_code2">Playable code2</h6>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px;width: 95%"&gt;
+  &amp;lt;p&amp;gt;A link to my favourite website.&amp;lt;/p&amp;gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+<p> </p>
+
+<p> </p>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;p&gt;A link to my &lt;a href="https://www.mozilla.org/" title="The Mozilla homepage" target="_blank"&gt;favourite website&lt;/a&gt;.&lt;/p&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+
+<p> </p>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 dir="rtl" id="السمات_البوليانية_(المنطقية)">السمات البوليانية (المنطقية)</h3>
+
+<p dir="rtl">سترى أحياناً سمات تُكتَب من دون قيمة. تدعى هذه السمات بالسمات المنطقية، ويمكن أن تأخذ هذه السمات قيمة واحدة، والتي هي عادةً اسم السمة نفسها. على سبيل المثال، السمة {{htmlattrxref("disabled", "input")}}، والتي يُمكن أن تُسندها لعناصر الإدخال إذا أردت تعطيلها حتى لا يستطيع المستخدم إدخال أية بيانات فيها.</p>
+
+<pre>&lt;input type="text" disabled="disabled"&gt;</pre>
+
+<p dir="rtl">كاختصار، يمكنك كتابة السمة أيضاً بالشكل التالي (قمنا أيضاً بإضافة عنصر إدخال غير مُعطَل لتوضيح الفكرة أكثر):</p>
+
+<pre class="brush: html">&lt;input type="text" disabled&gt;
+
+&lt;input type="text"&gt;
+</pre>
+
+<p dir="rtl">المثالين سيعطيانك نفس النتيجة:</p>
+
+<p>{{ EmbedLiveSample('Boolean_attributes', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 dir="rtl" id="حذف_علامات_الإقتباس_من_حول_قيم_السمات">حذف علامات الإقتباس من حول قيم السمات</h3>
+
+<p>When you look around the World Wide Web, you'll come across all kind of strange markup styles, including attribute values without quotes. This is allowable in certain circumstances, but will break your markup in others. For example, if we revisit our link example from earlier, we could write a basic version with only the <code>href</code> attribute, like this:</p>
+
+<pre>&lt;a href=<code>https://www.mozilla.org/</code>&gt;favourite website&lt;/a&gt;</pre>
+
+<p>However, as soon as we add the <code>title</code> attribute in this style, things will go wrong:</p>
+
+<pre class="brush: html">&lt;a href=<code>https://www.mozilla.org/</code> title=The Mozilla homepage&gt;favourite website&lt;/a&gt;</pre>
+
+<p>At this point the browser will misinterpret your markup, thinking that the <code>title</code> attribute is actually three attributes — a title attribute with the value "The", and two boolean attributes, <code>Mozilla</code> and <code>homepage</code>. This is obviously not what was intended, and will cause errors or unexpected behavior in the code, as seen in the live example below. Try hovering over the link to see what the title text is!</p>
+
+<p>{{ EmbedLiveSample('Omitting_quotes_around_attribute_values', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>Our advice is to always include the attribute quotes — it avoids such problems, and results in more readable code too.</p>
+
+<h3 dir="rtl" id="هل_استخدم_علامة_تنصيص_مزدوجة_أم_مفردة؟">هل استخدم علامة تنصيص مزدوجة أم مفردة؟</h3>
+
+<p>In this article you'll notice that the attributes are all wrapped in double quotes. You might however see single quotes in some people's HTML. This is purely a matter of style, and you can feel free to choose which one you prefer. Both the following lines are equivalent:</p>
+
+<pre class="brush: html">&lt;a href="http://www.example.com"&gt;A link to my example.&lt;/a&gt;
+
+&lt;a href='http://www.example.com'&gt;A link to my example.&lt;/a&gt;</pre>
+
+<p>You should however make sure you don't mix them together. The following will go wrong!</p>
+
+<pre class="brush: html">&lt;a href="http://www.example.com'&gt;A link to my example.&lt;/a&gt;</pre>
+
+<p>If you've used one type of quote in your HTML, you can include the other type of quote without causing any problems:</p>
+
+<pre class="brush: html">&lt;a href="http://www.example.com" title="Isn't this fun?"&gt;A link to my example.&lt;/a&gt;</pre>
+
+<p>However if you want to include a quote within the quotes where both the quotes are of the same type(single quote or double quote), you'll have to <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Entity_references_Including_special_characters_in_HTML">use HTML entities</a> for the quotes.</p>
+
+<h2 dir="rtl" id="تشريح_وثيقة_لغة_ترميز_النص_الفائق">تشريح وثيقة لغة ترميز النص الفائق</h2>
+
+<p>That wraps up the basics of individual HTML elements, but they aren't very useful on their own. Now we'll look at how individual elements are combined to form an entire HTML page:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;My test page&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;This is my page&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Here we have:</p>
+
+<ol>
+ <li><code>&lt;!DOCTYPE html&gt;</code>: The doctype. In the mists of time, when HTML was young (about 1991/2), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. They used to look something like this:
+
+  <pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</pre>
+  However, these days no one really cares about them, and they are really just a historical artifact that needs to be included for everything to work right. <code>&lt;!DOCTYPE html&gt;</code> is the shortest string of characters that counts as a valid doctype; that's all you really need to know.</li>
+ <li><code>&lt;html&gt;&lt;/html&gt;</code>: The {{htmlelement("html")}} element. This element wraps all the content on the entire page, and is sometimes known as the root element.</li>
+ <li><code>&lt;head&gt;&lt;/head&gt;</code>: The {{htmlelement("head")}} element. This element acts as a container for all the stuff you want to include on the HTML page that <em>isn't</em> the content you are showing to your page's viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more. You'll learn more about this in the next article in the series.</li>
+ <li><code>&lt;meta charset="utf-8"&gt;</code>: This element sets the character set your document should use to UTF-8, which includes most characters from the vast majority of human written languages. Essentially it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later.</li>
+ <li><code>&lt;title&gt;&lt;/title&gt;</code>: The {{htmlelement("title")}} element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in, and is used to describe the page when you bookmark/favorite it.</li>
+ <li><code>&lt;body&gt;&lt;/body&gt;</code>: The {{htmlelement("body")}} element. This contains <em>all</em> the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else.</li>
+</ol>
+
+<h3 dir="rtl" id="التعلم_النشط_إضافة_بعض_الميزات_لوثيقة_ترميز_النص_الفائق">التعلم النشط: إضافة بعض الميزات لوثيقة ترميز النص الفائق</h3>
+
+<p>If you want to experiment with writing some HTML on your local computer, you can:</p>
+
+<ol>
+ <li>Copy the HTML page example listed above.</li>
+ <li>Create a new file in your text editor.</li>
+ <li>Paste the code into the new text file.</li>
+ <li>Save the file as <code>index.html</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: You can also find this basic HTML template on the <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN Learning Area Github repo</a>.</p>
+</div>
+
+<p>You can now open this file in a web browser to see what the rendered code looks like, and then edit the code and refresh the browser to see what the result is. Initially it will look like this:</p>
+
+<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">So in this exercise, you can edit the code locally on your computer, as outlined above, or you can edit it in the editable sample window below (the editable sample window represents just the contents of the {{htmlelement("body")}} element, in this case.) We'd like you to have a go at implementing the following steps:</p>
+
+<ul>
+ <li>Just below the opening tag of the {{htmlelement("body")}} element, add a main title for the document. This should be wrapped inside an <code>&lt;h1&gt;</code> opening tag and <code>&lt;/h1&gt;</code> closing tag.</li>
+ <li>Edit the paragraph content to include some text about something you are interested in.</li>
+ <li>Make any important words stand out in bold by wrapping them inside a <code>&lt;strong&gt;</code> opening tag and <code>&lt;/strong&gt;</code> closing tag</li>
+ <li>Add a link to your paragraph, as <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element">explained earlier in the article</a>.</li>
+ <li>Add an image to your document, below the paragraph, as <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements">explained earlier in the article</a>. You'll get bonus points if you manage to link to a different image (either locally on your computer, or somewhere else on the web.)</li>
+</ul>
+
+<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see the answer.</p>
+
+<div class="hidden">
+<h6 id="Playable_code3">Playable code3</h6>
+
+<p> </p>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px;width: 95%"&gt;
+  &amp;lt;p&amp;gt;This is my page&amp;lt;/p&amp;gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+img {
+  max-width: 100%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;p&gt;I really enjoy &lt;strong&gt;playing the drums&lt;/strong&gt;. One of my favourite drummers is Neal Peart, who\ plays in the band &lt;a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article"&gt;Rush&lt;/a&gt;.\ My favourite Rush album is currently &lt;a href="http://www.deezer.com/album/942295"&gt;Moving Pictures&lt;/a&gt;.&lt;/p&gt;\ &lt;img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg"&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+
+<p> </p>
+
+<p> </p>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 dir="rtl" id="المساحات_الفارغة_في_لغة_ترميز_النص_الفائق">المساحات الفارغة في لغة ترميز النص الفائق</h3>
+
+<p>In the above examples you may have noticed that a lot of whitespace is included in the code listings — this is not necessary at all; the two following code snippets are equivalent:</p>
+
+<pre class="brush: html">&lt;p&gt;Dogs are silly.&lt;/p&gt;
+
+&lt;p&gt;Dogs        are
+         silly.&lt;/p&gt;</pre>
+
+<p>No matter how much whitespace you use (which can include space characters, but also line breaks), the HTML parser reduces each one down to a single space when rendering the code. So why use so much whitespace? The answer is readability — it is so much easier to understand what is going on in your code if you have it nicely formatted, and not just bunched up together in a big mess. In our HTML we've got each nested element indented by two spaces more than the one it is sitting inside. It is up to you what style of formatting you use (how many spaces for each level of indentation, for example), but you should consider formatting it.</p>
+
+<h2 id="Entity_references_Including_special_characters_in_HTML">Entity references: Including special characters in HTML</h2>
+
+<p>In HTML, the characters <code>&lt;</code>, <code>&gt;</code>,<code>"</code>,<code>'</code> and <code>&amp;</code> are special characters. They are parts of the HTML syntax itself, so how do you include one of these characters in your text, for example if you really want to use an ampersand or less than sign, and not have it interpreted as code as some browsers may do?</p>
+
+<p>We have to use character references — special codes that represent characters, and can be used in these exact circumstances. Each character reference is started with an ampersand (&amp;), and ended by a semicolon (;).</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Literal character</th>
+   <th scope="col">Character reference equivalent</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>&lt;</td>
+   <td>&amp;lt;</td>
+  </tr>
+  <tr>
+   <td>&gt;</td>
+   <td>&amp;gt;</td>
+  </tr>
+  <tr>
+   <td>"</td>
+   <td>&amp;quot;</td>
+  </tr>
+  <tr>
+   <td>'</td>
+   <td>&amp;apos;</td>
+  </tr>
+  <tr>
+   <td>&amp;</td>
+   <td>&amp;amp;</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>In the below example, you can see two paragraphs, which are talking about web technologies:</p>
+
+<pre class="brush: html">&lt;p&gt;In HTML, you define a paragraph using the &lt;p&gt; element.&lt;/p&gt;
+
+&lt;p&gt;In HTML, you define a paragraph using the &amp;lt;p&amp;gt; element.&lt;/p&gt;</pre>
+
+<p>In the live output below, you can see that the first paragraph has gone wrong, because the browser thinks that the second instance of <code>&lt;p&gt;</code> is starting a new paragraph. The second paragraph looks fine, because we have replaced the angle brackets with character references.</p>
+
+<p>{{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: A chart of all the available HTML character entity references can be found on Wikipedia: <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">List of XML and HTML character entity references</a>.</p>
+</div>
+
+<h2 dir="rtl" id="التعليقات_في_لغة_ترميز_النص_الفائق">التعليقات في لغة ترميز النص الفائق</h2>
+
+<p>In HTML, as with most programming languages, there is a mechanism available to write comments in the code — comments are ignored by the browser and invisible to the user, and their purpose is to allow you to include comments in the code to say how your code works, what the different parts of the code do, etc. This can be very useful if you return to a code base that you've not worked on for six months, and can't remember what you did — or if you hand your code over to someone else to work on.</p>
+
+<p>To turn a section of content inside your HTML file into a comment, you need to wrap it in the special markers <code>&lt;!--</code> and <code>--&gt;</code>, for example:</p>
+
+<pre class="brush: html">&lt;p&gt;I'm not inside a comment&lt;/p&gt;
+
+&lt;!-- &lt;p&gt;I am!&lt;/p&gt; --&gt;</pre>
+
+<p>As you can see below, the first paragraph appears in the live output, but the second one doesn't.</p>
+
+<p>{{ EmbedLiveSample('HTML_comments', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 dir="rtl" id="الملخص">الملخص</h2>
+
+<p>You've reached the end of the article — we hope you enjoyed your tour of the very basics of HTML! At this point you should understand what the language looks like, how it works at a basic level, and be able to write a few elements and attributes. This is a perfect place to be right now, as in subsequent articles in the module we will go into some of the things you have already looked at in a lot more detail, and introduce some new features of the language. Stay tuned!</p>
+
+<div class="note">
+<p><strong>Note</strong>: At this point, as you start to learn more about HTML, you might also want to start to explore the basics of Cascading Style Sheets, or <a href="/en-US/docs/Learn/CSS">CSS</a>. CSS is the language you use to style your web pages (whether e.g. changing the font or colors, or altering the page layout). HTML and CSS go very well together, as you'll soon discover.</p>
+</div>
+
+<h2 dir="rtl" id="انظر_أيضاً">انظر أيضاً</h2>
+
+<ul dir="rtl">
+ <li>
+  <p><a href="/ar/docs/Web/HTML/Applying_color">إضافة لون إلى عناصر لغة ترميز النص الفائق باستخدام صفحات الطرز المتراصة.</a></p>
+ </li>
+</ul>
+
+<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>
diff --git a/files/ar/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/ar/learn/html/introduction_to_html/html_text_fundamentals/index.html
new file mode 100644
index 0000000000..fba39b360c
--- /dev/null
+++ b/files/ar/learn/html/introduction_to_html/html_text_fundamentals/index.html
@@ -0,0 +1,657 @@
+---
+title: أساسيات النصوص في لغة ترميز النص الفائق
+slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
+tags:
+  - العنونة
+  - الفقرات
+  - النصوص
+  - دليل
+  - مبدئين
+  - مقدمة إلى لغة ترميز النص الفائق
+translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary" dir="rtl">أحد الأهداف الرئيسية للغة ترميز النص الفائق هي هيكلة النصوص وإعطائها هدف ووظيفة (كما تُعرف هذه الوظيفة ب {{glossary("semantics")}}) حتّى يتمكن المتصفح بعرض النصوص بطريقة مناسبة. تشرح هذه المقالة الطريقة التي يُمكن استخدام هذه اللغة لهيكلة صفحة تتكون من نصوص، عن طريق إضافة عناوين وفقرات، ومؤكدات على الكلمات (حروف غامقة ومائلة، على سبيل المثال)، وإنشاء قوائم، وغيرها.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th dir="rtl" scope="row">المتطلبات:</th>
+   <td dir="rtl">معرف بسيطة بلغة ترميز النص الفائقة، كما هو مشروح في <a href="/ar/docs/Learn/HTML/Introduction_to_HTML/Getting_started">مقالة البدء مع اللغة</a>.</td>
+  </tr>
+  <tr>
+   <th dir="rtl" scope="row">الهدف:</th>
+   <td dir="rtl">تعلم كيفية ترميز صفحة بسيطة مؤلفة من نصوص لإعطائها هيكلية ووظيفة.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 dir="rtl" id="الأساسيات_العناوين_والفقرات">الأساسيات: العناوين والفقرات</h2>
+
+<p dir="rtl">تتألف معظم النصوص المُنظمة من عناوين وفقرات، بغض النظر عما إذا كنت تقرأ قصة، أو جريدة، أو كتاب جامعي، أو مجلة ... إلخ.</p>
+
+<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0px auto;" title="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs."></p>
+
+<p dir="rtl">بحيث يجعل المحتوى المنظم القراءة أكثر سهولة ومتعة.</p>
+
+<p dir="rtl">في لغة ترميز النص الفائق، تحاط الفقرات بالعنصر {{htmlelement("p")}}، كالتالي:</p>
+
+<pre class="brush: html">&lt;p&gt;I am a paragraph, oh yes I am.&lt;/p&gt;</pre>
+
+<p dir="rtl">وتحاط العناوين بوسوم العنونة المخصصة:</p>
+
+<pre class="brush: html">&lt;h1&gt;I am the title of the story.&lt;/h1&gt;</pre>
+
+<p dir="rtl">يوجد ست عناوين متدرجة المستويات، وهي {{htmlelement("h1")}}، و {{htmlelement("h2")}}، و {{htmlelement("h3")}}، و {{htmlelement("h4")}}، و {{htmlelement("h5")}}، و {{htmlelement("h6")}}. يمثل الوسم <code>&lt;h1&gt;</code> العنوان الرئيسي، بينما يمثل الوسم <code>&lt;h2&gt;</code> عنوان فرعي، والوسم <code>&lt;h3&gt;</code> عنوان فرعي للعنوان الفرعي الأول، وهكذا.</p>
+
+<h3 dir="rtl" id="تنفيذ_التسلسل_الهيكلي">تنفيذ التسلسل الهيكلي</h3>
+
+<p dir="rtl">على سبيل المثال، في قصة ما، سيمثل الوسم <code>&lt;h1&gt;</code> عنوان القصة، والوسم <code>&lt;h2&gt;</code> سيمثل عنوان كل فصل، بينما سيمثل الوسم <code>&lt;h3&gt;</code> القسم الفرعي لكل فصل،وهلم جرا.</p>
+
+<pre class="brush: html">&lt;h1&gt;The Crushing Bore&lt;/h1&gt;
+
+&lt;p&gt;By Chris Mills&lt;/p&gt;
+
+&lt;h2&gt;Chapter 1: The dark night&lt;/h2&gt;
+
+&lt;p&gt;It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...&lt;/p&gt;
+
+&lt;h2&gt;Chapter 2: The eternal silence&lt;/h2&gt;
+
+&lt;p&gt;Our protagonist could not so much as a whisper out of the shadowy figure ...&lt;/p&gt;
+
+&lt;h3&gt;The specter speaks&lt;/h3&gt;
+
+&lt;p&gt;Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"&lt;/p&gt;</pre>
+
+<p dir="rtl">فتحديد وظيفة بعض العناصر يعود لك، طالما أنك تستخدم تسلسل منطقي. ولكنك تحتاج إلى أن تضع بالإعتبار بعض الأمور عندما تقوم بتنظيم محتوى مشابه:</p>
+
+<ul dir="rtl">
+ <li>من الأفضل أن تستخدم والوسم <code>&lt;h1&gt;</code> مرة واحدة في كل صفحة، حيث يعد يمثل هذا الوسم أعلى مستويات العنونة، وبقية العناوين تتوضع أسفله بشكل تسلسلي.</li>
+ <li>تأكد أنك تستخدم العناوين بترتيبها التسلسلي الصحيح. أي لا تستخدم الوسم <code>&lt;h3&gt;</code> لتمثيل عنوان فرعي، وتستخدم بعده الوسم <code>&lt;h2&gt;</code> لتمثيل عنوان فرعي من درجة ثانية، فهذا لا يبدو منطقياً، كما يؤدي إلى نتائج غريبة!</li>
+ <li>من الست درجات عنونة المتاحة، حاول ألاَّ تستخدم أكثر من ثلاثة في كل صفحة، مالم يكن هذا ضرورياً.<span id="result_box" lang="ar"><span> حيث أنَّ المستندات ذات المستويات المتعددة (أي تسلسل هرمي عميق) تصبح غير عملية وصعبة التنقل.</span> <span>في مثل هذه الحالات، من المستحسن نشر المحتوى على صفحات متعددة إذا كان ذلك ممكناً.</span></span></li>
+</ul>
+
+<h3 dir="rtl" id="لماذا_نحتاج_الهيكلة_(التنظيم)؟">لماذا نحتاج الهيكلة (التنظيم)؟</h3>
+
+<p dir="rtl">للإجابة على هذا السؤال، دعنا نأخذ على الملف <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a>، يعتبر هذا الملف نقطة البداية لمثالنا في هذه المقالة (وهي وصفحة حمص جميلة). يجب عليك حفظ نسخة من هذا الملف على جهازك، فستحتاجه في تمارين لاحقة. تحتوي جسم الوثيقة على عدة أجزاء من المحتوى، وهي غير مُرمَزِة بأي شكل، ولكنهم مفصولين بسطور.</p>
+
+<p dir="rtl">بكل الأحوال، عندما ستفتح هذه الوثيقة في متصفحك، سترى أنَّ النص سيظهر كقطعة كبيرة!</p>
+
+<p><img alt="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it." src="https://mdn.mozillademos.org/files/14827/Screen%20Shot%202017-03-29%20at%2009.20.35.png" style="display: block; height: 377px; margin: 0px auto; width: 600px;" title="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it."></p>
+
+<p dir="rtl">يرجع هذا لعدم وجود عناصر لتنظم المحتوى، ولذلك لم يتمكن المتصفح بمعرفة أي جزء هو عنوان وأي جزء هو فقرة. المزيد:</p>
+
+<ul dir="rtl">
+ <li>يميل المستخدمون لتصفح صفحات الويب بسرعة شديدة لإيجاد محتوى متعلق، فغالباً ما يقومون بقراءة العناوين كبداية (<a href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">المستخدمون عادةً ما يقضون وقت قصير جداً في صفحة الويب</a>). فإذا لم يجدوا شيء مفيد خلال بضعة ثواني، فسوف يشعرون بالملل ويقومون بالذهاب إلى مكان آخر.</li>
+ <li><span id="result_box" lang="ar"><span>تعتبر محركات البحث التي تفهرس محتويات صفحتك العناوين كلمات رئيسية مهمة التأثير على ترتيب الصفحة عند البحث.</span> <span>وبدون العناوين، ستؤدي صفحتك بشكل سيء من حيث </span></span>{{glossary("SEO")}}<span lang="ar"><span> (تحسين محركات البحث).</span></span></li>
+ <li>غالباً لا يقوم المعاق بصرياً بقراءة صفحات الويب، حيث يقوم بالإستماع لها بدلاً من ذلك. يتم ذلك باستخدم برمجية تسمى بقارئ الشاشة. توفر هذه البرمجية طرق للوصول السريع للنص المُعطى. فمن بين العديد من الأساليب المستخدمة، توفر هذه البرمجية طريقة للحصول على خلاصة المستند من خلال قراءة العناوين، مما يسمح للمستخدمين بالحصول على المعلومات التي يريدونها بسرعة. فإذا كانت العناوين غير متوفرة، سيضطر هؤلاء للسماع للمستند بأكمله.</li>
+ <li dir="ltr">To style content with {{glossary("CSS")}}, or make it do interesting things with {{glossary("JavaScript")}}, you need to have elements wrapping the relevant content, so CSS/JavaScript can effectively target it.</li>
+</ul>
+
+<p>We therefore need to give our content structural markup.</p>
+
+<h3 id="Active_learning_Giving_our_content_structure">Active learning: Giving our content structure</h3>
+
+<p>Let's jump straight in with a live example. In the example below, add elements to the raw text in the <em>Input</em> field so that it appears as a heading and two paragraphs in the <em>Output</em> field.</p>
+
+<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get stuck, press the <em>Show solution</em> button to see the answer.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;My short story
+
+I am a policewoman and my name is Trish.
+
+My legs are made of cardboard and I am married to a fish.&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Show solution" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">body {
+  font-family: 'Open Sans Light', Helvetica, Arial, sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 8em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+textarea.value = '&lt;h1&gt;My short story&lt;/h1&gt;\n&lt;p&gt;I am a policewoman and my name is Trish.&lt;/p&gt;\n&lt;p&gt;My legs are made of cardboard and I am married to a fish.&lt;/p&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p>
+
+<h3 id="Why_do_we_need_semantics">Why do we need semantics?</h3>
+
+<p>Semantics are relied on everywhere around us — we rely on previous experience to tell us what the function of everyday objects is; when we see something, we know what its function will be. So, for example, we expect a red traffic light to mean "stop", and a green traffic light to mean "go". Things can get tricky very quickly if the wrong semantics are applied (do any countries use red to mean "go"? I hope not.)</p>
+
+<p>In a similar vein, we need to make sure we are using the correct elements, giving our content the correct meaning, function, or appearance. In this context the {{htmlelement("h1")}} element is also a semantic element, which gives the text it wraps around the role (or meaning) of "a top level heading on your page."</p>
+
+<pre class="brush: html">&lt;h1&gt;This is a top level heading&lt;/h1&gt;</pre>
+
+<p>By default, the browser will give it a large font size to make it look like a heading (although you could style it to look like anything you wanted using CSS). More importantly, its semantic value will be used in multiple ways, for example by search engines and screen readers (as mentioned above.)</p>
+
+<p>On the other hand, you could make any element <em>look</em> like a top level heading. Consider the following:</p>
+
+<pre class="brush: html">&lt;span style="font-size: 32px; margin: 21px 0;"&gt;Is this a top level heading?&lt;/span&gt;</pre>
+
+<p>This is a {{htmlelement("span")}} element. It has no semantics. You use it to wrap content when you want to apply CSS to it (or do something to it with JavaScript) without giving it any extra meaning (You'll find out more about these later on in the course.) We've applied some CSS to it to make it look like a top level heading, but since it has no semantic value, it will not get any of the extra benefits described above. It is a good idea to use the relevant HTML element for the job.</p>
+
+<h2 id="Lists">Lists</h2>
+
+<p>Now let's turn our attention to lists. Lists are everywhere in life — from your shopping list to the list of directions you subconsciously follow to get to your house every day, to the lists of instructions you are following in these tutorials! Lists are everywhere on the Web too, and we've got three different types to worry about.</p>
+
+<h3 id="Unordered">Unordered</h3>
+
+<p>Unordered lists are used to mark up lists of items for which the order of the items doesn't matter — let's take a shopping list as an example.</p>
+
+<pre>milk
+eggs
+bread
+hummus</pre>
+
+<p>Every unordered list starts off with a {{htmlelement("ul")}} element — this wraps around all the list items:</p>
+
+<pre class="brush: html">&lt;ul&gt;
+milk
+eggs
+bread
+hummus
+&lt;/ul&gt;</pre>
+
+<p>The last step is to wrap each list item in a {{htmlelement("li")}} (list item) element:</p>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;milk&lt;/li&gt;
+  &lt;li&gt;eggs&lt;/li&gt;
+  &lt;li&gt;bread&lt;/li&gt;
+  &lt;li&gt;hummus&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="Active_learning_Marking_up_an_unordered_list">Active learning: Marking up an unordered list</h4>
+
+<p>Try editing the live sample below to create your very own HTML unordered list.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;milk
+eggs
+bread
+hummus&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Show solution" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">body {
+  font-family: 'Open Sans Light', Helvetica, Arial, sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 6em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+textarea.value = '&lt;ul&gt;\n&lt;li&gt;milk&lt;/li&gt;\n&lt;li&gt;eggs&lt;/li&gt;\n&lt;li&gt;bread&lt;/li&gt;\n&lt;li&gt;hummus&lt;/li&gt;\n&lt;/ul&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', 700, 400) }}</p>
+
+<h3 id="Ordered">Ordered</h3>
+
+<p>Ordered lists are lists in which the order of the items <em>does</em> matter — let's take a set of directions as an example:</p>
+
+<pre>Drive to the end of the road
+Turn right
+Go straight across the first two roundabouts
+Turn left at the third roundabout
+The school is on your right, 300 meters up the road</pre>
+
+<p>The markup structure is the same as for unordered lists, except that you have to wrap the list items in an {{htmlelement("ol")}} element, rather than <code>&lt;ul&gt;</code>:</p>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Drive to the end of the road&lt;/li&gt;
+  &lt;li&gt;Turn right&lt;/li&gt;
+  &lt;li&gt;Go straight across the first two roundabouts&lt;/li&gt;
+  &lt;li&gt;Turn left at the third roundabout&lt;/li&gt;
+  &lt;li&gt;The school is on your right, 300 meters up the road&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="Active_learning_Marking_up_an_ordered_list">Active learning: Marking up an ordered list</h4>
+
+<p>Try editing the live sample below to create your very own HTML ordered list.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_3">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;Drive to the end of the road
+Turn right
+Go straight across the first two roundabouts
+Turn left at the third roundabout
+The school is on your right, 300 meters up the road&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Show solution" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">body {
+  font-family: 'Open Sans Light', Helvetica, Arial, sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 8em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+textarea.value = '&lt;ol&gt;\n&lt;li&gt;Drive to the end of the road&lt;/li&gt;\n&lt;li&gt;Turn right&lt;/li&gt;\n&lt;li&gt;Go straight across the first two roundabouts&lt;/li&gt;\n&lt;li&gt;Turn left at the third roundabout&lt;/li&gt;\n&lt;li&gt;The school is on your right, 300 meters up the road&lt;/li&gt;\n&lt;/ol&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_3', 700, 500) }}</p>
+
+<h3 id="Active_learning_Marking_up_our_recipe_page">Active learning: Marking up our recipe page</h3>
+
+<p>So at this point in the article, you have all the information you need to mark up our recipe page example. You can choose to either save a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> starting file and do the work there, or do it in the editable example below. Doing it locally will probably be better, as then you'll get to save the work you are doing, whereas if you fill it in to the editable example, it will be lost the next time you open the page. Both have pros and cons.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_4">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;Quick hummus recipe
+
+    This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.
+
+    Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.
+
+    Ingredients
+
+    1 can (400g) of chick peas (garbanzo beans)
+    175g of tahini
+    6 sundried tomatoes
+    Half a red pepper
+    A pinch of cayenne pepper
+    1 clove of garlic
+    A dash of olive oil
+
+    Instructions
+
+    Remove the skin from the garlic, and chop coarsely
+    Remove all the seeds and stalk from the pepper, and chop coarsely
+    Add all the ingredients into a food processor
+    Process all the ingredients into a paste.
+    If you want a coarse "chunky" hummus, process it for a short time
+    If you want a smooth hummus, process it for a longer time
+
+    For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.
+
+    Storage
+
+    Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you've made it. If it starts to become fizzy, you should definitely discard it.
+
+    Hummus is suitable for freezing; you should thaw it and use it within a couple of months.&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Show solution" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">body {
+  font-family: 'Open Sans Light', Helvetica, Arial, sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 8em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+  textarea.value = '&lt;h1&gt;Quick hummous recipe&lt;/h1&gt;\n\n&lt;p&gt;This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.&lt;/p&gt;\n\n&lt;p&gt;Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.&lt;/p&gt;\n\n&lt;h2&gt;Ingredients&lt;/h2&gt;\n\n&lt;ul&gt;\n&lt;li&gt;1 can (400g) of chick peas (garbanzo beans)&lt;/li&gt;\n&lt;li&gt;175g of tahini&lt;/li&gt;\n&lt;li&gt;6 sundried tomatoes&lt;/li&gt;\n&lt;li&gt;Half a red pepper&lt;/li&gt;\n&lt;li&gt;A pinch of cayenne pepper&lt;/li&gt;\n&lt;li&gt;1 clove of garlic&lt;/li&gt;\n&lt;li&gt;A dash of olive oil&lt;/li&gt;\n&lt;/ul&gt;\n\n&lt;h2&gt;Instructions&lt;/h2&gt;\n\n&lt;ol&gt;\n&lt;li&gt;Remove the skin from the garlic, and chop coarsely.&lt;/li&gt;\n&lt;li&gt;Remove all the seeds and stalk from the pepper, and chop coarsely.&lt;/li&gt;\n&lt;li&gt;Add all the ingredients into a food processor.&lt;/li&gt;\n&lt;li&gt;Process all the ingredients into a paste.&lt;/li&gt;\n&lt;li&gt;If you want a coarse "chunky" hummus, process it for a short time.&lt;/li&gt;\n&lt;li&gt;If you want a smooth hummus, process it for a longer time.&lt;/li&gt;\n&lt;/ol&gt;\n\n&lt;p&gt;For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.&lt;/p&gt;\n\n&lt;h2&gt;Storage&lt;/h2&gt;\n\n&lt;p&gt;Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you\'ve made it. If it starts to become fizzy, you should definitely discard it.&lt;/p&gt;\n\n&lt;p&gt;Hummus is suitable for freezing; you should thaw it and use it within a couple of months.&lt;/p&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_4', 700, 500) }}</p>
+
+<p>If you get stuck, you can always press the <em>Show solution</em> button, or check out our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a> example on our github repo.</p>
+
+<h3 id="Nesting_lists">Nesting lists</h3>
+
+<p>It is perfectly ok to nest one list inside another one. You might want to have some sub-bullets sitting below a top level bullet. Let's take the second list from our recipe example:</p>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Remove the skin from the garlic, and chop coarsely.&lt;/li&gt;
+  &lt;li&gt;Remove all the seeds and stalk from the pepper, and chop coarsely.&lt;/li&gt;
+  &lt;li&gt;Add all the ingredients into a food processor.&lt;/li&gt;
+  &lt;li&gt;Process all the ingredients into a paste.&lt;/li&gt;
+  &lt;li&gt;If you want a coarse "chunky" hummus, process it for a short time.&lt;/li&gt;
+  &lt;li&gt;If you want a smooth hummus, process it for a longer time.&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<p>Since the last two bullets are very closely related to the one before them (they read like sub-instructions or choices that fit below that bullet), it might make sense to nest them inside their own unordered list, and put that list inside the current fourth bullet. This would look like so:</p>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Remove the skin from the garlic, and chop coarsely.&lt;/li&gt;
+  &lt;li&gt;Remove all the seeds and stalk from the pepper, and chop coarsely.&lt;/li&gt;
+  &lt;li&gt;Add all the ingredients into a food processor.&lt;/li&gt;
+  &lt;li&gt;Process all the ingredients into a paste.
+    &lt;ul&gt;
+      &lt;li&gt;If you want a coarse "chunky" hummus, process it for a short time.&lt;/li&gt;
+      &lt;li&gt;If you want a smooth hummus, process it for a longer time.&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<p>Try going back to the previous active learning example and updating the second list like this.</p>
+
+<h2 id="Emphasis_and_importance">Emphasis and importance</h2>
+
+<p>In human language, we often emphasise certain words to alter the meaning of a sentence, and we often want to mark certain words as important or different in some way. HTML provides various semantic elements to allow us to mark up textual content with such effects, and in this section, we'll look at a few of the most common ones.</p>
+
+<h3 id="Emphasis">Emphasis</h3>
+
+<p>When we want to add emphasis in spoken language, we <em>stress</em> certain words, subtly altering the meaning of what we are saying. Similarly, in written language we tend to stress words by putting them in italics. For example, the following two sentences have different meanings.</p>
+
+<p>I am glad you weren't late.</p>
+
+<p>I am <em>glad</em> you weren't <em>late</em>.</p>
+
+<p>The first sentence sounds genuinely relieved that the person wasn't late. In contrast, the second one sounds sarcastic or passive-aggressive, expressing annoyance that the person arrived a bit late.</p>
+
+<p>In HTML we use the {{htmlelement("em")}} (emphasis) element to mark up such instances. As well as making the document more interesting to read, these are recognised by screen readers and spoken out in a different tone of voice. Browsers style this as italic by default, but you shouldn't use this tag purely to get italic styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps an {{htmlelement("i")}} element (see below.)</p>
+
+<pre class="brush: html">&lt;p&gt;I am &lt;em&gt;glad&lt;/em&gt; you weren't &lt;em&gt;late&lt;/em&gt;.&lt;/p&gt;</pre>
+
+<h3 id="Strong_importance">Strong importance</h3>
+
+<p>To emphasize important words, we tend to stress them in spoken language and <strong>bold</strong> them in written language. For example:</p>
+
+<p>This liquid is <strong>highly toxic</strong>.</p>
+
+<p>I am counting on you. <strong>Do not</strong> be late!</p>
+
+<p>In HTML we use the {{htmlelement("strong")}} (strong importance) element to mark up such instances. As well as making the document more useful, again these are recognized by screen readers and spoken in a different tone of voice. Browsers style this as bold text by default, but you shouldn't use this tag purely to get bold styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps a {{htmlelement("b")}} element (see below.)</p>
+
+<pre class="brush: html">&lt;p&gt;This liquid is &lt;strong&gt;highly toxic&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;p&gt;I am counting on you. &lt;strong&gt;Do not&lt;/strong&gt; be late!&lt;/p&gt;</pre>
+
+<p>You can nest strong and emphasis inside one another if desired:</p>
+
+<pre class="brush: html">&lt;p&gt;This liquid is &lt;strong&gt;highly toxic&lt;/strong&gt; —
+if you drink it, &lt;strong&gt;you may &lt;em&gt;die&lt;/em&gt;&lt;/strong&gt;.&lt;/p&gt;</pre>
+
+<h3 id="Active_learning_Let's_be_important!">Active learning: Let's be important!</h3>
+
+<p>In this active learning section, we have provided an editable example. Inside it, we'd like you to try adding emphasis and strong importance to the words you think need them, just to have some practice.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_5">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;&lt;h1&gt;Important notice&lt;/h1&gt;
+
+&lt;p&gt;On Sunday January 9th 2010, a gang of goths were
+spotted stealing several garden gnomes from a shopping
+center in downtown Milwaukee. They were all wearing green
+jumpsuits and silly hats, and seemed to be having a whale
+of a time. If anyone has any information about this
+incident, please contact the police now.&lt;/p&gt;&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Show suggestion" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">body {
+  font-family: 'Open Sans Light', Helvetica, Arial, sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 8em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+  textarea.value = '&lt;h1&gt;Important notice&lt;/h1&gt;\n&lt;p&gt;On &lt;strong&gt;Sunday January 9th 2010&lt;/strong&gt;, a gang of &lt;em&gt;goths&lt;/em&gt; were spotted stealing &lt;strong&gt;&lt;em&gt;several&lt;/em&gt; garden gnomes&lt;/strong&gt; from a shopping center in downtown &lt;strong&gt;Milwaukee&lt;/strong&gt;. They were all wearing &lt;em&gt;green jumpsuits&lt;/em&gt; and &lt;em&gt;silly hats&lt;/em&gt;, and seemed to be having a whale of a time. If anyone has &lt;strong&gt;any&lt;/strong&gt; information about this incident, please contact the police &lt;strong&gt;now&lt;/strong&gt;.&lt;/p&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_5', 700, 500) }}</p>
+
+<h3 id="Italic_bold_underline...">Italic, bold, underline...</h3>
+
+<p>The elements we've discussed so far have clearcut associated semantics. The situation with {{htmlelement("b")}}, {{htmlelement("i")}}, and {{htmlelement("u")}} is somewhat more complicated. They came about so people could write bold, italics, or underlined text in an era when CSS was still supported poorly or not at all. Elements like this, which only affect presentation and not semantics, are known as <strong>presentational elements</strong> and should no longer be used, because as we've seen before, semantics is so important to accessibility, SEO, etc.</p>
+
+<p>HTML5 redefined <code>&lt;b&gt;</code>, <code>&lt;i&gt;</code> and <code>&lt;u&gt;</code> with new, somewhat confusing, semantic roles.</p>
+
+<p>Here's the best rule of thumb: it's likely appropriate to use <code>&lt;b&gt;</code>, <code>&lt;i&gt;</code>, or <code>&lt;u&gt;</code> to convey a meaning traditionally conveyed with bold, italics, or underline, provided there is no more suitable element. However, it always remains critical to keep an accessibility mindset. The concept of italics isn't very helpful to people using screen readers, or to people using a writing system other than the Latin alphabet.</p>
+
+<ul>
+ <li>{{HTMLElement('i')}} is used to convey a meaning traditionally conveyed by italic: Foreign words, taxonomic designation, technical terms, a thought...</li>
+ <li>{{HTMLElement('b')}} is used to convey a meaning traditionally conveyed by bold: Key words, product names, lead sentence...</li>
+ <li>{{HTMLElement('u')}} is used to convey a meaning traditionally conveyed by underline: Proper name, misspelling...</li>
+</ul>
+
+<div class="note">
+<p>A kind warning about underline: <strong>People strongly associate underlining with hyperlinks.</strong> Therefore, on the Web, it's best to underline only links. Use the <code>&lt;u&gt;</code> element when it's semantically appropriate, but consider using CSS to change the default underline to something more appropriate on the Web. The example below illustrates how it can be done.</p>
+</div>
+
+<pre class="brush: html">&lt;!-- scientific names --&gt;
+&lt;p&gt;
+  The Ruby-throated Hummingbird (&lt;i&gt;Archilochus colubris&lt;/i&gt;)
+  is the most common hummingbird in Eastern North America.
+&lt;/p&gt;
+
+&lt;!-- foreign words --&gt;
+&lt;p&gt;
+  The menu was a sea of exotic words like &lt;i lang="uk-latn"&gt;vatrushka&lt;/i&gt;,
+  &lt;i lang="id"&gt;nasi goreng&lt;/i&gt; and &lt;i lang="fr"&gt;soupe à l'oignon&lt;/i&gt;.
+&lt;/p&gt;
+
+&lt;!-- a known misspelling --&gt;
+&lt;p&gt;
+  Someday I'll learn how to &lt;u&gt;spel&lt;/u&gt; better.
+&lt;/p&gt;
+
+&lt;!-- Highlight keywords in a set of instructions --&gt;
+&lt;ol&gt;
+  &lt;li&gt;
+    &lt;b&gt;Slice&lt;/b&gt; two pieces of bread off the loaf.
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;b&gt;Insert&lt;/b&gt; a tomato slice and a leaf of
+    lettuce between the slices of bread.
+  &lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h2 id="Summary">Summary</h2>
+
+<p>That's it for now! This article should have given you a good idea of how to start marking up text in HTML, and introduced you to some of the most important elements in this area. There are a lot more semantic elements to cover in this area, and we'll look at a lot more in our 'More Semantic Elements' article, later on in the course. In the next article, we'll be looking in detail at how to <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">create hyperlinks</a>, possibly the most important element on the Web.</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/ar/learn/html/introduction_to_html/index.html b/files/ar/learn/html/introduction_to_html/index.html
new file mode 100644
index 0000000000..f237220f27
--- /dev/null
+++ b/files/ar/learn/html/introduction_to_html/index.html
@@ -0,0 +1,61 @@
+---
+title: مقدمة إلى HTML
+slug: Learn/HTML/Introduction_to_HTML
+tags:
+  - HTML
+  - صفحة هبوط
+  - لغة ترميز النص الفائق
+translation_of: Learn/HTML/Introduction_to_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary" dir="rtl">تعد لغة ترميز النص الفائق (HTML) لغة بسيطة جداً في صميمها، فهي مكوِّنة من عناصر يمكن تطبيقها على أجزاء من النص لإعطائها شكل أو وصف مختلف في الوثيقة (هل هذا النص فقرة؟ قائمة نقطية؟ هل هو جزء من جدول؟)، وتقوم بهيكلة الوثيقة إلى أقسام مُقسمة منطقياً (هل تملك تلك الصفحة رأس؟ ثلاث أعمدة من المحتوى؟ قائمة؟)، وتقوم بتضمين محتوى مثل الصور والفيديوهات في الصفحة. هذا القسم سوف يقدم لك أول وظيفتين سلف ذكرهما، كما سيغطي المفاهيم الأساسية والبنيّة الكتابيّة (syntax) التي تحتاج معرفتها لفهم اللغة.</p>
+
+<h2 dir="rtl" id="المتطلبات">المتطلبات</h2>
+
+<p dir="rtl">لا تحتاج لأي معرفة مسبقة في لغة ترميز النص الفائق للبدء في هذه الوحدة، ولكن يجب على الأقل أن تملك معرفة مبدئيّة حول استخدام الحواسيب، واستخدام متصفح الويب بشكل سلبي (بمعنى أخر، النظر إليه والتعامل مع المحتوى). يجب أن تملك بيئة عمل مُعدِة كما شُرِح في مقالة <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">تثبيت البرمجيات الأساسية</a>، ويجب أن يكون لديك معرفة بكيفيّة إنشاء وإدارة الملفات، كما شُرِح في مقالة <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">التعامل مع الملفات</a>. كلا المقالتين السابقتين جزء من وحدة <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">البدء مع الويب</a> المخصصة للمبتدئين.</p>
+
+<div class="note">
+<p dir="rtl"><strong>ملاحظة</strong>: إن كنت تعمل على حاسوب، جهاز لوحي، أو شيء آخر ولا تملك القدرة على إنشاء ملفات، يمكنك تجربة (معظم) الأمثلة هنا باستخدام محرر شيفرات برمجيّة على الأنترنت مثل <a href="http://jsbin.com/">JSBin</a> أو <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 dir="rtl" id="مقالات_تعليميّة">مقالات تعليميّة</h2>
+
+<p dir="rtl">تحتوي هذه الوحدة على المقالات التالية، والتي ستتكلم عن جميع المواضيع الأساسيّة في هذه اللغة وستعطيك فرصة لتختبر بعض المهارات.</p>
+
+<dl>
+ <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML/Getting_started">البدء مع لغة ترميز النص الفائق</a></dt>
+ <dd dir="rtl">تغطي هذه المقالة أساسيات لغة ترميز النص الفائق، لقد شرحنا هنا العناصر، السمات، وجميع المصطلحات المهمة الأخرى التي قد سمعت عنها، وقد قمنا بشرحها بطريقة ملائمة. لقد قمنا أيضاً بشرح كيفيّة هيكلة (إنشاء) عنصر في اللغة، وكيف يتم استخدام اللغة لهيكلة صفحة قياسيّة، وقمنا بشرح مزايا اللغة الأخرى الأساسيّة. سوف نستخدم أيضاً خلال الشرح بعض الأمثلة لنخلق بعضاً من الإثارة!</dd>
+ <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">ماذا يوجد في رأس الصفحة؟ البيانات الوصفية في لغة ترميز النص الفائق</a></dt>
+ <dd dir="rtl">رأس وثيقة لغة ترميز النص الفائق هو الجزء الذي <strong>لا</strong> يظهر في متصفح الويب عندما يتم تحميل الصفحة. يحتوي رأس الوثيقة على معلومات مثل عنوان الصفحة، وروابط ملفات صفحات الأنماط الانسيابية (إذا أردت أنْ تُنسِق محتوى وثيقتك باستخدام هذه اللغة)، وروابط لأيقونات المُفضلة (favicons)، والبيانات الوصفيّة (هي معلومات حول الوثيقة، مثل من كَتَبها، وكلمات مفتاحيّة مهمة تصفها).</dd>
+ <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">أساسيات النصوص في لغة ترميز النص الفائق</a></dt>
+ <dd dir="rtl">إحدى الوظائف الرئيسيّة للغة ترميز النص الفائق هي وصف النصوص (إعطائها معنىً ودلالة)؛ حتّى يستطيع المتصفح أن يعلم كيف سيعرضها بشكل صحيح. هذه المقالة تقوم بعرض كيف يمكنك استخدام هذه اللغة لتقطيع النص إلى هياكل من العناوين والفقرات، وتعليم الكلمات على أنَّها مهمة، وإنشاء قوائم، والكثير من الأمور الأخرى.</dd>
+ <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">إنشاء الوصلات</a></dt>
+ <dd dir="rtl">الوصلات مهمة جداً، فهي التي تجعل الويب ويباً. هذه المقالة تشرح طريقة إنشاء وصلات، وتناقش الطرق المثلى لاستخدامها.</dd>
+ <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">تنسيق النصوص بشكل متقدم</a></dt>
+ <dd dir="rtl">يوجد العديد من العناصر الأخرى في لغة ترميز النص الفائق لتنسيق النصوص، والتي لم نتكلم عنها في مقالة<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals"> أساسيات النصوص في لغة ترميز النص الفائق</a>. العناصر المشروحة في هذه المقالة قليل الاستخدام، ولكن من الجيد معرفتها. في هذه المقالة ستتعلم التعامل مع<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals"> </a>الاقتباسات، القوائم الوصفيّة، الشيفرات البرمجيّة، كتابة كلمات علويّة وسفليّة (مثل التربيع عندما يكتب على عدد بالشكل 2<sup>2</sup>)، معلومات الاتصال، والمزيد من الأمور.</dd>
+ <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">هيكليّة الوثيقة والموقع</a></dt>
+ <dd dir="rtl">كما يتم تعريف الأجزاء الفرديّة من صفحتك (مثل الفقرة والصورة)، تُستخدَم لغة ترميز النص الفائق أيضاً لتعريف أقسام موقعك (مثل الرأس، الشريط، وأعمدة المحتوى الرئيسي). هذه المقالة تشرح كيفيّة تخطيط الهيكل الأساسي للموقع، وكيفيّة استخدام اللغة لتمثيل ذلك الهيكل.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">تنقيح شيفرة لغة ترميز النص الفائق</a></dt>
+ <dd dir="rtl">كتابة وثيقة بلغة ترميز النص الفائق أمر سهل، ولكن ماذا إن حدث خطأ ما، ولم تستطع معرفة مكان ذلك الخطأ؟ هذه المقالة ستقدم لك بعض الأدوات التي ستساعدك على حل المشاكل المشابهة.</dd>
+</dl>
+
+<h2 dir="rtl" id="اختبارات">اختبارات</h2>
+
+<p dir="rtl">الاختبارات (التقييمات) التالية ستختبر فهمك لأساسيات اللغة المُغطاة في المقالات أعلاه.</p>
+
+<dl>
+ <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">تنسيق رسالة</a></dt>
+ <dd dir="rtl">سوف تتعلم كتابة رسالة عاجلاً أم آجلاً. إنه لمن المثال المفيد لتجربة مهاراتنا في تنسيق النصوص! لذلك هذا الاختبار سوف يعطيك رسالة لتقوم بتنسيقها.</dd>
+ <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">هيكلة محتوى الصفحة</a></dt>
+ <dd dir="rtl">هذا الاختبار سوف يختبر قدراتك على استخدام لغة ترميز النص الفائق لهيكلة محتوى صفحة بسيطة، تحتوي على رأس، ذيل، شريط، محتوى رئيسي، وشريط جانبي.</dd>
+</dl>
+
+<h2 dir="rtl" id="طالِع_أيضاً">طالِع أيضاً</h2>
+
+<dl>
+ <dt dir="rtl"><a href="https://teach.mozilla.org/activities/web-lit-basics/">أساسيات محو أمية ويب</a></dt>
+ <dd dir="rtl">درس ممتاز من شركة موزيلا يقوم باستكشاف واختبار الكثير من المهارات التي تحدثنا عنها في وحدة <em>مقدمة </em>إلى HTML<em>.</em> المتعلمون سيحصلون على دراية في قراءة، كتابة، والمشاركة في الويب من خلال هذه الوحدة التي تتألف من ست أجزاء. اكتشف أساسيات الويب من خلال التعلم بطريقة إنتاجيّة وتعاونيّة.</dd>
+</dl>
+
+<div id="eJOY__extension_root" style=""> </div>
diff --git a/files/ar/learn/html/multimedia_and_embedding/index.html b/files/ar/learn/html/multimedia_and_embedding/index.html
new file mode 100644
index 0000000000..d66696d111
--- /dev/null
+++ b/files/ar/learn/html/multimedia_and_embedding/index.html
@@ -0,0 +1,79 @@
+---
+title: الوسائط المتعددة والتضمين
+slug: Learn/HTML/Multimedia_and_embedding
+tags:
+  - Assessment
+  - Audio
+  - Beginner
+  - CodingScripting
+  - Embedding
+  - Flash
+  - Guide
+  - HTML
+  - Images
+  - Landing
+  - Learn
+  - Multimedia
+  - NeedsTranslation
+  - SVG
+  - TopicStub
+  - Video
+  - Web
+  - iframes
+  - imagemaps
+  - img
+  - responsive
+translation_of: Learn/HTML/Multimedia_and_embedding
+---
+<p>{{LearnSidebar}}</p>
+
+<p class="summary">لقد نظرنا في الكثير من النصوص حتى الآن في هذه الدورة ، ولكن الويب سيكون مملاً حقًا فقط باستخدام النص. دعونا نبدأ في النظر في كيفية جعل الويب ينبض بالحياة بمحتوى أكثر إثارة للاهتمام! تستكشف هذه الوحدة كيفية استخدام HTML لتضمين الوسائط المتعددة في صفحات الويب الخاصة بك ، بما في ذلك الطرق المختلفة التي يمكن تضمين الصور بها ، وكيفية تضمين الفيديو والصوت وحتى صفحات الويب بالكامل.</p>
+
+<h2 id="المتطلبات_الأساسية">المتطلبات الأساسية</h2>
+
+<p>قبل بدء هذه الوحدة ، يجب أن يكون لديك معرفة معقولة بأساسيات HTML ، كما هو موضح سابقًا في <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML"> مقدمة عن HTML </a> . إذا لم تعمل من خلال هذه الوحدة (أو شيء مماثل) ، فقم بالعمل عليها أولاً ، ثم ارجع!</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="https://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="ادله">ادله</h2>
+
+<p>تحتوي هذه الوحدة على المقالات التالية التي ستأخذك من خلال جميع أساسيات تضمين الوسائط المتعددة على صفحات الويب.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></dt>
+ <dd>
+ <p dir="rtl"><strong id="docs-internal-guid-ff3bcadf-7fff-b32d-5d13-2fc8e5fb67b7">هناك أنواع أخرى من الوسائط المتعددة للنظر، ولكن من المنطقي أن تبدأ مع المتواضع {{htmlelement ("img"}} عنصر يستخدم لتضمين صورة بسيطة في صفحة ويب. في هذه المقالة سننظر في كيفية استخدامه بمزيد من العمق ، بما في ذلك الأساسيات ، والتعليق عليه مع التسميات التوضيحية باستخدام {{htmlelement ("figure"}}، وكيفية ارتباطه بصور خلفية CSS.</strong></p>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></dt>
+ <dd>
+ <p dir="rtl"><strong id="docs-internal-guid-2ddd584f-7fff-2ed9-3c17-7e4b1b33ccdb">بعد ذلك، سننظر في كيفية استخدام عناصر {{(HTML5 {{htmlelement ("video"}}} و{{(htmlelement ("audio"}} لتضمين الفيديو والصوت على صفحاتنا، بما في ذلك الأساسيات، وتوفير الوصول إلى تنسيقات ملفات مختلفة إلى متصفحات مختلفة، وإضافة التسميات التوضيحية والترجمة، وكيفية إضافة نسخ احتياطية للمتصفحات القديمة.</strong></p>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From &lt;object&gt; to &lt;iframe&gt; — other embedding technologies</a></dt>
+ <dd>عند هذه النقطة نود أن تأخذ إلى حد ما من خطوة جانبية، والنظر في اثنين من العناصر التي تسمح لك لتضمين مجموعة واسعة من أنواع المحتوى في صفحات الويب الخاصة بك: {{htmlelement ("iframe"}}، {{htmlelement ("embed"}} و {{htmlelement ("object"}}. &lt;iframe&gt; هي لتضمين صفحات ويب أخرى ، والاثنان الآخران يسمحان لك بتضمين ملفات PDF و SVG وحتى Flash - وهي تقنية في طريقها للخروج ، ولكن قد لا تزال تراها بشكل شبه منتظم.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the web</a></dt>
+ <dd>يمكن أن تكون الرسومات المتجهة مفيدة للغاية في بعض الحالات. على عكس التنسيقات العادية مثل PNG /JPG ، فإنها لا تشوه / أو  تتبكسل عند التكبير - يمكن أن تظل سلسة عند تحجيمها. تعرّفك هذه المقالة على تنسيق {{glossary ("SVG"}} في صفحات الويب.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></dt>
+ <dd>مع هذا العدد الكبير من أنواع الأجهزة المختلفة القادرة الآن على تصفح الويب - من الهواتف المحمولة إلى أجهزة الكمبيوتر المكتبية - فإن المفهوم الأساسي للإتقان في عالم الويب الحديث هو التصميم المتجاوب. يشير هذا إلى إنشاء صفحات ويب يمكنها تغيير ميزاتها تلقائيًا لتناسب أحجام الشاشة المختلفة والدقة وما إلى ذلك. سيتم النظر في هذا بمزيد من التفصيل في وحدة CSS في وقت لاحق ، ولكن في الوقت الحالي ، سننظر في الأدوات التي يتوفر HTML لإنشاء صور سريعة الاستجابة ، بما في ذلك عنصر {{htmlelement ("picture"}}} .</dd>
+</dl>
+
+<h2 id="Assessments">Assessments</h2>
+
+<p>The following assessments will test your understanding of the HTML basics covered in the guides above:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></dt>
+ <dd>In this assessment, we'll test your knowledge of some of the techniques discussed in this module's articles, getting you to add some images and video to a funky splash page all about Mozilla!</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Add a hitmap on top of an image</a></dt>
+ <dd>Image maps provide a mechanism to make different parts of an image link to different places. (Think of a map linking through to further information about each different country you click on.) This technique can sometimes be useful.</dd>
+ <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Web literacy basics 2</a></dt>
+ <dd>
+ <p>An excellent Mozilla foundation course that explores and tests some of the skills talked about in this <em>Multimedia and embedding</em> module. Dive deeper into the basics of composing webpages, designing for accessibility, sharing resources, using online media, and working open (meaning that your content is freely available and shareable by others).</p>
+ </dd>
+</dl>
diff --git a/files/ar/learn/html/الجداول/index.html b/files/ar/learn/html/الجداول/index.html
new file mode 100644
index 0000000000..380e837a80
--- /dev/null
+++ b/files/ar/learn/html/الجداول/index.html
@@ -0,0 +1,36 @@
+---
+title: جداول HTML
+slug: Learn/HTML/الجداول
+translation_of: Learn/HTML/Tables
+---
+<div dir="rtl">{{LearnSidebar}}</div>
+
+<p class="summary" dir="rtl">تتمثل مهمة شائعة جدًا في HTML في هيكلة البيانات الجدولية ، ولديها عدد من العناصر والسمات لهذا الغرض فقط. إلى جانب القليل من CSS للتصميم ، يجعل HTML من السهل عرض جداول المعلومات على شبكة الإنترنت مثل خطة درس مدرستك أو الجدول الزمني في حمام السباحة المحلي الخاص بك أو إحصائيات حول الديناصورات المفضلة لديك أو فريق كرة القدم. تنقلك هذه الوحدة إلى كل ما تحتاج إلى معرفته حول هيكلة بيانات الجداول باستخدام HTML.</p>
+
+<h2 dir="rtl" id="المتطلبات_الأساسية">المتطلبات الأساسية</h2>
+
+<p dir="rtl">قبل بدء هذه الوحدة ، يجب أن تكون قد قمت بالفعل بتغطية أساسيات HTML - راجع <a href="https://developer.mozilla.org/ar/docs/Learn/HTML/Introduction_to_HTML">مقدمة إلى HTML</a>.</p>
+
+<div class="note" dir="rtl">
+<p><strong>ملاحظة</strong>: إذا كنت تعمل على جهاز كمبيوتر / جهاز لوحي / جهاز آخر حيث لا تملك القدرة على إنشاء ملفاتك الخاصة ، فيمكنك تجربة (أكثر من) أمثلة التعليمات البرمجية في برنامج الترميز عبر الإنترنت مثل <a href="http://jsbin.com/">JSBin</a> أو <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 dir="rtl" id="خطوط_إرشاد">خطوط إرشاد</h2>
+
+<p dir="rtl">تحتوي هذه الوحدة على المقالات التالية:</p>
+
+<dl>
+ <dt dir="rtl"><a href="/en-US/docs/Learn/HTML/Tables/Basics">أساسيات جدول  HTML</a></dt>
+ <dd dir="rtl">تبدأ هذه المقالة في البدء بجداول HTML ، والتي تغطي الأساسيات ذاتها ، مثل الصفوف والخلايا ، والعناوين ، وخلايا تجعل الأعمدة والصفوف متعددة ، وكيفية تجميع كل الخلايا في عمود معًا لأغراض التصميم.</dd>
+ <dt dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced">الميزات المتقدمة لجداول HTML وسهولة الوصول إليها </a></dt>
+ <dd dir="rtl">في المقالة الثانية في هذه الوحدة ، نلقي نظرة على بعض الميزات المتقدمة لجداول HTML - مثل التسميات التوضيحية / الملخصات وتجميع صفوفك في أقسام رأس الجدول والجسم والتذييل - وكذلك النظر في إمكانية الوصول إلى الجداول للمستخدمين ذوي الإعاقات البصرية .</dd>
+</dl>
+
+<h2 dir="rtl" id="تقييم">تقييم</h2>
+
+<dl>
+ <dt dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">هيكلة بيانات الكوكب </a></dt>
+ <dd dir="rtl">في تقييم الجدول الخاص بنا ، نوفر لك بعض البيانات حول الكواكب في نظامنا الشمسي ، ونجعلك تنظّمها في جدول HTML.</dd>
+</dl>
+
+<div id="eJOY__extension_root"></div>
diff --git a/files/ar/learn/html/بسيطة_html_إنشاء_صفحة/index.html b/files/ar/learn/html/بسيطة_html_إنشاء_صفحة/index.html
new file mode 100644
index 0000000000..72d8216f43
--- /dev/null
+++ b/files/ar/learn/html/بسيطة_html_إنشاء_صفحة/index.html
@@ -0,0 +1,304 @@
+---
+title: إنشاء صفحة HTML بسيطة
+slug: Learn/HTML/بسيطة_HTML_إنشاء_صفحة
+tags:
+  - البداية
+translation_of: Learn/Getting_started_with_the_web
+---
+<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>