33- ربط HTML مع تقنيات أخرى – المستوى الرابع
ربط HTML مع CSS (لتنسيق الصفحات) ما هي CSS؟ CSS = Cascading Style Sheetsهي اللغة المسؤولة عن تنسيق وتجميل HTML: تغيير الألوان، الخطوط، المسافات. التحكم في أحجام العناصر. إنشاء تصاميم متجاوبة مع الشاشات….
-
-
32 – العمل مع مشاريع حقيقية (Real Projects) – المستوى الثالث
📌 14. العمل مع مشاريع حقيقية (Real Projects) 🎯 1. إنشاء صفحة شخصية (Portfolio) الـ Portfolio هو موقع صغير تعرف فيه بنفسك، مهاراتك، وأعمالك.أي مبرمج أو مصمم لازم يكون عنده. مكونات الصفحة: Header…
-
31 – تنظيم الكود بشكل احترافي (Code Organization)
تنظيم الكود بشكل احترافي (Code Organization) تنظيم الكود مش بس بيخلي شكله حلو، لكن كمان بيخلي: الكود سهل القراءة لك ولأي مطور بعدك. قابل للصيانة والتطوير. يقلل الأخطاء البرمجية. 🔹 1. تنسيقات الكود…
-
30 – إمكانية الوصول (Accessibility) – المستوى المتقدم (Advanced)
إمكانية الوصول (Accessibility) إمكانية الوصول (Accessibility – a11y) معناها إن موقعك يكون سهل الاستخدام لكل الناس، بما فيهم ذوي الاحتياجات الخاصة (ضعاف البصر، المكفوفين، مستخدمي قارئات الشاشة، صعوبات الحركة…).HTML بيوفر أدوات وعناصر تساعد…
-
29 – خصائص HTML5 الجديدة – المستوى الثالث: المستوى المتقدم
📌 خصائص HTML5 الجديدة (HTML5 Features) 🎨 1. عنصر الرسم <canvas> 🔹 ما هو <canvas>؟ عنصر جديد في HTML5 لإنشاء رسومات ثنائية الأبعاد (2D) أو ثلاثية الأبعاد (3D) باستخدام JavaScript. بدون JavaScript هو مجرد مستطيل فارغ. ✅ التركيب الأساسي:…
-
28 – الميتا تاج (Meta Tags) المستوى الثاني متوسط
📌 10. الميتا تاج (Meta Tags) الميتا تاجز Meta Tags عناصر بنكتبها داخل وسم <head> عشان نضيف معلومات وصفية (Metadata) عن الصفحة.هي مش بتظهر مباشرة للزائر، لكن بيستخدمها: المتصفح (لتحديد الترميز والعرض). محركات البحث (SEO). السوشيال ميديا (عرض معاينات)….
-
27 – الوسائط المتعددة Multimedia المستوى الثاني متوسط
📌 9. الوسائط المتعددة (Multimedia) 🎵 أولًا: إدراج الصوت <audio> 🔹 ما هو <audio>؟ عنصر لإضافة ملفات صوتية في الصفحة (موسيقى، تسجيلات، مؤثرات). بيدعم صيغ زي: mp3, ogg, wav. ✅ التركيب الأساسي: 🔹 الخصائص المهمة: src → رابط ملف…
-
26- العناصر الهيكلية (Semantic Elements) – المستوى الثاني متوسط
📌 العناصر الهيكلية (Semantic Elements) 🔹 أولًا: ما الفرق بين العناصر العادية (Non-Semantic) والعناصر الدلالية (Semantic)؟ ✅ العناصر العادية (Non-Semantic Elements) زي <div> و <span> ما لهاش معنى محدد بخصوص المحتوى، هي مجرد حاويات عامة. بتُستخدم عشان…
-
25 – الخصائص المهمة: name, value, placeholder, required النماذج (Forms) – المستوى الثاني متوسط
📌 الخصائص المهمة لعناصر النماذج 🔹 1. الخاصية name المعنى: تحدد اسم الحقل اللي هيتبعت مع البيانات إلى السيرفر. بدونها السيرفر مش هيعرف يميز البيانات. كل عنصر في النموذج (input, textarea, select) لازم يكون…
-
24 – القوائم المنسدلة < select > و < option >– النماذج (Forms) – المستوى الثاني متوسط
📌 القوائم المنسدلة <select> و <option> 🔹 ما هو <select>؟ عنصر يستخدم لإنشاء قائمة منسدلة (Dropdown List). يسمح للمستخدم يختار عنصر واحد أو أكثر من مجموعة خيارات. بيتكون من وسم رئيسي <select> جواه عناصر فرعية <option>. ✅ التركيب الأساسي: 🔹 ما هو <option>؟ عنصر…
