diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:15 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:15 -0500 |
| commit | 4b1a9203c547c019fc5398082ae19a3f3d4c3efe (patch) | |
| tree | d4a40e13ceeb9f85479605110a76e7a4d5f3b56b /files/ar/html | |
| parent | 33058f2b292b3a581333bdfb21b8f671898c5060 (diff) | |
| download | translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.gz translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.bz2 translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.zip | |
initial commit
Diffstat (limited to 'files/ar/html')
| -rw-r--r-- | files/ar/html/element/article/index.html | 153 | ||||
| -rw-r--r-- | files/ar/html/element/bdo/index.html | 108 | ||||
| -rw-r--r-- | files/ar/html/element/headings_elements/index.html | 244 | ||||
| -rw-r--r-- | files/ar/html/element/index.html | 239 | ||||
| -rw-r--r-- | files/ar/html/element/span/index.html | 122 | ||||
| -rw-r--r-- | files/ar/html/element/tt/index.html | 161 |
6 files changed, 1027 insertions, 0 deletions
diff --git a/files/ar/html/element/article/index.html b/files/ar/html/element/article/index.html new file mode 100644 index 0000000000..4ffbdbe80a --- /dev/null +++ b/files/ar/html/element/article/index.html @@ -0,0 +1,153 @@ +--- +title: عنصر المقالة <article> +slug: HTML/Element/article +translation_of: Web/HTML/Element/article +--- +<div>{{HTMLRef}}</div> + +<p dir="rtl">عنصر الـ <article> الموجود في الـ html فهو مفهوم من عنوانه والذي يعني (مقال) ونعرف جميعنا ان المقالات بنية مستقلة بذاتها. وتوجد في الوثائق, الصفحات, التطبيقات او المواقع. ما نتحدث عنه اليوم هو كيف نكتب عناصر الـ html لصفحة تحتوي على مقالات مثل : منشور المنتديات, مقالات الصفحات و المجلات. حتى منشورات المدونات blogs تعتبر مقالة. </p> + +<p dir="rtl">في حالة اردت ان تبرمج صفحة تختص بالمقالات لابد لك ان تقوم باستخدام تاك او عنصر <article>. المثال التالي يوضع استخدام المقالة بابسط صوره لها: </p> + +<div>{{EmbedInteractiveExample("pages/tabbed/article.html", "tabbed-standard")}}</div> + +<div></div> + +<div class="hidden" dir="rtl">مصدر هذا المثال موجود في موقع GitHub ويمكنك المشاركة من خلال نسخ المثال الموجود في الرابط ادناه <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>بعدها يمكن ان ترسل لنا طلبا.</div> + +<p dir="rtl">يمكن لصفحة الواحدة ان تحتوي على الكثير من المقالات. وهذا المثال دليل على ذلك. ليس هذا فحسب, فيمكن ان يكون عنصر المقالة يحتوي على عناصر مقالة بداخله ( تسمى nested element اي العناصر المتداخلة ).</p> + +<p dir="rtl">اليك معلومات خاطفة عن هذا العنصر:</p> + +<table class="properties" dir="rtl"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">فئة المكون </a></th> + <td> + <p><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Sectioning_content">sectioning content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Palpable_content">palpable content</a></p> + </td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a>. Note that an <code><article></code> element must not be a descendant of an {{HTMLElement("address")}} element.</td> + </tr> + <tr> + <th scope="row">Implicit ARIA role</th> + <td><code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Article_Role">article</a></code></td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("main")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="الخصائص">الخصائص</h2> + +<p dir="rtl">هذا العنصر يحتوي على الخصائص العامة فقط.<a href="/ar/docs/docs/HTML/Global_attributes"> يمكنك زيارتها من هنا</a></p> + +<h2 dir="rtl" id="ملاحظات_الاستخدام">ملاحظات الاستخدام</h2> + +<p dir="rtl">انت حر في استخدام هذا العنصر. ولكننا نفضل ان تقوم بمراعات هذه النقاط على الاقل.</p> + +<ul> + <li dir="rtl">كل عنصر <article> يجب ان يتم تعريفه من خلال تضمين عناوين heading باستخدام <a href="/ar/docs/Web/HTML/Element/Heading_Elements">h1-h6 </a>وتكون هذه العناصر بداخل هذا العنصر</li> + <li dir="rtl">عندما تحاول ان تكتب عنصر <article> (اي عندما تحول كتابة nested element) عليك مراعاة ان يكون العنصر الداخلي متصل بالعنصر الخارجي. مثلا تعليقات المنشور يجب ان تكون article . </li> + <li dir="rtl">معلومات مؤلف المنشور اذا امكن ان تكون في عنصر الـ <address> </li> + <li dir="rtl">التواريخ الخاص بالمقالة مثل تاريخ النشر وغيرها يجب ان تكون من اختصاص العنصر <a href="/ar/docs/Web/HTML/Element/time#attr-datetime"><time> ويمكنك الاطلاع على هذا العنصر من هنا</a></li> +</ul> + +<p dir="rtl">المثال التالي يلخص لك هذه النقاط:</p> + +<pre class="brush: html notranslate"><article class="film_review"> + <header> + <h2>Jurassic Park</h2> + </header> + <section class="main_review"> + <p>Dinos were great!</p> + </section> + <section class="user_reviews"> + <article class="user_review"> + <p>Way too scary for me.</p> + <footer> + <p> + Posted on + <time datetime="2015-05-16 19:00">May 16</time> + by Lisa. + </p> + </footer> + </article> + <article class="user_review"> + <p>I agree, dinos are my favorite.</p> + <footer> + <p> + Posted on + <time datetime="2015-05-17 19:00">May 17</time> + by Tom. + </p> + </footer> + </article> + </section> + <footer> + <p> + Posted on + <time datetime="2015-05-15 19:00">May 15</time> + by Staff. + </p> + </footer> +</article> +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sections.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.article")}}</p> + +<h2 dir="rtl" id="يمكنك_زيارة_التالي">يمكنك زيارة التالي:</h2> + +<ul> + <li dir="rtl">العناصر المرتبطة بهذا العنصر - او ربما تستخدمها معه: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li> + <li><a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Using HTML sections and outlines</a></li> +</ul> diff --git a/files/ar/html/element/bdo/index.html b/files/ar/html/element/bdo/index.html new file mode 100644 index 0000000000..ee154b30c1 --- /dev/null +++ b/files/ar/html/element/bdo/index.html @@ -0,0 +1,108 @@ +--- +title: '<bdo>: عنصر تجاوز النص ثنائي الاتجاه' +slug: HTML/Element/bdo +translation_of: Web/HTML/Element/bdo +--- +<div>{{HTMLRef}}</div> + +<p dir="rtl"><span class="seoSummary"><strong>HTML </strong>عنصر تجاوز النص ثنائي الاتجاه(<strong><code><bdo></code></strong>) يتجاوز الاتجاه الحالي للنص، بحيث يتم تقديم النص داخل في اتجاه مختلف. يتم رسم أحرف النص من نقطة البداية في الاتجاه المحدد. لا يتأثر اتجاه الحروف الفردية (حتى لا تحصل على أحرف إلى الوراء، على سبيل المثال).</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">يحتوي الفئات</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">المحتوى المسموح به</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">وسم الإقفال</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">يسمح الآباء</th> + <td>أي عنصر يقبل <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">صياغة المحتوى.</a></td> + </tr> + <tr> + <th scope="row">قواعد ARIA مسموح</th> + <td>الكل</td> + </tr> + <tr> + <th scope="row">DOM واجهة</th> + <td>{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the <code><a href="/en-US/docs/Web/API/HTMLSpanElement">HTMLSpanElement</a></code> interface for this element.</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="السِمات">السِمات</h2> + +<p dir="rtl">تتضمن سمات هذه العناصر <a href="/en-US/docs/HTML/Global_attributes">السمات العامة.</a></p> + +<dl> + <dt dir="rtl">{{htmlattrdef("dir")}}</dt> + <dd dir="rtl">الاتجاه الذي يجب أن يظهر فيه النص في محتويات هذا العنصر.</dd> + <dd dir="rtl">القيم المحتملة هي:</dd> + <dd> + <ul> + <li dir="rtl"><code>ltr</code>: يشير إلى أن النص يجب أن يسير في الاتجاه من اليسار إلى اليمين.</li> + <li dir="rtl"><code>rtl</code>:يشير إلى أن النص يجب أن يكون في الاتجاه من اليمين إلى اليسار.</li> + </ul> + </dd> +</dl> + +<h2 dir="rtl" id="الأمثلة">الأمثلة</h2> + +<pre class="brush: html"><!-- Switch text direction --> +<p>This text will go left to right.</p> +<p><bdo dir="rtl">This text will go right +to left.</bdo></p> +</pre> + +<h3 id="النتيجة">النتيجة</h3> + +<p> </p> + +<p>{{EmbedLiveSample('Examples')}}</p> + +<p> </p> + +<h2 dir="rtl" id="ملاحظات">ملاحظات</h2> + +<p dir="rtl">مواصفات HTML 4 لم تحدد أحداث لهذا العنصر؛ تمت إضافتها في XHTML. وهذا على الأرجح سهو.</p> + +<h2 dir="rtl" id="مميزات">مميزات</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">المميزات</th> + <th scope="col">الحالة</th> + <th scope="col">تعليق</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-bdo-element', '<bdo>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-bdo-element', '<bdo>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'dirlang.html#h-8.2.4', '<bdo>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="التكامل(دعم)_مع_المتصفح">التكامل(دعم) مع المتصفح</h2> + + + +<p>{{Compat("html.elements.bdo")}}</p> diff --git a/files/ar/html/element/headings_elements/index.html b/files/ar/html/element/headings_elements/index.html new file mode 100644 index 0000000000..acd3267d37 --- /dev/null +++ b/files/ar/html/element/headings_elements/index.html @@ -0,0 +1,244 @@ +--- +title: '<h1>–<h6>: عناصر العناوين' +slug: HTML/Element/headings_elements +translation_of: Web/HTML/Element/Heading_Elements +--- +<p dir="rtl"> عناصر <span class="seoSummary"><strong><code><h1></code>–<code><h6></code></strong></span> تقدم لنا سته مستويات من عناوين الأقسام. حيث أن العنصر<span class="seoSummary"><code><h1></code> يمثل العنوان الأعلى مستوى في الأهمية بينما العنصر <code><h2></code> هو الأقل.</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">فئات المحتوى </a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, heading content, palpable content.</td> + </tr> + <tr> + <th scope="row">المحتوى المسموح به</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">إغفال الوسوم</th> + <td>لا شئ، كلاً من وسمّي الفتح والإقفال إجباري</td> + </tr> + <tr> + <th scope="row">الأباء المسموح بهم للعنصر</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>; don't use an heading element as a child of the {{HTMLElement("hgroup")}} element — it is now deprecated.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLHeadingElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="السمات">السمات</h2> + +<p dir="rtl">هذه العناصر تتضمن <a href="/en-US/docs/Web/HTML/Global_attributes">السمات العامة</a>.</p> + +<div class="note" dir="rtl"> +<p>السمة <code>align</code> عفاء عنها الزمن، لا تستخدمها</p> +</div> + +<h2 id="ملاحظات_الإستخدام" style="direction: rtl;">ملاحظات الإستخدام</h2> + +<ul> + <li dir="rtl">يمكن إستخدام معلومات العناوين من قبل الـ user agents, على سبيل المثال لإنشاء جدول المحتويات لمستند بشكل تلقائي.</li> + <li dir="rtl">لا تستخدم عناوين بمستويات منخفضة لتقليل حجم خط العناوين: إستخدم خاصية لغة CSS المسؤولة عن التحكم بأحجام الخطوط <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size">font-size</a> بدلاً من ذلك.</li> + <li dir="rtl"> تجنب تخطي مستويات العناوين: دائماً إبدا من <code><h1></code>، من ثم إستخدم <code><h2></code> وهكذا.</li> + <li dir="rtl">يجب أن تأخذ بعين الإعتبار تجنب إستخدام العنصر <h1> أكثر من مرة في الصفحة. إطلع على <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Defining_sections">تعريف الأقسام</a> في <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">إستخدام الأقسام و وتسلسل العناوين في الـ HTML</a> لمعلومات أكثر.</li> +</ul> + +<h2 id="أمثلة" style="direction: rtl;">أمثلة</h2> + +<h3 id="جميع_العناوين" style="direction: rtl;">جميع العناوين</h3> + +<p style="direction: rtl;">الكود التالي يظهر كل مستويات العناوين، قيد الإستخدام.</p> + +<pre class="brush: html"><h1>Heading level 1</h1> +<h2>Heading level 2</h2> +<h3>Heading level 3</h3> +<h4>Heading level 4</h4> +<h5>Heading level 5</h5> +<h6>Heading level 6</h6> +</pre> + +<p style="direction: rtl;">هنا نتيجة هذا الكود:</p> + +<p>{{ EmbedLiveSample('All_headings', '280', '300', '') }}</p> + +<h3 id="مثال_لصفحة" style="direction: rtl;">مثال لصفحة</h3> + +<p style="direction: rtl;">الكود التالي يظهر بعض العناوين مع بعض المحتوى بأسفلها.</p> + +<pre class="brush: html"><h1>Heading elements</h1> +<h2>Summary</h2> +<p>Some text here...</p> + +<h2>Examples</h2> +<h3>Example 1</h3> +<p>Some text here...</p> + +<h3>Example 2</h3> +<p>Some text here...</p> + +<h2>See also</h2> +<p>Some text here...</p> +</pre> + +<p style="direction: rtl;">هنا نتيجة هذا الكود:</p> + +<p>{{ EmbedLiveSample('Example_page', '280', '480', '') }}</p> + +<h2 id="سهولة_الوصول" style="direction: rtl;">سهولة الوصول</h2> + +<h3 id="التنقل_بين_الأجزاء_والصفحات" style="direction: rtl;">التنقل بين الأجزاء والصفحات</h3> + +<p style="direction: rtl;">من الأساليب الشائعة للتنقل بين أجزاء الصفحة من قبل مستخدمي قارئات الشاشات هو القفز من عنوان لأخر لتحديد محتوى الصفحة بشكل سريع. </p> + +<p style="direction: rtl;">لهذا السبب، من المهم عدم تخطي أحد مستويات العناوين فالقيام بذلك قد يسبب ارتباك للشخص الذي يقوم بالتنقل بين أجزاء الموقع بهذه الطريقة وربما يترك لدية نوع من الحيرة عن أين هو العنوان المفقود.</p> + +<h4 id="لا_تقم_بالتالي" style="direction: rtl;">لا تقم بالتالي:</h4> + +<pre class="brush: html example-bad"><h1>Heading level 1</h1> +<h3>Heading level 3</h3> +<h4>Heading level 4</h4> +</pre> + +<h4 id="قم_بالتالي" style="direction: rtl;">قم بالتالي:</h4> + +<pre class="brush: html example-good"><h1>Heading level 1</h1> +<h2>Heading level 2</h2> +<h3>Heading level 3</h3> +</pre> + +<h4 id="تسلسل_العناوين_-_Nesting" style="direction: rtl;">تسلسل العناوين - Nesting</h4> + +<p style="direction: rtl;">قد يتم عمل تسلسل لبعض العناوين لتبدو كعناوين أقسام فرعية لعكس تنظيم محتوى الصفحة. أغلب قارئات الشاشات تستطيع أيضا تكوين قائمة مرتبة لكل العناوين التي في الصفحة، ما قد يساعد الشخص لتحديد التسلسل الهرمي للمحتوى بسرعة :</p> + +<ol> + <li><code>h1</code> Beetles + + <ol> + <li><code>h2</code> Etymology</li> + <li><code>h2</code> Distribution and Diversity</li> + <li><code>h2</code> Evolution + <ol> + <li><code>h3</code> Late Paleozoic</li> + <li><code>h3</code> Jurassic</li> + <li><code>h3</code> Cretaceous</li> + <li><code>h3</code> Cenozoic</li> + </ol> + </li> + <li><code>h2</code> External Morphology + <ol> + <li><code>h3</code> Head + <ol> + <li><code>h4</code> Mouthparts</li> + </ol> + </li> + <li><code>h3</code> Thorax + <ol> + <li><code>h4</code> Prothorax</li> + <li><code>h4</code> Pterothorax</li> + </ol> + </li> + <li><code>h3</code> Legs</li> + <li><code>h3</code> Wings</li> + <li><code>h3</code> Abdomen</li> + </ol> + </li> + </ol> + </li> +</ol> + +<p>When headings are nested, heading levels may be "skipped" when closing a subsection.</p> + +<ul> + <li><a href="https://www.w3.org/WAI/tutorials/page-structure/headings/">Headings • Page Structure • WAI Web Accessibility Tutorials</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_—_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Understanding WCAG, Guideline 2.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html">Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-headings.html">Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h3 id="Labeling_section_content">Labeling section content</h3> + +<p>Another common navigation technique for users of screen reading software is to generate a list of <a href="/en-US/docs/Web/HTML/Element#Content_sectioning">sectioning content</a> and use it to determine the page's layout.</p> + +<p>Sectioning content can be labeled using a combination of the <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> and {{htmlattrxref("id")}} attributes, with the label concisely describing the purpose of the section. This technique is useful for situations where there is more than one sectioning element on the same page.</p> + +<h4 id="Example">Example</h4> + +<pre class="brush: html"><header> + <nav aria-labelledby="primary-navigation"> + <h2 id="primary-navigation">Primary navigation</h2> + <!-- navigation items --> + </nav> +</header> + +<!-- page content --> + +<footer> + <nav aria-labelledby="footer-navigation"> + <h2 id="footer-navigation">Footer navigation</h2> + <!-- navigation items --> + </nav> +</footer> +</pre> + +<p>In this example, screen reading technology would announce that there are two {{HTMLElement("nav")}} sections, one called "Primary navigation" and one called "Footer navigation". If labels were not provided, the person using screen reading software may have to investigate each <code>nav</code> element's contents to determine their purpose.</p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Using the aria-labelledby attribute</a></li> + <li><a href="https://www.w3.org/WAI/tutorials/page-structure/labels/#using-aria-labelledby">Labeling Regions • Page Structure • W3C WAI Web Accessibility Tutorials</a></li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.h1")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTMLElement("p")}}</li> + <li>{{HTMLElement("div")}}</li> + <li>{{HTMLElement("section")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/ar/html/element/index.html b/files/ar/html/element/index.html new file mode 100644 index 0000000000..a2fb5187e7 --- /dev/null +++ b/files/ar/html/element/index.html @@ -0,0 +1,239 @@ +--- +title: HTML element reference +slug: HTML/Element +translation_of: Web/HTML/Element +--- +<p><font><font>يسرد مرجع HTML هذا جميع </font></font><strong><font><font>عناصر HTML</font></font></strong><font><font> ، المحددة في HTML5 أو في مواصفات سابقة. </font><font>عند تضمينها داخل أقواس زاوية ، فإنها تشكل </font></font><em><font><font>علامات HTML</font></font></em><font><font> : </font></font><code><elementname>.</code><font><font>العناصر عبارة عن كيانات تحدد كيفية إنشاء مستندات HTML ، ونوع المحتوى الذي يجب وضعه في أي جزء من </font><font>مستند </font></font><a href="https://developer.mozilla.org/en-US/docs/HTML" title="/ EN-US / مستندات / HTML"><font><font>HTML</font></font></a><font><font> .</font></font></p> + +<p><font><font>تسرد هذه الصفحة جميع علامات HTML5 القياسية ، ولكنها تحتوي أيضًا على العلامات القديمة والبالية والمهملة ، بالإضافة إلى العلامات غير القياسية التي قد تدعمها المتصفحات. </font><font>غالبًا ما يشار إلى </font><font>العناصر التي تم تقديمها في </font></font><a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5" title="/ EN-US / مستندات / HTML / HTML5"><font><font>HTML5</font></font></a><font><font> على أنها عناصر HTML5 الجديدة ، على الرغم من أن العناصر القياسية الأخرى صالحة أيضًا في HTML5.</font></font></p> + +<p><font><font>في مستند HTML ، يتم تعريف عنصر بواسطة </font></font><em><font><font>علامة البداية</font></font></em><font><font> . </font><font>إذا احتوى عنصر المحتويات الأخرى، وينتهي مع </font></font><em><font><font>علامة إغلاق</font></font></em><font><font>، حيث يسبق اسم العنصر بواسطة خط مائل: </font></font><code></elementname></code><font><font>. </font><font>لا تحتاج إلى إغلاق بعض العناصر ، مثل عناصر الصورة.</font><font>هذه هي المعروفة باسم </font><font>العناصر </font></font><em><font><font>باطلة</font></font></em><font><font> . </font><font>تحتوي مستندات HTML على شجرة من هذه العناصر. </font><font>يدعى كل لتمثيل ما يفعله. </font><font>على سبيل المثال ، </font></font><code><title></code><font><font>يمثل العنصر عنوان المستند. </font><font>فيما يلي قائمة أبجدية بعناصر HTML.</font></font></p> + +<p><a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5"><img alt="تمت إضافة هذا العنصر في HTML5" src="https://developer.mozilla.org/files/3843/HTML5_Badge_32.png" title="تمت إضافة هذا العنصر في HTML5"></a><font><font>يشير </font><font>الرمز </font><font>إلى أنه تمت إضافة العنصر في HTML5. </font><font>لاحظ أنه ربما تم تعديل أو توسيع العناصر الأخرى المدرجة هنا حسب مواصفات HTML5. </font><font>العناصر البعدية غير قياسية أو قديمة أو متوقفة ؛ </font><font>يجب عدم استخدامها في مواقع ويب جديدة ، ويجب إزالتها بشكل تدريجي من المواقع الحالية لتجنب النتائج غير المرغوب فيها.</font></font></p> + +<p>يشير الرمز Ⓒ إلى أن العنصر معرف في مجموعة المواصفات Web Components.</p> + +<div class="index widgeted"><span id="A">A</span> + +<ul> + <li>{{ HTMLElement("a") }}</li> + <li>{{ HTMLElement("abbr") }}</li> + <li><s class="obsoleteElement">{{ HTMLElement("acronym") }}</s></li> + <li>{{ HTMLElement("address") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("applet") }}</s></li> + <li>{{ HTMLElement("area") }}</li> + <li class="html5">{{ HTMLElement("article") }}</li> + <li class="html5">{{ HTMLElement("aside") }}</li> + <li class="html5">{{ HTMLElement("audio") }}</li> +</ul> +<span id="B">B</span> + +<ul> + <li>{{ HTMLElement("b") }}</li> + <li>{{ HTMLElement("base") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("basefont") }}</s></li> + <li class="html5">{{ HTMLElement("bdi") }}</li> + <li>{{ HTMLElement("bdo") }}</li> + <li><s class="nonStdElement">{{ HTMLElement("bgsound") }}</s></li> + <li><s class="obsoleteElement">{{ HTMLElement("big") }}</s></li> + <li><s class="nonStdElement">{{ HTMLElement("blink") }}</s></li> + <li>{{ HTMLElement("blockquote") }}</li> + <li>{{ HTMLElement("body") }}</li> + <li>{{ HTMLElement("br") }}</li> + <li>{{ HTMLElement("button") }}</li> +</ul> +<span id="C">C</span> + +<ul> + <li class="html5">{{ HTMLElement("canvas") }}</li> + <li>{{ HTMLElement("caption") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("center") }}</s></li> + <li>{{ HTMLElement("cite") }}</li> + <li>{{ HTMLElement("code") }}</li> + <li>{{ HTMLElement("col") }}</li> + <li>{{ HTMLElement("colgroup") }}</li> +</ul> +<span id="D">D</span> + +<ul> + <li class="html5">{{ HTMLElement("data") }}</li> + <li class="html5">{{ HTMLElement("datalist") }}</li> + <li>{{ HTMLElement("dd") }}</li> + <li class="webcomp">{{ HTMLElement("decorator")}}</li> + <li>{{ HTMLElement("del") }}</li> + <li class="html5">{{ HTMLElement("details") }}</li> + <li>{{ HTMLElement("dfn") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("dir") }}</s></li> + <li>{{ HTMLElement("div") }}</li> + <li>{{ HTMLElement("dl") }}</li> + <li>{{ HTMLElement("dt") }}</li> +</ul> +<span id="E">E</span> + +<ul> + <li>{{HTMLElement("em") }}</li> + <li class="html5">{{ HTMLElement("embed") }}</li> +</ul> +<span id="F">F</span> + +<ul> + <li>{{ HTMLElement("fieldset") }}</li> + <li class="html5">{{ HTMLElement("figcaption") }}</li> + <li class="html5">{{ HTMLElement("figure") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("font") }}</s></li> + <li class="html5">{{ HTMLElement("footer") }}</li> + <li>{{ HTMLElement("form") }}</li> + <li><s class="obsoleteElement">{{ HTMLElement("frame") }}</s></li> + <li><s class="obsoleteElement">{{ HTMLElement("frameset") }}</s></li> +</ul> +<span id="G">G H</span> + +<ul> + <li>{{ HTMLElement("h1") }}</li> + <li>{{ HTMLElement("h2") }}</li> + <li>{{ HTMLElement("h3") }}</li> + <li>{{ HTMLElement("h4") }}</li> + <li>{{ HTMLElement("h5") }}</li> + <li>{{ HTMLElement("h6") }}</li> + <li>{{ HTMLElement("head") }}</li> + <li class="html5">{{ HTMLElement("header") }}</li> + <li class="html5"><s class="deprecatedElement obsoleteElement">{{ HTMLElement("hgroup") }}</s></li> + <li>{{ HTMLElement("hr") }}</li> + <li>{{ HTMLElement("html") }}</li> +</ul> +<span id="I">I</span> + +<ul> + <li>{{ HTMLElement("i") }}</li> + <li>{{ HTMLElement("iframe") }}</li> + <li>{{ HTMLElement("img") }}</li> + <li>{{ HTMLElement("input") }}</li> + <li>{{ HTMLElement("ins") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("isindex") }}</s></li> +</ul> +<span id="J">J K</span> + +<ul> + <li>{{ HTMLElement("kbd") }}</li> + <li class="html5">{{ HTMLElement("keygen") }}</li> +</ul> +<span id="L">L</span> + +<ul> + <li>{{ HTMLElement("label") }}</li> + <li>{{ HTMLElement("legend") }}</li> + <li>{{ HTMLElement("li") }}</li> + <li>{{ HTMLElement("link") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("listing") }}</s></li> +</ul> +<span id="M">M</span> + +<ul> + <li class="html5">{{HTMLElement("main")}}</li> + <li>{{ HTMLElement("map") }}</li> + <li class="html5">{{ HTMLElement("mark") }}</li> + <li><s class="nonStdElement">{{ HTMLElement("marquee") }}</s></li> + <li class="html5">{{ HTMLElement("menu") }}</li> + <li class="html5">{{ HTMLElement("menuitem") }}</li> + <li>{{ HTMLElement("meta") }}</li> + <li class="html5">{{ HTMLElement("meter") }}</li> +</ul> +<span id="N">N</span> + +<ul> + <li class="html5">{{ HTMLElement("nav") }}</li> + <li><s class="nonStdElement">{{ HTMLElement("nobr") }}</s></li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("noframes") }}</s></li> + <li>{{ HTMLElement("noscript") }}</li> +</ul> +<span id="O">O</span> + +<ul> + <li>{{ HTMLElement("object") }}</li> + <li>{{ HTMLElement("ol") }}</li> + <li>{{ HTMLElement("optgroup") }}</li> + <li>{{ HTMLElement("option") }}</li> + <li class="html5">{{ HTMLElement("output") }}</li> +</ul> +<span id="P">P</span> + +<ul> + <li>{{ HTMLElement("p") }}</li> + <li>{{ HTMLElement("param") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("plaintext") }}</s></li> + <li>{{ HTMLElement("pre") }}</li> + <li class="html5">{{ HTMLElement("progress") }}</li> +</ul> +<span id="Q">Q</span> + +<ul> + <li>{{ HTMLElement("q") }}</li> +</ul> +<span id="R">R</span> + +<ul> + <li class="html5">{{ HTMLElement("rp") }}</li> + <li class="html5">{{ HTMLElement("rt") }}</li> + <li class="html5">{{ HTMLElement("ruby") }}</li> +</ul> +<span id="S">S</span> + +<ul> + <li>{{ HTMLElement("s") }}</li> + <li>{{ HTMLElement("samp") }}</li> + <li>{{ HTMLElement("script") }}</li> + <li class="html5">{{ HTMLElement("section") }}</li> + <li>{{ HTMLElement("select") }}</li> + <li>{{ HTMLElement("small") }}</li> + <li class="html5">{{ HTMLElement("source") }}</li> + <li><s class="nonStdElement">{{ HTMLElement("spacer") }}</s></li> + <li>{{ HTMLElement("span") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("strike") }}</s></li> + <li>{{ HTMLElement("strong") }}</li> + <li>{{ HTMLElement("style") }}</li> + <li>{{ HTMLElement("sub") }}</li> + <li class="html5">{{ HTMLElement("summary") }}</li> + <li>{{ HTMLElement("sup") }}</li> +</ul> +<span id="T">T</span> + +<ul> + <li>{{ HTMLElement("table") }}</li> + <li>{{ HTMLElement("tbody") }}</li> + <li>{{ HTMLElement("td") }}</li> + <li class="webcomp">{{ HTMLElement("template")}}</li> + <li>{{ HTMLElement("textarea") }}</li> + <li>{{ HTMLElement("tfoot") }}</li> + <li>{{ HTMLElement("th") }}</li> + <li>{{ HTMLElement("thead") }}</li> + <li class="html5">{{ HTMLElement("time") }}</li> + <li>{{ HTMLElement("title") }}</li> + <li>{{ HTMLElement("tr") }}</li> + <li class="html5">{{ HTMLElement("track") }}</li> + <li><s class="obsoleteElement">{{ HTMLElement("tt") }}</s></li> +</ul> +<span id="U">U</span> + +<ul> + <li>{{ HTMLElement("u") }}</li> + <li>{{ HTMLElement("ul") }}</li> +</ul> +<span id="V">V</span> + +<ul> + <li>{{ HTMLElement("var") }}</li> + <li class="html5">{{ HTMLElement("video") }}</li> +</ul> +<span id="W">W</span> + +<ul> + <li class="html5">{{ HTMLElement("wbr") }}</li> +</ul> +<span id="X">X Y Z </span> + +<ul> + <li><span id="X"><s class="deprecatedElement obsoleteElement">{{ HTMLElement("xmp") }}</s></span></li> +</ul> +</div> + +<p> </p> diff --git a/files/ar/html/element/span/index.html b/files/ar/html/element/span/index.html new file mode 100644 index 0000000000..79a265b804 --- /dev/null +++ b/files/ar/html/element/span/index.html @@ -0,0 +1,122 @@ +--- +title: <span> +slug: HTML/Element/span +translation_of: Web/HTML/Element/span +--- +<p><font><font>و </font></font><strong><font><font>HTML </font></font><code><span></code><font><font>العنصر</font></font></strong><font><font> هو حاوية مضمنة عامة لمحتوى الصيغة، التي لا تمثل في حد ذاتها أي شيء. </font><font>يمكن استخدامه لتجميع العناصر لأغراض التصميم (باستخدام </font></font><code>class</code><font><font>أو </font></font><code>id</code><font><font>السمات) ، أو لأنها تتشارك في قيم السمات ، مثل </font></font><code>lang</code><font><font>. </font></font><font><font>يجب استخدامه فقط عندما يكون أي عنصر دلالي آخر مناسبًا. </font></font><code><span></code><font><font>تشبه إلى حد كبير على </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div" title="عنصر قسم محتويات HTML (<div>) هو الحاوية العامة لمحتوى التدفق. ليس له تأثير على المحتوى أو التخطيط حتى يتم تصميمه باستخدام CSS."><code><div></code></a><font><font>عنصر، ولكن </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div" title="عنصر قسم محتويات HTML (<div>) هو الحاوية العامة لمحتوى التدفق. ليس له تأثير على المحتوى أو التخطيط حتى يتم تصميمه باستخدام CSS."><code><div></code></a><font><font>هو </font></font><a href="https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements"><font><font>عنصر على مستوى الكتلة</font></font></a><font><font> في حين أن </font></font><code><span></code><font><font>هو </font></font><a href="https://developer.mozilla.org/en-US/docs/HTML/Inline_elements"><font><font>عنصر المضمنة</font></font></a><font><font> .</font></font></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"> + <table> + <tbody> + <tr> + <th scope="row"><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories"><font><font>فئات المحتوى</font></font></a></th> + </tr> + </tbody> + </table> + </th> + <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content"><font><font>محتوى التدفق</font></font></a><font><font> ، </font></font><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content"><font><font>محتوى الصياغة</font></font></a><font><font> .</font></font></td> + </tr> + <tr> + <th scope="row">المحتوى المسموح به</th> + <td> + <table> + <tbody> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content"><font><font>محتوى الصياغة</font></font></a></td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">إغفال العلامة</th> + <td>الآباء المسموح بهم</td> + </tr> + <tr> + <td><font><font>أي عنصر يقبل </font></font><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content"><font><font>محتوى الصياغة</font></font></a><font><font> ، أو أي عنصر يقبل </font></font><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content"><font><font>محتوى التدفق</font></font></a><font><font> .</font></font></td> + </tr> + <tr> + <th scope="row">يسمح أدوار ARIA</th> + <td>أي</td> + </tr> + <tr> + <th scope="row">واجهة DOM</th> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElement" title="تمثل واجهة HTMLSpanElement عنصر <span> وتستمد من واجهة HTMLElement ، ولكن دون تنفيذ أي خصائص أو طرق إضافية."><code>HTMLSpanElement</code></a><font><font>(قبل HTML 5 ، كانت الواجهة </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" title="تمثل واجهة HTMLElement أي عنصر HTML. تقوم بعض العناصر بتنفيذ هذه الواجهة مباشرة ، بينما يقوم بعضها الآخر بتنفيذها من خلال واجهة توارثها."><code>HTMLElement</code></a><font><font>)</font></font></td> + </tr> + </tbody> +</table> + +<h2 id="السمات"><font><font>السمات</font></font></h2> + +<p><font><font>هذا العنصر يشمل فقط </font></font><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes"><font><font>السمات العالمية</font></font></a><font><font> .</font></font></p> + +<h2 id="المثال_1"><font><font>المثال 1</font></font></h2> + +<pre class="brush:html;gutter:false"><p><span>Some text</span></p></pre> + +<h3 id="نتيجة"><font><font>نتيجة</font></font></h3> + +<p><font><font>بعض النصوص</font></font></p> + +<p> </p> + +<h2 id="المثال_2"><font><font>المثال 2</font></font></h2> + +<pre class="brush:html;gutter:false"><li><span> + <a href="portfolio.html" target="_blank">See my portfolio</a> +</span></li> +</pre> + +<h3 id="CSS">CSS:</h3> + +<div class="note"> +<p>li span {<br> + background: gold;<br> + }</p> +</div> + +<h2 id="مواصفات"><font><font>مواصفات</font></font></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">تخصيص</th> + <th scope="col">الحالة</th> + <th scope="col">تعليق</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-span-element', '<span>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-span-element', '<span>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>واجهة DOM هي الآن {{domxref("HTMLSpanElement")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#edef-SPAN', '<span>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="توافق_التصفح">توافق التصفح</h2> + + + +<p>{{Compat("html.elements.span")}}</p> + +<h2 id="انظر_أيضا"><font><font>انظر أيضا</font></font></h2> + +<ul> + <li>HTML {{HTMLElement("div")}} عنصر </li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/ar/html/element/tt/index.html b/files/ar/html/element/tt/index.html new file mode 100644 index 0000000000..30cfcc09f9 --- /dev/null +++ b/files/ar/html/element/tt/index.html @@ -0,0 +1,161 @@ +--- +title: '<tt>: The Teletype Text element (obsolete)' +slug: HTML/Element/tt +translation_of: Web/HTML/Element/tt +--- +<div>{{ obsolete_header() }}</div> + +<p><font><font>وعفا عليها الزمن </font></font><strong><font><font>HTML المبرقة الكاتبة عنصر نص</font></font></strong><font><font> ( </font></font><strong><code><tt></code></strong><font><font>) بإنشاء النص المضمن الذي يقدم باستخدام </font></font><a href="https://developer.mozilla.org/en-US/docs/Glossary/user_agent" title="وكيل المستخدم: وكيل المستخدم هو برنامج كمبيوتر يمثل الشخص ، على سبيل المثال ، متصفح في سياق الويب."><font><font>وكيل المستخدم</font></font></a><font><font> وجه الافتراضي أحادي المسافة الخط. </font></font><font><font>تم إنشاء هذا العنصر لغرض تقديم نص كما سيتم عرضه على شاشة عرض ثابت مثل نمط teletype أو نص فقط أو طابعة خط</font></font></p> + +<p><font><font>تُستخدم المصطلحات </font></font><strong><font><font>غير المتناسبة</font></font></strong><font><font> ، </font></font><strong><font><font>والنمط الأحادي</font></font></strong><font><font> ، </font></font><strong><font><font>والمونوسبيس</font></font></strong><font><font> بشكل تبادلي ولها نفس المعنى العام: فهي تصف حرفًا محرفًا تكون جميع أحرفه هي نفس عدد وحدات البكسل على نطاق واسع.</font></font></p> + +<p><font><font>هذا العنصر عفا عليه الزمن ، ومع ذلك. </font><font>يجب عليك استخدام أكثر مفيدة لغويا </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code" title="يعرض عنصر <code> HTML محتوياته بطريقة مصممة للإشارة إلى أن النص عبارة عن جزء قصير من رمز الكمبيوتر."><code><code></code></a><font><font>، </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd" title="يمثل عنصر إدخال لوحة مفاتيح HTML (<kbd>) امتدادًا للنص المضمن يشير إلى إدخال المستخدم النصي من لوحة المفاتيح أو الإدخال الصوتي أو أي جهاز إدخال نص آخر."><code><kbd></code></a><font><font>، </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var" title="يمثل عنصر HTML متغير (<var>) اسم متغير في تعبير رياضي أو سياق برمجة."><code><var></code></a><font><font>، أو</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/samp" title="يتم استخدام عنصر عينة HTML (<samp>) لإحاطة النص المضمن الذي يمثل عينة (أو اقتباس) من برنامج كمبيوتر."><code><samp></code></a><font><font>عناصر النص المضمن الذي يحتاج إلى أن تقدم في نوع أحادي المسافة، أو </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre" title="يمثل عنصر <pre> HTML النص المنسق مسبقًا والذي سيقدم بالضبط كما هو مكتوب في ملف HTML."><code><pre></code></a><font><font>شعارا لالمحتوى الذي ينبغي أن تقدم ككتلة منفصل.</font></font></p> + +<div class="note"><font><font>إذا لم يكن أي من العناصر الدلالية مناسبًا لحالة الاستخدام الخاصة بك (على سبيل المثال ، إذا كنت تحتاج ببساطة إلى عرض بعض المحتوى بخط غير تناسبي) ، فيجب أن تفكر في استخدام </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span" title="عنصر HTML <span> عبارة عن حاوية مضمنة عامة لمحتوى الصياغة ، والتي لا تمثل أي شيء بطبيعته. يمكن استخدامه لتجميع العناصر لأغراض التصميم (باستخدام صفات الصف أو الهوية) ، أو لأنها تتشارك في قيم السمات ، مثل lang."><code><span></code></a><font><font>العنصر ، وأن تصممه كما تريد باستخدام CSS. </font><font>و </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-family" title="تحدد الخاصية CSS لعائلة الخط قائمة ذات أولوية من اسم عائلة خط واحد أو أكثر و / أو أسماء عامة للعنصر المحدد."><code>font-family</code></a><font><font>الخاصية هي مكان جيد للبدء</font></font></div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories"><font><font>فئات المحتوى</font></font></a></th> + <td> + <table> + <tbody> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content"><font><font>محتوى التدفق</font></font></a><font><font> ، </font><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content"><font>ومحتوى </font></a></font><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content"><font><font>الصياغة</font></font></a><font><font> ، ومحتوى واضح</font></font></td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">المحتوى المسموح به</th> + <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content"><font><font>محتوى الصياغة</font></font></a><font><font> .</font></font></td> + </tr> + <tr> + <th scope="row">إغفال العلامة</th> + <td>لا شيء ، كل من علامة البداية والنهاية إلزامية.</td> + </tr> + <tr> + <th scope="row">الآباء المسموح بهم</th> + <td><font><font>ي عنصر يقبل </font></font><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content"><font><font>محتوى الصياغة</font></font></a></td> + </tr> + <tr> + <th scope="row">يسمح أدوار ARIA</th> + <td>أي</td> + </tr> + <tr> + <th scope="row"> + <table> + <tbody> + <tr> + <th scope="row"><font><font>واجهة DOM</font></font></th> + </tr> + </tbody> + </table> + </th> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" title="تمثل واجهة HTMLElement أي عنصر HTML. تقوم بعض العناصر بتنفيذ هذه الواجهة مباشرة ، بينما يقوم بعضها الآخر بتنفيذها من خلال واجهة توارثها."><code>HTMLElement</code></a></td> + </tr> + </tbody> +</table> + +<h2 id="السمات"><font><font>السمات</font></font></h2> + +<p><font><font>هذا العنصر يشمل فقط </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/global_attributes"><font><font>السمات العالمية</font></font></a></p> + +<h2 id="أمثلة"><font><font>أمثلة</font></font></h2> + +<h3 id="المثال_الأساسي"><font><font>المثال الأساسي</font></font></h3> + +<p><font><font>يستخدم هذا المثال </font></font><code><tt></code><font><font>لإظهار النص الذي تم إدخاله والإخراج بواسطة تطبيق طرفي.</font></font></p> + +<pre class="brush:html"><p>Enter the following at the telnet command prompt: <code>set localecho</code><br /> + +The telnet client should display: <tt>Local Echo is on</tt></p> +</pre> + +<h4 id="نتيجة"><font><font>نتيجة</font></font></h4> + +<p>{{EmbedLiveSample("Basic_example", 650, 80)}}</p> + +<h3 id="تجاوز_الخط_الافتراضي"><font><font>تجاوز الخط الافتراضي</font></font></h3> + +<p>يمكنك تجاوز الخط الافتراضي للمتصفح - إذا كان المتصفح يسمح لك بذلك ، وهو أمر غير مطلوب - باستخدام CSS:</p> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">tt { + font-family: "Lucida Console", "Menlo", "Monaco", "Courier", + monospace; +}</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>Enter the following at the telnet command prompt: <code>set localecho</code><br /> + +The telnet client should display: <tt>Local Echo is on</tt></p></pre> + +<h4 id="نتيجة_2"><font><font>نتيجة</font></font></h4> + +<p>{{EmbedLiveSample("Overriding_the_default_font", 650, 80)}}</p> + +<h2 id="ملاحظات_الاستخدام"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tt$edit#Usage_notes" rel="nofollow, noindex"><font><font>ملاحظات الاستخدام</font></font></a></h2> + +<p> </p> + +<p><font><font>يتم تقديم </font></font><code><tt></code><font><font>العنصر افتراضيًا باستخدام الخط الافتراضي غير المتناسب في المستعرض. </font><font>يمكنك إلغاء ذلك باستخدام CSS عن طريق إنشاء قاعدة باستخدام </font></font><code>tt</code><font><font>المحدد ، كما هو موضح في المثال </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tt#Overriding_the_default_font"><font><font>تجاوز الخط الافتراضي</font></font></a><font><font> أعلاه.</font></font></p> + +<p> </p> + +<div class="note"> +<p> </p> + +<p><font><font>التغييرات التي تمت تهيئتها بواسطة المستخدم على إعداد خط أحادي المسافة الافتراضي قد تكون لها الأسبقية على CSS الخاص بك.</font></font></p> + +<p> </p> +</div> + +<p><font><font>على الرغم من أن هذا العنصر لم يتم إهماله رسميًا في HTML 4.01 ، إلا أنه تم تثبيط استخدامه بسبب العناصر الدلالية و / أو CSS. </font><font>و </font></font><code><tt></code><font><font>العنصر عفا عليه الزمن في HTML 5.</font></font></p> + +<h2 id="مواصفات"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tt$edit#Specifications" rel="nofollow, noindex"><font><font>مواصفات</font></font></a></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'obsolete.html#tt', '<tt>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'obsolete.html#elementdef-tt', '<tt>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<tt>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="التوافق_المتصفح"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tt$edit#Browser_compatibility" rel="nofollow, noindex"><font><font>التوافق المتصفح</font></font></a></h2> + + + +<p>{{Compat("html.elements.tt")}}</p> + +<h2 id="See_also" name="See_also"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tt$edit#See_also" rel="nofollow, noindex"><font><font>انظر أيضا</font></font></a></h2> + +<ul> + <li>The semantic {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("kbd")}}, and {{HTMLElement("samp")}} elements</li> + <li>The {{HTMLElement("pre")}} element for displaying preformatted text blocks</li> +</ul> + +<div>{{ HTMLRef }}</div> |