diff options
Diffstat (limited to 'files/ar/web/guide/html')
| -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 |
2 files changed, 776 insertions, 0 deletions
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> |