📌  خصائص HTML5 الجديدة (HTML5 Features)

🎨 1. عنصر الرسم <canvas>

🔹 ما هو <canvas>؟

• عنصر جديد في HTML5 لإنشاء رسومات ثنائية الأبعاد (2D) أو ثلاثية الأبعاد (3D) باستخدام JavaScript.

• بدون JavaScript هو مجرد مستطيل فارغ.

✅ التركيب الأساسي:

🔹 كيف نستخدمه؟

لازم نستخدم JavaScript معاه:

✅ مثال رسم مستطيل:

🔎 النتيجة: يظهر مستطيل أحمر داخل مساحة الرسم.

📝 ملاحظات:

• getContext(“2d”) → للحصول على واجهة الرسم ثنائية الأبعاد.

• ممكن نرسم دوائر، خطوط، صور، نصوص.

• مناسب للألعاب، الرسوم التفاعلية، البيانات المرئية.

📊 2. عنصر التقدم <progress>

🔹 ما هو؟

• عنصر لعرض مؤشر تقدم (Progress bar)، مثل تحميل ملف أو نسبة إنجاز مهمة.

✅ مثال:

🔎 النتيجة: شريط تقدم بنسبة 70%.

🔹 الخصائص:

• value → القيمة الحالية.

• max → الحد الأقصى.

📊 3. عنصر القياس <meter>

🔹 ما هو؟

• عنصر يعرض قيمة رقمية في نطاق معين (مثل درجة الحرارة، نسبة البطارية، تقييم).

• مناسب لعرض مستوى أو مقياس.

✅ مثال:

🔎 النتيجة: شريط مقياس يظهر 70%.

🔹 الخصائص:

• value → القيمة الحالية.

• min / max → النطاق.

• low → الحد الأدنى المريح.

• high → الحد الأقصى المريح.

• optimum → القيمة المثالية.

✅ مثال باستخدام جميع الخصائص:

🌐 4. إدراج محتوى خارجي <embed>

🔹 ما هو؟

• عنصر لإدراج محتوى خارجي (مثل ملفات PDF، فلاش قديم، صور SVG، أو تطبيقات).

• بديل خفيف لعناصر زي <object> أو <iframe>.

✅ مثال: إدراج PDF:

✅ مثال: إدراج صورة SVG:

🔹 الخصائص:

• src → رابط المحتوى.

• type → نوع الملف (MIME type).

• width, height → حجم الإطار.

⚠️ ملاحظة:

• <embed> أقل مرونة من <iframe> و <object>.

• غالبًا بيُستخدم مع الملفات الثابتة (PDF, SVG).

🔹 مثال عملي كامل (Canvas + Progress + Meter + Embed)

🔹 ملخص

• <canvas> → للرسم والرسومات التفاعلية باستخدام JavaScript.

• <progress> → شريط تقدم (تحميل، إنجاز).

• <meter> → مقياس قيمة داخل نطاق معين.

• <embed> → إدراج ملفات خارجية (PDF, SVG, تطبيقات).