ملخصات HTML5

Html 5
‫مقدمة‬
‫ما هو الجديد في‪ HTML5‬؟‬
‫إعﻼن ‪ DOCTYPE‬لـ ‪ HTML5‬بسيط للغاية‪:‬‬

‫>‪<!DOCTYPE html‬‬
‫ضا بسيط جدًا‪:‬‬

‫تعريف ترميز اﻷحرف )‪ (charset‬هو أي ً‬
‫>"‪<meta charset="UTF-8‬‬
‫تشفير اﻷحرف اﻻفتراضي في ‪ HTML5‬هو‪UTF-8.‬‬
‫‪htlm5‬‬ ‫‪ : New HTML5 Elements‬الجديد في عنا‬

‫‪ : New semantic elements‬العناصر الدﻻلية الجديدة‬
‫‪<header>, <footer>, <article>, and <section>.‬‬
‫سمات جديدة لعناصر النموذج‬ ‫‪: New attributes of form elements‬‬

‫‪number, data, time, calendar, range,‬‬
‫‪ : New graphic elements‬عناصر رسومية جديدة‬
‫‪<svg> and <canvas>.‬‬
‫‪ : New multimedia elements‬عناصر الوسائط المتعددة الجديدة‬
‫‪<audio> and <video>.‬‬
‫واجهات برمجة تطبيقات ‪ HTML5‬الجديدة )واجهات برمجة التطبيقات(‪:‬‬

‫واجهة برمجة التطبيقات الجديدة اﻷكثر إثارة لﻼهتمام في ‪ HTML5‬هي‪:‬‬
‫ذاكرة التخزين المؤقت لتطبيق‬ ‫تحديد الموقع الجغرافي‬
‫عمال الويب‬ ‫السحب واﻹسقاط‬
‫‪1‬‬ ‫ملخص كورس ‪HTML5‬‬

‫‪SSE‬‬ ‫التخزين المحلي‬
‫نصيحة ‪ : HTML‬التخزين المحلي هو بديل قوي لملفات تعريف اﻻرتباط‪.‬‬
‫الجديد في ‪ html5‬أنك تستطيع الكتابة دون عمل ‪ close tag‬للعنصر‬

‫العناصر التي تمت إزالتها في‪HTML5‬‬
‫أو التي تتجاهلها وﻻ تستخدمها في ‪html‬‬
‫موقع مهم جدا ً لمتابعه اﻷكواد المهملة‬
‫‪https://developer.mozilla.org/en-US/docs/Web/HTML/Element‬‬
‫‪ Acronym‬وبديله هو ‪Abbr‬‬
‫وهو كود بمجرد وقوف الماوس على الكلمة يظهر النص التعريفي له‬

‫معنى ‪ : html5 Semantics‬معناها أن العنصر يدل على محتواه وأن العنصر‬
‫منطقي فاسمه يدل على ما يحتويه‬
‫‪ : HTML History‬تاريخ ‪html‬‬
‫منذ اﻷيام اﻷولى لشبكة الويب العالمية ‪ ،‬كانت هناك العديد من إصدارات‪HTML:‬‬
‫‪ 1989‬اخترع تيم بيرنرز لي ‪www‬‬
‫‪ 1991‬تيم بيرنرز لي اخترع ‪HTML‬‬
‫‪ 1993‬صاغ ديف راجيت ‪HTML +‬‬
‫‪ 1995‬فريق عمل ‪ HTML‬يعرف ‪HTML 2.0‬‬
‫‪ 1997‬توصية ‪ W3C‬لـ ‪HTML 3.2‬‬
‫‪ 1999‬توصية ‪ W3C‬لـ ‪HTML 4.01‬‬
‫‪ 2000‬توصية ‪ W3C‬لـ ‪XHTML 1.0‬‬
‫‪ 2008‬المسودة العامة اﻷولى ‪WHATWG HTML5‬‬
‫‪ 2012‬مستوى معيشة ‪WHATWG HTML5‬‬
‫‪ 2014‬توصية ‪HTML5 W3C‬‬
‫‪ 2016‬توصية ‪ W3C‬المرشحة ‪: HTML 5.1‬‬
‫من عام ‪ ١٩٩١‬إلى عام ‪ ، ١٩٩٩‬تم تطوير ‪ HTML‬من اﻹصدار ‪ ١‬إلى اﻹصدار‬
‫‪.٤‬‬
‫في عام ‪ ، ٢٠٠٠‬أوصى اتحاد شبكة الويب العالمية )‪ (W3C‬بـ ‪XHTML 1.0.‬‬
‫كانت صيغة ‪ XHTML‬صارمة ‪ ،‬واضطر المطورين إلى كتابة رمز صالح و‬
‫"جيد التكوين‪".‬‬
‫في عام ‪ ، ٢٠٠٤‬قررت ‪ W3C‬ﻹغﻼق تطوير ‪ ، HTML‬لصالح‪XHT‬‬
‫في عام ‪ ، ٢٠٠٤‬تم تشكيل ‪) WHATWG‬مجموعة عمل تقنية تطبيقات النصوص‬
‫التشعبية(‪ .‬أراد ‪ WHATWG‬تطوير ‪ ، HTML‬بما يتماشى مع كيفية استخدام‬

‫الويب ‪ ،‬مع كونه متوافقًا مع اﻹصدارات السابقة من‪HTML.‬‬
‫في عام ‪ ، ٢٠٠٦ - ٢٠٠٤‬اكتسب ‪ WHATWG‬الدعم من قبل بائعي‬
‫المستعرضات الرئيسيين‪.‬‬
‫في عام ‪ ، ٢٠٠٦‬أعلنت ‪ W3C‬أنها ستدعم‪WHATWG.‬‬
‫في عام ‪ ، ٢٠٠٨‬تم إصدار أول مسودة عامة بتنسيق‪HTML5.‬‬
‫في عام ‪ ، ٢٠١٢‬قرر ‪ WHATWG‬و ‪ W3C‬الفصل بينهما‪:‬‬
‫أراد ‪ WHATWG‬تطوير ‪ HTML‬كـ "معيار المعيشة"‪ .‬يتم تحديث مستوى‬
‫المعيشة وتحسينه دائ ًما‪ .‬يمكن إضافة ميزات جديدة ‪ ،‬ولكن ﻻ يمكن إزالة الوظيفة‬
‫القديمة‪.‬‬
‫تم نشر معيار ‪ WHATWG HTML5‬الحي في عام ‪ ، ٢٠١٢‬ويتم تحديثه‬
‫باستمرار‪.‬‬
‫أراد ‪ W3C‬تطوير معيار ‪ HTML5‬و ‪ XHTML‬النهائي‪.‬‬
‫تم إصدار توصية ‪ W3C HTML5‬في ‪ ٢٨‬أكتوبر ‪.٢٠١٤‬‬

‫كما نشر ‪ W3C‬توصية مرشح ‪ HTML 5.1‬في ‪ ٢١‬يونيو ‪.٢٠١٦‬‬
‫‪HTML5 Browser Support‬‬
‫يمكنك تعليم المتصفحات القديمة للتعامل مع ‪ HTML5‬بشكل صحيح‪.‬‬

‫‪ HTML5‬مدعوم في جميع المتصفحات الحديثة‪.‬‬
‫باﻹضافة إلى ذلك ‪ ،‬تتعامل جميع المتصفحات القديمة والجديدة تلقائيًا مع العناصر‬
‫غير المتعرف عليها باعتبارها عناصر مض ّمنة‪.‬‬
‫ولهذا السبب ‪ ،‬يمكنك "تعليم" المتصفحات القديمة للتعامل مع عناصر" ‪ HTML‬غير معروفة‪".‬‬
‫‪Define Semantic Elements as Block Elements‬‬

‫تعريف العناصر الدﻻلية كعناصر كتلة‬

‫يحدد ‪ HTML5‬ثمانية عناصر دﻻلية جديدة‪ .‬كل هذه العناصر ‪block-‬‬
‫‪level.‬‬
‫لتأمين السلوك الصحيح في المتصفحات القديمة ‪ ،‬يمكنك تعيين خاصية عرض‬
‫‪CSS‬لعناصر ‪ HTML‬هذه لحظرها‬
‫‪Add New Elements to HTML‬‬

‫أضف عناصر جديدة إلى ‪HTML‬‬
‫ضا إضافة عناصر جديدة إلى صفحة ‪ HTML‬مع خدعة المستعرض‪.‬‬ ‫يمكنك أي ً‬
‫عنصرا جديدًا يسمى >‪ <myHero‬أي اسم ليس بالضرورة‬
‫ً‬ ‫يضيف هذا المثال‬
‫‪ myHero‬إلى صفحة ‪ ، HTML‬ويحدد نم ً‬
‫طا له‪:‬‬
‫بيان جافا سكريبت )"‪document.createElement("myHero‬‬

‫مطلوب ﻹنشاء عنصر جديد في ‪ IE 9‬واﻹصدارات اﻷقدم‪.‬‬
‫العناصر أو التاجات الغير معروفه يتعامل معها المتصفح على أنها عناصر ‪inline‬‬
‫‪Problem With Internet Explorer 8‬‬
‫مشكلة مع انترنت اكسبلورر ‪8‬‬
‫يمكنك استخدام الحل الموضح أعﻼه لكافة عناصر ‪ HTML5‬الجديدة‪.‬‬
‫ومع ذلك ‪) IE8 ،‬واﻹصدارات اﻷقدم( ﻻ تسمح بتصميم عناصر غير معروفة!‬

‫ولحسن الحظ ‪ ،‬قام ‪ Sjoerd Visscher‬بإنشاء !‪ .HTML5Shiv‬يعد‬
‫‪ً HTML5Shiv‬‬
‫حﻼ جافا سكريبتًا لتمكين تصميم عناصر ‪ HTML5‬في‬
‫إصدارات ‪ Internet Explorer‬قبل اﻹصدار ‪.٩‬‬
‫ستحتاج إلى ‪ HTML5shiv‬لتوفير التوافق مع متصفحات ‪ IE‬اﻷقدم من‪IE 9.‬‬
‫‪Syntax For HTML5Shiv‬‬

‫يتم وضع ‪ HTML5Shiv‬داخل >‪tag. <head‬‬
‫‪ HTML5Shiv‬هو ملف ‪ javascript‬المشار إليه في ملف >‪<script‬‬
‫‪tag.‬‬
‫يجب عليك استخدام ‪ HTML5Shiv‬عند استخدام عناصر ‪ HTML5‬الجديدة مثل‬
‫‪<article>, <section>, <aside>, <nav>, <footer>.‬‬
‫ومعنى هذا الكود أنه يقوم بإنشاء ملف ‪ html5shiv.js‬ليعمل مع المتصفح‬

‫انترنت اكسبلولر اقل من اﻹصدار التاسع ‪9‬‬
‫وهذا ﻷن عناصر وأكواد ‪ html5‬تعمل على جوجل كروم وفايرفوكس وسفاري‬
‫تلقائيا ً فﻼ حاجة لهذا الملف معهم‪.‬‬

‫‪New Semantic/Structural Elements‬‬
‫العناصر الدﻻلية ‪ /‬الهيكلية الجديدة‬
‫د لية‬ ‫‪ : Semantic Elements‬عنا‬

‫علم الدﻻلة هو دراسة معاني الكلمات والعبارات في اللغة‪.‬‬
‫‪Semantic elements = elements with a meaning.‬‬
‫عناصر دﻻلية = عناصر ذات معنى‬
‫يصف العنصر الدﻻلي معناه بوضوح لكل من المتصفح والمطور‪.‬‬
‫أمثلة على العناصر غير الدﻻلية ‪ <div> and <span> :‬ﻻ يخبرني عن‬
‫محتواه‪ .‬ويطلق على هذه اﻷكواد ‪non-semantic‬‬
‫يعني اسم الكود غير معبر عن محتواه‬
‫أمثلة على العناصر الدﻻلية ‪<form>, <table>, and <article> :‬‬
‫يحدد بوضوح محتواه‪ .‬ويطلق على هذه اﻷكواد ‪semantic‬‬
‫يعني تفهم من كود ‪ table‬إن فيه جدول تحتيه ‪ form‬فيه نموذج تحته‬
‫يتم دعم العناصر الدﻻلية ‪ HTML5‬في جميع المتصفحات الحديثة‪.‬‬

‫باﻹضافة إلى ذلك ‪ ،‬يمكنك "تعليم" المتصفحات القديمة كيفية التعامل مع "عناصر‬
‫غير معروفة‪".‬‬
‫اقرأ عن ذلك في ‪HTML5 Browser Support‬‬

‫>‪<header‬‬
‫ومعناها رأس وهو وسم لرأس الصفحة أو غﻼف الصفحة وهو يوصف الجزء‬
‫العلوي‬
‫يمثل العنصر >‪<header‬حاوية للمحتوى التمهيدي‬
‫أو مجموعة من ارتباطات التنقل‪.‬‬
‫يحتوي عنصر >‪<header‬عادة ً‬
‫عنصر عنوان واحد أو أكثر)>‪(<h1> - <h6‬‬
‫شعار أو رمز ‪logo or icon :‬‬
‫معلومات التأليف‬
‫يمكنك الحصول على عدة عناصر >‪<header‬في مستند واحد‪.‬‬
‫مﻼحظة‪ :‬ﻻ يمكن وضع عﻼمة >‪<header‬ضمن >‪<footer‬‬
‫أو عنصر >‪ <header‬آخر‬ ‫أو >‪<address‬‬
‫>‪<main‬‬
‫تحدد العﻼمة >‪<main‬المحتوى الرئيسي للمستند‪.‬‬
‫ومعناها اﻷساسية وسم رئيسي ﻻ يتكرر في الصفحة أو الصفحات اﻷخرى للموقع‬
‫وﻻ يدخل ضمن أي وسم أخر بل هو مستقل بذاته‬
‫يجب أن يكون المحتوى داخل العنصر>‪ <main‬فريدا في المستند‪ .‬ويجب أﻻ‬
‫يحتوي على أي محتوى يتتكرار عبر مستندات مثل أشرطة جانبية وروابط التنقل‬
‫ومعلومات حقوق الطبع والنشر وشعارات المواقع ونماذج البحث‪.‬‬
‫وﻻ يصح وضع >‪ <main‬داخل تاج بل هو تاج رئيسي تدخل تحته التاجات وﻻ‬
‫يدخل تحت التاجات‬
‫مﻼحظة‪ :‬يجب أﻻ يكون هناك أكثر من عنصر >‪ <main‬في مستند‪ .‬يجب أﻻ‬
‫يكون العنصر >‪ <main‬سليل عنصر >‪ <article‬أو >‪ <aside‬أو‬
‫>‪ <footer‬أو >‪ <header‬أو >‪<nav‬‬

‫>‪<nav‬‬
‫ومعناها المﻼحة وهو وسم لعمل قوائم التنقل التي توجد تحت الغﻼف‬
‫تحدد العﻼمة >‪ <nav‬مجموعة من ارتباطات التنقل‪.‬‬
‫ﻻحظ ‪ :‬أنه ﻻ ينبغي أن تكون جميع روابط المستند داخل عنصر ‪<nav>.‬‬
‫عنصر >‪<nav‬مخصص فقط للحظر الرئيسي ﻻرتباطات التنقل‪.‬‬
‫يمكن أن تستخدم المتصفحات ‪ ،‬مثل قارئات الشاشة للمستخدمين ذوي اﻻحتياجات‬

‫الخاصة ‪ ،‬هذا العنصر لتحديد ما إذا كان سيتم حذف العرض اﻷولي لهذا المحتوى‪.‬‬
‫>‪<article‬‬
‫ومعناها مقالة‬
‫تحدد العﻼمة >‪ <article‬محتوى مستقل بذاته‪.‬‬
‫يجب أن يكون المقال منطقيًا ومن المفترض أن يتم توزيعه بشكل مستقل عن باقي‬
‫الموقع‪.‬‬
‫المصادر المحتملة لعنصر >‪: <article‬‬
‫] مشاركة المنتدى | مشاركة مدونة | قصة اﻻخبار | تعليق ‪[ Comment:‬‬

‫ويكتب داخلها تاج >‪<section‬‬
‫>‪<section‬‬
‫ومعناها جزء أو قسم في الموقع‬
‫تحدد العﻼمة >‪ <section‬اﻷقسام في المستند ‪ ،‬مثل الفصول ‪ ،‬أو الرؤوس ‪ ،‬أو‬
‫التذييﻼت ‪ ،‬أو أي أجزاء أخرى من المستند‪.‬‬

‫>‪<footer‬‬
‫ومعناها تزييل زيل الصفحة‬
‫ً‬
‫تذييﻼ للمستند أو المقطع‪.‬‬ ‫تحدد العﻼمة >‪<footer‬‬
‫يجب أن يحتوي عنصر >‪<footer‬على معلومات حول عنصر محتواه‪.‬‬
‫يحتوي عنصر >‪<footer‬عادة على ‪:‬‬
‫] معلومات التأليف | معلومات حقوق التأليف والنشر | معلومات اﻻتصال | خريطة‬
‫الموقع | العودة إلى أعلى الروابط | الوثائق ذات الصلة [‬
‫يمكنك الحصول على عدة عناصر >‪ <footer‬في مستند واحد‪.‬‬
‫>‪<aside‬‬
‫معناها جانبا وهو وسوم لعمل اﻷطار الجانبي‬
‫تحدد العﻼمة >‪ <aside‬بعض المحتوى بخﻼف المحتوى الذي يتم وضعه فيه‪.‬‬
‫يجب أن يرتبط المحتوى الجانبي بالمحتوى المحيط‪.‬‬
‫>‪<bdi‬‬
‫ومعناها عزل اﻹتجاه‬
‫‪ bdi‬لتقف على عزل ثنائي اﻻتجاه‪.‬‬
‫تقوم العﻼمة >‪ <bdi‬بعزل جزء من النص قد يتم تنسيقه في اتجاه مختلف عن‬
‫النص اﻵخر الموجود خارجها‪.‬‬
‫يكون هذا العنصر مفيدًا عند تضمين محتوى من إنشاء المستخدم مع اتجاه غير‬
‫معروف‪.‬‬
‫لعﻼج مشكلة دخول العربي على اﻷنجليزي‬

‫>‪<mark‬‬
‫ومعناها عﻼمة لتحديد كلمة ماء أو عبارة‬
‫تحدد العﻼمة >‪ <mark‬النص المحدد‪.‬‬
‫استخدم العﻼمة >‪ <mark‬إذا كنت تريد تمييز أجزاء من النص الخاص بك‪.‬‬
‫مثال ‪/‬‬
‫>‪<p>Do not forget to buy <mark>milk</mark> today.</p‬‬
‫>‪<wbr‬‬
‫للتحكم في ‪ width‬العنصر وتحديد انتائهة‬
‫تحدد العﻼمة >‪ <wbr‬فرصة استراحة الكلمات مكان وجود فاصل خط في النص‪.‬‬
‫تلميح‪ :‬عندما تكون كلمة طويلة للغاية ‪ ،‬أو تخشى أن يقوم المتصفح بكسر الخطوط‬
‫في المكان الخطأ ‪ ،‬يمكنك استخدام عنصر >‪ <wbr‬ﻹضافة فرص استراحة‬
‫الكلمات‪.‬‬

‫>‪<progress‬‬
‫ومعناها تقدم وهو لقياس مستوى التقدم‬
‫ويعمل عداد تقدم‬
‫تمثل عﻼمة >‪ <progress‬تقدم مهمة ما‪.‬‬
‫ال ‪ value‬هو ما وصل إليه فعﻼً ال ‪progress‬‬
‫وال ‪ max‬هو الحد اﻷقصى لل ‪progress‬‬
‫>‪<meter‬‬
‫ومعناها متر وهو يشبه العداد في حركة دائمة‬
‫استخدم عنصر القياس لقياس البيانات داخل نطاق معين )مقياس(‪:‬‬
‫تحدد العﻼمة >‪<meter‬القياس القياسي ضمن نطاق معروف ‪ ،‬أو قيمة كسرية‪.‬‬
‫هذا هو المعروف أيضا باسم مقياس‪.‬‬

‫أمثلة‪ :‬استخدام القرص ‪ ،‬ومدى صلة نتيجة اﻻستعﻼم ‪ ،‬وما إلى ذلك‪.‬‬
‫مﻼحظة‪ :‬يجب عدم استخدام العﻼمة >‪ <meter‬لﻺشارة إلى التقدم )كما هو الحال‬
‫في شريط التقدم(‪ .‬ﻷشرطة التقدم ‪ ،‬استخدم عﻼمة ‪<progress>.‬‬
‫حيث ‪default: min=0, max=1‬‬

‫يبدا من الصفر ويصل حتى ‪١‬‬
‫‪ : min‬يحدد الحد اﻷدنى لقيمة النطاق‬
‫‪ : max‬يحدد الحد اﻷقصى لقيمة النطاق‬
‫‪ : Value‬وهي قيمة ال ‪meter‬‬
‫‪ : low‬ويعبر عن القيمة المنخفضة‬
‫‪ : high‬وتعبر عن القيمة المرتفعة‬
‫‪ : optimum‬وتعبر عن القيمة المثلى‬
‫‪ : Form‬يحدد واحد أو أكثر من النماذج التي ينتمي إليها العنصر >‪<meter‬‬
‫>‪<details‬‬
‫ومعناها تفاصيل وهي لعمل مراجع أو أي شئ يظهر ويختفي‬
‫تحدد العﻼمة >‪ <details‬تفاصيل إضافية يمكن للمستخدم عرضها أو إخفاؤها‬
‫عند الطلب‪.‬‬
‫يمكن استخدام العﻼمة >‪ <details‬ﻹنشاء أداة تفاعلية يمكن للمستخدم فتحها‬
‫وإغﻼقها‪ .‬يمكن وضع أي نوع من المحتوى داخل عﻼمة ‪<details>.‬‬
‫يجب أﻻ يكون محتوى عنصر >‪ <details‬مرئيًا ما لم يتم تعيين سمة مفتوحة‪.‬‬

‫نستخدم هنا كود >‪ <summary‬عنوان يظهر مكان ‪details‬‬
‫>‪<summary‬‬
‫يحدد عنوانًا مرئيًا لعنصر >‪<details‬‬
‫تحدد العﻼمة >‪ <summary‬عنوانًا مرئيًا لعنصر ‪ <details>.‬يمكن النقر‬
‫على العنوان لعرض ‪ /‬إخفاء التفاصيل‪.‬‬
‫مثال أخر‪/‬‬
‫> ‪<Figure‬‬
‫معناها الشكل‬
‫تحدد العﻼمة >‪ <figure‬المحتوى المكتفي ذاتيًا ‪ ،‬مثل الرسوم التوضيحية‬
‫والرسوم البيانية والصور وقوائم الرموز وما إلى ذلك‪.‬‬
‫بينما يرتبط محتوى العنصر >‪ <figure‬بالتدفق الرئيسي ‪ ،‬فإن موقعه مستقل عن‬
‫التدفق الرئيسي ‪ ،‬وإذا تمت إزالته ‪ ،‬فﻼ يجب أن يؤثر على تدفق المستند‪.‬‬

‫>‪<Figcaption‬‬
‫معناها وصف الشكل‬
‫تحدد العﻼمة >‪ <figcaption‬تسمية توضيحية لعنصر ‪<figure>.‬‬
‫مثال أخر‪/‬‬
‫>‪<time‬‬
‫تحدد العﻼمة >‪ <time‬تاري ًخا ‪ /‬وقتًا ً‬
‫قابﻼ للقراءة البشرية‪.‬‬
‫ضا لترميز التواريخ واﻷوقات بطريقة يمكن لﻶلة‬ ‫يمكن استخدام هذا العنصر أي ً‬
‫قراءتها بحيث يمكن لوكﻼء المستخدمين عرض إضافة تذكيرات ﻷعياد الميﻼد أو‬
‫اﻷحداث المجدولة إلى تقويم المستخدم ‪ ،‬ويمكن لمحركات البحث أن تنتج نتائج‬
‫بحث أكثر ذكا ًء‪.‬‬
‫نستخدم معه ‪datetime :‬‬

‫‪ :datetime‬تمثل السمة ‪ datetime‬التاريخ ‪ /‬الوقت القابل للقراءة على الجهاز‬
‫لعنصر ‪ <time>.‬أمثلة على التواريخ واﻷوقات القانونية‪:‬‬
‫>‪<dialog‬‬
‫تحدد عﻼمة >‪ <dialog‬مربع حوار أو نافذة‪.‬‬

‫يجعل عنصر >‪ <dialog‬من السهل إنشاء مربعات حوار منبثقة ووحدات نمطية‬
‫على صفحة ويب‪.‬‬
‫وهو غير مدعوم في الفايرفوكس واﻷكسبلولور‬

‫>‪<datalist‬‬
‫ومعناها لسته فيها بيانات‪.‬‬
‫تحدد العﻼمة >‪ <datalist‬قائمة بالخيارات المحددة مسبقًا لعنصر ‪<input>.‬‬
‫يتم استخدام العﻼمة >‪ <datalist‬لتوفير ميزة "اﻹكمال التلقائي" على‬
‫عناصر ‪ <input>.‬سيرى المستخدمون قائمة منسدلة بالخيارات المحددة مسبقًا‬
‫أثناء إدخال البيانات‪.‬‬
‫استخدم السمة ‪ list‬لعنصر >‪ <input‬لربطه مع عنصر ‪<datalist>.‬‬
‫‪Default CSS Settings :‬‬

‫};‪datalist { display: none‬‬
‫>‪<output‬‬
‫وهي تخرج ناتج لعملية حسابية‪.‬‬
‫تمثل العﻼمة >‪ <output‬نتيجة عملية حسابية )مثل واحدة يتم تنفيذها بواسطة‬
‫برنامج نصي(‪.‬‬

‫‪ : x.value‬وتعني قيمة ‪x‬‬
‫)‪ parseInt : parseInt(a.value‬هو ‪ finction‬في الجافا اسكريت تحول لك‬
‫‪ value‬لرقم كي تستطيع جمع وطرحة وتنفيذ جميع العمليات الحسابية فيه‬
‫وهي قيمة ‪a‬‬
‫)‪ : parseInt(b.value‬وهي قيمة ‪b‬‬
‫ونﻼحظ في المثال أنه فور ادخال القيمة يتم عمل العملية الحسابة والضرب فورا‬
‫وتخرج النتيجة‬
‫‪Default CSS Settings :‬‬
‫};‪datalist { display: inline‬‬

‫>‪<audio‬‬
‫تحدد العﻼمة >‪<audio‬الصوت ‪ ،‬مثل الموسيقى أو تدفقات الصوت اﻷخرى‪.‬‬

‫يوجد حاليًا ‪ ٣‬تنسيقات ملفات مدعومة لعنصر ‪ <audio>: MP3‬و ‪ Wav‬و‬
‫‪Ogg:‬‬
‫أنواع ‪ MIME‬لتنسيقات الصوت‬

‫‪ : Controls‬بدون اضافتها لن يظهر ملف ‪ audio‬في المتصفح‬
‫‪ : Autoplay‬لجعل ملف ‪ audio‬يعمل تلقائيا‬
‫‪ : Loop‬لتكرار تشغيل ملف ‪ audio‬بعد انتهائه‬
‫‪: Muted‬لوقف الصوت مع استمرار عمل ملف ‪audio‬‬
‫‪: Preload‬وهي نصيحة للمتصفح أو أوامر خاصة‬
‫‪preload‬‬
‫"‪ :preload="auto‬وهي معناها أن يقوم المتصفح بعمل دونلود لملف ‪audio‬‬
‫"‪: preload="none‬وهي لعدم عمل دونلود لملف ‪ audio‬من قبل المتصفح‬
‫"‪ : preload="metadata‬وهي لتحميل المعلومات عن ‪ audio‬من قبل‬
‫المتصفح‬
‫>‪ <source‬ﻹضافة ملف ‪ audio‬ونوعه‬
‫وما أسفلة هي رسالة تظهر في حالة عدم تدعيم هذا الكود في المتصفح‬

‫>‪<video‬‬
‫تحدد العﻼمة >‪ <video‬الفيديو ‪ ،‬مثل مقطع الفيلم أو تدفقات الفيديو اﻷخرى‪.‬‬
‫يوجد حاليًا ‪ ٣‬تنسيقات فيديو مدعومة لعنصر ‪ <video>: MP4‬و ‪ WebM‬و‬
‫‪Ogg‬‬
‫ويأخذ الفديو نفس خصائص ‪ audio‬ويضاف عليه خصائص أخرى‬

‫بإمكاننا التحكم في ‪ width‬و ‪height‬‬
‫‪ : poster‬يمكن اضافة صورة للفديو تظل موجودة‬

‫حتى يتم تحميل الفديو وتأخذ ‪poster‬‬
‫وأخيرا ‪ track‬وهو خاص بالترجمة‬

‫>‪ : <track‬يتم استخدام عنصر ‪ <track> HTML‬كعنصر لعناصر‬
‫الوسائط >‪ <audio‬و ‪<video>.‬‬
‫يتم استخدام هذا العنصر لتحديد الترجمات أو ملفات التسميات التوضيحية أو‬
‫الملفات اﻷخرى التي تحتوي على نص ‪ ،‬والتي يجب أن تكون مرئية عند تشغيل‬
‫الوسائط‪.‬‬

‫‪HTML5 Input Types‬‬
‫أنواع المدخﻼت ‪HTML5‬‬
‫‪Color‬‬
‫يتم استخدام >"‪ <input type="color‬لحقول اﻹدخال التي يجب أن‬
‫تحتوي على لون‪.‬‬
‫اعتمادًا على دعم المتصفح ‪ ،‬يمكن أن يظهر منتقي اﻷلوان في حقل اﻹدخال‪.‬‬
‫‪Date‬‬
‫يتم استخدام >"‪ <input type="date‬لحقول اﻹدخال التي يجب أن تحتوي‬
‫على تاريخ‪.‬‬
‫اعتمادًا على دعم المتصفح ‪ ،‬يمكن أن يظهر منتقي التاريخ في حقل اﻹدخال‪.‬‬
‫ضا استخدام الحد اﻷدنى ‪ min‬والحد اﻷقصى ‪ max‬ﻹضافة القيود على‬

‫يمكنك أي ً‬
‫التواريخ‪:‬‬
‫‪Datetime-local‬‬
‫يحدد >"‪ <input type="datetime-local‬حقل إدخال التاريخ‬
‫والوقت ‪ ،‬بدون منطقة زمنية‪.‬‬

‫‪Email‬‬
‫يتم استخدام >"‪ <input type="email‬لحقول اﻹدخال التي يجب أن‬
‫تحتوي على عنوان بريد إلكتروني‪.‬‬
‫اعتمادًا على دعم المتصفح ‪ ،‬يمكن التحقق من صحة عنوان البريد اﻹلكتروني تلقائيًا‬
‫عند إرساله‪.‬‬
‫تتعرف بعض الهواتف الذكية على نوع البريد اﻹلكتروني ‪ ،‬وتضيف "‪ ".com‬إلى‬
‫لوحة المفاتيح لمطابقة إدخال البريد اﻹلكتروني‪.‬‬
‫‪Month‬‬
‫يسمح >"‪ <input type="month‬للمستخدم بتحديد شهر وسنة‪.‬‬
‫‪Number‬‬
‫يعرف >"‪ <input type="number‬حقل إدخال رقمي‪.‬‬ ‫ّ‬
‫ضا تعيين قيود على اﻷرقام المقبولة‪.‬‬
‫يمكنك أي ً‬
‫يعرض المثال التالي حقل إدخال رقمي ‪ ،‬حيث يمكنك إدخال قيمة من ‪ ١‬إلى ‪:٥‬‬

‫‪Range‬‬
‫يعرف >"‪ <input type="range‬عنصر تحكم ﻹدخال رقم ﻻ تكون قيمته‬ ‫ّ‬
‫الدقيقة مهمة )مثل عنصر تحكم شريط التمرير(‬
‫النطاق اﻻفتراضي هو من ‪ ٠‬إلى ‪ .١٠٠‬ومع ذلك ‪ ،‬يمكنك تعيين قيود على اﻷرقام‬
‫المقبولة ذات سمات ‪ min‬و ‪ max‬و ‪step‬‬
‫‪Search‬‬
‫يتم استخدام >"‪ <input type="search‬في حقول البحث )يتصرف‬
‫حقل البحث مثل حقل نص عادي(‪.‬‬
‫‪Tel‬‬
‫يتم استخدام >"‪ <input type="tel‬لحقول اﻹدخال التي يجب أن تحتوي‬
‫على رقم هاتف‪.‬‬
‫مﻼحظة‪ :‬يتم دعم نوع الهاتف حاليًا في ‪ Safari 8‬فقط‪.‬‬

‫‪Time‬‬
‫يسمح >"‪ <input type="time‬للمستخدم بتحديد وقت )بدون منطقة‬
‫زمنية(‪.‬‬
‫اعتمادًا على دعم المتصفح ‪ ،‬يمكن أن يظهر منتقي الوقت في حقل اﻹدخال‪.‬‬
‫‪URL‬‬
‫يتم استخدام >"‪ <input type="url‬لحقول اﻹدخال التي يجب أن تحتوي‬
‫على عنوان‪URL.‬‬
‫اعتمادًا على دعم المتصفح ‪ ،‬يمكن التحقق من صحة حقل عنوان ‪ url‬تلقائيًا عند‬
‫إرساله‪.‬‬
‫تتعرف بعض الهواتف الذكية على نوع عنوان ‪ ، url‬وتضيف "‪ ".com‬إلى لوحة‬
‫المفاتيح لمطابقة إدخال عنوان‪url.‬‬
‫‪Week‬‬
‫يسمح >"‪ <input type="week‬للمستخدم بتحديد أسبوع وسنة‪.‬‬

‫‪HTML Input Attributes‬‬
‫‪:AutoComplete‬‬
‫لعمل حفظ تلقائي للحقول بحيث يتم استدعاء البيانات عند كتابة الحقول مرة أخرى‬
‫وﻹلغائها نضيف لها "‪" of‬‬
‫تحدد السمة ‪ autocomplete‬ما إذا كان يجب أن يتم تشغيل اﻹكمال التلقائي‬
‫للنموذج أو حقل اﻹدخال أم ﻻ‪.‬‬
‫عند تشغيل اﻹكمال التلقائي ‪ ،‬يكمل المتصفح تلقائيًا قيم اﻹدخال استنادًا إلى القيم‬
‫التي أدخلها المستخدم من قبل‪.‬‬
‫نصيحة‪ :‬من الممكن أن يكون لديك "اﻹكمال التلقائي" للنموذج ‪ ،‬و "إيقاف" لحقول‬
‫اﻹدخال المحددة ‪ ،‬أو العكس‪.‬‬
‫تعمل خاصية ‪ autocomplete‬مع >‪ <form‬وأنواع >‪ <input‬التالية‬
‫‪text, search, url, tel, email, password, :‬‬
‫‪datepickers, range, and color.‬‬
‫نصيحة‪ :‬في بعض المتصفحات ‪ ،‬قد تحتاج إلى تنشيط وظيفة اﻹكمال التلقائي حتى يعمل ذلك‪.‬‬
‫‪ :Autofocus‬يعني حدد لي هذا الحقل في الصفحة كي يبدء به المستخدم‬

‫وإن تم استخدام ‪ OF‬فهذا يعني الغاء التحديد‬
‫تحدد السمة ‪ autofocus‬للصورة أن حقل اﻹدخال يجب أن يحصل تلقائيًا على‬
‫التركيز عند تحميل الصفحة‪.‬‬

‫‪: Novalidate‬‬
‫عند وجودها ‪ ،‬يحدد ‪ novalidate‬أنه ﻻ يجب التحقق من صحة بيانات‬
‫النموذج عند إرسالها‪.‬‬
‫‪ : Validate‬وهي تلزم المستخدم بخواص الحقول‬
‫‪:formenctype‬‬
‫نوع التشفير ‪ ..‬نوع تشفير البيانات التي ترسلها للسيرفر‬
‫تحدد السمة ‪ formenctype‬كيفية تشفير بيانات النموذج عند إرسالها( فقط‬
‫للنماذج ذات الطريقة "‪method="post‬‬
‫تتجاوز سمة ‪ formenctype‬سمة سمة عنصر >‪<form‬‬
‫يتم استخدام سمة ‪ formenctype‬مع "‪ type="submit‬ونوع‬
‫"‪type="image‬‬
‫‪:Formmethod‬‬
‫طريقة أرسال البيانات على السيرفر بخﻼف الطريقة اﻷساسية في ‪ form‬أو مثلها‬
‫تحدد السمة ‪ formmethod‬طريقة ‪ HTTP‬ﻹرسال بيانات النموذج إلى عنوان‬
‫‪URL‬الخاص باﻹجراء‪.‬‬
‫تتجاوز السمة ‪ formmethod‬سمة اﻷسلوب لعنصر >‪<form‬‬
‫يتم استخدام سمة ‪ formmethod‬مع "‪ type="submit‬ونوع‬

‫‪:Formnovalidate‬‬
‫وهي ﻻ تلزم المستخدم بخواص الحقول‬
‫نﻼحظ ‪ :‬أن الزرار اﻷول يلزم بإدخال البيانات صحيح أم الثاني ﻻ يلزم‬
‫‪: Formaction‬‬
‫وهي ﻹرسال البيانات لصفحة معينة بخﻼف الصفحة الرئيسية التي تم اضافتها في‬
‫ال ‪ form‬اﻷساسي‬
‫وهي لفتح اللينك في صفحة جديدة‬
‫تحدد السمة ‪ formaction‬عنوان ‪ URL‬الخاص بملف يقوم بمعالجة عنصر‬
‫التحكم في اﻹدخال عند إرسال النموذج‬
‫تتجاوز سمة ‪ formaction‬سمة اﻹجراء لعنصر >‪<form‬‬
‫يتم استخدام سمة ‪ formaction‬مع "‪ type="submit‬ونوع‬
‫‪:Formtarget‬‬
‫تحدد السمة ‪ formtarget‬اس ًما أو كلمة رئيسية تشير إلى مكان عرض‬
‫اﻻستجابة التي يتم تلقيها بعد إرسال النموذج‪.‬‬
‫تتجاوز سمة ‪ formtarget‬سمة اﻹجراء لعنصر >‪<form‬‬
‫يتم استخدام سمة ‪ formtarget‬مع"‪ type="submit‬ونوع‬

‫نﻼحظ ‪ :‬عند استخدامنا ‪ "formtarget="_blank‬فإنه يفتح صفحة جديدة للبيانات‬
‫‪: height and width‬‬
‫تحدد عﻼمتي اﻻرتفاع ‪ width‬و ‪ height‬وعرض عنصر ‪<input‬‬
‫>"‪type="image‬‬
‫‪: list‬‬
‫تشير السمة ‪ list‬إلى عنصر >‪ <datalist‬الذي يحتوي على خيارات‬
‫محددة مسبقًا لعنصر ‪<input>.‬‬
‫‪ :Multiple‬لكتابة أكتر من معلومة داخل الحقل مثل كتابة ايميلين أو رفع أكثر من‬
‫ملف باستخدام خاصية ‪file‬‬
‫تحدد السمة ‪ multiple‬أنه يُسمح للمستخدم بإدخال أكثر من قيمة في عنصر‬
‫‪<input>.‬‬
‫تعمل السمة ‪ multiple‬مع أنواع اﻹدخال التالية‪ :‬البريد اﻹلكتروني والملف‪.‬‬

‫‪: Pattern‬‬
‫يحدد طريقة التعامل مع الحقل وطريقة ادخال البيانات فيه‬
‫ويجبر المستخدم على اتباع التعليمات‪.‬‬
‫تعبيرا عاديًا يتم التحقق من قيمة العنصر ‪<input>.‬‬
‫ً‬ ‫تحدد السمة ‪pattern‬‬
‫تعمل سمة ‪ pattern‬مع أنواع اﻹدخال التالية ‪text, search, url, :‬‬
‫‪tel, email, and password.‬‬
‫نصيحة‪ :‬استخدم سمة العنوان العمومية لوصف النمط لمساعدة المستخدم‪.‬‬
‫نﻼحظ ‪ :‬في ال ‪ pattern‬أننا قمنا بتحديد الحروف من ‪ a-z‬كابتل وصمول‬

‫باﻹضافة إلى أننا نريد فقط ستة أحرف‬
‫‪:Placeholder‬امساك المكان‬
‫تستخدم هذه الخاصية عند عدم استخدام ‪ lapel‬بحيث يظهر المراد كتابته في الحقل‬
‫ويختفي عند بدء كتابة البيانات‪.‬‬
‫تحدد السمة ‪ placeholder‬تلميحا ً يصف القيمة المتوقعة لحقل اﻹدخال )قيمة‬
‫نموذج أو وصف موجز للنسق(‪.‬‬
‫يتم عرض التلميح في حقل اﻹدخال قبل قيام المستخدم بإدخال قيمة‪.‬‬
‫تعمل سمة ‪placeholder‬مع أنواع اﻹدخال التالية ‪text, search, :‬‬
‫‪url, tel, email, and password.‬‬

‫‪ :Required‬يعني مطلوب‬
‫وهذا يعني عند إضافة‪ Required‬لحقل ومحاولة ارسال المعلومات دون ملئ‬
‫الحقل فإنه يرفض ارسال البيانات ﻷن الحلق مطلوب‬
‫تحدد السمة ‪ required‬أنه يجب ملء حقل اﻹدخال قبل إرسال النموذج‪.‬‬
‫تعمل السمة ‪ required‬مع أنواع اﻹدخال التالية‪text, search, url, :‬‬
‫‪tel, email, password, date pickers, number,‬‬
‫‪checkbox, radio, and file.‬‬
‫‪: step‬‬
‫تحدد السمة ‪ step‬الفواصل الزمنية الرقمية لعنصر ‪<input>.‬‬
‫مثال‪ :‬إذا كانت الخطوة = "‪ ، "٣‬يمكن أن تكون اﻷرقام القانونية ‪، ٦ ، ٣ ، ٠ ، ٣-‬‬
‫وما إلى ذلك‪.‬‬
‫نصيحة‪ :‬يمكن استخدام السمة ‪ step‬مع السمتين اﻷقصى والقصوى ﻹنشاء نطاق‬
‫من القيم القانونية‪.‬‬
‫تعمل السمة ‪ step‬مع أنواع اﻹدخال التالية‪number, range, date, :‬‬
‫‪datetime-local, month, time and week..‬‬

‫‪: Namber‬‬
‫ويستخدما في التعامل مع اﻷرقام في تحديد اﻷرقام بحيث ﻻ يقل عن كذا وﻻ يزيد‬
‫عن كذا‬
‫‪ : min‬أقل رقم‬
‫‪ : Max‬أكبر رقم‬
‫‪ : step‬طريقة العد ‪ ٥‬سوف يظل يعد ‪ 5,10,15,20,25‬وهكذا‬
‫‪ : Action‬وهي ﻹرسال البيانات لصفحة معينة‬

‫ويتم وضع لينك الصفحة المرسلة داخلها‬
‫‪ : Method‬طريقة أرسال البيانات على السيرفر‬
‫ولها خاصيتين ‪.. /‬‬
‫‪ : get‬وهي تظهر البيانات في لينك الصفحة‬
‫‪ : post‬وهي تظهر البيانات في ال‪form‬‬
‫‪ Formaction&formmethod:Note‬تعمل فقط على‬
‫‪input typ submit + input typimg‬‬
‫‪ :Multipart/from-data‬نستخدمه عندما نقوم برفع اسكربت أو رفع ملف عن‬
‫طريقة اﻷبلود كي ﻻ يقوم بتشفير الملف ويذهب للسيرفر كما هو بالظبط)عندما نقوم‬
‫بعمل أبلود لملف (‬
‫لربط ‪ input‬ب ‪ form‬غير متصل به‬
‫نضيف لل ‪ form id‬ونضع ال ‪ id‬في ‪input‬‬

‫نصيحة‪ :‬لﻺشارة إلى أكثر من نموذج ‪ ،‬استخدم قائمة مفصولة بفواصل‪.‬‬
‫‪ :Readonly‬للقرأة فقط‬
‫السمة ‪ Readonly‬هي سمة منطقية‪ .‬عندما يكون موجودا‪ ،‬فإنه يحدد أن حقل‬
‫اﻹدخال للقراءة فقط‪ .‬ﻻيمكن تعديل حقل اﻹدخال للقراءة فقط )ومع ذلك‪،‬يمكن‬
‫للمستخدم عﻼمة تبويب إليه‪ ،‬وتسليط الضوء عليه ‪ ،‬ونسخ النص منه(‪ .‬يمكن تعيين‬
‫السمة ‪ Readonly‬للحفاظ على المستخدم من تغيير القيمة حتى يتماس استيفاء‬
‫بعض الشروط اﻷخرى )مثل تحديد مربع اختيار ‪،‬الخ( ‪ .‬بعد ذلك ‪ ،‬يمكن لجافا‬
‫سكريبت إزالة قيمة القراءة ‪ ،‬وجعل حقل اﻹدخال قابل للتعديل ‪.‬‬
‫"‪input type="text" name="country" value="Norway‬‬
‫‪readonly‬‬
‫‪ :disabled‬سمة معطلة‬
‫السمة المعطلة هي سمة منطقية‪ .‬عندما يكون موجودا ‪ ،‬فإنه يحدد أنه يجب تعطيﻼ‬
‫لعنصر>‪ .<input‬عنصر اﻹدخال المعطل غير قابل لﻼستخدام وﻻيمكن النقر‬
‫عليه‪ .‬يمكن تعيين السمة المعطلة ﻹبقاء المستخدم على استخدام العنصر >‪<input‬‬
‫حتى يتم استيفاء بعض الشروط اﻷخرى )مثل تحديد مربع اختيار‪ ،‬وما إلى ذلك(‪.‬‬
‫بعد ذلك‪ ،‬يمكن لجافا سكريبت إزالة قيمة المعطل ‪ ،‬وجعل العنصر>‪ <input‬قابﻼ‬
‫لﻼستخدام‪.‬‬
‫نصيحة‪ :‬لن يتم إرسال عناصر معطلة >‪ <input‬في ‪.form‬‬
‫‪input type="text" name="lname" value="lname" disabled‬‬

‫إضافات من موقع ‪w3‬‬
‫الصور ‪imges‬‬
‫قدم ‪ HTML5‬عنصر >‪ <picture‬ﻹضافة المزيد من المرونة عند تحديد موارد‬

‫الصورة‪.‬‬
‫يحتوي عنصر >‪ <picture‬على عدد من عناصر >‪ ،<source‬كل منها يشير‬
‫إلى مصادر صور مختلفة‪ .‬وبهذه الطريقة ‪ ،‬يمكن للمتصفح اختيار الصورة التي‬
‫تناسب المشهد الحالي و ‪ /‬أو الجهاز بشكل أفضل‪.‬‬
‫سيستخدم المتصفح أول عنصر >‪ <source‬مع قيم السمات المتطابقة ‪ ،‬ويتجاهل‬
‫أي عناصر >‪ <source‬تالية‪.‬‬
‫مثال ‪/‬‬
‫>‪<picture‬‬
‫‪<source media="(min-width:‬‬
‫>"‪650px)" srcset="img_pink_flowers.jpg‬‬
‫‪<source media="(min-width:‬‬
‫>"‪465px)" srcset="img_white_flower.jpg‬‬
‫‪<img src="img_orange_flowers.jpg" alt="Flower‬‬
‫>";‪s" style="width:auto‬‬
‫>‪</picture‬‬
‫حدد دائ ًما عنصر >‪ <img‬كعنصر تابع آخر لعنصر >‪ .<picture‬يتم‬
‫استخدام عنصر >‪ <img‬من قبل المتصفحات التي ﻻ تدعم العنصر‬
‫>‪ ،<picture‬أو إذا لم تتطابق أي من العﻼمات >‪. <source‬‬
‫استخدم عنصر >‪ HTML <map‬لتحديد خريطة صورة‬

‫استخدم عنصر >‪ HTML <area‬لتحديد المناطق القابلة للنقر في خريطة‬
‫الصورة‬
‫‪h ps://www.w3schools.com/html/html_images.asp‬‬

‫‪Canvas‬‬
‫يتم استخدام عنصر>‪ HTML <canvas‬لرسم الرسومات على صفحة ويب‪.‬‬
‫يتم إنشاء الرسم إلى اليسار باستخدام >‪ <canvas‬يظهر أربعة عناصر‪:‬‬
‫مستطيل أحمر ‪ ،‬مستطيل متدرج ‪ ،‬مستطيل متعدد اﻷلوان ‪ ،‬ونص متعدد اﻷلوان‪.‬‬
‫ما هو ‪ html5 canvas‬؟‬

‫يتم استخدام عنصر>‪ HTML <canvas‬لرسم الرسومات ‪ ،‬على الطاير ‪ ،‬عبر‬
‫‪.JavaScript‬‬
‫يمثل عنصر >‪ <canvas‬حاوية للرسومات فقط‪.‬‬
‫مﻼحظة ‪ :‬يجب عليك استخدام ‪ JavaScript‬لرسم الرسومات بالفعل‪.‬‬
‫يحتوي >‪ <canvas‬على عدة طرق لرسم المسارات ‪ ،‬والمربعات ‪ ،‬والدوائر ‪،‬‬
‫والنص ‪ ،‬وإضافة الصور‪.‬‬
‫‪Canvas Examples‬‬
‫اللوحة هي منطقة مستطيلة على صفحة ‪ HTML.‬افتراضيًا ‪ ،‬ﻻ تحتوي إحدى اللوحات على حدود‬
‫وﻻ محتوى‪ .‬يبدو الترميز على النحو التالي‪:‬‬
‫مﻼحظة‪ :‬حدد دائ ًما سمة معرف ‪) id‬المشار إليها في برنامج نصي( ‪ ،‬وسمة‬
‫‪ width‬و ‪ height‬لتحديد حجم اللوحة‪ .‬ﻹضافة حد ‪ ،‬استخدم سمة‬
‫النمط‪style.‬‬
‫في ما يلي مثال على لوحة أساسية فارغة‪:‬‬

‫مثال ‪ /‬ارسم خط‬
‫نﻼحظ‪ :‬تم استخدام كود جافا اسكربت‬
‫مثال ‪ /‬ارسم دائرة‬

‫نﻼحظ ‪ :‬تم استخدام كود جافا اسكربت‬
‫مثال ‪ /‬ارسم تدرج اللوان‬

‫مثال ‪ /‬ارسم التدرج الدائري‬
‫مثال ‪Stroke Text /‬‬

‫‪HTML5 SVG‬‬
‫ما هو ‪ svg‬؟‬
‫لتقف على رسومات ‪ Vector‬قابلة للتحجيم‬
‫يستخدم لتعريف الرسومات للويب‬
‫هو توصية ‪W3C‬‬
‫عنصر >‪ HTML <svg‬هو حاوية لرسومات‪SVG.‬‬
‫يحتوي ‪ svg‬على عدة طرق لرسم المسارات ‪ ،‬والمربعات ‪ ،‬والدوائر ‪ ،‬والنص ‪،‬‬
‫والصور الرسومية‪.‬‬
‫‪ : SVG Circle‬دائرة بـ ‪svg‬‬
‫‪ : SVG Rectangle‬مستطيل بـ ‪svg‬‬

‫ مستطيل مستدير الزوايا‬: SVG Rounded Rectangle
‫ نجمة‬: SVG Star
‫ شعار‬: SVG Logo
42 HTML5 ‫ملخص كورس‬

‫‪CANVAS‬‬ ‫و‬ ‫‪SVG‬‬ ‫اﻻختﻼفات بين‬
‫‪ SVG‬هي لغة لوصف رسومات ثنائية اﻷبعاد في‪XML.‬‬
‫‪ CANVAS‬يوجه رسومات ثنائية اﻷبعاد ‪ ،‬على الطاير( مع‪JavaScript).‬‬
‫‪ SVG‬مبني على ‪ ، XML‬مما يعني أن كل عنصر متوفر ضمن ‪SVG‬‬
‫‪ DOM.‬يمكنك إرفاق معالجات أحداث ‪ JavaScript‬لعنصر‪.‬‬
‫في ‪ ، SVG‬يتم تذكر كل شكل مرسوم ككائن‪ .‬إذا تم تغيير سمات كائن ‪، SVG‬‬
‫يمكن للمتصفح إعادة عرض الشكل تلقائيًا‪.‬‬
‫‪ CANVAS‬يتم تقديم البيكسل بالبكسل‪.‬‬
‫في الرسم ‪ ، CANVAS‬بمجرد رسم الرسم ‪ ،‬يتم نسيانه بواسطة المتصفح‪.‬‬
‫إذا كان يجب تغيير موضعه ‪ ،‬فيجب إعادة رسم المشهد بأكمله ‪ ،‬بما في ذلك أي كائنات‬
‫قد تم تغطيتها بواسطة الرسم‬
‫مقارنة بين ‪ CANVAS‬و ‪SVG‬‬

‫‪CANVAS‬‬
‫القرار تعتمد‬
‫ﻻ يوجد دعم لمعالجات اﻷحداث‬
‫ضعف قدرات تقديم النص‬
‫يمكنك حفظ الصورة الناتجة على هيئة ‪ .png‬أو‬
‫‪.jpg‬مناسبة تما ًما لﻸلعاب كثيفة الرسوم‬
‫‪SVG‬‬
‫قرار مستقل‬
‫دعم معالجات اﻷحداث‬
‫اﻷنسب للتطبيقات مع مناطق العرض الكبيرة )خرائط ‪(Google‬‬
‫كثيرا سيكون بطيئًا(‬
‫العرض البطيء إذا كان معقدًا )أي شيء يستخدم ‪ً DOM‬‬
‫غير مناسبة لتطبيقات اﻷلعاب‬

‫تم انتهاء الكورس‬

ملخصات HTML5

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

ملخصات HTML5

Uploaded by

Copyright:

Available Formats

Html 5

‫إعﻼن ‪ DOCTYPE‬لـ ‪ HTML5‬بسيط للغاية‪:‬‬

‫ضا بسيط جدًا‪:‬‬

‫‪htlm5‬‬ ‫‪ : New HTML5 Elements‬الجديد في عنا‬

‫سمات جديدة لعناصر النموذج‬ ‫‪: New attributes of form elements‬‬

‫واجهات برمجة تطبيقات ‪ HTML5‬الجديدة )واجهات برمجة التطبيقات(‪:‬‬

‫‪1‬‬ ‫ملخص كورس ‪HTML5‬‬

‫الجديد في ‪ html5‬أنك تستطيع الكتابة دون عمل ‪ close tag‬للعنصر‬

‫‪2‬‬ ‫ملخص كورس ‪HTML5‬‬

‫‪3‬‬ ‫ملخص كورس ‪HTML5‬‬

‫‪ : HTML History‬تاريخ ‪html‬‬

‫‪4‬‬ ‫ملخص كورس ‪HTML5‬‬

‫أراد ‪ W3C‬تطوير معيار ‪ HTML5‬و ‪ XHTML‬النهائي‪.‬‬

‫تم إصدار توصية ‪ W3C HTML5‬في ‪ ٢٨‬أكتوبر ‪.٢٠١٤‬‬

‫‪HTML5 Browser Support‬‬

‫يمكنك تعليم المتصفحات القديمة للتعامل مع ‪ HTML5‬بشكل صحيح‪.‬‬

‫‪Define Semantic Elements as Block Elements‬‬

‫‪5‬‬ ‫ملخص كورس ‪HTML5‬‬

‫‪Add New Elements to HTML‬‬

‫بيان جافا سكريبت )"‪document.createElement("myHero‬‬

‫‪6‬‬ ‫ملخص كورس ‪HTML5‬‬

‫ستحتاج إلى ‪ HTML5shiv‬لتوفير التوافق مع متصفحات ‪ IE‬اﻷقدم من‪IE 9.‬‬

‫‪Syntax For HTML5Shiv‬‬

‫ومعنى هذا الكود أنه يقوم بإنشاء ملف ‪ html5shiv.js‬ليعمل مع المتصفح‬

‫‪7‬‬ ‫ملخص كورس ‪HTML5‬‬

‫د لية‬ ‫‪ : Semantic Elements‬عنا‬

‫يتم دعم العناصر الدﻻلية ‪ HTML5‬في جميع المتصفحات الحديثة‪.‬‬

‫‪8‬‬ ‫ملخص كورس ‪HTML5‬‬

‫شعار أو رمز ‪logo or icon :‬‬

‫‪9‬‬ ‫ملخص كورس ‪HTML5‬‬

‫يمكن أن تستخدم المتصفحات ‪ ،‬مثل قارئات الشاشة للمستخدمين ذوي اﻻحتياجات‬

‫] مشاركة المنتدى | مشاركة مدونة | قصة اﻻخبار | تعليق ‪[ Comment:‬‬

‫‪10‬‬ ‫ملخص كورس ‪HTML5‬‬

‫‪11‬‬ ‫ملخص كورس ‪HTML5‬‬

‫‪12‬‬ ‫ملخص كورس ‪HTML5‬‬

‫‪13‬‬ ‫ملخص كورس ‪HTML5‬‬

‫حيث ‪default: min=0, max=1‬‬

‫‪14‬‬ ‫ملخص كورس ‪HTML5‬‬

‫‪15‬‬ ‫ملخص كورس ‪HTML5‬‬

‫‪16‬‬ ‫ملخص كورس ‪HTML5‬‬

‫تحدد عﻼمة >‪ <dialog‬مربع حوار أو نافذة‪.‬‬

‫‪17‬‬ ‫ملخص كورس ‪HTML5‬‬

‫‪Default CSS Settings :‬‬

‫‪18‬‬ ‫ملخص كورس ‪HTML5‬‬

‫‪19‬‬ ‫ملخص كورس ‪HTML5‬‬

‫تحدد العﻼمة >‪<audio‬الصوت ‪ ،‬مثل الموسيقى أو تدفقات الصوت اﻷخرى‪.‬‬

‫أنواع ‪ MIME‬لتنسيقات الصوت‬

‫‪20‬‬ ‫ملخص كورس ‪HTML5‬‬

‫‪21‬‬ ‫ملخص كورس ‪HTML5‬‬

‫ويأخذ الفديو نفس خصائص ‪ audio‬ويضاف عليه خصائص أخرى‬

‫‪22‬‬ ‫ملخص كورس ‪HTML5‬‬

‫‪ : poster‬يمكن اضافة صورة للفديو تظل موجودة‬

‫وأخيرا ‪ track‬وهو خاص بالترجمة‬

‫‪23‬‬ ‫ملخص كورس ‪HTML5‬‬

‫ضا استخدام الحد اﻷدنى ‪ min‬والحد اﻷقصى ‪ max‬ﻹضافة القيود على‬

‫‪24‬‬ ‫ملخص كورس ‪HTML5‬‬

‫‪25‬‬ ‫ملخص كورس ‪HTML5‬‬

‫‪26‬‬ ‫ملخص كورس ‪HTML5‬‬

‫‪27‬‬ ‫ملخص كورس ‪HTML5‬‬

‫‪ :Autofocus‬يعني حدد لي هذا الحقل في الصفحة كي يبدء به المستخدم‬

‫‪28‬‬ ‫ملخص كورس ‪HTML5‬‬

‫‪29‬‬ ‫ملخص كورس ‪HTML5‬‬

‫‪30‬‬ ‫ملخص كورس ‪HTML5‬‬