diff options
Diffstat (limited to 'files/ar/web/guide')
| -rw-r--r-- | files/ar/web/guide/css/getting_started/index.html | 43 | ||||
| -rw-r--r-- | files/ar/web/guide/css/getting_started/readable_css/index.html | 177 | ||||
| -rw-r--r-- | files/ar/web/guide/css/getting_started/القوائم/index.html | 383 | ||||
| -rw-r--r-- | files/ar/web/guide/css/index.html | 23 | ||||
| -rw-r--r-- | files/ar/web/guide/html/html5/html5_element_list/index.html | 598 | ||||
| -rw-r--r-- | files/ar/web/guide/html/html5/index.html | 178 | ||||
| -rw-r--r-- | files/ar/web/guide/index.html | 27 | ||||
| -rw-r--r-- | files/ar/web/guide/الرسومات/index.html | 47 |
8 files changed, 1476 insertions, 0 deletions
diff --git a/files/ar/web/guide/css/getting_started/index.html b/files/ar/web/guide/css/getting_started/index.html new file mode 100644 index 0000000000..2d395bee37 --- /dev/null +++ b/files/ar/web/guide/css/getting_started/index.html @@ -0,0 +1,43 @@ +--- +title: Getting started with CSS +slug: Web/Guide/CSS/Getting_started +tags: + - Beginner + - CSS + - 'CSS:Getting_Started' + - Guide + - Needs + - NeedsBeginnerUpdate + - NeedsTranslation + - NeedsUpdate + - TopicStub + - Web +translation_of: Learn/CSS/First_steps +--- +<p><span class="seoSummary">This tutorial introduces you to the basic features and language (the syntax) for <a href="/en-US/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS"><strong>Cascading Style Sheets</strong></a> (CSS). You use CSS to change the look of a structured document, such as a web page. The tutorial also includes sample exercises you can try on your own computer to see the effects of CSS and features that work in modern browsers. </span></p> +<p>The tutorial is for beginners and anyone who would like to review the basics of CSS. If you have more experience with CSS, the CSS main page <a href="/en-US/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS">lists</a> more advanced resources.</p> +<nav class="fancyTOC"> + <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/What_is_CSS" rel="next" title="Chapter 'What is CSS' of the CSS tutorial">What is CSS</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="Chapter 'Why use CSS' of the CSS tutorial">Why use CSS</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/How_CSS_works" title="Chapter 'How CSS works' of the CSS tutorial">How CSS works</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="Chapter 'Cascading and inheritance' of the CSS tutorial">Cascading and inheritance</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors" title="Chapter 'Selectors' of the CSS tutorial">Selectors</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="Chapter 'Readable_CSS' of the CSS tutorial">Readable CSS</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="Chapter 'Text_styles' of the CSS tutorial">Text styles</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Color" title="Chapter 'Color' of the CSS tutorial">Color</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="Chapter 'Content' of the CSS tutorial">Content</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Lists" title="Chapter 'Lists' of the CSS tutorial">Lists</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes" title="Chapter 'Boxes' of the CSS tutorial">Boxes</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout" title="Chapter 'Layout' of the CSS tutorial">Layout</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="Chapter 'Tables' of the CSS tutorial">Tables</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Media" title="Chapter 'Media' of the CSS tutorial">Media</a></nav> +<h2 id="What_you_need_to_get_started">What you need to get started</h2> +<ul> + <li>A text editor</li> + <li>A modern browser</li> + <li>Some experience working with a text editor and browser</li> +</ul> +<p>Although the exercises can help you learn, you are not required to complete them. You can simply read the tutorial and look at the pictures.</p> +<p><strong>Note:</strong> The tutorial covers how CSS works with color. It will be easier to complete these sections with a color display and normal color vision.</p> +<h2 id="How_to_use_this_tutorial">How to use this tutorial</h2> +<p>To use this tutorial, read the pages carefully and in sequence. If you skip a page, it may be difficult to understand pages later in the tutorial.</p> +<h3 id="Part_I_The_Basics_of_CSS">Part I: The Basics of CSS</h3> +<p>On each page, use the <em>Information</em> section to understand how CSS works. Use the <em>Action</em> section to try using CSS on your own computer.</p> +<p>To test your understanding, take the challenge at the end of each page. Solutions to the challenges are linked under the challenges, so you don't need to look at them if you don't want to.</p> +<p>To understand CSS in more depth, read the information that you find in boxes captioned <em>More details</em>. Use the links there to find reference information about CSS.</p> +<h3 id="Part_II_The_Scope_of_CSS">Part II: The Scope of CSS</h3> +<p>A second part of the tutorial provides examples, which show the scope of CSS with other web and Mozilla technologies.</p> +<ol> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/SVG_and_CSS" title="en/CSS/Getting_Started/SVG_graphics">SVG graphics</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">XML data</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL bindings</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">XUL user interfaces</a></li> +</ol> diff --git a/files/ar/web/guide/css/getting_started/readable_css/index.html b/files/ar/web/guide/css/getting_started/readable_css/index.html new file mode 100644 index 0000000000..f2b50b3cb7 --- /dev/null +++ b/files/ar/web/guide/css/getting_started/readable_css/index.html @@ -0,0 +1,177 @@ +--- +title: Readable CSS +slug: Web/Guide/CSS/Getting_started/Readable_CSS +translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable +--- +<p dir="rtl">{{ CSSTutorialTOC() }}</p> + +<p dir="rtl">{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}<span class="seoSummary">This is the 6th section of the <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> tutorial; it discusses the style and grammar of the CSS language itself. You change the way your sample CSS file looks, to make it more readable.</span></p> + +<h2 class="clearLeft" dir="rtl" id="معلومة_CSS_مقروء_(قابل_للقراءة_سهل_القراءة)">معلومة: CSS مقروء (قابل للقراءة = سهل القراءة)</h2> + +<p dir="rtl">يمكنك إضافة مساحات فارغة وأيضا تعليقات داخل ملف النمط لجعل الشيفرة البرمجية (code) أكثر قابلية وسهولة للقراءة. أيضا يمكنك تجميع العناصر المختلفة معا عندما تتطابق الخصائص بينهم.</p> + +<h3 dir="rtl" id="المساحة_الفارغة">المساحة الفارغة</h3> + +<p dir="rtl">المساحة الفارغة أوالبيضاء هي عبارة عن مسافات قد تكون مسافة من خطوة واحدة أو من عدة خطوات وقد تكون عبارة عن سطر جديد. يمكنك إضافة المساحات البيضاء إلى ملف النمط الخاص بك لجعله أكثر قابلية وسهولة للقراءة.</p> + +<p dir="rtl">في سياق تخطيط وتكوين الصفحة، المساحات الفارغة تكون جزءًا من الصفحة كمسافات بين الأعمدة والسطور أو كهوامش.</p> + +<p dir="rtl">يحتوي ملف النمط الخاص بك حاليا على قاعدة واحدة لكل سطر، وعدد أدنى من المساحات الفارغة أو البيضاء. في الأنماط المعقدة سيكون من الصعب قراءة ملف النمط، مما يجعل من الصعب الحفاظ عليها.</p> + +<p dir="rtl">التخطيط دائما ما يكون شَخْصِـيًّا، ولكن إذا كان ملف النمط بين مجموعة من الأفراد بصفته جزءً من مشاريع مشتركة، من المحتمل أن تلك المشاريع تحمل اتفاقيات خاصة بها يتم الأعتماد عليها والعمل بها.</p> + +<p dir="rtl"> </p> + +<div class="tuto_example" dir="rtl"> +<div class="tuto_type">Examples</div> + +<p>بعض الأشخاص يفضلون دمج الخصائص مع بعضها، فقط يقومون بتقسيم الخط عندما يصبح طويلا جدا:</p> + +<p dir="ltr">.carrot {color: orange; text-decoration: underline; font-style: italic;}</p> + +<p><br> + بعض الناس يفضلون خاصية واحدة لكل سطر:</p> + +<pre class="brush: css" dir="rtl">.carrot +{ +color: orange; +text-decoration: underline; +font-style: italic; +} +</pre> + +<p>بعض الأشخاص يستخدمون مسافتين أو أربع أو علامة التبويب الشائعة:</p> + +<pre class="brush: css">.carrot { + color: orange; + text-decoration: underline; + font-style: italic; +} +</pre> + +<p><br> + (بعض الأشخاص يفضلون جعل كل شيء عموديا (ولكن تخطيط مثل هذا من الصعب الحفاظ عليه.</p> + +<pre class="brush: css">.carrot + { + color : orange; + text-decoration : underline; + font-style : italic; + } +</pre> + +<p>بعض الأشخاص يستخدمون مزيج من المسافات الفارغة أو البيضاء لتعزيز سهولة القراءة.</p> + +<pre class="brush: css">.vegetable { color: green; min-height: 5px; min-width: 5px } +.vegetable.carrot { color: orange; height: 90px; width: 10px } +.vegetable.spinach { color: darkgreen; height: 30px; width: 30px } +</pre> +</div> + +<p dir="rtl">بعض الأشخاص يستخدمون علامة التبويب والبعض الآخر يستخدم فقط المسافات البيضاء.</p> + +<h3 dir="rtl" id="التعليقات">التعليقات<br> + </h3> + +<p dir="rtl">التعليقات في ملف النمط تبدأ بـ «*/» وتنتهي بـ«/*».<br> + <br> + يمكنك استخدام التعليقات في ملف النمط الخاص بك لكتابة تعليقات وتعليمات، وأيضا لكتابة تعليمات مؤقتة قد يكون الغرض منها هو اختبار العملية.<br> + <br> + التعليق في جزء من النمط، ضع هذا الجزء في تعليق بحيث يتجاهله المتصفح عند قراءة الملف، وكن حذرا في بداية ونهاية التعليق. بقية الأنماط والخصائص يجب أن يكون لها البنية الصحيحة.</p> + +<div class="tuto_example" dir="rtl"> +<div class="tuto_type">Example</div> + +<pre class="brush: css">/* style for initial letter C in first paragraph */ +.carrot { + color: orange; + text-decoration: underline; + font-style: italic; + } +</pre> +</div> + +<h3 dir="rtl" id="تجميع_العناصر_عندما_يكون_لمجموعة_من_العناصر_عدد_من_الخصائص_المتشابهة_في_النمط،_يمكنك_تجميع_العناصر_مع_الفصل_بينهم_بعلامة_فاصلة._وتـنطبق_هذة_الخصائص_على_جميع_العناصر_المجمعة.">تجميع العناصر<br> + <br> + <span style="font-size: 14px;">عندما يكون لمجموعة من العناصر عدد من الخصائص المتشابهة في النمط، يمكنك تجميع العناصر مع الفصل بينهم بعلامة فاصلة. وتـنطبق هذة الخصائص على جميع العناصر المجمعة.</span><br> + </h3> + +<p dir="rtl">في أماكن أخرى من ملف النمط يمكنك أيضا تجميع عدد من العناصر ولكن فرديا، وتطبيق خصائص فردية عليهم.</p> + +<div class="tuto_example" dir="rtl"> +<div class="tuto_type">Example</div> + +<p>This rule makes {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, and {{ HTMLElement("h3") }} elements the same color.</p> + +<p>إنها مناسبة لتحديد اللون لمجموعة من العناصر في مكان واحد، في حالة لابد من تغييرها.</p> + +<pre class="brush: css">/* color for headings */ +h1, h2, h3 {color: navy;} +</pre> +</div> + +<h2 dir="rtl" id="العمل_إضافة_تعليقات_و_تحسين_التخطيط">العمل: إضافة تعليقات و تحسين التخطيط</h2> + +<ol dir="rtl"> + <li>قم بتعديل ملف النمط الخاص بك، وقم بالتأكد أن لديها هذه القواعد في ذلك (في أي أمر): + <pre class="brush: css">strong {color: red;} +.carrot {color: orange;} +.spinach {color: green;} +#first {font-style: italic;} +p {color: blue;} +</pre> + </li> + <li>جعلها أكثر قابلية للقراءة من خلال إعادة ترتيبها بطريقة منطقية، وذلك من خلال إضافة مساحات بيضاء أو فارغة وأيضا تعليقات مناسبة.</li> + <li>قم بحفظ التعديلات واذهب إلى المتصفح لتشاهد الصفحة للتَّـأكد أنه لا يوجد أي تأثير على ملف النمط من خلال عمله. + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </li> +</ol> + +<div class="tuto_details" dir="rtl"> +<div class="tuto_type">تحدي</div> + +<div class="tuto_type"> </div> + +<p class="tuto_type">ضع تعليقا يوجد به جزء من ملف النمط الخاص بك، بدون تغيير أي شيء آخر ، لعمل أول حرف من الوثيقة أحمر اللون.</p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<p>(هناك العديد من الطرق لفعل ذلك)</p> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>One way to do this is to put comment delimiters around the rule for <code>.carrot</code>:</p> + +<pre class="brush: css">/*.carrot { + color: orange; +}*/</pre> + +<p><a class="hideAnswer" href="#challenge">Hide solution</a></p> +</div> + +<p><a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></p> +</div> + +<h2 dir="rtl" id="ما_التالي؟">ما التالي؟</h2> + +<h2 dir="rtl" id="nextPage(en-USdocsWebGuideCSSGetting_StartedText_styles_Text_styles)_Your_sample_stylesheet_has_used_italic_text_and_underlined_text._The_next_page_describes_more_ways_to_specify_the_appearance_of_text_in_your_document.">{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles") }}Your sample stylesheet has used italic text and underlined text. The next page describes more ways to <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" style="font-size: 14px; font-weight: normal;" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles">specify the appearance of text</a><span style="color: #3b3c40; font-size: 14px; font-weight: normal;"> in your document</span><strong style="color: #3b3c40; font-size: 14px;">.</strong></h2> diff --git a/files/ar/web/guide/css/getting_started/القوائم/index.html b/files/ar/web/guide/css/getting_started/القوائم/index.html new file mode 100644 index 0000000000..5490b5d1a7 --- /dev/null +++ b/files/ar/web/guide/css/getting_started/القوائم/index.html @@ -0,0 +1,383 @@ +--- +title: القوائم +slug: Web/Guide/CSS/Getting_started/القوائم +translation_of: Learn/CSS/Styling_text/Styling_lists +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p dir="rtl"> الصفحة السابقة هي ("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content") أما هذا الجزء فهو العاشِر في سلسلة تعليم لغة CSS على هذا الموقع <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a>، وهو يصف كيف يُمكن استخدام لغة الـCSS لتحديد مظهر القائمة. ستقوم بإنشاء مثال مستند يحتوي على قائمة بالـHTML وملف تنسيق بلغة الـCSS والذي من خلاله سوف نقوم بتنسيق القائمة التي قمنا بإنشَائها. </p> + +<h2 class="clearLeft" dir="rtl" id="معلومات_عن_القوائم">معلومات عن القوائم </h2> + +<p dir="rtl">لو نظرت إلى الجزء السابق، سوف يتضح لك كيف يمكن إضافة محتـوًى قبل أي عنصر بحيث يظهر وكأنّه عنصرٌ في قائمة.</p> + +<p dir="rtl">تقدم لغة الـCSS بعض الخواص المُصَمَّـمَـة للقائمة، والتي يجب استخدامها دائما مع القوائم.</p> + +<p dir="rtl">لتحديد نمط القائمة، عليك استخدام هذه الخاصية «<strong>list-style</strong>» وذلك لتحديد نوع العلامة الموجودة قبل كل عنصر في القائمة. </p> + +<div class="note" dir="rtl"> +<p>من الممكن أن يتم اختيار القائمة ككل بهذا الوسم «<em>ul</em>» أو اختيار عنصر بداخل القائمة من خلال هذا الوسم «<em>li</em>». </p> + +<p>وعند اختيار القائمة ككل فإنَّ هذا الوسم يسمى الأب للقائمة وهو«<em>ul</em>»، ويورث الخواص التى تٌطبق عليه لكُـلِّ عنصر في القائمة. </p> +</div> + +<h3 dir="rtl" id="القوائم_غير_المرتبة">القوائم غير المرتبة</h3> + +<p dir="rtl"> في القوائم غير المُرَتَّـبة، يكون كل عنصر من القائمة معَلَّــمًا بنفس الطريقة. </p> + +<p dir="rtl"> يوجد ثلاثة أنواع من العلامات، وأدناه هي كيفية عرض المتصفح لهذه العلامات:</p> + +<p dir="rtl">• disc قرص </p> + +<p dir="rtl">○ circle دائرة</p> + +<p dir="rtl">◘ square مربع</p> + +<p dir="rtl">بدلا من ذلك، يمكن تحديد رابط صورة لاستخدامها كعلامة للعناصر بدل من العلامات السابقة.</p> + +<div class="tuto_example"> +<h3 dir="rtl" id="مثال">مثال </h3> + +<p dir="rtl"> هذه القواعد تُـوَضِّح علامات مختلفة لأصناف (classes) مختلفة من عناصر القائمة:</p> + +<pre class="brush:css" dir="rtl">li.open { + list-style: circle; +} +li.closed { + list-style: disc; +} +</pre> + +<p dir="rtl">عندما يتم استعمال هذه الأصناف (classes) في قائمة، تقوم بالتمييز بين العناصر المفتوحة والمغلقة (مثلًا في قائمة مهامّ).</p> + +<pre class="brush: html" dir="rtl"><ul> + <li class="open">Lorem ipsum</li> + <li class="closed">Dolor sit</li> + <li class="closed">Amet consectetuer</li> + <li class="open">Magna aliquam</li> + <li class="closed">Autem veleum</li> +</ul> +</pre> + +<p dir="rtl">وهكذا تبدو النتيجة: </p> + +<div class="syntaxbox"> ○ Lorem ipsum</div> + +<div class="syntaxbox"> • Dolor sit</div> + +<div class="syntaxbox"> • Amet consectetuer</div> + +<div class="syntaxbox"> ○ Magna aliquam</div> + +<div class="syntaxbox"> • Autem veleum</div> + +<div class="syntaxbox"> </div> +</div> + +<h3 dir="rtl" id="القوائم_المُـرَتَّـبة">القوائم المُـرَتَّـبة </h3> + +<p dir="rtl">في القوائم المُرتّبة، يكون لكل عنصر علامة مختلفة تُميّز موضعه في القائمة.</p> + +<p dir="rtl">استخدم الخاصية «list-style» لتعيين نمط القائمة، لتحديد نوع العلامة التي تظهر قبل كل عنصرفي القائمة.</p> + +<ul style="padding-left: 2em;"> + <li style=""><code>decimal (تعداد بأرقام عشرية)</code></li> + <li style=""><code>lower-roman (تعداد بحروف رومانية صغيرة)</code></li> + <li style=""><code>upper-roman (تعداد بحروف رومانية كبيرة)</code></li> + <li style=""><code>lower-latin (تعداد بحروف لاتيتنية صغيرة)</code></li> + <li style=""><code>upper-latin (تعداد بحروف لاتينية كبيرة)</code></li> +</ul> + +<div class="tuto_example"> +<div class="tuto_type" dir="rtl"> </div> + +<h4 class="tuto_type" dir="rtl" id="مثال_2">مثال </h4> + +<div class="tuto_type" dir="rtl">القاعدة التّالية تجعل العناصر في القائمة المرتّبة <ol> والتي تٌميز بصنف .«info» مُرتبة بحروف لاتينية كبيرة. </div> + +<div class="tuto_type" dir="rtl"> </div> + +<pre class="brush: html"><ol class="info"> + <li>Lorem ipsum</li> + <li>Dolor sit</li> + <li>Amet consectetuer</li> + <li>Magna aliquam</li> + <li>Autem veleum</li> +</ol></pre> + +<pre class="brush:css">ol.info { + list-style: upper-latin; +} +</pre> + +<div class="note" dir="rtl"> +<p>عند تطبيق خاصية النمط على الـ «<em>ol</em>» يُوَرِّثُ هذه الخاصية إلى الأبناء وهم عناصر القائمة المرتبة وهي العناصر المسبوقة بوسم «<em>li</em>».</p> +</div> + +<p dir="rtl">فتكون النتيجة كالتالي:</p> + +<div class="syntaxbox">ِA. Lorem ipsum</div> + +<div class="syntaxbox">B. Dolor sit</div> + +<div class="syntaxbox">C. Amet consectetuer</div> + +<div class="syntaxbox">D. Magna aliquam</div> + +<div class="syntaxbox">E. Autem veleum</div> +</div> + +<div class="tuto_details"> +<div class="tuto_type"> +<h3 dir="rtl" id="تفاصيل_أكثر">تفاصيل أكثر </h3> + +<div class="syntaxbox" dir="rtl">الخاصية «list-style» هي خاصية مختصرة أي أنه من الممكن استخدامها إذا أردت أن يكون نمط القائمة سواء كان </div> + +<div class="syntaxbox" dir="rtl"> (صورة أو رقم أو شكل أو حرف )</div> + +<div class="syntaxbox" dir="rtl"> ولكن يمكن أن تستخدم خواص منفردة لكل شكل على حدة وليكن للصورة لها خاصية محددة مثل «list-style-image» </div> + +<p dir="rtl">يمكنك مراجعة هذه الخاصية وما بها من تفاصيل من خلال هذه الصفحة <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style">list style</a> </p> + +<div class="syntaxbox" dir="rtl">إن كنت تستخدم لغة HTML فإنها تُـوفر وسوما مُختلفة، فعلى سبيل المثال للقوائم المرتبة يُستخدم هذا الوسم «ol»</div> + +<div class="syntaxbox" dir="rtl">والقوائم الغير مرتبة «ul»</div> + +<div class="syntaxbox" dir="rtl"> فيفضّل استخدام هذه القوائم بحسب دلالتها ولكن من الممكن إذا أردت أن تجعل القوائم المرتبة كغير المرتبة شكلا </div> + +<div class="syntaxbox" dir="rtl">والعكس، فذلك يتم من خلال الـCSS أيضا يتم كل هذا باستخدام الخواص المختلفة لتحصل على ما تريد من نتائج </div> + +<div class="syntaxbox" dir="rtl">ولكن يُفَضَّـل أن تُسْتَخدم كل قائمة حسب وضعها والاستخدام الخاص بها. </div> + +<div class="syntaxbox" dir="rtl"> </div> + +<p dir="rtl">قد تختلف المتصفّحات في طرق عرضها لتنسيق القوائم، لا يُمكن أن تحصُل على نفس النتيجة في كل المتصفحات. </p> +</div> +</div> + +<h3 dir="rtl" id="العَـدَّادَات">العَـدَّادَات</h3> + +<div dir="rtl" style="border: 1px solid red; padding: 6px; margin: 0px -6px 0.5em 0px; width: 100%;"> +<p><strong>ملاحظة هامّة</strong>:</p> + +<div class="syntaxbox"> بعض المتصفحات لا تدعم العدّادات، تقدّم هذه الصّفحة <a href="http://www.quirksmode.org/css/contents.html">CSS contents and browser comptability</a> على موقع <a href="http://www.quirksmode.org/">QuirksMode</a> معلومات تفصيلية عن دعم المتصفحات لهذه الميزة وميزات أخرى.</div> + +<div class="syntaxbox">كما توفّر الصّفحات الفرديّة في <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference" rel="external noopener noreferrer">CSS</a> مرجعا للمعلومات عن دعم المتصفحات أيضا لهذه الخاصية وغيرها.</div> +</div> + +<p> </p> + +<div class="syntaxbox" dir="rtl">يُمكن استخدام العدّادات لعدّ أيّة عناصر، وليس فقط عناصر القوائم، فمثلًا يمكن عدّ العناوين والفقرات في المستند.</div> + +<div class="syntaxbox" dir="rtl">تحتاج إلى إنشاء عدّاد counter باسم خاص بك لتستخدمه فى العّد.</div> + +<div class="syntaxbox" dir="rtl"> </div> + +<div class="syntaxbox" dir="rtl"> يمكن تهيئة العدّاد قبل البدء بالعدّ باستخدام الخاصية «counter-reset» واسم العدادَ الخاص بك الذي أنشأته. </div> + +<div class="syntaxbox" dir="rtl">وعليك أن تعلم أن الأب للعنصر الذي تقوم بِعده هو المكان الأنسب لتهيئة العّداد، ولكن يمكن استخدام أي عنصر يأتي قبل العناصر المطلوب عدّها.</div> + +<div class="syntaxbox"> </div> + +<div class="syntaxbox" dir="rtl"> في كلّ عنصر ترغب بعدّه، استخدم الخاصية «counter-increment» مع اسم العّداد الذي تٌريده.</div> + +<div class="syntaxbox" dir="rtl"> استخدم «befor» ،«:after:» لعرض العدّاد، مع استخدام هذه الخاصية «content» مع العنصر المٌحدد المُراد عّده (سيتم شرح ذلك لاحقاَ).</div> + +<div class="syntaxbox" dir="rtl">يمكنك معرفة معلومات أكثر عن هذه الخاصية في هذه الصفحة <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Content">Content</a>. </div> + +<div class="syntaxbox"> </div> + +<h4 class="syntaxbox" dir="rtl" id="استخدام_()counter_مع_اسم_العّداد_كقيمة_لـcontent">استخدام ()counter مع اسم العّداد كقيمة لـcontent </h4> + +<div class="syntaxbox" dir="rtl">ويمكن كذلك استخدام نوع للعلامة فى العد. الأنواع المُتاحة هي التي تم عرضها في فقرة القوائم المرتّبة.</div> + +<p dir="rtl">عادةً يزيد العنصر الّذي يعرض العدّاد من قيمته. </p> + +<div class="tuto_example"> +<div class="tuto_type" dir="rtl"> مثال </div> + +<div class="tuto_type" dir="rtl"> </div> + +<div class="tuto_type" dir="rtl"> هذه القاعدة تُنشئ عدّادًا لكلّ عنصر<h3> له تصنيف (كلاس) «numbered»: </div> + +<pre class="brush:css">h3.numbered { + counter-reset: mynum; +} +</pre> + +<p dir="rtl"> أما هذه القاعدة فهى تعرض عّداد الـ <p> والتي لها تصنيف «numbered»</p> + +<pre class="brush: html"><p class="numbered">Lorem ipsum</p> +<p class="numbered">Dolor sit</p> +<p class="numbered">Amet consectetuer</p> +<p class="numbered">Magna aliquam</p> +<p class="numbered">Autem veleum</p> +</pre> + +<pre class="brush:css">body { + counter-reset: mynum; +} +p.numbered:before { + content: counter(mynum) ": "; + counter-increment: mynum; + font-weight: bold; +} +</pre> + +<p dir="rtl">والنتيجة ستبدُو هكذا:</p> + +<div class="syntaxbox"><strong>1:</strong> Lorem ipsum</div> + +<div class="syntaxbox"><strong>2:</strong> Dolor sit</div> + +<div class="syntaxbox"><strong>3:</strong> Amet consectetuer</div> + +<div class="syntaxbox"><strong>4:</strong> Magna aliquam</div> + +<div class="syntaxbox"><strong>5:</strong> Autem veleum</div> + +<div class="syntaxbox"> </div> +</div> + +<div class="tuto_details"> +<div class="tuto_type" dir="rtl">تفاصِيل أكثر </div> + +<div class="syntaxbox" dir="rtl"> </div> + +<div class="syntaxbox" dir="rtl"> لا تستطيع استخدام العَدادات إلا إذا تيقنت من أنَ كل شخص يستخدم العدادات يستعمل متصفحاً يُدعمها. </div> + +<div class="syntaxbox" dir="rtl"> العًدادات بها مِيزات ويمكن تنسيقها منفصلة عن عنصر القَائمة المرافِقة لها كما في المثال السابق </div> + +<div class="syntaxbox" dir="rtl">ترى أن العًدادات لها تنسيق خاص فهي بِخط عريض غير عناصر القّائمة. </div> + +<div class="syntaxbox" dir="rtl"> </div> + +<div class="syntaxbox" dir="rtl">يمكن أيضًا استخدام العدّادات بطرق أكثر تعقيدًا؛ مثلًا: لعدّ الفقرات والعناوين والعناوين الفرعيّة والفقرات في المستندات الرسمية.</div> + +<div class="syntaxbox" dir="rtl"> ولتفاصِيل أكثر عليك الرجوع إلى هذِه الصفحة <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a>.</div> +</div> + +<h2 dir="rtl" id="تمرين_قوائم_مُنسقة">تمرين: قوائم مُنسقة</h2> + +<p dir="rtl"> قم بإنشاء ملف HTML باسم doc2.html، انسخ والصق هذا المحتوى إلى الملف الخاص بك:</p> + +<pre class="brush:html;"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document 2</title> + <link rel="stylesheet" href="style2.css"> + </head> + <body> + + <h3 id="oceans">The oceans</h3> + <ul> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + + <h3 class="numbered">Numbered paragraphs</h3> + <p class="numbered">Lorem ipsum</p> + <p class="numbered">Dolor sit</p> + <p class="numbered">Amet consectetuer</p> + <p class="numbered">Magna aliquam</p> + <p class="numbered">Autem veleum</p> + + </body> +</html> +</pre> + +<p dir="rtl"> قم بإنشاء ملف CSS وقُم بتسميته style2.css، انسخ والصق هذه الشيفرة البرمجية إلى صفحتك:</p> + +<pre class="brush:css;">/* numbered paragraphs */ +h3.numbered {counter-reset: mynum;} + +p.numbered:before { + content: counter(mynum) ": "; + counter-increment: mynum; + font-weight: bold; +} +</pre> + +<p dir="rtl">قم بتغيير أسلوب التعليقات كما تحبّ إن لم يعجبك هذا.</p> + +<p dir="rtl">افتح الملف على المٌتصفح الخاص بِك. إذا كان متصفحط يَدعم العّدادات سوف ترى النتيجة كما هي موضحة أدناه، وإن لم يكُن يُدعمها فلن ترى إلاَّ الأرقام والنُقتطان قبل القائمة التي هي بعنوان «Numbered paragraphs» :</p> + +<h3 id="The_oceans">The oceans</h3> + +<div class="syntaxbox">Arctic</div> + +<div class="syntaxbox">Atlantic</div> + +<div class="syntaxbox">Pacific</div> + +<div class="syntaxbox">Indian</div> + +<div class="syntaxbox">Southern</div> + +<h3 id="Numbered_paragraphs">Numbered paragraphs</h3> + +<div class="syntaxbox"><strong>1:</strong>Lorem ipsum</div> + +<div class="syntaxbox"><strong>2:</strong>Dolor sit</div> + +<div class="syntaxbox"><strong>3:</strong>Amet consectetuer</div> + +<div class="syntaxbox"><strong>4:</strong>Magna aliquam</div> + +<div class="syntaxbox"><strong>5:</strong>Autem veleum</div> + +<div class="tuto_example"> +<div class="tuto_type" dir="rtl"> تمرين إضافي </div> + +<div class="syntaxbox" dir="rtl"> أضِف قاعدة لملف التنسيق الخاص بك بحيث تجعل النمط قبل عناصِر القائِمة بحروف رومانية من i إلى v، بحيث تحصل على هذه النتيجة: </div> + +<div class="syntaxbox" dir="rtl"> </div> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 0 6em 1em 1em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p> + + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p dir="rtl">وقم بتغييرها مرة أُخرى إلى حروف لاتينية كبيرة قبل عناصرالقائمة، وستكون النتيجة هكذا: </p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 0 6em 1em 1em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(A) The oceans</p> + + <p><strong>. . .</strong></p> + + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(B) Numbered paragraphs</p> + + <p><strong>. . .</strong></p> + </td> + </tr> + </tbody> +</table> +</div> + +<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Lists" title="en-US/docs/Web/Guide/CSS/Getting started/Challenge solutions#Lists">See solutions to these challenges.</a></p> + +<h2 dir="rtl" id="ما_هو_القادم_؟">ما هو القادم ؟</h2> + +<p dir="rtl">الصفحة القادمو هي ("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Boxes")</p> + +<p dir="rtl">عندما يعرض المتصفّح مستند الخاص بك، فإِنه يُنشئ مساحات حول العناصر عندما يضعها في مواضعها في الصّفحة. الصفّحة القادِمة تصف كيف يُمكن استخدام لغة الـCSS لتَّعامل مع هذه الأشكال من خلال الـ<a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes" title="en-US/docs/Web/Guide/CSS/Getting_Started/Boxes">boxes</a>.</p> diff --git a/files/ar/web/guide/css/index.html b/files/ar/web/guide/css/index.html new file mode 100644 index 0000000000..20621b40b0 --- /dev/null +++ b/files/ar/web/guide/css/index.html @@ -0,0 +1,23 @@ +--- +title: CSS developer guide +slug: Web/Guide/CSS +tags: + - CSS + - Guide + - Landing + - NeedsTranslation + - TopicStub +translation_of: Learn/CSS +--- +<p>{{draft}}</p> +<p><span class="seoSummary">Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML</span> or other markup languages such as SVG<span class="seoSummary">. CSS describes how the structured elements in the document are to be rendered on screen, on paper, in speech, or on other media.</span> The ability to adjust the document's presentation depending on the output medium is a key feature of CSS.</p> +<p>CSS is one of the core languages of the open Web and has a standardized <a class="external" href="http://w3.org/Style/CSS/#specs">W3C specification</a>.</p> +<p>{{LandingPageListSubpages}}</p> +<h2 id="Pages_elsewhere">Pages elsewhere</h2> +<p>Here are other pages related to CSS that should be linked to from here.</p> +<h2 id="See_also">See also</h2> +<ul> + <li><a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/HTML">CSS</a></li> + <li><a href="/en-US/docs/Web/Reference" title="/en-US/docs/Web/Reference">Web developer reference</a></li> + <li><a href="/en-US/docs/Web/Guide" title="/en-US/docs/Web/Guide">Web developer guide</a></li> +</ul> diff --git a/files/ar/web/guide/html/html5/html5_element_list/index.html b/files/ar/web/guide/html/html5/html5_element_list/index.html new file mode 100644 index 0000000000..141eb69ef0 --- /dev/null +++ b/files/ar/web/guide/html/html5/html5_element_list/index.html @@ -0,0 +1,598 @@ +--- +title: مجموعه عناصر لغة HTML5 +slug: Web/Guide/HTML/HTML5/HTML5_element_list +tags: + - اتش تي ام ال + - اتش تي ام ال 5 + - المبتدئين + - الويب + - انترنت + - دليل + - وسوم +translation_of: Web/HTML/Element +--- +<p dir="rtl">كل <strong>عناصر HTML5 المعتمدة</strong> مدرجة هنا، حيث أن اسماءها تصفها ومرتبة في مجموعات حسب وظائفها.</p> + +<p dir="rtl">على عكس <a href="/en-US/docs/HTML/Element" title="فهرس عناصر HTML">فهرس عناصر HTML </a>الذي يشمل جميع عناصر HTML بما فيها المعتمدة وغير المعتمدة والصالحة والمهملة والملغية أيضًا، هذه الصفحة تتضمن عناصر HTML5 الصالحة فقط، العناصر الموجودة هنا هي التي يتوجب أن تستعمل في إنشاء المواقع الجديدة.</p> + +<p dir="rtl">العلامة <a href="/en-US/docs/HTML/HTML5"><img alt="This element was added as part of HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a> ترمز إلى أن العنصر قد تمت إضافته في HTML5، لاحظ أن العناصر الأخرى الموجودة هنا قد تكون ممددة أو معدلة في معانيها ضمن مواصفات HTML5.</p> + +<h2 dir="rtl" id="عنصر_الجذر">عنصر الجذر</h2> + +<table class="standard-table" dir="rtl"> + <thead> + <tr> + <th scope="col">العنصر</th> + <th scope="col">نبذة عنه</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("html")}}</td> + <td>وهو يمثل جذر الـ HTML أو مستند XHTML و <font>يجب أن تكون جميع العناصر الأخرى من نسل هذا العنصر.</font></td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="البيانات_الرئيسة_للوثيقة">البيانات الرئيسة للوثيقة</h2> + +<table class="standard-table" dir="rtl"> + <thead> + <tr> + <th scope="col">العنصر</th> + <th scope="col">نبذة عنه</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("head")}}</td> + <td>وهو يمثل مجموعة من البيانات الوصفية حول الوثيقة بما في ذلك الوصلات أو تعريفات و البرامج النصية والسكريبتات و انماط الـ CSS .</td> + </tr> + <tr> + <td>{{HTMLElement("title")}}</td> + <td>يحدد عنوان الوثيقة كما هو موضح في شريط عنوان المتصفح أو في علامة التبويب الصفحة <font>ولابد أن يحتوي على نصوص فقط لا غير .</font></td> + </tr> + <tr> + <td>{{HTMLElement("base")}}</td> + <td>وهو يحدد الرابط الفتراضي للوثيقة كي يتم من خلاله فرز الروابط المنتسبة لصفحة من الرابط التابعه لاجناس اخرى .</td> + </tr> + <tr> + <td>{{HTMLElement("link")}}</td> + <td>وهو يستخدم لربط ملفات ألـ CSS والـ Javascript الخارجي مع وثيقة HTML .</td> + </tr> + <tr> + <td>{{HTMLElement("meta")}}</td> + <td>يستخدم لتعريف العناصر التي لايمكن تعريفها مثل الترميز وغير من الاستخدامات الاخرى .</td> + </tr> + <tr> + <td>{{HTMLElement("style")}}</td> + <td>يستخدم لكتابة CSS داخل وثيقة HTML .</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="البرمجة">البرمجة</h2> + +<table class="standard-table" dir="rtl"> + <thead> + <tr> + <th scope="col">العنصر</th> + <th scope="col">نبذة عنه</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("script")}}</td> + <td>يستخدم لربط ملف نصي برمجي خارجي او تضمين ملف نص برمجي ويمكن الكتابة داخله بالغات متعدده مثل javascript او php و غيره .</td> + </tr> + <tr> + <td>{{HTMLElement("noscript")}}</td> + <td>يحدد محتوى بديل لعرضه عندما لا يدعم المتصفح البرمجة .</td> + </tr> + <tr> + <td>{{HTMLElement("template")}}<a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>حاوية للمحتوى العميل أثناء وقت التشغيل باستخدام جافا سكريبت .</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="اقسام_التضمين">اقسام التضمين</h2> + +<table class="standard-table" dir="rtl"> + <thead> + <tr> + <th scope="col">العنصر</th> + <th scope="col">نبذة عنه</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("body")}}</td> + <td> + <div>وهو يمثل محتوى وثيقة HTML ولابد ان تكون كل العناصر الضاهره في الجسم داخلة .</div> + </td> + </tr> + <tr> + <td>{{HTMLElement("section")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل قطعه في في المستند .</td> + </tr> + <tr> + <td>{{HTMLElement("nav")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يحدد المقطع الذي يحتوي على ارتباطات التنقل .</td> + </tr> + <tr> + <td>{{HTMLElement("article")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يحدد محتوى منفصل بذاته والذي يمكن أن يوجد بشكل مستقل عن بقية المحتوى.</td> + </tr> + <tr> + <td>{{HTMLElement("aside")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يعرف بعض المحتويات التي لها علاقة فضفاضة إلى محتوى الصفحة. إذا تم إزالته ، والمحتوى المتبقية لا يزال من المنطقي .</td> + </tr> + <tr> + <td><a href="/en-US/docs/HTML/Element/Heading_Elements"><code><h1>,<h2>,<h3>,<h4>,<h5>,<h6></code></a></td> + <td>وهو يمثل 6 مستويات من عناوين النصية واكبرهم حجماً <h1> وعكسه <h6></td> + </tr> + <tr> + <td>{{HTMLElement("header")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يحدد محتوى بذاتها التي يمكن أن توجد بشكل مستقل عن بقية المحتوى . </td> + </tr> + <tr> + <td>{{HTMLElement("footer")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>>يحدد تذييل للصفحة أو قسم فإنه غالبا ما يحتوي على إشعار حقوق التأليف والنشر وبعض الروابط على المعلومات القانونية أو عناوين .</td> + </tr> + <tr> + <td>{{HTMLElement("address")}}</td> + <td>يعرف الجزء الذي يحتوي على معلومات للإتصال به.</td> + </tr> + <tr> + <td>{{HTMLElement("main")}}<a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يحدد المحتوى الرئيسي أو مهم في الوثيقة. هناك واحد فقط <main> عنصر في الوثيقة.</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="جداول_البيانات">جداول البيانات</h2> + +<table class="standard-table" dir="rtl"> + <thead> + <tr> + <th scope="col">العنصر</th> + <th scope="col">نبذة عنه</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("p")}}</td> + <td>يحدد الجزء الذي يجب أن يتم عرض كفقرة .</td> + </tr> + <tr> + <td>{{HTMLElement("hr")}}</td> + <td>يمثل خط فاصل بين موضوعين .</td> + </tr> + <tr> + <td>{{HTMLElement("pre")}}</td> + <td>يحدد النص المكتوب كما هو بالسطر وافراغ .</td> + </tr> + <tr> + <td>{{HTMLElement("blockquote")}}</td> + <td> + <p>يمثل المحتوى الذي يتم نقلا عن مصدر آخر.</p> + </td> + </tr> + <tr> + <td>{{HTMLElement("ol")}}</td> + <td>يحدد قائمة مرتبة مرقمة من العناصر .</td> + </tr> + <tr> + <td>{{HTMLElement("ul")}}</td> + <td>يحدد قائمة غير مرتبة من البنود.</td> + </tr> + <tr> + <td>{{HTMLElement("li")}}</td> + <td>يحدد عنصر من قائمة التعداد.</td> + </tr> + <tr> + <td>{{HTMLElement("dl")}}</td> + <td>تعرف على قائمة تعريف ، وهذا هو ، على قائمة المصطلحات والتعاريف المرتبطة بها .</td> + </tr> + <tr> + <td>{{HTMLElement("dt")}}</td> + <td>يمثل مصطلح يعرفه القادم < DD > .<dd>.</td> + </tr> + <tr> + <td>{{HTMLElement("dd")}}</td> + <td>يمثل تعريف المصطلحات الواردة فورا قبل ذلك.</td> + </tr> + <tr> + <td>{{HTMLElement("figure")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل الرقم يتضح كجزء من الوثيقة.</td> + </tr> + <tr> + <td>{{HTMLElement("figcaption")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل أسطورة شخصية .</td> + </tr> + <tr> + <td>{{HTMLElement("div")}}</td> + <td>يمثل وعاء العامة مع عدم وجود معنى خاص .</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="عناصر_النصوص">عناصر النصوص</h2> + +<table class="standard-table" dir="rtl"> + <thead> + <tr> + <th scope="col">العنصر</th> + <th scope="col">نبذة عنه</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("a")}}</td> + <td>يمثل <em>الارتباط التشعبي</em> وربط إلى مورد آخر .</td> + </tr> + <tr> + <td>{{HTMLElement("em")}}</td> + <td>يمثل خط مائل .</td> + </tr> + <tr> + <td>{{HTMLElement("strong")}}</td> + <td> يمثل خط مشدد .</td> + </tr> + <tr> + <td>{{HTMLElement("small")}}</td> + <td>يمثل خط نحيف .</td> + </tr> + <tr> + <td>{{HTMLElement("s")}}</td> + <td>يمثل نص مشطوب او محذوف</td> + </tr> + <tr> + <td>{{HTMLElement("cite")}}</td> + <td> + <p>يمثل عنوان العمل. .</p> + </td> + </tr> + <tr> + <td>{{HTMLElement("q")}}</td> + <td>يمثل الاقتباس المضمنة. .</td> + </tr> + <tr> + <td>{{HTMLElement("dfn")}}</td> + <td>يمثل مصطلح الذي يرد في أقرب محتوى الجد التعريف.</td> + </tr> + <tr> + <td>{{HTMLElement("abbr")}}</td> + <td>يمثل اختصار أو اختصار . التوسع في اختصار يمكن أن تكون ممثلة في سمة العنوان.</td> + </tr> + <tr> + <td>{{HTMLElement("data")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>الزميلة ل محتواه ما يعادل المقروءة آليا . ( هذا العنصر فقط في إصدار WHATWG للمعيار HTML ، و ليس في الإصدار W3C من HTML5</td> + </tr> + <tr> + <td>{{HTMLElement("time")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل قيمة التاريخ والوقت . أي ما يعادل المقروءة آليا يمكن أن تكون ممثلة في سمة التاريخ والوقت .</td> + </tr> + <tr> + <td>{{HTMLElement("code")}}</td> + <td>يمثل عنصر يكتب بداخله الكود</td> + </tr> + <tr> + <td>{{HTMLElement("var")}}</td> + <td>يمثل المتغير ، وهذا هو ، تعبير أو البرمجة الرياضية السياق الفعلي ، معرف تمثل ثابت ، رمزا تحديد الكمية الفعلية ، معلمة وظيفة ، أو مجرد نائب في النثر .</td> + </tr> + <tr> + <td>{{HTMLElement("samp")}}</td> + <td>يمثل الناتج من برنامج أو جهاز كمبيوتر .</td> + </tr> + <tr> + <td>{{HTMLElement("kbd")}}</td> + <td>تمثل مدخلات المستخدمين، في كثير من الأحيان من لوحة المفاتيح ، ولكن ليس بالضرورة . قد تمثل المدخلات الأخرى ، مثل الأوامر الصوتية كتب .</td> + </tr> + <tr> + <td>{{HTMLElement("sub")}},{{HTMLElement("sup")}}</td> + <td>يمثل نص منخفظ او مرتفع</td> + </tr> + <tr> + <td>{{HTMLElement("i")}}</td> + <td>تمثل بعض النص في صوت بديل أو المزاج، أو على الأقل من نوعية مختلفة ، مثل تسمية التصنيف، مصطلح تقني ، عبارة اصطلاحية ، الفكر، أو اسم السفينة</td> + </tr> + <tr> + <td>{{HTMLElement("b")}}</td> + <td>يمثل نص مشدد .</td> + </tr> + <tr> + <td>{{HTMLElement("u")}}</td> + <td>يمثل annoatation غير النصية التي العرض التقليدية و التسطير ، واصفة هذا النص كما يجري أخطأ في الهجاء أو وصفها الاسم الصحيح في النص الصيني</td> + </tr> + <tr> + <td>{{HTMLElement("mark")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل نص مشار اليه بالون الاصفر</td> + </tr> + <tr> + <td>{{HTMLElement("ruby")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل المحتوى إلى أن تكون علامة مع شروح روبي ، المديين القصير من النص قدمت جنبا إلى جنب مع النص. وكثيرا ما يستخدم هذا بالتزامن مع لغة شرق آسيا حيث تعمل شروح كدليل للنطق ، مثل furigana الياباني . .</td> + </tr> + <tr> + <td>{{HTMLElement("rt")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل نص الشرح روبي .</td> + </tr> + <tr> + <td>{{HTMLElement("rp")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل قوسين حول الشرح روبي ، وتستخدم لعرض الشرح بطريقة بديلة من قبل المتصفحات لا تدعم العرض القياسية ل شروحه.</td> + </tr> + <tr> + <td>{{HTMLElement("bdi")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل النص الذي يجب أن تكون معزولة عن محيطها ل تنسيق النص ثنائي الاتجاه . لأنها تتيح تضمين فترة من النص مع مختلف أو غير معروف، الاتجاهية .</td> + </tr> + <tr> + <td>{{HTMLElement("bdo")}}</td> + <td>يمثل اتجاهها من أبنائها ، من أجل تجاوز صراحة خوارزمية ثنائية الاتجاه يونيكود</td> + </tr> + <tr> + <td>{{HTMLElement("span")}}</td> + <td>يمثل النص مع عدم وجود معنى محدد . هذا لابد من استخدامها عند ينقل أي عنصر النص الدلالي الآخرين معنى كاف، وهو ، في هذه الحالة، وغالبا ما رفعتها سمات عالمية مثل الطبقة ، لانج ، أو دير.</td> + </tr> + <tr> + <td>{{HTMLElement("br")}}</td> + <td>يمثل سطر جديد</td> + </tr> + <tr> + <td>{{HTMLElement("wbr")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل فرصة كسر خط ، وهذا هو نقطة المقترحة لل التفاف النص من أجل تحسين إمكانية القراءة من تقسيم النص على عدة أسطر .</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="التعديلات">التعديلات</h2> + +<table class="standard-table" dir="rtl"> + <thead> + <tr> + <th scope="col">العنصر</th> + <th scope="col">نبذة عنه</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("ins")}}</td> + <td>عنصر مضاف او تم تعديله</td> + </tr> + <tr> + <td>{{HTMLElement("del")}}</td> + <td>عنصر محذوف وهو مثيل العنصر {{HTMLElement("s")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="التضمين_و_الميديا">التضمين و الميديا</h2> + +<table class="standard-table" dir="rtl"> + <thead> + <tr> + <th scope="col">العنصر</th> + <th scope="col">نبذة عنه</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("img")}}</td> + <td>يستخدم لربط الصور بالوثيقه</td> + </tr> + <tr> + <td>{{HTMLElement("iframe")}}</td> + <td>يمثل السياق تصفح متداخلة ، وهذا هو وثيقة HTML المضمنة.</td> + </tr> + <tr> + <td>{{HTMLElement("embed")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>تمثل نقطة التكامل ل خارجي ، في كثير من الأحيان غير HTML ، تطبيق أو المحتوى التفاعلي .</td> + </tr> + <tr> + <td>{{HTMLElement("object")}}</td> + <td>تمثل الموارد الخارجية ، التي تعامل على أنها صورة، وثيقة الفرعية HTML ، أو الموارد الخارجية التي سيتم تجهيزها من قبل في المكونات .</td> + </tr> + <tr> + <td>{{HTMLElement("param")}}</td> + <td>تعرف المعلمات للاستخدام من قبل المكونات الإضافية التي يحتج بها <كائن > العناصر.</td> + </tr> + <tr> + <td>{{HTMLElement("video")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل الفيديو ، والملفات المرتبطة به الصوت و تعليق عليها، مع واجهة اللازمة لتشغيله .</td> + </tr> + <tr> + <td>{{HTMLElement("audio")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل الصوت ، أو تيار الصوت.</td> + </tr> + <tr> + <td>{{HTMLElement("source")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يسمح المؤلفين لتحديد الموارد وسائل الإعلام البديلة ل عناصر الوسائط مثل {{HTMLElement("video")}} or {{HTMLElement("audio")}}.</td> + </tr> + <tr> + <td>{{HTMLElement("track")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يسمح المؤلفين لتحديد مسار النص توقيت ل عناصر الوسائط مثل {{HTMLElement("video")}}<em>or {{HTMLElement("audio")}}.</em></td> + </tr> + <tr> + <td>{{HTMLElement("canvas")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>تمثل منطقة خريطة أبيت أن النصوص يمكن استخدامها ل تقديم الرسومات ، مثل الرسوم البيانية والرسوم البيانية لعبة ، أو أي الصور المرئية على الطاير .</td> + </tr> + <tr> + <td>{{HTMLElement("map")}}</td> + <td>بالتزامن مع {{HTMLElement("area")}}, يحدد مخطط صورة.</td> + </tr> + <tr> + <td>{{HTMLElement("area")}}</td> + <td>بالتزامن مع {{HTMLElement("map")}},يحدد مخطط صورة.</td> + </tr> + <tr> + <td>{{SVGElement("svg")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>تعرف على إد الإدارة الانتخابية دائرة التنمية الاقتصادية صورة اتجاهي .</td> + </tr> + <tr> + <td>{{MathMLElement("math")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يحدد صيغة رياضية.</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="Tabular_data">Tabular data</h2> + +<table class="standard-table" dir="rtl"> + <thead> + <tr> + <th scope="col">العنصر</th> + <th scope="col">نبذة عنه</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("table")}}</td> + <td>تمثل البيانات مع أكثر من بعد واحد.</td> + </tr> + <tr> + <td>{{HTMLElement("caption")}}</td> + <td>يمثل عنوان الجدول.</td> + </tr> + <tr> + <td>{{HTMLElement("colgroup")}}</td> + <td>تمثل مجموعة من واحد أو أكثر من الأعمدة من الجدول.</td> + </tr> + <tr> + <td>{{HTMLElement("col")}}</td> + <td>يمثل عمود من الجدول.</td> + </tr> + <tr> + <td>{{HTMLElement("tbody")}}</td> + <td>يمثل كتلة من الصفوف التي تصف البيانات ملموسة من الجدول.</td> + </tr> + <tr> + <td>{{HTMLElement("thead")}}</td> + <td>يمثل كتلة من الصفوف التي تصف التسميات عمود من الجدول.</td> + </tr> + <tr> + <td>{{HTMLElement("tfoot")}}</td> + <td>يمثل كتلة من الصفوف التي تصف ملخصات عمود من الجدول.</td> + </tr> + <tr> + <td>{{HTMLElement("tr")}}</td> + <td>يمثل صف من الخلايا في الجدول.</td> + </tr> + <tr> + <td>{{HTMLElement("td")}}</td> + <td>يمثل خلية البيانات في الجدول.</td> + </tr> + <tr> + <td>{{HTMLElement("th")}}</td> + <td>يمثل خلية رأس في الجدول.</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="الاشكال"> الاشكال</h2> + +<table class="standard-table" dir="rtl"> + <thead> + <tr> + <th scope="col">العنصر</th> + <th scope="col">نبذة عنه</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("form")}}</td> + <td>عنصر تبادل المعلومات مع الخادم حيث يكون داخله مجموعه من العناصر تتيح لمستخدم التعديل والاضافه</td> + </tr> + <tr> + <td>{{HTMLElement("fieldset")}}</td> + <td>مثل عنصار او ضوابط مرتبة</td> + </tr> + <tr> + <td>{{HTMLElement("legend")}}</td> + <td>يمثل عنوان <code><fieldset> </code>.</td> + </tr> + <tr> + <td>{{HTMLElement("label")}}</td> + <td>يعتبر توضيح او اسم عنصر داخل <form></td> + </tr> + <tr> + <td>{{HTMLElement("input")}}</td> + <td>يمثل حقل من البينات مما يتحُيح للمستخدم استعمالها</td> + </tr> + <tr> + <td>{{HTMLElement("button")}}</td> + <td>عباره عن وز .</td> + </tr> + <tr> + <td>{{HTMLElement("select")}}</td> + <td> يمثل مجموعه من الخيارات المٌسدله المرتبة .</td> + </tr> + <tr> + <td>{{HTMLElement("datalist")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل قائمة منسدله تحوي مجموعه من الخيارات المعدة مسبقاً اشبه باقائمة .</td> + </tr> + <tr> + <td>{{HTMLElement("optgroup")}}</td> + <td>يمثل عنوان لمجموعه خيارات <option> الي تكون ادخل {{HTMLElement("optgroup")}} الي هي داخل {{HTMLElement("datalist")}}.</td> + </tr> + <tr> + <td>{{HTMLElement("option")}}</td> + <td>يمثلخيارات داخل العنصر{{HTMLElement("select")}} أو اقتراح من{{HTMLElement("datalist")}}.</td> + </tr> + <tr> + <td>{{HTMLElement("textarea")}}</td> + <td>مربع يكتب بداخله نص يمكن التحكم به .</td> + </tr> + <tr> + <td>{{HTMLElement("keygen")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل سطر مولد مفاتيح .</td> + </tr> + <tr> + <td>{{HTMLElement("output")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>سَحاب يمكن التحكم به .</td> + </tr> + <tr> + <td>{{HTMLElement("progress")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل شريط اخذ بالمتلاء يعني مثل الداون لود منيجر لما يكون ايحمل</td> + </tr> + <tr> + <td>{{HTMLElement("meter")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل قيمة مئويه اخذه بالمتلاء بشكل صغير .</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="العناصر_التفاعلية" style="line-height: 30px;">العناصر التفاعلية</h2> + +<table class="standard-table" dir="rtl"> + <thead> + <tr> + <th scope="col">العنصر</th> + <th scope="col">نبذة عنه</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("details")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل قائمة مُنسدله من الخيارات</td> + </tr> + <tr> + <td>{{HTMLElement("summary")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>وهو يمثل عنوان لقائمة العنصر <details<span style="line-height: 1.5;">> .</span></td> + </tr> + <tr> + <td>{{HTMLElement("menuitem")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل <em>الأوامر</em> التي تمكن المستخدم من الاستدعاء.</td> + </tr> + <tr> + <td>{{HTMLElement("menu")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل قائمة من العناصر .</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="وهنُاك_أيضاً">وهنُاك أيضاً</h2> + +<ul> + <li dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5" title="HTML/HTML5">وهناك مجموعة من الوثائق حول HTML5</a>.</li> + <li dir="rtl">في <a href="https://developer.mozilla.org/en-US/docs/HTML/Element" title="HTML / العنصر">إشارة لجميع علامات HTML</a> ، بما في ذلك عناصر لم تعد صالحة في HTML5.</li> +</ul> diff --git a/files/ar/web/guide/html/html5/index.html b/files/ar/web/guide/html/html5/index.html new file mode 100644 index 0000000000..cfa45a9839 --- /dev/null +++ b/files/ar/web/guide/html/html5/index.html @@ -0,0 +1,178 @@ +--- +title: HTML5 +slug: Web/Guide/HTML/HTML5 +tags: + - Guide + - HTML + - HTML5 + - NeedsTranslation + - Overview + - TopicStub + - Web + - Web Development +translation_of: Web/Guide/HTML/HTML5 +--- +<p dir="rtl"><span class="seoSummary"><strong>HTML5 </strong>هي أحدث تطور للمعاير الذي يعرف <a href="/en-US/docs/HTML" title="HTML">HTML</a>. </span>يمثل المصطلح مفهومين مختلفين:</p> + +<ul dir="rtl"> + <li><span class="seoSummary">إنها نسخة جديدة من لغة HTML, مع عناصر وسمات وسلوكيات جديدة,</span></li> + <li><span class="seoSummary">ومجموعة أكبر من التقنيات التي تسمح بمواقع وتطبيقات ويب أكثر تنوعًا وقوة. تسمى هذه المجموعة أحيانًا (HTML5 & friends)</span><span class="seoSummary"> وغالبًا ما يتم اختصارها إلى HTML5 فقط.</span></li> +</ul> + +<p dir="rtl">تم تصميم هذه الصفحة المرجعية لتكون قابلة للاستخدام من قبل جميع مطوري الويب ، وترتبط هذه الصفحة المرجعية بالعديد من المصادر حول تقنيات HTML5 ، مصنفة في عدة مجموعات بناءً على وظيفتها.</p> + +<ul dir="rtl"> + <li><em>الدلالات: تتيح لك وصف المحتوى الخاص بك بدقة أكبر.</em></li> + <li><em>الاتصال: يتيح لك التواصل مع الخادم بطرق جديدة ومبتكرة.</em></li> + <li><em>عدم الإتصال بالإنترنت والتخزين: السماح لصفحات الويب بتخزين البيانات محليًا من جانب المستخدم والعمل دون اتصال بشكل أكثر كفاءة.</em></li> + <li><em>الوسائط المتعددة: جعل الفيديو والصوت ذو أولوية أولى في الويب المفتوح.</em></li> + <li><em>2D / 3D الرسوم & التأثيرات: السماح بمجموعة أكثر تنوعًا من خيارات العرض التقديمي.</em></li> + <li><em>الأداء والتكامل: توفير تحسين أكبر للسرعة واستخدام أفضل لأجهزة الكمبيوتر.</em></li> + <li><em>الوصول إلى الجهاز: السماح باستخدام أجهزة الإدخال والإخراج المختلفة.</em></li> + <li><em>التصميم: السماح للمؤلفين بكتابة مواضيع أكثر تطورا.</em></li> +</ul> + +<div class="cleared row topicpage-table"> +<h2 id="Semantics" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Semantics</h2> + +<dl> + <dt><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines in HTML5</a></dt> + <dd>A look at the new outlining and sectioning element in HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} and {{HTMLElement("aside")}}.</dd> + <dt dir="rtl"><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">أستخدام HTML5 audio and video</a></dt> + <dd dir="rtl">يتم تضمين عنصري {{HTMLElement ("audio")}} و {{HTMLElement ("video")}} والسماح بمعالجة محتوى الوسائط المتعددة الجديدة.</dd> + <dt dir="rtl"><a href="/en-US/docs/HTML/Forms_in_HTML" title="Forms in HTML5">النماذج في HTML5</a></dt> + <dd>A look at improvements to web forms in HTML5: the constraint validation API, several new attributes, new values for the {{HTMLElement("input")}} attribute {{htmlattrxref("type", "input")}} and the new {{HTMLElement("output")}} element.</dd> + <dt>New semantic elements</dt> + <dd>Beside sections, media and forms elements, there are numerous new elements, like {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, or {{HTMLElement("meter")}} and {{HTMLElement("main")}}, increasing the amount of <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">valid HTML5 elements</a>.</dd> + <dt>Improvement in {{HTMLElement("iframe")}}</dt> + <dd>Using the {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, and {{htmlattrxref("srcdoc", "iframe")}} attributes, authors can now be precise about the level of security and the wished rendering of an {{HTMLElement("iframe")}} element.</dd> + <dt dir="rtl"><a href="/en-US/docs/MathML" title="MathML">MathML</a></dt> + <dd dir="rtl">السماح بتضمين المعادلات الرياضية مباشرة.</dd> + <dt dir="rtl"><a href="/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">مقدمة إلى HTML5</a></dt> + <dd dir="rtl">This article introduces how to indicate to the problem that you are using HTML5 in your web design or web application.</dd> + <dt><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5-compliant parser</a></dt> + <dd>The parser, which turns the bytes of an HTML document into a DOM, has been extended and now precisely defines the behavior to use in all cases, even when faced with invalid HTML. This leads to far greater predictability and interoperability between HTML5-compliant browsers.</dd> +</dl> + +<h2 id="Connectivity" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Connectivity</h2> + +<dl> + <dt dir="rtl"><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt> + <dd dir="rtl">يسمح بإنشاء اتصال دائم بين الصفحة والخادم وتبادل البيانات بدون تنسيق HTML (Non-HTML) من خلال هذه الوسائل.</dd> + <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Server-sent events</a></dt> + <dd>Allows a server to push events to a client, rather than the classical paradigm where the server could send data only in response to a client's request.</dd> + <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> + <dd>This technology, where RTC stands for Real-Time Communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plugin or an external application.</dd> +</dl> + +<h2 id="Offline_storage" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Offline & storage</h2> + +<dl> + <dt><a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Offline resources: the application cache</a></dt> + <dd>Firefox fully supports the HTML5 offline resource specification. Most others have offline resource support at some level.</dd> + <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline events</a></dt> + <dd>Firefox 3 supports WHATWG online and offline events, which let applications and extensions detect whether or not there's an active Internet connection, as well as to detect when the connection goes up and down.</dd> + <dt><a href="/en-US/docs/DOM/Storage" title="DOM/Storage">WHATWG client-side session and persistent storage (aka DOM Storage)</a></dt> + <dd>Client-side session and persistent storage allows web applications to store structured data on the client side.</dd> + <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> + <dd>IndexedDB is a web standard for the storage of significant amounts of structured data in the browser and for high performance searches on this data using indexes.</dd> + <dt><a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Using files from web applications</a></dt> + <dd>Support for the new HTML5 File API has been added to Gecko, making it possible for web applications to access local files selected by the user. This includes support for selecting multiple files using the <span style="font-family: monospace;">{{HTMLElement("input")}}</span> of <a href="/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">file</span> HTML element's new <a href="/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> attribute. There also is <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>.</dd> +</dl> + +<h2 id="Multimedia" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Multimedia</h2> + +<dl> + <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Using HTML5 audio and video</a></dt> + <dd>The {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements embed and allow the manipulation of new multimedia content.</dd> + <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> + <dd>This technology, where RTC stands for Real-Time Communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plugin or an external application.</dd> + <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Using the Camera API</a></dt> + <dd>Allows using, manipulating, and storing an image from the computer's camera.</dd> + <dt>Track and WebVTT</dt> + <dd>The {{HTMLElement("track")}} element allows subtitles and chapters. <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> is a text track format.</dd> +</dl> + +<h2 id="3D_graphics_effects" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3D, graphics & effects</h2> + +<dl> + <dt><a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Canvas Tutorial</a></dt> + <dd>Learn about the new <code>{{HTMLElement("canvas")}}</code> element and how to draw graphs and other objects in Firefox.</dd> + <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 text API for <code><canvas></code> elements</a></dt> + <dd>The HTML5 text API is now supported by {{HTMLElement("canvas")}} elements.</dd> + <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt> + <dd>WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 {{HTMLElement("canvas")}} elements.</dd> + <dt><a href="/en-US/docs/SVG" title="SVG">SVG</a></dt> + <dd>An XML-based format of vectorial images that can directly be embedded in the HTML.</dd> + <br> + <br> + <br> + <br> + + <dd></dd> + <dd></dd> +</dl> + +<div class="section"> +<h2 id="Performance_integration" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Performance & integration</h2> + +<dl> + <dt><a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt> + <dd>Allows delegation of JavaScript evaluation to background threads, allowing these activities to prevent slowing down interactive events.</dd> + <dt><code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Level 2</dt> + <dd>Allows fetching asynchronously some parts of the page, allowing it to display dynamic content, varying according to the time and user actions. This is the technology behind <a href="/en-US/docs/AJAX" title="AJAX">Ajax</a>.</dd> + <dt>JIT-compiling JavaScript engines</dt> + <dd>The new generation of JavaScript engines is much more powerful, leading to greater performance.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt> + <dd>Allows the manipulation of the browser history. This is especially useful for pages loading interactively new information.</dd> + <dt><a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">The contentEditable attribute: transform your website to a wiki!</a></dt> + <dd>HTML5 has standardized the contentEditable attribute. Learn more about this feature.</dd> + <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Drag and drop</a></dt> + <dd>The HTML5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.</dd> + <dt><a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Focus management in HTML</a></dt> + <dd>The new HTML5 <code>activeElement</code> and <code>hasFocus</code> attributes are supported.</dd> + <dt><a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Web-based protocol handlers</a></dt> + <dd>You can now register web applications as protocol handlers using the <code>navigator.registerProtocolHandler()</code> method.</dd> + <dt><a href="/en-US/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt> + <dd>Allows control of animations rendering to obtain optimal performance.</dd> + <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">Fullscreen API</a></dt> + <dd>Controls the usage of the whole screen for a Web page or application, without the browser UI displayed.</dd> + <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> + <dd>Allows locking the pointer to the content, so games and similar applications don't lose focus when the pointer reaches the window limit.</dd> + <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline events</a></dt> + <dd>In order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an online status again.</dd> +</dl> + +<h2 id="Device_access" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Device access</h2> + +<dl> + <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Using the Camera API</a></dt> + <dd>Allows using, manipulating, and storing an image from the computer's camera.</dd> + <dt><a href="/en-US/docs/DOM/Touch_events" title="DOM/Touch_events">Touch events</a></dt> + <dd>Handlers to react to events created by a user pressing touch screens.</dd> + <dt><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Using geolocation</a></dt> + <dd>Let browsers locate the position of the user using geolocation.</dd> + <dt><a href="/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Detecting device orientation</a></dt> + <dd>Get the information when the device on which the browser runs changes orientation. This can be used as an input device (e.g., to make games that react to the position of the device) or to adapt the layout of a page to the orientation of the screen (portrait or landscape).</dd> + <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> + <dd>Allows locking the pointer to the content, so games and similar application don't lose focus when the pointer reaches the window limit.</dd> +</dl> + +<h2 id="Styling" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Styling</h2> + +<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> has been extended to be able to style elements in a much more complex way. This is often referred as <a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, though CSS is not a monolithic specification any more and the different modules are not all at level 3: some are at level 1 and others at level 4, with all the intermediate levels covered.</p> + +<dl> + <dt>New background styling features</dt> + <dd>It is now possible to put a shadow to a box, using {{cssxref("box-shadow")}} and <a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">multiple backgrounds</a> can be set.</dd> + <dt>More fancy borders</dt> + <dd>Not only it is now possible to use images to style borders, using {{cssxref("border-image")}} and its associated longhand properties, but rounded borders are supported via the {{cssxref("border-radius")}} property.</dd> + <dt>Animating your style</dt> + <dd>Using <a href="/en-US/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Transitions</a> to animate between different states or using <a href="/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animations</a> to animate parts of the page without a triggering event, you can now control mobile elements on your page.</dd> + <dt>Typography improvement</dt> + <dd>Authors have better control to reach better typography. They can control {{cssxref("text-overflow")}} and <a href="/en-US/docs/CSS/hyphens" title="CSS/hyphens">hyphenation</a>, but also can add a <a href="/en-US/docs/CSS/text-shadow" title="CSS/text-shadow">shadow</a> to it or control more precisely its <a href="/en-US/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorations</a>. Custom typefaces can be downloaded and applied thanks to the new {{cssxref("@font-face")}} at-rule.</dd> + <dt>New presentational layouts</dt> + <dd>In order to improve the flexibility of designs, two new layouts have been added: the <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS multi-column layout</a>, and the <a href="/en-US/docs/CSS/Flexbox" title="CSS/Flexbox">CSS flexible box layout</a>.</dd> +</dl> +</div> +</div> diff --git a/files/ar/web/guide/index.html b/files/ar/web/guide/index.html new file mode 100644 index 0000000000..8d89a9e619 --- /dev/null +++ b/files/ar/web/guide/index.html @@ -0,0 +1,27 @@ +--- +title: دليل مطور الويب +slug: Web/Guide +tags: + - الويب + - تعقيب لموضوع + - توجيهات +translation_of: Web/Guide +--- +<p>هذه المقالات توفر المعلومات التي تساعدك على الإستفادة من التقنيات الخصصة و APIs (واجهة برمجة التطبيقات).</p> + +<div class="note"> +<p><strong>تذكير:</strong> هذه الصفحة ستكون غير منسقة لبعض الوقت حتى ننتهي من عملية نقل المحتوى. نحن آسفون!</p> +</div> + +<div>{{LandingPageListSubpages}}</div> + +<dl> + <dt><a href="/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">الجافا سكربت</a></dt> + <dd>الجافا سكربت هي لغة برمجة نصية قوية تستخدم لإنشاء تطبيقات الويب.</dd> +</dl> + +<h2 id="أُنظر_أيضا">أُنظر أيضا</h2> + +<ul> + <li><a href="/en-US/docs/Web/Reference" title="/en-US/docs/Web/Reference">مرجع مطور الويب</a></li> +</ul> diff --git a/files/ar/web/guide/الرسومات/index.html b/files/ar/web/guide/الرسومات/index.html new file mode 100644 index 0000000000..9c8335471a --- /dev/null +++ b/files/ar/web/guide/الرسومات/index.html @@ -0,0 +1,47 @@ +--- +title: الرسومات على الويب +slug: Web/Guide/الرسومات +tags: + - رسومات + - رسوميات ثلاثية الأبعاد + - رسوميات ثنائية الأبعاد + - كانفاس +translation_of: Web/Guide/Graphics +--- +<p dir="rtl"><span class="seoSummary">غالباً ما تحتاج المواقع والتطبيقات لعرض الرسومات.</span> الصور العاديّة يمكن عرضها بسهولة باستخدام العنصر {{HTMLElement("img")}}، أو بإعداد خلفيّة الصفحة باستخدام الخاصيّة {{cssxref("background-image")}}. تستطيع أيضاً إنشاء رسومات في الهواء (طافية)، أو يمكنك التلاعب بالصور بعد حدث ما. <span class="seoSummary">هذه المقالات توفر نظرة حول كيف يمكنك القيام بهذه الأشياء.</span></p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" dir="rtl" id="الرسوميات_ثنائيّة_الأبعاد">الرسوميات ثنائيّة الأبعاد</h2> + +<dl> + <dt dir="rtl"><a href="/ar/docs/HTML/Canvas">الكانفاس</a></dt> + <dd dir="rtl">عنصر <a class="new" href="/ar/docs/Web/HTML/Element/canvas" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code><canvas></code></a> يوفر واجهات برمجيّة لرسم رسومات ثنائيّة الأبعاد باستخدام لغة الجافاسكربت.</dd> + <dt dir="rtl"><a href="/ar/docs/Web/SVG">الرسوميات المتجهيّة المتغيرة</a></dt> + <dd dir="rtl">تتيح <strong>الرسوميات المتجهيّة المتغيرة (SVG)</strong> لك استخدام الخطوط، المنحنيات، و غيرها من الأشكال الهندسيّة لتشكيل الرسومات. مع الفيكتور (vector) يمكنك إنشاء صور يمكن أن يتم تحجيمها بدون أن تفقد دقتها.</dd> +</dl> + +<p dir="rtl"><span class="alllinks"><a href="/ar/docs/tag/%D8%B1%D8%B3%D9%88%D9%85%D8%A7%D8%AA">عرض المزيد...</a></span></p> +</div> + +<div class="section"> +<h2 class="Documentation" dir="rtl" id="الرسوميات_ثلاثيّة_الأبعاد">الرسوميات ثلاثيّة الأبعاد</h2> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Web/WebGL">تقنيّة WebGL</a></dt> + <dd dir="rtl">دليلك للبدء مع تقنيّة WebGL، الواجهة البرمجيّة المخصصة للويب لرسم رسوميات ثلاثيّة الأبعاد. تسمح هذه التقنيّة باستخدام معايير OpenGL ES في محتوى الويب.</dd> +</dl> + +<h2 dir="rtl" id="فيديو">فيديو</h2> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">استخدام ملفات الفيديو والصوت في لغة ترميز النص الفائق</a></dt> + <dd dir="rtl">تضمين ملفات الفيديو والصوت في صفحات الويب، والتحكم بتشغيلها.</dd> +</dl> + +<dl> + <dt dir="rtl"><a href="/ar/docs/WebRTC">تقنيّة WebRTC</a></dt> + <dd dir="rtl">تقنية RTC في الويب تعني الإتصال في الوقت الحالي (Real-Time Communications), وهي تقنيّة تسمح بتمكين تدفق الصوت والصورة ومشاركتها بين المُتصفحات.</dd> +</dl> +</div> +</div> |