٦. ج. ما هي استخدامات عناصر "U و S و Ruby" وكيف تعمل؟

Author: d3j1x

semantic/semantic6.html

@@ -254,6 +254,107 @@ <h5>ما هو التنسيق الافتراضي لعنصر <code class="br">code
 
     <section id="3">
 		<h3>ج. ما هي استخدامات عناصر "U و S و Ruby" وكيف تعمل؟</h3>
+
+		<p>يُستخدم عنصر التعليق غير المفصل <strong>The unarticulated annotation element</strong> ، أو عنصر <code class="br">u</code> باختصار، لتمثيل النص المضمن <em>inline text</em> الذي تم تطبيق تعليق غير نصي <em>non-textual annotation</em> عليه.</p>
+
+		<h4>فيما يلي مثال على استخدام عنصر <code class="br">u</code> لتسليط الضوء على أخطاء إملائية <em>spelling errors</em> مختلفة:</h4>
+
+		<div class="code-block"><pre><code>
+<span class="tag">&lt;p&gt;</span>
+ يمكنك استخدام عنصر التعليق غير المفصلي للتمييز
+ <span class="tag">&lt;u&gt;<span class="txt">inccccort</span>&lt;/u&gt;</span> <span class="tag">&lt;u&gt;<span class="txt">spling</span>&lt;/u&gt;</span> <span class="tag">&lt;u&gt;<span class="txt">issses</span>&lt;/u&gt;</span>.
+<span class="tag">&lt;/p&gt;</span>
+		</code></pre></div>
+
+		<div class="preview">
+			<p>
+				 يمكنك استخدام عنصر التعليق غير المفصلي للتمييز
+				  <u>inccccort</u> <u>spling</u> <u>issses</u>.				
+			</p>
+		</div>
+
+		<p>في المثال، الكلمات <code class="br">incorrect</code> و <code class="br">spelling</code> و <code class="br">issues</code> مكتوبة بشكل خاطئ. النمط الافتراضي لعنصر <code class="br">u</code> هو خط أسود أسفل النص.</p>
+
+		<p>في لغة HTML4، كان يُستخدم عنصر <code class="br">u</code> لأغراض التنسيق. أما في لغة HTML5، فيُستخدم عنصر <code class="br">u</code> فقط للإشارة إلى أن النص يحتوي على تعليقات توضيحية غير نصية.</p>
+
+		<p>إذا كنت ترغب في تنسيق نص ما باستخدام خط تحته، فيجب عليك استخدام CSS بدلاً من HTML.</p>
+
+		<p>يجب استخدام عنصر الشطب <strong>The strikethrough element</strong> ، أو عنصر <code class="br">s</code> باختصار، للإشارة إلى متى لم يعد النص دقيقًا أو ذا صلة.</p>
+
+		<h4>فيما يلي مثال على استخدام عنصر <code class="br">s</code> لإظهار إلغاء نشاط ما:</h4>
+
+		<div class="code-block"><pre><code>
+<span class="tag">&lt;p&gt;</span><span class="tag">&lt;s&gt;</span>.ستبدأ رحلة المشي غداً عند الظهر<span class="tag">&lt;/s&gt;</span><span class="tag">&lt;/p&gt;</span>
+<span class="tag">&lt;p&gt;</span>.نظراً لظروف جوية غير متوقعة، تم إلغاء الرحلة<span class="tag">&lt;/p&gt;</span>
+		</code></pre></div>
+
+		<div class="preview">
+			<p><s>ستبدأ رحلة المشي غداً عند الظهر.</s></p>
+			<p>نظراً لظروف جوية غير متوقعة، تم إلغاء الرحلة.</p>
+		</div>
+
+		<p>في هذا المثال، تم شطب الجملة الأولى لأن الرحلة تم إلغاؤها لأسباب تتعلق بالطقس.</p>
+
+		<p>لا ينبغي استخدام عنصر <code class="br">s</code> لعرض التغييرات التي طرأت على المستند. في هذه الحالة، يكون عنصر النص المحذوف وعنصر النص المُدرج أكثر ملاءمة.</p>
+
+		<p>يمثل عنصر <code class="br">ruby</code> نصًا صغيرًا يظهر أعلى أو أسفل النص الرئيسي. ويُستخدم عادةً لعرض نطق الأحرف الآسيوية الشرقية.</p>
+
+		<h4>إليك مثال على عنصر <code class="br">ruby</code> من صفحة وثائق الويب الخاصة بـ MDN:</h4>
+		<div class="code-block"><pre><code>
+<span class="tag">&lt;ruby&gt;</span> 明日 <span class="tag">&lt;rp&gt;</span>(<span class="tag">&lt;/rp&gt;</span><span class="tag">&lt;rt&gt;</span>Ashita<span class="tag">&lt;/rt&gt;</span><span class="tag">&lt;rp&gt;</span>)<span class="tag">&lt;/rp&gt;</span> <span class="tag">&lt;/ruby&gt;</span>
+		</code></pre></div>
+
+		<div class="preview">
+			<ruby> 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> </ruby>
+		</div>
+
+		<p>يتم استخدام عنصر <code class="br">rp</code>، أو عنصر الأقواس الاحتياطية <em>fallback parenthesis element</em> في لغة روبي ruby ، كبديل للمتصفحات التي تفتقر إلى دعم عرض التعليقات التوضيحية في لغة روبي  ruby.</p>
+
+		<p>يُستخدم عنصر <code class="br">rt</code>، أو عنصر نص روبي <em>ruby text element</em>، للإشارة إلى نص التعليق التوضيحي في لغة روبي ruby. ويُستخدم هذا النص عادةً للنطق أو تفاصيل الترجمة في الطباعة في شرق آسيا.</p>
+
+		<p>بينما يمكن استخدام عنصر <code class="br">ruby</code> لأنواع أخرى من التعليقات التوضيحية، فإن حالة الاستخدام الأكثر شيوعًا هي للطباعة في شرق آسيا <em>East Asian typography</em>.</p>
+
+		
+<!-- QUESTIONS -->
+		<div class="questions">
+			<h4>أسئلة :</h4>
+
+
+			<h5>ما هو استخدام العنصر <code class="br">u</code> ؟</h5>
+			
+			<p>١. يُستخدم لعرض الرموز السفلية subscripts في الصيغ الكيميائية.  ❌</p>
+			<p>٢. يُستخدم لتمثيل مدخلات المستخدم user input في نماذج HTML.  ❌</p>
+			<p><mark>٣. يُستخدم لتمثيل النص المضمن inline text الذي يحتوي على تعليقات توضيحية غير نصية non-textual annotation.  ✅</mark></p>
+			<p>٤. يُستخدم لجعل النص مائلاً italicize في HTML.  ❌</p>
+			
+				
+			<br>
+
+
+			<h5>ما هو استخدام العنصر <code class="br">s</code> ؟</h5>
+
+			<p><mark>١. يُستخدم هذا الرمز للإشارة إلى أن النص لم يعد دقيقًا accurate أو ذا صلة relevant.  ✅</mark></p>
+			<p>٢. يُستخدم لإنشاء أدوات مساعدة للتنقل navigational aides على مواقع الويب.  ❌</p>
+			<p>٣. يُستخدم لعرض معلومات حقوق النشر copyright information على الصفحات.  ❌</p>
+			<p>٤. يُستخدم لعرض تعليقات الصور captions for images.  ❌</p>
+			
+			
+				
+			<br>
+
+			<h5>ما هو الاستخدام الشائع لعنصر <code class="br">ruby</code> ؟</h5>
+
+			
+			<p>١. يُستخدم لكتابة تطبيقات روبي ruby applications.  ❌</p>
+			<p>٢. يُستخدم لإنشاء عناصر القوائم list items في الصفحة.  ❌</p>
+			<p>٣. يُستخدم لتطبيق خط تحت النص an underline for text.  ❌</p>
+			<p><mark>٤. يُستخدم لعرض نطق the pronunciation الأحرف الآسيوية الشرقية East Asian characters.  ✅</mark></p>
+			
+				
+			
+
+		</div>
+
 	</section>