ج. ما هي قوائم الوصف Description Lists، ومتى يجب استخدامها؟

Author: d3j1x

semantic/index.html

@@ -45,7 +45,7 @@ <h1>اتش.تي.إم.إل الدلالية</h1>
 			<ul class="second-links">
 				<li><a href="./semantic2.html#1">أ. متى يجب استخدام عنصر التأكيد The Emphasis Element بدلًا من عنصر النص الاصطلاحي The Idiomatic Text Element ؟</a></li>
 				<li><a href="./semantic2.html#2">ب. متى يجب استخدام عنصر التشديد القوي The Strong Element بدلًا من عنصر لفت الانتباه The Bring Attention To Element ؟</a></li>
-				<li><a href="./semantic2.html#2">ج. ما هي قوائم الوصف Description Lists، ومتى يجب استخدامها؟</a></li>
+				<li><a href="./semantic2.html#3">ج. ما هي قوائم الوصف Description Lists، ومتى يجب استخدامها؟</a></li>
 			</ul>
 		</li>
 

semantic/semantic2.html

@@ -223,6 +223,117 @@ <h5>ما هو الفرق الرئيسي بين <code class="br">b</code> و <cod
 
     <section id="3">
 		<h3>ج. ما هي قوائم الوصف Description Lists، ومتى يجب استخدامها؟</h3>
+
+		<p>تعتبر قوائم الوصف <strong>Description lists</strong> مثالية لتقديم المصطلحات <em>terms</em> والتعريفات <em>definitions</em> بتنسيق منظم <em>organized</em> وسهل القراءة، كما هو الحال في المسرد <i>a glossary</i> أو القاموس الحقيقي، حيث يمكنك العثور على الكلمات مع تعريفاتها المقابلة.</p>
+
+		<h4>هذا مثال لقائمة وصف <em>description list</em> في "اتش.تي.إم.إل" HTML تحتوي على مصطلحين وتفاصيلهما المقابلة:</h4>
+
+		<div class="code-block">
+			<pre><code>
+<span class="tag">&lt;dl&gt;</span>
+	<span class="tag">&lt;dt&gt;</span>HTML اتش.تي.إم.إل<span class="tag">&lt;/dt&gt;</span>
+	<span class="tag">&lt;dd&gt;</span>HyperText Markup Language لغة ترميز النص الفائق<span class="tag">&lt;/dd&gt;</span>
+	<span class="tag">&lt;dt&gt;</span>CSS سي.أس.أس<span class="tag">&lt;/dt&gt;</span>
+	<span class="tag">&lt;dd&gt;</span>Cascading Style Sheets أوراق الأنماط المتتالية<span class="tag">&lt;/dd&gt;</span>
+<span class="tag">&lt;/dl&gt;</span>
+			</code></pre>
+		</div>
+
+		<div class="preview">
+			<dl>
+				<dt>اتش.تي.إم.إل HTML</dt>
+				<dd>لغة ترميز النص الفائق HyperText Markup Language</dd>
+				<dt>سي.أس.أس CSS</dt>
+				<dd>أوراق الأنماط المتتالية Cascading Style Sheets</dd>
+			</dl>
+		</div>
+
+		<p>في هذه الحالة، المصطلحان هما اختصارا "اتش.تي.إم.إل" HTML و"سي.أس.أس" CSS، والتفاصيل هي امتدادات لهما <i>their expansions</i>. قد تكون التفاصيل أيضًا تعريفات أو معلومات أخرى متعلقة بالمصطلحين.</p>
+
+		<p>ستحتاج إلى ثلاثة عناصر "اتش.تي.إم.إل" HTML لتعريف قائمة وصف <em>description list</em>. أولًا، عنصر قائمة الوصف، <code class="br">dl</code>، وهو الحاوية <em>the container</em> للقائمة بأكملها. كما هو موضح في المثال، فهو يلتف حول جميع عناصر قائمة الوصف الأخرى.</p>
+
+		<p>ثم، عنصر وصف واحد <em>description term</em> <code class="br">dt</code>، لكل مصطلح. في هذه الحالة، تحتوي قائمة الوصف <em>description list</em> على مصطلحين، "اتش.تي.إم.إل" HTML و "سي.أس.أس" CSS، لذا فهي تحتوي على عنصرين منهما.</p>
+
+		<p>وأخيرًا، بعد كل مصطلح، ستجد عنصر "وصف التفاصيل" <em>description detail</em>، <code class="br">dd</code>، للوصف أو التفاصيل المرتبطة به. في هذا المثال، هذه هي لغة ترميز النص الفائق وأوراق الأنماط المتتالية.</p>
+
+		<p>في المتصفح <i>In the browser</i>، ستجد كل مصطلح <em>each term</em> متبوعًا بوصفه. افتراضيًا <em>By default</em>، تكون الأوصاف متباعدة قليلاً نحو اليمين لتمييزها بصريًا.</p>
+
+		<p>لكن "قوائم الوصف" <em>Description lists</em> لا تقتصر على المصطلحات والتعريفات فحسب، بل هي أكثر تنوعًا من ذلك بكثير.</p>
+
+		<h4>لدينا هنا وصفة مكونة من ثلاثة مكونات <i>three ingredients</i>:</h4>
+
+		<div class="code-block">
+			<pre><code>
+<span class="tag">&lt;dl&gt;</span>
+	<span class="tag">&lt;dt&gt;</span>دقيق<span class="tag">&lt;/dt&gt;</span>
+	<span class="tag">&lt;dd&gt;</span>كوبان<span class="tag">&lt;/dd&gt;</span>
+	<span class="tag">&lt;dt&gt;</span>سكر<span class="tag">&lt;/dt&gt;</span>
+	<span class="tag">&lt;dd&gt;</span>نصف كوب<span class="tag">&lt;/dd&gt;</span>
+	<span class="tag">&lt;dt&gt;</span>زيت نباتي<span class="tag">&lt;/dt&gt;</span>
+	<span class="tag">&lt;dd&gt;</span>ملعقتان كبيرتان<span class="tag">&lt;/dd&gt;</span>
+<span class="tag">&lt;/dl&gt;</span>
+			</code></pre>
+		</div>
+
+		<div class="preview">
+			<dl>
+				<dt>دقيق</dt>
+				<dd>كوبان</dd>
+				<dt>سكر</dt>
+				<dd>نصف كوب</dd>
+				<dt>زيت نباتي</dt>
+				<dd>ملعقتان كبيرتان</dd>
+			</dl>
+		</div>
+
+		<p>قائمة الوصف الكاملة <strong>The entire description list</strong> موجودة ضمن عنصر قائمة الوصف <em>description list element</em>. المكون الأول، <code class="br">دقيق</code>، موجود ضمن عنصر" مصطلح الوصف" <em>description term element</em>. بعد ذلك، يمكنك معرفة الكمية المطلوبة من هذا المكون: <code class="br">كوبان</code>. هذا موجود ضمن عنصر "تفاصيل الوصف" <em>description details element</em> مباشرةً بعد مكوناته المقابلة.</p>
+
+		وتُكرّر نفس التركيبة لـ <code class="br">سكر</code>. في هذه الحالة، تحتوي الوصفة على مكونين فقط، ولكن إذا كانت المكونات أكثر، يُمكن تكرار التركيبة نفسها في "قائمة الوصف" <em>The description list</em>.
+
+		<p>في المتصفح <i>In the browser</i>، سوف ترى المكونات محاذية إلى اليسار، والقياسات متباعدة <em>indented</em> لفصلها بصريًا <i>visually</i>.</p>
+
+		<p>تشمل حالات الاستخدام الأخرى لقوائم الوصف <em>description lists</em> مواصفات المنتج <em>product specifications</em>، والأسئلة الشائعة <em>frequently asked questions</em>، ومعلومات الاتصال <em>contact information</em>، والبيانات الوصفية <em>metadata</em>. في الأساس، عندما يكون لديك معلومتان مرتبطتان في صيغة مفتاح-قيمة <strong>key-value</strong>، حيث تعمل إحداهما كعلامة "المفتاح" <em>the key</em>، والأخرى كمعلومات إضافية ذات صلة "القيمة" <em>the value</em>، يمكنك استخدام قائمة وصف <em>description list</em>.</p>
+
+
+
+		<!-- QUESTIONS -->
+		<div class="questions">
+			<h4>أسئلة :</h4>
+
+			<h5>ما هو وسم "اتش.تي.إم.إل" HTML tag المُستخدم لتعريف قائمة وصف كاملة <em>an entire description list</em> ؟</h5>
+
+			<p>١. <code class="br">dt</code> ❌</p>
+			<p>٢. <code class="br">dd</code> ❌</p>
+			<p><mark>٣. <code class="br">dl</code> ✅</mark></p>
+			<p>٤. <code class="br">li</code> ❌</p>
+			
+
+			<br>
+
+			<h5>ما هو وسم "اتش.تي.إم.إل" HTML tag المُستخدم لتمثيل مصطلح <em>a term</em> في قائمة وصف؟</h5>
+
+			<p>١. <code class="br">dl</code> ❌</p>
+			<p><mark>٢. <code class="br">dt</code> ✅</mark></p>
+			<p>٣. <code class="br">dd</code> ❌</p>
+			<p>٤. <code class="br">li</code> ❌</p>
+			
+			
+			<br>
+
+
+			<h5>ما هو وسم "اتش.تي.إم.إل" HTML tag المُستخدم لتعريف  مصطلح في قائمة وصف أو تقديم تفاصيل <em>details</em> إضافية عنه؟</h5>
+
+			<p>١. <code class="br">dl</code> ❌</p>
+			<p>٢. <code class="br">dt</code> ❌</p>
+			<p><mark>٣. <code class="br">dd</code> ✅</mark></p>
+			<p>٤. <code class="br">li</code> ❌</p>
+			
+			
+
+		</div>
+
+
+
 	</section>