يتناول الكتاب تصميم صفحات الويب باستخدام HTML5 و CSS3، حيث يقدم مقدمة شاملة حول مبادئ البرمجة للمبتدئين. يركز على أحدث الإصدارات للغات البرمجة ويشمل أمثلة تطبيقية لتسهيل الفهم. الهدف من الكتاب هو توجيه القارئ نحو تطوير مهاراته في تصميم الويب بفعالية.

2. : ‫المبدع‬ ‫ـ‬ّ‫لممصم‬ ‫الغالؼ‬ ‫تصميـ‬
‫اىيـ‬‫ر‬‫اإلب‬ ‫يز‬‫ز‬‫عبدالع‬ ‫بدر‬

3. ‫م‬َّ‫م‬‫تع‬
HTML5 & CSS3
(‫نحو‬ ‫األولى‬ ‫الخطوة‬‫البرمجة‬‫لمويب‬)
‫صالح‬ ‫ِّد‬‫سي‬ ‫مختار‬ ‫الميندس‬

5. ‫ؼ‬ِّ‫ل‬‫لممؤ‬ ‫محفوظة‬ ‫الحقوؽ‬ ‫جميع‬

7. ‫اإلهداء‬
‫نخمتيف‬ ‫أعمى‬ ‫إلى‬ِ‫القمب‬ ‫ضفاؼ‬ ‫عمى‬...
.‫اهلل‬ ‫حفظيما‬ َّ‫الدي‬‫و‬

9. ٜ
‫تنويه‬
ُ‫غت‬‫فر‬‫تأليؼ‬ ‫مف‬‫في‬ ‫الكتاب‬ ‫ىذا‬‫األولى‬ ‫األشير‬‫مف‬‫عاـ‬ٕٓٔٔ,ُ‫عقدت‬ ‫قد‬ ‫كنت‬ ‫و‬‫عمى‬ َ‫العزـ‬
ً‫ا‬‫مطبوع‬ ‫ه‬‫ر‬‫إصدا‬َّ‫كأو‬‫بي‬‫ر‬‫ع‬ ‫كتاب‬ ‫ؿ‬‫موضوعو‬ ‫في‬,ً‫ا‬‫حاذي‬‫بذلؾ‬‫حذو‬‫و‬ ‫أخيو‬‫ـ‬ّ‫م‬‫(تع‬ ‫سابقو‬jQuery
‫في‬ٕٔٓ)‫دقيقة‬,َّ‫لكف‬‫مشيئة‬‫اهلل‬‫قضت‬ّ‫أّل‬‫بعد‬ ‫المحظة‬ ‫ىذه‬ ‫ى‬ّ‫حت‬ ‫لذلؾ‬ ‫المالئمة‬ ‫الظروؼ‬ ‫أ‬ّ‫تتيي‬
‫مرور‬ ‫مع‬ ‫تتضاءؿ‬ ‫كيذا‬ ٍ‫عمؿ‬ ‫قيمة‬ َّ‫أف‬ ‫أؤمف‬ ‫ني‬َّ‫ألن‬ ‫و‬ , ‫إتمامو‬ ‫عمى‬ ً‫ا‬‫ر‬‫شي‬ ‫يف‬‫ر‬‫عش‬ ‫و‬ ‫خمسة‬ ‫انقضاء‬
‫الوقت‬‫أيت‬‫ر‬ ‫فقد‬-‫تفكير‬ ‫بعد‬-‫ه‬‫ر‬‫أنش‬ ‫أف‬ً‫ا‬‫مخمص‬‫اني‬ّ‫مج‬ ٍ‫بشكؿ‬( ِّ‫اإللكتروني‬ ‫الكتاب‬ ‫بصيغة‬PDF)
.‫األسطر‬ ‫ىذه‬ ‫كتابة‬ ‫مف‬ ‫أكثر‬ ‫ي‬ّ‫من‬ ‫ب‬ّ‫م‬‫يتط‬ ‫ّل‬ ‫يغة‬ّ‫الص‬ ‫بيذه‬ ‫ه‬‫ر‬‫نش‬ ‫كاف‬ ‫ا‬ّ‫لم‬ ‫بو‬ ‫ينتفع‬ ‫ارسيف‬ّ‫الد‬ ‫أحد‬ َّ‫لعؿ‬
‫مختار‬
‫البوكماؿ‬ٔٓ/ٙ/ٕٖٓٔ

10. ٔٓ

11. ٔٔ
‫الكتاب‬ ‫يدي‬ ‫بين‬
‫حيـ‬ّ‫الر‬ ‫حمف‬ّ‫الر‬ ‫اهلل‬ ‫بسـ‬َّ‫الس‬ ‫و‬ ‫َّالة‬‫الص‬ ‫و‬ ,‫و‬ ِ‫آلو‬ ‫عمى‬ ‫و‬ ٍ‫د‬َّ‫محم‬ ‫ِّنا‬‫نبي‬ ‫عمى‬ ‫الـ‬‫أجمعيف‬ ِ‫أصحابو‬,‫و‬
:‫بعد‬
‫ػ‬‫ل‬‫ا‬ ‫د‬ُ‫ع‬َ‫ي‬ ‫لـ‬Web‫بسيط‬ ‫ي‬ِّ‫نص‬ ‫بشكؿ‬ ‫المعمومة‬ ‫تقديـ‬ ‫عمى‬ ً‫ا‬‫ر‬‫مقتص‬ ‫اليوـ‬,‫تقديـ‬ ‫الميـ‬ ‫مف‬ ‫أصبح‬ ‫حيث‬
‫المحتوى‬‫أسموب‬ ‫و‬ ‫بشكؿ‬‫اإلعالمي‬ ‫إلى‬ ‫يكوف‬ ‫ما‬ ‫أقرب‬,‫ف‬ ,ً‫ال‬‫فع‬ ‫كذلؾ‬ ‫ىو‬ ‫َّما‬‫ب‬‫ر‬ ‫بؿ‬‫أصبح‬ ‫قد‬‫مف‬
‫النادر‬-‫أيي‬‫ر‬‫ب‬-‫ػ‬‫ل‬‫ا‬ ‫اقع‬‫و‬‫م‬ ‫في‬ ‫تجد‬ ‫أف‬Web‫اليوـ‬-‫منيا‬ ‫الجيدة‬ ‫اقع‬‫و‬‫الم‬ ‫أعني‬ ‫و‬-‫يقدـ‬ ‫ّل‬ ‫ما‬
‫الشكؿ‬ ‫إلى‬ ‫إضافة‬ ‫ئي‬‫ر‬‫م‬ ‫و‬ ‫ع‬‫مسمو‬ ‫بشكؿ‬ ‫المعمومات‬‫التقميدي‬‫المقروء‬‫و‬‫ناحية‬ ‫مف‬ ‫ىذا‬,‫مف‬ ‫أما‬
‫ال‬‫ناحية‬‫األ‬‫ػ‬‫ل‬‫ا‬ ‫ر‬َّ‫تطو‬ ‫فقد‬ ‫ى‬‫خر‬Web‫ػ‬‫ل‬‫ػا‬‫ب‬ ‫يعرؼ‬ ‫لما‬ ‫التنظير‬ ‫بدء‬ ‫مع‬ ‫كفيوـ‬ ‫ذاتو‬Web 2.0‫عاـ‬
ٕٓٓٙ‫ظيور‬ ‫إلى‬ ‫بالنتيجة‬ ‫ى‬ّ‫أد‬ ‫ما‬ ‫ىذا‬ ‫و‬ ,‫كانت‬ ‫التي‬ ‫البرمجية‬ ‫المغات‬ ‫و‬ ‫ات‬‫و‬‫األد‬ ‫لتطوير‬ ‫الحاجة‬
‫ػ‬‫ل‬‫ا‬ ‫اقع‬‫و‬‫م‬ ‫مصممي‬ ‫و‬ ‫ي‬‫مطور‬ ‫يدي‬ ‫بيف‬Web‫العمالء‬ ‫متطمبات‬ ‫تحقيؽ‬ ‫عف‬ ً‫ة‬‫ر‬‫قاص‬ ‫أصبحت‬ ‫التي‬ ‫و‬
‫ية‬‫ر‬‫عص‬ ‫ويب‬ ‫اقع‬‫و‬‫م‬ ‫بامتالؾ‬ ‫الطموحيف‬‫التي‬ ‫و‬‫ب‬ ‫التقنية‬ ‫أمر‬ ‫ييمو‬ ‫مف‬ ‫قاـ‬ ‫ما‬ ‫عاف‬‫سر‬‫ىا‬‫تطوير‬‫تقديـ‬ ‫و‬
‫تأقم‬ ‫أكثر‬ ‫و‬ ‫أقوى‬ ‫منيا‬ ‫جديدة‬ ‫ات‬‫ر‬‫إصدا‬‫مع‬ ً‫ا‬‫م‬Web‫اليوـ‬ّ‫ألف‬ ‫ذلؾ‬ ,"‫في‬ ‫النجاح‬ ‫أساس‬ ‫يعتبر‬ ‫التأقمـ‬
‫ػ‬‫ل‬‫ا‬ ‫عالـ‬Web".
‫ي‬‫الكتاب‬ ‫ىذا‬ ‫ناقش‬‫مف‬ ‫لكؿ‬ ‫إصدار‬ ‫أحدث‬‫لغتي‬HTML‫و‬CSS‫األولى‬ ‫الخطوة‬ ‫اف‬‫ر‬‫تعتب‬ ‫المتاف‬
ُ‫م‬ ‫ألي‬َ‫ط‬‫ر‬ِّ‫و‬Web‫إذ‬‫ح‬‫بشر‬ ‫يقوـ‬‫لغة‬HTML5‫ح‬‫شر‬ ‫خالؿ‬ ‫مف‬ ‫لذلؾ‬ ‫التمييد‬ ‫بعد‬HTML‫التقميدية‬
‫الصفر‬ ‫مف‬‫و‬‫معايير‬ َّ‫ثـ‬ ‫مف‬XHTMLً‫ا‬‫أيض‬ ‫الصفر‬ ‫مف‬,‫كما‬‫ػ‬‫ل‬ ً‫ال‬َّ‫مفص‬ ً‫ا‬‫شرح‬ ‫الكتاب‬ ‫ىذا‬ ‫ـ‬ِّ‫يقد‬
CSS3‫ح‬‫شر‬ ‫خالؿ‬ ‫مف‬ ‫لذلؾ‬ ‫التمييد‬ ‫بعد‬CSS‫التقميدية‬ً‫ا‬‫أيض‬ ‫الصفر‬ ‫مف‬‫الكتاب‬ ‫ىذا‬ ‫فإف‬ ‫بيذا‬ ‫و‬ ,
‫يتألؼ‬‫مف‬‫فصميف‬:
ٔ-HTML5‫الفصؿ‬ ‫ىذا‬ ‫يناقش‬ :( ‫الخامس‬ ‫اإلصدار‬‫و‬‫مف‬ )‫األحدث‬‫َّة‬‫النصي‬ ‫البرمجة‬ ‫لغة‬
‫الت‬‫َّة‬‫شعبي‬HTML‫كتابة‬ ‫عمى‬ ً‫ا‬‫ر‬‫قاد‬ ‫يكوف‬ ‫أف‬ ‫ئو‬‫ر‬‫لقا‬ ‫يضمف‬ ‫و‬ ‫ج‬َّ‫متدر‬ ‫و‬ ‫َّؿ‬‫مفص‬ ‫بشكؿ‬
.‫اهلل‬ ‫بإذف‬ ‫يده‬‫ر‬‫ي‬ ‫الذي‬ ‫بالشكؿ‬ ‫و‬ ‫غبو‬‫ير‬ ‫الذي‬ ‫بالمحتوى‬ ‫ويب‬ ‫صفحات‬

12. ٕٔ
ٕ-CSS3‫ا‬ ‫ىذا‬ ‫يناقش‬ :( ‫الثالث‬ ‫اإلصدار‬ ‫يقدميا‬ ‫التي‬ ‫ايا‬‫ز‬‫الم‬ ‫كامؿ‬ ‫لفصؿ‬‫و‬‫مف‬ )‫األحدث‬
‫َّة‬‫اّلنسيابي‬ ‫األنماط‬ ‫اؽ‬‫ر‬‫أو‬CSS‫مف‬ ‫و‬ ‫بسيط‬ ‫بشكؿ‬‫يوـ‬,‫عمى‬ ً‫ا‬‫ر‬‫قاد‬ ‫يكوف‬ ‫أف‬ ‫ئو‬‫ر‬‫قا‬ ‫يعد‬ ‫و‬
‫تجميؿ‬‫في‬ ‫مو‬َّ‫قد‬ ‫الذي‬ ‫المحتوى‬‫الويب‬ ‫صفحات‬.‫ؿ‬َّ‫األو‬ ‫الفصؿ‬ ‫في‬ ‫كتابتيا‬ ‫ـ‬َّ‫تعم‬ ‫التي‬
ٖ-‫عف‬ ‫الحديث‬ ‫يكتمؿ‬ ‫كي‬‫لمويب‬ ‫البرمجة‬‫العميؿ‬ ‫طرؼ‬ ‫مف‬Client Side‫أف‬ ‫يجب‬ ‫كاف‬
‫فصؿ‬ ‫ىناؾ‬ ‫يكوف‬‫ثالث‬‫لغة‬ ‫عف‬ ‫يتحدث‬Java Script‫الحداثة‬ ‫أنصار‬ ‫مف‬ ‫ألنني‬ ‫و‬ ‫لكف‬ ‫و‬
)‫السيولة‬ ‫(و‬‫كتابي‬ ‫اءة‬‫ر‬‫بق‬ ‫يز‬‫ز‬‫الع‬ ‫ئ‬‫القار‬ ‫فأنصح‬ ‫البرمجية‬ ‫بالتقنيات‬ ‫يتعمؽ‬ ‫فيما‬"‫ـ‬َّ‫تعم‬
jQuery‫في‬ٕٔٓ‫دقيقة‬"‫لغة‬ ‫عف‬ ‫يتحدث‬ ‫جع‬‫مر‬ ‫أي‬ ‫أو‬jQuery‫َّط‬‫مبس‬ ‫و‬ ‫اضح‬‫و‬ ‫بشكؿ‬
ً‫ّل‬‫و‬‫أ‬ ‫الكتاب‬ ‫ىذا‬ ‫اءة‬‫ر‬‫ق‬ ‫بعد‬‫ألف‬ ,jQuery‫لمغة‬ ‫ي‬‫العصر‬ ‫البديؿ‬ ‫ىي‬Java Script‫أيي‬‫ر‬‫ب‬.
‫ف‬ ‫الكتاب‬ ‫ىذا‬ ‫في‬ ‫األفكار‬ ‫عرض‬ ‫يقة‬‫ر‬‫ط‬ ‫عف‬ ‫ا‬ّ‫أم‬‫أجعم‬ ‫كي‬ ‫اجتيدت‬ ‫و‬ ‫حاولت‬ ‫قد‬‫يا‬‫غير‬‫ّل‬ ‫و‬ ‫ة‬َّ‫ممم‬
‫و‬ ‫دة‬َّ‫ق‬‫مع‬‫ّل‬ً‫ا‬‫ر‬‫كثي‬ ‫الذي‬ ‫المتعب‬ ‫بالمحتوى‬ ‫شبيية‬‫عانيت‬ ‫ما‬‫منو‬‫البرمجة‬ ‫لغات‬ ‫تناقش‬ ‫التي‬ ‫الكتب‬ ‫في‬
‫لألسؼ‬‫أف‬ ‫أقوؿ‬ ‫أف‬ ‫يمكنني‬ ‫و‬‫ى‬‫الكتاب‬ ‫ذا‬َّ‫البرمجي‬ ‫األسطر‬ ‫ات‬‫ر‬‫عش‬ ‫ر‬ِّ‫يفج‬ ‫ّل‬ً‫ة‬‫دفع‬ ‫المفيومة‬ ‫غير‬ ‫ة‬
,‫ة‬‫ر‬‫الفك‬ ‫عرض‬ ‫في‬ ‫المطموب‬ ‫مف‬ ‫أكثر‬ ‫يطيؿ‬ ‫ّل‬ ‫و‬َّ‫أن‬ ‫كما‬ ,‫ليا‬ ‫توضيح‬ ‫دوف‬ ‫ئو‬‫ر‬‫قا‬ ‫وجو‬ ‫في‬ ً‫احدة‬‫و‬‫لكنو‬
‫باختصار‬.‫فتيا‬‫ر‬‫مع‬ ‫تتوجب‬ ‫التي‬ ‫انب‬‫و‬‫الج‬ ‫مف‬ ‫جانب‬ ‫أي‬ ‫يغفؿ‬ ‫أف‬ ‫دوف‬ ‫فقط‬ ‫قولو‬ ‫يجب‬ ‫ما‬ ‫يقوؿ‬
ً‫ا‬‫ختام‬‫و‬ ‫العمؿ‬ ‫ىذا‬ ‫َّؿ‬‫يتقب‬ ‫أف‬ ‫اهلل‬ ‫أسأؿ‬‫أف‬‫يكتبو‬ ‫و‬ ‫فيو‬ ‫يبارؾ‬ً‫ة‬‫صدق‬ً‫ة‬‫ي‬‫ر‬‫جا‬‫مف‬‫باب‬‫ينتفع‬ ‫الذي‬ ‫العمـ‬
.‫ـ‬ُّ‫التعم‬ ‫عمى‬ ‫الصبر‬ ‫و‬ ‫الحفظ‬ ‫و‬ ‫الفيـ‬ ‫ئو‬‫ر‬‫قا‬ ‫يميـ‬ ‫أف‬ ‫و‬ ‫بو‬
‫صالح‬ ‫ِّد‬‫سي‬ ‫ـ.مختار‬
‫البوكماؿ‬ٕٛ/ٛ/ٕٓٔٔ

13. ٖٔ
‫الفصؿ‬‫ؿ‬َّ‫األو‬
HTML 5

14. ٔٗ

15. ٔ٘
‫مقدمة‬
‫لغة‬ ‫الفصؿ‬ ‫ىذا‬ ‫يناقش‬HTML5‫ّل‬ ‫نا‬ّ‫ألن‬ ‫و‬ ,‫الويب‬ ‫اقع‬‫و‬‫م‬ ‫إنشاء‬ ‫في‬ ‫األساس‬ ‫حجر‬ ‫تعتبر‬ ‫التي‬
‫عف‬ ‫نتحدث‬ ‫أف‬ ‫يمكف‬HTML5‫لغتي‬ ‫الفصؿ‬ ‫ىذا‬ ‫فسيناقش‬ ً‫ة‬‫ر‬‫مباش‬HTML‫و‬XHTMLً‫ّل‬‫و‬‫أ‬,‫و‬
‫مع‬ ‫البداية‬‫لغة‬HTML.
‫هي‬ ‫ما‬HTML‫؟‬
َّ‫إف‬HTML‫اختصار‬ ‫ىي‬abbreviation‫الجممة‬ ‫مف‬ ‫األولى‬ ‫الحروؼ‬Hyper Text Markup
Language‫وصؼ‬ ‫(لغة‬ ‫فية‬‫ر‬‫ح‬ ‫غير‬ ‫بترجمة‬ ‫تعني‬ ‫التي‬ ‫و‬‫الويب‬ ‫صفحات‬)ٔ
,‫لغة‬ ‫ليست‬ ‫ىي‬ ‫و‬
‫َّة‬‫وصفي‬ ‫لغة‬ ‫ىي‬ ‫بؿ‬ ,‫ّل‬ ,‫َّة‬‫برمجي‬Markup Language,َّ‫ألف‬HTML‫تستخدـ‬‫مف‬ ‫مجموعة‬
‫الوسوـ‬Tags‫لوصؼ‬‫الويب‬ ‫صفحة‬.
‫الوسوـ‬ ‫ا‬َّ‫أم‬Tagsً‫ا‬‫مسبق‬ ‫محددة‬ ‫أحرؼ‬ ‫أو‬ ‫كممات‬ ‫فيي‬Keywords‫تكوف‬ ‫و‬ ,‫َّة‬‫خاص‬ ‫معاني‬ ‫تحمؿ‬
‫الشكؿ‬ ‫مف‬ ‫قوسيف‬ ‫بيف‬ ‫ة‬‫ر‬‫محصو‬< >‫مثؿ‬<b>‫و‬<html>‫شكؿ‬ ‫عمى‬ ‫الغالب‬ ‫في‬ ‫الوسوـ‬ ‫تأتي‬ ,
‫مثؿ‬ ‫اج‬‫و‬‫أز‬<b>‫و‬</b>‫ؿ‬َّ‫األو‬ ‫الوسـ‬ ‫يدعى‬ ,<b>‫البداية‬ ‫بوسـ‬Begin Tag‫الفتح‬ ‫وسـ‬ ‫أو‬
Opening Tag‫الثا‬ ‫الوسـ‬ ‫يدعى‬ ‫و‬ ,‫ني‬</b>‫النياية‬ ‫بوسـ‬End Tag‫اإلغالؽ‬ ‫وسـ‬ ‫أو‬
Closing Tag.
‫مستندات‬ ‫كتابة‬ ‫يتـ‬HTML‫(مثؿ‬ ‫بسيط‬ ‫نصي‬ ‫محرر‬ ‫أي‬ ‫باستخداـ‬notepad‫ـ‬ِّ‫متقد‬ ‫أو‬ )‫(مثؿ‬
DreamWaver‫أو‬Visual Studioً‫ا‬‫امتداد‬ ‫تحمؿ‬ ‫ممفات‬ ‫في‬ ‫ينيا‬‫ز‬‫تخ‬ ‫يتـ‬ ‫و‬ ,)extension‫مف‬
: ‫التالييف‬ ‫اّلمتداديف‬.html‫أو‬.htm,‫و‬‫بالطبع‬‫ّل‬‫يوجد‬‫أي‬‫فرؽ‬‫بينيما‬.
ٔ
‫قبمي‬ ‫أحد‬ ‫قاـ‬ ‫إف‬ ‫أعرؼ‬ ‫ّل‬.‫األنسب‬ ‫الترجمة‬ ‫أنيا‬ ‫أشعر‬ ‫ني‬ّ‫لكن‬ ‫يقة‬‫ر‬‫الط‬ ‫بيذه‬ ‫بترجمتيا‬

16. ٔٙ
‫تتكوف‬‫مستندات‬HTML‫إلى‬ ‫باإلضافة‬ ‫عادي‬ ‫نصي‬ ‫محتوى‬ ‫مف‬ ‫أساسي‬ ‫بشكؿ‬‫وسوـ‬ ‫مف‬ ‫مجموعة‬
HTML,‫مستندات‬ ‫فإف‬ ‫الحقيقة‬ ‫في‬ ‫و‬HTML)‫الويب‬ ‫ػ(صفحات‬‫ب‬ ‫تدعى‬Web Pages,‫و‬‫يتـ‬
‫استخداـ‬‫الويب‬ ‫مستعرض‬ ‫باسـ‬ ‫نامج‬‫ر‬‫الب‬ ‫ىذا‬ ‫يعرؼ‬ ‫المستندات‬ ‫ىذه‬ ‫اءة‬‫ر‬‫لق‬ ‫خاص‬ ‫نامج‬‫ر‬‫ب‬Web
Browser‫أمثمتو‬ ‫مف‬ ‫و‬Internet Explorer‫و‬Firefox‫و‬Google chrome..‫إلخ‬.
‫مستندات‬ ‫اءة‬‫ر‬‫ق‬ ‫ىو‬ ‫الويب‬ ‫مستعرض‬ ‫مف‬ ‫اليدؼ‬HTML‫بمعنى‬ ,‫ويب‬ ‫صفحات‬ ‫بشكؿ‬ ‫عرضيا‬ ‫و‬
‫وسوـ‬ ‫يعرض‬ ‫ّل‬ ‫الويب‬ ‫مستعرض‬ ‫أف‬HTML‫إلنتاج‬ ‫يستخدميا‬ ‫و‬َّ‫لكن‬ ‫و‬ ‫مباشر‬ ‫بشكؿ‬ ‫كنصوص‬
‫المو‬ ‫المحتوى‬ ‫و‬ ‫بالشكؿ‬ ‫ويب‬ ‫صفحة‬‫مستند‬ ‫في‬ ‫صوفيف‬HTML.
‫في‬ ‫أبدأ‬ ‫كيف‬‫تعمم‬‫مستندات‬ ‫كتابة‬HTML‫؟‬
‫في‬ ‫تبدأ‬ ‫لكي‬ ‫تحتاجو‬ ‫ما‬ ‫كؿ‬‫تعمـ‬‫مستندات‬ ‫كتابة‬HTML‫(مثؿ‬ ‫نصوص‬ ‫محرر‬ ‫ىو‬Notepad‫و‬ )
‫(مثؿ‬ ‫ويب‬ ‫مستعرض‬Internet Explorer)‫خطوة‬ ‫التعمـ‬ ‫و‬ ‫التالية‬ ‫ات‬‫ر‬‫الفق‬ ‫اءة‬‫ر‬‫ق‬ ‫يمكنؾ‬ ‫ذلؾ‬ ‫بعد‬ ,
‫ل‬ ‫يقة‬‫ر‬‫ط‬ ‫أفضؿ‬ َّ‫أف‬ ‫لؾ‬ ‫أؤكد‬ ‫و‬ ‫بخطوة‬‫متعمـ‬–‫أيي‬‫ر‬‫ب‬-‫ستصادفؾ‬ ‫التي‬ ‫األمثمة‬ ‫كتابة‬ ‫ىي‬ً‫ا‬‫ّلحق‬‫بشكؿ‬
‫مباشر‬.‫الويب‬ ‫مستعرض‬ ‫باستخداـ‬ ‫ىا‬‫اختبار‬ َّ‫ثـ‬ ‫مف‬ ‫و‬ ‫النصوص‬ ‫محرر‬ ‫باستخداـ‬
‫لغة‬ ‫في‬ ‫ل‬ َّ‫األو‬ ‫المثال‬HTML
‫صفحة‬ ‫أوؿ‬ ‫بكتابة‬ ‫اآلف‬ ‫سنقوـ‬HTML:‫التالية‬ ‫ات‬‫و‬‫الخط‬ ‫باتباع‬ ً‫ا‬‫مع‬
‫نقوـ‬ً‫ّل‬‫و‬‫أ‬‫ة‬‫ر‬‫المفك‬ ‫ليكف‬ ‫و‬ ‫النصوص‬ ‫ات‬‫ر‬‫محر‬ ‫أحد‬ ‫بفتح‬Notepad‫نكتب‬ ‫و‬ ‫المثاؿ‬ ‫سبيؿ‬ ‫عمى‬
:‫التالية‬ ‫ة‬‫ر‬‫الشيف‬
<html>
<head>
<title>
My first HTML page

17. ٔٚ
</title>
</head>
<body>
<p>
Welcome to my first HTML page!
</p>
</body>
</html>
‫باسـ‬ ‫الممؼ‬ ‫بحفظ‬ ‫نقوـ‬ َّ‫ثـ‬firstPage.html
‫الشكل‬1:‫ة‬‫شيفر‬ ‫أول‬ ‫كتابة‬HTML‫الممف‬ ‫حفظ‬ ‫و‬ ‫ة‬‫المفكر‬ ‫برنامج‬ ‫في‬
‫الالحقة‬ ‫عف‬ ‫مختمفة‬ ‫بالحقة‬ ‫الممؼ‬ ‫لحفظ‬ : ‫ممحوظة‬.txt,‫يقتاف‬‫ر‬‫ط‬ ‫ىناؾ‬‫الممفات‬ ‫جميع‬ ‫الخيار‬ ‫نختار‬ ‫أف‬ ‫األولى‬
*.*‫ػ‬‫ك‬ ‫حفظ‬ ‫المنسدلة‬ ‫القائمة‬ ‫مف‬Save as type‫نك‬ ‫ثـ‬ ‫الممؼ‬ ‫اسـ‬ ‫أسفؿ‬ ‫ة‬‫ر‬‫الصو‬ ‫في‬ ‫ة‬‫ر‬‫الظاى‬‫و‬ ‫الممؼ‬ ‫اسـ‬ ‫تب‬
,‫عادي‬ ‫بشكؿ‬ ‫ّلحقتو‬‫أف‬ ‫فيي‬ ً‫ا‬َّ‫شخصي‬ ‫ميا‬ِّ‫أفض‬ ‫التي‬ ‫و‬ ‫الثانية‬ ‫ا‬َّ‫أم‬‫عالمتي‬ ‫بيف‬ ‫المطموبة‬ ‫ّلحقتو‬ ‫مع‬ ‫الممؼ‬ ‫اسـ‬ ‫نضع‬
‫اقتباس‬‫مزدوجتيف‬‫أع‬ ‫ة‬‫ر‬‫الصو‬ ‫في‬ ‫ح‬َّ‫موض‬ ‫ىو‬ ‫كما‬ ‫حفظ‬ ‫نختار‬ ‫و‬.‫اله‬

18. ٔٛ
‫اآلف‬‫و‬‫باّلسـ‬ ‫الممؼ‬ ‫بحفظ‬ ‫قمنا‬ ‫أف‬ ‫بعد‬firstPage.html‫أحد‬ ‫باستخداـ‬ ‫اضو‬‫ر‬‫باستع‬ ‫نقوـ‬
‫مستعرضات‬‫الويب‬‫ليكف‬ ‫و‬Internet Explorer 8‫النيائي‬ ‫الشكؿ‬ ‫لنشاىد‬ ‫المثاؿ‬ ‫سبيؿ‬ ‫عمى‬
:‫كمايمي‬ ‫لمصفحة‬
‫الشكل‬2:‫النهائي‬ ‫الشكل‬‫المستعرض‬ ‫في‬‫باستخدام‬ ‫مكتوبة‬ ‫صفحة‬ ‫ل‬ َّ‫ألو‬HTML
‫لغة‬ ‫باستخداـ‬ ‫األولى‬ ‫صفحتنا‬ ‫بكتابة‬ ‫قمنا‬ ‫فقد‬ ‫ى‬‫تر‬ ‫كما‬HTML‫نص‬ ‫عمى‬ ‫تحتوي‬ ‫الصفحة‬ ‫ىذه‬ ‫و‬
‫النص‬ ‫ىو‬ ‫بسيط‬ ‫ترحيب‬Welcome to my first HTML page!,‫باستخداـ‬ ‫النص‬ ‫ىذا‬ ‫توليد‬ ‫تـ‬
‫الخاص‬ ‫الوسـ‬p‫البا‬ ‫ستكوف‬ ‫بساطتيا‬ ‫عمى‬ ‫الصفحة‬ ‫ىذه‬ َّ‫فإف‬ ‫ي‬‫ر‬ّ‫بتصو‬ ‫و‬‫لغة‬ ‫إلى‬ ‫لمدخوؿ‬ ‫اسع‬‫و‬‫ال‬ ‫ب‬
HTMLْ‫إف‬.‫التركيز‬ ‫مف‬ ‫بقميؿ‬ ‫التالية‬ ‫ات‬‫ر‬‫الفق‬ ‫أت‬‫ر‬‫ق‬
‫عناصر‬HTML
‫صفحات‬ ‫مف‬ ‫صفحة‬ ‫كؿ‬ ‫تتكوف‬HTML‫العناصر‬ ‫مف‬ ‫مجموعة‬ ‫مف‬Elements‫إنشاؤىا‬ ‫يتـ‬
‫الوسوـ‬ ‫باستخداـ‬Tags‫الوسوـ‬ ‫و‬ً‫ا‬‫سابق‬ ‫قمنا‬ ‫كما‬‫أحرؼ‬ ‫عف‬ ‫ة‬‫ر‬‫عبا‬‫أ‬‫كممات‬ ‫و‬‫خاصة‬ ‫معاني‬ ‫تحمؿ‬
‫ال‬ ‫لمستعرض‬ ‫بالنسبة‬‫َّة‬‫ي‬‫ز‬‫إنجمي‬ ‫لكممات‬ ‫ات‬‫ر‬‫اختصا‬ ‫عف‬ ‫ة‬‫ر‬‫عبا‬ ‫الوسوـ‬ ‫أسماء‬ ‫تكوف‬ ‫ما‬ ً‫ا‬‫غالب‬ ‫و‬ ‫ويب‬
‫فالوسـ‬<p>‫النصوص‬ ‫مقاطع‬ ‫عرض‬ ‫عف‬ ‫المسؤوؿ‬ ‫العنصر‬ ‫إلنشاء‬ ‫يستخدـ‬ ً‫ال‬‫مث‬Paragraphs
‫صفحات‬ ‫ضمف‬HTML‫و‬‫الذي‬‫سيتـ‬‫عممو‬ ‫مناقشة‬‫مع‬‫عمؿ‬‫في‬ ‫تفصيمي‬ ‫بشكؿ‬ ‫الوسوـ‬ ‫باقي‬
‫التالية‬ ‫الصفحات‬.
‫الشكؿ‬ ‫مف‬ ‫اس‬‫و‬‫أق‬ ‫بيف‬ ‫الوسوـ‬ ‫تحصر‬< >‫الوسـ‬ ‫أمثمتيا‬ ‫مف‬ ‫و‬<html>‫الوسـ‬ ‫و‬<head>‫و‬
‫الوسـ‬<title>‫الوسـ‬ ‫و‬<body>‫الوسـ‬ ‫و‬<p>.

19. ٜٔ
‫عناصر‬ ‫مف‬ ‫عنصر‬ ‫لكؿ‬HTML‫بداية‬ ‫وسـ‬Begin Tag‫نياية‬ ‫وسـ‬ ‫و‬End Tag‫وسوـ‬ ‫تكوف‬
‫القوسيف‬ ‫بيف‬ ‫ة‬‫ر‬‫محصو‬ ‫البداية‬< >‫ة‬‫ر‬‫محصو‬ ‫فتكوف‬ ‫النياية‬ ‫وسوـ‬ ‫ا‬َّ‫أم‬ً‫ا‬‫مضاف‬ ‫السابقيف‬ ‫القوسيف‬ ‫بيف‬
‫المائؿ‬ ‫الخط‬ ‫رمز‬ ‫إلييما‬/‫ػ‬‫ب‬ ‫المعروؼ‬Slash‫بالشكؿ‬</ >‫الوسـ‬ ‫النياية‬ ‫وسوـ‬ ‫أمثمة‬ ‫مف‬ ‫و‬
</html>‫الوسـ‬ ‫و‬</head>‫الوسـ‬ ‫و‬</title>‫الوسـ‬ ‫و‬</body>‫الوسـ‬ ‫و‬</p>‫كؿ‬ ‫يحوي‬ ‫و‬
‫عناصر‬ ‫مف‬ ‫عنصر‬HTML‫لعرض‬ ً‫ا‬َّ‫عادي‬ ً‫ا‬َّ‫نص‬ ‫نيايتو‬ ‫و‬ ‫بدايتو‬ ‫وسمي‬ ‫بيف‬‫و‬‫العنصر‬ ‫فعؿ‬ ‫(كما‬p
)‫السابؽ‬ ‫مثالنا‬ ‫في‬‫عناصر‬ ‫مف‬ ‫آخر‬ ‫عدد‬ ‫أي‬ ‫يحوي‬ ‫أف‬ ‫يمكف‬ ‫و‬HTML‫تيب‬‫ر‬‫بت‬ ‫اـ‬‫ز‬‫اّللت‬ ‫شرط‬
‫متناظر‬‫ل‬‫وسـ‬ ‫كتابة‬ ‫فيتـ‬ ‫تيب‬‫ر‬‫الت‬ ‫اعى‬‫ر‬ُ‫ي‬ ‫أف‬ ‫يجب‬ ‫النياية‬ ‫وسوـ‬ ‫كتابة‬ ‫فعند‬ ,‫البداية‬ ‫و‬ ‫النياية‬ ‫وسوـ‬
‫األ‬ )‫نياية‬ ‫وسـ‬ ‫لو‬ ‫ليس‬ ‫(الذي‬ ‫المنتيي‬ ‫غير‬ ‫البداية‬ ‫بوسـ‬ ‫الخاص‬ ‫النياية‬‫أف‬ ‫حيف‬ ‫ففي‬ ,‫فاألقرب‬ ‫قرب‬
:ً‫ا‬‫صحيحي‬ ‫يعتبر‬ ‫التالي‬ ‫تيب‬‫ر‬‫الت‬
<html>
<body>
<p>
!‫اٌّسزؼشع‬ ٟ‫ف‬ ٗ‫ػشػ‬ ُ‫س١ز‬ ٞ‫ػبد‬ ‫ٔض‬
</p>
</body>
</html>
‫ؿ‬َّ‫األو‬ ‫النياية‬ ‫وسـ‬ َّ‫ألف‬</p>‫ىو‬ ‫و‬ ‫منتيي‬ ‫غير‬ ‫بداية‬ ‫وسـ‬ ‫أقرب‬ ‫إلنياء‬ ‫جاء‬<p>َّ‫ثـ‬ ,‫مثالنا‬ ‫في‬
‫النياية‬ ‫وسـ‬ ‫جاء‬</body>‫ىو‬ ‫و‬ ‫منتيي‬ ‫غير‬ ‫بداية‬ ‫وسـ‬ ‫أقرب‬ ‫إلنياء‬<body>‫وسـ‬ ‫جاء‬ َّ‫ثـ‬ ,
‫النياية‬</html>‫ىو‬ ‫و‬ ‫منتيي‬ ‫غير‬ ‫بداية‬ ‫وسـ‬ ‫أقرب‬ ‫إلنياء‬<html>.
:ً‫ا‬‫خاطئ‬ ‫يعتبر‬ ‫التالي‬ ‫تيب‬‫ر‬‫الت‬ َّ‫فإف‬
<html>
<body>

20. ٕٓ
<p>
!‫اٌّسزؼشع‬ ٟ‫ف‬ ٗ‫ػشػ‬ ُ‫س١ز‬ ٞ‫ػبد‬ ‫ٔض‬
</body>
</html>
</p>
‫النياية‬ ‫وسـ‬ ‫ألف‬</body>‫الوسـ‬ ‫إلنياء‬ ‫جاء‬<body>‫المنتيي‬ ‫غير‬ ‫األقرب‬ ‫الوسـ‬ ‫يكف‬ ‫لـ‬ ‫الذي‬
‫النياية‬ ‫وسمي‬ ‫مع‬ ‫تكررت‬ ‫نفسيا‬ ‫الحالة‬ ‫و‬ ‫لألسؼ‬</html>‫و‬</p>.
‫الخالصة‬‫ت‬ ‫ّل‬ :َ‫نس‬‫كتابة‬‫تيب‬‫ر‬‫ت‬ ِ‫ع‬‫ا‬‫ر‬ ‫و‬ ‫اإلغالؽ‬ ‫وسـ‬.‫اإلغالؽ‬ ‫وسوـ‬
‫اغات‬‫ر‬‫الف‬White Spaces
‫لغة‬ ‫في‬HTML‫(مثؿ‬ ‫اغات‬‫ر‬‫الف‬ ‫لمحارؼ‬ ‫قيمة‬ ‫أي‬ ‫يوجد‬ ‫ّل‬Space‫و‬Tab‫اض‬‫ر‬‫استع‬ ‫عند‬ )‫إلخ‬ ..
‫مستعرض‬ ‫باستخداـ‬ ‫الصفحات‬‫الويب‬‫و‬ ‫ة‬‫ر‬‫الشيف‬ ‫تيب‬‫ر‬‫ت‬ ‫لغرض‬ ‫اغات‬‫ر‬‫الف‬ ‫محارؼ‬ ‫تستخدـ‬ ‫ما‬َّ‫إن‬ ‫و‬
‫ة‬‫ر‬‫شيف‬ ‫اءة‬‫ر‬‫فق‬ ,‫فقط‬ ‫أوضح‬ ‫بشكؿ‬ ‫مقروءة‬ ‫جعميا‬HTML:‫المثاؿ‬ ‫سبيؿ‬ ‫عمى‬ ‫التالية‬
<html>
<body>
<h1>
Hi!
</h1>
</body>
</html>
‫ة‬‫ر‬‫شيف‬ ‫اءة‬‫ر‬‫ق‬ ‫مف‬ ‫بكثير‬ ‫أسيؿ‬HTML:‫التالية‬
<html><body><h1>Hi!</h1></body></html>

21. ٕٔ
‫يما‬َّ‫أن‬ ‫مع‬‫متماثمتاف‬.‫الويب‬ ‫مستعرض‬ ‫باستخداـ‬ ‫اضيما‬‫ر‬‫استع‬ ‫عند‬ ً‫ا‬‫تمام‬
‫ضغطة‬ ‫بمقدار‬ ‫متماثميف‬ ‫نياية‬ ‫و‬ ‫بداية‬ ‫وسمي‬ ‫بيف‬ ‫الموجود‬ ‫المحتوى‬ ‫كؿ‬ ‫احة‬‫ز‬‫إ‬ ‫الجيدة‬ ‫َّة‬‫البرمجي‬ ‫العادات‬ ‫مف‬ : ‫فائدة‬
Tab‫اغات‬‫ر‬‫ف‬ ‫ثالث‬ ‫بمقدار‬ ‫احتيا‬‫ز‬‫إ‬ ‫ؿ‬ِّ‫يفض‬ ‫البعض‬ ‫و‬‫مفتاح‬ ‫عمى‬ ‫ضغطات‬ ‫(ثالث‬Space).
‫لعناصر‬ ‫العام‬ ‫الشكل‬HTML
‫وصؼ‬ ‫يتـ‬‫عناصر‬HTML‫لعنصر‬ ‫العاـ‬ ‫الشكؿ‬ ‫نعرض‬ ‫فيمايمي‬ ‫و‬ ,‫الوسوـ‬ ‫باستخداـ‬HTML:
‫عنصر‬ ‫يبدأ‬HTML‫البداية‬ ‫بوسـ‬Begin Tag.
‫عنصر‬ ‫ينتيي‬HTML‫النياية‬ ‫بوسـ‬End Tag.
‫عنصر‬ ‫محتوى‬ ‫يدعى‬ ‫النياية‬ ‫و‬ ‫البداية‬ ‫وسمي‬ ‫بيف‬ ‫كتابتو‬ ‫يتـ‬ ‫ما‬ ‫كؿ‬HTML‫ىناؾ‬ ‫أف‬ ً‫ا‬‫عمم‬
‫العناصر‬ ‫بعض‬‫التي‬‫محتوى‬ ‫أي‬ ‫تحوي‬ ‫ّل‬‫المحتوى‬ ‫عديمة‬ ‫تسمى‬ ‫التي‬ ‫و‬.
‫يندمج‬‫وسم‬‫ا‬‫النياية‬ ‫و‬ ‫البداية‬‫احد‬‫و‬ ‫وسـ‬ ‫في‬‫في‬‫حالة‬.‫المحتوى‬ ‫عديمة‬ ‫العناصر‬
‫عناصر‬ ‫ألغمب‬ ‫الخصائص‬ ‫مف‬ ‫مجموعة‬ ‫ير‬‫ر‬‫تم‬ ‫يتـ‬HTML‫يؽ‬‫ر‬‫ط‬ ‫عف‬ ‫البداية‬ ‫وسـ‬ ‫في‬
‫اصفات‬‫و‬‫ال‬Attributes.
:‫ممحوظة‬,ً‫ا‬‫أبد‬ ‫و‬ ً‫ا‬‫دائم‬‫ب‬ ‫قـ‬‫عناصر‬ ‫كتابة‬HTML‫ة‬‫ر‬‫الصغي‬ ‫بحالتيا‬ ‫َّة‬‫ي‬‫ز‬‫اإلنجمي‬ ‫باألحرؼ‬Lower Case.
:‫التالية‬ ‫األمثمة‬ ‫لنشاىد‬
‫النهاية‬ ‫وسم‬‫العنصر‬ ‫محتوى‬‫البداية‬ ‫وسم‬
</p>Welcome to my website.<p>
</a>Go to index<a href="index.htm">
<hr />
‫سطر‬ ‫كؿ‬ ‫ؿ‬ِّ‫ث‬‫يم‬‫السابؽ‬ ‫الجدوؿ‬ ‫في‬‫عناصر‬ ‫مف‬ ً‫ا‬‫ر‬‫عنص‬HTML‫الصفحة‬ ‫في‬‫ُّمي‬‫تخي‬ ‫بشكؿ‬,
‫بالوسـ‬ ‫يبدأ‬ ‫ؿ‬َّ‫األو‬ ‫فالعنصر‬<p>‫بالوسـ‬ ‫ينتيي‬ ‫و‬</p>‫و‬‫يحوي‬‫النصي‬ ‫المحتوى‬Welcome to

22. ٕٕ
my website‫بالوسـ‬ ‫الثاني‬ ‫العنصر‬ ‫يبدأ‬ ‫بينما‬<a href="index.htm">‫بالوسـ‬ ‫ينتيي‬ ‫و‬</a>
‫و‬‫يحوي‬‫النصي‬ ‫المحتوى‬Go to index‫القيمة‬ ‫إسناد‬ ‫مع‬index.htm‫اصفتو‬‫و‬ ‫إلى‬href‫في‬ ,
‫عديـ‬ ‫الثالث‬ ‫العنصر‬ َّ‫أف‬ ‫حيف‬‫احد‬‫و‬ ‫وسـ‬ ‫في‬ ‫النياية‬ ‫و‬ ‫البداية‬ ‫وسمي‬ ‫اتحاد‬ ‫مف‬ ‫يتكوف‬ ‫المحتوى‬
‫بالشكؿ‬<hr />.
‫لصفحات‬ ‫العام‬ ‫الشكل‬HTML
‫صفحة‬ ‫كؿ‬ ‫تتكوف‬HTML:‫مناطؽ‬ ‫ثالث‬ ‫مف‬
‫الصفحة‬ ‫جسد‬ ‫منطقة‬Body Section:
‫وسمي‬ ‫بيف‬ ‫ة‬‫ر‬‫المحصو‬ ‫المنطقة‬ ‫ىي‬ ‫و‬<body>‫و‬</body>‫التي‬ ‫ىي‬ ‫المنطقة‬ ‫ىذه‬ ‫و‬
‫لمصفحة‬ ‫الظاىر‬ ‫المحتوى‬ ‫ؿ‬ِّ‫ث‬‫تم‬ ‫التي‬ ‫العناصر‬ ‫جميع‬ ‫تضـ‬ ‫و‬ ‫لمصفحة‬ ‫النيائي‬ ‫الشكؿ‬ ‫تنتج‬
‫مستعرض‬ ‫في‬ ‫سيظير‬ ‫الذي‬ ‫و‬‫الويب‬‫بالطبع‬ ‫و‬ ‫الصفحة‬ ‫ىذه‬ ‫اض‬‫ر‬‫استع‬ ‫عند‬‫ء‬‫الجز‬ ‫فإف‬
‫عناصر‬ ‫مف‬ ‫األكبر‬HTML.‫المنطقة‬ ‫ىذه‬ ‫في‬ ‫سيكوف‬
‫الصفحة‬ ‫أس‬‫ر‬ ‫منطقة‬Head Section:
‫وسمي‬ ‫بيف‬ ‫ة‬‫ر‬‫المحصو‬ ‫المنطقة‬ ‫ىي‬ ‫و‬<head>‫و‬</head>‫تحوي‬ ‫المنطقة‬ ‫ىذه‬ ‫و‬
‫عناصر‬ ‫مف‬ ‫مجموعة‬HTML‫اض‬‫ر‬‫استع‬ ‫عند‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫يظير‬ ‫ّل‬ ‫أغمبيا‬
‫ا‬ ‫لكف‬ ‫و‬ ‫الصفحة‬‫ليذه‬ ‫ئيسية‬‫ر‬‫ال‬ ‫لميمة‬‫ىي‬ ‫المنطقة‬‫المحتوى‬ ‫َّة‬‫ماىي‬ ‫عف‬ ‫معمومات‬ ‫إعطاء‬
‫تستخدميا‬ ‫التي‬ ‫و‬ ‫ى‬‫األخر‬ ‫ة‬‫ر‬‫الظاى‬ ‫غير‬ ‫المعمومات‬ ‫لبعض‬ ‫إضافة‬ ‫بالصفحة‬ ‫الموجود‬
.‫الغالب‬ ‫في‬ ‫البحث‬ ‫و‬ ‫األرشفة‬ ‫أجؿ‬ ‫مف‬ ‫البحث‬ ‫محركات‬
‫األـ‬ ‫المنطقة‬ٕ
:
ٕ
‫المطروحة‬ ‫ة‬‫ر‬‫الفك‬ ‫لتبسيط‬ ‫شخصي‬ ‫اجتياد‬ ‫ىو‬ ‫َّما‬‫إن‬ ‫و‬ ‫أتيا‬‫ر‬‫ق‬ ‫التي‬ ‫اجع‬‫ر‬‫الم‬ ‫مف‬ ‫أي‬ ‫في‬ ‫المصطمح‬ ‫ىذا‬ ‫يرد‬ ‫لـ‬)‫أيي‬‫ر‬‫(ب‬.

23. ٕٖ
‫وسمي‬ ‫بيف‬ ‫ة‬‫ر‬‫المحصو‬ ‫المنطقة‬ ‫ىي‬ ‫و‬<html>‫و‬</html>‫المنطقة‬ ‫ىي‬ ‫المنطقة‬ ‫ىذه‬ ‫و‬
‫التي‬‫فيي‬ ‫بيذا‬ ‫و‬ ‫الجسد‬ ‫و‬ ‫أس‬‫ر‬‫ال‬ ‫منطقتي‬ ‫تضـ‬ ‫التي‬ ‫ىي‬ ‫و‬ ‫الصفحة‬ ‫نياية‬ ‫و‬ ‫بداية‬ ‫تحدد‬
)‫(صفحة‬ ‫مستند‬ ‫كامؿ‬ ‫تضـ‬HTML.
‫مستند‬ ‫ألي‬ ‫العاـ‬ ‫الشكؿ‬ ‫يكوف‬ ‫بيذا‬ ‫و‬HTML:‫كمايمي‬
<html>
<head>
‫ٕ٘ب‬ ْٛ‫س١ى‬ ‫اٌظب٘ش‬ ‫غ١ش‬ ‫اٌشأط‬ ‫ِٕـمخ‬ ٜٛ‫ِحز‬
</head>
<body>
ٟ‫إٌٙبئ‬ ‫اٌظفحخ‬ ٜٛ‫ِحز‬‫اٌظ‬ ٚ‫ب٘ش‬‫ٕ٘ب‬ ْٛ‫س١ى‬ ً‫ب‬َّ١ٍ‫فؼ‬
</body>
</html>
‫الوسوم‬ ‫اصفات‬‫و‬Attributes
‫لغة‬ َّ‫بأف‬ ً‫ا‬‫سابق‬ ‫قمناه‬ ‫ما‬ ‫كؿ‬ ‫ص‬ّ‫يتمخ‬HTML‫مف‬ ‫مجموعة‬ ‫إنشاء‬ ‫عبر‬ ‫المحتوى‬ ‫تقديـ‬ ‫لؾ‬ ‫تتيح‬
‫عناصر‬ ‫مف‬ ‫عنصر‬ ‫كؿ‬ ‫ميمة‬ ,‫العناصر‬HTML‫فيناؾ‬ ‫صفحتؾ‬ ‫في‬ ً‫ا‬‫جد‬ ‫محدد‬ ‫شيء‬ ‫عرض‬
‫ابط‬‫و‬‫الر‬ ‫لعرض‬ ‫عناصر‬ ‫ىناؾ‬ ‫و‬ ‫الصور‬ ‫لعرض‬ ‫عناصر‬ ‫ىناؾ‬ ‫و‬ ‫النصوص‬ ‫لعرض‬ ‫عناصر‬
‫َّة‬‫التشعبي‬Links‫وسوـ‬ ‫مف‬ ‫خاص‬ ‫وسـ‬ ‫اسطة‬‫و‬‫ب‬ ‫العناصر‬ ‫ىذه‬ ‫مف‬ ‫عنصر‬ ‫كؿ‬ ‫إنشاء‬ ‫يتـ‬ ,‫إلخ‬ ..
HTML‫بي‬ ‫الظاىر‬ ‫العنصر‬ ‫محتوى‬ ‫اف‬‫ر‬‫يحص‬ ‫نياية‬ ‫وسـ‬ ‫و‬ ‫بداية‬ ‫وسـ‬ ‫عنصر‬ ‫لكؿ‬ ‫يكوف‬ ‫و‬ ,.‫نيما‬
‫عرض‬ ‫سموؾ‬ ‫ص‬ّ‫تخص‬ ‫التي‬ ‫و‬ ‫َّة‬‫اإلضافي‬ ‫الخصائص‬ ‫مف‬ ‫بمجموعة‬ ‫البداية‬ ‫وسوـ‬ ‫بعض‬ ‫تزويد‬ ‫يمكف‬
‫اصفات‬‫و‬‫بال‬ ‫يعرؼ‬ ‫ما‬ ‫عبر‬ ‫ىذا‬ ‫يتـ‬ ‫و‬ ‫اه‬‫و‬‫لمحت‬ ‫العنصر‬Attributes‫سبيؿ‬ ‫عمى‬ ‫التالية‬ ‫ة‬‫ر‬‫لمشيف‬ ‫انظر‬ ,
:‫المثاؿ‬

24. ٕٗ
<p align="center">
‫إٌظٛص‬ ‫ػشع‬ ‫ٌؼٕظش‬ ٟ‫إٌظ‬ ٜٛ‫اٌّحز‬
</p>
‫فقد‬ ‫تالحظ‬ ‫كما‬‫بالعنصر‬ ‫الخاص‬ ‫البداية‬ ‫وسـ‬ ‫إلى‬ ‫ة‬‫ر‬‫الشيف‬ ‫ىذه‬ ‫في‬ ‫جديد‬ ‫شيء‬ ‫بإضافة‬ ‫قمنا‬p‫و‬ ‫أّل‬
‫اصفة‬‫و‬‫ال‬ ‫ىو‬align‫العنصر‬ ‫سيعرضو‬ ‫الذي‬ ‫النص‬ ‫محاذاة‬ ‫تحدد‬ ‫التي‬p‫القيمة‬ ‫أعطيناىا‬ ‫و‬center
:‫كمايمي‬ ‫النص‬ ‫سيظير‬ ‫اضيا‬‫ر‬‫استع‬ ‫عند‬ ‫و‬ ‫الصفحة‬ ‫منتصؼ‬ ‫في‬ ‫النص‬ ‫لعرض‬
‫الشكل‬3‫النصوص‬ ‫عرض‬ ‫عنصر‬ :<p>‫المحاذاة‬ ‫اصفة‬‫و‬ ‫إضافة‬ ‫عند‬align
‫وسوـ‬ ‫مف‬ ‫بداية‬ ‫وسـ‬ ‫لكؿ‬ ‫يوجد‬ ,ً‫ا‬‫حسن‬HTML‫اصفات‬‫و‬‫ال‬ ‫مف‬ ً‫ا‬‫سمف‬ ‫معروفة‬ ‫مجموعة‬Attributes‫و‬
‫اصفة‬‫و‬‫فال‬ ,‫اصفة‬‫و‬‫ال‬ ‫إلى‬ ‫إسنادىا‬ ‫يتـ‬ ‫أف‬ ‫يمكف‬ ‫التي‬ ‫القيـ‬ ‫مف‬ ً‫ا‬‫سمف‬ ‫معروفة‬ ‫مجموعة‬ ‫اصفة‬‫و‬ ‫لكؿ‬ ‫يوجد‬
align‫البداية‬ ‫لوسـ‬ ً‫ا‬‫سمف‬ ‫المعروفة‬ ‫اصفات‬‫و‬‫ال‬ ‫إحدى‬ ‫ىي‬<p>‫يمكف‬ ‫التي‬ ‫القيـ‬ ‫و‬ ‫المثاؿ‬ ‫سبيؿ‬ ‫عمى‬
‫ىي‬ ‫إلييا‬ ‫تسند‬ ‫أف‬left‫أو‬ ‫اليسار‬ ‫إلى‬ ‫النص‬ ‫لمحاذاة‬right‫أو‬ ‫اليميف‬ ‫إلى‬ ‫النص‬ ‫لمحاذاة‬center
‫و‬ ‫عنو‬ ‫الحديث‬ ‫عند‬ ‫بالتفصيؿ‬ ‫وسـ‬ ‫كؿ‬ ‫اصفات‬‫و‬ ‫عرض‬ ‫بالطبع‬ ‫سيتـ‬ ‫و‬ ,‫الوسط‬ ‫إلى‬ ‫النص‬ ‫لمحاذاة‬
‫أ‬‫ىو‬ ‫اصفة‬‫و‬‫لم‬ ‫العاـ‬ ‫الشكؿ‬ ‫أف‬ ‫لمقوؿ‬ ‫داعي‬ ‫ّل‬ ‫أنو‬ ‫ظف‬name="value"َّ‫أف‬ ‫حيث‬name‫اسـ‬ ‫ىو‬
‫و‬ ‫اصفة‬‫و‬‫ال‬value‫اقتباس‬ ‫عالمتي‬ ‫بيف‬ ‫توضع‬ ‫أف‬ ‫يجب‬ ‫التي‬ ‫و‬ ‫اصفة‬‫و‬‫ال‬ ‫لتمؾ‬ ‫دة‬َ‫سن‬ُ‫الم‬ ‫القيمة‬ ‫ىي‬
‫مزدوجتيف‬""‫مفردتيف‬ ‫اقتباس‬ ‫عالمتي‬ ‫أو‬‘ ‘.
‫اصفات‬‫و‬ ‫و‬ ‫وسوـ‬ ‫كتابة‬ ‫تتـ‬ ‫أف‬ ‫يجب‬ : ‫ممحوظة‬HTML‫ب‬‫ة‬‫ر‬‫صغي‬ ‫َّة‬‫ي‬‫ز‬‫إنجمي‬ ‫حروؼ‬Lower Case.

25. ٕ٘
‫عناصر‬ ‫عف‬ ‫بالحديث‬ ‫نبدأ‬ ‫أف‬ ‫اآلف‬ ‫نستطيع‬ ‫نا‬َّ‫أن‬ ‫أظف‬HTML‫مع‬ ‫البداية‬ ‫و‬ ‫بالتفصيؿ‬ ‫و‬ ً‫ة‬‫كاف‬
‫عناصر‬‫العناويف‬Headings‫المشتركة‬ ‫اصفات‬‫و‬‫ال‬ ‫مف‬ ‫بمجموعة‬ ً‫ّل‬‫و‬‫جد‬ ‫سنعرض‬ ‫ذلؾ‬ ‫قبؿ‬ ‫لكف‬ ‫و‬ ,
‫وسوـ‬ ‫أغمب‬ ‫بيف‬HTML‫ا‬ ‫تمؾ‬ ‫مف‬ ‫وسـ‬ ‫كؿ‬ ‫مع‬ ‫ىا‬‫ار‬‫ر‬‫تك‬ ‫مف‬ ً‫ّل‬‫بد‬ ‫ىنا‬,‫لوسوـ‬‫و‬:‫الجدوؿ‬ ‫فيمايمي‬
‫اصفة‬‫و‬‫ال‬ ‫اسم‬‫الممكنة‬ ‫القيم‬‫الشرح‬
id)‫مكرر‬ ‫يد(غير‬‫ر‬‫ف‬ ‫اسـ‬ ‫اي‬
‫لممستند‬ ‫بالنسبة‬
ً‫ا‬َّ‫برمجي‬ ‫العنصر‬ ‫مع‬ ‫لمتعامؿ‬ ‫اّلسـ‬ ‫ىذا‬ ‫استخداـ‬ ‫يتـ‬
‫لغة‬ ‫باستخداـ‬Java Script‫أو‬jQuery‫ليا‬ ‫و‬ ,
‫استخدام‬‫س‬ ‫ى‬‫أخر‬ ‫ات‬‫عرض‬ ‫يتـ‬‫أحدىا‬‫ة‬‫ر‬‫فق‬ ‫في‬
ً‫ا‬‫ّلحق‬ ‫الداخمية‬ ‫ابط‬‫و‬‫الر‬
dirltr
rtl
,‫اءة‬‫ر‬‫الق‬ ‫اتجاه‬ ‫لتحديد‬ltr‫مف‬ ‫اءة‬‫ر‬‫الق‬ ‫اتجاه‬ ‫أف‬ ‫تعني‬
‫ا‬َّ‫أم‬ ‫اليميف‬ ‫إلى‬ ‫اليسار‬rtl‫مف‬ ‫اءة‬‫ر‬‫الق‬ ‫اتجاه‬ ‫أف‬ ‫فتعني‬
‫اليسار‬ ‫إلى‬ ‫اليميف‬
alignleft
right
center
justify
‫النص‬ ‫محاذاة‬ ‫لتحديد‬
class‫فئة‬ ‫اسـ‬ ‫أي‬CSS‫صالح‬‫سيتـ‬ ‫و‬ ‫العنصر‬ ‫إلى‬ ‫الفئة‬ ‫خصائص‬ ‫كافة‬ ‫لمنح‬
‫الفصؿ‬ ‫في‬ ‫بالتفصيؿ‬ ‫ىذا‬ ‫مناقشة‬‫ػ‬‫ب‬ ‫الخاص‬CSS3
name‫يد‬‫ر‬‫ف‬ ‫اسـ‬ ‫أي‬ً‫ا‬ّ‫برمجي‬ ‫العنصر‬ ‫لتمييز‬ ‫تستخدـ‬
‫الجدول‬1‫عناصر‬ ‫أغمب‬ ‫بين‬ ‫المشتركة‬ ‫اصفات‬‫و‬‫ال‬ ‫جدول‬ :HTML

26. ٕٙ
‫العناوين‬ ‫عناصر‬Headings
‫لغة‬ ‫توفر‬HTML:‫تيب‬‫ر‬‫الت‬ ‫عمى‬ ‫ىي‬ ‫و‬ ‫العناويف‬ ‫لعرض‬ ‫عناصر‬ ‫ة‬َّ‫ت‬‫س‬h1‫و‬h2‫و‬h3‫و‬h4‫و‬
h5‫و‬h6‫العنصر‬ َّ‫أف‬ ‫حيث‬h1‫العنصر‬ ‫و‬ ً‫ا‬‫حجم‬ ‫ىا‬‫أكبر‬ ‫ىو‬h6‫ج‬‫يتدر‬ ‫بينيما‬ ‫ما‬ ‫و‬ ‫األصغر‬ ‫ىو‬
‫ػ‬‫ل‬‫ا‬ ‫حرؼ‬ ً‫ا‬‫طبع‬ ‫و‬ ,‫الحجـ‬ ‫في‬h‫لكممة‬ ‫اختصار‬ ‫ىنا‬Heading‫عمى‬ ‫التالية‬ ‫ة‬‫ر‬‫الشيف‬ ‫نجرب‬ ‫دعنا‬ ,
:‫المثاؿ‬ ‫سبيؿ‬
<html>
<head>
<title>
ٓ٠ٚ‫اٌؼٕب‬ ‫ٌؼٕبطش‬ ‫اخزجبس‬ ‫طفحخ‬
</title>
</head>
<body dir='rtl'>
<h1>‫ل‬َّ‫األو‬ ‫انمضرىي‬ ‫مه‬ ‫عىىان‬ ‫عىصر‬</h1>
<h2>‫انثاوي‬ ‫انمضرىي‬ ‫مه‬ ‫عىىان‬ ‫عىصر‬</h2>
<h3>‫انثانث‬ ‫انمضرىي‬ ‫مه‬ ‫عىىان‬ ‫عىصر‬</h3>
<h4> ‫انمضرىي‬ ‫مه‬ ‫عىىان‬ ‫عىصر‬‫انراتع‬ </h4>
<h5>‫انخامش‬ ‫انمضرىي‬ ‫مه‬ ‫عىىان‬ ‫عىصر‬</h5>
<h6>‫انضادس‬ ‫انمضرىي‬ ‫مه‬ ‫عىىان‬ ‫عىصر‬</h6>
</body>
</html>
:‫التالية‬ ‫النتيجة‬ ‫سنشاىد‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫السابقة‬ ‫الصفحة‬ ‫اض‬‫ر‬‫استع‬ ‫عند‬

27. ٕٚ
‫الشكل‬4:‫العناوين‬ ‫عناصر‬ ‫اختبار‬ ‫صفحة‬h1‫إلى‬h6
‫الوسـ‬ ‫بتزويد‬ ‫قمنا‬ ‫فقد‬ ‫تالحظ‬ ‫كما‬<body>‫اصفة‬‫و‬‫بال‬dir‫و‬ ‫المستند‬ ‫جسد‬ ‫اءة‬‫ر‬‫ق‬ ‫اتجاه‬ ‫تحدد‬ ‫التي‬ ‫و‬
‫القيمة‬ ‫بإسناد‬ ‫قمنا‬rtl‫و‬ ‫ليا‬‫لنجعؿ‬ ‫ذلؾ‬‫اليسار‬ ‫إلى‬ ‫اليميف‬ ‫مف‬ ‫اءة‬‫ر‬‫الق‬ ‫اتجاه‬right to left‫ما‬ ‫ىو‬ ‫و‬
‫أية‬ َ‫ط‬ْ‫ع‬ُ‫ت‬ ‫لـ‬ ‫اصفة‬‫و‬‫ال‬ ‫ىذه‬ ‫أف‬ ‫حاؿ‬ ‫في‬ ‫و‬ ,‫بالطبع‬ ‫بية‬‫ر‬‫الع‬ ‫المغة‬ ‫مع‬ ‫يتناسب‬‫القيمة‬ ‫فإف‬ ‫قيمة‬
‫ىي‬ ‫ليا‬ ‫اضية‬‫ر‬‫اّلفت‬ltr.‫اليميف‬ ‫إلى‬ ‫اليسار‬ ‫مف‬ ‫اضي‬‫ر‬‫اّلفت‬ ‫اءة‬‫ر‬‫الق‬ ‫اتجاه‬ ‫أف‬ ‫أي‬
‫استخدـ‬ :‫ممحوظة‬‫العناويف‬ ‫عناصر‬<h1>‫إلى‬<h6>‫أجؿ‬ ‫مف‬‫تستخدميا‬ ‫ّل‬ ‫و‬ ,‫فقط‬ ‫ات‬‫ر‬‫الفق‬ ‫عناويف‬‫النص‬ ‫لجعؿ‬
ً‫ا‬‫يض‬‫ر‬‫ع‬.‫الغرضيف‬ ‫ليذيف‬ ‫خاصة‬ ‫وسوـ‬ ‫فيناؾ‬ ‫الحجـ‬ ‫كبير‬ ‫أو‬
‫األفقي‬ ‫الخط‬ ‫عنصر‬Horizontal Line
‫لغة‬ ‫ـ‬ِّ‫تقد‬HTML‫الخاص‬ ‫الوسـ‬<hr />:‫التالي‬ ‫لممثاؿ‬ ‫انظر‬ ,‫الصفحة‬ ‫في‬ ‫َّة‬‫األفقي‬ ‫الخطوط‬ ‫إلنشاء‬
<html>
<head>

28. ٕٛ
<title>
ٟ‫األفم‬ ‫اٌخؾ‬ ‫ٌؼٕظش‬ ‫اخزجبس‬ ‫طفحخ‬
</title>
</head>
<body dir='rtl'>
<p>‫فمؾ‬ ‫ٌٍزجشثخ‬ ٌٝٚ‫األ‬ ‫اٌفمشح‬ ٜٛ‫ِحز‬</p>
<hr />
<p>‫فمؾ‬ ‫ٌٍزجشثخ‬ ‫اٌثبٔ١خ‬ ‫اٌفمشح‬ ٜٛ‫ِحز‬</p>
<hr />
<p>‫فمؾ‬ ‫ٌٍزجشثخ‬ ‫اٌثبٌثخ‬ ‫اٌفمشح‬ ٜٛ‫ِحز‬</p>
</body>
</html>
:‫كمايمي‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫السابقة‬ ‫ة‬‫ر‬‫الشيف‬ ‫تبدو‬
‫الشكل‬5:‫العنصر‬ ‫تجربة‬ ‫صفحة‬<hr />

29. ٕٜ
‫التعميقات‬Comments
‫في‬ ‫المبرمجوف‬ ‫اعتاد‬‫ج‬َ‫ل‬‫عا‬ُ‫ت‬ ‫ّل‬ ‫َّة‬‫توضيحي‬ ‫أسطر‬ ‫كتابة‬ ‫عمى‬ ‫َّة‬‫التقميدي‬ ‫البرمجة‬ ‫لغات‬‫تعتبر‬ ‫ّل‬ ‫أنيا‬ ‫إذ‬
‫ة‬‫ر‬‫الشيف‬ ‫مف‬ ً‫ا‬‫ء‬‫جز‬,‫ة‬‫ر‬‫فت‬ ‫بعد‬ ‫لتعديميا‬ ‫يعود‬ ‫عندما‬ ‫ة‬‫ر‬‫الشيف‬ ‫اء‬‫ز‬‫بأج‬ ‫المبرمج‬ ‫لتذكير‬ ‫فقط‬ ‫تستخدـ‬ ‫ما‬َّ‫إن‬ ‫و‬
‫بالتعميقات‬ ‫تعرؼ‬ ‫األسطر‬ ‫ىذه‬ ‫و‬ ,‫الزمف‬ ‫مف‬Commentsَّ‫أف‬ ‫مع‬ ‫و‬ ,HTML‫كما‬ ‫وصفية‬ ‫لغة‬
‫قمت‬‫لكتابة‬ ‫التالية‬ ‫العامة‬ ‫الصيغة‬ ‫ـ‬ِّ‫فتقد‬ ,‫المستندات‬ ‫ضمف‬ ‫التعميقات‬ ‫لكتابة‬ ‫آلية‬ ‫توفر‬ ‫أنيا‬ ّ‫إّل‬ ً‫ا‬‫سابق‬
:‫التعميؽ‬
<!-- comment -->
‫مستند‬ ‫ضمف‬ ‫التعميقات‬ ‫استخداـ‬ ‫عمى‬ ‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬HTML:
<html>
<head>
<title> ‫إٌ١ٙب‬ ً‫ب‬‫ِؼبف‬ ٟ‫األفم‬ ‫اٌخؾ‬ ‫ٌؼٕظش‬ ‫اخزجبس‬ ‫طفحخ‬
‫ِجّٛػخ‬‫خ‬َّ١‫اٌجشِج‬ ‫اٌزؼٍ١مبد‬ ِٓ </title>
</head>
<body dir='rtl'>
<!-- ‫انرانييه‬ ‫انضطريه‬ً‫األون‬ ‫نهفقرج‬ -->
<p>‫فمؾ‬ ‫ٌٍزجشثخ‬ ٌٝٚ‫األ‬ ‫اٌفمشح‬ ٜٛ‫ِحز‬</p> <hr />
<!-- ‫انثاويح‬ ‫نهفقرج‬ ‫انرانييه‬ ‫انضطريه‬ -->
<p>‫فمؾ‬ ‫ٌٍزجشثخ‬ ‫اٌثبٔ١خ‬ ‫اٌفمشح‬ ٜٛ‫ِحز‬</p> <hr />
<!-- ‫انثانثح‬ ‫نهفقرج‬ ‫انراني‬ ‫انضطر‬ -->
<p>‫فمؾ‬ ‫ٌٍزجشثخ‬ ‫اٌثبٌثخ‬ ‫اٌفمشح‬ ٜٛ‫ِحز‬</p>
</body>
</html>

30. ٖٓ
‫كمايمي‬ ‫السابقة‬ ‫ة‬‫ر‬‫الشيف‬ ‫تبدو‬‫تظي‬ ‫ّل‬ ‫التعميقات‬ ‫أف‬ ‫د‬ّ‫ك‬‫يؤ‬ ‫مما‬ ‫الويب‬ ‫مستعرض‬ ‫في‬‫أثناء‬ (‫المستند‬ ‫في‬ ‫ر‬
‫األمر‬ ‫اختيار‬ ‫ب‬ِّ‫جر‬ ‫الصفحة‬ ‫اض‬‫ر‬‫استع‬"‫عرض‬-<‫المصدر‬"‫أو‬"View->source"):
‫الشكل‬6‫الصفحة‬ ‫في‬ ‫تظهر‬ ‫ال‬ ‫و‬ ‫المصدر‬ ‫عرض‬ ‫نافذة‬ ‫في‬ ‫األخضر‬ ‫بالمون‬ ‫تظهر‬ ‫التعميقات‬ :
.‫التعميؽ‬ ‫وسـ‬ ‫بداية‬ ‫في‬ ‫ؿ‬ّ‫األو‬ ‫القوس‬ ‫بعد‬ ‫ُّب‬‫التعج‬ ‫ة‬‫ر‬‫إشا‬ َ‫تنس‬ ‫ّل‬ :‫ممحوظة‬
‫النصوص‬ ‫عناصر‬Paragraphs
‫ىذه‬ ‫إنشاء‬ ‫يتـ‬ ,‫الغالب‬ ‫في‬ ‫النصية‬ ‫ات‬‫ر‬‫الفق‬ ‫مف‬ ‫مجموعة‬ ‫مف‬ ‫اقع‬‫و‬‫ال‬ ‫في‬ ‫الويب‬ ‫صفحة‬ ‫تتكوف‬‫ات‬‫ر‬‫الفق‬
‫الوسـ‬ ‫باستخداـ‬<p>‫الوسـ‬ ‫يستخدـ‬ ‫و‬ ,‫السابقة‬ ‫األمثمة‬ ‫في‬ ‫استخدامو‬ ‫معنا‬ ‫مر‬ ‫الذي‬ ‫و‬<br />
‫فييا‬ ‫بما‬ ‫اغات‬‫ر‬‫الف‬ ‫محارؼ‬ ‫ألف‬ ‫ذلؾ‬ ‫و‬ ‫التالي‬ ‫السطر‬ ‫إلى‬ ‫لمنزوؿ‬‫محرؼ‬‫المفتاح‬Enter‫لي‬ ‫ليس‬‫ا‬
‫لغة‬ ‫في‬ ‫قيمة‬HTML.ً‫ا‬‫سابق‬ ‫نا‬‫ر‬‫ذك‬ ‫كما‬
‫النصوص‬ ‫تنسيق‬ ‫عناصر‬Text Formatting
‫لغة‬ ‫توفر‬HTMLً‫ا‬‫يض‬‫ر‬‫ع‬ ‫النص‬ ‫فمجعؿ‬ ,‫النصوص‬ ‫لتنسيؽ‬ ‫العناصر‬ ‫مف‬ ‫مجموعة‬Bold‫توفر‬
‫العنصر‬<b>‫العنصر‬ ‫(أو‬<strong>ً‫ال‬‫مائ‬ ‫النص‬ ‫لجعؿ‬ ‫و‬ ,)Italic‫العنصر‬ ‫توفر‬<i>‫(أو‬

31. ٖٔ
‫العنصر‬<em>‫العنصر‬ ‫توفر‬ ‫النص‬ ‫أسفؿ‬ ‫خط‬ ‫لوضع‬ ‫و‬ ,)<u>‫النص‬ ‫لشطب‬ ‫و‬ ,Delete‫توفر‬
‫العنصر‬<del>:‫المثاؿ‬ ‫سبيؿ‬ ‫عمى‬ ‫التالية‬ ‫ة‬‫ر‬‫الشيف‬ ‫لنشاىد‬ ,
<html>
<head>
<title>‫إٌظٛص‬ ‫رٕس١ك‬ ‫ٌؼٕبطش‬ ‫اخزجبس‬ ‫طفحخ‬</title>
</head>
<body>
<p>
This is a sample text to demonstrate
<b>bold</b>,
<i>italic</i>,
<u>underline</u> and
<del>delete</del> tags.
<!-- ً‫ا‬‫سـش‬ ‫ٌٍٕضٚي‬ً‫ا‬‫ٚاحذ‬ <br/> ‫اسزخذِٕب‬ -->
<br/>
You may use other tags to generate the same output:
<br/>
This is a sample text to demonstrate
<strong>bold</strong>,
<em>italic</em>,
<u>underline</u> and
<del>delete</del> tags.
</p>
</body>

32. ٖٕ
</html>
:‫كمايمي‬ ‫المستعرض‬ ‫في‬ ‫أعاله‬ ‫ة‬‫ر‬‫الشيف‬ ‫تبدو‬
‫الشكل‬7‫النصوص‬ ‫تنسيق‬ ‫عناصر‬ ‫اختبار‬ ‫صفحة‬ :
‫وسوـ‬ ‫جع‬‫مر‬ ‫في‬ ‫ىا‬‫ذكر‬ ‫سيتـ‬ ‫النصوص‬ ‫تنسيؽ‬ ‫عناصر‬ ‫مف‬ ‫يد‬‫ز‬‫الم‬ ‫ىناؾ‬ ‫بالطبع‬ :‫ممحوظة‬HTML‫ىذا‬ ‫نياية‬ ‫في‬
.‫الفصؿ‬
‫ة‬َّ‫الخاص‬ ‫الرموز‬ ‫و‬ ‫المحارف‬Special Characters
‫كتابتيا‬ ‫يؽ‬‫ر‬‫ط‬ ‫عف‬ ‫الصفحة‬ ‫في‬ ‫عرضيا‬ ‫يمكف‬ ‫ّل‬ ‫التي‬ ‫الرموز‬ ‫و‬ ‫المحارؼ‬ ‫بعض‬ ‫ىناؾ‬‫مباشر‬ ‫بشكؿ‬
‫ياضيات‬‫ر‬‫ال‬ ‫في‬ ‫المستخدمة‬ ‫الرموز‬ ‫مثؿ‬‫اغات‬‫ر‬‫الف‬ ‫محارؼ‬ ‫و‬‫لغة‬ ‫توفر‬ ,‫ىا‬‫غير‬ ‫و‬HTML‫خاصة‬ ‫آلية‬
‫التالية‬ ‫العامة‬ ‫الصيغة‬ ‫باتباع‬ ‫ذلؾ‬ ‫و‬ ‫الرموز‬ ‫ىذه‬ ‫لعرض‬&value;‫القيمة‬ ‫باستبدؿ‬value‫بقيمة‬
‫المطموب‬ ‫المحرؼ‬‫أف‬‫في‬ ‫عرضو‬ ‫يتـ‬‫الويب‬ ‫مستعرض‬‫ىذه‬ ‫مف‬ ‫نماذج‬ ‫التالي‬ ‫الجدوؿ‬ ‫في‬ ‫و‬
:‫المحارؼ‬ٖ
ٖ
:‫التالي‬ ‫ابط‬‫ر‬‫ال‬ ‫اتباع‬ ‫يمكف‬ ‫الكامؿ‬ ‫الجدوؿ‬ ‫عمى‬ ‫لمحصوؿ‬
http://www.w3schools.com/tags/ref_symbols.asp

33. ٖٖ
‫الرمز‬‫ة‬‫شيفر‬XHTML
<&lt;
>&gt;
≠&ne;
™&trade;
©&copy;
‫اع‬‫ر‬‫الف‬ ‫محرؼ‬&nbsp;
‫الجدول‬2:‫الخاصة‬ ‫المحارف‬ ‫بعض‬‫في‬HTML
:‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬
<html>
<head>
<title>
‫اٌخبطخ‬ ‫اٌّحبسف‬ ‫ٌجؼغ‬ ‫اخزجبس‬ ‫طفحخ‬
</title>
</head>
<body>
<p>
3 &lt; 5 and 10 &gt; 2 and also 3 &ne; 4 ....
all rights reserved for &copy; Mukhtar &trade;
</p>
</body>
</html>

34. ٖٗ
:‫كمايمي‬ ‫المستعرض‬ ‫في‬ ‫عرضو‬ ‫عند‬ ‫يبدو‬ ‫الذي‬ ‫و‬
‫الشكل‬8‫ب‬ ‫الستخدام‬ ‫مثال‬ :‫الصفحة‬ ‫في‬ ‫الخاصة‬ ‫المحارف‬ ‫عض‬
‫ابط‬‫و‬‫الر‬ ‫عناصر‬Hyper Links
‫لغة‬ ‫توفر‬HTML‫ابط‬‫و‬‫الر‬ ‫عناصر‬ ‫عبر‬ ‫المختمفة‬ ‫الصفحات‬ ‫بيف‬ ‫لالنتقاؿ‬ ‫آلية‬Hyper Links‫و‬ ,
‫عمييا‬ ‫النقر‬ ‫عند‬ ‫تنقمؾ‬ ‫صور‬ ‫أو‬ ‫نصوص‬ ‫عف‬ ‫ة‬‫ر‬‫عبا‬ ‫ابط‬‫و‬‫الر‬‫إلى‬ ‫الحالية‬ ‫الصفحة‬ ‫مف‬‫صفحة‬ ‫إلى‬
‫بعرض‬ ‫ابط‬‫و‬‫الر‬ ‫بتمييز‬ ‫الويب‬ ‫مستعرضات‬ ‫تقوـ‬ ,‫ى‬‫أخر‬ ‫ويب‬"‫ة‬‫ر‬‫صغي‬ ‫يد‬"‫ة‬‫ر‬‫اإلشا‬ ‫عند‬ ‫ة‬‫ر‬‫لمفأ‬ ‫كمؤشر‬
,‫ابط‬‫و‬‫الر‬ ‫أحد‬ ‫إلى‬‫و‬‫ابط‬‫و‬‫الر‬ ‫إنشاء‬ ‫يتـ‬‫الوسـ‬ ‫اسطة‬‫و‬‫ب‬<a>‫ػ‬‫ل‬‫ا‬ ‫و‬ ,a‫ػ‬‫ل‬ ‫اختصار‬ ‫ىذه‬Anchor‫يتـ‬ ,
‫اّل‬ ‫سيتـ‬ ‫(الذي‬ ‫اليدؼ‬ ‫الموقع‬ ‫ا‬َّ‫أم‬ ‫لو‬ ‫كمحتوى‬ ‫عرض‬ُ‫ي‬ ‫بنص‬ ‫ابط‬‫ر‬‫ال‬ ‫عنصر‬ ‫تزويد‬‫النقر‬ ‫عند‬ ‫إليو‬ ‫نتقاؿ‬
‫اصفة‬‫و‬‫لم‬ ‫تزويده‬ ‫فيتـ‬ )‫ابط‬‫ر‬‫ال‬ ‫عمى‬href‫ػ‬‫ل‬ ‫اختصار‬ ‫ىي‬ ‫التي‬ ‫و‬Hyper Reference‫فممنظر‬ ,
:‫التالي‬ ‫لممثاؿ‬
<html>
<head>
<title>
‫اٌشٚاثؾ‬ ‫ٌؼٕبطش‬ ‫اخزجبس‬ ‫طفحخ‬
</title>
</head>

35. ٖ٘
<body>
<a href="http://www.microsoft.com"> ‫مايكرو‬‫صىفد‬ </a><br />
<a href="http://www.google.com">‫جىجم‬</a><br />
<a href="http://www.msn.com" target="_blank" >MSN</a>
<br />
<a href="firstPage.html" target="_self">‫مثال‬ ‫أول‬</a>
</body>
</html>
:‫كمايمي‬ ‫الويب‬ ‫بمستعرض‬ ‫اضو‬‫ر‬‫استع‬ ‫عند‬ ‫يبدو‬ ‫الذي‬
‫الشكل‬9:‫اختبار‬ ‫صفحة‬‫عنصر‬‫ابط‬‫و‬‫الر‬
‫قد‬ ‫و‬ ‫ة‬‫ر‬‫الشيي‬ ‫اقع‬‫و‬‫الم‬ ‫بعض‬ ‫إلى‬ ‫تشير‬ ‫التي‬ ‫ابط‬‫و‬‫الر‬ ‫عناصر‬ ‫مف‬ ‫بمجموعة‬ ‫صفحتنا‬ ‫بتزويد‬ ‫قمنا‬ ‫لقد‬
‫و‬ ‫الفصؿ‬ ‫ىذا‬ ‫بداية‬ ‫في‬ ً‫ا‬‫مع‬ ‫بإنشائو‬ ‫قمنا‬ ‫الذي‬ ‫ؿ‬ّ‫األو‬ ‫المثاؿ‬ ‫ممؼ‬ ‫اسـ‬ ‫ذكر‬ ‫األخير‬ ‫ابط‬‫ر‬‫ال‬ ‫في‬ ‫تعمدت‬
‫مطمقة‬ ‫تكوف‬ ‫أف‬ ‫يمكف‬ ‫ابط‬‫و‬‫الر‬ ‫أف‬ ‫لتوضيح‬ ‫ذلؾ‬Absolute‫نسبية‬ ‫أو‬ )‫األولى‬ ‫(كالثالثة‬Relative

36. ٖٙ
‫مسار‬ ‫عف‬ ‫ة‬‫ر‬‫عبا‬ ‫يكوف‬ ‫المذكور‬ ‫ابط‬‫ر‬‫ال‬ ‫أف‬ ‫بالنسبية‬ ‫يقصد‬ ‫و‬ )‫األخير‬ ‫ابط‬‫ر‬‫(كال‬Path‫الصفحة‬ ‫ممؼ‬
‫اليدؼ‬ ‫الصفحة‬ ‫كانت‬ ‫فقد‬ ‫حالتنا‬ ‫في‬ ‫و‬ ‫الحالية‬ ‫لمصفحة‬ ‫بالنسبة‬ ‫اليدؼ‬firstPage.html‫نفس‬ ‫في‬
‫الحالية‬ ‫الصفحة‬ ‫مجمد‬ٗ
.
‫ا‬‫ر‬‫ال‬ ‫إلى‬ ‫اّلنتقاؿ‬ ‫سيتـ‬ ‫ابط‬‫و‬‫الر‬ ‫ىذه‬ ‫أحد‬ ‫عمى‬ ‫النقر‬ ‫عند‬‫بط‬URL‫اصفة‬‫و‬‫ال‬ ‫في‬ ‫المذكور‬href‫افقة‬‫ر‬‫الم‬
‫اصفة‬‫و‬‫بال‬ ‫ابط‬‫و‬‫الر‬ ‫بعض‬ ‫بتزويد‬ ‫قمنا‬ ‫نا‬َّ‫أن‬ ‫بالذكر‬ ‫الجدير‬ ‫مف‬ ,‫عميو‬ ‫النقر‬ ‫تـ‬ ‫الذي‬ ‫ابط‬‫ر‬‫ال‬ ‫لعنصر‬
target‫األسئمة‬ ‫عمى‬ ‫تجيب‬ ‫يا‬ّ‫أن‬ ‫بمعنى‬ ‫المستعرض‬ ‫في‬ ‫اليدؼ‬ ‫الصفحة‬ ‫عرض‬ ‫مكاف‬ ‫تحدد‬ ‫التي‬ ‫و‬
:‫التالية‬
‫الص‬ ‫نفس‬ ‫في‬ ‫اليدؼ‬ ‫الصفحة‬ ‫عرض‬ ‫سيتـ‬ ‫ىؿ‬‫ىي‬ ‫اصفة‬‫و‬‫ال‬ ‫قيمة‬ ‫فإف‬ ‫الحالة‬ ‫ىذه‬ ‫(في‬ ‫الحالية؟‬ ‫فحة‬
‫القيمة‬_self‫فإف‬ ‫الحالة‬ ‫ىذه‬ ‫في‬ ( ‫جديدة؟‬ ‫مستعرض‬ ‫نافذة‬ ‫في‬ ‫اليدؼ‬ ‫الصفحة‬ ‫عرض‬ ‫سيتـ‬ ‫ىؿ‬ ,)
‫اصفة‬‫و‬‫ال‬ ‫قيمة‬_blank‫فإف‬ ‫الحالة‬ ‫ىذه‬ ‫(في‬ ‫محدد؟‬ ‫إطار‬ ‫في‬ ‫اليدؼ‬ ‫الصفحة‬ ‫عرض‬ ‫سيتـ‬ ‫ىؿ‬ ,)
‫اإلطا‬ ‫تناوؿ‬ ‫سيتـ‬ ‫و‬ ‫اإلطار‬ ‫اسـ‬ ‫ىي‬ ‫اصفة‬‫و‬‫ال‬ ‫قيمة‬.)ً‫ا‬‫ّلحق‬ ‫ؿ‬ّ‫مفص‬ ‫بشكؿ‬ ‫ات‬‫ر‬
‫مورد‬ ‫أي‬ ‫إلى‬ ‫يشير‬ ‫أف‬ ‫ابط‬‫ر‬‫لم‬ ‫يمكف‬ ‫و‬َّ‫أن‬ ً‫ا‬‫حالي‬ ‫ابط‬‫و‬‫الر‬ ‫عف‬ ‫ه‬‫ر‬‫ذك‬ ‫يجب‬ ‫ما‬ ‫آخر‬Resource‫متوفر‬
‫إلكتروني‬ ‫يد‬‫ر‬‫ب‬ ‫إلى‬ ‫ابط‬‫ر‬‫ال‬ ‫يشير‬ ‫أف‬ ‫يمكف‬ ‫كما‬ ,‫الصفحات‬ ‫فقط‬ ‫ليس‬ ‫و‬ ‫الويب‬ ‫عمى‬E-Mail‫ذلؾ‬ ‫و‬
‫القيمة‬ ‫نضع‬ ‫بأف‬mailto::‫التالي‬ ‫المثاؿ‬ ‫انظر‬ ,‫لو‬ ً‫ا‬‫ابط‬‫ر‬ ‫نضع‬ ‫أف‬ ‫يد‬‫ر‬‫ن‬ ‫الذي‬ ‫اإللكتروني‬ ‫يد‬‫ر‬‫الب‬ ‫قبؿ‬
<html>
<head>
<title>
‫خبطخ‬ ‫سٚاثؾ‬
</title>
ٗ
‫ات‬‫ر‬‫المسا‬ ‫عف‬ ‫يد‬‫ز‬‫الم‬ ‫تعمـ‬ ‫يمكنؾ‬Paths:‫الموقع‬ ‫ة‬‫ر‬‫يا‬‫ز‬ ‫خالؿ‬ ‫مف‬
http://msdn.microsoft.com/en-us/library/aa365247(VS.85).aspx

37. ٖٚ
</head>
<body>
<a href="http://www.somesite.com/files/file1.zip"> ‫ٕ٘ب‬ ‫أمش‬
‫اٌٍّف‬ ً١ّ‫ٌزح‬</a>
<br />
<a href ="mailto:mokhtar_ss@hotmail.com">ٍٟٕ‫ساس‬</a>
</body>
</html>
‫الممؼ‬ ‫تحميؿ‬ ‫ع‬ّ‫ب‬‫ر‬‫م‬ ‫ظيور‬ ‫ىو‬ ‫ؿ‬َّ‫األو‬ ‫ابط‬‫ر‬‫ال‬ ‫عمى‬ ‫النقر‬ ‫عند‬ ‫سيحدث‬ ‫ما‬Save File Dialog‫ما‬ ‫و‬
‫(مثؿ‬ ‫اإللكتروني‬ ‫يد‬‫ر‬‫الب‬ ‫مدير‬ ‫نامج‬‫ر‬‫ب‬ ‫ظيور‬ ‫ىو‬ ‫الثاني‬ ‫الممؼ‬ ‫عمى‬ ‫النقر‬ ‫عند‬ ‫سيحدث‬Outlook
Express‫رسال‬ ‫إرساؿ‬ ‫وضع‬ ‫في‬ ).‫ابط‬‫ر‬‫ال‬ ‫في‬ ‫المذكور‬ ‫اإللكتروني‬ ‫يد‬‫ر‬‫الب‬ ‫إلى‬ ‫جديدة‬ ‫ة‬
‫الصور‬ ‫عناصر‬Images
‫لغة‬ ‫توفر‬HTML‫العنصر‬ ‫ىو‬ ‫العنصر‬ ‫ىذا‬ ‫الصفحة‬ ‫ضمف‬ ‫الصور‬ ‫لعرض‬ ً‫ا‬‫خاص‬ ً‫ا‬‫ر‬‫عنص‬
<img/>‫ػ‬‫ل‬ ً‫ا‬‫ر‬‫(اختصا‬Image‫ىا‬‫مسار‬ ‫عمى‬ ً‫ا‬‫اعتماد‬ ‫الصفحة‬ ‫ضمف‬ ‫ة‬‫ر‬‫الصو‬ ‫بعرض‬ ‫يقوـ‬ ‫الذي‬ )
‫اصفة‬‫و‬‫ال‬ ‫عبر‬ ‫لمعنصر‬ ‫يمرر‬ ‫الذي‬src‫ػ‬‫ل‬ ً‫ا‬‫ر‬‫(اختصا‬Source‫لمعنصر‬ ‫بالنسبة‬ ‫الحاؿ‬ ‫ىو‬ ‫كما‬ ‫و‬ ,)
‫الخاص‬<br/>‫العنصر‬ ّ‫فإف‬<img/>‫الغالب‬ ‫في‬ ‫العاـ‬ ‫شكمو‬ ّ‫فإف‬ ‫لذلؾ‬ ‫و‬ ‫نياية‬ ‫وسـ‬ ‫أي‬ ‫يمتمؾ‬ ‫ّل‬
‫يكوف‬<img src="path" />:‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬ ,
<html>
<head>
<title>
‫اٌظٛس‬ ‫ػٕبطش‬ ‫ٌؼشع‬ ‫طفحخ‬
</title>
</head>

38. ٖٛ
<body>
<img src="myPic.jpg" />
<img src="myPic2.gif" alt="‫انثاويح‬ ‫انصىرج‬" />
<img src="myPic.jpg" alt="‫اٌثبٌثخ‬ ‫اٌظٛسح‬" width="100px"
height="50px" />
<img src="‫خبؿئ‬ ‫ِسبس‬" alt="‫اٌخبؿئ‬ ‫اٌّسبس‬ ‫راد‬ ٟ‫طٛسر‬" />
</body>
</html>
‫عند‬ ‫يبدو‬ ‫الذي‬ ‫و‬:‫كمايمي‬ ‫المستعرض‬ ‫في‬ ‫عرضو‬
‫الشكل‬11:‫الصور‬ ‫لعنصر‬ ‫اختبار‬ ‫صفحة‬
‫وسـ‬ ‫كؿ‬ ‫في‬ ‫ة‬‫ر‬‫المذكو‬ ‫ات‬‫ر‬‫المسا‬ ‫ذات‬ ‫الصور‬ ‫بعرض‬ ‫الصور‬ ‫عرض‬ ‫عنصر‬ ‫قاـ‬ ‫فقد‬ ‫تالحظ‬ ‫كما‬
<img/>‫اصفة‬‫و‬‫ال‬ ‫العنصر‬ ‫ىذا‬ ‫اصفات‬‫و‬ ‫مف‬ ‫و‬ ,alt‫في‬ ‫عرضيا‬ ‫يتـ‬ ‫ة‬ّ‫نصي‬ ‫قيمة‬ ‫إلييا‬ ‫تسند‬ ‫التي‬
‫ال‬ ‫تعذر‬ ‫حاؿ‬‫اصفة‬‫و‬‫ال‬ ‫في‬ ‫ة‬‫ر‬‫المذكو‬ ‫ة‬‫ر‬‫الصو‬ ‫إلى‬ ‫وصوؿ‬src‫ة‬‫ر‬‫الصو‬ ‫في‬ ‫معنا‬ ‫حدثت‬ ‫الحالة‬ ‫ىذه‬ ‫و‬
‫ة‬‫ر‬‫الصو‬ ‫عرض‬ ‫يمكف‬ ‫كما‬ ,‫الحالة‬ ‫ىذه‬ ‫لعرض‬ ‫قصد‬ ‫عف‬ ‫خاطئ‬ ‫بمسار‬ ‫زودناىا‬ ‫التي‬ ‫و‬ ‫ابعة‬‫ر‬‫ال‬
‫العنصر‬ ‫تزويد‬ ‫عبر‬ ‫ذلؾ‬ ‫و‬ ‫محدد‬ ‫بمقاس‬img‫تفاع‬‫ر‬‫اّل‬ ‫اصفتي‬‫و‬‫ب‬height‫العرض‬ ‫و‬width‫التي‬ ‫و‬

39. ٖٜ
َّ‫قمي‬‫ر‬ ‫قيـ‬ ‫إلييما‬ ‫تسند‬‫تعنيو‬ ‫ما‬ ‫بالبكسؿ(ىذا‬ ‫المعروضة‬ ‫ة‬‫ر‬‫الصو‬ ‫تفاع‬‫ر‬‫ا‬ ‫و‬ ‫عرض‬ ‫تحدد‬ ‫ة‬px‫القيـ‬ ‫في‬
.)‫اصفتيف‬‫و‬‫ال‬ ‫لياتيف‬ ‫المسندة‬
‫تحتوي‬ ‫صفحتنا‬ ‫أف‬ ‫فرض‬ ‫عمى‬ :‫ممحوظة‬٘‫لتحميؿ‬ ‫سيحتاج‬ ‫صحيح‬ ‫و‬ ‫تاـ‬ ‫بشكؿ‬ ‫الصفحة‬ ‫عرض‬ َّ‫فإف‬ ‫صور‬ٙ
‫عم‬ ً‫ا‬‫ائد‬‫ز‬ ً‫ال‬‫حم‬ ‫يسبب‬ ‫قد‬ ‫ما‬ ‫ىذا‬ ‫و‬ ‫الخمسة‬ ‫الصور‬ ‫ممفات‬ ‫و‬ ‫الصفحة‬ ‫ممؼ‬ ‫ىي‬ ‫ممفات‬‫حاؿ‬ ‫في‬ ً‫ال‬‫مستقب‬ ‫موقعؾ‬ ‫ى‬
.‫الصور‬ ‫استخداـ‬ ‫في‬ ‫اط‬‫ر‬‫اإلف‬
‫ابط‬‫و‬‫الر‬ ‫نصوص‬ ‫من‬ ً‫ال‬‫بد‬ ‫الصور‬
‫ابط‬‫و‬‫الر‬ ‫عناصر‬ ‫محتوى‬ ‫نصوص‬ ‫استبداؿ‬ ‫يتـ‬ ‫أف‬ ‫الويب‬ ‫اقع‬‫و‬‫م‬ ‫في‬ ‫الشائع‬ ‫مف‬<a>‫ذلؾ‬ ‫و‬ ‫بالصور‬
‫مف‬ ً‫ّل‬‫بد‬ ‫ة‬‫ر‬‫الصو‬ ‫عمى‬ ‫النقر‬ ‫عند‬ ‫ابط‬‫ر‬‫لم‬ ‫اليدؼ‬ ‫لمصفحة‬ ‫اّلنتقاؿ‬ ‫يتـ‬ ‫بحيث‬ ‫الموقع‬ ‫محتوى‬ ‫لتجميؿ‬
‫عم‬ ‫النقر‬‫العنصر‬ ‫بتضميف‬ ‫ذلؾ‬ ‫يتـ‬ ‫و‬ ‫النص‬ ‫ى‬<img/>‫لمعنصر‬ ‫كمحتوى‬<a>‫نعرض‬ ‫فيمايمي‬ ‫و‬
:‫لذلؾ‬ ً‫ا‬‫بسيط‬ ً‫ّل‬‫مثا‬
<html>
<head>
<title>
‫ٌشاثؾ‬ ٜٛ‫وّحز‬ ‫طٛسح‬ ‫ػشع‬
</title>
</head>
<body>
<a href = "mailto:mokhtar_ss@hotmail.com">
<img src="myPic.jpg" alt="‫راصهىي‬" />
</a>
</body>
</html>

40. ٗٓ
:‫كمايمي‬ ‫المستعرض‬ ‫في‬ ‫يبدو‬ ‫ما‬ ‫ىذا‬ ‫و‬
‫الشكل‬11:‫ابط‬‫و‬‫لمر‬ ‫كمحتوى‬ ‫النصوص‬ ‫عن‬ ً‫ال‬‫بد‬ ‫الصور‬ ‫استخدام‬
‫َّة‬‫الصوري‬ ‫ائط‬‫ر‬‫الخ‬Image Maps
‫ابط‬‫و‬‫ر‬ ‫ما‬ ‫ة‬‫ر‬‫صو‬ ‫مف‬ ‫دة‬ّ‫محد‬ ‫اء‬‫ز‬‫أج‬ ‫جعؿ‬ ‫تعني‬ ‫َّة‬‫ي‬‫ر‬‫الصو‬ ‫ائط‬‫ر‬‫الخ‬ً‫ا‬,‫و‬,‫احؿ‬‫ر‬‫م‬ ‫ثالث‬ ‫عمى‬ ‫ىذا‬ ‫يتـ‬
‫األولى‬‫يتـ‬ ‫أف‬ ‫ىي‬‫الوسـ‬ ‫يؽ‬‫ر‬‫ط‬ ‫عف‬ ‫تقميدي‬ ‫بشكؿ‬ ‫الصفحة‬ ‫في‬ ‫ة‬‫ر‬‫الصو‬ ‫وضع‬<img/>‫الثانية‬ ‫أما‬ ,
‫يطة‬‫ر‬‫الخ‬ ‫عنصر‬ ‫إنشاء‬ ‫فيي‬<map>‫اصفة‬‫و‬‫ال‬ ‫قيمة‬ ‫إسناد‬ ‫مع‬name‫و‬ ‫يطة‬‫ر‬‫لمخ‬ ‫كاسـ‬ ‫بو‬ ‫الخاصة‬
‫عناصر‬ ‫مف‬ ‫مجموعة‬ ‫إنشاء‬ َّ‫ثـ‬ ‫مف‬<area>‫ستتحوؿ‬ ‫التي‬ ‫المناطؽ‬ ‫بإحداثيات‬‫في‬ ‫ابط‬‫و‬‫ر‬ ‫إلى‬
‫يطة‬‫ر‬‫الخ‬ ‫اسـ‬ ‫بإسناد‬ ‫ذلؾ‬ ‫و‬ ‫ة‬‫ر‬‫الصو‬ ‫عنصر‬ ‫و‬ ‫يطة‬‫ر‬‫الخ‬ ‫عنصر‬ ‫بط‬‫ر‬‫ب‬ ‫تتـ‬ ‫الثالثة‬ ‫المرحمة‬ ‫و‬ ,‫ة‬‫ر‬‫الصو‬
‫اصفة‬‫و‬‫ال‬ ‫إلى‬usemap:‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬ ,‫ة‬‫ر‬‫الصو‬ ‫بعنصر‬ ‫الخاصة‬
<html>
<body>
<p>ٕٗ‫ػ‬ ‫ِؼٍِٛبد‬ ‫ٌؼشع‬ ‫اٌىٛاوت‬ ‫أحذ‬ ٍٝ‫ػ‬ ‫أمش‬</p>
<img src="planets.gif" width="145" height="126"
alt="‫اٌىٛاوت‬" usemap="#planetmap" />
<map name="planetmap">

41. ٗٔ
<area shape="rect" coords="0,0,82,126" alt="‫انشمش‬"
href="sun.htm" />
<area shape="circle" coords="90,58,3" alt="‫انمريخ‬"
href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt="‫انزهرج‬"
href="venus.htm" />
</map>
</body>
</html>
:‫كمايمي‬ ‫المستعرض‬ ‫في‬ ‫التالي‬ ‫المثاؿ‬ ‫يبدو‬
‫الشكل‬12‫صورية‬ ‫خريطة‬ ‫صنع‬ ‫عمى‬ ‫مثال‬ :
‫أعيطناىا‬ ‫و‬ ‫يطة‬‫ر‬‫الخ‬ ‫بإنشاء‬ ‫بدأنا‬ َّ‫ثـ‬ ,ً‫ّل‬‫و‬‫أ‬ ‫طبيعي‬ ‫بشكؿ‬ ‫ة‬‫ر‬‫الصو‬ ‫إضافة‬ ‫تمت‬ ‫فقد‬ ‫تالحظ‬ ‫كما‬ً‫ا‬‫اسم‬
:‫بالسطر‬
<map name="planetmap">

42. ٕٗ
‫الوسـ‬ ‫عبر‬ ‫اكب‬‫و‬‫الك‬ ‫مف‬ ‫كوكب‬ ‫لكؿ‬ ‫منطقة‬ ‫بإنشاء‬ ‫قمنا‬ ‫ذلؾ‬ ‫بعد‬area‫األولى‬ ‫اصفتاف‬‫و‬ ‫لو‬ ‫الذي‬ ‫و‬
shape‫اإلحداثيات‬ ‫اصفة‬‫و‬ ‫فيي‬ ‫الثانية‬ ‫ا‬َّ‫أم‬ ,)‫إلخ‬ .. ‫ية‬‫ر‬‫دائ‬ ,‫(مستطيمة‬ ‫المنطقة‬ ‫شكؿ‬ ‫لتحديد‬
coords‫يمثؿ‬ ‫المستطيؿ‬ ‫أبعاد‬ ‫لتحديد‬ ‫المستطيؿ‬ ‫حالة‬ ‫في‬ ‫إحداثيات‬ ‫بعة‬‫ر‬‫أ‬ ‫ير‬‫ر‬‫تم‬ ‫تـ‬ ‫حيث‬
‫اإلحداثي‬‫اف‬‫المستطيؿ‬ ‫مف‬ ‫العموي‬ ‫األيسر‬ ‫الركف‬ ‫الثاني‬ ‫و‬ ‫األوؿ‬‫ابع‬‫ر‬‫ال‬ ‫و‬ ‫الثالث‬ ‫اإلحداثياف‬ ‫يمثؿ‬ ‫بينما‬
‫ىذا‬ ‫تـ‬ ‫بالطبع‬ ‫و‬ ,‫لتحديده‬ ٍ‫كاؼ‬ ‫ىذا‬ ‫و‬ ‫المستطيؿ‬ ‫مف‬ ‫السفمي‬ ‫األيمف‬ ‫الركف‬‫أف‬ ‫اعتبار‬ ‫عمى‬‫مركز‬
‫ة‬‫ر‬‫لمصو‬ ‫َّة‬‫تي‬‫ر‬‫الديكا‬ ‫الجممة‬‫األيسر‬ ‫الركف‬ ‫ىو‬
‫النقطة‬ ‫فإف‬ ‫بيذا‬ ‫و‬ ,‫ة‬‫ر‬‫الصو‬ ‫مف‬ ‫العموي‬
(ٓ,ٓ( ‫النقطة‬ ‫و‬ )82,126‫تحدداف‬ )
‫المرسوـ‬ ‫بالمستطيؿ‬ ‫الشمس‬ ‫كوكب‬ ‫منطقة‬
‫ال‬ ‫حالة‬ ‫في‬ ‫ا‬َّ‫أم‬ ,‫بينيما‬‫فيتـ‬ ‫ية‬‫ر‬‫الدائ‬ ‫منطقة‬
‫الثاني‬ ‫و‬ ‫األوؿ‬ ‫يعبر‬ ‫إحداثيات‬ ‫ثالثة‬ ‫ير‬‫ر‬‫تم‬
‫نقط‬ ‫عف‬‫عف‬ ‫الثالث‬ ‫يعبر‬ ‫و‬ ‫ة‬‫ر‬‫الدائ‬ ‫مركز‬ ‫ة‬
.‫ىا‬‫قطر‬ ‫نصؼ‬
‫اصفة‬‫و‬‫ال‬ ‫إلى‬ ‫يطة‬‫ر‬‫الخ‬ ‫اسـ‬ ‫ير‬‫ر‬‫بتم‬ ‫قمنا‬ ‫النياية‬ ‫في‬ ‫و‬usemap.‫ة‬‫ر‬‫بالصو‬ ‫الخاصة‬
‫اصفة‬‫و‬‫ال‬ ‫إلى‬ ‫يطة‬‫ر‬‫الخ‬ ‫اسـ‬ ‫ير‬‫ر‬‫تم‬ ‫يتـ‬ :‫ممحوظة‬usemap‫بالرمز‬ ً‫ا‬‫مسبوق‬#
‫َّة‬‫الداخمي‬ ‫ابط‬‫و‬‫الر‬Internal Linking
‫يصبح‬ ‫ىذه‬ ‫مثؿ‬ ‫حالة‬ ‫في‬ ‫و‬ ‫ما‬ ‫حد‬ ‫إلى‬ ً‫ا‬‫ر‬‫كبي‬ ‫نة‬ّ‫معي‬ ‫صفحة‬ ‫ضمف‬ ‫الموجود‬ ‫المحتوى‬ ‫يكوف‬ ً‫ا‬‫أحيان‬
‫لغة‬ ‫ر‬ِّ‫ف‬‫تو‬ ,‫الوقت‬ ‫و‬ ‫الجيد‬ ‫بعض‬ ‫تستغرؽ‬ ‫عممية‬ ‫الصفحة‬ ‫ضمف‬ ‫محددة‬ ‫ة‬‫ر‬‫فق‬ ‫إلى‬ ‫اّلنتقاؿ‬HTML
‫الداخمية‬ ‫ابط‬‫و‬‫بالر‬ ‫يعرؼ‬ ‫ما‬ ‫عبر‬ ‫ة‬‫ر‬‫مباش‬ ‫الصفحة‬ ‫مف‬ ‫محدد‬ ‫ء‬‫جز‬ ‫إلى‬ ‫لالنتقاؿ‬ ‫َّة‬‫آلي‬Internal Links
‫الشكل‬13‫المناطق‬ ‫رسم‬ ‫في‬ ‫الهندسي‬ ‫المبدأ‬ ‫لتوضيح‬ ‫تخيمي‬ ‫شكل‬ :

43. ٖٗ
‫ابط‬‫ر‬‫ال‬ ‫وسـ‬ ‫استخداـ‬ ‫عبر‬ ‫تحقيقيا‬ ‫يتـ‬ ‫التي‬ ‫و‬<a>‫اّلنتقاؿ‬ ‫اد‬‫ر‬‫الم‬ ‫العنصر‬ ‫ؼ‬َّ‫معر‬ ‫ير‬‫ر‬‫تم‬ ‫و‬‫إليو‬
‫اصفة‬‫و‬‫لم‬ ‫كقيمة‬href:‫التالي‬ ‫بالشكؿ‬
<a href="#id"> id ٌّ‫ا‬ ٚ‫ر‬ ‫اٌؼٕظش‬ ٌٝ‫إ‬ ً‫أزم‬‫ؼشف‬ </a>
ّ‫أف‬ ‫حيث‬id‫الصفحة‬ ‫ضمف‬ ‫إليو‬ ‫اّلنتقاؿ‬ ‫اد‬‫ر‬‫الم‬ ‫العنصر‬ ‫معرؼ‬ ‫يمثؿ‬‫و‬‫المثاؿ‬‫التالي‬‫ىذه‬ ‫ح‬ِّ‫يوض‬
:‫ة‬‫ر‬‫الفك‬
<html>
<head>
<title>
‫اٌذاخٍ١خ‬ ‫اٌشٚاثؾ‬ ٍٝ‫ػ‬ ‫ِثبي‬
</title>
</head>
<body>
<a href="#Para4">‫اٌشاثؼخ‬ ‫اٌفمشح‬ ٌٝ‫إ‬</a>
<h1>ٌٝٚ‫األ‬ ‫اٌفمشح‬</h1>
<p>ٌٝٚ‫األ‬ ‫اٌفمشح‬ ٜٛ‫ِحز‬ ‫ٕ٘ب‬</p>
<h1>‫اٌثبٔ١خ‬ ‫اٌفمشح‬</h1>
<p>‫اٌثبٔ١خ‬ ‫اٌفمشح‬ ٜٛ‫ِحز‬ ‫ٕ٘ب‬</p>
<h1>‫اٌثبٌثخ‬ ‫اٌفمشح‬</h1>
<p>‫اٌثبٌثخ‬ ‫اٌفمشح‬ ٜٛ‫ِحز‬ ‫ٕ٘ب‬</p>
<h1 id="Para4">‫اٌشاثؼخ‬ ‫اٌفمشح‬</h1>
<p>‫اٌشاثؼخ‬ ‫اٌفمشح‬ ٜٛ‫ِحز‬ ‫ٕ٘ب‬</p>
</body>
</html>

44. ٗٗ
‫ائم‬‫و‬‫الق‬Lists
‫لغة‬ ‫توفر‬HTML:‫ائـ‬‫و‬‫الق‬ ‫عناصر‬ ‫مف‬ ‫نوعيف‬
ٔ-‫تبة‬‫ر‬‫الم‬ ‫غير‬ ‫ائـ‬‫و‬‫الق‬Unordered List‫الوسـ‬ ‫عبر‬<ul>.
ٕ-‫تبة‬‫ر‬‫الم‬ ‫ائـ‬‫و‬‫الق‬Ordered List‫الوسـ‬ ‫عبر‬<ol>.
‫عناصر‬ ‫مف‬ ‫كمجموعة‬ ‫اىا‬‫و‬‫محت‬ ‫نضيؼ‬ ‫بإنشائيا‬ ‫غب‬‫نر‬ ‫التي‬ ‫القائمة‬ ‫ع‬‫نو‬ ‫بتحديد‬ ‫نقوـ‬ ‫أف‬ ‫بعد‬<li>‫و‬
‫تعني‬ ‫التي‬List Item‫و‬ ‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬ ,:‫بسيطة‬ ‫تبة‬‫ر‬‫م‬ ‫غير‬ ‫قائمة‬ ‫إنشاء‬ ‫َّة‬‫كيفي‬ ‫يعرض‬ ‫الذي‬
<html>
<head>
<title>‫ِشرجخ‬ ‫غ١ش‬ ‫لبئّخ‬ ٍٝ‫ػ‬ ‫ِثبي‬</title>
</head>
<body dir="rtl">
<p>‫اٌىزبة‬ ‫٘زا‬ ٟ‫ف‬ ٍُ‫سٕزؼ‬</p>
<ul>
<li>HTML</li>
<li>HTML5</li>
<li>XHTML</li>
<li>CSS</li>
<li>CSS3</li>
</ul>
</body>
</html>
:‫كمايمي‬ ‫المستعرض‬ ‫في‬ ‫عرضو‬ ‫عند‬ ‫يبدو‬ ‫الذي‬ ‫و‬

45. ٗ٘
‫الشكل‬14:‫بسيطة‬ ‫مرتبة‬ ‫غير‬ ‫لقائمة‬ ‫مثال‬
‫مف‬ ‫القائمة‬ ‫لعنصر‬ ‫النياية‬ ‫و‬ ‫البداية‬ ‫وسمي‬ ‫بتغيير‬<ul>‫و‬</ul>‫إلى‬<ol>‫و‬</ol>‫ستصبح‬
:‫التالي‬ ‫بالشكؿ‬ ‫تبة‬‫ر‬‫م‬ ‫القائمة‬
‫الشكل‬15‫بسيطة‬ ‫مرتبة‬ ‫قائمة‬ ‫عمى‬ ‫مثال‬ :

46. ٗٙ
‫الفصؿ‬ ‫ىذا‬ ‫بداية‬ ‫منذ‬ ‫ذكرت‬ ‫كما‬ ‫و‬ ‫بالطبع‬‫فإف‬‫عناصر‬ ‫مف‬ ‫عنصر‬ ‫أي‬HTML‫يحوي‬ ‫أف‬ ‫يمكف‬
‫نيايتو‬ ‫و‬ ‫بدايتو‬ ‫وسمي‬ ‫بيف‬‫أية‬‫م‬ ‫ى‬‫أخر‬ ‫مجموعة‬‫نستطيع‬ ‫أننا‬ ‫يعني‬ ‫ىذا‬ ‫و‬ ‫العناصر‬ ‫ف‬‫قائمة‬ ‫إنشاء‬
‫تحوي‬‫يوض‬ ‫التالي‬ ‫المثاؿ‬ ‫و‬ ,‫ليا‬ ‫كعناصر‬ ‫َّة‬‫عي‬‫فر‬ ‫ائـ‬‫و‬‫ق‬:‫ة‬‫ر‬‫الفك‬ ‫ىذه‬ ‫ح‬
<html>
<head>
<title>‫ِؼمذح‬ ‫لبئّخ‬ ٍٝ‫ػ‬ ‫ِثبي‬</title>
</head>
<body dir="rtl">
<p>‫اٌىزبة‬ ‫٘زا‬ ٟ‫ف‬ ٍُ‫سٕزؼ‬</p>
<ol>
<li>
HTML
<ul>
<li>‫انرواتط‬</li>
<li>‫انصىر‬</li>
<li>‫انقىائم‬
<ul>
<li>‫انمرذثح‬</li>
<li>‫انمرذثح‬ ‫غير‬</li>
</ul>
</li>
</ul>
</li>
<li>HTML 5</li>

47. ٗٚ
<li>XHTML</li>
<li>CSS</li>
<li>CSS 3</li>
</ol>
</body>
</html>
:‫كمايمي‬ ‫المستعرض‬ ‫في‬ ‫أعاله‬ ‫المثاؿ‬ ‫يبدو‬
‫الشكل‬16:‫عمى‬ ‫مثال‬‫معقدة‬ ‫قائمة‬
‫اصفة‬‫و‬‫ال‬ ‫استخداـ‬ ‫يمكف‬ ‫و‬ّ‫أن‬ ‫ائـ‬‫و‬‫الق‬ ‫عف‬ ‫ه‬‫ر‬‫ذك‬ ‫يجب‬ ‫ما‬ ‫آخر‬type‫حالة‬ ‫ففي‬ ‫القائمة‬ ‫شكؿ‬ ‫لتغيير‬
:‫إلييا‬ ‫التالية‬ ‫القيـ‬ ‫إحدى‬ ‫إسناد‬ ‫يمكف‬ ‫تبة‬‫ر‬‫الم‬ ‫غير‬ ‫ائـ‬‫و‬‫الق‬square‫أو‬disc‫أو‬circle‫رمز‬ ‫لوضع‬
‫تي‬‫ر‬‫الت‬ ‫عمى‬ ‫عنصر‬ ‫كؿ‬ ‫أماـ‬ ‫ة‬‫ر‬‫الدائ‬ ‫أو‬ ‫القرص‬ ‫أو‬ ‫بع‬‫ر‬‫الم‬,‫ب‬‫إسناد‬ ‫يمكف‬ ‫تبة‬‫ر‬‫الم‬ ‫القائمة‬ ‫حالة‬ ‫في‬ ‫و‬

48. ٗٛ
‫القيـ‬ ‫إحدى‬ٔ‫أو‬A‫أو‬a‫أو‬I‫أو‬i‫اصفة‬‫و‬‫ال‬ ‫إلى‬type‫قيـ‬‫ر‬‫ت‬ ,‫بية‬‫ر‬‫ع‬ ‫قاـ‬‫ر‬‫بأ‬ ‫قيـ‬‫ر‬‫ت‬ ‫إلى‬ ‫قيـ‬‫ر‬‫الت‬ ‫لتحويؿ‬
‫ّلتينية‬ ‫قاـ‬‫ر‬‫بأ‬ ‫قيـ‬‫ر‬‫ت‬ ,‫ة‬‫ر‬‫كبي‬ ‫ّلتينية‬ ‫قاـ‬‫ر‬‫بأ‬ ‫قيـ‬‫ر‬‫ت‬ ,‫ة‬‫ر‬‫صغي‬ ‫ية‬‫ز‬‫إنجمي‬ ‫بأحرؼ‬ ‫قيـ‬‫ر‬‫ت‬ ,‫ة‬‫ر‬‫كبي‬ ‫ية‬‫ز‬‫إنجمي‬ ‫بأحرؼ‬
.‫تيب‬‫ر‬‫الت‬ ‫عمى‬ ‫ة‬‫ر‬‫صغي‬
‫يوج‬‫الوسـ‬ ‫باستخداـ‬ ‫إنشاؤه‬ ‫يتـ‬ ‫المصطمحات‬ ‫ائـ‬‫و‬‫بق‬ ‫يعرؼ‬ ‫ائـ‬‫و‬‫الق‬ ‫مف‬ ‫خاص‬ ‫ع‬‫نو‬ ‫د‬<dl>‫لعنصر‬
‫الوسـ‬ ‫و‬ ‫القائمة‬<dt>‫الوسـ‬ ‫و‬ ‫المصطمح‬ ‫لعنصر‬<dd>‫المثاؿ‬ ‫لنشاىد‬ ,‫المصطمح‬ ‫يؼ‬‫ر‬‫تع‬ ‫لعنصر‬
:‫التالي‬
<html>
<head>
<title>‫ِظـٍحبد‬ ‫لبئّخ‬ ٍٝ‫ػ‬ ‫ِثبي‬</title>
</head>
<body dir="rtl">
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
<dt>XHTML</dt>
<dd>eXtensible Hyper Text Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheet</dd>
</dl>
</body>
</html>
:‫كمايمي‬ ‫المستعرض‬ ‫في‬ ‫المصطمحات‬ ‫قائمة‬ ‫تبدو‬

49. ٜٗ
‫الشكل‬17‫المستعرض‬ ‫في‬ ‫المصطمحات‬ ‫قائمة‬ ‫تبدو‬ ‫هكذا‬ :
‫الجداول‬Tables
‫لغة‬ ‫توفر‬HTML‫العنصر‬ ‫عبر‬ ‫الجداوؿ‬ ‫إلنشاء‬ ‫آلية‬<table>‫العنصر‬ ‫إنشاء‬ ‫عبر‬ ‫ذلؾ‬ ‫يتـ‬ ‫و‬
<table>‫العرض‬ ‫اصفتي‬‫و‬ ‫ير‬‫ر‬‫تم‬ ‫و‬ ً‫ّل‬ّ‫أو‬width‫الحدود‬ ‫عرض‬ ‫و‬borderَّ‫ثـ‬ ‫مف‬ ‫و‬ ,‫بالبكسؿ‬
‫الجدوؿ‬ ‫أسطر‬ ‫عنصر‬ ‫عبر‬ ‫الجدوؿ‬ ‫محتويات‬ ‫إنشاء‬table rows‫باستخداـ‬ ‫تحقيقو‬ ‫يتـ‬ ‫الذي‬ ‫و‬
‫الوسـ‬<tr>‫خاليا‬ ‫محتويات‬ ‫ذكر‬ ‫يتـ‬ َّ‫ثـ‬ ,table data‫و‬ ‫حدى‬ ‫عمى‬ ‫الجدوؿ‬ ‫أسطر‬ ‫مف‬ ‫سطر‬ ‫كؿ‬
‫الوسـ‬ ‫عبر‬ ‫ذلؾ‬<td>,:‫كمايمي‬ ‫ئي‬‫ر‬‫م‬ ‫بشكؿ‬ ‫تمثيميا‬ ‫يمكف‬ ‫الوسوـ‬ ‫حفظ‬ ‫لتسييؿ‬ ‫و‬
‫الشكل‬18‫الجدول‬ ‫إلنشاء‬ ‫المستعممة‬ ‫الوسوم‬ ‫لتوضيح‬ ‫تخيمي‬ ‫شكل‬ :
‫جدوؿ‬ ‫بإنشاء‬ ‫تقوـ‬ ‫التي‬ ‫التالية‬ ‫ة‬‫ر‬‫الشيف‬ ‫نشاىد‬ ‫دعنا‬ ‫أكثر‬ ‫توضيحو‬ ‫بغية‬ ً‫ا‬‫عممي‬ ‫المفيوـ‬ ‫ىذا‬ ‫لتطبيؽ‬ ‫و‬
:‫بسيط‬

50. ٘ٓ
<html>
<head>
<title>‫ثس١ؾ‬ ‫جذٚي‬ ‫إٔشبء‬ ٍٝ‫ػ‬ ‫ِثبي‬</title>
</head>
<body dir="rtl">
<table border="1" width="50%">
<tr>
<td>‫انكراب‬ ‫اصم‬</td>
<td>‫انضعر‬</td>
</tr>
<tr>
<td>‫انىية‬ ‫ترمجح‬</td>
<td>051</td>
</tr>
<tr>
<td>‫انجىال‬ ‫ترمجح‬</td>
<td>011</td>
</tr>
<tr>
<td>‫األنعاب‬ ‫ترمجح‬</td>
<td>051</td>
</tr>
<tr>
<td>‫انطثخ‬ ‫ذعهم‬</td>
<td>51</td>

51. ٘ٔ
</tr>
</table>
</body>
</html>
:‫كمايمي‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫عرضو‬ ‫عند‬ ‫الجدوؿ‬ ‫ىذا‬ ‫يبدو‬
‫الشكل‬19:‫بسيط‬ ‫جدول‬ ‫إنشاء‬ ‫عمى‬ ‫مثال‬
‫الجدوؿ‬ ‫عنصر‬ ‫بإنشاء‬ ً‫ّل‬‫و‬‫أ‬ ‫قمنا‬ ‫فقد‬ ‫أينا‬‫ر‬ ‫كما‬<table>‫بعرض‬width٘ٓ‫الكمي‬ ‫العرض‬ ‫مف‬ %
‫حدود‬ ‫بعرض‬ ‫!),و‬ً‫ا‬‫صحيح‬ ‫يبقى‬ ‫ذلؾ‬ ‫أف‬ ‫لتالحظ‬ ‫المستعرض‬ ‫نافذة‬ ‫حجـ‬ ‫تغيير‬ ‫(حاوؿ‬ ‫لمصفحة‬
borderٔ‫الوسميف‬ ‫باستخداـ‬ ‫جديد‬ ‫سطر‬ ‫بإنشاء‬ ‫قمنا‬ َّ‫ثـ‬ ,‫بكسؿ‬<tr></tr>‫السطر‬ ‫ىذا‬ ‫يحوي‬ ,
‫خميتيف‬ ‫عمى‬<td></td>‫القيمة‬ ‫األولى‬ ‫تحوي‬"‫الكتاب‬ ‫اسـ‬"‫القيمة‬ ‫الثانية‬ ‫تحوي‬ ‫و‬"‫السعر‬"‫قمنا‬ َّ‫ثـ‬ ,
‫أصبح‬ ‫ع‬‫الموضو‬ ‫أف‬ ‫أظف‬ ,‫الكتب‬ ‫بيانات‬ ‫تحوي‬ ‫التي‬ ‫ى‬‫األخر‬ ‫األسطر‬ ‫مع‬ ‫األسموب‬ ‫نفس‬ ‫ار‬‫ر‬‫بتك‬
.‫اآلف‬ ً‫ا‬‫اضح‬‫و‬
‫قياس‬ ‫احدة‬‫و‬ ‫بأي‬ ‫أو‬ ً‫ا‬‫أيض‬ ‫بالبكسؿ‬ ‫الجدوؿ‬ ‫عرض‬ ‫قيمة‬ ‫إعطاء‬ ‫يمكف‬ :‫ممحوظة‬‫احدات‬‫و‬‫ال‬ ‫مف‬‫ال‬‫مدعومة‬‫لغة‬ ‫في‬
HTMLً‫ا‬‫ّلحق‬ ‫ىا‬‫ذكر‬ ‫سيتـ‬ ‫التي‬ ‫و‬.

52. ٕ٘
‫جداوؿ‬ ‫مف‬ ‫جدوؿ‬ ‫كؿ‬ ‫يقسـ‬HTML:‫مناطؽ‬ ‫بع‬‫ر‬‫أ‬ ‫إلى‬
ٔ-‫الجدوؿ‬ ‫أس‬‫ر‬ ‫منطقة‬Table Head‫الوسميف‬ ‫باستخداـ‬ ‫القسـ‬ ‫ىذا‬ ‫نشأ‬ُ‫ي‬ :<thead>‫و‬
</thead>‫سطر‬ ‫عنصر‬ ‫عمى‬ ‫الغالب‬ ‫في‬ ‫يحوي‬ ‫و‬<tr></tr>‫و‬ ‫بدايتو‬ ‫وسمي‬ ‫بيف‬ ‫يحوي‬
‫ع‬‫النو‬ ‫مف‬ ‫خاليا‬ ‫في‬ ‫الجدوؿ‬ ‫أعمدة‬ ‫عناويف‬ ‫نيايتو‬<th>‫مف‬ ً‫ّل‬‫بد‬<td>‫تـ‬ ‫حيث‬ ,
‫أف‬ ‫اّلصطالح‬<td>‫بيانات‬ ‫خمية‬ ‫تعني‬table data‫أف‬ ‫حيف‬ ‫في‬<th>‫خمية‬ ‫تعني‬
‫اف‬‫و‬‫عن‬table heading.
ٕ-‫الجدوؿ‬ ‫جسـ‬ ‫منطقة‬Table Body‫الوسميف‬ ‫باستخداـ‬ ‫القسـ‬ ‫ىذا‬ ‫نشأ‬ُ‫ي‬ :<tbody>‫و‬
</tbody>‫باستخداـ‬ ‫تنشأ‬ ‫التي‬ ‫و‬ ‫البيانات‬ ‫سطور‬ ‫عمى‬ ‫يحوي‬ ‫و‬<tr>‫خالياىا‬ ‫أف‬ ‫بما‬ ‫و‬
‫الوسوـ‬ ‫باستخداـ‬ ‫تنشأ‬ ‫الخاليا‬ ‫فإف‬ ‫معمومات‬ ‫تحوي‬<td>.
ٖ-‫الجدوؿ‬ ‫ذيؿ‬ ‫منطقة‬Table Foot‫الوسميف‬ ‫باستخداـ‬ ‫القسـ‬ ‫ىذا‬ ‫نشأ‬ُ‫ي‬ :<tfoot>‫و‬
</tfoot>‫سطر‬ ‫عنصر‬ ‫عمى‬ ‫الغالب‬ ‫في‬ ‫يحوي‬ ‫و‬<tr></tr>‫يحو‬‫و‬ ‫بدايتو‬ ‫وسمي‬ ‫بيف‬ ‫ي‬
‫ع‬‫النو‬ ‫مف‬ ‫خاليا‬ ‫في‬ ‫الجدوؿ‬ ‫أعمدة‬ ‫عف‬ ‫ممخصات‬ ‫نيايتو‬<th>.
ٗ-‫الجدوؿ‬ ‫اف‬‫و‬‫عن‬Caption‫وسمي‬ ‫بيف‬ ‫اف‬‫و‬‫العن‬ ‫نص‬ ‫بكتابة‬ ‫الجدوؿ‬ ‫اف‬‫و‬‫عن‬ ‫ضاؼ‬ُ‫ي‬ :
<caption>‫و‬</caption>:‫المختمفة‬ ‫الجدوؿ‬ ‫مناطؽ‬ ‫التالي‬ ‫الشكؿ‬ ‫ح‬ِّ‫يوض‬ ,
‫الشكل‬21:‫توضيحي‬ ‫رسم‬‫أل‬‫في‬ ‫الجدول‬ ‫قسام‬HTML

53. ٖ٘
‫ة‬‫ر‬‫شيف‬ ‫سنكتب‬ ‫صفحتنا‬ ‫في‬ ‫المذكور‬ ‫الجدوؿ‬ ‫لتحقيؽ‬HTML:‫التالية‬
<html>
<head>
<title>ٌٟ‫ِثب‬ ‫جذٚي‬ ‫إٔشبء‬ ٍٝ‫ػ‬ ‫ِثبي‬</title>
</head>
<body dir="rtl">
<table border="1" width="50%">
<caption>‫انكرة‬ ‫شراء‬ ‫فاذىرج‬</caption>
<thead>
<tr>
<th>‫انكراب‬ ‫اصم‬</th>
<th>‫انضعر‬</th>
</tr>
</thead>
<tbody>
<tr>
<td>‫اٌٛ٠ت‬ ‫ثشِجخ‬</td>
<td>150</td>
</tr>
<tr>
<td>‫اٌجٛاي‬ ‫ثشِجخ‬</td>

54. ٘ٗ
<td>200</td>
</tr>
<tr>
<td>‫األٌؼبة‬ ‫ثشِجخ‬</td>
<td>350</td>
</tr>
<tr>
<td>‫اٌـجخ‬ ٍُ‫رؼ‬</td>
<td>50</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>‫انمجمىع‬</th>
<th>750</th>
</tr>
</tfoot>
</table>
</body>
</html>
:‫كمايمي‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫ة‬‫ر‬‫الشيف‬ ‫ىذه‬ ‫تبدو‬

55. ٘٘
‫الشكل‬21‫جدول‬ ‫إلنشاء‬ ‫مثال‬ :HTML‫مثالي‬
‫الذيؿ‬ ‫و‬ ‫أس‬‫ر‬‫ال‬ ‫منطقتي‬ ‫في‬ ‫الموجودة‬ ‫األسطر‬ ‫أف‬ ‫كما‬ ,‫الجدوؿ‬ ‫أعمى‬ ‫يظير‬ ‫اف‬‫و‬‫العن‬ َّ‫فإف‬ ‫تالحظ‬ ‫كما‬
‫يض‬‫ر‬‫ع‬ ‫بخط‬ ‫تظير‬bold.
‫البسيطة‬ ‫غير‬ ‫الجداول‬
‫حالة‬ ‫مثؿ‬ ‫لحالة‬ ‫فبالنسبة‬ ً‫ا‬‫أيض‬ ً‫ا‬‫بسيط‬ ‫و‬ ً‫ال‬‫جمي‬ ‫كاف‬ ‫الماضية‬ ‫ة‬‫ر‬‫الفق‬ ‫في‬ ‫اضو‬‫ر‬‫استع‬ ‫تـ‬ ‫ما‬ ‫الحقيقة‬ ‫في‬
‫الحاّلت‬ ‫عف‬ ‫ماذا‬ ‫لكف‬ ‫و‬ ‫بسيط‬ ‫أمر‬ ‫األسطر‬ ‫مف‬ ‫بمجموعة‬ ‫و‬ ‫بعموديف‬ ً‫ّل‬‫و‬‫جد‬ ‫فإف‬ ‫اء‬‫ر‬‫الش‬ ‫ة‬‫ر‬‫فاتو‬
‫األس‬ ‫ّل‬ ‫و‬ ,‫األحجاـ؟‬ ‫متساوية‬ ‫الخاليا‬ ‫فييا‬ ‫تكوف‬ ‫ّل‬ ‫التي‬ ‫الحاّلت‬ ‫عف‬ ‫ماذا‬ ,‫األعقد؟‬‫متساوية‬ ‫طر‬
‫تجيب‬ ,‫الخاليا؟‬ ‫عدد‬HTML‫اصفتيف‬‫و‬‫ال‬ ‫تقديـ‬ ‫عبر‬ ‫ة‬ّ‫ق‬‫المح‬ ‫ّلت‬‫ؤ‬‫التسا‬ ‫ىذه‬ ‫عمى‬rowspan‫و‬
colspan.
‫اصفتاف‬‫و‬‫ال‬ ‫تستخدـ‬rowspan‫و‬colspan‫الخمية‬ ‫بداية‬ ‫وسـ‬ ‫مع‬<td>‫أو‬<th>‫إلييما‬ ‫تسند‬ ‫و‬
( ‫صحيحة‬ ‫قمية‬‫ر‬ ‫قيمة‬ٔ‫أو‬ٕ‫أو‬ٖ‫خميت‬ ‫بحجـ‬ ‫فتجعميا‬ ‫الخمية‬ ‫حجـ‬ ‫مف‬ ‫تغير‬ )‫إلخ‬ ..‫ثالث‬ ‫أو‬ ‫يف‬
‫أف‬ ‫حيث‬ ,‫إلخ‬ .. ‫بع‬‫ر‬‫أ‬ ‫أو‬rowspan‫أما‬ ,‫الخمية‬ ‫بعرض‬ ‫تتحكـ‬colspan.‫الخمية‬ ‫تفاع‬‫ر‬‫با‬ ‫فتتحكـ‬
:‫المثاؿ‬ ‫سبيؿ‬ ‫عمى‬ ‫التالية‬ ‫ة‬‫ر‬‫الشيف‬ ‫لنشاىد‬

56. ٘ٙ
<html>
<head>
<title>‫ثس١ؾ‬ ‫غ١ش‬ ‫جذٚي‬ ‫إٔشبء‬ ٍٝ‫ػ‬ ‫ِثبي‬</title>
</head>
<body dir="rtl">
<table border="1" width="100%">
<tbody>
<tr>
<td>‫اٌىزبة‬ ُ‫اس‬</td>
<td>ٍُ‫رؼ‬ jQuery ٟ‫ف‬021‫دل١مخ‬ </td>
<td rowspan="3">
<img src="jQuery120.png">
</td>
</tr>
<tr>
<td>‫اٌّؤٌف‬</td>
<td>‫طبٌح‬ ‫س١ذ‬ ‫ِخزبس‬</td>
</tr>
<tr>
<td>‫اإلطذاس‬ ‫سٕخ‬</td>
<td>2010</td>
</tr>
<tr>
<td colspan="3">
‫ِىزجخ‬ ٓ‫ػ‬ ‫ِؼٍِٛبد‬ ‫اٌىزبة‬ ‫٘زا‬ َ‫٠مذ‬jQuery

57. ٘ٚ
ً‫ثشى‬‫إٌخ‬ ..... ‫ٚاػح‬ ٚ ‫ِجسؾ‬.
</td>
</tr>
</tbody>
</table>
</body>
</html>
‫السابقة‬ ‫ة‬‫ر‬‫الشيف‬ ‫تبدو‬:‫كمايمي‬ ‫المستعرض‬ ‫في‬ ‫عرضيا‬ ‫عند‬
‫الشكل‬22‫اصفتين‬‫و‬‫ال‬ ‫باستخدام‬ ‫بسيط‬ ‫غير‬ ‫جدول‬ ‫إنشاء‬ ‫عمى‬ ‫مثال‬ :rowspan‫و‬colspan
‫منيا‬ ‫احدة‬‫و‬ ‫خاليا‬ ‫ثالث‬ ‫عمى‬ ‫ؿ‬َّ‫األو‬ ‫السطر‬ ‫يحوي‬ ‫سطور‬ ‫بعة‬‫ر‬‫أ‬ ‫مف‬ ‫يتكوف‬ ‫الجدوؿ‬ ّ‫فإف‬ ‫ى‬‫تر‬ ‫كما‬
‫تعنيو‬ ‫ما‬ ‫(ىذا‬ ً‫ة‬‫مجتمع‬ ‫أسطر‬ ‫ثالثة‬ ‫تفاع‬‫ر‬‫ا‬ ‫يعادؿ‬ ‫تفاع‬‫ر‬‫با‬rowspan="3"‫مف‬ ‫األخير‬ ‫السطر‬ ‫ا‬َّ‫أم‬ ,)
‫تعنيو‬ ‫ما‬ ‫ىذا‬ ‫(و‬ ً‫ة‬‫مجتمع‬ ‫الثالثة‬ ‫الجدوؿ‬ ‫أعمدة‬ ‫بعرض‬ ‫احدة‬‫و‬ ‫خمية‬ ‫عمى‬ ‫فيحوي‬ ‫الجدوؿ‬

58. ٘ٛ
colspan="3"‫اصفتيف‬‫و‬‫ال‬ ‫استخداـ‬ ‫أف‬ ‫أظف‬ ,)rowspan‫و‬colspan‫و‬ ,‫اآلف‬ ً‫ا‬‫اضح‬‫و‬ ‫أصبح‬
‫بتغيير‬ ‫ا‬‫و‬‫يقوم‬ ‫أف‬ ‫أنصحيـ‬ ‫و‬ ‫منيـ‬ ‫فأعتذر‬ ‫ليـ‬ ‫بالنسبة‬ ‫ة‬‫ر‬‫الصو‬ ‫تتضح‬ ‫لـ‬ ‫الذيف‬ ‫ألصدقائي‬ ‫بالنسبة‬
‫اصفتيف‬‫و‬‫ال‬ ‫في‬ ‫ة‬‫ر‬‫المذكو‬ ‫القيـ‬rowspan‫و‬colspan‫الحاصؿ‬ ‫الفرؽ‬ ‫ا‬‫و‬‫يالحظ‬ ‫و‬ ‫السابؽ‬ ‫المثاؿ‬ ‫في‬
‫أحجاـ‬ ‫في‬.‫أظف‬ ‫كما‬ ‫لدييـ‬ ‫أفضؿ‬ ‫ر‬ّ‫تصو‬ ‫تشكيؿ‬ ‫في‬ ً‫ا‬‫ر‬‫كثي‬ ‫يساعد‬ ‫فيذا‬ ‫الخاليا‬
:‫ممحوظة‬‫قمبي‬ ‫ليطمئف‬‫عناصر‬ ‫مف‬ ‫أي‬ ‫وضع‬ ‫بإمكانؾ‬ ‫أنو‬ ‫أذكرؾ‬ ‫أف‬ ‫أحب‬HTML.‫الجدوؿ‬ ‫خاليا‬ ‫في‬ ‫كمحتوى‬
‫النماذج‬Forms
‫النماذج‬ ‫تستخدـ‬Forms‫لغة‬ ‫في‬HTML‫المدخالت‬ ‫ّلستقباؿ‬Inputs‫عرضيا‬ ‫بغية‬ ‫المستخدـ‬ ‫مف‬
‫يني‬‫ز‬‫تخ‬ ‫أو‬‫الوسميف‬ ‫باستخداـ‬ ‫النماذج‬ ‫إنشاء‬ ‫يتـ‬ ,‫عمييا‬ ‫معينة‬ ‫معالجة‬ ‫بعمميات‬ ‫القياـ‬ ‫أو‬ ‫ا‬<form>
‫و‬</form>‫اإلدخاؿ‬ ‫عناصر‬ ‫مف‬ ‫مجموعة‬ ‫بينيما‬ ‫سيحوياف‬ ‫الذاف‬<input>‫بعات‬‫ر‬‫م‬ ‫مثؿ‬
‫النصوص‬text boxes‫اّلختيار‬ ‫عناصر‬ ‫و‬check boxes‫ار‬‫ر‬‫األز‬ ‫و‬buttons‫ائـ‬‫و‬‫الق‬ ‫و‬
‫المنسدلة‬select lists...‫إلخ‬
‫النموذج‬ ‫عنصر‬ ‫بداية‬ ‫وسـ‬ ‫تزويد‬ ‫يتـ‬<form>‫اصفة‬‫و‬‫ال‬ ‫ىي‬ ‫األولى‬ ‫أساسيتيف‬ ‫اصفتيف‬‫و‬‫ب‬action‫و‬
‫الممؼ‬ ‫يكوف‬ ‫و‬ ‫النموذج‬ ‫في‬ ‫المدخمة‬ ‫البيانات‬ ‫بمعالجة‬ ‫سيقوـ‬ ‫الذي‬ ‫البرمجي‬ ‫الممؼ‬ ‫اسـ‬ ‫تحدد‬ ‫التي‬
‫فر‬‫ر‬‫السي‬ ‫طرؼ‬ ‫مف‬ ‫البرمجة‬ ‫لغات‬ ‫بإحدى‬ ً‫ا‬‫مكتوب‬ ‫البرمجي‬Server Side‫مثؿ‬PHP‫أو‬
ASP.NET‫أو‬JSP( ‫إلخ‬ .. ‫أو‬‫و‬‫فر‬‫ر‬‫السي‬ ‫طرؼ‬ ‫مف‬ ‫البرمجة‬‫نطاؽ‬ ‫ج‬‫خار‬ ‫ع‬‫موضو‬,)‫الكتاب‬ ‫ىذا‬
‫اصفة‬‫و‬‫ال‬ ‫فيي‬ ‫الثانية‬ ‫اصفة‬‫و‬‫ال‬ ‫ا‬ّ‫أم‬method‫البرمجي‬ ‫الممؼ‬ ‫إلى‬ ‫البيانات‬ ‫إرساؿ‬ ‫يقة‬‫ر‬‫ط‬ ‫تحدد‬ ‫التي‬ ‫و‬
:‫يقتيف‬‫ر‬‫ط‬ ‫بإحدى‬ ً‫ا‬‫سابق‬ ‫المذكور‬
ٔ-‫يقة‬‫ر‬‫الط‬ ‫ىي‬ ‫األولى‬ ‫يقة‬‫ر‬‫الط‬get‫في‬ ‫البيانات‬ ‫إرساؿ‬ ‫يتـ‬ ‫حيث‬‫في‬ ‫اف‬‫و‬‫العن‬ ‫يط‬‫ر‬‫ش‬
‫عمى‬ ‫التالي‬ ‫ابط‬‫ر‬‫لم‬ ‫انظر‬ ,‫مفتاح/قيمة‬ ‫اج‬‫و‬‫أز‬ ‫بشكؿ‬ ‫البرمجي‬ ‫الممؼ‬ ‫اسـ‬ ‫بعد‬ ‫المستعرض‬
:‫المثاؿ‬ ‫سبيؿ‬

59. ٜ٘
http://www.site.com/file.php?name=Mukhtar&age=23&job=ComputerEngin
eer
‫ىو‬ ‫الحالة‬ ‫ىذه‬ ‫في‬ ‫البرمجي‬ ‫الممؼ‬ ‫فإف‬ ‫تالحظ‬ ‫كما‬http://www.site.com/file.php
‫ا‬َّ‫أم‬‫فيي‬ ‫المرسمة‬ ‫القيـ‬:
name = Mukhtar‫و‬age = 23‫و‬job = ComputerEngineer
ٕ–‫يقة‬‫ر‬‫الط‬ ‫ىي‬ ‫الثانية‬ ‫يقة‬‫ر‬‫الط‬post‫في‬ ‫ظاىر‬ ‫غير‬ ‫بشكؿ‬ ‫البيانات‬ ‫إرساؿ‬ ‫يتـ‬ ‫حيث‬
‫طمب‬ ‫ترويسة‬ ‫مع‬ ‫إرساليا‬ ‫يتـ‬ ‫الحقيقة‬ ‫(في‬ ‫اف‬‫و‬‫العن‬ ‫يط‬‫ر‬‫ش‬HTTP.)
‫أننا‬ ‫بما‬-‫الكتاب‬ ‫ىذا‬ ‫في‬-‫فقط‬ ‫النماذج‬ ‫إنشاء‬ ‫بكيفية‬ ‫سنيتـ‬‫الطمبات‬ ‫معالجة‬ ‫كيفية‬ ‫نناقش‬ ‫لف‬ ‫و‬
‫فبإمكانؾ‬‫اصفة‬‫و‬‫ال‬ ‫عف‬ ‫ه‬‫ر‬‫ذك‬ ‫تـ‬ ‫ما‬ ‫تجاىؿ‬ ‫اآلف‬method.‫النماذج‬ ‫بناء‬ ‫كيفية‬ ‫عمى‬ ‫التركيز‬ ‫و‬
‫العنصر‬ ‫إنشاء‬ ‫بعد‬<form>‫و‬ ‫بدايتو‬ ‫وسمي‬ ‫بيف‬ ‫اإلدخاؿ‬ ‫عناصر‬ ‫مف‬ ‫مجموعة‬ ‫بوضع‬ ‫سنقوـ‬
‫ب‬ ‫نيايتو‬‫الوسـ‬ ‫استخداـ‬<input>ُ‫ي‬ ‫يد‬‫ر‬‫ف‬ ‫باسـ‬ ‫إدخاؿ‬ ‫عنصر‬ ‫كؿ‬ ‫تزويد‬ ‫سيتـ‬ ً‫ا‬‫طبع‬ ‫و‬َ‫سن‬‫كقيمة‬ ‫د‬
‫اصفتيف‬‫و‬‫لم‬name‫و‬id‫اصفة‬‫و‬‫ال‬ ‫عبر‬ ‫اإلدخاؿ‬ ‫عنصر‬ ‫ع‬‫نو‬ ‫تحديد‬ ‫سيتـ‬ َّ‫ثـ‬ ‫مف‬ ‫و‬ ,type‫الجدوؿ‬ ‫و‬
:‫منيا‬ ‫كؿ‬ ‫يمثمو‬ ‫ما‬ ‫و‬ ‫الممكنة‬ ‫القيـ‬ ‫يوضح‬ ‫التالي‬
‫القيمة‬‫تمثمه‬ ‫ما‬
button‫زر‬‫امر‬‫و‬‫أ‬
checkbox‫عنصر‬‫متعدد‬ ‫اختيار‬
file‫الموقع‬ ‫إلى‬ ‫فعو‬‫ر‬ ‫بغية‬ ‫ممؼ‬ ‫ّلختيار‬ ‫بع‬‫ر‬‫م‬
hidden‫مخفي‬ ‫إدخاؿ‬ ‫عنصر‬
password‫المرور‬ ‫كممة‬ ‫إدخاؿ‬ ‫عنصر‬
radio‫فردي‬ ‫اختيار‬ ‫عنصر‬
reset‫لعناصر‬ ‫اضية‬‫ر‬‫اّلفت‬ ‫القيـ‬ ‫ضبط‬ ‫إلعادة‬ ‫زر‬

60. ٙٓ
‫النموذج‬ ‫في‬ ً‫ة‬‫كامم‬ ‫اإلدخاؿ‬
submit)‫الطمب‬ ‫(إرساؿ‬ ‫افؽ‬‫و‬‫م‬ ‫زر‬
text‫بع‬‫ر‬‫م‬‫نص‬ ‫إدخاؿ‬
‫الجدول‬3:‫القيم‬‫المختمفة‬‫اصفة‬‫و‬‫لم‬type‫الخاصة‬‫بعنصر‬<input>
:‫التالية‬ ‫ة‬‫ر‬‫الشيف‬ ‫معي‬ ‫تابع‬ ‫و‬ ‫معقدة‬ ‫و‬ ‫ة‬‫ر‬‫كثي‬ ‫المعمومات‬ ‫لؾ‬ ‫بدت‬ ْ‫إف‬ ‫تقمؽ‬ ‫ّل‬
<html>
<head>
<title>
‫ثس١ؾ‬ ‫ّٔٛرج‬ ‫إٔشبء‬ ٍٝ‫ػ‬ ‫ِثبي‬
</title>
</head>
<body dir="rtl">
<form method="get" action="file.php">
: ‫االصم‬
<input type="text" name="nameText" id="nameText" />
<br/>
: ‫انمرور‬ ‫كهمح‬
<input type="password" name="pass" id="pass" />
<br/>
<input type="submit" name="okButton" id="okButton"
value="‫مىافك‬" />
</form>
</body>
</html>

61. ٙٔ
‫الويب‬ ‫مستعرض‬ ‫في‬ ‫عرضيا‬ ‫عند‬ ‫تبدو‬ ‫التي‬ ‫و‬‫بعد‬ ‫و‬‫إدخاؿ‬‫البيانات‬ ‫بعض‬:‫كمايمي‬
‫الشكل‬23‫بسيط‬ ‫نموذج‬ ‫إنشاء‬ ‫عمى‬ ‫مثال‬ :
‫ليشمؿ‬ ‫ىذا‬ ‫نموذجنا‬ ‫بتطوير‬ ‫نقوـ‬ ‫دعنا‬ ,‫أيت‬‫ر‬ ‫كما‬ ‫بسيط‬ ‫ع‬‫الموضو‬ ً‫ا‬‫حسن‬‫عناصر‬ ‫مف‬ ‫ى‬‫أخر‬ ‫مجموعة‬
:‫التالية‬ ‫ة‬‫ر‬‫لمشيف‬ ‫انظر‬ ,‫بة‬‫ر‬‫التج‬ ‫سبيؿ‬ ‫عمى‬ ‫اإلدخاؿ‬
<html>
<head>
<title>ً‫لٍ١ل‬ ‫أػمذ‬ ‫ّٔٛرج‬ ‫إٔشبء‬ ٍٝ‫ػ‬ ‫ِثبي‬</title>
</head>
<body dir="rtl">
<form method="get" action="file.php">
:ُ‫االس‬ <input type="text" name="nameText"
id="nameText" />
<br/>
:‫اٌّشٚس‬ ‫وٍّخ‬ <input type="password" name="pass"
id="pass" />
<br/>

62. ٕٙ
:‫اٌشخظ١خ‬ ‫اٌظٛسح‬ <input type="file" name="pic"
id="pic">
<br/>
<input type="reset" name="resBtn" id="resBtn"
value="‫اسزؼبدح‬" />
<input type="submit" name="okButton" id="okButton"
value="‫ِٛافك‬" />
</form>
</body>
</html>
:‫كمايمي‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫السابقة‬ ‫ة‬‫ر‬‫الشيف‬ ‫تبدو‬
‫الشكل‬24‫بقميل‬ ‫أعقد‬ ‫نموذج‬ ‫إنشاء‬ :
.. !ً‫ال‬‫مي‬‫اّلختيار‬ ‫عناصر‬ ‫عف‬ ‫ماذا‬ ‫لكف‬ ‫و‬radio‫و‬checkbox‫؟‬
‫عمى‬ ‫اإلجابة‬ ‫مف‬ ‫المستخدـ‬ ‫تمكيف‬ ‫بغية‬ ‫النماذج‬ ‫في‬ ‫العناصر‬ ‫ىذه‬ ‫استعماؿ‬ ‫يتـ‬ ‫اقع‬‫و‬‫ال‬ ‫في‬ ,ً‫ا‬‫حسن‬
‫اؿ‬‫ؤ‬‫س‬‫ذلؾ‬ ‫و‬ ‫محدد‬‫حالة‬ ‫(في‬ ‫محتممة‬ ‫إجابات‬ ‫عدة‬ ‫مف‬ ‫فقط‬ ‫احد‬‫و‬ ‫اب‬‫و‬‫ج‬ ‫باختيار‬‫عنصر‬radio‫أو‬ )
‫اؿ‬‫ؤ‬‫س‬ ‫عمى‬ ‫اإلجابة‬‫محدد‬‫حالة‬ ‫(في‬ ‫اب‬‫و‬‫ج‬ ‫مف‬ ‫أكثر‬ ‫باختيار‬‫عنصر‬checkbox‫استخداـ‬ ‫يتـ‬ ‫و‬ )

63. ٖٙ
‫ا‬ ‫ىذه‬‫مع‬ ‫السابقة‬ ‫يقة‬‫ر‬‫الط‬ ‫بنفس‬ ‫لعناصر‬‫ممحوظة‬‫لنفس‬ ‫إجابة‬ ‫تمثؿ‬ ‫التي‬ ‫العناصر‬ ‫جميع‬ ‫إعطاء‬
‫القيمة‬ ‫اؿ‬‫ؤ‬‫الس‬‫ذاتيا‬‫اصفة‬‫و‬‫لم‬name‫اصفة‬‫و‬‫لم‬ ‫مختمفة‬ ً‫ا‬‫قيم‬ ‫و‬value:‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬ ,
<html>
<head>
<title> radio ٚ checkbox َ‫اسزخذا‬ ٍٝ‫ػ‬ ‫ِثبي‬</title>
</head>
<body dir="rtl">
<form method="post" action="file.php">
<p>‫؟‬ ‫ِٛلؼٕب‬ ٓ‫ػ‬ ‫ػٍّذ‬ ٓ٠‫أ‬ ِٓ</p>
‫جش٠ذح‬
<input type="checkbox" name="wrKnow" value="nPaper" />
ٟٔٚ‫إٌىزش‬ ‫ِٛلغ‬
<input type="checkbox" name="wrKnow" value="wbSite" />
‫طذ٠ك‬
<input type="checkbox" name="wrKnow" value="frnd" />
‫ثحث‬ ‫ِحشن‬
<input type="checkbox" name="wrKnow" value="srEng" />
<p>‫ٌّٛلؼٕب؟‬ ‫رم١١ّه‬ ‫ِب‬</p>
‫ج١ذ‬
<input type="radio" name="rate" value="good" />
‫ِزٛسؾ‬
<input type="radio" name="rate" value="mid" />
‫سٟء‬
<input type="radio" name="rate" value="bad" />

64. ٙٗ
</form>
</body>
</html>
:‫كمايمي‬ ‫المستعرض‬ ‫في‬ ‫يبدو‬ ‫الذي‬ ‫و‬
‫الشكل‬25‫استخدام‬ ‫عمى‬ ‫مثال‬ :checkbox‫و‬radio
‫لعنصر‬ ‫مشابو‬ ‫شيء‬ ‫لتحقيؽ‬ ‫ى‬‫أخر‬ ‫يقة‬‫ر‬‫ط‬ ‫ىناؾ‬radio‫لكنو‬ ‫و‬ ‫اليدؼ‬ ‫حيث‬ ‫مف‬‫حاؿ‬ ‫في‬ ‫يستخدـ‬
‫ة‬‫ر‬‫كثي‬ ‫بدائؿ‬ ‫وجود‬)‫اؿ‬‫ؤ‬‫لمس‬ ‫محتممة‬ ‫ة‬‫ر‬‫كثي‬ ‫(أجوبة‬‫عبر‬ ‫تحقيقو‬ ‫يتـ‬ ‫و‬ ‫المنسدلة‬ ‫القائمة‬ ‫عنصر‬ ‫ىو‬ ‫و‬
‫الوسـ‬<select>‫الوسـ‬ ‫خالؿ‬ ‫مف‬ ‫تحقيقيا‬ ‫فيتـ‬ ‫القائمة‬ ‫عناصر‬ ‫ا‬َّ‫أم‬<option>‫أحد‬ ‫تحديد‬ ‫يتـ‬ ‫و‬
‫اصفة‬‫و‬‫ال‬ ‫ير‬‫ر‬‫تم‬ ‫يؽ‬‫ر‬‫ط‬ ‫عف‬ ‫اضي‬‫ر‬‫افت‬ ‫كخيار‬ ‫العناصر‬ ‫ىذه‬selected="selected"‫بداي‬ ‫وسـ‬ ‫في‬,‫تو‬
:‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬
<html>
<head>
<title>select َ‫اسزخذا‬ ٍٝ‫ػ‬ ‫ِثبي‬</title>
</head>
<body dir="rtl">

65. ٙ٘
<form method="post" action="file.php">
<p>‫أٔذ؟‬ ْ‫اٌجٍذا‬ ٞ‫أ‬ ِٓ</p>
<select name="nationality">
<option selected="selected">‫صىريا‬</option>
<option>‫انعراق‬</option>
<option>‫نثىان‬</option>
<option>‫فهضطيه‬</option>
<option>‫األردن‬</option>
<option>‫انمغرب‬</option>
<option>‫انجزائر‬</option>
</select>
</form>
</body>
</html>
:‫كمايمي‬ ‫المستعرض‬ ‫في‬ ‫يبدو‬ ‫الذي‬ ‫و‬
‫الشكل‬26‫عنصر‬ ‫استخدام‬ ‫عمى‬ ‫مثال‬ :select

66. ٙٙ
‫ىنا‬ ‫لمناقشتو‬ ‫أخير‬ ‫إدخاؿ‬ ‫عنصر‬ ‫بقي‬‫و‬‫العنصر‬ ‫ىو‬<textarea>‫قيمة‬ ‫إلدخاؿ‬ ‫يستخدـ‬ ‫الذي‬ ‫و‬
‫األسطر‬ ‫متعددة‬ ‫نصية‬‫العنصر‬ ‫عكس‬ ‫عمى‬<input>‫ع‬‫النو‬ ‫مف‬text‫قيمة‬ ‫إلدخاؿ‬ ‫يستخدـ‬ ‫الذي‬ ‫و‬
.‫السطر‬ ‫وحيدة‬ ‫نصية‬
‫يمرر‬‫لمعنصر‬<textarea>‫اصفتيف‬‫و‬‫ال‬ ‫عبر‬ ‫صحيحة‬ ‫عددية‬ ‫قيـ‬cols‫و‬rows‫و‬ ‫عرضو‬ ‫لتحديد‬
:‫التالية‬ ‫ة‬‫ر‬‫الشيف‬ ‫انظر‬ ,‫تفاعو‬‫ر‬‫ا‬
<html>
<head>
<title>
textarea َ‫اسزخذا‬ ٍٝ‫ػ‬ ‫ِثبي‬
</title>
</head>
<body dir="rtl">
<form method="post" action="file.php">
<p>‫ػٕه‬ ‫لظ١شح‬ ‫ٔجزح‬ ‫اوزت‬</p>
<textarea cols="30" rows="10" name="bio">
</textarea>
</form>
</body>
</html>
:‫كمايمي‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫اضو‬‫ر‬‫استع‬ ‫عند‬ ‫يبدو‬ ‫الذي‬ ‫و‬

67. ٙٚ
‫الشكل‬27‫العنصر‬ ‫استخدام‬ ‫عمى‬ ‫مثال‬ :textarea
‫مجموعات‬ ‫إلى‬ ‫اإلدخال‬ ‫عناصر‬ ‫تقسيم‬
‫إطار‬ ‫في‬ ‫منيا‬ ‫كؿ‬ ‫يوضع‬ ‫منطقية‬ ‫أقساـ‬ ‫إلى‬ ‫ة‬‫ر‬‫الكبي‬ ‫النماذج‬ ‫في‬ ‫اإلدخاؿ‬ ‫عناصر‬ ‫تقسيـ‬ ‫يمكف‬
‫لغة‬ ‫ه‬‫ر‬‫توف‬ ‫ما‬ ‫ىذا‬ ‫و‬ ‫مستقؿ‬HTML‫الوسميف‬ ‫باستخداـ‬<fieldset>‫و‬</fieldset>‫المذاف‬
‫بينيما‬ ‫سيحوياف‬‫تزويد‬ ‫يتـ‬ ‫و‬ ‫اإلدخاؿ‬ ‫عناصر‬ ‫مجموعة‬‫كؿ‬‫اف‬‫و‬‫بعن‬ ‫مجموعة‬‫توضيحي‬‫الوسـ‬ ‫عبر‬
<legend>‫كما‬ ,‫المعمومات‬ ‫َّة‬‫ماىي‬ ‫عمى‬ ‫يدؿ‬ ً‫ا‬‫ان‬‫و‬‫عن‬ ‫اإلدخاؿ‬ ‫عناصر‬ ‫مف‬ ‫عنصر‬ ‫كؿ‬ ‫منح‬ ‫يمكف‬
‫الوسـ‬ ‫يؽ‬‫ر‬‫ط‬ ‫عف‬ ‫فيو‬ ‫المدخمة‬<label>‫اصفة‬‫و‬ ‫إلى‬ ‫اإلدخاؿ‬ ‫عنصر‬ ‫اسـ‬ ‫ير‬‫ر‬‫بتم‬for‫الخاصة‬
‫اف‬‫و‬‫العن‬ ‫بعنصر‬<label>:‫التالي‬ ‫المثاؿ‬ ‫نشاىد‬ ‫دعنا‬ ,
<html>
<head>
<title>
fieldset ‫اسزخذا‬ ٍٝ‫ػ‬ ‫ِثبي‬َ
</title>
</head>

68. ٙٛ
<body dir="rtl">
<form method="get" action="">
<fieldset>
<legend>‫انشخصيح‬ ‫انثياواخ‬</legend>
<label for="nameTXT">‫االصم‬</label>
<input type="text" name="nameTXT" id="nameTXT"
maxlength="50" />
<br/><br/>
<label for="ageTXT">‫انعمر‬</label>
<input type="text" name="ageTXT" id="ageTXT"
maxlength="2" />
</fieldset>
<br/>
<fieldset>
<legend>‫انعمم‬ ‫مهاراخ‬</legend>
C#
<input type="checkbox" name="prog" value="cs"/>
VB.NET
<input type="checkbox" name="prog" value="vb"/>
F#
<input type="checkbox" name="prog" value="fs"/>
C++.NET
<input type="checkbox" name="prog" value="cpp"/>

69. ٜٙ
</fieldset>
<fieldset>
<input type="submit" value="‫إسسبي‬" />
</fieldset>
</form>
</body>
</html>
:‫الويب‬ ‫مستعرض‬ ‫في‬ ‫كمايمي‬ ‫السابقة‬ ‫ة‬‫ر‬‫الشيف‬ ‫تبدو‬
‫الشكل‬28‫استخدام‬ ‫عمى‬ ‫مثال‬ :fieldSet
‫ات‬‫ر‬‫اإلطا‬Frames
‫لغة‬ ‫لؾ‬ ‫تسمح‬HTML‫استخداـ‬ ‫عبر‬ ‫ذلؾ‬ ‫و‬ ,‫ى‬‫أخر‬ ‫صفحات‬ ‫ضمف‬ ‫ويب‬ ‫صفحات‬ ‫بتضميف‬
‫ات‬‫ر‬‫اإلطا‬Frames.

70. ٚٓ
‫ا‬ ‫يتـ‬‫الصفحة‬ ‫في‬ ‫ات‬‫ر‬‫اإلطا‬ ‫ستعماؿ‬‫ات‬‫ر‬‫اإلطا‬ ‫حاوية‬ ‫بإنشاء‬ ‫األولى‬ ,‫مرحمتيف‬ ‫عمى‬‫الوسـ‬ ‫باستخداـ‬
<frameset>‫كؿ‬ ‫سيأخذه‬ ‫الذي‬ ‫الحجـ‬ ‫و‬ ,‫تضمينيا‬ ‫سيتـ‬ ‫التي‬ ‫ات‬‫ر‬‫اإلطا‬ ‫عدد‬ ً‫ة‬‫بداي‬ ‫يحدد‬ ‫الذي‬ ‫و‬
‫الحجـ‬ ‫تحديد‬ ‫يتـ‬ ‫و‬ ,‫الكمي‬ ‫الصفحة‬ ‫حجـ‬ ‫مف‬ ‫إطار‬‫الثانية‬ ‫المرحمة‬ ‫ا‬ّ‫أم‬ ,‫المئوية‬ ‫بالنسبة‬ ‫أو‬ ‫بالبكسؿ‬
‫اإلط‬ ‫إضافة‬ ‫فييا‬ ‫فيتـ‬‫لمعنصر‬ ‫النياية‬ ‫و‬ ‫البداية‬ ‫وسمي‬ ‫بيف‬ ‫ات‬‫ر‬‫ا‬<frameset>‫ذل‬ ‫و‬‫ؾ‬‫باستخداـ‬
‫الوسـ‬<frame>‫اصفة‬‫و‬‫لم‬ ‫اإلطار‬ ‫سيحوييا‬ ‫التي‬ ‫الصفحة‬ ‫مسار‬ ‫إسناد‬ ‫و‬src‫المثاؿ‬ ‫لنشاىد‬ ,
‫ه‬‫ر‬‫قد‬ ‫بحجـ‬ ‫ؿ‬َّ‫األو‬ ‫يف‬‫ر‬‫إطا‬ ‫تضـ‬ ‫ويب‬ ‫لصفحة‬ ‫التالي‬ٖٓ‫بالحجـ‬ ‫الثاني‬ ‫و‬ ‫الكمي‬ ‫الصفحة‬ ‫حجـ‬ ‫مف‬ %
:‫الصفحة‬ ‫مف‬ ‫الباقي‬
<html>
<frameset cols="30%,*">
<frame src="page_1.htm" />
<frame src="page_2.htm" />
</frameset>
</html>
:‫كمايمي‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫ىذا‬ ‫يبدو‬
‫الشكل‬29‫ات‬‫ر‬‫اإلطا‬ ‫استخدام‬ :‫عمودي‬ ‫بشكل‬

71. ٚٔ
‫وسـ‬ ‫عمى‬ ‫تحوي‬ ‫ّل‬ ‫ات‬‫ر‬‫اإلطا‬ ‫فييا‬ ‫تستعمؿ‬ ‫التي‬ ‫الصفحة‬ :‫ممحوظة‬<body>.
‫الظاىر‬ ‫و‬ ‫بينيما‬ ‫الفاصؿ‬ ‫الخط‬ ‫يؾ‬‫ر‬‫تح‬ ‫يؽ‬‫ر‬‫ط‬ ‫عف‬ ‫ات‬‫ر‬‫اإلطا‬ ‫حجـ‬ ‫بتغيير‬ ‫المستخدـ‬ ‫يقوـ‬ ‫أف‬ ‫يمكف‬
‫الشكؿ‬ ‫(انظر‬ ‫السابؽ‬ ‫الشكؿ‬ ‫في‬ ‫ح‬‫بوضو‬ٕٜ‫إضافة‬ ‫يؽ‬‫ر‬‫ط‬ ‫عف‬ ‫ات‬‫ر‬‫لإلطا‬ ‫السموؾ‬ ‫ىذا‬ ‫إلغاء‬ ‫يمكف‬ ,)
‫اصفة‬‫و‬‫ال‬noresize="noresize"‫وسوـ‬ ‫إلى‬<frame>.
‫اصفة‬‫و‬‫ال‬ ‫استعماؿ‬ ‫تـ‬ ‫ليذا‬ ‫و‬ ‫عمودي‬ ‫بشكؿ‬ ‫ات‬‫ر‬‫اإلطا‬ ‫كانت‬ ‫السابؽ‬ ‫المثاؿ‬ ‫في‬cols‫الوسـ‬ ‫مع‬
<frameset>‫اصفة‬‫و‬‫ال‬ ‫استبداؿ‬ ‫يؽ‬‫ر‬‫ط‬ ‫عف‬ ‫أفقي‬ ‫بشكؿ‬ ‫ات‬‫ر‬‫اإلطا‬ ‫جعؿ‬ ‫يمكف‬ ‫و‬ ,cols‫اصفة‬‫و‬‫بال‬
rows:‫الويب‬ ‫مستعرض‬ ‫في‬ ‫كمايمي‬ ‫الصفحة‬ ‫لتصبح‬ ,
‫الشكل‬31‫أفقي‬ ‫بشكل‬ ‫ات‬‫ر‬‫اإلطا‬ ‫استخدام‬ :
‫اصفة‬‫و‬ ‫إلى‬ ‫اإلطار‬ ‫اسـ‬ ‫إسناد‬ ‫يؽ‬‫ر‬‫ط‬ ‫عف‬ ‫َّف‬‫معي‬ ‫إطار‬ ‫في‬ ‫اه‬‫و‬‫محت‬ ‫يعرض‬ ‫ابط‬‫ر‬‫ال‬ ‫جعؿ‬ ‫يمكف‬ :‫ة‬‫ر‬‫تذك‬target‫الخاصة‬
‫ابط‬‫ر‬‫بال‬<a>‫َّة‬‫التشعبي‬ ‫ابط‬‫و‬‫الر‬ ‫ة‬‫ر‬‫فق‬ ‫(انظر‬Links.)
‫الوسميف‬ ‫أف‬ ‫حيف‬ ‫في‬<frameset>‫و‬<frame>‫مف‬ ‫مجموعة‬ ‫تضـ‬ ‫أـ‬ ‫صفحة‬ ‫إلنشاء‬ ‫يستخدماف‬
‫الصفحات‬‫فقط‬‫لغة‬ ‫فإف‬ ‫اتيا‬‫ر‬‫إطا‬ ‫في‬HTML‫الوسـ‬ ‫توفر‬<iframe>‫في‬ ‫ويب‬ ‫صفحة‬ ‫لتضميف‬

72. ٕٚ
‫الوسـ‬ ‫يستخدـ‬ ‫و‬ ,‫الصفحة‬ ‫محتوى‬ ‫بقية‬ ‫مع‬ ‫متناسؽ‬ ‫بشكؿ‬ ‫ى‬‫أخر‬ ‫صفحة‬<iframe>‫بالصيغة‬
:‫التالية‬
<iframe src="URL"></iframe>
َّ‫أف‬ ‫حيث‬URL‫ى‬‫الصفحة‬ ‫مسار‬ ‫و‬‫يؽ‬‫ر‬‫ط‬ ‫عف‬ ‫اإلطار‬ ‫حجـ‬ ‫ضبط‬ ‫يمكف‬ ‫و‬ ,‫تضمينيا‬ ‫سيتـ‬ ‫التي‬
‫اصفتيف‬‫و‬‫ال‬height‫و‬width.‫المئوية‬ ‫بالنسبة‬ ‫أو‬ ‫بالبكسؿ‬
‫آخر‬‫ما‬ً‫ال‬‫مستقب‬ ‫ستمغى‬ ‫ات‬‫ر‬‫اإلطا‬ ّ‫أف‬ ‫كما‬ ,‫ات‬‫ر‬‫اإلطا‬ ‫تدعـ‬ ‫ّل‬ ‫مستعرضات‬ ‫ىناؾ‬ ‫أف‬ ‫ىنا‬ ‫ه‬‫ر‬‫ذك‬ ‫يجب‬
‫أف‬ ‫مف‬ ‫غـ‬‫الر‬ ‫عمى‬ ,‫المغة‬ ‫مف‬‫بعض‬‫ك‬ ‫يخ‬‫ر‬‫تا‬ ‫إلى‬ ‫تدعميا‬ ‫الت‬‫ز‬ ‫ما‬ ‫المستعرضات‬‫األسطر‬ ‫ىذه‬ ‫تابة‬.
‫الـ‬ ‫عناصر‬Meta
‫بيف‬ ‫الصفحة‬ ‫أس‬‫ر‬ ‫منطقة‬ ‫في‬ ‫تضاؼ‬ ‫ئية‬‫ر‬‫م‬ ‫غير‬ ‫عناصر‬ ‫ىناؾ‬ َّ‫أف‬ ‫الفصؿ‬ ‫ىذا‬ ‫بداية‬ ‫في‬ ‫ذكرت‬
‫وسمي‬<head>‫و‬</head>‫عرضيا‬ ‫و‬ ‫صفحتؾ‬ ‫تصنيؼ‬ ‫أجؿ‬ ‫مف‬ ‫البحث‬ ‫محركات‬ ‫تستخدميا‬
‫ػ‬‫ل‬‫ا‬ ‫عناصر‬ ‫ىي‬ ‫العناصر‬ ‫ىذه‬ ‫و‬ ,‫البحث‬ ‫نتائج‬ ‫ضمف‬meta‫بمك‬ ‫األىمية‬ ‫فمف‬ ‫بالطبع‬ ‫و‬ ,‫جعؿ‬ ‫اف‬
‫إثر‬ ‫القادميف‬ ‫موقعؾ‬ ‫ار‬‫و‬‫ز‬ ‫معظـ‬ ‫تخسر‬ ‫ّل‬ ‫كي‬ ‫صحيح‬ ‫بشكؿ‬ ‫صفحتؾ‬ ‫ؼ‬ّ‫تصن‬ ‫البحث‬ ‫محركات‬
.‫البحث‬ ‫محركات‬ ‫أحد‬ ‫عمى‬ ‫ما‬ ‫بحث‬ ‫عممية‬
‫ػ‬‫ل‬‫ا‬ ‫عناصر‬ ‫تحقيؽ‬ ‫يتـ‬meta‫الوسـ‬ ‫خالؿ‬ ‫مف‬meta‫اسـ‬ ‫ير‬‫ر‬‫بتم‬ ‫و‬name‫محتوى‬ ‫و‬content
‫ػ‬‫ل‬‫ا‬ ‫لعنصر‬meta‫ي‬‫عنصر‬ ‫أىـ‬ َّ‫لعؿ‬ ‫و‬ ,‫لو‬ ‫اصفتيف‬‫و‬‫ك‬meta‫ىما‬ ‫ويب‬ ‫صفحة‬ ‫أي‬ ‫في‬‫اف‬‫ر‬‫العنص‬
‫اّلسميف‬ ‫يحمالف‬ ‫المذاف‬keywords‫و‬description‫و‬ ,‫المذاف‬:‫كمايمي‬ ‫يستخدماف‬
<html>
<head>
<meta name="keywords" content="xhtml website test
meta head"/>
<meta name="description" content="this page
demonstrates how to use meta elements"/>

73. ٖٚ
</head>
<body>‫ٕ٘ب‬ ْٛ‫س١ى‬ ً‫ب‬َّ١ٍ‫فؼ‬ ٟ‫إٌٙبئ‬ ‫اٌظفحخ‬ ٜٛ‫ِحز‬</body>
</html>
‫ػ‬‫ل‬‫ا‬ ‫عنصر‬ ‫يعرض‬ ‫حيث‬Meta‫اّلسـ‬ ‫ذو‬Keywords‫تظف‬ ‫التي‬ ‫المفتاحية‬ ‫الكممات‬ ‫مف‬ ‫مجموعة‬
‫ػ‬‫ل‬‫ا‬ ‫عنصر‬ ‫أما‬ ,‫صفحتؾ‬ ‫في‬ ‫الموجودة‬ ‫و‬ ‫المستعرض‬ ‫ضمف‬ ‫أحدىا‬ ‫عف‬ ‫سيبحثوف‬ ‫المستخدميف‬ ‫أف‬
Meta‫ذو‬‫اّلسـ‬Description.‫صفحتؾ‬ ‫تقدمو‬ ‫الذي‬ ‫المحتوى‬ ‫عف‬ ً‫ا‬‫ر‬‫مختص‬ ً‫ا‬‫وصف‬ ‫فيحوي‬
‫ػ‬‫ل‬‫ا‬ ‫عناصر‬ ‫محتوى‬ ‫تشاىد‬ ‫أف‬ ‫تتوقع‬ ‫ّل‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫الصفحة‬ ‫ىذه‬ ‫عرض‬ ‫عند‬ ‫بالطبع‬Meta
ّ‫فميم‬ ً‫ا‬‫ر‬‫ظاى‬‫بيانات‬ ‫تقديـ‬ ‫ىو‬ ‫قمنا‬ ‫كما‬ ‫العناصر‬ ‫ىذه‬ ‫ة‬.‫صفحتؾ‬ ‫ضمف‬ ‫الموجودة‬ ‫البيانات‬ ‫عف‬
‫ػ‬‫ل‬‫ا‬ ‫عناصر‬ ‫عف‬ ‫حديثنا‬ ‫بانتياء‬ ‫و‬Meta‫نكوف‬‫قد‬‫أنيينا‬-‫اهلل‬ ‫بفضؿ‬-‫لغة‬ ‫مناقشة‬HTML‫بأغمب‬
‫وسوـ‬ ‫اض‬‫ر‬‫استع‬ ‫التالية‬ ‫الصفحات‬ ‫في‬ ‫سنتابع‬ ‫و‬ ,‫وسوميا‬HTML‫باسـ‬ ‫تعرؼ‬ ‫التي‬ ‫و‬ ‫َّة‬‫ي‬‫ر‬‫العص‬
HTML5‫سنستعرض‬ ‫ذلؾ‬ ‫قبؿ‬ ‫لكف‬ ‫و‬ ,‫لغة‬HTML‫ػ‬‫ب‬ ‫عرؼ‬ُ‫ي‬ ‫ما‬ ‫أو‬ ‫َّعة‬‫الموس‬XHTML,‫اآلف‬ ‫ا‬َّ‫أم‬
‫ن‬ ‫أف‬ ‫ى‬‫فأر‬‫بوسوـ‬ ً‫ّل‬‫و‬‫جد‬ ‫عرض‬HTMLً‫ا‬‫يع‬‫ر‬‫س‬ ً‫ا‬‫مرجع‬ ‫ليكوف‬ ‫َّة‬‫التقميدي‬‫الحاجة‬ ‫عند‬.

74. ٚٗ
‫وسوم‬ ‫دليل‬HTML
‫الوسم‬‫الشرح‬
<!-- … -->‫تعميؽ‬
<!DOCTYPE>‫عرض‬ ‫عند‬ ‫عنو‬ ‫الحديث‬ ‫(سيتـ‬ ‫المستند‬ ‫ع‬‫نو‬ ‫لتحديد‬XHTML)
<a>‫تشعبي‬ ‫ابط‬‫ر‬
<abbr>‫مركب‬ ‫ي‬‫إنجميز‬ ‫لمصطمح‬ ‫اختصار‬
<acronym>‫لمصطمح‬ ‫اختصار‬‫ي‬‫إنجميز‬
<address>‫الصفحة‬ ‫بمالؾ‬ ‫اتصاؿ‬ ‫معمومات‬ ‫إضافة‬
<applet>‫تطبيؽ‬ ‫تضميف‬Applet‫الصفحة‬ ‫ضمف‬
<area />‫َّة‬‫ي‬‫ر‬‫الصو‬ ‫يطة‬‫ر‬‫الخ‬ ‫ضمف‬ ‫منطقة‬ ‫يؼ‬‫ر‬‫تع‬
<b>‫يض‬‫ر‬‫ع‬ ‫نص‬
<base />‫ابط‬‫و‬‫الر‬ ‫ات‬‫ر‬‫لمسا‬ ‫اضية‬‫ر‬‫افت‬ ‫بادئة‬ ‫يؼ‬‫ر‬‫تع‬
<basefont />‫ع‬‫نو‬ ‫يؼ‬‫ر‬‫تع‬/‫لوف‬/‫لمصفحة‬ ‫لنصوص‬ ‫اضي‬‫ر‬‫افت‬ ‫خط‬ ‫حجـ‬
<bdo>‫النص‬ ‫اتجاه‬ ‫يؼ‬‫ر‬‫تع‬
<big>‫كبير‬ ‫نص‬‫الحجـ‬
<blockqoute>‫طويؿ‬ ‫اقتباس‬
<body>‫الصفحة‬ ‫جسد‬
<br />‫جديد‬ ‫سطر‬
<button>‫إرساؿ‬ ‫زر‬
<caption>‫الجدوؿ‬ ‫اف‬‫و‬‫عن‬
<center>‫المحتوى‬ ‫لتوسيط‬
<cite>‫اقتباس‬‫متوسط‬
<code>‫برمجية‬ ‫ة‬‫ر‬‫شيف‬
<col />‫ألعمدة‬ ‫مشتركة‬ ‫اصفات‬‫و‬ ‫يؼ‬‫ر‬‫تع‬‫الجدوؿ‬
<colgroup>‫عمييا‬ ‫مشتركة‬ ‫اصفات‬‫و‬ ‫لتطبيؽ‬ ‫الجدوؿ‬ ‫أعمدة‬ ‫مف‬ ‫مجموعة‬ ‫يؼ‬‫ر‬‫تع‬

75. ٚ٘
<dd>‫المصطمحات‬ ‫قائمة‬ ‫ضمف‬ ‫لمصطمح‬ ‫وصؼ‬
<del>‫مشطوب‬ ‫نص‬
<dfn>‫المصطمحات‬ ‫قائمة‬ ‫ضمف‬ ‫مصطمح‬ ‫يؼ‬‫ر‬‫تع‬
<dir>‫مجمدات‬ ‫قائمة‬
<div>‫المستند‬ ‫مف‬ ‫قسـ‬
<dl>‫المصطمحات‬ ‫قائمة‬
<dt>‫عنصر‬‫بقائمة‬ ‫خاص‬ ‫قائمة‬‫المصطمحات‬
<em>‫عميو‬ ‫مشدد‬ ‫نص‬
<fieldset>‫نموذج‬ ‫في‬ ‫حقوؿ‬ ‫مجموعة‬
<font>‫حجـ‬ ‫يؼ‬‫ر‬‫تع‬/‫ع‬‫نو‬/‫معيف‬ ‫لنص‬ ‫الخط‬ ‫لوف‬
<form>‫نموذج‬
<frame />‫إطار‬
<frameset>‫ات‬‫ر‬‫إطا‬ ‫مجموعة‬
<h1>‫إلى‬<h6>‫عناصر‬‫العناويف‬
<head>‫المستند‬ ‫أس‬‫ر‬
<hr />‫أفقي‬ ‫خط‬
<html>‫عنصر‬‫المستند‬ ‫بداية‬
<i>‫مائؿ‬
<iframe>‫إطار‬‫الصفحة‬ ‫عناصر‬ ‫مف‬ ‫كعنصر‬
<img />‫ة‬‫ر‬‫صو‬
<input />‫إدخاؿ‬ ‫عنصر‬
<ins>‫خط‬ ‫تحتو‬ ‫نص‬
<isindex>‫بالصفحة‬ ‫يتعمؽ‬ ‫لمبحث‬ ‫قابؿ‬ ‫فيرس‬ ‫إنشاء‬
<kbd>‫برمجي‬ ‫حاسوبي‬ ‫بخط‬ ‫نص‬
<label>‫ما‬ ‫لعنصر‬ ‫اف‬‫و‬‫عن‬

76. ٚٙ
<legeng>‫اإلدخاؿ‬ ‫عناصر‬ ‫لمجموعة‬ ‫اف‬‫و‬‫عن‬<fieldset>
<li>‫القائمة‬ ‫عنصر‬
<link />‫آخر‬ ‫بمستند‬ ‫المستند‬ ‫بط‬‫ر‬(‫معنا‬ ‫سيمر‬)‫الثاني‬ ‫الفصؿ‬ ‫في‬ ‫استعماّلتو‬ ‫أحد‬
<map>‫يطة‬‫ر‬‫خ‬ ‫يؼ‬‫ر‬‫تع‬‫ية‬‫ر‬‫صو‬
<menu>‫قائمة‬ ‫يؼ‬‫ر‬‫تع‬
<meta />‫المستند‬ ‫محتوى‬ ‫َّة‬‫ماىي‬ ‫عف‬ ‫يفية‬‫ر‬‫تع‬ ‫بيانات‬
<noframes>‫إلنشاء‬‫اإلطار‬ ‫لمحتوى‬ ‫بديؿ‬‫ات‬‫ر‬‫اإلطا‬ ‫تدعـ‬ ‫ّل‬ ‫التي‬ ‫المستعرضات‬ ‫في‬
<noscript>‫بت‬‫ر‬‫السك‬ ‫لمحتوى‬ ‫بديؿ‬ ‫إلنشار‬‫بت‬‫ر‬‫السك‬ ‫تدعـ‬ ‫ّل‬ ‫التي‬ ‫المستعرضات‬ ‫في‬
<object>‫برمجي‬ ‫كائف‬ ‫تضميف‬
<ol>‫تبة‬‫ر‬‫م‬ ‫قائمة‬
<optgroup>‫المنسدلة‬ ‫القائمة‬ ‫ات‬‫ر‬‫خيا‬ ‫ضمف‬ ً‫ا‬‫منطقي‬ ‫تبطة‬‫ر‬‫الم‬ ‫ات‬‫ر‬‫الخيا‬ ‫مف‬ ‫مجموعة‬
<option>‫قائمة‬ ‫في‬ ‫خيار‬‫منسدلة‬
<p>‫نص‬
<param />‫البرمجي‬ ‫لمكائف‬ ‫وسيط‬
<pre>ً‫ا‬‫مسبق‬ ‫منسؽ‬ ‫نص‬
<q>‫قصير‬ ‫اقتباس‬
<s>‫مشطوب‬ ‫نص‬
<samp>‫برمجية‬ ‫ة‬‫ر‬‫لشيف‬ ‫نموذج‬
<script>‫بت‬‫ر‬‫سك‬( ‫برمجي‬Java Script‫أو‬jQuery)ً‫ا‬‫غالب‬
<select>‫منسدلة‬ ‫قائمة‬
<small>‫صغير‬ ‫نص‬‫الحجـ‬
<span>‫قسـ‬ ‫يؼ‬‫ر‬‫تع‬‫ي‬‫سطر‬‫المستند‬ ‫مف‬
<strike>‫مشطوب‬ ‫نص‬
<strong>‫يض‬‫ر‬‫ع‬ ‫نص‬
<style>)‫بالتفصيؿ‬ ‫القادـ‬ ‫الفصؿ‬ ‫في‬ ‫(يناقش‬ ‫أنماط‬ ‫قة‬‫ر‬‫و‬ ‫يؼ‬‫ر‬‫تع‬

77. ٚٚ
<sub>‫سفمي‬ ‫نص‬
<sup>‫عموي‬ ‫نص‬
<table>‫جدوؿ‬
<tbody>‫الجدوؿ‬ ‫جسد‬
<td>‫جدوؿ‬ ‫بيانات‬ ‫خمية‬
<textarea>‫األسطر‬ ‫متعدد‬ ‫نص‬ ‫إدخاؿ‬ ‫عنصر‬
<tfoot>‫الجدوؿ‬ ‫ذيؿ‬
<th>‫اف‬‫و‬‫عن‬ ‫خمية‬‫أس‬‫ر‬‫الجدوؿ‬
<thead>‫الجدوؿ‬ ‫أس‬‫ر‬
<title>‫المستند‬ ‫اف‬‫و‬‫عن‬
<tr>‫الجدوؿ‬ ‫سطر‬
<tt>‫نص‬teletype
<u>‫خط‬ ‫تحتو‬ ‫نص‬
<ul>‫تبة‬‫ر‬‫م‬ ‫غير‬ ‫قائمة‬
<var>‫النص‬ ‫مف‬ ‫متغير‬ ‫ء‬‫جز‬
<xmp>‫مسبؽ‬ ‫بتنسيؽ‬ ‫نص‬
‫الجدول‬4‫وسوم‬ ‫دليل‬ :HTML

78. ٚٛ
XHTML
َّ‫إف‬XHTML‫ػ‬‫ل‬ ‫اختصار‬ ‫ىي‬eXtensible HTML‫تعني‬ ‫التي‬ ‫و‬HTML‫(البعض‬ ‫ُّع‬‫لمتوس‬ ‫القابمة‬
‫يدعوىا‬HTML)‫َّعة‬‫الموس‬‫عف‬ ‫تختمؼ‬ ‫ّل‬ ‫ىي‬ ‫و‬ ,HTML‫الوسوـ‬ ‫ناحية‬ ‫مف‬ ‫َّة‬‫التقميدي‬‫مف‬ ‫ّل‬ ‫و‬
‫اصفات‬‫و‬‫ال‬ ‫ناحية‬‫لكف‬ ‫و‬ ,‫ببساطة‬‫ىا‬‫اعتبار‬ ‫يمكف‬‫معايير‬‫مستندات‬ ‫لكتابة‬ ً‫ة‬‫ام‬‫ر‬‫ص‬ ‫أكثر‬HTML
‫ب‬‫افؽ‬‫و‬‫يت‬ ‫شكؿ‬‫لغة‬ ‫اعد‬‫و‬‫ق‬ ‫و‬XML(eXtensible Markup Language‫يعطي‬ ‫ما‬ ‫ىذا‬ ‫و‬ ,)
‫الويب‬ ‫مستعرضات‬ ‫مع‬ ‫أكبر‬ ‫َّة‬‫افقي‬‫و‬‫ت‬ ‫صفحاتنا‬,‫يدؿ‬ ‫كما‬‫بمعايير‬ ‫اـ‬‫ز‬‫اّللت‬XHTML‫افية‬‫ر‬‫احت‬ ‫عمى‬
‫يد‬‫ر‬‫أ‬ ‫ّل‬ ‫بالطبع‬ ‫و‬ ,‫العمؿ‬ ‫في‬ ‫أكبر‬‫نا‬‫ر‬‫لتفكي‬-‫ويب‬ ‫ي‬‫ر‬ِّ‫كمطو‬-‫مستعرض‬ ‫في‬ ً‫ا‬‫ر‬‫محصو‬ ‫يبقى‬ ‫أف‬‫ال‬‫ويب‬
‫الخاص‬‫ب‬‫ف‬ ,‫الحاسوب‬‫منف‬ِّ‫ك‬‫ة‬‫ر‬‫الصغي‬ ‫ة‬‫ز‬‫باألجي‬ ‫أو‬ ‫َّة‬‫الذكي‬ ‫اتؼ‬‫و‬‫بالي‬ ‫الخاصة‬ ‫الويب‬ ‫مستعرضات‬ ‫في‬ ‫ر‬
‫و‬ ‫ى‬‫األخر‬‫لنس‬‫أؿ‬‫أ‬‫نفس‬‫نا‬‫صفح‬ ‫ستبدو‬ ‫ىؿ‬ :‫ا‬‫ت‬‫نا‬‫كما‬‫ن‬‫الويب؟‬ ‫مستعرضات‬ ‫كؿ‬ ‫عمى‬ ‫يد‬‫ر‬‫تحاوؿ‬ ‫ما‬ ‫ىذا‬ ,
XHTML‫عنو‬ ‫اإلجابة‬.
‫أف‬ ‫حيف‬ ‫ففي‬‫نت‬‫ر‬‫اّلنت‬ ‫شبكة‬‫تحوي‬‫الويب‬ ‫صفحات‬ ‫ات‬‫ر‬‫مميا‬َ‫ة‬َّ‫م‬َ‫ث‬‫ف‬‫مف‬ ‫ة‬‫ر‬‫كبي‬ ‫نسبة‬‫الصفحات‬ ‫ىذه‬
‫رديء‬ ‫بشكؿ‬ ‫مكتوبة‬-‫لألسؼ‬-:‫المثاؿ‬ ‫سبيؿ‬ ‫عمى‬ ‫مايمي‬ ‫يشبو‬
<hTml>
<heaD>
<title> ‫سد٠ئخ‬ HTML ‫طفحخ‬</title>
<BODY>
<h1>Bad HTML
<p>This is a paragraph
</boDy>
‫عمى‬ ‫ستعمؿ‬ ‫أعاله‬ ‫ة‬‫ر‬‫الشيف‬ ‫أف‬ ‫مع‬‫بعض‬‫المستعرض‬‫ات‬‫أنيا‬ ‫إّل‬‫لف‬ ‫باعتقادي‬ِّ‫تؤم‬‫ف‬‫أدنى‬‫فرصة‬
‫ألن‬ ‫بكتابتيا‬ ‫قاـ‬ ‫لمف‬ ‫عمؿ‬‫بكتابة‬ ‫فو‬‫ر‬‫مع‬ ‫أدنى‬ ‫تعكس‬ ‫ّل‬ ‫يا‬HTML‫و‬‫أف‬ ‫يمكف‬ ‫ما‬ ‫أفضؿ‬‫عنيا‬ ‫يقاؿ‬
‫ظيرت‬ ‫قد‬ ‫و‬ ,‫رديء‬ ‫بشكؿ‬ ‫مكتوبة‬ ‫أنيا‬XHTML‫م‬ ‫لمحد‬.‫أعاله‬ ‫كالصفحة‬ ‫صفحات‬ ‫انتشار‬ ‫ف‬

79. ٜٚ
‫اعد‬‫و‬‫ق‬XHTML
‫تتمخص‬XHTML‫أي‬ ‫كتابة‬ ‫حيف‬ ‫تطبيقيا‬ ‫يتـ‬ ْ‫إف‬ ‫ما‬ ‫التي‬ ‫البسيطة‬ ‫اعد‬‫و‬‫الق‬ ‫مف‬ ‫مجموعة‬ ‫في‬‫مستند‬
HTMLُ‫فسي‬َ‫ع‬ُّ‫د‬‫مستند‬ ‫المستند‬XHTML‫و‬ ,‫تمخيص‬ ‫أستطيع‬‫اعد‬‫و‬‫ق‬XHTML‫في‬‫مجموعة‬
‫التالية‬ ‫النصائح‬٘
:
َ‫تنس‬ ‫ّل‬.‫اإلغالؽ‬ ‫وسـ‬
‫ة‬‫ر‬‫صغي‬ ‫بأحرؼ‬ ‫صفحتؾ‬ ‫اصفات‬‫و‬ ‫و‬ ‫وسوـ‬ ‫اكتب‬Lower Case.
.‫الفتح‬ ‫وسوـ‬ ‫مع‬ ً‫ا‬‫ر‬‫متناظ‬ ‫اإلغالؽ‬ ‫وسوـ‬ ‫تيب‬‫ر‬‫ت‬ ‫يكوف‬ ‫أف‬ ِ‫اع‬‫ر‬
‫بيف‬ ‫اصفات‬‫و‬‫لم‬ ‫دة‬َ‫سن‬ُ‫الم‬ ‫القيـ‬ ‫ضع‬.‫اقتباس‬ ‫عالمات‬
‫وسوـ‬ ‫مف‬ ‫أي‬ ‫عف‬ ِ‫تستغف‬ ‫ّل‬<html>‫و‬<body>‫و‬<head>.
‫ضع‬‫المستند‬ ‫ع‬‫نو‬ ‫يؼ‬‫ر‬‫تع‬DOCTYPE.)‫التالية‬ ‫ة‬‫ر‬‫الفق‬ ‫في‬ ‫(سيعرض‬ ‫صفحتؾ‬ ‫بداية‬ ‫في‬
‫المستند‬ ‫ع‬‫نو‬ ‫تعريف‬<!DOCTYPE>
‫معايير‬ ‫تنص‬XHTML‫منيا‬ ‫سطر‬ ‫أوؿ‬ ‫في‬ ‫تحوي‬ ‫أف‬ ‫يجب‬ ‫الويب‬ ‫صفحات‬ ‫كؿ‬ ‫أف‬ ‫عمى‬‫عمى‬
‫يؼ‬‫ر‬‫التع‬ ‫سطر‬<!DOCTYPE>‫المستند‬ ‫ع‬‫نو‬ ‫يؼ‬‫ر‬‫تع‬ ‫يعني‬ ‫الذي‬ ‫و‬Document Type
Definition‫أو‬DTD‫ىذا‬ ‫تستخدـ‬ ‫الويب‬ ‫مستعرضات‬ ‫أف‬ ‫ذلؾ‬ ‫و‬ ,ً‫ا‬‫ر‬‫اختصا‬‫َّة‬‫كمرجعي‬ ‫السطر‬
‫َّة‬‫اعدي‬‫و‬‫ق‬‫لصيغة‬‫ال‬‫كتابة‬‫اع‬‫و‬‫ألن‬ ‫و‬‫الصفحة‬ ‫في‬ ‫الوسوـ‬‫إلى‬ ‫إضافة‬ ,‫استخداميا‬‫اصفة‬‫و‬‫ال‬xmlns
‫البداية‬ ‫بوسـ‬ ‫الخاصة‬<html>‫أسماء‬ ‫فضاء‬ ‫تصؼ‬ ‫التي‬ ‫و‬Name Space‫الصفحة‬.
‫ت‬‫عرض‬‫عنصر‬ ‫التالية‬ ‫ة‬‫ر‬‫الشيف‬‫صفحات‬ ‫أغمب‬ ‫في‬ ‫تصادفو‬ ‫الذي‬ ‫المستند‬ ‫ع‬‫نو‬ ‫يؼ‬‫ر‬‫تع‬XHTML‫و‬
‫صفحتؾ‬ ‫مف‬ ‫سطر‬ ‫كأوؿ‬ ‫تكتبو‬ ‫أف‬ ‫يجب‬ ‫الذي‬‫اصفة‬‫و‬‫لم‬ ً‫ة‬‫إضاف‬xmlns‫بيذا‬ ‫و‬ ,‫العاـ‬ ‫الشكؿ‬ ‫يصبح‬
‫لمستند‬XHTML:‫كمايمي‬
٘
.‫ممحوظات‬ ‫شكؿ‬ ‫عمى‬ ‫السابقة‬ ‫الصفحات‬ ‫في‬ ‫معنا‬ ‫مر‬ ‫قد‬ ‫كاف‬ ‫اعد‬‫و‬‫الق‬ ‫مف‬ ‫ه‬‫ر‬‫ذك‬ ‫سيتـ‬ ‫ما‬ ‫أغمب‬ َّ‫إف‬

80. ٛٓ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>‫ٕ٘ب‬ ‫اٌظفحخ‬ ‫سأط‬ ٜٛ‫ِحز‬</head>
<body>‫ٕ٘ب‬ ‫اٌظفحخ‬ ‫جسذ‬ ٜٛ‫ِحز‬</body>
</html>
‫ع‬‫النو‬ ‫يعتبر‬<!DOCTYPE>‫اع‬‫و‬‫أن‬ ‫أحد‬ ‫أعاله‬ ‫المعروض‬‫ع‬‫النو‬ ‫ى‬َّ‫يسم‬ ‫و‬ ‫المستند‬Transitional
.‫ى‬‫األخر‬ ‫اع‬‫و‬‫األن‬ ‫بيف‬ ‫و‬ ‫بينو‬ ‫اّلختالؼ‬ ‫تناقش‬ ‫التالية‬ ‫ة‬‫ر‬‫الفق‬ ‫و‬
:‫ممحوظة‬<!DOCTYPE>‫مف‬ ً‫ا‬‫وسم‬ ‫ليس‬‫المستند‬ ‫يؼ‬‫ر‬‫تع‬ ‫سطر‬ ‫ىو‬ ‫ما‬َّ‫إن‬ ‫و‬ ‫المغة‬ ‫وسوـ‬.
‫لممستند‬ ‫المختمفة‬ ‫اع‬‫و‬‫األن‬
‫في‬XHTML‫ىناؾ‬‫بعة‬‫ر‬‫أ‬‫اع‬‫و‬‫أن‬‫مختمفة‬‫لممستند‬:‫ىي‬ ‫اع‬‫و‬‫األن‬ ‫ىذه‬ ‫و‬
ٔ.XHTML 1.0 Strict:
‫وسوـ‬ ‫جميع‬ ‫ع‬‫النو‬ ‫ىذا‬ ‫يحوي‬HTML‫عدا‬‫الوسوـ‬<applet>‫و‬<basefont>‫و‬
<center>‫و‬<dir>‫و‬<font>‫و‬<iframe>‫و‬<isindex>‫و‬<menu>‫و‬
<noframes>‫و‬<s>‫و‬<strike>‫و‬<u>‫ات‬‫ر‬‫إطا‬ ‫باستخداـ‬ ‫ع‬‫النو‬ ‫ىذا‬ ‫يسمح‬ ‫ّل‬ ‫و‬ ,
<frameset>,‫يؼ‬‫ر‬‫تع‬ ‫سطر‬ ‫و‬‫الن‬ ‫ىذا‬ ‫مف‬ ‫المستند‬‫ىو‬ ‫ع‬‫و‬:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
ٕ.XHTML 1.0 Tansitional:
‫وسوـ‬ ‫جميع‬ ‫ع‬‫النو‬ ‫ىذا‬ ‫يحوي‬HTML‫ات‬‫ر‬‫إطا‬ ‫باستخداـ‬ ‫كسابقو‬ ‫يسمح‬ ‫ّل‬ ‫و‬َّ‫لكن‬ ‫و‬
<frameset>‫ع‬‫النو‬ ‫ىذا‬ ‫مف‬ ‫المستند‬ ‫يؼ‬‫ر‬‫تع‬ ‫سطر‬ ‫و‬ ,:‫ىو‬

81. ٛٔ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
ٖ.XHTML 1.0 Frameset:
‫وسوـ‬ ‫جميع‬ ‫يحوي‬HTML‫ىذا‬ ‫مف‬ ‫المستند‬ ‫يؼ‬‫ر‬‫تع‬ ‫سطر‬ ‫و‬ ,‫ات‬‫ر‬‫اإلطا‬ ‫باستخداـ‬ ‫يسمح‬ ‫و‬
:‫ىو‬ ‫ع‬‫النو‬
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
ٗ.XHTML 1.1:
‫ع‬‫النو‬ ‫يماثؿ‬Strictّ‫لكن‬ ‫و‬‫(وحدات‬ ‫خاصة‬ ‫َّة‬‫برمجي‬ ‫وحدات‬ ‫إضافات‬ ‫لؾ‬ ‫يتيح‬ ‫و‬Ruby)ً‫ال‬‫مث‬
‫المذكور‬ ‫عكس‬ ‫عمى‬:‫ىو‬ ‫ع‬‫النو‬ ‫ىذا‬ ‫مف‬ ‫المستند‬ ‫يؼ‬‫ر‬‫تع‬ ‫سطر‬ ‫و‬ ,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
‫صفحات‬ ‫صحة‬ ‫من‬ ‫التحقق‬XHTML
‫ننيي‬‫عف‬ ‫الحديث‬XHTML‫بالتذكير‬)‫ه‬‫ر‬‫غي‬ ‫(و‬ ‫الويب‬ ‫ر‬ِّ‫مطو‬ ‫بإمكاف‬ ‫أنو‬‫يتحقؽ‬ ‫أف‬‫مطابقة‬ ‫مف‬
‫لمعايير‬ ‫ما‬ ‫ويب‬ ‫صفحة‬XHTML:‫ابط‬‫ر‬‫ال‬ ‫عبر‬
http://www.w3schools.com/xhtml/default.asp
:‫ممحوظة‬‫لمعايير‬ ‫الصفحة‬ ‫مطابقة‬ ‫مف‬ ‫التحقؽ‬ ‫ابط‬‫ر‬ ‫وضع‬ ‫يعكس‬XHTML‫اتؾ‬‫ر‬‫بقد‬ ‫الثقة‬ ‫مف‬ ً‫ا‬‫نوع‬ ‫صفحتؾ‬ ‫في‬
.‫باعتقادي‬ ‫البرمجية‬

82. ٕٛ
HTML5
‫لغة‬ ‫ظيرت‬HTML‫الصفحات‬ ‫في‬ ‫شرحناىا‬ ‫التي‬( ‫السابقة‬‫ب‬ ‫التقنية‬ ‫األوساط‬ ‫في‬ ‫المعروفة‬‫اإلصدار‬
HTML 4.01‫عاـ‬ ‫في‬ )ٜٜٜٔ‫ـ‬,‫عمى‬ ‫حصمت‬ ‫ة‬‫ر‬‫كثي‬ ‫ات‬‫ر‬‫تطو‬ ‫فإف‬ ‫الحقيقة‬ ‫في‬ ‫و‬‫مفيوـ‬‫منذ‬ ‫الويب‬
‫ىذا‬ ‫يومنا‬ ‫إلى‬ ‫الحيف‬ ‫ذلؾ‬,‫ػ‬‫ل‬‫با‬ ‫يعرؼ‬ ‫بما‬ ‫نسمع‬ ‫أصبحنا‬ ‫و‬Web 2.0‫أف‬ ‫النادر‬ ‫مف‬ ‫أصبح‬ ‫كما‬ ,
‫خد‬ ‫يقدـ‬ ‫ّل‬ )‫الجيدة‬ ‫اقع‬‫و‬‫الم‬ ‫(أعني‬ ‫ويب‬ ‫موقع‬ ‫نجد‬,‫ذلؾ‬ ‫غير‬ ‫و‬ ‫الصوت‬ ‫و‬ ‫الفيديو‬ ‫تشغيؿ‬ ‫مثؿ‬ ‫مات‬
‫تطوير‬ ‫استوجب‬ ‫ما‬ ‫ىذا‬ ‫و‬‫مف‬ ‫جديد‬ ‫إصدار‬‫لغة‬HTML‫ب‬‫الوسوـ‬ ‫مف‬ ‫جديدة‬ ‫مجموعة‬ ‫إضافة‬‫و‬
‫القديمة‬ ‫المغة‬ ‫إلى‬ ‫اصفات‬‫و‬‫ال‬‫باّلسـ‬ ‫الجديد‬ ‫اإلصدار‬ ‫ليظير‬HTML 5.
‫بمجيء‬ ‫جاءت‬ ‫التي‬ ‫الجديدة‬ ‫ات‬‫ز‬‫المي‬ ‫مف‬ ‫و‬HTML 5‫ظيور‬‫و‬ ‫الفيديو‬ ‫لعرض‬ ‫خاصة‬ ‫وسوـ‬
‫األخبار‬ ‫أو‬ ‫المقاّلت‬ ‫لكتابة‬ ‫خاصة‬ ‫وسوـ‬ ‫و‬ ‫الصوت‬‫لمرسـ‬ ‫خاصة‬ ‫وسوـ‬ ‫و‬‫إضافة‬ ‫إلى‬ ً‫ة‬‫إضاف‬
‫الخاصة‬ ‫اإلدخاؿ‬ ‫عناصر‬ ‫مف‬ ‫جديدة‬ ‫مجموعة‬‫بالنماذج‬‫ذلؾ‬ ‫غير‬ ‫و‬‫ات‬‫ر‬‫الفق‬ ‫في‬ ‫سيعرض‬ ‫مما‬
.‫القادمة‬
‫لـ‬ ‫الداعمة‬ ‫الويب‬ ‫مستعرضات‬HTML 5
‫ألف‬HTML 5‫من‬ ‫ظيرت‬‫ذ‬‫ة‬‫ر‬‫قصي‬ ‫ة‬‫ر‬‫فت‬‫عاـ‬ ‫ىا‬‫معايير‬ ‫وضع‬ ‫عمى‬ ‫العمؿ‬ ‫(بدأ‬ ً‫ا‬‫نسبي‬ٕٓٓٙ‫فإف‬ )
‫لألسؼ‬ ‫تدعميا‬ ‫ّل‬ ‫القديمة‬ ‫الويب‬ ‫مستعرضات‬ ‫معظـ‬,‫بكؿ‬ ‫ستدعميا‬ ‫الجديدة‬ ‫المستعرضات‬ ‫لكف‬ ‫و‬
‫تأكيد‬,‫ػ‬‫ف‬HTML 5-‫أيي‬‫ر‬‫ب‬-‫ستكوف‬‫الويب‬ ‫صفحات‬ ‫بناء‬ ‫لغة‬‫ية‬‫ر‬‫المعيا‬‫يب‬‫ر‬‫الق‬ ‫المستقبؿ‬ ‫في‬‫و‬
‫ليذا‬‫فقد‬ً‫ال‬‫فع‬ ‫بدعيما‬ ‫المستعرضات‬ ‫بعض‬ ‫بدأت‬:‫مستعرضات‬ ‫مف‬ ‫ة‬‫ر‬‫األخي‬ ‫ات‬‫ر‬‫اإلصدا‬ ‫مثؿ‬
Google Chrome‫و‬Firefox‫و‬Opera‫و‬Internet Explorer‫و‬Safari.ٙ
ٙ
‫أف‬ ‫تعتقد‬ ‫ّل‬‫دعـ‬‫لجعؿ‬ ٍ‫كاؼ‬ ‫المستعرضات‬ ‫ىذه‬HTML 5‫ى‬‫األخر‬ ‫الويب‬ ‫مستعرضات‬ ‫ات‬‫ر‬‫عش‬ ‫فيناؾ‬ ‫الصفحات‬ ‫لتطوير‬ ‫الرسمية‬ ‫المغة‬
.‫اإلجمالييف‬ ‫نت‬‫ر‬‫اّلنت‬ ‫مستخدمي‬ ‫مف‬ ‫تفعة‬‫ر‬‫م‬ ‫نسبة‬ ‫تستخدميا‬ ‫التي‬ ‫و‬

83. ٖٛ
‫الفيديو‬ ‫عنصر‬Video
‫تقدـ‬HTML 5‫ل‬ ‫بسيطة‬ ‫آلية‬‫الجديد‬ ‫العنصر‬ ‫باستخداـ‬ ‫الويب‬ ‫صفحة‬ ‫ضمف‬ ‫الفيديو‬ ‫ممفات‬ ‫عرض‬
<video>‫تفاع‬‫ر‬‫اّل‬ ‫اصفتي‬‫و‬ ‫إلى‬ ‫المناسبة‬ ‫القيـ‬ ‫بإسناد‬ ‫ذلؾ‬ ‫يتـ‬ ‫و‬ ,height‫العرض‬ ‫و‬width
‫اّلبف‬ ‫العنصر‬ ‫عبر‬ ‫الفيديو‬ ‫ممؼ‬ ‫مسار‬ ‫ير‬‫ر‬‫تم‬ َّ‫ثـ‬ ‫مف‬ ‫و‬ ‫بو‬ ‫الخاصة‬<source>‫اصفتو‬‫و‬‫ل‬ ‫كقيمة‬
src‫الفيديو‬ ‫ممؼ‬ ‫ع‬‫نو‬ ‫ير‬‫ر‬‫تم‬ ‫و‬‫اصفة‬‫و‬‫ال‬ ‫عبر‬type:‫المثاؿ‬ ‫سبيؿ‬ ‫عمى‬ ‫التالية‬ ‫ة‬‫ر‬‫الشيف‬ ‫لنشاىد‬ ,
<html>
<head>
<title>
ٛ٠‫اٌف١ذ‬ ‫ػشع‬ ‫ػٕظش‬ ٍٝ‫ػ‬ ‫ِثبي‬
</title>
</head>
<body>
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
!‫انفيذيى‬ ‫عرض‬ ‫عىصر‬ ‫يذعم‬ ‫ال‬ ‫انحاني‬ ‫انمضرعرض‬ ,‫نألصف‬
</video>
</body>
</html>
‫النياية‬ ‫و‬ ‫البداية‬ ‫وسمي‬ ‫بيف‬ ‫(الموجود‬ ‫النصي‬ ‫المحتوى‬ ‫يظير‬‫لمعنصر‬<video>‫في‬ )
‫تدعـ‬ ‫ّل‬ ‫التي‬ ‫المستعرضات‬HTML 5‫المستعرضات‬ ‫في‬ ‫ا‬َّ‫أم‬ ,‫ليا‬ ‫الداعمة‬:‫كمايمي‬ ‫صفحتنا‬ ‫فستبدو‬

84. ٛٗ
‫الشكل‬31:‫مستعرض‬ ‫في‬ ‫يبدو‬ ‫كما‬ ‫الجديد‬ ‫الفيديو‬ ‫عرض‬ ‫عنصر‬‫جوجل‬‫كروم‬
:‫ممحوظة‬‫العنصر‬ ‫فإف‬ ‫المحظة‬ ‫ىذه‬ ‫إلى‬<video>‫الصيغ‬ ‫ىي‬ ‫و‬ ‫الفيديو‬ ‫صيغ‬ ‫مف‬ ‫اع‬‫و‬‫أن‬ ‫ثالثة‬ ‫تشغيؿ‬ ‫يدعـ‬
MPEG4‫و‬Ogg‫و‬WebM.
‫العنصر‬ ‫اصفات‬‫و‬ ‫التالي‬ ‫الجدوؿ‬ ‫يعرض‬<video>:
‫اصفة‬‫و‬‫ال‬‫الممكنة‬ ‫القيم‬‫الشرح‬
audiomuted‫كتـ‬‫الصوت‬
autoplayautoplay‫الفيديو‬ ‫لممؼ‬ ‫التمقائي‬ ‫التشغيؿ‬
controlscontrols‫الفيديو‬ ‫مشغؿ‬ ‫في‬ ‫ات‬‫و‬‫األد‬ ‫يط‬‫ر‬‫ش‬ ‫عرض‬
height‫بالبكسؿ‬ ‫قيمة‬‫الفيديو‬ ‫مشغؿ‬ ‫تفاع‬‫ر‬‫ا‬
looploop‫انتيائو‬ ‫عند‬ ‫تمقائي‬ ‫بشكؿ‬ ‫الفيديو‬ ‫تشغيؿ‬ ‫إعادة‬
poster‫تشعبي‬ ‫ابط‬‫ر‬‫مقطع‬ ‫عف‬ ‫تعبر‬ ‫ة‬‫ر‬‫لصو‬ ‫تشعبي‬ ‫ابط‬‫ر‬‫قبؿ‬ ‫تظير‬ ‫و‬ ‫الفيديو‬
‫بتشغيمو‬ ‫المستخدـ‬ ‫يقوـ‬ ‫أف‬
src‫تشعبي‬ ‫ابط‬‫ر‬‫الفيديو‬ ‫ممؼ‬ ‫ابط‬‫ر‬
width‫بالبكسؿ‬ ‫قيمة‬‫الفيديو‬ ‫مشغؿ‬ ‫عرض‬
‫الجدول‬5‫العنصر‬ ‫اصفات‬‫و‬ :<video>

85. ٛ٘
‫عن‬‫الصوت‬ ‫صر‬Audio
‫تتيح‬HTML 5‫الصوت‬ ‫ممفات‬ ‫عرض‬‫شديدة‬ ‫ببساطة‬ ‫الويب‬ ‫صفحة‬ ‫ضمف‬‫خالؿ‬ ‫مف‬‫العنصر‬
<audio>:‫كمايمي‬ ‫الفيديو‬ ‫عرض‬ ‫لعنصر‬ ‫مشابية‬ ‫يقة‬‫ر‬‫بط‬ ‫يستخدـ‬ ‫الذي‬ ‫و‬
<html>
<head>
<title>‫اٌظٛد‬ ‫ػشع‬ ‫ػٕظش‬ ٍٝ‫ػ‬ ‫ِثبي‬</title>
</head>
<body>
<audio controls="controls">
<source src="song.mp3" type="audio/mp3" />
‫انمضرعرض‬ ,‫نألصف‬!‫انصىخ‬ ‫عرض‬ ‫عىصر‬ ‫يذعم‬ ‫ال‬ ‫انحاني‬
</audio>
</body>
</html>
:‫كمايمي‬ ‫العنصر‬ ‫ىذا‬ ‫تدعـ‬ ‫التي‬ ‫المستعرضات‬ ‫في‬ ‫المثاؿ‬ ‫ىذا‬ ‫يبدو‬
‫الشكل‬32:‫الجديد‬ ‫الصوت‬ ‫عرض‬ ‫عنصر‬‫كروم‬ ‫جوجل‬ ‫مستعرض‬ ‫في‬ ‫يبدو‬ ‫كما‬

86. ٛٙ
‫و‬ ‫البداية‬ ‫وسمي‬ ‫بيف‬ ‫المذكور‬ ‫النص‬ ‫فسيظير‬ ‫العنصر‬ ‫ىذا‬ ‫تدعـ‬ ‫ّل‬ ‫التي‬ ‫المستعرضات‬ ‫في‬ ‫ا‬َّ‫أم‬
‫لمعنصر‬ ‫النياية‬<audio>.‫اّلعتذار‬ ‫رسالة‬ ‫يحوي‬ ‫الذي‬ ‫و‬
‫العنصر‬ ‫فإف‬ ‫المحظة‬ ‫ىذه‬ ‫إلى‬ :‫ممحوظة‬<audio>‫ىي‬ ‫الصوت‬ ‫لممفات‬ ‫صيغ‬ ‫ثالث‬ ‫تشغيؿ‬ ‫يدعـ‬MP3‫و‬Ogg‫و‬
Wav.
‫ا‬ ‫اصفات‬‫و‬ ‫التالي‬ ‫الجدوؿ‬ ‫يعرض‬‫لعنصر‬<audio>:
‫اصفة‬‫و‬‫ال‬‫الممكنة‬ ‫القيم‬‫الشرح‬
autoplayautoplay‫الصوت‬ ‫لممؼ‬ ‫التمقائي‬ ‫التشغيؿ‬
controlscontrols‫مشغؿ‬ ‫في‬ ‫ات‬‫و‬‫األد‬ ‫يط‬‫ر‬‫ش‬ ‫عرض‬‫الصوت‬
looploop‫تشغيؿ‬ ‫إعادة‬‫ممؼ‬‫الصوت‬‫انتيائو‬ ‫عند‬ ‫تمقائي‬ ‫بشكؿ‬
preloadpreload‫بغض‬ ‫الصفحة‬ ‫تحميؿ‬ ‫عند‬ ‫الصوت‬ ‫الممؼ‬ ‫تحميؿ‬‫النظر‬
‫التقائي‬ ‫التشغيؿ‬ ‫خاصية‬ ‫عف‬‫لزر‬ ‫المستخدـ‬ ‫نقر‬ ‫عف‬ ‫و‬
‫التشغيؿ‬
src‫تشعبي‬ ‫ابط‬‫ر‬‫ممؼ‬ ‫ابط‬‫ر‬‫الصوت‬
‫الجدول‬6‫العنصر‬ ‫اصفات‬‫و‬ :<video>
‫النماذج‬ ‫عناصر‬Forms
‫تقدـ‬HTML 5‫جديدة‬ ‫مجموعة‬‫بالنماذج‬ ‫الخاصة‬ ‫اإلدخاؿ‬ ‫عناصر‬ ‫مف‬Forms‫إلى‬ ‫باإلضافة‬
‫مجموعة‬‫جديدة‬‫مف‬‫اع‬‫و‬‫أن‬‫عنصر‬‫اإلدخاؿ‬‫التقميدي‬<input>‫اع‬‫و‬‫األن‬ ‫عف‬ ‫بالحديث‬ ‫حديثنا‬ ‫سنبدأ‬ ‫و‬ ,
‫لمعنصر‬ ‫الجديدة‬<input>:‫التالي‬ ‫الجدوؿ‬ ‫يعرضيا‬ ‫التي‬ ‫و‬
‫اصفة‬‫و‬‫ال‬ ‫قيمة‬type‫الشرح‬
email‫اإللكتروني‬ ‫يد‬‫ر‬‫الب‬ ‫إلدخاؿ‬ ‫خاص‬ ‫عنصر‬
url‫التشعبية‬ ‫ابط‬‫و‬‫الر‬ ‫إلدخاؿ‬ ‫خاص‬ ‫عنصر‬
number‫خاص‬ ‫عنصر‬‫قاـ‬‫ر‬‫األ‬ ‫إلدخاؿ‬

87. ٛٚ
range‫إلدخاؿ‬ ‫خاص‬ ‫عنصر‬‫قيمة‬‫ة‬‫ر‬‫محصو‬‫َّف‬‫معي‬ ‫بمجاؿ‬‫ىذا‬ ‫يظير‬ ‫و‬ ,ً‫ا‬‫سمف‬
‫ير‬‫ر‬‫تم‬ ‫يط‬‫ر‬‫ش‬ ‫شكؿ‬ ‫عمى‬ ‫العنصر‬
date‫عنصر‬‫إلدخاؿ‬‫ا‬)‫(يوـ/شير/سنة‬ ‫يخ‬‫ر‬‫لتا‬
month‫عنصر‬‫إلدخاؿ‬‫ا‬)‫(شير/سنة‬ ‫يخ‬‫ر‬‫لتا‬
week‫عنصر‬‫إلدخاؿ‬‫ا‬‫و‬ ‫يخ‬‫ر‬‫لتا‬‫يستخدـ‬‫السنة‬ ‫مف‬ ‫ع‬‫أسبو‬ ‫لتحديد‬
time‫عنصر‬‫إلدخاؿ‬‫ا‬)‫(ساعة/دقيقة‬ ‫لوقت‬
datetime‫عنصر‬‫إلدخاؿ‬‫ا‬‫بالتوقيت‬ ,)‫(الساعة/اليوـ/الشير/السنة‬ ‫الوقت‬ ‫و‬ ‫يخ‬‫ر‬‫لتا‬
‫العالمي‬
datetime-local‫عنصر‬‫إلدخاؿ‬‫ا‬‫المحمي‬ ‫بالتوقيت‬ ,‫الوقت‬ ‫و‬ ‫يخ‬‫ر‬‫لتا‬
search‫ع‬‫بالنو‬ ‫شبيو‬ ‫ىو‬ ‫و‬ ‫البحث‬ ‫بع‬‫ر‬‫م‬ ‫لعرض‬ ‫عنصر‬text
color‫َّة‬‫الموني‬ ‫القيـ‬ ‫إلدخاؿ‬ ‫عنصر‬
‫الجدول‬7:‫في‬ ‫الجديدة‬ ‫اإلدخال‬ ‫عناصر‬ ‫اع‬‫و‬‫أن‬HTML 5
:‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬
<!DOCTYPE HTML>
<html>
<body>
<form action="" method="get">
Name:
<input type="text" name="stdnt_name" /><br />
E-Mail:
<input type="email" name="stdnt_email" /><br />
Website:
<input type="url" name="stdnt_url" /><br />
Points:

88. ٛٛ
<input type="range" name="points" min="1"
max="10" /><br />
Date:
<input type="date" name="user_date" /><br />
<input type="submit" />
</form>
</body>
</html>
‫يبدو‬‫السابؽ‬ ‫المثاؿ‬:‫الويب‬ ‫مستعرض‬ ‫في‬ ‫كمايمي‬
‫الشكل‬33‫كروم‬ ‫مستعرض‬ ‫في‬ ‫تبدو‬ ‫كما‬ ‫الجديدة‬ ‫اإلدخال‬ ‫عناصر‬ :
‫ه‬‫ر‬‫ذك‬ ‫سبؽ‬ ‫لما‬ ‫باإلضافة‬‫تقدـ‬HTML5‫الجديدة‬ ‫النماذج‬ ‫وسوـ‬ ‫مف‬ ‫مجموعة‬‫و‬‫الوسـ‬ ‫منيا‬
<datalist>‫المنسدلة‬ ‫ائـ‬‫و‬‫الق‬ ‫إلنشاء‬ ‫يستخدـ‬ ‫الذي‬ ‫و‬‫عناصر‬ ‫ألحد‬ ‫َّة‬‫اضي‬‫ر‬‫افت‬ ‫إدخاؿ‬ ‫ات‬‫ر‬‫كخيا‬
‫نشأ‬ُ‫ي‬ ‫و‬ ‫الموجودة‬ ‫اإلدخاؿ‬‫القائمة‬ ‫محتوى‬‫وسـ‬ ‫مع‬ ‫بالتعاوف‬<option>‫لمعنصر‬ ‫مشابية‬ ‫يقة‬‫ر‬‫بط‬ ‫و‬
‫القديـ‬<select>,‫(عنصر‬ ‫اضية‬‫ر‬‫اّلفت‬ ‫ات‬‫ر‬‫الخيا‬ ‫قائمة‬ ‫اسـ‬ ‫ير‬‫ر‬‫تم‬ ‫يتـ‬ ‫كما‬<datalist>‫لعنصر‬ )
‫ع‬ ‫اإلدخاؿ‬‫الجديدة‬ ‫اصفة‬‫و‬‫ال‬ ‫بر‬list,:‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬

89. ٜٛ
<!DOCTYPE HTML>
<html>
<body>
<form action="" method="get">
name:
<input type="text" list="names_list"
name="stdnt_name" /><br />
<datalist id="names_list">
<option label="A" value="nameA" />
<option label="B" value="nameB" />
<option label="C" value="nameC" />
</datalist>
</form>
</body>
</html>
‫قدمتيا‬ ‫التي‬ ‫الجديدة‬ ‫العناصر‬ ‫مف‬HTML5‫العنصر‬ ً‫ا‬‫أيض‬‫اف‬<keygen>‫و‬<output>,‫حيث‬
‫العنصر‬ ‫يستخدـ‬<keygen>‫ال‬ ‫مف‬ ‫التحقؽ‬ ‫و‬ ‫الدخوؿ‬ ‫تسجيؿ‬ ‫عمميات‬ ‫في‬‫مستخدميف‬
Authentication‫عبر‬ ‫ذلؾ‬ ‫و‬)‫خصوصي‬ ‫عمومي/مفتاح‬ ‫(مفتاح‬ ‫مفاتيح‬ ‫ج‬‫زو‬ ‫توليد‬‫مع‬ ‫يرسؿ‬
‫المستخدـ‬ ‫تدخؿ‬ ‫دوف‬ ‫الطمب‬:‫بالشكؿ‬ ‫يستخدـ‬ ‫و‬ ,
<keygen name="security" />
‫العنصر‬ ‫أما‬<output>‫مخرجات‬ ‫لعرض‬ ‫فيستخدـ‬Outputs‫نتائج‬ ‫مثؿ‬ ‫مختمفة‬ ‫اع‬‫و‬‫أن‬ ‫مف‬
‫ابع‬‫و‬‫ت‬ ‫أحد‬ ‫مف‬ ‫ة‬َ‫عاد‬ُ‫الم‬ ‫القيـ‬ ‫أو‬ ‫الحسابات‬Java Script:‫كمايمي‬
<output id="result" onforminput="resCalc()"></output>

90. ٜٓ
‫م‬َ‫رس‬َ‫الم‬ ‫عنصر‬Canvas
‫تقدـ‬HTML 5‫المرسـ‬ ‫عنصر‬<Canvas>‫باستخداـ‬ ‫الويب‬ ‫صفحة‬ ‫ضمف‬ ‫الرسـ‬ ‫لؾ‬ ‫يتيح‬ ‫الذي‬ ‫و‬
Java Scriptٚ
‫و‬‫أية‬ ‫عف‬ ‫تستغني‬ ‫بذلؾ‬‫خارجية‬ ‫إضافات‬Plugins‫ػ‬‫ل‬‫ا‬ ‫كإضافات‬Flash‫عمى‬
.‫المثاؿ‬ ‫سبيؿ‬
‫تفاع‬‫ر‬‫با‬ ً‫ّل‬‫و‬‫أ‬ ‫إنشاؤه‬ ‫يتـ‬ ‫المرسـ‬ ‫عنصر‬ ‫ّلستخداـ‬height‫عرض‬ ‫و‬width:‫كمايمي‬ ‫محدديف‬
<canvas id="myCanvas" width="200" height="100"></canvas>
‫باستخداـ‬ ‫عميو‬ ‫الرسـ‬ ‫يتـ‬ ‫ثـ‬Java Script:‫لمايمي‬ ‫مشابو‬ ‫بشكؿ‬
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
‫ػ‬‫ل‬‫ا‬ ‫يؽ‬‫ر‬‫ط‬ ‫عف‬ ‫المرسـ‬ ‫عنصر‬ ‫بتحديد‬ ً‫ّل‬‫و‬‫أ‬ ‫قمنا‬ ‫حيث‬id:‫السطر‬ ‫في‬ ‫ذلؾ‬ ‫و‬ ‫بو‬ ‫الخاص‬
var c=document.getElementById("myCanvas");
َّ‫ثـ‬‫كائف‬ ‫بإنشاء‬ ‫قمنا‬Object‫األبعاد‬ ‫ثنائي‬ ‫لمرسـ‬ ‫ىيأناه‬ ‫و‬ ‫المرسـ‬ ‫مف‬2D:‫التالي‬ ‫السطر‬ ‫في‬
var cxt=c.getContext("2d");
‫طرؽ‬ ‫استدعاء‬ ‫سيتـ‬ ‫بالرسـ‬ ‫لمقياـ‬ ‫و‬ ‫اآلف‬Methods‫الكائف‬cxt‫إنشاؤه‬ ‫تـ‬ ‫الذي‬‫بالشكؿ‬ ‫قميؿ‬ ‫قبؿ‬:
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
ٚ
‫عف‬ ‫يد‬‫ز‬‫الم‬ ‫اءة‬‫ر‬‫ق‬ ‫يمكنؾ‬Java Script.‫األمثمة‬ ‫في‬ ‫استخداميا‬ ‫ح‬‫شر‬ ‫سأحاوؿ‬ ‫لكنني‬ ‫و‬ ‫الكتاب‬ ‫ىذا‬ ‫نطاؽ‬ ‫ج‬‫خار‬ ‫فيي‬ ‫آخر‬ ‫مرجع‬ ‫في‬

91. ٜٔ
‫ففي‬‫القيمة‬ ‫تعنيو‬ ‫ما‬ ‫(ىذا‬ ‫رسمو‬ ‫سيتـ‬ ‫الذي‬ ‫لمشكؿ‬ ً‫ا‬‫لون‬ ‫األحمر‬ ‫الموف‬ ‫تحديد‬ ‫تـ‬ ‫األوؿ‬ ‫السطر‬
#FF0000)ٛ
‫بشكؿ‬ ‫السفمي‬ ‫األيمف‬ ‫و‬ ‫العموي‬ ‫األيسر‬ ‫ركنيو‬ ‫إحداثيات‬ ‫ير‬‫ر‬‫بتم‬ ‫بع‬‫ر‬‫الم‬ ‫رسـ‬ ‫تـ‬ َّ‫ثـ‬ ,
‫عند‬ ‫فعمناه‬ ‫لما‬ ‫مشابو‬‫تحديد‬‫ية‬‫ر‬‫الصو‬ ‫يطة‬‫ر‬‫الخ‬ ‫مناطؽ‬)‫ية‬‫ر‬‫الصو‬ ‫ائط‬‫ر‬‫الخ‬ ‫ة‬‫ر‬‫فق‬ ‫(انظر‬.
‫ضمف‬ ‫السابؽ‬ ‫المثاؿ‬ ‫يبدو‬‫لصفحة‬ ‫الكاممة‬ ‫ة‬‫ر‬‫الشيف‬:‫كمايمي‬ ‫الويب‬
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100">
‫انمرصم‬ ‫عىصر‬ ‫مضرعرضك‬ ‫يذعم‬ ‫ال‬
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
</body>
</html>
‫طرؽ‬ ‫بعض‬ ‫التالي‬ ‫الجدوؿ‬ ‫يعرض‬Methods:‫منيا‬ ‫كؿ‬ ‫وظيفة‬ ‫و‬ ‫المرسـ‬ ‫كائف‬
ٛ
‫ال‬ ‫في‬ ‫سيتـ‬‫في‬ ‫اف‬‫و‬‫األل‬ ‫مفيوـ‬ ‫عرض‬ ‫الثاني‬ ‫فصؿ‬HTML.

92. ٜٕ
‫الطريقة‬‫الوظيفة‬‫مثال‬
fillStyle‫التعبئة‬ ‫لوف‬ ‫تحديد‬cxt.fillStyle="#FF0000";
fillRect‫مستطيؿ‬ ‫رسـ‬cxt.fillRect(0,0,150,75);
moveTo‫مبدأ‬ ‫احة‬‫ز‬‫إ‬
‫اإلحداثيات‬
cxt.moveTo(10,10);
createLinearGradient‫لوني‬ ‫ج‬‫تدر‬ ‫إنشاء‬cxt.
createLinearGradient(0,0,170,50)
addColorStop‫إلى‬ ‫لوف‬ ‫إضافة‬
‫الموف‬ ‫ج‬‫التدر‬
cxt .addColorStop(0,"#FF0000");
drawImage‫ة‬‫ر‬‫صو‬ ‫لرسـ‬cxt.drawImage(img,0,0);
lineTo‫مستقيـ‬ ‫خط‬ ‫لرسـ‬cxt.lineTo(150,50);
‫الجدول‬8‫العنصر‬ ‫كائن‬ ‫طرق‬ ‫بعض‬ :<canvas>
‫العميل‬ ‫طرف‬ ‫من‬ ‫البيانات‬ ‫تخزين‬
‫تتيح‬HTML 5‫كائنيف‬‫العميؿ‬ ‫طرؼ‬ ‫مف‬ ‫البيانات‬ ‫يف‬‫ز‬‫لتخ‬ ‫مختمفتيف‬Client:‫ىما‬ ‫و‬
ٔ.‫الكائف‬localStorage‫يستخدـ‬ :‫الكائف‬ ‫ىذا‬‫غير‬ ‫ة‬‫ر‬‫لفت‬ ‫العميؿ‬ ‫طرؼ‬ ‫مف‬ ‫البيانات‬ ‫يف‬‫ز‬‫لتخ‬
‫محد‬‫و‬‫يستخدـ‬ ‫و‬ ‫دة‬‫يف‬‫ز‬‫لمتخ‬ ‫التالية‬ ‫العامة‬ ‫الصيغة‬:
localStorage.varName="value";
‫أف‬ ‫حيث‬varName‫و‬ ‫المتغير‬ ‫اسـ‬ ‫ىو‬value‫استرجاع‬ ‫يمكف‬ ‫و‬ ‫المتغير‬ ‫ىذا‬ ‫قيمة‬ ‫ىي‬
:‫التالية‬ ‫العامة‬ ‫بالصيغة‬ ‫المتغير‬ ‫قيمة‬
localStorage.varName;
ٕ.‫الكائف‬sessionStorage:‫ة‬‫ر‬‫لفت‬ ‫العميؿ‬ ‫طرؼ‬ ‫مف‬ ‫البيانات‬ ‫يف‬‫ز‬‫لتخ‬ ‫الكائف‬ ‫ىذا‬ ‫يستخدـ‬
:‫يف‬‫ز‬‫لمتخ‬ ‫التالية‬ ‫العامة‬ ‫الصيغة‬ ‫يستخدـ‬ ‫و‬ ,‫فقط‬ ‫احدة‬‫و‬ ‫بجمسة‬ ‫محددة‬

93. ٜٖ
sessionStorage.varName="value";
‫أف‬ ‫حيث‬varName‫و‬ ‫المتغير‬ ‫اسـ‬ ‫ىو‬value‫استرج‬ ‫يمكف‬ ‫و‬ ‫المتغير‬ ‫ىذا‬ ‫قيمة‬ ‫ىي‬‫اع‬
:‫التالية‬ ‫العامة‬ ‫بالصيغة‬ ‫المتغير‬ ‫قيمة‬
sessionStorage.varName;
‫ات‬‫ر‬‫شيف‬ ‫كتابة‬ ‫أثناء‬ ‫لمبيانات‬ ‫خاصة‬ ‫كمخازف‬ ‫يستخدماف‬ ‫الكائناف‬ ‫ىذاف‬ :‫ممحوظة‬Java Script.
‫في‬ ‫الجديدة‬ ‫الوسوم‬ ‫دليل‬HTML 5
‫الفصؿ‬ ‫ليذا‬ ً‫ا‬‫ختام‬‫نعرض‬‫ب‬ ً‫ّل‬‫و‬‫جد‬ ‫فيمايمي‬‫في‬ ‫الجديدة‬ ‫الوسوـ‬HTML 5:
‫الوسم‬‫الشرح‬
<article>‫مقالة‬
<aside>‫الموقع‬ ‫محتويات‬ ‫مف‬ ‫جانب‬
<audio>‫الصوت‬ ‫ممفات‬ ‫لتشغيؿ‬
<canvas>ً‫ا‬‫برمجي‬ ‫لمرسـ‬
<command>‫امر‬‫و‬‫أ‬ ‫زر‬
<datalist>‫إدخاؿ‬ ‫لعنصر‬ ‫اضية‬‫ر‬‫افت‬ ‫ات‬‫ر‬‫خيا‬ ‫قائمة‬
<details>‫ما‬ ‫عنصر‬ ‫تفاصيؿ‬
<embed>‫أو‬ ‫تفاعمي‬ ‫عنصر‬ ‫تضميف‬plugin‫خارجي‬
<figcaption>‫عنصر‬ ‫اف‬‫و‬‫عن‬<figure>
<figure>‫الوسائط‬ ‫عناصر‬ ‫مف‬ ‫مجموعة‬
<footer>‫الصفحة‬ ‫مناطؽ‬ ‫مف‬ ‫منطقة‬ ‫ذيؿ‬
<header>‫الصفحة‬ ‫مناطؽ‬ ‫مف‬ ‫منطقة‬ ‫أس‬‫ر‬
<hgroup>‫المستند‬ ‫مف‬ ‫قسـ‬ ‫عف‬ ‫معمومات‬
<keygen>‫النموذج‬ ‫في‬ ‫التحقؽ‬ ‫مفاتيح‬ ‫توليد‬
<mark>‫مميز‬ ‫نص‬

94. ٜٗ
<meter>‫محدد‬ ‫بمدى‬ ‫ة‬‫ر‬‫محصو‬ ‫قياسات‬ً‫ا‬‫مسبق‬
<nav>‫تشعبية‬ ‫ابط‬‫و‬‫ر‬
<output>‫ما‬ ‫ع‬‫نو‬ ‫مف‬ ‫ج‬‫خر‬ ‫عرض‬
<progress>‫يط‬‫ر‬‫ش‬‫ـ‬ّ‫تقد‬‫ما‬ ‫ع‬‫نو‬ ‫مف‬ ‫لميمة‬
<rp>‫لغة‬ ‫يستخدـ‬Ruby‫ّل‬ ‫المستعرض‬ ‫كوف‬ ‫حالة‬ ‫في‬ ‫عرضو‬ ‫سيتـ‬ ‫ما‬ ‫عف‬ ‫يح‬‫ر‬‫لمتص‬
‫عنصر‬ ‫يدعـ‬Ruby
<rt>‫باستخداـ‬ ‫عنو‬ ‫يح‬‫ر‬‫التص‬ ‫تـ‬ ‫لما‬ ‫ح‬‫شر‬‫عنصر‬Ruby
<ruby>‫عنصر‬Ruby
<section>‫المستند‬ ‫مف‬ ‫قسـ‬
<source>‫الوسائط‬ ‫مصادر‬ ‫يؼ‬‫ر‬‫لتع‬
<summary>‫العنصر‬ ‫ترويسة‬ ‫يعرؼ‬detail
<time>‫يخ/الوقت‬‫ر‬‫التا‬
<video>‫الفيديو‬ ‫عناصر‬ ‫لعرض‬
<wbr>‫محتمؿ‬ ‫جديد‬ ‫سطر‬
‫الجدول‬9‫في‬ ‫الجديدة‬ ‫الوسوم‬ ‫دليل‬ :HTML 5

95. ٜ٘
‫الثاني‬ ‫الفصؿ‬
CSS 3

96. ٜٙ

97. ٜٚ
‫مقدمة‬
‫لغة‬ ‫باستخداـ‬ ‫الويب‬ ‫مستندات‬ ‫كتابة‬ ‫َّة‬‫كيفي‬ ‫الماضي‬ ‫الفصؿ‬ ‫في‬ ‫منا‬َّ‫تعم‬HTML5‫لـ‬ ‫لكننا‬ ‫و‬‫ؽ‬ّ‫نتطر‬
‫ب‬ ‫تتعمؽ‬ ‫ة‬‫ر‬‫كثي‬ ‫احي‬‫و‬‫لن‬‫مظير‬ً‫ا‬‫مقصود‬ ‫األمر‬ ‫ىذا‬ ‫كاف‬ ‫فقد‬ ‫الحقيقة‬ ‫في‬ ‫و‬ ,‫المستندات‬ ‫تمؾ‬ ‫تنسيؽ‬ ‫و‬
‫و‬ ‫بالشكؿ‬ ‫يتعمؽ‬ ‫ما‬ ‫ألف‬‫المظير‬‫ة‬ّ‫ميم‬ ‫مف‬ ‫ىو‬‫َّة‬‫اّلنسيابي‬ ‫األنماط‬ ‫اؽ‬‫ر‬‫أو‬CSS‫ىذا‬ ‫يناقش‬ ‫التي‬
‫ػ‬‫ب‬ ‫يعرؼ‬ ‫الذي‬ ‫و‬ ‫اتيا‬‫ر‬‫إصدا‬ ‫أحدث‬ ‫الفصؿ‬CSS3‫و‬ ,‫لكن‬‫نا‬-‫األمر‬ ‫اقع‬‫و‬ ‫في‬-‫ّل‬‫أف‬ ‫نستطيع‬
‫ث‬ّ‫نتحد‬‫عف‬ ً‫ة‬‫ر‬‫مباش‬CSS3‫عف‬ ‫ذلؾ‬ ‫قبؿ‬ ‫سنتحدث‬ ‫لذلؾ‬CSS‫التقميدية‬.
‫هي‬ ‫ما‬CSS‫؟‬
‫إف‬CSS‫اختصار‬ ‫ىي‬‫الجممة‬ ‫مف‬ ‫األولى‬ ‫لألحرؼ‬Cascading Style Sheetْ‫ت‬َ‫م‬ِ‫رج‬ُ‫ت‬ ‫التي‬ ‫و‬
‫أنيا‬ ‫عمى‬"‫َّة‬‫اّلنسيابي‬ ‫األنماط‬ ‫اؽ‬‫ر‬‫أو‬"ٜ
,‫ف‬‫أف‬ ‫حيف‬ ‫في‬HTML‫الويب‬ ‫مستندات‬ ‫عناصر‬ ‫بوصؼ‬ ‫تيتـ‬
‫فإف‬CSS‫بوصؼ‬ ‫تيتـ‬‫و‬ ‫شكؿ‬‫مظير‬‫اّلنسيابية‬ ‫األنماط‬ ‫اؽ‬‫ر‬‫أو‬ ‫ظيور‬ ‫كاف‬ ‫قد‬ ‫و‬ ,‫العناصر‬ ‫ىذه‬
‫و‬ ,‫ىا‬‫ظيور‬ ‫قبؿ‬ ‫ات‬‫و‬‫لسن‬ ‫الويب‬ ‫ي‬‫ر‬ِّ‫مطو‬ ‫اجيت‬‫و‬ ‫التي‬ ‫المشاكؿ‬ ‫أكبر‬ ‫مف‬ ‫لمشكمة‬ ‫ئيسي‬‫ر‬‫ال‬ ‫الماحؽ‬
.‫المشكمة‬ ‫ىذه‬ ‫تعرض‬ ‫التالية‬ ‫ة‬‫ر‬‫الفق‬
‫قبل‬ ‫الويب‬ ‫ي‬‫مطور‬ ‫مشكمة‬CSS
‫لغة‬ ‫تصميـ‬ ‫تـ‬ ‫عندما‬HTML‫تصؼ‬ ‫لغة‬ ‫تصميـ‬ ‫عمى‬ ‫األكبر‬ ‫التركيز‬ ‫كاف‬‫الويب‬ ‫صفحات‬ ‫عناصر‬
‫مصممي‬ ‫لدى‬ ‫توجو‬ ‫أي‬ ‫ىناؾ‬ ‫يكف‬ ‫لـ‬ ‫و‬ ,‫فقط‬HTML‫لغتيـ‬ ‫تيتـ‬ ‫أف‬‫شكؿ‬ ‫و‬ ‫بمظير‬‫المحتوى‬
َّ‫المقد‬‫ـ‬,‫و‬ُ‫ت‬ِ‫ر‬َ‫ك‬ْ‫ت‬‫الويب‬ ‫مستعرضات‬ ‫لمصممي‬ ‫الميمة‬ ‫ىذه‬‫كاف‬ ‫حيث‬ ,-‫اؿ‬‫ز‬‫ي‬ ‫ما‬ ‫و‬-‫مستعرض‬ ‫كؿ‬
‫يعرض‬ ‫الويب‬ ‫مستعرضات‬ ‫مف‬‫مف‬ ‫عنصر‬ ‫كؿ‬‫بمظير‬ ‫الويب‬ ‫صفحة‬ ‫عناصر‬‫بو‬ ‫خاص‬ ‫اضي‬‫ر‬‫افت‬
‫حسبم‬‫المستعرض‬ ‫مصممو‬ ‫أى‬‫ر‬ ‫ا‬.‫الصفحة‬ ‫مصمـ‬ ‫غبة‬‫ر‬ ‫عف‬ ‫النظر‬ ‫بغض‬ ‫و‬
ٜ
.‫بية‬‫ر‬‫الع‬ ‫اجع‬‫ر‬‫الم‬ ‫عمى‬ ‫الغالبة‬ ‫ىي‬ ‫الترجمة‬ ‫ىذه‬

98. ٜٛ
‫الوسـ‬ ‫أمثمتيا‬ ‫مف‬ ‫و‬ ‫بالتنسيؽ‬ ‫تيتـ‬ ‫جديدة‬ ‫وسوـ‬ ‫فأضيفت‬ ً‫ا‬‫ّلحق‬ ‫النقطة‬ ‫ليذه‬ ‫التنبو‬ ‫تـ‬<font>‫الذي‬
‫ع‬‫بنو‬ ‫نص‬ ‫لعرض‬ ‫يستخدـ‬( ‫خط‬‫بنط‬)ٔٓ
Font‫الصفحة‬ ‫ضمف‬ ‫محدد‬ ‫لوف‬ ‫و‬ ‫حجـ‬ ‫و‬,‫كاف‬ ‫و‬‫ىذا‬
‫ىناؾ‬ ‫كاف‬ ‫فقد‬ ,‫الويب‬ ‫ي‬‫لمطور‬ ‫بالنسبة‬ ‫ثة‬‫ر‬‫لكا‬ ‫تحوؿ‬ ‫ما‬ ‫عاف‬‫سر‬ ‫لكنو‬ ‫األمر‬ ‫أوؿ‬ ‫في‬ ً‫ال‬‫جمي‬ ً‫ا‬‫شيئ‬
‫عممية‬ ‫أف‬ ‫يعني‬ ‫مما‬ ,ً‫ا‬‫أحيان‬ ‫الصفحات‬ ‫آّلؼ‬ ‫أو‬ ‫مئات‬ ‫إلى‬ ‫صفحاتيا‬ ‫عدد‬ ‫يصؿ‬ ‫التي‬ ‫اقع‬‫و‬‫الم‬ ‫بعض‬
‫في‬ ‫الشديد‬ ‫التركيز‬ ‫إلى‬ ‫الحاجة‬ ‫عف‬ ‫ناىيؾ‬ ,‫يف‬‫ر‬‫كبي‬ ‫جيد‬ ‫و‬ ‫لوقت‬ ‫تحتاج‬ ‫الصفحات‬ ‫ىذه‬ ‫تنسيؽ‬‫ضبط‬
‫و‬ ‫موحدة‬ ‫خطوط‬ ‫اع‬‫و‬‫أن‬ ‫و‬ ‫أحجاـ‬ ‫و‬ ‫اف‬‫و‬‫بأل‬ ‫صفحات‬ ‫عمى‬ ‫لمحصوؿ‬ ً‫ا‬‫سابق‬ ‫ة‬‫ر‬‫المذكو‬ ‫الوسوـ‬ ‫خصائص‬
,‫متجانسة‬‫ظيور‬ ‫مع‬ ‫المشكمة‬ ‫ىذه‬ ‫تالشت‬ ‫فقد‬ ‫الحظ‬ ‫حسف‬ ‫مف‬ ‫و‬ ‫لكف‬CSS.
‫يمكن‬ ً‫ا‬ّ‫مبدأي‬‫نا‬‫أف‬ ‫القوؿ‬CSS‫تصؼ‬‫شكؿ‬ ‫و‬ ‫مظير‬‫وسوـ‬ ‫مف‬ ‫وسـ‬ ‫كؿ‬HTMLً‫حد‬ ‫عمى‬‫ىذا‬ ‫و‬ ,‫ى‬
‫سيقوـ‬ ‫أنو‬ ‫الويب‬ ‫لمطور‬ ‫بالنسبة‬ ‫يعني‬ ‫ما‬‫مظير‬ ‫و‬ ‫لشكؿ‬ ‫وصؼ‬ ‫بكتابة‬‫احد‬‫و‬ ‫مكاف‬ ‫في‬ ‫الوسـ‬‫و‬‫ة‬‫ر‬‫لم‬
‫احدة‬‫و‬‫ىذا‬ ‫َّؽ‬‫ب‬َ‫ط‬ُ‫سي‬ َّ‫ثـ‬ ,‫فقط‬‫ب‬ ‫تبطة‬‫ر‬‫الم‬ ‫الويب‬ ‫مستندات‬ ‫جميع‬ ‫عمى‬ ‫التنسيؽ‬‫ذات‬‫ػ‬‫ل‬‫ا‬CSS.
‫استخدام‬ ‫في‬ ‫البدء‬CSS
‫ّلستخداـ‬ ‫طرؽ‬ ‫ثالث‬ ‫ىناؾ‬‫اّلنسيابية‬ ‫األنماط‬ ‫اؽ‬‫ر‬‫أو‬CSS‫في‬:‫صفحتؾ‬
ٔ.CSS‫َّة‬‫ي‬‫ر‬‫السط‬Inline CSS:
‫ة‬‫ر‬‫شيف‬ ‫إسناد‬ ‫يتـ‬CSS‫اصفة‬‫و‬‫ال‬ ‫إلى‬styleً‫حد‬ ‫عمى‬ ‫عنصر‬ ‫بكؿ‬ ‫الخاصة‬‫المثاؿ‬ ‫انظر‬ ,‫ى‬
:‫التالي‬
<p style="color:red;">‫اٌفمشح‬ ٜٛ‫ِحز‬</p>
‫مفضمة‬ ‫غير‬ ‫يقة‬‫ر‬‫الط‬ ‫ىذه‬ ‫و‬-‫لي‬ ‫بالنسبة‬-‫قبؿ‬ ‫ما‬ ‫لمشاكؿ‬ ‫تعيدنا‬ ‫ألنيا‬CSS.
ٕ.CSS‫َّة‬‫الداخمي‬)‫(الدفينة‬Embeded CSS:
ٔٓ
‫بترجمة‬ ‫اقتناعي‬ ‫عدـ‬ ‫مع‬font‫ية‬‫ر‬‫السو‬ ‫العممية‬ ‫الجمعية‬ ‫عف‬ ‫الصادر‬ ‫المعموماتية‬ ‫مصطمحات‬ ‫معجـ‬ ‫في‬ ‫ىكذا‬ ‫وردت‬ ‫لكنيا‬ "‫"بنط‬ ‫إلى‬
‫ػ‬‫ل‬ ‫كترجمة‬ "‫"خط‬ ‫باستخداـ‬ ‫لنفسي‬ ‫سأسمح‬ ‫و‬ ‫لممعموماتية‬font.‫ىذا‬ ‫كتابي‬ ‫في‬

99. ٜٜ
‫ة‬‫ر‬‫شيف‬ ‫كتابة‬ ‫يتـ‬CSS‫ػ‬‫ل‬‫ا‬ ‫منطقة‬ ‫في‬Head‫وسمي‬ ‫بيف‬ ‫الصفحة‬ ‫مف‬<style>‫و‬
</style>:‫بالشكؿ‬ ‫الصفحة‬ ‫لتصبح‬
<html>
<head>
<style type="text/css">
CSS ‫شيفراخ‬ ‫كراتح‬ ‫يرم‬ ‫هىا‬
</style>
</head>
<body>
‫ٕ٘ب‬ ‫اٌظفحخ‬ ٜٛ‫ِحز‬
</body>
</html>
‫ىذه‬ ‫تعتبر‬ ‫و‬‫أما‬ ‫الصفحات‬ ‫مف‬ ‫المحدود‬ ‫العدد‬ ‫ذات‬ ‫اقع‬‫و‬‫لمم‬ ‫جيدة‬ ‫يقة‬‫ر‬‫الط‬‫بالنسبة‬‫اقع‬‫و‬‫لمم‬
.‫الثالثة‬ ‫يقة‬‫ر‬‫الط‬ ‫استخداـ‬ ‫فأفضؿ‬ ‫ة‬‫ر‬‫الكبي‬ ‫و‬ ‫المتوسطة‬
ٖ.CSS‫َّة‬‫الخارجي‬External CSS:
‫كتابة‬ ‫يتـ‬‫كامؿ‬‫ة‬‫ر‬‫شيف‬CSS‫اّلمتداد‬ ‫يحمؿ‬ ‫مستقؿ‬ ‫ممؼ‬ ‫في‬.css‫ىذا‬ ‫بط‬‫ر‬ ‫يتـ‬ َّ‫ثـ‬ ,ً‫ّل‬‫و‬‫أ‬
‫باستخد‬ ‫الويب‬ ‫صفحة‬ ‫مع‬ ‫الممؼ‬‫الوسـ‬ ‫اـ‬<link>‫ير‬‫ر‬‫تم‬ ‫عبر‬ ‫الصفحة‬ ‫أس‬‫ر‬ ‫منطقة‬ ‫في‬
‫اصفتو‬‫و‬ ‫إلى‬ ‫الممؼ‬ ‫مسار‬href‫ػ‬‫ب‬ ‫العالقة‬ ‫ع‬‫نو‬ ‫تحديد‬ ‫و‬stylesheet:‫كمايمي‬
<html>
<head>
<link rel="stylesheet" type="text/css"
href="style.css" />
</head>

100. ٔٓٓ
<body>‫ٕ٘ب‬ ‫اٌظفحخ‬ ٜٛ‫ِحز‬</body>
</html>
‫ّلستخداـ‬ ‫المثالية‬ ‫يقة‬‫ر‬‫الط‬ ‫ىي‬ ‫يقة‬‫ر‬‫الط‬ ‫ىذه‬ ‫و‬CSS‫أيي‬‫ر‬‫ب‬.
‫ات‬‫ر‬‫شيف‬CSS
‫ة‬‫ر‬‫شيف‬ ‫تتكوف‬CSS‫اعد‬‫و‬‫الق‬ ‫مف‬ ‫مجموعة‬ ‫مف‬Rules‫أو‬ ‫عنصر‬ ‫مظير‬ ‫منيا‬ ‫قاعدة‬ ‫كؿ‬ ‫تصؼ‬ ,
‫لقاعدة‬ ‫العاـ‬ ‫الشكؿ‬ ‫و‬ ,‫الصفحة‬ ‫في‬ ‫العناصر‬ ‫مف‬ ‫مجموعة‬CSS:‫ىو‬
selector {
property:value;
property:value;
property:value;
…
}
‫ة‬‫ر‬‫المذكو‬ ‫المظير‬ ‫خصائص‬ ‫جميع‬ ‫بتطبيؽ‬ ‫يقوـ‬ ‫ما‬ ‫ىذا‬ ‫و‬‫القوسيف‬ ‫بيف‬{‫و‬}‫كافة‬ ‫عمى‬‫عناصر‬
‫الصفحة‬‫تطاب‬ ‫التي‬‫ؽ‬‫د‬ِّ‫د‬َ‫ح‬ُ‫الم‬selector.
:‫ممحوظة‬‫تطبيؽ‬ ‫بغية‬ ‫الويب‬ ‫صفحة‬ ‫مف‬ ‫عناصر‬ ‫مجموعة‬ ‫أو‬ ‫عنصر‬ ‫لتحديد‬ ‫تستخدـ‬ ‫فالمحددات‬ ‫اسميا‬ ‫مف‬ ‫يبدو‬ ‫كما‬
‫اعد‬‫و‬‫ق‬CSS‫و‬ ,‫عمييا‬‫في‬ ‫عة‬ِّ‫متنو‬ ‫و‬ ‫ة‬‫ر‬‫كثي‬ ‫دات‬ِّ‫د‬َ‫ح‬ُ‫الم‬CSSُ‫الم‬ ‫يكوف‬ ‫فقد‬َ‫ح‬‫وسوـ‬ ‫ألحد‬ ً‫ا‬‫اسم‬ ‫حاّلتو‬ ‫أبسط‬ ‫في‬ ‫د‬ِّ‫د‬
HTML‫مثؿ‬h1‫أو‬a‫أو‬pُ‫الم‬ ‫يكوف‬ ‫قد‬ ‫و‬ ,َ‫ح‬‫د‬ِّ‫د‬id‫مثؿ‬ ‫ما‬ ‫لعنصر‬#link1‫أو‬#header1‫أو‬#searchForm
ُ‫الم‬ ‫مف‬ ‫مجموعة‬ ‫ح‬‫شر‬ ‫سيتـ‬ ‫بالطبع‬ ‫و‬ ,‫ذلؾ‬ ‫غير‬ ‫يكوف‬ ‫قد‬ ‫و‬ِّ‫حد‬‫عرض‬ ‫سيتـ‬ ‫كما‬ ‫التالية‬ ‫ات‬‫ر‬‫الفق‬ ‫في‬ ‫ضمني‬ ‫بشكؿ‬ ‫دات‬
‫المحددات‬ ‫بكافة‬ ‫جدوؿ‬‫معانييا‬ ‫مع‬.‫الفصؿ‬ ‫نياية‬ ‫في‬
‫ذكر‬ ‫يتـ‬‫خصائص‬ ‫مف‬ ‫خاصية‬ ‫كؿ‬CSS‫بشكؿ‬‫ج‬‫زو‬:‫بالشكؿ‬ ‫اسـ/قيمة‬
property:value;

101. ٔٓٔ
‫أف‬ ‫حيث‬property‫و‬ ‫المظير‬ ‫خاصية‬ ‫اسـ‬ ‫ىي‬value‫يؼ‬‫ر‬‫تع‬ ‫ينتيي‬ ‫و‬ ,‫الخاصية‬ ‫قيمة‬ ‫ىي‬
‫المنقوطة‬ ‫بالفاصمة‬ ‫الخاصية‬‫اض‬‫ر‬‫باستع‬ ‫سنبدأ‬ ‫و‬ ,‫كافة‬.‫التالية‬ ‫ة‬‫ر‬‫الفق‬ ‫مف‬ ً‫ا‬‫ر‬‫اعتبا‬ ‫الخصائص‬
‫ة‬‫ر‬ِ‫تذك‬‫ػ‬‫ك‬ :HTML‫فإف‬CSS‫استخداميا‬ ‫يتـ‬ ‫إنما‬ ‫و‬ ‫اغات‬‫ر‬‫الف‬ ‫لمحارؼ‬ ‫قيمة‬ ‫أي‬ ‫تعطي‬ ‫ّل‬‫لغرض‬‫اءة‬‫ر‬‫ق‬ ‫تسييؿ‬
‫ال‬‫فقط‬ ‫ة‬‫ر‬‫شيف‬.
‫النصوص‬ ‫مظهر‬ ‫خصائص‬
‫توفر‬CSS:‫ىي‬ ‫و‬ ‫النصوص‬ ‫مظير‬ ‫لتنسيؽ‬ ‫الخصائص‬ ‫مف‬ ‫مجموعة‬
‫المحاذاة‬ ‫خاصية‬text-align:‫كمايمي‬ ‫تستخدـ‬ ‫التي‬ ‫و‬
h1 {text-align:center;}
‫المحدد‬ ‫أف‬ ‫حيث‬h1‫عناصر‬ ‫جميع‬ ‫يعني‬<h1>‫القيمة‬ ‫إسناد‬ ‫يمكف‬ ‫و‬ ,‫المستند‬ ‫في‬right
‫الخاصية‬ ‫إلى‬text-align‫لمحا‬‫أو‬ ‫لميميف‬ ‫النص‬ ‫ذاة‬left‫أو‬ ‫لميسار‬ ‫النص‬ ‫لمحاذاة‬center
‫أو‬ ‫النص‬ ‫لتوسيط‬justify‫ة‬‫ر‬‫الفق‬ ‫أسطر‬ ‫جميع‬ ‫لجعؿ‬‫متساوية‬‫العرض‬width.
‫خاصية‬( ‫ييف‬‫ز‬‫الت‬‫التأثيث‬)ٔٔ
text-decoration:‫كمايمي‬ ‫تستخدـ‬ ‫التي‬ ‫و‬
p a {text-decoration:overline;}
‫المحدد‬ ‫أف‬ ‫حيث‬p a‫ابط‬‫و‬‫الر‬ ‫عناصر‬ ‫جميع‬ ‫يعني‬<a>‫عناصر‬ ‫مف‬ ‫أي‬ ‫ضمف‬ ‫الموجودة‬
‫ات‬‫ر‬‫الفق‬<p>,‫المستند‬ ‫في‬‫القيمة‬ ‫و‬overline‫أعمى‬ ‫خط‬ ‫عرض‬ ‫تعني‬‫ال‬‫يمكف‬ ‫و‬ ,‫نصوص‬
:‫التالية‬ ‫القيـ‬ ‫إسناد‬none‫إللغاء‬‫ييف‬‫ز‬‫الت‬‫أو‬underline‫النص‬ ‫أسفؿ‬ ‫خط‬ ‫لعرض‬‫أو‬
line-through‫لشطب‬‫النص‬.
‫اءة‬‫ر‬‫الق‬ ‫اتجاه‬ ‫خاصية‬direction:‫كمايمي‬ ‫تستخدـ‬ ‫التي‬ ‫و‬
ٔٔ
‫بوف‬‫ر‬‫يع‬ ‫ىـ‬Decor.‫األنسب‬ ‫الترجمة‬ ‫ىي‬ ‫ييف‬‫ز‬‫الت‬ ‫أف‬ ‫ى‬‫أر‬ ‫أنني‬ ً‫ا‬‫عمم‬ ,‫قوسيف‬ ‫بيف‬ ‫التأثيث‬ ‫أوردت‬ ‫ليذا‬ ‫و‬ "‫"أثاث‬ ‫أنيا‬ ‫عمى‬

102. ٕٔٓ
p {direction:rtl;}
‫القيمة‬ ‫تعنيو‬ ‫ما‬ ‫ىذا‬ ‫و‬ ‫اليسار‬ ‫إلى‬ ‫اليميف‬ ‫مف‬ ‫اءة‬‫ر‬‫الق‬ ‫اتجاه‬ ‫لجعؿ‬rtl(‫ػ‬‫ل‬ ً‫ا‬‫ر‬‫اختصا‬right to
left‫القيمة‬ ‫بإسناد‬ ‫لميميف‬ ‫اليسار‬ ‫مف‬ ‫اءة‬‫ر‬‫الق‬ ‫اتجاه‬ ‫جعؿ‬ ‫يمكف‬ ‫و‬ ,)ltr‫اصفة‬‫و‬‫ال‬ ‫إلى‬
direction.
‫خاصية‬‫األحرؼ‬ ‫حالة‬ ‫تحويؿ‬text-transformation:‫كمايمي‬ ‫تستخدـ‬ ‫التي‬ ‫و‬
p {text-transformation:uppercase;}
‫جميع‬ ‫لجعؿ‬‫أحرؼ‬‫عناصر‬<p>‫الحرؼ‬ ‫بحالة‬‫الكبير‬ٕٔ
‫الخاصية‬ ‫ىذه‬ ‫تأخذ‬ ‫أف‬ ‫يمكف‬ ‫و‬ ,
‫القيـ‬uppercase‫أو‬ ‫ة‬‫ر‬‫الكبي‬ ‫لمحروؼ‬lowercase‫أو‬ ‫ة‬‫ر‬‫الصغي‬ ‫لمحروؼ‬capitalize
‫األ‬ ‫الحرؼ‬ ‫لجعؿ‬‫كممة‬ ‫كؿ‬ ‫مف‬ ‫فقط‬ ‫وؿ‬.ً‫ا‬‫ر‬‫كبي‬ ً‫ا‬‫ف‬‫ر‬‫ح‬
‫البداية‬ ‫احة‬‫ز‬‫إ‬ ‫خاصية‬text-indent:‫كمايمي‬ ‫تستخدـ‬ ‫التي‬ ‫و‬
p {text-indent:20px;}
‫بمقدار‬ ‫المقطع‬ ‫مف‬ ‫كممة‬ ‫أوؿ‬ ‫احة‬‫ز‬‫إل‬ٕٓ‫بكسؿ‬‫ات‬‫ر‬‫فق‬ ‫بداية‬ ‫مع‬ ‫تستخدـ‬ ‫ما‬ ً‫ا‬‫غالب‬ ‫احة‬‫ز‬‫اإل‬ ‫و‬ ,
.‫َّة‬‫ي‬‫ز‬‫اإلنجمي‬ ‫المغة‬
‫الموف‬ ‫خاصية‬color:‫كمايمي‬ ‫تستخدـ‬ ‫التي‬ ‫و‬
p {color:red;}
‫المحدد‬ ‫أف‬ ‫حيث‬p‫العناصر‬ ‫جميع‬ ‫يعني‬<p>‫إسناد‬ ‫يتـ‬ ‫و‬ ,‫الصفحة‬ ‫في‬ ‫الموجودة‬‫الموف‬
‫لمخاصية‬color‫بإسناد‬ ‫إما‬‫با‬ ‫الموف‬ ‫اسـ‬‫ا‬ ‫لمغة‬‫مثؿ‬ ‫ية‬‫ز‬‫إلنجمي‬red‫أو‬green‫أو‬white
‫أو‬ ,‫..إلخ‬‫بإسناد‬‫ي‬‫عشر‬ ‫الست‬ ‫بالنظاـ‬ ‫الموف‬ ‫قيمة‬Hexadecimal‫مثؿ‬#FF0000‫أو‬
ٕٔ
‫ي‬ ‫ية‬‫ز‬‫اإلنجمي‬ ‫في‬ ‫األوؿ‬ ‫الحرؼ‬ ً‫ال‬‫فمث‬ ‫الحرؼ‬ ‫لنفس‬ ‫رسـ‬ ‫مف‬ ‫أكثر‬ ‫تعطي‬ ‫لغات‬ ‫ىناؾ‬‫رسـ‬A‫و‬ ‫الكبير‬ ‫الحرؼ‬ ‫حالة‬ ‫في‬ ‫كاف‬ ‫إذا‬a‫في‬
.‫الصغير‬ ‫الحرؼ‬ ‫حالة‬

103. ٖٔٓ
#00FC00‫أو‬#FFFFFF‫أو‬ ,‫..إلخ‬‫بإسناد‬‫الموف‬ ‫قيمة‬‫التابع‬ ‫عبر‬rgb‫بالشكؿ‬
rgb(255,0,0)‫أو‬rgb(0,255,0)‫أو‬rgb(255,255,255).‫..إلخ‬
‫توضيح‬:‫يتشكؿ‬‫مف‬ ‫لوف‬ ‫كؿ‬‫ج‬‫مز‬‫عف‬ ‫اف‬‫و‬‫األل‬ ‫تختمؼ‬ ‫و‬ ,‫األزرؽ‬ ‫و‬ ‫األخضر‬ ‫و‬ ‫األحمر‬ ‫ىي‬ ‫اف‬‫و‬‫أل‬ ‫ثالثة‬
‫كؿ‬ ‫نسبة‬ ‫باختالؼ‬ ‫بعضيا‬‫األحمر‬ ‫مف‬/‫األخضر‬/‫األزرؽ‬‫و‬ ,‫فييا‬‫الست‬ ‫بالنظاـ‬ ‫الموف‬ ‫تمثيؿ‬ ‫حالة‬ ‫في‬
‫الموف‬ ‫جة‬‫در‬ ‫تمثالف‬ ‫خانتيف‬ ‫ثاني‬ ‫اعتبار‬ ‫يتـ‬ ‫و‬ ,‫األحمر‬ ‫الموف‬ ‫درجة‬ ‫تمثالف‬ ‫خانتيف‬ ‫أوؿ‬ ‫اعتبار‬ ‫يتـ‬ ‫ي‬‫عشر‬
‫بيف‬ ‫خانة‬ ‫كؿ‬ ‫قيـ‬ ‫ج‬‫تتدر‬ ‫بالطبع‬ ‫و‬ ,‫األزرؽ‬ ‫الموف‬ ‫جة‬‫در‬ ‫تمثالف‬ ‫خانتيف‬ ‫ثالث‬ ‫اعتبار‬ ‫يتـ‬ ‫و‬ ,‫األخضر‬00
‫و‬ ‫قيمة‬ ‫كأدنى‬FF‫س‬ ‫فعمى‬ ,‫قيمة‬ ‫كأعمى‬‫المونيف‬ ‫ج‬‫مز‬ ‫يجب‬ ‫البنفسجي‬ ‫الموف‬ ‫عمى‬ ‫لمحصوؿ‬ ‫المثاؿ‬ ‫بيؿ‬
‫األحمر‬ ‫و‬ ‫األزرؽ‬‫األخضر‬ ‫الموف‬ ‫مف‬ ‫نسبة‬ ‫أي‬ ‫دوف‬‫و‬‫البنفسجي‬ ‫الموف‬ ‫قيمة‬ ‫تصبح‬ ‫بيذا‬#FF00FF‫و‬
‫المثاؿ‬ ‫سبيؿ‬ ‫عمى‬ ‫لتصبحا‬ ‫األزرؽ‬ ‫و‬ ‫األحمر‬ ‫درجة‬ ‫تخفيؼ‬ ‫عبر‬ ‫الموف‬ ‫ج‬‫بتدر‬ ‫التحكـ‬ ‫يمكف‬#8B008B‫و‬
‫ىكذا‬‫الموف‬ ‫تمثيؿ‬ ‫حالة‬ ‫في‬ ‫أما‬ ,‫التابع‬ ‫عبر‬rgb‫الموف‬ ‫الثانية‬ ‫تمثؿ‬ ‫و‬ ,‫األحمر‬ ‫الموف‬ ‫األولى‬ ‫الخانة‬ ‫فتمثؿ‬
‫بيف‬ ‫ج‬‫تتدر‬ ‫خانة‬ ‫كؿ‬ ‫قيمة‬ ‫لكف‬ ‫األزرؽ‬ ‫الموف‬ ‫الثالثة‬ ‫تمثؿ‬ ‫و‬ ,‫األخضر‬0‫و‬ ‫أدنى‬ ‫كحد‬255.‫أقصى‬ ‫كحد‬
:‫النصوص‬ ‫مظير‬ ‫خصائص‬ ‫استخداـ‬ ‫يعرض‬ ‫الذي‬ ‫و‬ ‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬
<html>
<head>
<title>
‫طفحخ‬‫إٌظٛص‬ ‫ِظٙش‬ ‫ٌخظبئض‬ ‫اخزجبس‬
</title>
<style type="text/css">
p {
text-align:justify;
color:#ff0000;
text-decoration:underline;
direction:rtl;
}

104. ٔٓٗ
</style>
</head>
<body>
<p>
‫اخزجبس‬ ‫طفحخ‬ ٓ‫ػ‬ ‫ػجبسح‬ ‫اٌظفحخ‬ ٖ‫٘ز‬ ْ‫إ‬‫ِظٙش‬ ‫ٌخظبئض‬‫إٌض‬ٟ‫ف‬
‫اٌّٛجٛد‬ ‫إٌض‬ ‫إؿبٌخ‬ ‫رؼّذٔب‬ ‫لذ‬ ٚ ‫االٔس١بث١خ‬ ‫األّٔبؽ‬ ‫أٚساق‬
‫خبط١خ‬ ًّ‫ػ‬ ‫ٌ١ظٙش‬ ‫اٌفمشح‬ ٖ‫٘ز‬ ‫ٔٙب٠خ‬ ٚ ‫ثذا٠خ‬ ّٟ‫ٚس‬ ٓ١‫ث‬
ٖ‫ٌٙز‬ ‫ٔؼشػٙب‬ ‫سٛف‬ ٟ‫اٌز‬ ‫اٌشبشخ‬ ‫ٌمـخ‬ ٟ‫ف‬ ‫اٌّحبراح‬‫اٌظفحخ‬.
</p>
</body>
</html>
‫في‬ ‫يبدو‬ ‫الذي‬ ‫و‬:‫كمايمي‬ ‫الويب‬ ‫مستعرض‬
‫الشكل‬34‫النصوص‬ ‫مظهر‬ ‫خصائص‬ ‫استخدام‬ :

105. ٔٓ٘
‫الخطوط‬ ‫خصائص‬Fonts
‫توفر‬CSS‫بالخطوط‬ ‫لمتحكـ‬ ‫الخصائص‬ ‫مف‬ ‫مجموعة‬Fonts‫في‬ ‫الخطوط‬ ‫مع‬ ‫التعامؿ‬ ‫يتـ‬ ‫و‬ ,
CSS‫ػ‬‫ب‬ ‫منيا‬ ‫كؿ‬ ‫تدعى‬ ‫مجموعات‬ ‫شكؿ‬ ‫عمى‬"‫خطوط‬ ‫عائمة‬"font-family‫إسناد‬ ‫يتـ‬ ‫حيث‬ ,‫خط‬
‫يتيـ‬ٖٔ
‫بف‬ ‫مفصولة‬ ‫خط‬ ‫مف‬ ‫أكثر‬ ‫أسماء‬ ‫أو‬‫و‬‫اصؿ‬comma‫إلى‬‫ال‬‫خاصية‬font-family‫يكوف‬ ‫و‬
‫ىو‬ ‫األوؿ‬ ‫الخط‬‫الخط‬‫المستعرض‬ ‫عمى‬ ‫يتعذر‬ ‫التي‬ ‫الحالة‬ ‫في‬ ‫و‬ ,‫اضي‬‫ر‬‫اّلفت‬‫فييا‬‫الخط‬ ‫عمى‬ ‫العثور‬
‫اضي‬‫ر‬‫اّلفت‬.‫ىكذا‬ ‫و‬ ‫اضي‬‫ر‬‫اّلفت‬ ‫ىو‬ ‫التالي‬ ‫الخط‬ ‫يجعؿ‬ ‫فإنو‬
‫توفر‬CSS‫الخ‬ ‫مف‬ ‫اضية‬‫ر‬‫افت‬ ‫ائؿ‬‫و‬‫ع‬ ‫ثالثة‬‫العائمة‬ ‫ىي‬ ‫طوط‬Serif‫العائمة‬ ‫و‬Sans-serif‫و‬
‫العائمة‬Monospace‫ية‬‫ز‬‫اإلنجمي‬ ‫لمغة‬ ‫الثانية‬ ‫العائمة‬ ‫باستعماؿ‬ ‫ينصح‬ ‫و‬‫عرض‬ ‫عند‬ ‫الثالثة‬ ‫العائمة‬ ‫و‬
‫الويب‬ ‫صفحة‬ ‫في‬ ‫البرمجة‬ ‫لغات‬ ‫ات‬‫ر‬‫شيف‬ ‫مثؿ‬ ‫الحاسوبية‬ ‫ات‬‫ر‬‫الشيف‬.
‫توفر‬ ‫كما‬CSS‫الخاصية‬ ‫ىي‬ ‫بالخطوط‬ ‫لمتحكـ‬ ‫الخصائص‬ ‫مف‬ ‫ى‬‫أخر‬ ‫مجموعة‬font-style‫و‬
‫القيـ‬ ‫إلييا‬ ‫تسند‬ ‫أف‬ ‫يمكف‬ ‫التي‬italic‫و‬ )‫المائؿ‬ ‫(الخط‬normal‫الخاصية‬ ‫و‬ ,)‫العادي‬ ‫(الخط‬
font-size‫تستخدـ‬ ‫التي‬ ‫و‬‫احدة‬‫و‬‫بال‬ ‫أو‬ ‫بالبكسؿ‬ ‫النص‬ ‫حجـ‬ ‫لتحديد‬em‫(كؿ‬ٔem=ٔٙ
:‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬ ,)‫بكسؿ‬
<html>
<head>
<title>
‫اٌخ‬ ‫ٌخظبئض‬ ‫اخزجبس‬ ‫طفحخ‬‫ـٛؽ‬
</title>
<style type="text/css">
ٖٔ
.‫احد‬‫و‬ ‫خط‬ ‫مف‬ ‫مكونة‬ ‫الخطوط‬ ‫عائمة‬ ‫فييا‬ ‫تكوف‬ ‫التي‬ ‫لمحالة‬ ‫اليتيـ‬ ‫الخط‬ ‫مصطمح‬ ‫اجترحت‬

106. ٔٓٙ
p {
font-family:"Tahoma","Simplified Arabic",sans-serif;
font-size:1.5em;
font-style:italic;
direction:rtl;
}
</style>
</head>
<body>
<p>
‫ٌخظبئض‬ ‫اخزجبس‬ ‫طفحخ‬ ٓ‫ػ‬ ‫ػجبسح‬ ‫اٌظفحخ‬ ٖ‫٘ز‬ ْ‫إ‬‫اٌخـٛؽ‬‫أٚساق‬ ٟ‫ف‬
.‫االٔس١بث١خ‬ ‫األّٔبؽ‬
</p>
</body>
</html>
:‫الويب‬ ‫مستعرض‬ ‫في‬ ‫كمايمي‬ ‫تبدو‬ ‫التي‬ ‫و‬
‫الشكل‬35‫الخطوط‬ ‫خصائص‬ ‫استخدام‬ :

107. ٔٓٚ
:‫ممحوظة‬‫حوؿ‬ ‫اقتباس‬ ‫عالمتي‬ ‫نضع‬ ‫لـ‬‫القيمة‬sans-serif‫ألننا‬‫عائمة‬ ‫نقصد‬‫تحمؿ‬ ‫التي‬ ‫و‬ ‫اضية‬‫ر‬‫اّلفت‬ ‫الخطوط‬
‫اسـ‬sans-serif.
‫ابط‬‫و‬‫الر‬ ‫مظهر‬ ‫خصائص‬
‫ابط‬‫و‬‫لمر‬ ‫خاصة‬ ‫محددات‬ ‫توجد‬ ‫لكف‬ ‫و‬ ,‫ابط‬‫و‬‫الر‬ ‫لمظير‬ ‫خاصة‬ ‫خصائص‬ ‫توجد‬ ‫ّل‬ ‫الحقيقة‬ ‫في‬
:‫ىي‬ ‫المحددات‬ ‫و‬ ,‫المختمفة‬ ‫حاّلتو‬ ‫في‬ ‫ابط‬‫ر‬‫ال‬ ‫مظير‬ ‫لتنسيؽ‬ ‫تستخدـ‬
a:link‫ا‬‫ر‬‫ال‬ ‫مظير‬ ‫لتنسيؽ‬ ‫يستخدـ‬ ‫الذي‬ ‫و‬‫لممحدد‬ ‫مكافئ‬ ‫ىو‬ ‫و‬ ‫العادية‬ ‫حالتو‬ ‫في‬ ‫بط‬a‫إذا‬
.‫وحده‬ َ‫ـ‬ِ‫خد‬ُ‫است‬
a:visited.ً‫ا‬‫مسبق‬ ‫عميو‬ ‫النقر‬ ‫تـ‬ ‫الذي‬ ‫ابط‬‫ر‬‫ال‬ ‫مظير‬ ‫لتنسيؽ‬ ‫يستخدـ‬ ‫الذي‬ ‫و‬
a:hove.‫عميو‬ ‫ة‬‫ر‬‫الفأ‬ ‫ر‬ِّ‫مؤش‬ ‫مرور‬ ‫عندما‬ ‫ابط‬‫ر‬‫ال‬ ‫مظير‬ ‫لتنسيؽ‬ ‫يستخدـ‬ ‫الذي‬ ‫و‬
a:active‫ع‬ ‫النقر‬ ‫لحظة‬ ‫ابط‬‫ر‬‫ال‬ ‫مظير‬ ‫لتنسيؽ‬ ‫يستخدـ‬ ‫الذي‬ ‫و‬.‫ميو‬
:‫الخاصة‬ ‫المحددات‬ ‫ىذه‬ ‫استخداـ‬ ‫يعرض‬ ‫التالي‬ ‫المثاؿ‬ ‫و‬
<html>
<head>
<title>
‫ٌخظبئض‬ ‫اخزجبس‬ ‫طفحخ‬‫اٌشٚاثؾ‬ ‫ِظٙش‬
</title>
<style type="text/css">
a:link{text-decoration:none;color:blue;}
a:visited{color:green;}
a:hover{text-decoration:underline;}
a:active{font-size:120%;}
</style>

108. ٔٓٛ
</head>
<body>
<a href="#">normal link</a> <br/>
<a href="www.google.com">visited link</a> <br/>
<a href="#">hover link</a> <br/>
<a href="#">normal link 2</a> <br/>
</body>
</html>
:‫ابط‬‫و‬‫الر‬ ‫بعض‬ ‫ة‬‫ر‬‫يا‬‫ز‬ ‫بعد‬ ‫الويب‬ ‫صفحة‬ ‫في‬ ‫السابؽ‬ ‫المثاؿ‬ ‫يبدو‬
‫الشكل‬36‫الثاني‬ ‫ة‬‫زيار‬ ‫بعد‬ ‫و‬ ‫الثالث‬ ‫ابط‬‫ر‬‫ال‬ ‫عمى‬ ‫النقر‬ ‫لحظة‬ ‫ابط‬‫و‬‫الر‬ ‫مظهر‬ ‫اختبار‬ ‫صفحة‬ ‫تبدو‬ ‫هكذا‬ :
:‫ممحوظة‬‫يجب‬‫قاعدة‬ ‫ذكر‬a:hover‫بعد‬a:link‫و‬a:visited‫ذكر‬ ‫يجب‬ ‫كما‬ ,a:active‫بعد‬a:hover.
‫الخمفيات‬ ‫خصائص‬Backgrounds
‫توفر‬CSS‫عف‬ ‫بالحديث‬ ‫اضيا‬‫ر‬‫استع‬ ‫نبدأ‬ ,‫العناصر‬ ‫خمفيات‬ ‫لتنسيؽ‬ ‫الخصائص‬ ‫مف‬ ‫مجموعة‬
‫الخاصية‬background-color‫قيمة‬ ‫بإسناد‬ ‫العناصر‬ ‫ألحد‬ ‫َّة‬‫لوني‬ ‫خمفية‬ ‫لتحديد‬ ‫تستخدـ‬ ‫التي‬ ‫و‬
:‫بالشكؿ‬ ‫إلييا‬ ‫الموف‬

109. ٜٔٓ
background-color:#CF1A11;
‫لمخاصية‬ ‫ة‬‫ر‬‫الصو‬ ‫مسار‬ ‫إسناد‬ ‫عبر‬ ‫العناصر‬ ‫ألحد‬ ‫كخمفية‬ ‫ة‬‫ر‬‫صو‬ ‫تعييف‬ ‫يمكف‬ ‫و‬background-
image:‫بالشكؿ‬
background-image:url(‘image.jpg’);
‫تحديد‬ ‫يتـ‬ ‫العنصر‬ ‫حجـ‬ ‫مف‬ ‫أصغر‬ )‫َّة‬‫(الخمفي‬ ‫ة‬‫ر‬‫الصو‬ ‫حجـ‬ ‫كوف‬ ‫حاؿ‬ ‫في‬ ‫و‬‫ة‬‫ر‬‫الصو‬ ‫ار‬‫ر‬‫تك‬ ‫يقة‬‫ر‬‫ط‬
‫الخاصة‬ ‫عبر‬background-repeat‫ف‬‫القيمة‬ ‫إسناد‬ ‫يتـ‬repeat-x‫أو‬ ‫أفقي‬ ‫بشكؿ‬ ‫ة‬‫ر‬‫الصو‬ ‫ار‬‫ر‬‫لتك‬
‫القيمة‬repeat-y‫أو‬ ‫عمودي‬ ‫بشكؿ‬ ‫ة‬‫ر‬‫الصو‬ ‫ار‬‫ر‬‫لتك‬repeat‫أو‬ ً‫ا‬‫مع‬ ‫عمودي‬ ‫و‬ ‫أفقي‬ ‫بشكؿ‬ ‫ىا‬‫ار‬‫ر‬‫لتك‬
no-repeat‫ة‬‫ر‬‫الصو‬ ‫ار‬‫ر‬‫تك‬ ‫عدـ‬ ‫فيمكف‬ ‫الثانية‬ ‫الحالة‬ ‫في‬ ‫أما‬ ,‫األولى‬ ‫الحالة‬ ‫في‬ ‫ىذا‬ ‫و‬ ‫ار‬‫ر‬‫التك‬ ‫لعدـ‬
‫موضعيا‬ ‫تحديد‬ ‫و‬‫ال‬ ‫يؽ‬‫ر‬‫ط‬ ‫عف‬‫خاصية‬background-position‫أكثر‬ ‫أو‬ ‫احدة‬‫و‬ ‫إسناد‬ ‫يتـ‬ ‫حيث‬
‫القيـ‬ ‫مف‬left top‫أو‬left center‫أو‬left bottom‫أو‬center top‫أو‬center center‫أو‬
center bottom‫أو‬right top‫أو‬right center‫أو‬right bottom‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬ ,‫و‬
‫يف‬‫ر‬‫عنص‬ ‫فيو‬ ‫سنعرض‬ ‫الذي‬<p>‫ية‬‫ر‬‫صو‬ ‫بخمفية‬ ‫اآلخر‬ ‫و‬ ‫لونية‬ ‫بخمفية‬ ‫األوؿ‬:
<html>
<head>
<title>
‫اٌخٍف١خ‬ ‫ٌخظبئض‬ ‫اخزجبس‬ ‫طفحخ‬
</title>
<style type="text/css">
.firstP {
background-color:black;
color:white;
}
.secondP {

110. ٔٔٓ
background-image:url(‘image1.jpg’);
background-repeat:no-repeat;
background-position:center center;
}
p {direction:rtl;}
</style>
</head>
<body>
<p class="firstP">
‫ا‬‫األ‬ ‫ٌؼٕظش‬١‫س‬ ‫ٚي‬‫ج‬‫أث١غ‬ ‫ٔض‬ ٌْٛ ٚ ‫سٛداء‬ ‫ثخٍف١خ‬ ٚ‫ذ‬
</p>
<p class="secondP">
‫ٌٙزا‬ ٚ ‫طٛس٠خ‬ ‫ثخٍف١خ‬ ٚ‫س١جذ‬ ٟٔ‫اٌثب‬ ‫اٌؼٕظش‬ <br/><br/>
‫اٌؼٕظش‬ ‫٘زا‬ ‫ِٕح‬ ‫ثغ١خ‬ ‫أسـش‬ ‫ثؼؼخ‬ ‫ثبٌٕضٚي‬ َٛ‫سأل‬ <br/>
<br/>
‫اٌخٍف١خ‬ ‫اٌظٛسح‬ ‫ٌؼشع‬ ‫اٌىبف١خ‬ ‫اٌّسبحخ‬
</p>
</body>
</html>
‫بالفئات‬ ‫التحديد‬ ‫باسـ‬ ‫تعرؼ‬ ‫العناصر‬ ‫لتحديد‬ ‫خاصة‬ ‫يقة‬‫ر‬‫ط‬ ‫ىناؾ‬ :‫ممحوظة‬classes‫بأي‬ ‫المحدد‬ ‫استبداؿ‬ ‫يتـ‬ ‫حيث‬
‫الفئة‬ ‫يؼ‬‫ر‬‫بتع‬ ‫يعرؼ‬ ‫ما‬ ‫ىذا‬ ‫و‬ ‫بنقطة‬ ً‫ا‬‫مسبوق‬ ‫اسـ‬class‫في‬CSS)‫نقطة‬ ‫(دوف‬ ‫الفئة‬ ‫ىذه‬ ‫اسـ‬ ‫إسناد‬ ‫يتـ‬ ‫ذلؾ‬ ‫بعد‬ ,
‫اصفة‬‫و‬‫ال‬ ‫إلى‬class.‫الفئة‬ ‫قاعدة‬ ‫في‬ ‫ة‬‫ر‬‫المذكو‬ ‫لمخصائص‬ ً‫ا‬‫مطابق‬ ‫ىا‬‫مظير‬ ‫بجعؿ‬ ‫غب‬‫نر‬ ‫التي‬ ‫لمعناصر‬
‫يبدو‬‫السابؽ‬ ‫المثاؿ‬:‫كمايمي‬ ‫الويب‬ ‫مستعرض‬ ‫في‬

111. ٔٔٔ
‫الشكل‬37‫الخمفية‬ ‫خصائص‬ ‫اختبار‬ ‫صفحة‬ ‫تبدو‬ ‫هكذا‬ :
‫ائم‬‫و‬‫الق‬ ‫مظهر‬ ‫خصائص‬
‫يتـ‬‫ائـ‬‫و‬‫الق‬ ‫مظير‬ ‫تخصيص‬‫في‬CSS‫تخصيص‬ ‫عبر‬‫ع‬‫نو‬‫عنصر‬ ‫كؿ‬ ‫أماـ‬ ‫المعروض‬ ‫قـ‬‫ر‬‫الرمز/ال‬
‫الخا‬ ‫خالؿ‬ ‫مف‬ ‫ىذا‬ ‫يتـ‬ ‫و‬ ,‫القائمة‬ ‫عناصر‬ ‫مف‬‫ص‬‫التاليتيف‬ ‫يتيف‬:
list-style-type‫ع‬‫نو‬ ‫لتحديد‬ ‫تستخدـ‬ ‫التي‬ ‫و‬ :‫الرمز‬‫مف‬ ‫عنصر‬ ‫كؿ‬ ‫أماـ‬ ‫قيـ‬‫ر‬‫/الت‬
‫القائمة‬ ‫عناصر‬,‫القيـ‬ ‫تأخذ‬ ‫و‬circle‫و‬square‫و‬disc‫و‬none‫حالة‬ ‫في‬
‫تبة‬‫ر‬‫الم‬ ‫غير‬ ‫القائمة‬,‫القيـ‬ ‫و‬upper-roman‫و‬lower-roman‫و‬lower-
alpha‫و‬upper-alpha‫و‬lower-latin‫و‬upper-latin‫و‬decimal‫و‬
.‫تبة‬‫ر‬‫الم‬ ‫القائمة‬ ‫حالة‬ ‫في‬ ‫ىا‬‫غير‬
list-style-image‫مف‬ ‫عنصر‬ ‫كؿ‬ ‫أماـ‬ ‫خاصة‬ ‫ة‬‫ر‬‫صو‬ ‫لوضع‬ ‫تستخدـ‬ ‫التي‬ ‫و‬ :
‫القائمة‬ ‫عناصر‬‫تستخدـ‬ ‫و‬ ,‫لو‬ ‫كرمز‬:‫بالشكؿ‬
list-style-image:url('image.gif');

112. ٕٔٔ
:‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬
<html>
<head>
<title>
‫ٌخظبئض‬ ‫اخزجبس‬ ‫طفحخ‬ُ‫اٌمٛائ‬ ‫ِظٙش‬
</title>
<style type="text/css">
ul {list-style-type:square;}
ol {list-style-image:url('dot.gif');}
</style>
</head>
<body>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
</body>
</html>

113. ٖٔٔ
:‫كمايمي‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫المثاؿ‬ ‫ىذا‬ ‫يبدو‬
‫الشكل‬38‫في‬ ‫ائم‬‫و‬‫الق‬ ‫مظهر‬ ‫خصائص‬ ‫اختبار‬ ‫صفحة‬ ‫تبدو‬ ‫هكذا‬ :‫الويب‬ ‫مستعرض‬
‫الجداول‬ ‫مظهر‬ ‫خصائص‬
‫عناصر‬ ‫أكثر‬ ‫ىي‬ ‫الجداوؿ‬ ‫أف‬ ‫أظف‬HTML‫التي‬‫مف‬ ‫تستفيد‬CSS‫إذا‬‫كيفية‬ ‫الويب‬ ‫مطور‬ ‫عرؼ‬
‫توظيؼ‬‫خصائص‬CSS:ً‫ّل‬‫و‬‫أ‬ ‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬ ,‫المناسب‬ ‫بالشكؿ‬ ً‫ا‬‫سابق‬ ْ‫ت‬َ‫ض‬ِ‫ر‬ُ‫ع‬ ‫التي‬
<html>
<head>
<style type="text/css">
table
{
font-family:"Trebuchet MS", sans-serif;
width:100%;
border-collapse:collapse;

114. ٔٔٗ
direction:rtl;
text-align:center;
}
td, th
{
font-size:1em;
border:1px solid #98bf21;
}
th
{
font-size:1.1em;
background-color:#A7C942;
color:#ffffff;
}
.alt td
{
color:#000000;
background-color:#EAF2D3;
}
</style>
</head>
<body>
<table>
<tr>
<th>‫الشركة‬</th>

115. ٔٔ٘
<th>‫اف‬‫و‬‫العن‬</th>
<th>‫البمد‬</th>
</tr>
<tr>
<td> ‫الوىمية‬ ‫الشركة‬ٔ </td>
<td>‫دمشؽ‬</td>
<td>‫يا‬‫ر‬‫سو‬</td>
</tr>
<tr class="alt">
<td> ‫الوىمية‬ ‫الشركة‬ٕ </td>
<td>‫بغداد‬</td>
<td>‫اؽ‬‫ر‬‫الع‬</td>
</tr>
<tr>
…
‫اٌجذٚي‬ ‫ش١فشح‬ ‫آخش‬ ٌٝ‫إ‬
…
</table>
</body>
</html>
:‫كمايمي‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫المثاؿ‬ ‫ىذا‬ ‫يبدو‬

116. ٔٔٙ
‫الشكل‬39‫توظيف‬ :CSS‫الجداول‬ ‫مظهر‬ ‫لتنسيق‬
‫ه‬‫ر‬‫ذك‬ ‫يجب‬ ‫ما‬ ‫و‬‫خصائص‬ ‫مف‬CSS:‫مايمي‬ ‫ىو‬ ‫السابؽ‬ ‫المثاؿ‬ ‫عف‬ ‫الحديث‬ ‫عند‬
border‫عف‬ ‫يعبر‬ ‫لوف‬ ‫و‬ ‫الجدوؿ‬ ‫حدود‬ ‫سماكة‬ ‫عف‬ ‫تعبر‬ ‫بالبكسؿ‬ ‫قيمة‬ ‫إلييا‬ ‫يسند‬ ‫التي‬ ‫و‬ :
‫متصؿ‬ ‫(خط‬ ‫الحدود‬ ‫ع‬‫نو‬ ‫تحديد‬ ‫إلى‬ ‫باإلضافة‬ ‫الحدود‬ ‫لوف‬solid‫متقطع‬ ‫خط‬ ,dashed,
‫منقط‬dotted)‫إلخ‬ ..‫بيف‬ ‫المسافة‬ ‫محرؼ‬ ‫يفصؿ‬ ‫بالطبع‬ ‫و‬ ,‫القيـ‬ ‫ىذه‬‫عف‬ ‫الحديث‬ ‫(سيتـ‬
)‫ّلحقة‬ ‫ة‬‫ر‬‫فق‬ ‫في‬ ً‫ال‬‫تفصي‬ ‫أكثر‬ ‫بشكؿ‬ ‫الخاصية‬ ‫ىذه‬.
border-collapse‫احد‬‫و‬ ‫حد‬ ‫وجود‬ ‫اعتبار‬ ‫و‬ ‫الخاليا‬ ‫حدود‬ ‫طي‬ ‫سيتـ‬ ‫ىؿ‬ ‫تحدد‬ ‫التي‬ ‫و‬ :
‫(القيمة‬ ‫خميتيف‬ ‫كؿ‬ ‫بيف‬collapse.‫اآلخر‬ ‫عف‬ ً‫ال‬‫مستق‬ ‫خمية‬ ‫كؿ‬ ‫حد‬ ‫اعتبار‬ ‫سيتـ‬ ‫أـ‬ )
‫الج‬ ‫محتويات‬ ‫اءة‬‫ر‬‫ق‬ ‫لتسييؿ‬ :‫ممحوظة‬‫النصوص‬ ‫اف‬‫و‬‫أل‬ ‫و‬ ‫الخمفية‬ ‫اف‬‫و‬‫أل‬ ‫متناوبة‬ ‫الجدوؿ‬ ‫أسطر‬ ‫بجعؿ‬ ً‫ا‬‫دائم‬ ‫ينصح‬ ‫دوؿ‬
‫عبر‬ ‫حققناه‬ ‫ما‬ ‫ىذا‬ ‫و‬ ,‫السابؽ‬ ‫مثالنا‬ ‫في‬ ‫المعروض‬ ‫الجدوؿ‬ ‫في‬ ‫فعمنا‬ ‫كما‬‫استخداـ‬‫الفئة‬.alt‫التناوب‬ ‫ىذا‬ ‫يعرؼ‬ ,
‫باسـ‬ ‫الموني‬Zebra-stripping

117. ٔٔٚ
َ‫الموض‬ ‫خصائص‬‫ع‬‫ة‬Positioning
‫في‬ ‫عة‬َ‫الموض‬ ‫خصائص‬ ‫تتيح‬CSS‫عندما‬ ‫العنصر‬ ‫عرض‬ ‫يتـ‬ ‫كيؼ‬ ‫و‬ ,‫العنصر‬ ‫ع‬ ِ‫موض‬ ‫تحديد‬
‫كم‬ ,ً‫ا‬‫جد‬ ً‫ا‬‫ر‬‫كبي‬ ‫اه‬‫و‬‫محت‬ ‫يكوف‬‫لتحديد‬ ‫اع‬‫و‬‫أن‬ ‫عدة‬ ‫ىناؾ‬ ‫و‬ ,‫ى‬‫أخر‬ ‫عناصر‬ ‫خمؼ‬ ‫عناصر‬ ‫وضع‬ ‫يتيح‬ ‫ا‬
‫في‬ ‫العنصر‬ ‫موضع‬CSS:‫ىي‬ ‫و‬ ‫الحقيقة‬ ‫في‬
‫الستاتيكي‬ ‫ع‬‫النو‬Static‫بحسب‬ ‫أي‬ ‫الصفحة‬ ‫في‬ ‫ه‬‫ر‬‫ظيو‬ ‫مكاف‬ ‫في‬ ‫العنصر‬ ‫وضع‬ ‫يتـ‬ :
‫ظ‬ ‫موضع‬ ‫و‬ ‫تيب‬‫ر‬‫ت‬.‫اضي‬‫ر‬‫اّلفت‬ ‫ىو‬ ‫ع‬‫النو‬ ‫ىذا‬ ‫و‬ ,‫الصفحة‬ ‫وسوـ‬ ‫ضمف‬ ‫وسمو‬ ‫يور‬
‫الثابت‬ ‫ع‬‫النو‬Fixed‫بالبكسؿ‬ ‫إسنادىا‬ ‫يتـ‬ ‫ثابتة‬ ‫إلحداثيات‬ ً‫ا‬‫طبق‬ ‫العنصر‬ ‫وضع‬ ‫يتـ‬ :
‫لمخصائص‬top‫و‬left‫و‬right‫و‬bottom‫القيمة‬ ‫إسناد‬ ‫مع‬fixed‫الخاصية‬ ‫إلى‬
position‫األيسر‬ ‫العموي‬ ‫الركف‬ ‫اعتبار‬ ‫يتـ‬ ‫بالطبع‬ ‫و‬ ,‫لمصفحة‬.‫لإلحداثيات‬ ً‫ا‬‫ز‬‫مرك‬
‫النسبي‬ ‫ع‬‫النو‬Relative‫بالبسكؿ‬ ‫إسنادىا‬ ‫يتـ‬ ‫ثابتة‬ ‫إلحداثيات‬ ً‫ا‬‫طبق‬ ‫العنصر‬ ‫وضع‬ ‫يتـ‬ :
‫لمخصائص‬top‫و‬left‫و‬right‫و‬bottom‫القيمة‬ ‫إسناد‬ ‫مع‬relative‫الخاصية‬ ‫إلى‬
position‫يتـ‬ ‫و‬ ,‫األيسر‬ ‫العموي‬ ‫الركف‬ ‫اعتبار‬‫نفسو‬ ‫لمعنصر‬‫حالتو‬ ‫في‬‫الستاتيكية‬ً‫ا‬‫ز‬‫مرك‬
‫ل‬.‫إلحداثيات‬
‫ؽ‬َ‫م‬ْ‫ط‬ُ‫الم‬ ‫ع‬‫النو‬Absolute‫بالبكسؿ‬ ‫إسنادىا‬ ‫يتـ‬ ‫ثابتة‬ ‫إلحداثيات‬ ً‫ا‬‫طبق‬ ‫العنصر‬ ‫وضع‬ ‫يتـ‬ :
‫لمخصائص‬top‫و‬left‫و‬right‫و‬bottom‫القيمة‬ ‫إسناد‬ ‫مع‬absolute‫الخاصية‬ ‫إلى‬
position‫العموي‬ ‫األيسر‬ ‫الركف‬ ‫اعتبار‬ ‫يتـ‬ ‫و‬ ,‫أب‬ ‫عنصر‬ ‫ألوؿ‬‫ستاتيكي‬ ‫غير‬ ‫بموضع‬
‫لإلحداثي‬ ً‫ا‬‫ز‬‫مرك‬‫اعتبار‬ ‫يتـ‬ ‫ستاتيكي‬ ‫غير‬ ‫بموضع‬ ‫أب‬ ‫عنصر‬ ‫أي‬ ‫وجود‬ ‫عـ‬ ‫حاؿ‬ ‫في‬ ‫و‬ ,‫ات‬
‫ل‬ ‫العموي‬ ‫األيسر‬ ‫الركف‬‫معنصر‬<html>.‫لإلحداثيات‬ ً‫ا‬‫ز‬‫مرك‬
:‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬
<html>
<head>

118. ٔٔٛ
<style type="text/css">
* {direction:rtl;}
h1
{ position:absolute; left:100px; top:150px; }
</style>
</head>
<body>
<h1>‫ِـٍمخ‬ ‫ثئحذاث١بد‬ ْ‫اٌؼٕٛا‬ ‫٘زا‬</h1>
<p> ً‫ب‬‫ؿجم‬ ‫اٌؼٕظش‬ ‫ػشع‬ ُ‫٠ز‬ ‫اٌّـٍمخ‬ ‫اإلحذاث١بد‬ ‫حبٌخ‬ ٟ‫ف‬
ٟ‫ف‬ ّٗ‫ٚس‬ ‫ٚسٚسد‬ ْ‫ِىب‬ ٓ‫ػ‬ ‫إٌظش‬ ‫ثغغ‬ ٗ‫ٌخظبئظ‬ ‫اٌّّشح‬ ‫ٌإلحذاث١بد‬
‫اٌظفحخ‬ ‫ش١فشح‬</p>
</body>
</html>
‫الذي‬ ‫و‬:‫كمايمي‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫يبدو‬
‫الشكل‬41‫في‬ ‫العناصر‬ ‫ة‬َ‫ع‬َ‫موض‬ ‫خصائص‬ ‫استخدام‬ ‫عمى‬ ‫مثال‬ :CSS
‫الخاص‬ ‫المحدد‬ :‫ممحوظة‬*.‫المستند‬ ‫عناصر‬ ‫جميع‬ ‫بتحديد‬ ‫يقوـ‬

119. ٜٔٔ
‫الخاصية‬ ‫يؽ‬‫ر‬‫ط‬ ‫عف‬ ‫ى‬‫أخر‬ ‫عناصر‬ ‫خمؼ‬ ‫عناصر‬ ‫وضع‬ ‫يمكف‬z-index‫قـ‬‫ر‬ ‫بإسناد‬ ‫ذلؾ‬ ‫و‬
‫ػ‬‫ل‬‫ا‬ ‫ذو‬ ‫العنصر‬ ‫إظيار‬ ‫يتـ‬ ‫حيث‬ ,‫إلييا‬ ‫صحيح‬z-index‫لنشاىد‬ ,‫ى‬‫األخر‬ ‫العناصر‬ ‫أماـ‬ ‫األعمى‬
:‫التالي‬ ‫المثاؿ‬
<html>
<head>
<style type="text/css">
* {direction:rtl;}
img
{
position:absolute;
left:100px;
top:50px;
z-index:-1;
}
</style>
</head>
<body>
<h1>‫اٌفمشح‬ ْ‫ػٕٛا‬</h1>
<img src="image1.jpg" width="100" height="140" />
<p>‫اٌـ‬ ‫ل١ّخ‬ ْ‫أل‬ ‫إٌض‬ ‫٘زا‬ ‫خٍف‬ ‫اٌظٛسح‬ ‫رظٙش‬ ‫سٛف‬
z-index
‫طفش‬ ٞٚ‫رسب‬ ٟ‫اٌز‬ ٚ ‫ثبٌٕض‬ ‫اٌخبطخ‬ ‫اٌم١ّخ‬ ِٓ ً‫أل‬ ‫ثٙب‬ ‫اٌخبص‬
ٟ‫افزشاػ‬ ً‫ثشى‬
</p>

120. ٕٔٓ
</body>
</html>
:‫كمايمي‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫يبدو‬ ‫الذي‬ ‫و‬
‫الشكل‬41‫الخاصية‬ ‫استخدام‬ ‫عمى‬ ‫مثال‬ :z-index
‫ف‬ ‫يكوف‬ ‫التي‬ ‫الحالة‬ ‫في‬ ‫ير‬‫ر‬‫تم‬ ‫أشرطة‬ ‫عرض‬ ً‫ا‬‫أيض‬ ‫يمكف‬,‫حجمو‬ ‫مف‬ ‫بكثير‬ ‫أكبر‬ ‫العنصر‬ ‫محتوى‬ ‫ييا‬
‫القيمة‬ ‫إسناد‬ ‫يؽ‬‫ر‬‫ط‬ ‫عف‬ ‫ذلؾ‬ ‫و‬scroll‫الخاصية‬ ‫إلى‬overflow:‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬ ,
<html>
<head>
<style type="text/css">
* {direction:rtl;}
div
{
background-color:#00FFFF;
width:250px;

121. ٕٔٔ
height:100px;
overflow:scroll;
}
</style>
</head>
<body>
<div>
<p> ‫إٌض‬ ‫أثؼبد‬ ِٓ ً‫أل‬ ْٛ‫سزى‬ ٌٟ‫اٌحب‬ ‫اٌؼٕظش‬ ‫أثؼبد‬ ْ‫أل‬
‫إؿبٌخ‬ ‫سأحبٚي‬ ‫ٌٙزا‬ ٚ ‫اٌزّش٠ش‬ ‫أششؿخ‬ ‫ػشع‬ ُ‫س١ز‬ ْ٢‫ا‬ ٖ‫رمشأ‬ ٞ‫اٌز‬
.ٗ١ٌ‫إ‬ ‫اإلػبف١خ‬ ‫اٌىٍّبد‬ ‫ثؼغ‬ ‫ثئػبفخ‬ ‫أوثش‬ ‫إٌض‬</p>
</div>
</body>
</html>
:‫الويب‬ ‫مستعرض‬ ‫في‬ ‫كمايمي‬ ‫السابؽ‬ ‫المثاؿ‬ ‫يبدو‬
‫الشكل‬42‫الكبير‬ ‫المحتوى‬ ‫ذات‬ ‫لمعناصر‬ ‫التمرير‬ ‫أشرطة‬ ‫عرض‬ ‫عمى‬ ‫مثال‬ :

122. ٕٕٔ
‫في‬ ‫القياس‬ ‫احدات‬‫و‬CSS
‫العناصر‬ ‫أبعاد‬ ‫تحديد‬ ‫يتـ‬‫المثاؿ‬ ‫سبيؿ‬ ‫عمى‬‫خالؿ‬ ‫مف‬‫خاصيتي‬‫العرض‬width‫و‬‫تفاع‬‫ر‬‫اّل‬height
‫قيـ‬ ‫بإسناد‬ ‫وذلؾ‬:‫التالية‬ ‫القياس‬ ‫احدات‬‫و‬ ‫بإحدى‬ ‫أو‬ ‫بالبكسؿ‬ ‫قمية‬‫ر‬
‫احدة‬‫و‬‫ال‬‫الشرح‬‫مثال‬
px‫بكسؿ‬150px
%‫المئوية‬ ‫بالنسبة‬50%
em‫كؿ‬ٔem‫يساوي‬ٔٙ‫بكسؿ‬1.5em
in‫إنش‬1in
cm‫ميتر‬ ‫سنتي‬1cm
mm‫ميتر‬ ‫ميمي‬100mm
pt= ‫(النقطة‬ ‫نقطة‬)‫إنش‬30pt
pc= ‫(البيكا‬ ‫بيكا‬ٕٔ= ‫نقطة‬)‫إنش‬15pc
‫الجدول‬11‫في‬ ‫القياس‬ ‫احدات‬‫و‬ :CSS
‫الصندوق‬ ‫نموذج‬CSS Box Model
‫الحديث‬ ‫عند‬‫ػ‬‫ب‬ ‫يعرؼ‬ ‫ما‬ ‫فيـ‬ ‫الحقيقة‬ ‫في‬ ‫يجب‬ ‫الويب‬ ‫صفحات‬ ‫تصميـ‬ ‫عف‬"‫الصندوؽ‬ ‫نموذج‬"‫أو‬
box model‫َّة‬‫ي‬‫ز‬‫باإلنجمي‬‫مستند‬ ‫عناصر‬ ‫مف‬ ‫عنصر‬ ‫كؿ‬ ‫تمثيؿ‬ ‫يتـ‬ ‫حيث‬ ,HTML‫في‬ ‫إنشائو‬ ‫عند‬
‫و‬ ‫الصندوؽ‬ ‫نموذج‬ ‫تشكؿ‬ ‫متداخمة‬ ‫مستطيالت‬ ‫بعة‬‫ر‬‫بأ‬ ‫المستعرض‬‫ىي‬:‫ج‬‫الخار‬ ‫إلى‬ ‫الداخؿ‬ ‫مف‬
ٔ-‫العنصر‬ ‫محتوى‬content‫العنصر‬ ‫نياية‬ ‫و‬ ‫بداية‬ ‫وسمي‬ ‫بيف‬ ‫موجود‬ ‫ىو‬ ‫ما‬ ‫كؿ‬ ‫يمثؿ‬ ‫و‬ :.
ٕ-‫احة‬‫ز‬‫اإل‬‫الداخمية‬padding‫المسافة‬ ‫تمثؿ‬ ‫و‬ :‫حدوده‬ ‫بيف‬ ‫و‬ ‫العنصر‬ ‫محتوى‬ ‫بيف‬ ‫الفاصمة‬.
ٖ-‫الحدود‬border‫لمعنصر‬ ‫الخارجي‬ ‫اإلطار‬ ‫يمثؿ‬ ‫و‬ :.
ٗ-‫الخارجية‬ ‫احة‬‫ز‬‫اإل‬margin‫بي‬ ‫الفاصمة‬ ‫المسافة‬ ‫تمثؿ‬ ‫و‬ :‫ف‬‫العناصر‬ ‫و‬ ‫العنصر‬ ‫حدود‬
‫المستند‬ ‫في‬ ‫ى‬‫األخر‬.

123. ٕٖٔ
‫التالي‬ ‫الشكؿ‬ ‫ح‬ِّ‫يوض‬:‫الصندوؽ‬ ‫نموذج‬
‫الشكل‬43‫ال‬ ‫نموذج‬ :‫صندوق‬box model
‫تتيح‬CSS‫مف‬ ‫مجموعة‬ ‫عبر‬ ‫بع‬‫ر‬‫األ‬ ‫المناطؽ‬ ‫ىذه‬ ‫مف‬ ‫منطقة‬ ‫بكؿ‬ ‫الكامؿ‬ ‫التحكـ‬ ‫الويب‬ ‫ر‬ِّ‫لمطو‬
.‫التالية‬ ‫ات‬‫ر‬‫الفق‬ ‫في‬ ‫نستعرضيا‬ ‫الخصائص‬
‫الحدود‬ ‫خصائص‬border
‫ت‬‫س‬‫مح‬CSS‫الخصائص‬ ‫عبر‬ ‫العناصر‬ ‫بحدود‬ ‫يتحكـ‬ ‫أف‬ ‫الويب‬ ‫لمطور‬border-width‫و‬
border-style‫و‬border-color,‫الخاصة‬ ‫إلى‬ ‫القياس‬ ‫احدات‬‫و‬ ‫بإحدى‬ ‫قمية‬‫ر‬ ‫قيمة‬ ‫إسناد‬ ‫يتـ‬
border-width‫الحدود‬ ‫سماكة‬ ‫مقدار‬ ‫عف‬ ‫تعبر‬,‫الحدود‬ ‫شكؿ‬ ‫عف‬ ‫تعبر‬ ‫نصية‬ ‫قيمة‬ ‫إسناد‬ ‫يتـ‬ ‫و‬
‫لمخاصية‬border-style‫القيـ‬ ‫إحدى‬ ‫تأخذ‬ ‫أف‬ ‫يمكف‬ ‫التي‬ ‫و‬dotted‫و‬ ‫المنقطة‬ ‫لمحدود‬dashed
‫لمحدود‬‫المت‬‫ق‬‫ط‬‫عة‬‫و‬solid‫العادية‬ ‫لمحدود‬‫و‬double‫و‬ ‫المضاعفة‬ ‫لمحدود‬groove‫و‬ridge‫و‬
inset‫و‬outset,‫األبعاد‬ ‫ثالثية‬ ‫لمحدود‬‫لنشاىد‬ ,‫الحدود‬ ‫لوف‬ ‫عف‬ ‫تعبر‬ ‫لونية‬ ‫قيمة‬ ‫إسناد‬ ‫يتـ‬ ‫و‬
:‫التالي‬ ‫المثاؿ‬
<html>
<head>

124. ٕٔٗ
<style type="text/css">
* { direction:rtl; }
.one
{ border-style:solid; }
.two
{ border-style:dashed; }
</style>
</head>
<body>
<p class="one"> ‫حذٚد‬٠‫ػبد‬‫خ‬ </p>
<p class="two"> ‫حذٚد‬‫ِزمـؼ‬‫خ‬ </p>
</body>
</html>
:‫كمايمي‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫يبدو‬ ‫الذي‬ ‫و‬

125. ٕٔ٘
‫شكؿ‬ ‫تحديد‬ ‫يمكف‬ :‫ممحوظة‬border-style‫بعة‬‫ر‬‫أ‬ ‫إسناد‬ ‫يؽ‬‫ر‬‫ط‬ ‫عف‬ ‫ذلؾ‬ ‫و‬ ‫الحدود‬ ‫اؼ‬‫ر‬‫أط‬ ‫مف‬ ‫طرؼ‬ ‫لكؿ‬ ‫خاص‬
‫لمخاصية‬ ‫اغات‬‫ر‬‫بف‬ ‫مفصولة‬ ‫قيـ‬border-style‫الثالثة‬ ‫و‬ ‫األيمف‬ ‫الحد‬ ‫شكؿ‬ ‫الثانية‬ ‫و‬ ‫العموي‬ ‫الحد‬ ‫شكؿ‬ ‫األولى‬ ‫تمثؿ‬
:‫بالشكؿ‬ ‫األيسر‬ ‫الحد‬ ‫شكؿ‬ ‫ابعة‬‫ر‬‫ال‬ ‫و‬ ‫السفمي‬ ‫الحد‬ ‫شكؿ‬
border-style: dotted dashed groove double;
‫أو‬‫الخصائص‬ ‫يؽ‬‫ر‬‫ط‬ ‫عف‬‫الفردية‬border-left-style‫و‬border-right-style‫و‬border-top-style‫و‬
border-bottom-style‫الموف‬ ‫خاصيتي‬ ‫عمى‬ ‫تنطبؽ‬ ‫الممحوظة‬ ‫ىذه‬ ‫فإف‬ ‫بالطبع‬ ‫و‬ ,border-color‫العرض‬ ‫و‬
border-width.
‫الداخمية‬ ‫احة‬‫ز‬‫اإل‬ ‫خصائص‬padding
‫(ال‬ ‫الداخمية‬ ‫احة‬‫ز‬‫اإل‬ ‫مقدار‬ ‫تحديد‬ ‫يتـ‬‫الخصائص‬ ‫يؽ‬‫ر‬‫ط‬ ‫عف‬ )‫حدوده‬ ‫و‬ ‫العنصر‬ ‫محتوى‬ ‫بيف‬ ‫مسافة‬
padding-left‫و‬ ‫األيسر‬ ‫الطرؼ‬ ‫احة‬‫ز‬‫إل‬padding-right‫و‬ ‫األيمف‬ ‫الطرؼ‬ ‫احة‬‫ز‬‫إل‬padding-
top‫و‬ ‫العموي‬ ‫الطرؼ‬ ‫احة‬‫ز‬‫إل‬padding-bottom‫الخاصية‬ ‫يؽ‬‫ر‬‫ط‬ ‫عف‬ ‫أو‬ ,‫السفمي‬ ‫الطرؼ‬ ‫احة‬‫ز‬‫إل‬
padding‫ال‬ ‫ىذه‬ ‫إلى‬ ‫د‬َ‫سن‬ُ‫ي‬ ‫و‬ ,‫اؼ‬‫ر‬‫األط‬ ‫جميع‬ ‫احة‬‫ز‬‫إل‬‫تعبر‬ ‫القياس‬ ‫احدات‬‫و‬ ‫بإحدى‬ ‫قيـ‬ ‫خصائص‬
:‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬ ,‫الداخمية‬ ‫احة‬‫ز‬‫اإل‬ ‫مقدار‬ ‫عف‬
<html>
<head>
<style type="text/css">
p
{ direction:rtl; background-color:black; color:white; }
.padding
{
padding-top:25px;
padding-bottom:25px;
padding-right:50px;

126. ٕٔٙ
padding-left:50px;
}
</style>
</head>
<body>
<p> ‫إصاحخ‬ ْٚ‫د‬ ‫اٌفمشح‬ ‫ٌؼٕظش‬ ‫اٌـج١ؼخ‬ ‫اٌحبٌخ‬ ٟ٘ ٖ‫٘ز‬
‫داخٍ١خ‬</p>
<p class="padding"> ٟ٘ ٖ‫٘ز‬‫اإلصاحخ‬ ‫ٚجٛد‬ ‫ِغ‬ ‫اٌفمشح‬ ‫ػٕظش‬ ‫حبٌخ‬
ٍ‫اٌذاخ‬‫١خ‬ </p>
</body>
</html>
:‫كمايمي‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫يبدو‬ ‫الذي‬ ‫و‬
‫الشكل‬44‫الداخمية‬ ‫احة‬‫ز‬‫اإل‬ ‫خصائص‬ ‫استخدام‬ ‫عمى‬ ‫مثال‬ :
‫الخارجية‬ ‫احة‬‫ز‬‫اإل‬ ‫خصائص‬margin
‫بيف‬ ‫(المسافة‬ ‫الخارجية‬ ‫احة‬‫ز‬‫اإل‬ ‫مقدار‬ ‫تحديد‬ ‫يتـ‬‫حدود‬‫يؽ‬‫ر‬‫ط‬ ‫عف‬ )‫ى‬‫األخر‬ ‫العناصر‬ ‫و‬ ‫العنصر‬
‫الخصائص‬margin-left‫و‬ ‫األيسر‬ ‫الطرؼ‬ ‫احة‬‫ز‬‫إل‬margin-right‫و‬ ‫األيمف‬ ‫الطرؼ‬ ‫احة‬‫ز‬‫إل‬

127. ٕٔٚ
margin-top‫و‬ ‫العموي‬ ‫الطرؼ‬ ‫احة‬‫ز‬‫إل‬margin-bottom‫يؽ‬‫ر‬‫ط‬ ‫عف‬ ‫أو‬ ,‫السفمي‬ ‫الطرؼ‬ ‫احة‬‫ز‬‫إل‬
‫الخاصية‬margin‫بإ‬ ‫قيـ‬ ‫الخصائص‬ ‫ىذه‬ ‫إلى‬ ‫د‬َ‫سن‬ُ‫ي‬ ‫و‬ ,‫اؼ‬‫ر‬‫األط‬ ‫جميع‬ ‫احة‬‫ز‬‫إل‬‫القياس‬ ‫احدات‬‫و‬ ‫حدى‬
‫الداخمية‬ ‫احة‬‫ز‬‫اإل‬ ‫مقدار‬ ‫عف‬ ‫تعبر‬‫الخاصة‬ ‫القيمة‬ ‫أو‬auto‫الويب‬ ‫لمستعرض‬ ‫الميمة‬ ‫ىذه‬ ‫لترؾ‬,
:‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬
<html>
<head>
<style type="text/css">
p
{ direction:rtl; background-color:black; color:white; }
.margin
{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
</style>
</head>
<body>
<p>‫خبسج١خ‬ ‫إصاحخ‬ ْٚ‫د‬ ‫اٌفمشح‬ ٖ‫٘ز‬</p>
<p class="margin">‫خبسج١خ‬ ‫إصاحخ‬ ‫فّغ‬ ‫اٌفمشح‬ ٖ‫٘ز‬ ‫أِب‬</p>
</body>
</html>
:‫كمايمي‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫يبدو‬ ‫الذي‬ ‫و‬

128. ٕٔٛ
‫الشكل‬45‫الخارجة‬ ‫احة‬‫ز‬‫اإل‬ ‫خاصية‬ ‫استخدام‬ ‫عمى‬ ‫مثال‬ :margin
‫العناصر‬ ‫إخفاء‬
‫إخفاء‬ ‫الممكف‬ ‫مف‬‫عناصر‬HTML‫باستخداـ‬CSS:‫يقتيف‬‫ر‬‫بط‬
‫القيمة‬ ‫إسناد‬none‫الخاصية‬ ‫إلى‬display.
‫القيمة‬ ‫إسناد‬hidden‫الخاصية‬ ‫إلى‬visibility.
‫أما‬ ً‫ا‬‫غ‬‫فار‬ ‫يشغمو‬ ‫الذي‬ ‫الحيز‬ ‫عمى‬ ‫الحفاظ‬ ‫مع‬ ‫العنصر‬ ‫تخفي‬ ‫الثانية‬ ‫يقة‬‫ر‬‫الط‬ ‫أف‬ ‫بينيما‬ ‫اّلختالؼ‬ ‫و‬
‫تموضع‬ ‫عمى‬ ‫يؤثر‬ ‫مما‬ ‫يشغمو‬ ‫الذي‬ ‫الحيز‬ ‫عمى‬ ‫الحفاظ‬ ‫عدـ‬ ‫مع‬ ‫العنصر‬ ‫تخفي‬ ‫األولى‬ ‫يقة‬‫ر‬‫الط‬
.‫العناصر‬
‫العناصر‬ ‫عرض‬ ‫اع‬‫و‬‫أن‬
‫في‬ ‫العناصر‬ ‫عرض‬ ‫يتـ‬HTML‫يقتيف‬‫ر‬‫بط‬:

129. ٕٜٔ
‫كتمة‬ ‫بشكؿ‬block‫و‬ ‫العنصر‬ ‫بعد‬ ً‫ا‬‫ر‬‫سط‬ ‫النزوؿ‬ ‫و‬ ‫العنصر‬ ‫قبؿ‬ ً‫ا‬‫ر‬‫سط‬ ‫النزوؿ‬ ‫يتـ‬ ‫حيث‬ :
‫مثؿ‬ ‫عناصر‬ ‫مع‬ ‫اىا‬‫ر‬‫ن‬ ‫الحالة‬ ‫ىذه‬<h1>‫و‬<p>‫و‬<div>.‫...إلخ‬
‫ي‬‫سطر‬ ‫بشكؿ‬inline‫لمنزوؿ‬ ‫الحاجة‬ ‫دوف‬ ‫السطر‬ ‫نفس‬ ‫ضمف‬ ‫العنصر‬ ‫وضع‬ ‫يتـ‬ ‫حيث‬ :
‫مثؿ‬ ‫عناصر‬ ‫مع‬ ‫اىا‬‫ر‬‫ن‬ ‫الحالة‬ ‫ىذه‬ ‫و‬ ً‫ا‬‫ر‬‫سط‬<a>‫و‬<span>..‫..إلخ‬
‫تسمح‬CSS‫مف‬ ‫لمعناصر‬ ‫العرض‬ ‫ع‬‫نو‬ ‫بتغيير‬block‫إلى‬inline‫إسناد‬ ‫يؽ‬‫ر‬‫ط‬ ‫عف‬ ‫بالعكس‬ ‫و‬
‫القيمتيف‬ ‫إحدى‬block‫و‬inline‫الخاصية‬ ‫إلى‬display.
‫الشفافية‬opacity
‫تتيح‬CSS‫الخاصة‬ ‫يؽ‬‫ر‬‫ط‬ ‫عف‬ ‫العناصر‬ ‫شفافية‬ ‫بدرجة‬ ‫التحكـ‬ ‫الويب‬ ‫لمطور‬opacity‫إسناد‬ ‫عبر‬
‫بيف‬ ‫ي‬‫عشر‬ ‫قـ‬‫ر‬0.0‫و‬1.0‫ػ‬‫ل‬‫ا‬ ‫أف‬ ‫حيث‬ ,‫إلييا‬ٓ.ٓ‫ػ‬‫ل‬‫ا‬ ‫و‬ ‫الظيور‬ ‫عدـ‬ ‫حالة‬ ‫تعني‬ٔ.ٓ‫حالة‬ ‫تعني‬
.‫طبيعي‬ ‫بشكؿ‬ ‫التاـ‬ ‫الظيور‬
‫ال‬‫عويم‬َّ‫ت‬floating
‫التعويـ‬ ‫خاصية‬ ‫تعتبر‬float‫تقدميا‬ ‫التي‬ ‫الخصائص‬ ‫أىـ‬ ‫مف‬CSS‫متناسؽ‬ ‫تموضع‬ ‫عمى‬ ‫لمحفاظ‬
,‫محدد‬ ‫لعنصر‬ ‫بالنسبة‬ ‫احدة‬‫و‬ ‫جية‬ ‫إلى‬ ‫العناصر‬ ‫جميع‬ ‫تعويـ‬ ‫يتـ‬ ‫حيث‬ ‫لمعناصر‬‫في‬ ‫التعويـ‬ ‫و‬
CSS‫اليميف‬ ‫إلى‬ ‫إما‬ ‫أفقي‬ ‫تعويـ‬right‫اليسار‬ ‫إلى‬ ‫أو‬left.
‫أما‬ ,‫تعويمو‬ ‫و‬ ‫يتالءـ‬ ‫بما‬ )‫(تعوـ‬ ‫حولو‬ ‫تمتؼ‬ ‫سوؼ‬ ‫تميو‬ ‫التي‬ ‫العناصر‬ ‫فإف‬ ‫ما‬ ‫عنصر‬ ‫تعويـ‬ ‫عند‬
:‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬ ,‫بالتعويـ‬ ‫تتأثر‬ ‫فمف‬ ‫قبمو‬ ‫التي‬ ‫العناصر‬
<html>
<head>
<style type="text/css">
p { direction:rtl; text-align:justify; }

130. ٖٔٓ
img { float:right; }
</style>
</head>
<body>
<p>
<img src="picture1.gif" />
ٜٛ‫ِحز‬ ‫ِب‬ ٟ‫ٔظ‬ ٜٛ‫ِحز‬ ‫ِب‬ ٟ‫ٔظ‬ ٜٛ‫ِحز‬ ‫ِب‬ ٟ‫ٔظ‬ ٜٛ‫ِحز‬ ‫ِب‬ ٟ‫ٔظ‬ ٜٛ‫ِحز‬
ٜٛ‫ِحز‬ ‫ِب‬ ٟ‫ٔظ‬ ٜٛ‫ِحز‬ ‫ِب‬ ٟ‫ٔظ‬ ٜٛ‫ِحز‬ ‫ِب‬ ٟ‫ٔظ‬‫ِب‬ ٟ‫ٔظ‬ ٜٛ‫ِحز‬ ‫ِب‬ ٟ‫ٔظ‬
ٜٛ‫ِحز‬ ‫ِب‬ ٟ‫ٔظ‬ ٜٛ‫ِحز‬ ‫ِب‬ ٟ‫ٔظ‬ ٜٛ‫ِحز‬ ‫ِب‬ ٟ‫ٔظ‬ ٜٛ‫ِحز‬ ‫ِب‬ ٟ‫ٔظ‬ ٜٛ‫ِحز‬
‫ِب‬ ٟ‫ٔظ‬ ٜٛ‫ِحز‬ ‫ِب‬ ٟ‫ٔظ‬ ٜٛ‫ِحز‬ ‫ِب‬ ٟ‫ٔظ‬ ٜٛ‫ِحز‬ ‫ِب‬ ٟ‫ٔظ‬ ٜٛ‫ِحز‬ ‫ِب‬ ٟ‫ٔظ‬
ٛ‫ِحز‬.‫ِب‬ ٟ‫ٔظ‬ ٜ
</p>
</body>
</html>
:‫كمايمي‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫يبدو‬ ‫الذي‬ ‫و‬

131. ٖٔٔ
‫الشكل‬46‫مثا‬ :‫التعويم‬ ‫خاصية‬ ‫استخدام‬ ‫عمى‬ ‫ل‬float
ّ‫التؼ‬ ‫و‬ ‫النص‬ ‫مف‬ ‫اليميف‬ ‫إلى‬ ‫ة‬‫ر‬‫الصو‬ ‫تعويـ‬ ‫تـ‬ ‫فقد‬ ‫تالحظ‬ ‫كما‬‫و‬ ‫يتالءـ‬ ‫بما‬ ‫يمييا‬ ‫الذي‬ ‫المحتوى‬
‫التعويـ‬ ‫بعد‬ ‫الجديد‬ ‫ة‬‫ر‬‫الصو‬ ‫موضع‬‫تـ‬ ‫لو‬ ‫ليحدث‬ ‫يكف‬ ‫لـ‬ ‫المتناسؽ‬ ‫الشكؿ‬ ‫بيذا‬ ‫النص‬ ‫التفاؼ‬ ‫و‬ ,
‫ى‬‫أخر‬ ‫يقة‬‫ر‬‫بط‬ ‫الموضع‬ ‫ىذا‬ ‫في‬ ‫ة‬‫ر‬‫الصو‬ ‫وضع‬.
ِّ‫جر‬ :‫فائدة‬‫ب‬‫ب‬ِّ‫جر‬ ّ‫ثـ‬ ,‫بتناسقيا‬ ‫الصفحة‬ ‫احتفاظ‬ ‫ّلحظ‬ ‫و‬ ‫المستعرض‬ ‫نافذة‬ ‫حجـ‬ ‫تغيير‬‫مف‬ ‫التعويـ‬ ‫خاصية‬ ‫حذؼ‬
‫الفرؽ‬ ‫ّلحظ‬ ‫و‬ ‫الصفحة‬‫العممية‬ ‫ذات‬ ‫ار‬‫ر‬‫تك‬ ‫حاؿ‬ ‫في‬.
‫الخاصية‬ ‫أف‬ ‫اآلف‬ ً‫ا‬‫اضح‬‫و‬ ‫أصبح‬ ً‫ا‬‫سابق‬ ‫نا‬‫ر‬‫ذك‬ ‫كما‬ ‫و‬ ‫بالطبع‬float‫جية‬ ‫إلى‬ ‫العنصر‬ ‫بتعويـ‬ ‫تقوـ‬
‫ت‬ َّ‫ثـ‬ ,‫اليسار‬ ‫جية‬ ‫إلى‬ ‫أو‬ ‫اليميف‬,‫ـ‬َّ‫و‬َ‫ع‬ُ‫الم‬ ‫العنصر‬ ‫موضع‬ ‫و‬ ‫لتتالءـ‬ ‫لو‬ ‫التالية‬ ‫العناصر‬ ‫بتدوير‬ ‫قوـ‬‫و‬
‫ليذا‬ ‫و‬ ‫ى‬‫األخر‬ ‫ة‬َ‫م‬َّ‫المعو‬ ‫العناصر‬ ‫مف‬ ‫قدر‬ ‫أي‬ ‫الحالي‬ ‫ـ‬َّ‫و‬َ‫ع‬ُ‫الم‬ ‫العنصر‬ ‫يتمو/يسبؽ‬ ‫أف‬ ‫يمكف‬ ‫بالطبع‬
‫تتيح‬CSS‫الحالي‬ ‫العنصر‬ ‫ار‬‫و‬‫بج‬ ‫عائمة‬ ‫عناصر‬ ‫وجود‬ ‫منع‬‫الخاصية‬ ‫باستخداـ‬clear‫مع‬
‫غب‬‫نر‬ ‫ّل‬ ‫التي‬ ‫العناصر‬‫ىا‬‫ار‬‫و‬‫بج‬ ‫عائمة‬ ‫عناصر‬ ‫بوجود‬,‫القيـ‬ ‫إحدى‬ ‫إسناد‬ ‫يتـ‬ ‫حيث‬left‫لمنع‬‫وجود‬

132. ٖٕٔ
‫عائمة‬ ‫عناصر‬‫أو‬ ‫اليسار‬ ‫مف‬right‫لمنع‬‫عائمة‬ ‫عناصر‬ ‫وجود‬‫أو‬ ‫اليميف‬ ‫مف‬both‫لمنع‬‫وجود‬
‫عائمة‬ ‫عناصر‬.‫الجيتيف‬ ‫مف‬
‫تعميقات‬CSS
‫َّة‬‫اّلنسيابي‬ ‫األنماط‬ ‫اؽ‬‫ر‬‫أو‬ ‫في‬ ‫البرمجية‬ ‫التعميقات‬ ‫كتابة‬ ‫يتـ‬CSS‫بيف‬/*‫و‬*/:‫كمايمي‬
/* comment */
‫الوسائط‬ ‫اع‬‫و‬‫أن‬Media types
‫تتيح‬CSS‫الصفحة‬ ‫منح‬ ‫فيمكف‬ ,‫بعرضيا‬ ‫يقوـ‬ ‫ما‬ ‫عمى‬ ً‫بناء‬ ‫الصفحة‬ ‫شكؿ‬ ‫و‬ ‫مظير‬ ‫تخصيص‬
ً‫ا‬‫تمام‬ ً‫ا‬‫مختمف‬ ً‫ال‬‫شك‬ ‫و‬ ً‫ا‬‫ر‬‫مظي‬ ‫منحيا‬ ‫و‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫اضيا‬‫ر‬‫استع‬ ‫عند‬ ً‫ا‬‫معين‬ ً‫ال‬‫شك‬ ‫و‬ ً‫ا‬‫ر‬‫مظي‬
.‫(طباعتيا)...إلخ‬ ‫الورؽ‬ ‫عمى‬ ‫عرضيا‬ ‫عند‬
‫ع‬‫نو‬ ‫وصؼ‬ ‫خالؿ‬ ‫مف‬ ‫ه‬‫ر‬‫ذك‬ ‫سبؽ‬ ‫ما‬ ‫تحقيؽ‬ ‫يتـ‬media‫اعد‬‫و‬‫ق‬ ‫مجموعة‬ ‫قبؿ‬ ‫ما‬CSS‫ع‬‫نو‬ ‫و‬ ,
media‫اعد‬‫و‬‫ق‬ ‫مجموعة‬ ‫قبؿ‬ ‫آخر‬CSS‫ة‬‫ر‬‫المذكو‬ ‫الحالة‬ ‫عند‬ ‫مجموعة‬ ‫كؿ‬ ‫تطبيؽ‬ ‫يتـ‬ ‫حيث‬ ‫ى‬‫أخر‬
‫ػ‬‫ل‬‫ا‬ ‫قاعد‬ ‫في‬@media:‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬ ,
<html>
<head>
<style type="text/css">
@media screen
{
p{
text-align:justfy
direction:rtl;

133. ٖٖٔ
color:white;
}
body {
background-color:green;
}
}
@media print
{
p
{
text-align:justfy;
direction:rtl;
color:white;}
}
</style>
</head>
<body>
<p>
ٓ١‫ثـش٠مز‬ ٚ‫٠جذ‬ ‫سٛف‬ ٞ‫اٌز‬ ‫اٌٛ٠ت‬ ‫ٌّسزٕذ‬ ٟ‫إٌظ‬ ٜٛ‫اٌّحز‬ ٛ٘ ‫٘زا‬
ٍٝ‫ػ‬ ‫اٌؼشع‬ ٚ ‫اٌشبشخ‬ ٍٝ‫ػ‬ ‫اٌؼشع‬ ٟ‫حبٌز‬ ٟ‫ف‬ ٓ١‫ِخزٍفز‬
.‫اٌٛسق/اٌـجبػخ‬
</p>
</body>
</html>

134. ٖٔٗ
:‫كمايمي‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫العرض‬ ‫عند‬ ‫السابؽ‬ ‫المثاؿ‬ ‫يبدو‬
‫الشكل‬47‫القاعدة‬ ‫استخدام‬ :@media
:‫كمايمي‬ )‫الحقيقة‬ ‫في‬ ‫الطباعة‬ ‫قبؿ‬ ‫المعاينة‬ ‫نافذة‬ ‫(في‬ ‫الورؽ‬ ‫عمى‬ ‫يبدو‬ ‫و‬
‫الشكل‬48‫القاعدة‬ ‫استخدام‬ :@media

135. ٖٔ٘
‫بعد‬ ‫نضع‬ ‫أف‬ ‫يمكف‬@media:‫التالية‬ ‫القيـ‬ ‫إحدى‬
‫القيمة‬‫الشرح‬
all‫جميع‬‫العرض‬ ‫ة‬‫ز‬‫أجي‬
aural‫الناطقة‬ ‫ة‬‫ز‬‫لألجي‬
braille‫الممس‬ ‫عمى‬ ‫المعتمدة‬ ‫ة‬‫ز‬‫األجي‬
embossed‫الممس‬ ‫عمى‬ ‫المعتمدة‬ ‫ة‬‫ز‬‫األجي‬ ‫طابعات‬
handheld‫َّة‬‫الكفي‬ ‫ة‬‫ز‬‫لألجي‬
print‫الطابعات‬ ‫لكؿ‬
projection)ً‫ال‬‫مث‬ ‫اشؽ‬‫ر‬‫(ال‬ ‫اإلسقاط‬ ‫ة‬‫ز‬‫ألجي‬
screen‫اسيب‬‫و‬‫الح‬ ‫لشاشات‬
tty‫تستخدـ‬ ‫التي‬ ‫ة‬‫ز‬‫األجي‬ ‫لكؿ‬( ‫ثابت‬ ‫محرؼ‬ ‫عرض‬ ‫ذات‬ ‫شاشات‬‫الكاتبة‬ ‫قة‬‫ر‬‫كالمب‬.)
tv‫بالتمفاز‬ ‫الشبيية‬ ‫ة‬‫ز‬‫األجي‬ ‫لكؿ‬
‫الجدول‬11‫القاعدة‬ ‫قيم‬ :@media
‫عف‬ ‫حديثنا‬ ‫بانتياء‬ ‫و‬‫اعد‬‫و‬‫ق‬‫ػ‬‫ل‬‫ا‬Media‫أنيينا‬ ‫قد‬ ‫نكوف‬-‫اهلل‬ ‫بفضؿ‬-‫مناقشة‬CSS‫بأغمب‬
‫خصائصيا‬‫اض‬‫ر‬‫استع‬ ‫التالية‬ ‫الصفحات‬ ‫في‬ ‫سنتابع‬ ‫و‬ ,‫خصائص‬CSS‫تعرؼ‬ ‫التي‬ ‫و‬ ‫َّة‬‫ي‬‫ر‬‫العص‬
‫باسـ‬CSS3‫ب‬ ً‫ّل‬‫و‬‫جد‬ ‫نعرض‬ ‫أف‬ ‫ى‬‫فأر‬ ‫اآلف‬ ‫ا‬َّ‫أم‬ ,‫دات‬ِّ‫د‬َ‫ح‬ُ‫م‬CSS‫عند‬ ً‫ا‬‫يع‬‫ر‬‫س‬ ً‫ا‬‫مرجع‬ ‫ليكوف‬ ‫َّة‬‫التقميدي‬
.‫الحاجة‬
‫دليل‬‫محددات‬CSS
‫المحدد‬‫مثال‬‫المثال‬ ‫شرح‬
.class.Mukhtar‫اصفة‬‫و‬‫ال‬ ‫ذات‬ ‫العناصر‬ ‫كؿ‬
class="Mukhtar"
#id#name‫اصفة‬‫و‬‫ال‬ ‫ذات‬ ‫العناصر‬ ‫كؿ‬
id="name"

136. ٖٔٙ
**‫العناصر‬ ‫كؿ‬
tagp‫الوسـ‬ ‫عناصر‬ ‫كؿ‬<p>
tag,taga,p‫الوسـ‬ ‫عناصر‬ ‫كؿ‬<a>‫كؿ‬ ‫و‬
‫الوسـ‬ ‫عناصر‬<p>
tag tagdiv a‫الوسـ‬ ‫عناصر‬ ‫كؿ‬<a>‫الموجودة‬
‫داخؿ‬<div>
tag>tagdiv>a‫الوسـ‬ ‫عناصر‬ ‫كؿ‬<a>‫الموجودة‬
‫داخؿ‬<div>‫مباشر‬ ‫بشكؿ‬
tag+tagdiv+p‫الوسـ‬ ‫عناصر‬ ‫كؿ‬<p>‫الموجودة‬
‫عنصر‬ ‫بعد‬ ً‫ة‬‫ر‬‫مباش‬<div>
[attribute][src]‫اصفة‬‫و‬‫ال‬ ‫تحوي‬ ‫التي‬ ‫العناصر‬ ‫كؿ‬src
[attribute=v][src=image.jpg]‫اصفة‬‫و‬‫ال‬ ‫تحوي‬ ‫التي‬ ‫العناصر‬ ‫كؿ‬src
‫القيمة‬ ‫إلييا‬ ً‫ا‬‫مسند‬image.jpg
[attribute~=v][target~=_blank]‫اصفة‬‫و‬‫ال‬ ‫تحوي‬ ‫التي‬ ‫العناصر‬ ‫كؿ‬
target‫تساوي‬ ‫ّل‬ ‫قيمة‬ ‫إلييا‬ ً‫ا‬‫مسند‬
_blank
[attribute|=v][href|=http://]‫اصفة‬‫و‬‫ال‬ ‫تحوي‬ ‫التي‬ ‫العناصر‬ ‫كؿ‬
target‫ػ‬‫ب‬ ‫تبدأ‬ ‫قيمة‬ ‫إلييا‬ ً‫ا‬‫مسند‬
http://
:linka:link‫عمييا‬ ‫النقر‬ ‫يتـ‬ ‫لـ‬ ‫التي‬ ‫ابط‬‫و‬‫الر‬ ‫كؿ‬
:visiteda:visited‫عمييا‬ ‫النقر‬ ‫تـ‬ ‫التي‬ ‫ابط‬‫و‬‫الر‬ ‫كؿ‬
:activea:activeً‫ا‬‫حالي‬ ‫الفعاؿ‬ ‫ابط‬‫ر‬‫ال‬
:hovera:hover‫اآلف‬ ‫ة‬‫ر‬‫الفأ‬ ‫عميو‬ ‫تمر‬ ‫الذي‬ ‫ابط‬‫ر‬‫ال‬
:focusinput:focusً‫ا‬‫حالي‬ ‫الفعالة‬ ‫اإلدخاؿ‬ ‫عناصر‬ ‫كؿ‬
:first-letterp:first-letter‫عنصر‬ ‫كؿ‬ ‫مف‬ ‫محرؼ‬ ‫أوؿ‬<p>
:first-linep:first-line‫عنصر‬ ‫كؿ‬ ‫مف‬ ‫سطر‬ ‫أوؿ‬<p>

137. ٖٔٚ
:first-childp:first-child‫عنصر‬ ‫كؿ‬<p>‫ؿ‬ّ‫األو‬ ‫اّلبف‬ ‫يكوف‬
‫األب‬ ‫ه‬‫ر‬‫لعنص‬
:beforep:before‫عنصر‬ ‫كؿ‬ ‫قبؿ‬ ‫محتوى‬ ‫اج‬‫ر‬‫إد‬<p>
:afterp:after‫عنصر‬ ‫كؿ‬ ‫بعد‬ ‫محتوى‬ ‫اج‬‫ر‬‫إد‬<p>
:lang(language)p:lang(en)‫عنصر‬ ‫كؿ‬ ‫تحديد‬<p>‫قيمة‬ ‫تبدأ‬
‫اصفتو‬‫و‬lang‫بالقيمة‬en
‫الجدول‬12‫محددات‬ :CSS

138. ٖٔٛ
CSS 3
‫ػ‬‫ل‬‫ا‬ ‫ظيور‬ ‫مع‬ ً‫ا‬‫(خصوص‬ ‫الويب‬ ‫مفيوـ‬ ‫تطور‬ ‫مع‬Web 2.0‫اؽ‬‫ر‬‫أو‬ ‫تحسيف‬ ‫إلى‬ ‫الحاجة‬ ‫ظيرت‬ )
‫استخداـ‬ ‫في‬ ‫اط‬‫ر‬‫اإلف‬ ‫إلى‬ ‫الحاجة‬ ‫دوف‬ ‫الويب‬ ‫اقع‬‫و‬‫م‬ ‫في‬ ‫أجمؿ‬ ‫تصاميـ‬ ‫لتحقيؽ‬ ‫اّلنسيابية‬ ‫األنماط‬
‫المعروؼ‬ ‫و‬ ‫َّة‬‫اّلنسيابي‬ ‫األنماط‬ ‫اؽ‬‫ر‬‫أو‬ ‫مف‬ ‫الجديد‬ ‫اإلصدار‬ ‫ظيور‬ ‫إلى‬ ‫دفع‬ ‫ما‬ ‫ىذا‬ ‫و‬ ‫التصميـ‬ ‫امج‬‫ر‬‫ب‬
‫ػ‬‫ب‬CSS3.
‫تضيؼ‬CSS3‫الخصائص‬ ‫و‬ ‫المحددات‬ ‫مف‬ ‫مجموعة‬‫إلى‬ ‫الجديدة‬CSS‫عمى‬ َ‫ح‬ِ‫م‬ُ‫ط‬‫اص‬ ‫و‬ ‫التقميدية‬
‫الوحدة‬ ‫باسـ‬ ‫المحددات‬ ‫أو‬ ‫الخصائص‬ ‫ىذه‬ ‫مف‬ ‫مجموعة‬ ‫كؿ‬ ‫تسمية‬Module‫الوحدات‬ ‫أىـ‬ ‫لعؿ‬ ‫و‬ ,
:‫ىي‬ ‫المضافة‬
‫الجديدة‬ ‫المحددات‬ ‫وحدة‬
‫الجديدة‬ ‫الخمفيات‬ ‫و‬ ‫الحدود‬ ‫وحدة‬
‫الصندوؽ‬ ‫نموذج‬ ‫تحسيف‬ ‫وحدة‬
‫الجديدة‬ ‫النصوص‬ ‫ات‬‫ر‬‫مؤث‬ ‫وحدة‬
‫وحدة‬‫التحويالت‬‫البعديف‬ ‫ذات‬ ‫اليندسية‬
‫الثالثة‬ ‫ذات‬ ‫اليندسية‬ ‫التحويالت‬ ‫وحدة‬‫أبعاد‬
‫الحركات‬ ‫وحدة‬
‫األعمدة‬ ‫متعددة‬ ‫الصفحات‬ ‫وحدة‬
‫المستخدـ‬ ‫اجية‬‫و‬ ‫وحدة‬
‫الداعمة‬ ‫المستعرضات‬
‫ػ‬‫ل‬ ‫بالنسبة‬CSS3‫الويب‬ ‫مستعرضات‬ ‫أغمب‬ ‫مف‬ ‫مدعومة‬ ‫فيي‬‫أوسع‬ ‫بشكؿ‬ ‫و‬ ‫الحديثة‬‫بكثير‬‫مف‬
‫ػ‬‫ل‬ ‫المستعرضات‬ ‫ذات‬ ‫دعـ‬HTML5.

139. ٖٜٔ
‫الجديدة‬ ‫الحدود‬CSS3 Borders
‫تتيح‬CSS3( ‫القائمة‬ ‫غير‬ ‫ايا‬‫و‬‫الز‬ ‫ذات‬ ‫الحدود‬ ‫إنشاء‬Round Corner Borders‫و‬ ‫بسيولة‬ )
‫(مثؿ‬ ‫التصميـ‬ ‫امج‬‫ر‬‫ب‬ ‫مف‬ ‫أي‬ ‫ّلستخداـ‬ ‫الحاجة‬ ‫دوف‬ ‫و‬ ‫يسر‬Photoshop‫استخدمت‬ ‫طالما‬ ‫التي‬ )
‫الميمة‬ ‫ىذه‬ ‫لتحقيؽ‬‫الخاصية‬ ‫ىي‬ ‫جديدة‬ ‫خاصية‬ ‫عبر‬border-radius‫بإس‬ ‫ذلؾ‬ ‫و‬‫إلييا‬ ‫قيمة‬ ‫ناد‬
,‫لإلطار‬ ‫اوية‬‫ز‬‫ك‬ ‫المقتطع‬ ‫ة‬‫ر‬‫الدائ‬ ‫قوس‬ ‫قطر‬ ‫نصؼ‬ ‫عف‬ ‫المسندة‬ ‫القيمة‬ ‫تعبر‬ ,‫القياس‬ ‫احدات‬‫و‬ ‫بإحدى‬
:‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}
</style>
</head>
<body>

140. ٔٗٓ
<div>The border-radius property allows you to add rounded
corners to elements.</div>
</body>
</html>
:‫كمايمي‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫يبدو‬ ‫الذي‬ ‫و‬
‫الشكل‬49‫خاصية‬ ‫استخدام‬ :border-radius‫كروم‬ ‫مستعرض‬ ‫في‬
‫مستعرض‬ :‫ممحوظة‬Firefox‫ىو‬ ‫الخاصية‬ ‫اسـ‬ ‫أف‬ ‫يعتبر‬-moz-border-radius
‫تتيح‬ ‫كما‬CSS3‫ة‬‫ر‬‫صو‬ ‫عمى‬ ‫باّلعتماد‬ ‫العناصر‬ ‫حدود‬ ‫إنشاء‬‫ة‬‫ر‬‫صغي‬‫ممكف‬ ‫شكؿ‬ ‫أصغر‬ ‫عف‬ ‫تعبر‬
‫لإلطار‬
‫و‬‫اإلطار‬ ‫إنشاء‬ ‫يتـ‬:‫يقتيف‬‫ر‬‫بط‬
repeated:‫ة‬‫ر‬‫الصو‬ ‫مف‬ ‫ء‬‫جز‬ ‫ار‬‫ر‬‫بتك‬.
stretch:‫ة‬‫ر‬‫الصو‬ ‫مف‬ ‫ء‬‫جز‬ ‫بتمديد‬.
‫ح‬ِّ‫يوض‬ ‫الجانبي‬ ‫الشكؿ‬ ‫و‬‫يقتيف‬‫ر‬‫الط‬ ‫بيف‬ ‫الفرؽ‬
.‫تيف‬‫ر‬‫المذكو‬
‫ير‬‫ر‬‫تم‬ ‫خالؿ‬ ‫مف‬ ‫ية‬‫ر‬‫الصو‬ ‫الحدود‬ ‫إنشاء‬ ‫يتـ‬‫الشكل‬51‫في‬ ‫الصورية‬ ‫ات‬‫ر‬‫اإلطا‬ :CSS3

141. ٔٗٔ
‫الخاصية‬ ‫إلى‬ ‫ة‬‫ر‬‫الصو‬ ‫مسار‬border-image-source‫القيمتيف‬ ‫إحدى‬ ‫إسناد‬ ‫ثـ‬ ,repeat‫أو‬
stretch‫الخاصية‬ ‫إلى‬border-image-repeat‫إلى‬ ‫بالبكسؿ‬ ‫اإلطار‬ ‫عرض‬ ‫إسناد‬ ‫ثـ‬ ,
‫الخاصية‬border-image-width,‫الخاصيتيف‬ ‫إلى‬ ‫بالبكسؿ‬ ‫مناسبة‬ ‫قيـ‬ ‫إسناد‬ ‫و‬border-
image-slice‫و‬border-image-outset‫تمديده‬ ‫أو‬ ‫ه‬‫ر‬‫ا‬‫ر‬‫تك‬ ‫سيتـ‬ ‫الذي‬ ‫ة‬‫ر‬‫الصو‬ ‫ء‬‫جز‬ ‫لتحديد‬
.‫اإلطار‬ ‫لصنع‬
‫ة‬‫ر‬‫المختص‬ ‫الخاصية‬ ‫استخداـ‬ ‫يمكف‬ :‫ممحوظة‬border-image‫ا‬ ‫و‬‫بالصيغة‬ ‫السابقة‬ ‫الخصائص‬ ‫جميع‬ ‫تجمع‬ ‫لتي‬
border-image:source slice width outside repeat;
:‫اإلطار‬ ‫لصنع‬ ً‫ا‬‫سابق‬ ‫ت‬َ‫ض‬ِ‫ر‬ُ‫ع‬ ‫التي‬ ‫ة‬‫ر‬‫الصو‬ ‫عمى‬ ‫يعتمد‬ ‫الذي‬ ‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
border-width:15px;
width:250px;
padding:10px 20px;
-webkit-border-image:url(border.png) 30 30 stretch;
}
</style>
</head>
<body>
<div> Here, the image is stretched to fill the area.</div>

142. ٕٔٗ
</body>
</html>
:‫كمايمي‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫يبدو‬ ‫الذي‬ ‫و‬
‫الشكل‬51‫كروم‬ ‫جوجل‬ ‫مستعرض‬ ‫في‬ ‫ي‬‫الصور‬ ‫اإلطار‬ :
‫مستعرض‬ :‫ممحوظة‬Firefox‫البدائة‬ ‫يستخدـ‬-moz-‫مستعرضا‬ ‫و‬ ,‫أعاله‬ ‫ة‬‫ر‬‫المذكو‬ ‫الخصائص‬ ‫أسماء‬ ‫قبؿ‬
Safari‫و‬Chrome‫البادئة‬ ‫يستخدماف‬-webkit-‫مستعرض‬ ‫و‬Opera‫البادئة‬ ‫يستخدـ‬-o-
‫تتيح‬CSS3‫الخاصية‬ ‫عبر‬ ‫ما‬ ‫لعنصر‬ ‫ظؿ‬ ‫إنشاء‬ ً‫ا‬‫أيض‬box-shadow‫قيمة‬ ‫إلييا‬ ‫يسند‬ ‫التي‬ ‫و‬
‫ا‬ ‫إحداثيات‬ ‫عف‬ ‫تعبر‬ ‫بالبكسؿ‬ ‫قيـ‬ ‫و‬ ‫الظؿ‬ ‫لوف‬ ‫عف‬ ‫تعبر‬ ‫لونية‬:‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬ ,‫لظؿ‬
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
width:300px;
height:100px;
background-color:yellow;

143. ٖٔٗ
-webkit-box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
:‫كمايمي‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫يبدو‬ ‫الذي‬ ‫و‬
‫الشكل‬52‫الظل‬ ‫خاصية‬ :‫تبدو‬ ‫كما‬‫كروم‬ ‫مستعرض‬ ‫في‬
‫مستعرضا‬ ‫يستخدـ‬ :‫ممحوظة‬Safari‫و‬Chrome‫البادئة‬-webkit-‫الخاصية‬ ‫اسـ‬ ‫قبؿ‬
‫الجديدة‬ ‫الخمفيات‬CSS3 Backgrounds
‫في‬CSS3‫بشكؿ‬ ‫بالخمفيات‬ ‫التحكـ‬ ‫عمى‬ ‫الويب‬ ‫مطور‬ ‫لمساعدة‬ ‫جديدتيف‬ ‫خاصيتيف‬ ‫إضافة‬ ‫تـ‬
‫الخاصية‬ ‫ىي‬ ‫األولى‬ ,‫أفضؿ‬background-size‫ة‬‫ر‬‫الصو‬ ‫أبعاد‬ ‫بتحديد‬ ‫تسمح‬ ‫التي‬ ‫و‬‫الخمفية‬
‫لـ‬ ‫ما‬ ‫ىو‬ ‫و‬ ‫ة‬‫ر‬‫لمصو‬ ‫األصمية‬ ‫األبعاد‬ ‫عف‬ ‫تختمؼ‬ ً‫ا‬‫أبعاد‬ ‫كخمفية‬ ‫ة‬‫ر‬‫الصو‬ ‫بإعطاء‬ ‫يسمح‬ ‫مما‬ ‫بالبكسؿ‬
‫قبؿ‬ ً‫ا‬‫ممكن‬ ‫يكف‬CSS3:‫كمايمي‬ ‫الخاصية‬ ‫ىذه‬ ‫استخداـ‬ ‫يتـ‬ ,

144. ٔٗٗ
background-size: 80px 60px;
.‫تفاعيا‬‫ر‬‫ا‬ ‫إلى‬ ‫يشير‬ ‫الثاني‬ ‫أف‬ ‫حيف‬ ‫في‬ ‫ة‬‫ر‬‫الصو‬ ‫عرض‬ ‫إلى‬ ‫األوؿ‬ ‫قـ‬‫ر‬‫ال‬ ‫يعني‬
‫في‬ :‫ممحوظة‬‫مستعرض‬Firefox‫بالبادئة‬ ‫الخاصية‬ ‫تسبؽ‬-moz-
‫الخاصية‬ ‫فيي‬ ‫الثانية‬ ‫الخاصية‬ ‫أما‬background-origin‫نموذج‬ ‫اء‬‫ز‬‫أج‬ ‫أحد‬ ‫تحدد‬ ‫التي‬ ‫و‬
‫القيـ‬ ‫إحدى‬ ‫تأخذ‬ ‫أف‬ ‫يمكف‬ ‫و‬ ‫أساسو‬ ‫عمى‬ ‫الخمفية‬ ‫تطبيؽ‬ ‫ليتـ‬ ‫الصندوؽ‬context-box‫لتطبيؽ‬
‫أو‬ ‫بالمحتوى‬ ‫المحدد‬ ‫المستطيؿ‬ ‫عمى‬ ‫الخمفية‬padding-box‫المستطيؿ‬ ‫عمى‬ ‫الخمفية‬ ‫لتطبيؽ‬
‫أو‬ ً‫ا‬‫مع‬ ‫الداخمية‬ ‫احة‬‫ز‬‫اإل‬ ‫و‬ ‫بالمحتوى‬ ‫المحدد‬border-box‫المحدد‬ ‫المستطيؿ‬ ‫عمى‬ ‫الخمفية‬ ‫لتطبيؽ‬
.‫الثالثة‬ ‫المستطيالت‬ ‫بيف‬ ‫الفرؽ‬ ‫يوضح‬ ‫التالي‬ ‫الشكؿ‬ ‫و‬ ‫بالحدود‬ ‫و‬ ‫الداخمية‬ ‫احة‬‫ز‬‫باإل‬ ‫و‬ ‫بالمحتوى‬
‫الشكل‬53‫الصندو‬ ‫نموذج‬ :‫في‬ ‫الخمفية‬ ‫لخاصية‬ ‫بالنسبة‬ ‫ق‬CSS3
‫مستعرضي‬ ‫في‬ :‫ممحوظة‬Safari‫و‬Chrome‫البادئة‬ ‫استخداـ‬ ‫يتـ‬-webkit-
‫في‬ ‫الخمفية‬ ‫خاصية‬ ‫إلى‬ ‫أضيفت‬ ‫التي‬ ‫التحسينات‬ ‫مف‬CSS3‫في‬ ‫ة‬‫ر‬‫صو‬ ‫مف‬ ‫أكثر‬ ‫بإضافة‬ ‫السماح‬
‫بال‬ ‫بالفاصمة‬ ‫ى‬‫األخر‬ ‫و‬ ‫خمفية‬ ‫كؿ‬ ‫بيف‬ ‫الفصؿ‬ ‫عبر‬ ‫ذلؾ‬ ‫و‬ ‫العنصر‬ ‫لنفس‬ ‫كخمفية‬ ‫الوقت‬ ‫نفس‬:‫شكؿ‬
background-image:url(back1.gif),url(back2.png);

145. ٔٗ٘
‫تنسيق‬ ‫خصائص‬‫الجديدة‬ ‫النصوص‬‫في‬CSS3
‫في‬ ‫النصوص‬ ‫لتنسيؽ‬ ‫الجديدة‬ ‫الخصائص‬ ‫مف‬ ‫مجموعة‬ ‫إضافة‬ ‫تـ‬CSS3‫نعرض‬‫بعضيا‬‫في‬
:‫التالي‬ ‫الجدوؿ‬
‫الخاصية‬‫الممكنة‬ ‫القيم‬‫الشرح‬
hanging-punctuationnone‫أو‬first‫أو‬
last‫أو‬allow-
end‫أو‬force-
end
‫وضع‬ ‫تحدد‬‫عالمة‬‫ال‬‫حدود‬ ‫ج‬‫خار‬ ‫قيـ‬‫ر‬‫ت‬
‫العنصر‬<p>
punctuation-trimstart‫أو‬end‫أو‬
allow-end‫أو‬
adjacent‫أو‬
none
‫كؿ‬ ‫بداية‬ ‫مف‬ ‫اّلفتتاحية‬ ‫قيـ‬‫ر‬‫الت‬ ‫عالمة‬ ‫يؿ‬‫ز‬‫ت‬
‫أسطر‬ ‫مف‬ ‫سطر‬<p>
text-justifyauto‫أو‬inter-
word‫أو‬inter-
ideograph‫أو‬
inter-cluster‫أو‬
distribute‫أو‬
kashida‫أو‬trim
‫تكوف‬ ‫عندما‬ ‫المحاذاة‬ ‫تحقيؽ‬ ‫يقة‬‫ر‬‫ط‬ ‫تحدد‬
‫الخاصية‬ ‫قيمة‬text-align‫ػ‬‫ل‬ ‫مساوية‬
Justify
text-outline‫تعبر‬ ‫بالبكسؿ‬ ‫قيمة‬
‫قيمة‬ ‫و‬ ‫العرض‬ ‫عف‬
‫عف‬ ‫تعبر‬ ‫لونية‬
‫الموف‬
‫الخارجية‬ ‫الحدود‬ ‫لوف‬ ‫و‬ ‫عرض‬ ‫تحدد‬
‫لمنص‬
text-overflowclip‫أو‬ellipsis‫أو‬
string
‫طوؿ‬ ‫يصبح‬ ‫عندما‬ ‫عممو‬ ‫يتـ‬ ‫الذي‬ ‫ما‬ ‫تحدد‬
‫لو‬ ‫الحاوي‬ ‫العنصر‬ ‫مف‬ ‫أطوؿ‬ ‫النص‬

146. ٔٗٙ
text-shadow‫و‬ ‫قمتيف‬‫ر‬ ‫قيمتيف‬
‫لونية‬ ‫قيمة‬
‫لمنص‬ ً‫ال‬‫ظ‬ ‫تضيؼ‬
text-wrapnone‫أو‬normal
‫أو‬unrestricted
‫أو‬suppress
‫تح‬‫تحقيؽ‬ ‫يقة‬‫ر‬‫ط‬ ‫دد‬‫النصوص‬ ‫التفاؼ‬
word-breaknormal‫أو‬
break-all‫أو‬
hyphenate
‫الطويمة‬ ‫الكممات‬ ‫تقسيـ‬ ‫يقة‬‫ر‬‫ط‬ ‫تحديد‬
word-wrapnormal‫أو‬
word-break
‫تقسيـ‬ ‫عبر‬ ‫النصوص‬ ‫التفاؼ‬ ‫بتحقيؽ‬ ‫تقوـ‬
‫المحددة‬ ‫يقة‬‫ر‬‫الط‬ ‫عمى‬ ً‫بناء‬ ‫الطويمة‬ ‫الكممات‬
‫الخاصة‬ ‫في‬word-break
‫الجدول‬13‫في‬ ‫الجديدة‬ ‫النصوص‬ ‫تنسيق‬ ‫خصائص‬ :CSS3
‫استخداـ‬ ‫التالي‬ ‫المثاؿ‬ ‫يعرض‬‫إحدى‬:‫الخصائص‬ ‫ىذه‬
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
</style>
</head>
<body>

147. ٔٗٚ
<h1>ًٍ‫اٌّظ‬ ‫إٌض‬</h1>
</body>
</html>
‫في‬ ‫الجديدة‬ ‫الخطوط‬ ‫خصائص‬CSS3
‫في‬CSS‫الموجودة‬ ‫و‬ ‫الشائعة‬ ‫الخطوط‬ ‫استخداـ‬ ‫الويب‬ ‫صفحات‬ ‫ي‬‫مطور‬ ‫اجب‬‫و‬ ‫مف‬ ‫كاف‬ ‫التقميدية‬
‫عمى‬ ً‫ا‬‫ر‬‫قاد‬ ‫يكف‬ ‫لـ‬ ‫المستعرض‬ ‫أف‬ ‫ذلؾ‬ ‫و‬ ‫الصفحة‬ ‫ار‬‫و‬‫ز‬ ‫اسيب‬‫و‬‫ح‬ ‫أغمب‬ ‫في‬‫غير‬ ‫خط‬ ‫أي‬ ‫عرض‬
‫مع‬ ,‫الموقع‬ ‫ائر‬‫ز‬ ‫حاسوب‬ ‫خطوط‬ ‫في‬ ‫موجود‬CSS3‫خط‬ ‫أي‬ ‫استخداـ‬ ‫باإلمكاف‬ ‫أصبح‬‫ضمف‬
‫الخاصية‬ ‫إلى‬ ‫ه‬‫ر‬‫مسا‬ ‫إسناد‬ ‫و‬ ‫و‬ ‫الموقع‬ ‫ممفات‬ ‫ضمف‬ ‫الخط‬ ‫ممؼ‬ ‫وضع‬ ‫بعد‬ ‫الويب‬ ‫صفحة‬src
‫لقاعدة‬@font-face:‫كمايمي‬ ‫تستخدـ‬ ‫التي‬ ‫و‬ ً‫ا‬‫كمي‬ ‫الجديدة‬
ً‫ّل‬‫و‬‫أ‬-‫باستخ‬ ‫جديدة‬ ‫عائمة‬ ‫اسـ‬ ‫يؼ‬‫ر‬‫تع‬ ‫يتـ‬‫القاعدة‬ ‫داـ‬@font-face.
ً‫ا‬‫ثاني‬-‫الخاصية‬ ‫إلى‬ ً‫ا‬‫سابق‬ َ‫ئ‬ِ‫ش‬ْ‫ُن‬‫أ‬ ‫الذي‬ ‫العائمة‬ ‫اسـ‬ ‫يسند‬font-family.‫تقميدي‬ ‫بشكؿ‬
‫مستعرض‬ :‫ممحوظة‬Internet Exploer‫ع‬‫النو‬ ‫ذات‬ ‫الخطوط‬ ‫يدعـ‬.eot‫المستعرضات‬ ‫باقي‬ ‫تدعـ‬ ‫بينما‬ ‫فقط‬
‫النوعيف‬.ttf‫و‬.otf
:‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
@font-face
{
font-family: myFont;

148. ٔٗٛ
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot') format("opentype"); /* IE */
}
div
{
font-family:myFont;
}
</style>
</head>
<body>
<div>
‫إٌض‬ ‫ٌٙزا‬ ‫خـٛؽ‬ ‫ٔٛع‬ ٞ‫أ‬ َ‫اسزخذا‬ ٓ‫٠ّى‬
</div>
</body>
</html>
‫البعدين‬ ‫ذات‬ ‫الهندسية‬ ‫التحويالت‬2D Transformation
‫تمكننا‬CSS3‫كاّلنسحاب‬ ‫الصفحة‬ ‫عناصر‬ ‫عمى‬ ‫البعد‬ ‫ثنائية‬ ‫ىندسية‬ ‫تحويالت‬ ‫اء‬‫ر‬‫إج‬ ‫مف‬
translate‫التدوير‬ ‫و‬rotate‫الحجـ‬ ‫تغيير‬ ‫و‬scale‫ىا‬‫غير‬ ‫و‬‫إلى‬ ‫التحويؿ‬ ‫ابع‬‫و‬‫ت‬ ‫أحد‬ ‫بإسناد‬
‫الخاصة‬transform.
‫مستعرض‬ :‫ممحوظة‬Internet Explorer‫البادئة‬ ‫يستخدـ‬-ms-‫اسـ‬ ‫قبؿ‬‫مستعرض‬ ‫و‬ ,‫الخاصية‬Firefox
‫البادئة‬ ‫يستخدـ‬-moz-‫مستعرض‬ ‫و‬Opera‫البادئة‬ ‫يستخدـ‬-o-‫مستعرضي‬ ‫و‬Chrome‫و‬Safari‫يستخدماف‬
‫البادئة‬-webkit-
:‫الجديدة‬ ‫التحويؿ‬ ‫ابع‬‫و‬‫ت‬ ‫يعرض‬ ‫التالي‬ ‫الجدوؿ‬ ‫و‬

149. ٜٔٗ
‫التابع‬‫الشرح‬
translate(x,y)‫لو‬ ‫ة‬‫ر‬‫المم‬ ‫اإلحداثيات‬ ‫إلى‬ ‫العنصر‬ ‫ينقؿ‬
translateX(n)‫المحور‬ ‫عمى‬ ‫العنصر‬ ‫ينقؿ‬X‫مسافة‬n
translate(n)‫المحور‬ ‫عمى‬ ‫العنصر‬ ‫ينقؿ‬Y‫مسافة‬n
scale(x,y)‫لو‬ ‫يف‬‫ر‬‫الممر‬ ‫البعديف‬ ‫إلى‬ ‫العنصر‬ ‫بعدي‬ ‫يغير‬
scaleX(n)‫العنصر‬ ‫بعد‬ ‫يغير‬X‫إلى‬‫القيمة‬n
scaleY(n)‫العنصر‬ ‫بعد‬ ‫يغير‬Y‫القيمة‬ ‫إلى‬n
rotate(α)‫اوية‬‫ز‬‫ب‬ ‫العنصر‬ ‫بتدوير‬ ‫يقوـ‬α
skew(Xα,Yα)‫اويتيف‬‫ز‬‫ال‬ ‫وفؽ‬ ‫اؼ‬‫ر‬‫اّلنح‬ ‫تحويؿ‬ ‫اء‬‫ر‬‫بإج‬ ‫يقوـ‬Xα‫و‬Yα
skewX(α)‫المحور‬ ‫عمى‬ ‫اؼ‬‫ر‬‫اّلنح‬ ‫تحويؿ‬ ‫اء‬‫ر‬‫بإج‬ ‫يقوـ‬X‫اوية‬‫ز‬‫ال‬ ‫وفؽ‬α
skewY(α)‫المحور‬ ‫عمى‬ ‫اؼ‬‫ر‬‫اّلنح‬ ‫تحويؿ‬ ‫اء‬‫ر‬‫بإج‬ ‫يقوـ‬Y‫اوية‬‫ز‬‫ال‬ ‫وفؽ‬α
‫الجدول‬14‫في‬ ‫البعد‬ ‫ثنائي‬ ‫الهندسي‬ ‫التحويل‬ ‫ابع‬‫و‬‫ت‬ :CSS3
:‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
-webkit-transform:skew(30deg,20deg);
width:100px;
height:75px;
background-color:red;
border:1px solid black;

150. ٔ٘ٓ
}
</style>
</head>
<body>
<div>It is CSS3 Magic!</div>
</body>
</html>
‫في‬ ‫يبدو‬ ‫الذي‬ ‫و‬:‫كمايمي‬ ‫الويب‬ ‫مستعرض‬
‫الشكل‬54:‫تحويل‬ ‫عمى‬ ‫مثال‬Skew‫كروم‬ ‫جوجل‬ ‫مستعرض‬ ‫في‬
‫األحرؼ‬ :‫ممحوظة‬deg‫جة‬‫در‬ ‫تعني‬ ‫التحويؿ‬ ‫تابع‬ ‫إلى‬ ‫األرقاـ‬ ‫بعد‬ ‫ىا‬‫ير‬‫ر‬‫تم‬ ‫تـ‬ ‫التي‬degree‫عف‬ ً‫ا‬‫ز‬‫تميي‬ ‫ذلؾ‬ ‫و‬
‫األحرؼ‬ ‫لو‬ ‫ترمز‬ ‫الذي‬ ‫و‬ ‫ادياف‬‫ر‬‫ال‬rad

151. ٔ٘ٔ
‫األبعاد‬ ‫ثالثية‬ ‫الهندسية‬ ‫التحويالت‬3D transformation
‫تتيح‬CSS3‫العناصر‬ ‫عمى‬ ‫األبعاد‬ ‫ثالثية‬ ‫ىندسية‬ ‫بتحويالت‬ ‫القياـ‬‫لكف‬ ‫و‬ ‫السابؽ‬ ‫األسموب‬ ‫بنفس‬
:‫التالي‬ ‫الجدوؿ‬ ‫يعرضيا‬ ‫التي‬ ‫ابع‬‫و‬‫الت‬ ‫باستخداـ‬
‫التابع‬‫الشرح‬
translate3d(x,y,z)‫لو‬ ‫ة‬‫ر‬‫المم‬ ‫اإلحداثيات‬ ‫إلى‬ ‫العنصر‬ ‫ينقؿ‬
translateX(n)‫مسافة‬ ‫العنصر‬ ‫ينقؿ‬n‫المحور‬ ‫عمى‬X
translateY(n)‫مسافة‬ ‫العنصر‬ ‫ينقؿ‬n‫المحور‬ ‫عمى‬Y
translateZ(n)‫مسافة‬ ‫العنصر‬ ‫ينقؿ‬n‫المحور‬ ‫عمى‬Z
scale3d(x,y,z)‫لو‬ ‫ة‬‫ر‬‫المم‬ ‫األبعاد‬ ‫إلى‬ ‫العنصر‬ ‫أبعاد‬ ‫يغير‬
scaleX(n)‫العنصر‬ ‫بعد‬ ‫يغير‬X‫المقدار‬ ‫إلى‬n
scaleY(n)‫العنصر‬ ‫بعد‬ ‫يغير‬Y‫المقدار‬ ‫إلى‬n
scaleZ(n)‫العنصر‬ ‫بعد‬ ‫يغير‬Z‫المقدار‬ ‫إلى‬n
rotate3d(x,y,z,α)‫اوية‬‫ز‬‫ب‬ ‫الثالثة‬ ‫المحاور‬ ‫عمى‬ ‫العنصر‬ ‫بتدوير‬ ‫يقوـ‬
‫ىا‬‫مقدار‬α
rotateX(α)‫المحور‬ ‫عمى‬ ‫العنصر‬ ‫بتدوير‬ ‫يقوـ‬X‫اوية‬‫ز‬‫ب‬α
rotateY(α)‫المحور‬ ‫عمى‬ ‫العنصر‬ ‫بتدوير‬ ‫يقوـ‬Y‫اوية‬‫ز‬‫ب‬α
rotateZ(α)‫المحور‬ ‫عمى‬ ‫العنصر‬ ‫بتدوير‬ ‫يقوـ‬Z‫اوية‬‫ز‬‫ب‬α
perspective(n)‫الرؤية‬ ‫منظور‬ ‫يحدد‬
‫الجدول‬15‫في‬ ‫األبعاد‬ ‫ثالثية‬ ‫الهندسية‬ ‫التحويالت‬ :CSS3
‫المتحرك‬ ‫االنتقال‬Transition
‫توفر‬CSS3‫الخاص‬ ‫التأثير‬ ‫ىذا‬ ‫يعرؼ‬ ‫المستند‬ ‫عناصر‬ ‫عمى‬ ‫تأثير‬ ‫إلنشاء‬ ‫ة‬‫ز‬‫ممي‬ ‫و‬ ‫جميمة‬ ‫يقة‬‫ر‬‫ط‬
‫المتحرؾ‬ ‫اّلنتقاؿ‬ ‫باسـ‬‫الخاصية‬ ‫عبر‬ ‫تحقيقو‬ ‫يتـ‬ ‫الذي‬ ‫و‬transition‫قاعدة‬ ‫تطبيؽ‬ ‫يتـ‬ ‫حيث‬CSS
.‫متحرؾ‬ ‫بشكؿ‬ ‫العنصر‬ ‫يظير‬ ‫مما‬ ‫محدد‬ ‫زمف‬ ‫خالؿ‬ ‫لمعنصر‬ ‫األصمية‬ ‫القاعدة‬ ‫عف‬ ‫مختمفة‬

152. ٕٔ٘
:‫الصيغة‬ ‫يؽ‬‫ر‬‫ط‬ ‫عف‬
transition: property duration;
‫تعبر‬ ‫حيث‬property‫و‬ ‫ستتغير‬ ‫التي‬ ‫الخاصية‬ ‫اسـ‬ ‫عف‬duration‫تغيير‬ ‫يمكف‬ ‫و‬ ‫الزمف‬ ‫عف‬ ‫تعبر‬
:‫بالصيغة‬ ‫خاصية‬ ‫مف‬ ‫أكثر‬
transition: property1 duration1, property2 duration2,… etc;
:‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
width:100px;
height:100px;
background:red;
-webkit-transition:width 2s, height 2s;
}
div:hover
{
width:200px;
height:200px;
webkit-transform:rotate(180deg);
}

153. ٖٔ٘
</style>
</head>
<body>
<div>Hover over me to see the transition effect!</div>
</body>
</html>
‫التي‬ ‫البادئات‬ ‫أذكر‬ ‫لف‬ :‫ممحوظة‬‫اآلف‬ ‫عمييا‬ ‫اعتدت‬ ‫أنؾ‬ ‫المفترض‬ ‫فمف‬ ‫ىنا‬ ‫ة‬‫ر‬‫الشيي‬ ‫المستعرضات‬ ‫تستخدميا‬‫سأنوه‬ ‫و‬
‫الحرؼ‬ ‫أف‬ ‫إلى‬s‫بالثانية‬ ‫الزمف‬ ‫أف‬ ‫يعني‬ ‫قمية‬‫ر‬‫ال‬ ‫القيمة‬ ‫بعد‬second
‫حركات‬CSS3
‫تتيح‬CSS3‫استخداـ‬ ‫عف‬ ‫الويب‬ ‫مطور‬ ‫يغني‬ ‫مما‬ ‫الويب‬ ‫صفحة‬ ‫في‬ ‫مخصصة‬ ‫حركات‬ ‫إنشاء‬
‫ػ‬‫ل‬‫ا‬ ‫صور‬.gif‫ات‬‫ر‬‫تأثي‬ ‫أو‬ ‫المتحركة‬flash‫الحركات‬ ‫إنشاء‬ ‫يتـ‬ ‫و‬ ,‫الصفحة‬ ‫ضمف‬ ‫ىا‬‫غير‬ ‫و‬
:‫بخطوتيف‬
ً‫ّل‬‫و‬‫أ‬-‫القاعدة‬ ‫في‬ ‫لمحركة‬ ‫خاص‬ ‫اسـ‬ ‫يؼ‬‫ر‬‫تع‬ ‫يتـ‬@keyframe‫تحديد‬ ‫عبر‬ ‫ماىيتيا‬ ‫تحديد‬ ‫و‬
‫اّلبتدائي‬ ‫الوضع‬from‫النيائي‬ ‫الوضع‬ ‫و‬to‫الوضع‬ ‫مف‬ ‫اّلنتقاؿ‬ ‫يتـ‬ ‫الحركة‬ ‫تطبيؽ‬ ‫عند‬ ‫بالطبع‬ ‫و‬ ,
‫النيائ‬ ‫الوضع‬ ‫إلى‬ ‫لمعنصر‬ ‫اّلبتدائي‬.‫بالحركة‬ ‫نشعر‬ ‫يجعمنا‬ ‫مما‬ ‫زمنية‬ ‫ة‬‫ر‬‫فت‬ ‫خالؿ‬ ‫ي‬
ً‫ا‬‫ثاني‬-‫اسـ‬ ‫إسناد‬ ‫يتـ‬‫الحركة‬‫تنفيذىا‬ ‫زمف‬ ‫و‬‫الخاصية‬ ‫إلى‬animation.‫بالعنصر‬ ‫الخاصة‬
:‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

154. ٔ٘ٗ
<head>
<style type="text/css">
div
{
width:100px;
height:100px;
background:red;
-webkit-animation:myAnimation 5s;
}
@-webkit-keyframes myAnimation
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
‫أثناء‬ ‫لمعنصر‬ ‫النيائية‬ ‫الحالة‬ ‫و‬ ‫البدائية‬ ‫الحالة‬ ‫عمى‬ ‫باّلعتماد‬ ‫حركة‬ ‫إنشاء‬ ‫يعرض‬ ‫السابؽ‬ ‫المثاؿ‬
‫ا‬ ‫بدء‬ ‫لحظة‬ ‫العنصر‬ ‫شكؿ‬ ‫عف‬ ‫تعبر‬ ‫البدائية‬ ‫الحالة‬ ‫أف‬ ‫حيث‬ ‫الحركة‬‫تعبر‬ ‫النيائية‬ ‫الحالة‬ ‫و‬ ‫لحركة‬
.‫الحركة‬ ‫نياية‬ ‫لحظة‬ ‫العنصر‬ ‫شكؿ‬ ‫عف‬

155. ٔ٘٘
‫قاعدة‬ ‫إنشاء‬ ‫عبر‬ ‫الحركة‬ ‫لحظات‬ ‫مف‬ ‫لحظة‬ ‫كؿ‬ ‫في‬ ‫العنصر‬ ‫شكؿ‬ ‫تخصيص‬ ‫يمكف‬CSS‫خاصة‬
‫قاعدة‬ ‫ضمف‬ ‫المحظة‬ ‫بيذه‬@keyframes:‫بالشكؿ‬
@-webkit-keyframes myAnimation
{
0% {background:red;}
15% {backgroung:green;width:150px;color:white;}
50% {height:350px;}
100% {background:yellow;}
}
‫أف‬ ‫حيث‬0%‫و‬ ‫الحركة‬ ‫بداية‬ ‫لحظة‬ ‫تعني‬100%‫ى‬‫األخر‬ ‫القيـ‬ ‫و‬ ‫نيايتيا‬ ‫لحظة‬ ‫تعني‬‫عف‬ ‫تعبر‬
‫ات‬‫ر‬‫فت‬.‫الحركة‬ ‫حدوث‬ ‫أثناء‬
‫يعود‬ ‫و‬ ‫الحركة‬ ‫أثناء‬ ‫ات‬‫ر‬‫التغي‬ ‫ىذه‬ ‫تحدث‬ :‫ممحوظة‬‫الحركة‬ ‫انتياء‬ ‫عند‬ ‫الطبيعي‬ ‫شكمو‬ ‫إلى‬ ‫العنصر‬
‫في‬ ‫المتعددة‬ ‫األعمدة‬CSS3
‫تسمح‬CSS3‫متعددة‬ ‫أعمدة‬ ‫شكؿ‬ ‫عمى‬ ‫العناصر‬ ‫محتوى‬ ‫بعرض‬Multi-Columns‫مبدأ‬ ‫(عمى‬
)‫ائد‬‫ر‬‫الج‬:‫يقتيف‬‫ر‬‫بط‬
‫األولى‬-‫عرض‬ ‫و‬ ‫ثابت‬ ‫أعمدة‬ ‫عدد‬‫عمود‬‫إلى‬ ‫األعمدة‬ ‫عدد‬ ‫إسناد‬ ‫خالؿ‬ ‫مف‬ ‫ذلؾ‬ ‫يتـ‬ ‫و‬ :‫متغير‬
‫الخاصية‬column-count‫عرض‬ ‫يتغير‬ ‫و‬ ,‫األعمدة‬ ‫مف‬ ‫المذكور‬ ‫العدد‬ ‫إلى‬ ‫المحتوى‬ ‫ِّـ‬‫تقس‬ ‫التي‬
.‫المستعرض‬ ‫نافذة‬ ‫حجـ‬ ‫تغير‬ ‫مع‬ ‫األعمدة‬
‫الثانية‬-‫إلى‬ ‫احد‬‫و‬‫ال‬ ‫العمود‬ ‫عرض‬ ‫خالؿ‬ ‫مف‬ ‫ذلؾ‬ ‫يتـ‬ ‫و‬ :‫متغير‬ ‫أعمدة‬ ‫عدد‬ ‫و‬ ‫ثابت‬ ‫عمود‬ ‫عرض‬
‫الخاصية‬column-width‫الخاصية‬ ‫إلى‬ ‫عموديف‬ ‫كؿ‬ ‫بيف‬ ‫المسافة‬ ‫و‬column-gap‫و‬ ,‫ىذه‬ ‫في‬

156. ٔ٘ٙ
‫نافذة‬ ‫حجـ‬ ‫تغير‬ ‫مع‬ ‫عددىا‬ ‫يتغير‬ ‫و‬ ‫منيا‬ ‫لكؿ‬ ‫ثابت‬ ‫عرض‬ ‫عمى‬ ‫األعمدة‬ ‫تحافظ‬ ‫يقة‬‫ر‬‫الط‬
.‫المستعرض‬
.‫المتعددة‬ ‫األعمدة‬ ‫خصائص‬ ‫مع‬ ً‫ا‬‫سابق‬ ‫ة‬‫ر‬‫المذكو‬ ‫البادئات‬ ‫نفس‬ ‫تستخدـ‬ :‫ممحوظة‬
:‫األولى‬ ‫يقة‬‫ر‬‫بالط‬ ‫المتعددة‬ ‫األعمدة‬ ‫إنشاء‬ ‫يعرض‬ ‫التالي‬ ‫المثاؿ‬
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.newspaper
{
-webkit-column-count:3;
}
</style>
</head>
<body>
<div class="newspaper">
this is a sample content this is a sample content this is a
sample content this is a sample content this is a sample content
this is a sample content this is a sample content this is a
sample content this is a sample content this is a sample content
this is a sample content this is a sample content this is a
sample content this is a sample content this is a sample content
this is a sample content this is a sample content this is a
sample content this is a sample content this is a sample content
this is a sample content this is a sample content this is a
sample content this is a sample content this is a sample content
this is a sample content this is a sample content.

157. ٔ٘ٚ
</div>
</body>
</html>
‫يبدو‬‫السابؽ‬ ‫المثاؿ‬:‫كمايمي‬ ‫الويب‬ ‫مستعرض‬ ‫في‬
‫الشكل‬55.‫العدد‬ ‫محددة‬ ‫متعددة‬ ‫بأعمدة‬ ‫محتوى‬ ‫إنشاء‬ :
‫الخاصية‬ ‫يؽ‬‫ر‬‫ط‬ ‫عف‬ ‫األعمدة‬ ‫بيف‬ ‫محدديف‬ ‫لوف‬ ‫و‬ ‫مظير‬ ‫ذات‬ ‫اصؿ‬‫و‬‫ف‬ ‫وضع‬ ‫يمكف‬column-rule
:‫التالي‬ ‫لممثاؿ‬ ‫مشابو‬ ‫بشكؿ‬
column-rule: 4px dotted black;
‫المستخدم‬ ‫اجهة‬‫و‬CSS3 User Interface
‫قدمتو‬ ‫لما‬ ‫باإلضافة‬CSS3‫ين‬ ‫لمف‬ ‫ات‬‫ز‬‫مي‬ ‫مف‬‫مف‬ ‫مجموعة‬ ‫قدمت‬ ‫فقد‬ ‫الويب‬ ‫صفحات‬ ‫شئ‬
:‫التالي‬ ‫الجدوؿ‬ ‫يعرضيا‬ ‫التي‬ ‫الخصائص‬ ‫عبر‬ ‫لمصفحة‬ ‫النيائي‬ ‫لممستخدـ‬ ‫التحسينات‬

158. ٔ٘ٛ
‫الخاصية‬‫الممكنة‬ ‫القيم‬‫الشرح‬
appearancenormal‫أو‬icon‫أو‬
window‫أو‬button‫أو‬
menu‫أو‬field
‫تحدد‬)‫(شكؿ‬ ‫كيفية‬ ‫الويب‬ ‫لمستعرض‬
‫العنصر‬ ‫عرض‬‫المستند‬ ‫ضمف‬
iconauto‫أو‬inherit‫ابط‬‫ر‬ ‫أو‬
‫ة‬‫ر‬‫لصو‬
‫أيقوني‬ ‫بشكؿ‬ ‫ما‬ ‫عنصر‬ ‫جعؿ‬ ‫تتيح‬
nav-down‫و‬
nav-left‫و‬
nav-right‫و‬
nav-up
auto‫أو‬inherit‫أو‬
‫أو‬ ‫العناصر‬ ‫أحد‬ ‫معرؼ‬
‫إطار‬ ‫اسـ‬
‫يضغط‬ ‫عندما‬ ‫اّلنتقاؿ‬ ‫سيتـ‬ ‫أيف‬ ‫تحدد‬
‫لوحة‬ ‫في‬ ‫األسيـ‬ ‫مفاتيح‬ ‫عمى‬ ‫المستخدـ‬
‫المفاتيح‬
nav-index‫و‬ ‫صحيح‬ ‫عدد‬‫مميز‬‫ضغطات‬ ‫عدد‬ ‫إلييا‬ ‫المسند‬ ‫العدد‬ ‫يحدد‬
‫مفتاح‬Tab‫العنصر‬ ‫إلى‬ ‫لالنتقاؿ‬ ‫الالزمة‬
‫العناصر‬ ‫بيف‬ ‫اّلنتقاؿ‬ ‫تسمسؿ‬ ‫أدؽ‬ ‫بشكؿ‬ ‫أو‬
‫مفتاح‬ ‫عمى‬ ‫الضغط‬ ‫عند‬Tab
resizenone‫أو‬horizontal‫أو‬
vertical‫أو‬both
‫لممستخدـ‬ ‫ح‬‫المسمو‬ ‫مف‬ ‫إذاكاف‬ ‫فيما‬ ‫تحدد‬
‫عناصر‬ ‫أحد‬ ‫حجـ‬ ‫تغيير‬div‫يدوي‬ ‫بشكؿ‬
‫الشكل‬56‫في‬ ‫الجديدة‬ ‫المستخدم‬ ‫اجهة‬‫و‬ ‫خصائص‬ :CSS3
‫محددات‬CSS3
‫في‬ ‫الجديدة‬ ‫المحددات‬ ‫مف‬ ‫مجموعة‬ ‫إضافة‬ ‫تـ‬CSS3‫التالي‬ ‫الجدوؿ‬ ‫في‬ ‫نعرضيا‬:
‫المحدد‬‫مثال‬‫المثال‬ ‫شرح‬
tag1~tag2p~ul‫مسبوؽ‬ ‫تبة‬‫ر‬‫م‬ ‫غير‬ ‫قائمة‬ ‫عنصر‬ ‫كؿ‬
‫ة‬‫ر‬‫فق‬ ‫بعنصر‬
tag[attribute^=v]a[href^="https"]‫قيـ‬ ‫تبدأ‬ ‫التي‬ ‫ابط‬‫و‬‫الر‬ ‫عناصر‬ ‫كؿ‬
‫اصفتيا‬‫و‬href‫بالقيمة‬https

159. ٜٔ٘
tag[attribute$=v]a[href$=".xml"]‫إلى‬ ‫تشير‬ ‫التي‬ ‫ابط‬‫و‬‫الر‬ ‫عناصر‬ ‫كؿ‬
‫ع‬‫النو‬ ‫مف‬ ‫ممفات‬.xml
tag[attribute*=v]a[href*="micro"]‫إلى‬ ‫تشير‬ ‫التي‬ ‫ابط‬‫و‬‫الر‬ ‫عناصر‬ ‫كؿ‬
‫القيمة‬ ‫تحوي‬ ‫عناويف‬micro
:first-of-typep:first-of-type‫عنصر‬ ‫كؿ‬ ‫تحديد‬<p>‫العنصر‬ ‫يكوف‬
‫ه‬‫ر‬‫لعنص‬ ‫بالنسبة‬ ‫نوعو‬ ‫مف‬ ‫األوؿ‬ ‫اّلبف‬
‫األب‬
:last-of-typep:last-of-type‫عنصر‬ ‫كؿ‬ ‫تحديد‬<p>‫العنصر‬ ‫يكوف‬
‫ه‬‫ر‬‫لعنص‬ ‫بالنسبة‬ ‫نوعو‬ ‫مف‬ ‫األخير‬ ‫اّلبف‬
‫األب‬
:only-of-typep:only-of-type‫عنصر‬ ‫كؿ‬ ‫تحديد‬<p>‫العنصر‬ ‫يكوف‬
‫ه‬‫ر‬‫لعنص‬ ‫بالنسبة‬ ‫نوعو‬ ‫مف‬ ‫الوحيد‬ ‫اّلبف‬
‫األب‬
:only-childp:only-child‫عنصر‬ ‫كؿ‬ ‫يحدد‬<p>‫اّلبف‬ ‫يكوف‬
‫األب‬ ‫ه‬‫ر‬‫لعنص‬ ‫الوحيد‬
:nth-child(n)p:nth-child(2)‫عنصر‬ ‫كؿ‬ ‫يحدد‬<p>‫اّلبف‬ ‫يكوف‬
‫األب‬ ‫ه‬‫ر‬‫لعنص‬ ‫الثاني‬
:nth-last-child(n)p:nth-last-child(2)‫عنصر‬ ‫كؿ‬ ‫يحدد‬<p>‫اّلبف‬ ‫يكوف‬
‫مف‬ ‫العد‬ ‫بدء‬ ‫مع‬ ‫األب‬ ‫ه‬‫ر‬‫لعنص‬ ‫الثاني‬
‫األخير‬ ‫اّلبف‬
:nth-of-type(n)p:nth-of-type(2)‫عنصر‬ ‫كؿ‬ ‫يحدد‬<p>‫اّلبف‬ ‫يكوف‬
‫األ‬ ‫ه‬‫ر‬‫لعنص‬ ‫الثاني‬‫ب‬
:last-childp:last-child‫عنصر‬ ‫كؿ‬ ‫يحدد‬<p>‫اّلبف‬ ‫يكوف‬
‫األب‬ ‫ه‬‫ر‬‫لعنص‬ ‫األخير‬
:root:root‫لممستند‬ ‫الجذر‬ ‫العنصر‬ ‫يحدد‬
:emptyp:empty‫عناصر‬ ‫كؿ‬ ‫يحدد‬<p>‫عديمة‬

160. ٔٙٓ
‫المحتوى‬
:target#news:target‫عنصر‬ ‫يحدد‬#news‫اؿ‬ّ‫الفع‬
‫النقر‬ ‫عبر‬ ‫إليو‬ ‫الوصوؿ‬ ‫تـ‬ ‫(الذي‬ً‫ا‬‫حالي‬
)ً‫ا‬‫داخمي‬ ‫إليو‬ ‫يشير‬ ‫ابط‬‫ر‬ ‫عمى‬
:enabledinput:enabled‫المفعمة‬ ‫اإلدخاؿ‬ ‫عناصر‬ ‫كؿ‬
:disabledinput:disabled‫مة‬ّ‫المفع‬ ‫غير‬ ‫اإلدخاؿ‬ ‫عناصر‬ ‫كؿ‬
:checkedinput:checked‫ة‬‫ر‬‫المختا‬ ‫اإلدخاؿ‬ ‫عناصر‬ ‫كؿ‬
:not(selector):not(p)‫عناصر‬ ‫عدا‬ ‫العناصر‬ ‫كؿ‬<p>
::selection::selection‫المستخدـ‬ ‫قاـ‬ ‫الذي‬ ‫العنصر‬ ‫ء‬‫جز‬
‫بتحديده‬
‫الجدول‬16‫في‬ ‫الجديدة‬ ‫المحددات‬ :CSS3

161. ٔٙٔ
‫الخاتمة‬
‫عف‬ ‫حديثنا‬ ‫نياية‬ ‫إلى‬ ‫وصمنا‬ ‫قد‬ ‫نكوف‬ ‫بيذا‬CSS3‫لغتي‬ ‫ح‬‫بشر‬ ‫بوعده‬ ‫وفى‬ ‫قد‬ ‫الكتاب‬ ‫يكوف‬ ‫بيذا‬ ‫و‬
HTML5‫و‬CSS3‫ار‬‫و‬‫مش‬ ‫في‬ ‫المسافة‬ ‫بع‬‫ر‬ ‫قطعت‬ ‫قد‬ ‫أنت‬ ‫تكوف‬ ‫بيذا‬ ‫و‬ ‫بسيط‬ ‫و‬ ‫ؼ‬َّ‫ث‬‫مك‬ ‫بشكؿ‬
‫تتس‬ ‫قد‬ ‫ىنا‬ ‫و‬ ,‫الويب‬ ‫برمجة‬ ‫تعمـ‬‫الحقيقة‬ ‫في‬ ‫و‬ ‫بعد؟‬ ‫ماذا‬ ‫و‬ : ‫اءؿ‬‫التالية‬ ‫الخطوة‬ ‫فإف‬)‫عـ‬‫أز‬ ‫(كما‬
‫تتعمـ‬ ‫أف‬ ‫ىي‬Java Script‫أو‬jQuery‫مف‬ ‫البرمجة‬ ‫لغات‬ ‫إحدى‬ ‫تعمـ‬ ‫في‬ ‫الميمة‬ ‫الخطوة‬ ‫تأتي‬ ‫ثـ‬
‫فر‬‫ر‬‫السي‬ ‫طرؼ‬‫مثؿ‬PHP‫أو‬ASP.NET‫قطعت‬ ‫قد‬ ‫لتكوف‬ٛ٘‫لقب‬ ‫نحو‬ ‫يؽ‬‫ر‬‫الط‬ ‫مف‬ %"‫ر‬ِّ‫مطو‬
‫ويب‬Web Developer"‫ػ‬‫ل‬‫ا‬ ‫أما‬ ,ٔ٘‫الباقية‬ %‫ف‬‫تكمف‬-‫أيي‬‫ر‬‫ب‬-‫في‬‫عممية‬‫بة‬‫ر‬‫األت‬ ‫و‬ ‫الغبار‬ ‫نفض‬
.‫الدائمة‬ ‫المتابعة‬ ‫و‬ ‫ة‬‫ر‬‫المستم‬ ‫اءة‬‫ر‬‫الق‬ ‫عبر‬ ‫تيذيبو‬ ‫و‬ ‫فقط‬ ‫الثميف‬ ‫الدر‬ ‫عمى‬ ‫اإلبقاء‬ ‫و‬ ‫تعممتو‬ ‫عما‬
‫في‬ ‫ساىـ‬ ‫قد‬ ‫ىذا‬ ‫كتابي‬ ‫يكوف‬ ‫أف‬ ‫ى‬ّ‫أتمن‬‫إعطائؾ‬‫لغتي‬ ‫عف‬ ‫جيدة‬ ‫ة‬‫ر‬‫فك‬HTML5‫و‬CSS3‫أسأؿ‬ ‫و‬
‫أرضاؾ‬ ‫و‬ ‫اقؾ‬‫ر‬ ‫قد‬ ‫األفكار‬ ‫عرض‬ ‫في‬ ‫أسموبو‬ ‫يكوف‬ ‫أف‬ ‫اهلل‬‫حفظو‬ ‫و‬ ‫اهلل‬ ‫عاية‬‫بر‬ ‫فسأتركؾ‬ ‫اآلف‬ ‫ا‬َّ‫أم‬ ,
,‫لمويب‬ ‫التطوير‬ ‫عالـ‬ ‫في‬ ‫ممتعة‬ ‫و‬ ‫ىادئة‬ ‫برحمة‬ ‫لؾ‬ ‫سأدعو‬ ‫و‬‫عالـ‬ ‫في‬ ‫أحبو‬ ‫اؿ‬‫ز‬‫أ‬ ‫ما‬ ‫ني‬ّ‫أن‬ ‫ه‬ّ‫أنو‬ ‫و‬
‫اإللكتروني‬ ‫يدي‬‫ر‬‫ب‬ ‫عمى‬ ‫استفسار‬ ‫أو‬ ‫اح‬‫ر‬‫اقت‬ ‫بأي‬ ‫ب‬ّ‫أرح‬ ‫و‬ ‫ـ‬ّ‫م‬‫أتع‬ ‫و‬ ‫الويب‬
mokhtar_ss@hotmail.com.‫بركاتو‬ ‫و‬ ‫اهلل‬ ‫رحمة‬ ‫و‬ ‫عميكـ‬ ‫السالـ‬ ‫و‬

162. ٕٔٙ

163. ٖٔٙ
‫الفهارس‬

164. ٔٙٗ

165. ٔٙ٘
‫األشكال‬ ‫فهرس‬
‫الشك‬‫ؿ‬ٔ:‫كتابة‬‫أوؿ‬‫ة‬‫ر‬‫شيف‬HTML‫في‬‫نامج‬‫ر‬‫ب‬‫ة‬‫ر‬‫المفك‬‫و‬‫حفظ‬‫الممؼ‬.......................ٔٚ
‫الشكؿ‬ٕ:‫الشكؿ‬‫النيائي‬‫في‬‫المستعرض‬‫ؿ‬َّ‫ألو‬‫صفحة‬‫مكتوبة‬‫باستخداـ‬HTML.............ٔٛ
‫الشكؿ‬ٖ:‫عنصر‬‫عرض‬‫النصوص‬<p>‫عند‬‫إضافة‬‫اصفة‬‫و‬‫المحاذاة‬align................ٕٗ
‫الشكؿ‬ٗ:‫صفحة‬‫اختبار‬‫عناصر‬‫العناويف‬.................................................ٕٚ
‫الشكؿ‬٘:‫صفحة‬‫بة‬‫ر‬‫تج‬‫العنصر‬<hr />..................................................ٕٛ
‫الشكؿ‬ٙ:‫التعميقات‬‫تظير‬‫بالموف‬‫األخضر‬‫في‬‫نافذة‬‫عرض‬‫المصدر‬‫و‬‫ّل‬‫تظير‬‫في‬‫الصفحة‬.ٖٓ
‫الشكؿ‬ٚ:‫صفحة‬‫اختبار‬‫عناصر‬‫تنسيؽ‬‫النصوص‬.........................................ٖٕ
‫الشكؿ‬ٛ:‫مثاؿ‬‫ّلستخداـ‬‫بعض‬‫المحارؼ‬‫الخاصة‬‫في‬‫الصفحة‬..............................ٖٗ
‫الشكؿ‬ٜ:‫صفحة‬‫اختبار‬‫عنصر‬‫ابط‬‫و‬‫الر‬...................................................ٖ٘
‫الشكؿ‬ٔٓ:‫صفحة‬‫اختبار‬‫لعنصر‬‫الصور‬..................................................ٖٛ
‫الشكؿ‬ٔٔ:‫استخداـ‬‫الصور‬ً‫ّل‬‫بد‬‫عف‬‫النصوص‬‫كمحتوى‬‫ابط‬‫و‬‫لمر‬...........................ٗٓ
‫الشكؿ‬ٕٔ:‫مثاؿ‬‫عمى‬‫صنع‬‫يطة‬‫ر‬‫خ‬‫ية‬‫ر‬‫صو‬................................................ٗٔ
‫الشكؿ‬ٖٔ:‫شكؿ‬‫تخيمي‬‫لتوضي‬‫ح‬‫المبدأ‬‫اليندسي‬‫في‬‫رسـ‬‫المناطؽ‬...........................ٕٗ
‫الشكؿ‬ٔٗ:‫مثاؿ‬‫لقائمة‬‫غير‬‫تبة‬‫ر‬‫م‬‫بسيطة‬..................................................ٗ٘
‫الشكؿ‬ٔ٘:‫مثاؿ‬‫عمى‬‫قائمة‬‫تبة‬‫ر‬‫م‬‫بسيطة‬..................................................ٗ٘
‫الشكؿ‬ٔٙ:‫مثاؿ‬‫عمى‬‫قائمة‬‫معقدة‬.........................................................ٗٚ
‫الشكؿ‬ٔٚ:‫ىكذا‬‫تبدو‬‫قائمة‬‫المصطمحات‬‫في‬‫المستعرض‬...................................ٜٗ
‫الشكؿ‬ٔٛ:‫شكؿ‬‫تخيمي‬‫لتوضيح‬‫الوسوـ‬‫المستعممة‬‫إلنشاء‬‫الجدوؿ‬..........................ٜٗ
‫الشكؿ‬ٜٔ:‫مثاؿ‬‫عمى‬‫إنشاء‬‫جدوؿ‬‫بسيط‬...................................................٘ٔ
‫الشكؿ‬ٕٓ:‫رسـ‬‫توضيحي‬‫ألقساـ‬‫الجدوؿ‬‫في‬HTML.....................................ٕ٘
‫الشكؿ‬ٕٔ:‫مثاؿ‬‫إلنشاء‬‫جدوؿ‬HTML‫مثالي‬..............................................٘٘

166. ٔٙٙ
‫الشكؿ‬ٕٕ:‫مثاؿ‬‫عمى‬‫إنشاء‬‫جدوؿ‬‫غير‬‫بسيط‬‫باستخداـ‬‫اصفتيف‬‫و‬‫ال‬rowspan‫و‬colspan.٘ٚ
‫الشكؿ‬ٕٖ:‫مثاؿ‬‫عمى‬‫إنشاء‬‫نموذج‬‫بسيط‬..................................................ٙٔ
‫الشكؿ‬ٕٗ:‫إنشاء‬‫نموذج‬‫أعقد‬‫بقميؿ‬........................................................ٕٙ
‫الشكؿ‬ٕ٘:‫مثاؿ‬‫عمى‬‫استخداـ‬checkbox‫و‬radio......................................ٙٗ
‫الشكؿ‬ٕٙ:‫مثاؿ‬‫عمى‬‫استخداـ‬‫عنصر‬select.............................................ٙ٘
‫الشكؿ‬ٕٚ:‫مثاؿ‬‫عمى‬‫استخداـ‬‫العنصر‬textarea.........................................ٙٚ
‫الشكؿ‬ٕٛ:‫مثاؿ‬‫عمى‬‫استخداـ‬fieldSet..................................................ٜٙ
‫الشكؿ‬ٕٜ:‫استخداـ‬‫ات‬‫ر‬‫اإلطا‬‫بشكؿ‬‫عمودي‬...............................................ٚٓ
‫الشكؿ‬ٖٓ:‫استخداـ‬‫ات‬‫ر‬‫اإلطا‬‫بشكؿ‬‫أفقي‬..................................................ٚٔ
‫الشكؿ‬ٖٔ:‫عنصر‬‫عرض‬‫الفيديو‬‫الجديد‬‫كما‬‫يبدو‬‫في‬‫مستعرض‬‫جوجؿ‬‫كروـ‬..............ٛٗ
‫الشكؿ‬ٖٕ:‫عنصر‬‫عرض‬‫الصوت‬‫الجديد‬‫كما‬‫يبدو‬‫في‬‫مستعرض‬‫جوجؿ‬‫كروـ‬............ٛ٘
‫الشكؿ‬ٖٖ:‫عناصر‬‫اإلدخاؿ‬‫الجديدة‬‫كما‬‫تبدو‬‫في‬‫مستعرض‬‫كروـ‬...........................ٛٛ
‫الشكؿ‬ٖٗ:‫استخداـ‬‫خصائص‬‫مظير‬‫النصوص‬..........................................ٔٓٗ
‫الشكؿ‬ٖ٘:‫استخداـ‬‫خصائص‬‫الخطوط‬..................................................ٔٓٙ
‫الشكؿ‬ٖٙ:‫ىكذا‬‫تبدو‬‫صفحة‬‫اختبار‬‫مظير‬‫ابط‬‫و‬‫الر‬‫لحظة‬‫النقر‬‫عمى‬‫ابط‬‫ر‬‫ال‬‫الثالث‬‫و‬‫بعد‬‫ة‬‫ر‬‫يا‬‫ز‬
‫الثاني‬....................................................................................ٔٓٛ
‫الشكؿ‬ٖٚ:‫ىكذا‬‫تبدو‬‫صفحة‬‫اختبار‬‫خصائص‬‫الخمفية‬...................................ٔٔٔ
‫الشكؿ‬ٖٛ:‫ىكذا‬‫تبدو‬‫صفحة‬‫اختبار‬‫خصائص‬‫مظير‬‫ائـ‬‫و‬‫الق‬‫في‬‫مستعرض‬‫الويب‬.........ٖٔٔ
‫الشكؿ‬ٖٜ:‫توظيؼ‬CSS‫لتنسيؽ‬‫مظير‬‫الجداوؿ‬........................................ٔٔٙ
‫الشكؿ‬ٗٓ:‫مثاؿ‬‫عمى‬‫استخداـ‬‫خصائص‬‫ة‬َ‫ع‬َ‫موض‬‫العناصر‬‫في‬CSS....................ٔٔٛ
‫الشكؿ‬ٗٔ:‫مثاؿ‬‫عمى‬‫استخداـ‬‫الخاصية‬z-index......................................ٕٔٓ
‫الشكؿ‬ٕٗ:‫مثاؿ‬‫عمى‬‫عرض‬‫أشرطة‬‫ير‬‫ر‬‫التم‬‫لمعناصر‬‫ذات‬‫المحتوى‬‫الكبير‬...............ٕٔٔ
‫الشكؿ‬ٖٗ:‫نموذج‬‫الصندوؽ‬box model...............................................ٕٖٔ

167. ٔٙٚ
‫الشكؿ‬ٗٗ:‫مثاؿ‬‫عمى‬‫استخداـ‬‫خصائص‬‫احة‬‫ز‬‫اإل‬‫الداخمية‬................................ٕٔٙ
‫الشكؿ‬ٗ٘:‫مثاؿ‬‫عمى‬‫استخداـ‬‫خاصية‬‫احة‬‫ز‬‫اإل‬‫الخارجة‬margin..........................ٕٔٛ
‫الشكؿ‬ٗٙ:‫مثاؿ‬‫عمى‬‫استخداـ‬‫خاصية‬‫التعويـ‬float.....................................ٖٔٔ
‫الشكؿ‬ٗٚ:‫استخداـ‬‫القاعدة‬@media..................................................ٖٔٗ
‫الشكؿ‬ٗٛ:‫استخداـ‬‫القاعدة‬@media..................................................ٖٔٗ
‫الشكؿ‬ٜٗ:‫استخداـ‬‫خاصية‬border-radius‫في‬‫مستعرض‬‫كروـ‬.......................ٔٗٓ
‫الشكؿ‬٘ٓ:‫ات‬‫ر‬‫اإلطا‬‫ية‬‫ر‬‫الصو‬‫في‬CSS3...............................................ٔٗٓ
‫الشكؿ‬٘ٔ:‫اإلطار‬‫ي‬‫الصور‬‫في‬‫مستعرض‬‫جوجؿ‬‫كروـ‬...................................ٕٔٗ
‫الشكؿ‬ٕ٘:‫خاصية‬‫الظؿ‬‫كما‬‫تبدو‬‫في‬‫مستعرض‬‫كروـ‬...................................ٖٔٗ
‫الشكؿ‬ٖ٘:‫نموذج‬‫الصندوؽ‬‫بالنسبة‬‫لخاصية‬‫الخمفية‬‫في‬CSS3.........................ٔٗٗ
‫الشكؿ‬٘ٗ:‫مثاؿ‬‫عمى‬‫تحويؿ‬Skew‫في‬‫مستعرض‬‫جوجؿ‬‫كروـ‬..........................ٔ٘ٓ
‫الشكؿ‬٘٘:‫إنشاء‬‫محتوى‬‫بأعمدة‬‫متعددة‬‫محددة‬‫العدد‬.....................................ٔ٘ٚ
‫الشكؿ‬٘ٙ:‫خصائص‬‫اجية‬‫و‬‫المستخدـ‬‫الجديدة‬‫في‬CSS3...............................ٔ٘ٛ

168. ٔٙٛ

169. ٜٔٙ
‫الجداول‬ ‫فهرس‬
‫الجدوؿ‬ٔ:‫جدوؿ‬‫اصفات‬‫و‬‫ال‬‫المشتركة‬‫بيف‬‫أغمب‬‫عناصر‬HTML...........................ٕ٘
‫الجدوؿ‬ٕ:‫بعض‬‫المحارؼ‬‫الخاصة‬‫في‬HTML...........................................ٖٖ
‫الجدوؿ‬ٖ:‫القيـ‬‫المختمفة‬‫اصفة‬‫و‬‫لم‬type‫الخاصة‬‫بعنصر‬<input>.........................ٙٓ
‫الجدوؿ‬ٗ:‫دليؿ‬‫وسوـ‬HTML.............................................................ٚٚ
‫الجدوؿ‬٘:‫اصفات‬‫و‬‫العنصر‬<video>....................................................ٛٗ
‫الجدوؿ‬ٙ:‫اصفات‬‫و‬‫العنصر‬<video>....................................................ٛٙ
‫الجدوؿ‬ٚ:‫اع‬‫و‬‫أن‬‫عناصر‬‫اإلدخاؿ‬‫الجديدة‬‫في‬HTML 5..................................ٛٚ
‫الجدوؿ‬ٛ:‫بعض‬‫طرؽ‬‫كائف‬‫العنصر‬<canvas>.........................................ٜٕ
‫الجدوؿ‬ٜ:‫دليؿ‬‫الوسوـ‬‫الجديدة‬‫في‬HTML 5.............................................ٜٗ
‫الجدوؿ‬ٔٓ:‫احدات‬‫و‬‫القياس‬‫في‬CSS...................................................ٕٕٔ
‫الجدوؿ‬ٔٔ:‫قيـ‬‫القاعدة‬@media......................................................ٖٔ٘
‫الجدوؿ‬ٕٔ:‫محددات‬CSS.............................................................ٖٔٚ
‫الجد‬‫وؿ‬ٖٔ:‫خصائص‬‫تنسيؽ‬‫النصوص‬‫الجديدة‬‫في‬CSS3.............................ٔٗٙ
‫الجدوؿ‬ٔٗ:‫ابع‬‫و‬‫ت‬‫التحويؿ‬‫اليندسي‬‫ثنائي‬‫البعد‬‫في‬CSS3...............................ٜٔٗ
‫الجدوؿ‬ٔ٘:‫التحويالت‬‫اليندسية‬‫ثالثية‬‫األبعاد‬‫في‬CSS3...............................ٔ٘ٔ
‫الجدوؿ‬ٔٙ:‫المحددات‬‫الجديدة‬‫في‬CSS3..............................................ٔٙٓ

170. ٔٚٓ

171. ٔٚٔ
‫المحتويات‬ ‫فهرس‬
‫اإلىداء‬.........................................................................ٚ
‫تنويو‬...........................................................................ٜ
‫بيف‬‫يدي‬‫الكتاب‬...............................................................ٔٔ
‫مقدمة‬........................................................................ٔ٘
‫ما‬‫ىي‬HTML‫؟‬...............................................................ٔ٘
‫كيؼ‬‫أبدأ‬‫في‬‫ت‬‫عمـ‬‫كتابة‬‫مستندات‬HTML‫؟‬......................................ٔٙ
‫المثاؿ‬‫ؿ‬َّ‫األو‬‫في‬‫لغة‬HTML....................................................ٔٙ
‫عناصر‬HTML................................................................ٔٛ
‫اغات‬‫ر‬‫الف‬WHITE SPACES.......................................................ٕٓ
‫الشكؿ‬‫العاـ‬‫لعناصر‬HTML...................................................ٕٔ
‫الشكؿ‬‫العاـ‬‫لصفحات‬HTML..................................................ٕٕ
‫اصفات‬‫و‬‫الوسوـ‬ATTRIBUTES...................................................ٕٖ
‫عناصر‬‫العناويف‬HEADINGS....................................................ٕٙ
‫عنصر‬‫الخط‬‫األفقي‬HORIZONTAL LINE..........................................ٕٚ
‫التعميقات‬COMMENTS..........................................................ٕٜ
‫عناصر‬‫النصوص‬PARAGRAPHS...............................................ٖٓ

172. ٕٔٚ
‫عناصر‬‫تنسيؽ‬‫النصوص‬TEXT FORMATTING....................................ٖٓ
‫المحارؼ‬‫و‬‫الرموز‬‫ال‬‫َّة‬‫خاص‬SPECIAL CHARACTERS...............................ٖٕ
‫عناصر‬‫ابط‬‫و‬‫الر‬HYPER LINKS..................................................ٖٗ
‫عناصر‬‫الصور‬IMAGES.......................................................ٖٚ
‫الصور‬ً‫ّل‬‫بد‬‫مف‬‫نصوص‬‫ابط‬‫و‬‫الر‬..............................................ٖٜ
‫ائط‬‫ر‬‫الخ‬‫ة‬َّ‫ي‬‫ر‬‫الصو‬IMAGE MAPS.................................................ٗٓ
‫ابط‬‫و‬‫الر‬‫ة‬َّ‫الداخمي‬INTERNAL LINKING..............................................ٕٗ
‫ائـ‬‫و‬‫الق‬LISTS..................................................................ٗٗ
‫الجداوؿ‬TABLES...............................................................ٜٗ
‫الجداوؿ‬‫غير‬‫البسيطة‬.........................................................٘٘
‫النماذج‬FORMS...............................................................٘ٛ
‫تقسيـ‬‫عناصر‬‫اإلدخاؿ‬‫إلى‬‫مجموعات‬.........................................ٙٚ
‫ات‬‫ر‬‫اإلطا‬FRAMES.............................................................ٜٙ
‫عناصر‬‫ػ‬‫ل‬‫ا‬META..............................................................ٕٚ
‫دليؿ‬‫وسوـ‬HTML.............................................................ٚٗ
XHTML......................................................................ٚٛ
‫اعد‬‫و‬‫ق‬XHTML................................................................ٜٚ
‫يؼ‬‫ر‬‫تع‬‫ع‬‫نو‬‫المستند‬<!DOCTYPE>.............................................ٜٚ
‫اع‬‫و‬‫األن‬‫المختمفة‬‫لممستند‬.......................................................ٛٓ
‫التحقؽ‬‫مف‬‫صحة‬‫صفحات‬XHTML............................................ٛٔ

173. ٖٔٚ
HTML5......................................................................ٕٛ
‫مستعرضات‬‫الويب‬‫الداعمة‬‫ػ‬‫ل‬HTML 5.........................................ٕٛ
‫عنصر‬‫الفيديو‬VIDEO..........................................................ٖٛ
‫عنصر‬‫الصوت‬AUDIO........................................................ٛ٘
‫عناصر‬‫النماذج‬FORMS.......................................................ٛٙ
‫عنصر‬‫ـ‬َ‫رس‬َ‫الم‬CANVAS........................................................ٜٓ
‫يف‬‫ز‬‫تخ‬‫البيانات‬‫مف‬‫طرؼ‬‫العميؿ‬...............................................ٜٕ
‫دليؿ‬‫الوسوـ‬‫الجديدة‬‫في‬HTML 5...............................................ٜٖ
‫مقدمة‬........................................................................ٜٚ
‫ما‬‫ىي‬CSS‫؟‬................................................................ٜٚ
‫مشكمة‬‫ي‬‫مطور‬‫الويب‬‫قبؿ‬CSS................................................ٜٚ
‫البدء‬‫في‬‫استخداـ‬CSS........................................................ٜٛ
‫ات‬‫ر‬‫شيف‬CSS...............................................................ٔٓٓ
‫خصائص‬‫مظير‬‫النصوص‬.................................................ٔٓٔ
‫خصائص‬‫الخطوط‬FONTS...................................................ٔٓ٘
‫خصائص‬‫مظير‬‫ابط‬‫و‬‫الر‬....................................................ٔٓٚ
‫خصائص‬‫الخمفيات‬BACKGROUNDS...........................................ٔٓٛ
‫خصائص‬‫مظير‬‫ائـ‬‫و‬‫الق‬.....................................................ٔٔٔ
‫خصائص‬‫مظير‬‫الجداوؿ‬...................................................ٖٔٔ
‫خصائص‬‫ا‬‫عة‬َ‫لموض‬POSITIONING............................................ٔٔٚ

174. ٔٚٗ
‫احدات‬‫و‬‫القياس‬‫في‬CSS.....................................................ٕٕٔ
‫نموذج‬‫الصندوؽ‬CSS BOX MODEL...........................................ٕٕٔ
‫خصائص‬‫الحدود‬BORDER...................................................ٕٖٔ
‫خصائص‬‫احة‬‫ز‬‫اإل‬‫الداخمية‬PADDING..........................................ٕٔ٘
‫خصائص‬‫احة‬‫ز‬‫اإل‬‫الخارجية‬MARGIN..........................................ٕٔٙ
‫إخفاء‬‫العناصر‬.............................................................ٕٔٛ
‫اع‬‫و‬‫أن‬‫عرض‬‫العناصر‬.......................................................ٕٔٛ
‫الشفافية‬OPACITY............................................................ٕٜٔ
‫عويـ‬َّ‫ت‬‫ال‬FLOATING............................................................ٕٜٔ
‫تعميقات‬CSS...............................................................ٖٕٔ
‫اع‬‫و‬‫أن‬‫الوسائط‬MEDIA TYPES..................................................ٖٕٔ
‫دليؿ‬‫محددات‬CSS.........................................................ٖٔ٘
CSS 3.....................................................................ٖٔٛ
‫المستعرضات‬‫الداعمة‬.......................................................ٖٔٛ
‫الحدود‬‫الجديدة‬CSS3 BORDERS..............................................ٖٜٔ
‫الخمفيات‬‫الجديدة‬CSS3 BACKGROUNDS.......................................ٖٔٗ
‫خصائص‬‫تنسيؽ‬‫النصوص‬‫الجديدة‬‫في‬CSS3................................ٔٗ٘
‫خصائص‬‫الخطوط‬‫الجديدة‬‫في‬CSS3........................................ٔٗٚ
‫التحويالت‬‫اليندسية‬‫ذات‬‫البعديف‬2D TRANSFORMATION........................ٔٗٛ
‫التحويالت‬‫اليندسية‬‫ثالثية‬‫األبعاد‬3D TRANSFORMATION.......................ٔ٘ٔ

175. ٔٚ٘
‫ا‬‫ّلنتقاؿ‬‫المتحرؾ‬TRANSITION................................................ٔ٘ٔ
‫حركات‬CSS3..............................................................ٖٔ٘
‫األعمدة‬‫المتعددة‬‫في‬CSS3..................................................ٔ٘٘
‫اجية‬‫و‬‫المستخدـ‬CSS3 USER INTERFACE......................................ٔ٘ٚ
‫محددات‬CSS3.............................................................ٔ٘ٛ
‫الخاتمة‬.....................................................................ٔٙٔ
‫فيرس‬‫األشكاؿ‬.............................................................ٔٙ٘
‫فيرس‬‫الجداوؿ‬..............................................................ٜٔٙ
‫فيرس‬‫المحتويات‬...........................................................ٔٚٔ

176. ٔٚٙ

177. ٔٚٚ
‫الكتاب‬ ‫ف‬ِّ‫ل‬‫مؤ‬ ‫عن‬
)‫ذاتية‬ ‫ة‬‫ر‬‫(سي‬
‫ة‬ّ‫عممي‬‫ة‬ّ‫أدبي‬
‫المعمومات‬
‫َّة‬‫الشخصي‬
‫اد‬‫ؤ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ف‬ ‫ػار‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ت‬‫مخ‬ : ‫يح‬‫ر‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ص‬‫ال‬ ‫ػـ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫س‬‫اّل‬
‫صالح‬ ‫د‬ّ‫سي‬.
‫يا‬‫ر‬‫ػو‬‫ػ‬‫ػ‬‫س‬ : ‫ػيالد‬‫ػ‬‫ػ‬‫م‬‫ال‬ ‫يخ‬‫ر‬‫ػا‬‫ػ‬‫ػ‬‫ت‬ ‫و‬ ‫ػاف‬‫ػ‬‫ػ‬‫ك‬‫م‬
-‫البوكماؿ‬-ٜٜٔٛ‫ـ‬.
‫ػـ‬‫ػ‬‫ػ‬‫س‬‫اّل‬‫ػار‬‫ػ‬‫ػ‬‫ت‬‫مخ‬ : ‫ػة‬‫ػ‬‫ػ‬َّ‫األدبي‬ ‫ػاؿ‬‫ػ‬‫ػ‬‫م‬‫لألع‬ ‫ػتعار‬‫ػ‬‫ػ‬‫س‬‫الم‬
‫الكمالي‬.
‫التحصيل‬
‫العممي‬
‫ػب‬‫ػ‬‫ػ‬‫ي‬‫الو‬ ‫ػات‬‫ػ‬‫ػ‬‫ن‬‫تقا‬ ‫ػي‬‫ػ‬‫ػ‬‫ف‬ ‫ػتير‬‫ػ‬‫ػ‬‫س‬‫ماج‬-‫ة‬ّ‫ي‬‫ر‬‫ػو‬‫ػ‬‫ػ‬‫س‬‫ال‬ ‫ة‬ّ‫ػي‬‫ػ‬‫ػ‬‫ض‬‫ا‬‫ر‬‫اّلفت‬ ‫ػة‬‫ػ‬‫ػ‬‫ع‬‫الجام‬-‫ػى‬‫ػ‬‫ػ‬ّ‫حت‬ ‫ػب‬‫ػ‬‫ػ‬‫ل‬‫طا‬
‫يخو‬‫ر‬‫تا‬.
ً‫ا‬ّ‫ػد‬‫ج‬ ‫ػد‬ّ‫جي‬ ‫ؿ‬ّ‫ػد‬‫ع‬‫بم‬ ‫ػة‬َّ‫المعموماتي‬ ‫و‬ ‫الحاسوب‬ ‫ىندسة‬ ‫في‬ ‫ة‬‫ز‬‫إجا‬-‫ة‬ّ‫ي‬‫ر‬‫ػو‬ّ‫الس‬ ‫ػة‬‫ع‬‫الجام‬
‫ة‬ّ‫الدولي‬-ٕٓٔٔ.
‫ة‬ّ‫عام‬ ‫ة‬ّ‫ثانوي‬-‫ع‬‫الفر‬‫العممي‬-‫بالبوكماؿ‬ ‫منصور‬ ‫فايز‬ ‫ة‬ّ‫ثانوي‬-ٕٓٓٙ.
‫ات‬‫ر‬‫الخب‬
‫َّة‬‫العممي‬
‫ػب‬‫ػ‬‫ػ‬‫ي‬‫و‬ ‫ػات‬‫ػ‬‫ػ‬ّ‫برمجي‬ ‫ػدس‬‫ػ‬‫ػ‬‫ن‬‫مي‬-‫ػيف‬‫ػ‬‫ػ‬‫ب‬
‫ي‬َ‫ػام‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ع‬ٕٕٓٔ‫و‬ٕٖٓٔ-
‫ػا‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ي‬‫لمتكنولوج‬ ‫ػرـ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ج‬‫ع‬ ‫ػركة‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ش‬-
‫دمشؽ‬.
‫ػات‬‫ػ‬‫ػ‬ّ‫برمجي‬ ‫ػدس‬‫ػ‬‫ػ‬‫ن‬‫مي‬-‫ػر‬‫ػ‬‫ػ‬‫ح‬ ‫ػؿ‬‫ػ‬‫ػ‬‫م‬‫ع‬
-‫ي‬َ‫ػام‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ع‬ َ‫ػيف‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ب‬ٕٓٓٗ‫و‬
ٕٓٔٓ.
‫ػاـ‬‫ػ‬‫ػ‬‫ػ‬‫ع‬ ‫ػذ‬‫ػ‬‫ػ‬‫ػ‬‫ن‬‫م‬ ‫ػداعي‬‫ػ‬‫ػ‬‫ػ‬‫ب‬‫اإل‬ ‫ػؿ‬‫ػ‬‫ػ‬‫ػ‬‫م‬‫لمع‬ ‫غ‬ّ‫ػر‬‫ػ‬‫ػ‬‫ػ‬‫ف‬‫مت‬
ٕٖٓٔ.
‫ػؿ‬‫ػ‬‫ػ‬‫ق‬‫انت‬ َّ‫ػـ‬‫ػ‬‫ػ‬‫ث‬ ً‫ا‬‫ػ‬‫ػ‬‫ػ‬َّ‫عامي‬ ً‫ا‬‫ر‬‫ػاع‬‫ػ‬‫ػ‬‫ش‬ ‫ػدأ‬‫ػ‬‫ػ‬‫ب‬‫ػعر‬‫ػ‬‫ػ‬ِّ‫لمش‬
‫بداية‬ ‫في‬ ‫الفصيح‬ٕٓٓٚ.

178. ٔٚٛ
‫من‬
‫اته‬‫ر‬‫إصدا‬
‫ػة‬‫ػ‬‫ػ‬‫ػ‬ّ‫ي‬‫ر‬‫النظ‬ ‫ػف‬‫ػ‬‫ػ‬‫ػ‬‫م‬ ّ‫ػدي‬‫ػ‬‫ػ‬‫ػ‬‫ي‬‫اى‬‫ر‬‫الف‬ ُ‫ع‬‫ػرو‬‫ػ‬‫ػ‬‫ػ‬‫ش‬‫م‬
‫ػي‬‫ج‬‫البرم‬ ‫ػؽ‬‫ي‬‫التطب‬ ‫ى‬ّ‫حت‬-‫ػاب‬‫ت‬‫ك‬
ّ‫ػاني‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬ّ‫مج‬ ّ‫ػي‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ن‬‫إلكترو‬-‫ػؽ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ش‬‫دم‬
ٕٖٓٔ.
HTML5 & CSS3‫ػوة‬‫ط‬‫الخ‬
‫ػتقبؿ‬‫ػ‬‫ػ‬‫ػ‬‫س‬‫الم‬ ‫ػب‬‫ػ‬‫ػ‬‫ػ‬‫ي‬‫و‬ ‫ػو‬‫ػ‬‫ػ‬‫ػ‬‫ح‬‫ن‬ ‫ػى‬‫ػ‬‫ػ‬‫ػ‬‫ل‬‫األو‬–
ّ‫ػاني‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬ّ‫مج‬ ّ‫ػي‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ن‬‫إلكترو‬ ‫ػاب‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ت‬‫ك‬–
‫البوكماؿ‬-ٕٖٓٔ.
‫ػـ‬ّ‫م‬‫تع‬jQuery‫ػي‬‫ف‬ٕٔٓ‫ػة‬‫ق‬‫دقي‬
-‫ػة‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ب‬‫مكت‬‫ػوتر‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ي‬‫لمكمب‬ ‫ػورد‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫م‬‫ال‬-
‫دمشؽ‬-ٕٓٔٓ.
3D Game Studio‫ػؾ‬‫ق‬‫ي‬‫ر‬‫ط‬
‫ػاب‬‫ػ‬‫ػ‬‫ػ‬‫ع‬‫األل‬ ‫ػة‬‫ػ‬‫ػ‬‫ػ‬‫ج‬‫برم‬ ‫ػو‬‫ػ‬‫ػ‬‫ػ‬‫ح‬‫ن‬-‫ػؽ‬‫ػ‬‫ػ‬‫ػ‬‫ح‬‫مم‬
‫ػة‬‫ػ‬‫ػ‬ّ‫م‬‫مج‬ ‫ػع‬‫ػ‬‫ػ‬‫م‬ ‫ػاني‬‫ػ‬‫ػ‬ّ‫مج‬F1‫ػة‬‫ػ‬‫ػ‬َّ‫التقني‬
-‫دمشؽ‬-ٕٓٓٙ.
‫ػف‬‫ػ‬‫ػ‬‫ػ‬‫م‬ ‫ة‬‫ر‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ي‬‫كب‬ ‫ػة‬‫ػ‬‫ػ‬‫ػ‬‫ع‬‫مجمو‬ ‫ػو‬‫ػ‬‫ػ‬‫ػ‬‫ل‬ ْ‫ت‬َ‫ػر‬‫ػ‬‫ػ‬‫ػ‬ِ‫ش‬ُ‫ن‬
‫ػف‬‫ػ‬‫ػ‬‫ػ‬‫م‬ ‫ػدد‬‫ػ‬‫ػ‬‫ػ‬‫ع‬ ‫ػي‬‫ػ‬‫ػ‬‫ػ‬‫ف‬ ‫ػة‬‫ػ‬‫ػ‬‫ػ‬ّ‫التقني‬ ‫ػاّلت‬‫ػ‬‫ػ‬‫ػ‬‫ق‬‫الم‬
‫و‬ ‫ػة‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ع‬‫المطبو‬ ‫ت‬ ّ‫ػال‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ج‬‫الم‬
‫المتخصصة‬ ‫ة‬ّ‫اإللكتروني‬.
ِّ‫ػب‬‫ػ‬‫ػ‬ُ‫الح‬ ِ‫ػة‬‫ػ‬‫ػ‬َ‫اب‬َ‫ي‬َ‫غ‬ ‫ػي‬‫ػ‬‫ػ‬‫ف‬-‫ػعر‬‫ػ‬‫ػ‬ِ‫ش‬-‫ػر‬‫ػ‬‫ػ‬‫ئ‬‫دا‬‫ة‬
‫قة‬‫ر‬‫ػا‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬ّ‫ش‬‫بال‬ ‫ػالـ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ع‬‫اإل‬ ‫و‬ ‫ػة‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ف‬‫الثقا‬-
ٕٕٓٔ.
‫ات‬‫ر‬‫مها‬
‫العمل‬
‫ة‬ّ‫البرمجي‬
 Desktop: C#, VB.NET, VB6, Java.
 Web:
o Server-Side: ASP.NET classic and ASP.NET MVC,
PHP Classic & PHP MVC using CodeIginiter
framework., JSP.

179. ٜٔٚ
o Client-Side: HTML 5, CSS 3, java script & jQuery.
o Technologies: XML, JSON.
 Smart phones: Android programming.
-Access.
-Word, MS-PowerPoint, Photoshop, Maintenance
skills
‫و‬ ‫ائز‬‫و‬‫الج‬
‫المشاركات‬
‫ػميـ‬‫ػ‬‫ص‬‫ت‬ ‫و‬ ‫ػة‬‫ج‬‫برم‬ ‫ػؿ‬‫ض‬‫أف‬ ‫ػابقة‬‫س‬‫م‬
‫ػة‬ّ‫بتقني‬ ‫ػب‬‫ي‬‫و‬ ‫موقع‬ASP.NET
‫ػع‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ق‬‫مو‬ ‫ػؿ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ب‬‫ق‬ ‫ػف‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫م‬ ‫ػة‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫م‬ّ‫ظ‬‫المن‬
‫المبرمجيف‬vb4arab.com -
‫ػع‬‫ػ‬‫ق‬‫مو‬ ‫ع‬‫ػرو‬‫ش‬‫م‬ ‫ػف‬‫ػ‬‫ع‬ ‫ؿ‬ّ‫األو‬ ‫ػز‬‫ك‬‫المر‬
‫أبوكماؿ‬ ‫مدينة‬–‫عاـ‬ٕٜٓٓ.
‫ػة‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ي‬‫ز‬‫المرك‬ ‫ػة‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ي‬‫المعمومات‬ ‫ػابقة‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫س‬‫م‬
‫ة‬‫ر‬‫عش‬ ‫الثالثة‬-‫ػث‬‫ع‬‫الب‬ ‫ػة‬‫ع‬‫جام‬-
‫حمص‬ٕٜٓٓ.
‫ػاني‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ث‬‫ال‬ ‫ػي‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫م‬‫العم‬ ‫ػؤتمر‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫م‬‫ال‬–
‫ػوـ‬‫ػ‬‫ػ‬‫م‬‫لمع‬ ‫ػة‬‫ػ‬‫ػ‬‫ي‬‫الدول‬ ‫ية‬‫ر‬‫ػو‬‫ػ‬‫ػ‬‫س‬‫ال‬ ‫ػة‬‫ػ‬‫ػ‬‫ع‬‫الجام‬
‫التكنولوجيا‬ ‫و‬–‫دمشؽ‬ٕٓٓٛ.
‫ي‬‫ػور‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫س‬‫ال‬ ‫ػة‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬ّ‫المعموماتي‬ ‫ػاد‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ي‬‫أولمب‬
‫ػع‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ب‬‫ا‬‫ر‬‫ال‬-‫ػة‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ي‬‫العمم‬ ‫ػة‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ي‬‫الجمع‬
‫ػة‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ي‬‫لممعمومات‬ ‫ية‬‫ر‬‫ػو‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫س‬‫ال‬-‫ػؽ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ش‬‫دم‬
ٕٓٓٚ.
‫ػة‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ي‬‫ز‬‫المرك‬ ‫ػة‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ي‬‫المعمومات‬ ‫ػابقة‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫س‬‫م‬
‫ة‬‫ر‬‫ػ‬‫ػ‬‫ػ‬‫ش‬‫ع‬ ‫ػة‬‫ػ‬‫ػ‬‫ي‬‫الحاد‬-‫ػث‬‫ػ‬‫ػ‬‫ع‬‫الب‬ ‫ػة‬‫ػ‬‫ػ‬‫ع‬‫جام‬
–‫حمص‬ٕٓٓٚ.
‫اء‬‫ر‬‫ػع‬‫ػ‬ّ‫ش‬‫ال‬ ‫ػر‬‫ػ‬‫ي‬‫أم‬ ‫ػاف‬‫ػ‬‫ج‬‫مير‬ ‫ػفيات‬‫ػ‬‫ص‬‫ت‬-
‫ػامس‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫خ‬‫ال‬ ‫ػـ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫س‬‫المو‬-‫ات‬‫ر‬‫ػا‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫م‬‫اإل‬
‫ة‬ّ‫المتحد‬ ‫ة‬ّ‫بي‬‫ر‬‫الع‬-ٕٖٓٔ.

ّ‫ػي‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ب‬‫ر‬‫الع‬ ‫ػداع‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ب‬‫لإل‬ ‫قة‬‫ر‬‫ػا‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬ّ‫ش‬‫ال‬ ‫ة‬‫ز‬‫ػائ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ج‬-
‫ة‬ّ‫ػد‬‫ح‬‫المت‬ ‫ة‬ّ‫بي‬‫ر‬‫الع‬ ‫ات‬‫ر‬‫اإلما‬-‫ػز‬‫ك‬‫المر‬
‫ؿ‬ّ‫األو‬-ٕٓٔٔ.
‫اء‬‫ر‬‫ػع‬‫ػ‬ّ‫ش‬‫ال‬ ‫ػر‬‫ػ‬‫ي‬‫أم‬ ‫ػاف‬‫ػ‬‫ج‬‫مير‬ ‫ػفيات‬‫ػ‬‫ص‬‫ت‬-
‫ػع‬‫ػ‬‫ػ‬‫ب‬‫ا‬‫ر‬‫ال‬ ‫ػـ‬‫ػ‬‫ػ‬‫س‬‫المو‬-‫ػة‬‫ػ‬‫ػ‬ّ‫بي‬‫ر‬‫الع‬ ‫ات‬‫ر‬‫ػا‬‫ػ‬‫ػ‬‫م‬‫اإل‬
‫ة‬ّ‫المتحد‬-ٕٓٔٔ.
‫ة‬‫ز‬‫ػائ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ج‬‫ػة‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ب‬‫لمطم‬ ّ‫ي‬‫ػعر‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬ِّ‫الش‬ ‫ػداع‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ب‬‫اإل‬-
‫ػة‬‫ػ‬‫ي‬‫الدول‬ ‫ية‬‫ر‬‫ػو‬‫ػ‬‫س‬‫ال‬ ‫ػة‬‫ػ‬‫ع‬‫الجام‬-‫ػز‬‫ػ‬‫ك‬‫المر‬
‫ؿ‬ّ‫األو‬-ٕٓٔٓ.
‫ػيات‬‫س‬‫األم‬ ‫ػف‬‫م‬ ‫ػر‬‫ي‬‫كب‬ ‫عدد‬ ‫في‬ ‫شارؾ‬
‫ػؿ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫خ‬‫دا‬ ‫َّة‬‫ي‬‫ر‬‫ػع‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬ِّ‫الش‬ ‫ػات‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ن‬‫الميرجا‬ ‫و‬
‫يا‬‫ر‬‫سو‬.

180. ٔٛٓ
‫ػة‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ي‬‫ز‬‫المرك‬ ‫ػة‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ي‬‫المعمومات‬ ‫ػابقة‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫س‬‫م‬
‫ػة‬‫ػ‬‫ػ‬‫ن‬‫الثام‬–‫يف‬‫ر‬‫ػ‬‫ػ‬‫ػ‬‫ش‬‫ت‬ ‫ػة‬‫ػ‬‫ػ‬‫ع‬‫جام‬-
‫ة‬ّ‫الالذقي‬ٕٓٓ٘.
‫و‬ ‫ػداع‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ب‬‫لإل‬ ‫ػامس‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫خ‬‫ال‬ ‫ػى‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ق‬‫الممت‬
‫اع‬‫ر‬‫ػ‬‫ػ‬‫ػ‬‫ت‬‫اّلخ‬)‫ػات‬‫ػ‬‫ػ‬ّ‫البرمجي‬ ‫ػة‬‫ػ‬‫ػ‬‫ش‬‫(ور‬–
‫حماة‬ٕٓٓ٘.
‫ػث‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ل‬‫الثا‬ ‫ػي‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ب‬‫ر‬‫الع‬ ‫ػى‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ق‬‫الممت‬
‫ػة‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ش‬‫(ور‬ ‫ػباب‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ش‬‫ال‬ ‫ػرمجيف‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ب‬‫لمم‬
)‫ػات‬‫ػ‬‫ػ‬‫ػ‬‫ي‬‫البرمج‬–‫ػب‬‫ػ‬‫ػ‬‫ػ‬‫م‬‫ح‬ٕٓٓٗ–
‫ػاـ‬‫ظ‬‫ن‬ ‫ع‬‫ػرو‬‫ش‬‫م‬ ‫عف‬ ‫الثالث‬ ‫المركز‬
‫الصوتي‬ ‫اّلت‬‫و‬‫الح‬ ‫مكاتب‬ٕ.
‫ي‬‫ػور‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫س‬‫ال‬ ‫ػة‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬ّ‫المعموماتي‬ ‫ػاد‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ي‬‫أولمب‬
‫ؿ‬ّ‫األو‬–‫ػة‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ي‬‫العمم‬ ‫ػة‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ي‬‫الجمع‬
‫ػة‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ي‬‫لممعمومات‬ ‫ية‬‫ر‬‫ػو‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫س‬‫ال‬-‫ػؽ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ش‬‫دم‬
ٕٓٓٗ–‫الفض‬ ‫الميدالية‬‫ة‬ّ‫ي‬.
‫العناوين‬‫يا‬‫ر‬‫سو‬ : ‫الحالي‬ ‫اف‬‫و‬‫العن‬-‫دمشؽ‬
‫إلكتروني‬ ‫يد‬‫ر‬‫ب‬:mokhtar_ss@hotmail.com