📚 تصميم صفحات التنسيق النمطية
المفاهيم الأساسية
HTML: تُستخدم لإعداد الهيكل العام للصفحة، ويمكن اعتبارها العمود الفقري للصفحات الإلكترونية.
صفحات التنسيق النمطية (CSS): هي لغة أنماط تُستخدم لوصف طريقة عرض نص مكتوب بلغة HTML.
جاڤا سكربت (JS): هي لغة برمجة نصية تُستخدم لإضافة محتوى تفاعلي للصفحة الإلكترونية، وتحسين التحكم في عمل العناصر الأخرى.
خريطة المفاهيم
```markmap
الوحدة الخامسة: البرمجة المتقدمة باستخدام HTML
أهداف التعلم
تنسيق باستخدام HTML
- وسوم تنسيق النص
- النص: لتغميق النص (bold).
- النص: لإمالة النص (Italics).
- النص: لتسطير النص (Underlined).
- النص: لتصغير النص.
- النص: لتكبير النص.
- النص: لتمييز النص (Highlighted).
- النص: لوضع خط في منتصف النص.
- النص: لعرض النص بخط منخفض (Subscript).
- النص: لعرض النص بخط مرتفع (Superscript).
- : لتغيير حجم الخط أو نوعه أو لونه.
- خاصية `face`: لتحديد نوع الخط (مثال: Tahoma).
- خاصية `size`: لتحديد حجم الخط (القيم من 1 إلى 9، حيث 1 أصغر و9 أكبر).
- خاصية `color`: لتحديد لون الخط (مثال: blue).
- أمثلة تطبيقية
- مثال 1: استخدام وسمي غامق (bold) ومائل (Italics).
- مثال 2: استخدام وسمي مرتفع (Superscript) ومنخفض (Subscript).
- مثال 3: استخدام وسوم تنسيق الخط.
- مثال 4: استخدام الوسمي small و big
- مثال 5: استخدام الوسمي mark و del
- مثال تطبيقي: صفحة "Football Fan Page"
-
: لإدخال فاصل سطر.
-
: لتحديد فقرة.
- : لإمالة النص داخل الفقرة.
- تدريب 1: تطبيق على القوائم
- المهمة: إنشاء قائمة نقطية وتنسيق عناصرها
- تطبيق 1: تغميق النص الأول في القائمة.
- تطبيق 2: إمالة النص الثاني في القائمة.
- تطبيق 3: وضع خط تحت النص الثالث في القائمة.
- حدود الصورة
- خاصية `border`: لإضافة إطار حول الصورة.
- مثال: `
`
- خاصية البديل (alt)
- الغرض: عرض نص بديل يصف الصورة إذا لم تظهر.
- مثال: ``
- الوسم: `