كتاب تعلم Html5 css3

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

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

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

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

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

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

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

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

ٔ٘
‫مقدمة‬
‫لغة‬ ‫الفصؿ‬ ‫ىذا‬ ‫يناقش‬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,‫و‬‫بالطبع‬‫ّل‬‫يوجد‬‫أي‬‫فرؽ‬‫بينيما‬.
ٔ
‫قبمي‬ ‫أحد‬ ‫قاـ‬ ‫إف‬ ‫أعرؼ‬ ‫ّل‬.‫األنسب‬ ‫الترجمة‬ ‫أنيا‬ ‫أشعر‬ ‫ني‬ّ‫لكن‬ ‫يقة‬‫ر‬‫الط‬ ‫بيذه‬ ‫بترجمتيا‬

ٔٙ
‫تتكوف‬‫مستندات‬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

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

ٔٛ
‫اآلف‬‫و‬‫باّلسـ‬ ‫الممؼ‬ ‫بحفظ‬ ‫قمنا‬ ‫أف‬ ‫بعد‬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>.

ٜٔ
‫عناصر‬ ‫مف‬ ‫عنصر‬ ‫لكؿ‬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>

ٕٓ
<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>

ٕٔ
‫يما‬َّ‫أن‬ ‫مع‬‫متماثمتاف‬.‫الويب‬ ‫مستعرض‬ ‫باستخداـ‬ ‫اضيما‬‫ر‬‫استع‬ ‫عند‬ ً‫ا‬‫تمام‬
‫ضغطة‬ ‫بمقدار‬ ‫متماثميف‬ ‫نياية‬ ‫و‬ ‫بداية‬ ‫وسمي‬ ‫بيف‬ ‫الموجود‬ ‫المحتوى‬ ‫كؿ‬ ‫احة‬‫ز‬‫إ‬ ‫الجيدة‬ ‫َّة‬‫البرمجي‬ ‫العادات‬ ‫مف‬ : ‫فائدة‬
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

ٕٕ
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‫اض‬‫ر‬‫استع‬ ‫عند‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫يظير‬ ‫ّل‬ ‫أغمبيا‬
‫ا‬ ‫لكف‬ ‫و‬ ‫الصفحة‬‫ليذه‬ ‫ئيسية‬‫ر‬‫ال‬ ‫لميمة‬‫ىي‬ ‫المنطقة‬‫المحتوى‬ ‫َّة‬‫ماىي‬ ‫عف‬ ‫معمومات‬ ‫إعطاء‬
‫تستخدميا‬ ‫التي‬ ‫و‬ ‫ى‬‫األخر‬ ‫ة‬‫ر‬‫الظاى‬ ‫غير‬ ‫المعمومات‬ ‫لبعض‬ ‫إضافة‬ ‫بالصفحة‬ ‫الموجود‬
.‫الغالب‬ ‫في‬ ‫البحث‬ ‫و‬ ‫األرشفة‬ ‫أجؿ‬ ‫مف‬ ‫البحث‬ ‫محركات‬
‫األـ‬ ‫المنطقة‬ٕ
:
ٕ
‫المطروحة‬ ‫ة‬‫ر‬‫الفك‬ ‫لتبسيط‬ ‫شخصي‬ ‫اجتياد‬ ‫ىو‬ ‫َّما‬‫إن‬ ‫و‬ ‫أتيا‬‫ر‬‫ق‬ ‫التي‬ ‫اجع‬‫ر‬‫الم‬ ‫مف‬ ‫أي‬ ‫في‬ ‫المصطمح‬ ‫ىذا‬ ‫يرد‬ ‫لـ‬)‫أيي‬‫ر‬‫(ب‬.

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

ٕٗ
<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.

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

ٕٙ
‫العناوين‬ ‫عناصر‬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>
:‫التالية‬ ‫النتيجة‬ ‫سنشاىد‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫السابقة‬ ‫الصفحة‬ ‫اض‬‫ر‬‫استع‬ ‫عند‬

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

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

ٕٜ
‫التعميقات‬Comments
‫في‬ ‫المبرمجوف‬ ‫اعتاد‬‫ج‬َ‫ل‬‫عا‬ُ‫ت‬ ‫ّل‬ ‫َّة‬‫توضيحي‬ ‫أسطر‬ ‫كتابة‬ ‫عمى‬ ‫َّة‬‫التقميدي‬ ‫البرمجة‬ ‫لغات‬‫تعتبر‬ ‫ّل‬ ‫أنيا‬ ‫إذ‬
‫ة‬‫ر‬‫الشيف‬ ‫مف‬ ً‫ا‬‫ء‬‫جز‬,‫ة‬‫ر‬‫فت‬ ‫بعد‬ ‫لتعديميا‬ ‫يعود‬ ‫عندما‬ ‫ة‬‫ر‬‫الشيف‬ ‫اء‬‫ز‬‫بأج‬ ‫المبرمج‬ ‫لتذكير‬ ‫فقط‬ ‫تستخدـ‬ ‫ما‬َّ‫إن‬ ‫و‬
‫بالتعميقات‬ ‫تعرؼ‬ ‫األسطر‬ ‫ىذه‬ ‫و‬ ,‫الزمف‬ ‫مف‬Commentsَّ‫أف‬ ‫مع‬ ‫و‬ ,HTML‫كما‬ ‫وصفية‬ ‫لغة‬
‫قمت‬‫لكتابة‬ ‫التالية‬ ‫العامة‬ ‫الصيغة‬ ‫ـ‬ِّ‫فتقد‬ ,‫المستندات‬ ‫ضمف‬ ‫التعميقات‬ ‫لكتابة‬ ‫آلية‬ ‫توفر‬ ‫أنيا‬ ّ‫إّل‬ ً‫ا‬‫سابق‬
:‫التعميؽ‬

‫مستند‬ ‫ضمف‬ ‫التعميقات‬ ‫استخداـ‬ ‫عمى‬ ‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬HTML:
<html>
<head>
<title> ‫إٌ١ٙب‬ ً‫ب‬‫ِؼبف‬ ٟ‫األفم‬ ‫اٌخؾ‬ ‫ٌؼٕظش‬ ‫اخزجبس‬ ‫طفحخ‬
‫ِجّٛػخ‬‫خ‬َّ١‫اٌجشِج‬ ‫اٌزؼٍ١مبد‬ ِٓ </title>
</head>
<body dir='rtl'>

<p>‫فمؾ‬ ‫ٌٍزجشثخ‬ ٌٝٚ‫األ‬ ‫اٌفمشح‬ ٜٛ‫ِحز‬</p> <hr />

<p>‫فمؾ‬ ‫ٌٍزجشثخ‬ ‫اٌثبٔ١خ‬ ‫اٌفمشح‬ ٜٛ‫ِحز‬</p> <hr />

<p>‫فمؾ‬ ‫ٌٍزجشثخ‬ ‫اٌثبٌثخ‬ ‫اٌفمشح‬ ٜٛ‫ِحز‬</p>
</body>
</html>

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

ٖٔ
‫العنصر‬<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/>
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>

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

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

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

ٖ٘
<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

ٖٙ
‫مسار‬ ‫عف‬ ‫ة‬‫ر‬‫عبا‬ ‫يكوف‬ ‫المذكور‬ ‫ابط‬‫ر‬‫ال‬ ‫أف‬ ‫بالنسبية‬ ‫يقصد‬ ‫و‬ )‫األخير‬ ‫ابط‬‫ر‬‫(كال‬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

ٖٚ
</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>

ٖٛ
<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‫التي‬ ‫و‬

ٖٜ
َّ‫قمي‬‫ر‬ ‫قيـ‬ ‫إلييما‬ ‫تسند‬‫تعنيو‬ ‫ما‬ ‫بالبكسؿ(ىذا‬ ‫المعروضة‬ ‫ة‬‫ر‬‫الصو‬ ‫تفاع‬‫ر‬‫ا‬ ‫و‬ ‫عرض‬ ‫تحدد‬ ‫ة‬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>

ٗٓ
:‫كمايمي‬ ‫المستعرض‬ ‫في‬ ‫يبدو‬ ‫ما‬ ‫ىذا‬ ‫و‬
‫الشكل‬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">

ٗٔ
<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">

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

ٖٗ
‫ابط‬‫ر‬‫ال‬ ‫وسـ‬ ‫استخداـ‬ ‫عبر‬ ‫تحقيقيا‬ ‫يتـ‬ ‫التي‬ ‫و‬<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>

ٗٗ
‫ائم‬‫و‬‫الق‬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>
:‫كمايمي‬ ‫المستعرض‬ ‫في‬ ‫عرضو‬ ‫عند‬ ‫يبدو‬ ‫الذي‬ ‫و‬

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

ٗٙ
‫الفصؿ‬ ‫ىذا‬ ‫بداية‬ ‫منذ‬ ‫ذكرت‬ ‫كما‬ ‫و‬ ‫بالطبع‬‫فإف‬‫عناصر‬ ‫مف‬ ‫عنصر‬ ‫أي‬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>

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

ٗٛ
‫القيـ‬ ‫إحدى‬ٔ‫أو‬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>
:‫كمايمي‬ ‫المستعرض‬ ‫في‬ ‫المصطمحات‬ ‫قائمة‬ ‫تبدو‬

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

٘ٓ
<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>

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

ٕ٘
‫جداوؿ‬ ‫مف‬ ‫جدوؿ‬ ‫كؿ‬ ‫يقسـ‬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

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

٘ٗ
<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>
:‫كمايمي‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫ة‬‫ر‬‫الشيف‬ ‫ىذه‬ ‫تبدو‬

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

٘ٙ
<html>
<head>
<title>‫ثس١ؾ‬ ‫غ١ش‬ ‫جذٚي‬ ‫إٔشبء‬ ٍٝ‫ػ‬ ‫ِثبي‬</title>
</head>
<body dir="rtl">
<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

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

٘ٛ
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‫في‬ ‫البيانات‬ ‫إرساؿ‬ ‫يتـ‬ ‫حيث‬‫في‬ ‫اف‬‫و‬‫العن‬ ‫يط‬‫ر‬‫ش‬
‫عمى‬ ‫التالي‬ ‫ابط‬‫ر‬‫لم‬ ‫انظر‬ ,‫مفتاح/قيمة‬ ‫اج‬‫و‬‫أز‬ ‫بشكؿ‬ ‫البرمجي‬ ‫الممؼ‬ ‫اسـ‬ ‫بعد‬ ‫المستعرض‬
:‫المثاؿ‬ ‫سبيؿ‬

ٜ٘
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‫لعناصر‬ ‫اضية‬‫ر‬‫اّلفت‬ ‫القيـ‬ ‫ضبط‬ ‫إلعادة‬ ‫زر‬

ٙٓ
‫النموذج‬ ‫في‬ ً‫ة‬‫كامم‬ ‫اإلدخاؿ‬
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>

ٙٔ
‫الويب‬ ‫مستعرض‬ ‫في‬ ‫عرضيا‬ ‫عند‬ ‫تبدو‬ ‫التي‬ ‫و‬‫بعد‬ ‫و‬‫إدخاؿ‬‫البيانات‬ ‫بعض‬:‫كمايمي‬
‫الشكل‬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/>

ٕٙ
:‫اٌشخظ١خ‬ ‫اٌظٛسح‬ <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‫استخداـ‬ ‫يتـ‬ ‫و‬ )

ٖٙ
‫ا‬ ‫ىذه‬‫مع‬ ‫السابقة‬ ‫يقة‬‫ر‬‫الط‬ ‫بنفس‬ ‫لعناصر‬‫ممحوظة‬‫لنفس‬ ‫إجابة‬ ‫تمثؿ‬ ‫التي‬ ‫العناصر‬ ‫جميع‬ ‫إعطاء‬
‫القيمة‬ ‫اؿ‬‫ؤ‬‫الس‬‫ذاتيا‬‫اصفة‬‫و‬‫لم‬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" />

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

ٙ٘
<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

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

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

ٙٛ
<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"/>

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

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

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

ٕٚ
‫الوسـ‬ ‫يستخدـ‬ ‫و‬ ,‫الصفحة‬ ‫محتوى‬ ‫بقية‬ ‫مع‬ ‫متناسؽ‬ ‫بشكؿ‬ ‫ى‬‫أخر‬ ‫صفحة‬<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"/>

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

ٚٗ
‫وسوم‬ ‫دليل‬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>‫عمييا‬ ‫مشتركة‬ ‫اصفات‬‫و‬ ‫لتطبيؽ‬ ‫الجدوؿ‬ ‫أعمدة‬ ‫مف‬ ‫مجموعة‬ ‫يؼ‬‫ر‬‫تع‬

ٚ٘
<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>‫ما‬ ‫لعنصر‬ ‫اف‬‫و‬‫عن‬

ٚٙ
<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>)‫بالتفصيؿ‬ ‫القادـ‬ ‫الفصؿ‬ ‫في‬ ‫(يناقش‬ ‫أنماط‬ ‫قة‬‫ر‬‫و‬ ‫يؼ‬‫ر‬‫تع‬

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

ٚٛ
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‫م‬ ‫لمحد‬.‫أعاله‬ ‫كالصفحة‬ ‫صفحات‬ ‫انتشار‬ ‫ف‬

ٜٚ
‫اعد‬‫و‬‫ق‬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:‫كمايمي‬
٘
.‫ممحوظات‬ ‫شكؿ‬ ‫عمى‬ ‫السابقة‬ ‫الصفحات‬ ‫في‬ ‫معنا‬ ‫مر‬ ‫قد‬ ‫كاف‬ ‫اعد‬‫و‬‫الق‬ ‫مف‬ ‫ه‬‫ر‬‫ذك‬ ‫سيتـ‬ ‫ما‬ ‫أغمب‬ َّ‫إف‬

ٛٓ
<!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>‫ع‬‫النو‬ ‫ىذا‬ ‫مف‬ ‫المستند‬ ‫يؼ‬‫ر‬‫تع‬ ‫سطر‬ ‫و‬ ,:‫ىو‬

ٛٔ
<!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‫اتؾ‬‫ر‬‫بقد‬ ‫الثقة‬ ‫مف‬ ً‫ا‬‫نوع‬ ‫صفحتؾ‬ ‫في‬
.‫باعتقادي‬ ‫البرمجية‬

ٕٛ
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‫ى‬‫األخر‬ ‫الويب‬ ‫مستعرضات‬ ‫ات‬‫ر‬‫عش‬ ‫فيناؾ‬ ‫الصفحات‬ ‫لتطوير‬ ‫الرسمية‬ ‫المغة‬
.‫اإلجمالييف‬ ‫نت‬‫ر‬‫اّلنت‬ ‫مستخدمي‬ ‫مف‬ ‫تفعة‬‫ر‬‫م‬ ‫نسبة‬ ‫تستخدميا‬ ‫التي‬ ‫و‬

ٖٛ
‫الفيديو‬ ‫عنصر‬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‫المستعرضات‬ ‫في‬ ‫ا‬َّ‫أم‬ ,‫ليا‬ ‫الداعمة‬:‫كمايمي‬ ‫صفحتنا‬ ‫فستبدو‬

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

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

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

ٛٚ
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:

ٛٛ
<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,:‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬

ٜٛ
<!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>

ٜٓ
‫م‬َ‫رس‬َ‫الم‬ ‫عنصر‬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:‫السطر‬ ‫في‬ ‫ذلؾ‬ ‫و‬ ‫بو‬ ‫الخاص‬
َّ‫ثـ‬‫كائف‬ ‫بإنشاء‬ ‫قمنا‬Object‫األبعاد‬ ‫ثنائي‬ ‫لمرسـ‬ ‫ىيأناه‬ ‫و‬ ‫المرسـ‬ ‫مف‬2D:‫التالي‬ ‫السطر‬ ‫في‬
‫طرؽ‬ ‫استدعاء‬ ‫سيتـ‬ ‫بالرسـ‬ ‫لمقياـ‬ ‫و‬ ‫اآلف‬Methods‫الكائف‬cxt‫إنشاؤه‬ ‫تـ‬ ‫الذي‬‫بالشكؿ‬ ‫قميؿ‬ ‫قبؿ‬:
ٚ
‫عف‬ ‫يد‬‫ز‬‫الم‬ ‫اءة‬‫ر‬‫ق‬ ‫يمكنؾ‬Java Script.‫األمثمة‬ ‫في‬ ‫استخداميا‬ ‫ح‬‫شر‬ ‫سأحاوؿ‬ ‫لكنني‬ ‫و‬ ‫الكتاب‬ ‫ىذا‬ ‫نطاؽ‬ ‫ج‬‫خار‬ ‫فيي‬ ‫آخر‬ ‫مرجع‬ ‫في‬

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

ٜٕ
‫الطريقة‬‫الوظيفة‬‫مثال‬
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:‫ة‬‫ر‬‫لفت‬ ‫العميؿ‬ ‫طرؼ‬ ‫مف‬ ‫البيانات‬ ‫يف‬‫ز‬‫لتخ‬ ‫الكائف‬ ‫ىذا‬ ‫يستخدـ‬
:‫يف‬‫ز‬‫لمتخ‬ ‫التالية‬ ‫العامة‬ ‫الصيغة‬ ‫يستخدـ‬ ‫و‬ ,‫فقط‬ ‫احدة‬‫و‬ ‫بجمسة‬ ‫محددة‬

ٜٖ
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>‫مميز‬ ‫نص‬

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

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

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

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

ٜٜ
‫ة‬‫ر‬‫شيف‬ ‫كتابة‬ ‫يتـ‬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>

ٔٓٓ
<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;

ٔٓٔ
‫أف‬ ‫حيث‬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.‫األنسب‬ ‫الترجمة‬ ‫ىي‬ ‫ييف‬‫ز‬‫الت‬ ‫أف‬ ‫ى‬‫أر‬ ‫أنني‬ ً‫ا‬‫عمم‬ ,‫قوسيف‬ ‫بيف‬ ‫التأثيث‬ ‫أوردت‬ ‫ليذا‬ ‫و‬ "‫"أثاث‬ ‫أنيا‬ ‫عمى‬

ٕٔٓ
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‫في‬
.‫الصغير‬ ‫الحرؼ‬ ‫حالة‬

ٖٔٓ
#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>
p {
text-align:justify;
color:#ff0000;
text-decoration:underline;
direction:rtl;
}

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

ٔٓ٘
‫الخطوط‬ ‫خصائص‬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>
ٖٔ
.‫احد‬‫و‬ ‫خط‬ ‫مف‬ ‫مكونة‬ ‫الخطوط‬ ‫عائمة‬ ‫فييا‬ ‫تكوف‬ ‫التي‬ ‫لمحالة‬ ‫اليتيـ‬ ‫الخط‬ ‫مصطمح‬ ‫اجترحت‬

ٔٓٙ
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‫الخطوط‬ ‫خصائص‬ ‫استخدام‬ :

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

ٔٓٛ
</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‫قيمة‬ ‫بإسناد‬ ‫العناصر‬ ‫ألحد‬ ‫َّة‬‫لوني‬ ‫خمفية‬ ‫لتحديد‬ ‫تستخدـ‬ ‫التي‬ ‫و‬
:‫بالشكؿ‬ ‫إلييا‬ ‫الموف‬

ٜٔٓ
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>
.firstP {
background-color:black;
color:white;
}
.secondP {

ٔٔٓ
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.‫الفئة‬ ‫قاعدة‬ ‫في‬ ‫ة‬‫ر‬‫المذكو‬ ‫لمخصائص‬ ً‫ا‬‫مطابق‬ ‫ىا‬‫مظير‬ ‫بجعؿ‬ ‫غب‬‫نر‬ ‫التي‬ ‫لمعناصر‬
‫يبدو‬‫السابؽ‬ ‫المثاؿ‬:‫كمايمي‬ ‫الويب‬ ‫مستعرض‬ ‫في‬

ٔٔٔ
‫الشكل‬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');

ٕٔٔ
<html>
<head>
<title>
‫ٌخظبئض‬ ‫اخزجبس‬ ‫طفحخ‬ُ‫اٌمٛائ‬ ‫ِظٙش‬
</title>
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>

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

ٔٔٗ
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>

ٔٔ٘
<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>
:‫كمايمي‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫المثاؿ‬ ‫ىذا‬ ‫يبدو‬

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

ٔٔٚ
َ‫الموض‬ ‫خصائص‬‫ع‬‫ة‬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>

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

ٜٔٔ
‫الخاصية‬ ‫يؽ‬‫ر‬‫ط‬ ‫عف‬ ‫ى‬‫أخر‬ ‫عناصر‬ ‫خمؼ‬ ‫عناصر‬ ‫وضع‬ ‫يمكف‬z-index‫قـ‬‫ر‬ ‫بإسناد‬ ‫ذلؾ‬ ‫و‬
‫ػ‬‫ل‬‫ا‬ ‫ذو‬ ‫العنصر‬ ‫إظيار‬ ‫يتـ‬ ‫حيث‬ ,‫إلييا‬ ‫صحيح‬z-index‫لنشاىد‬ ,‫ى‬‫األخر‬ ‫العناصر‬ ‫أماـ‬ ‫األعمى‬
:‫التالي‬ ‫المثاؿ‬
<html>
<head>
* {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>

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

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

ٕٕٔ
‫في‬ ‫القياس‬ ‫احدات‬‫و‬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‫بي‬ ‫الفاصمة‬ ‫المسافة‬ ‫تمثؿ‬ ‫و‬ :‫ف‬‫العناصر‬ ‫و‬ ‫العنصر‬ ‫حدود‬
‫المستند‬ ‫في‬ ‫ى‬‫األخر‬.

ٕٖٔ
‫التالي‬ ‫الشكؿ‬ ‫ح‬ِّ‫يوض‬:‫الصندوؽ‬ ‫نموذج‬
‫الشكل‬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>

ٕٔٗ
* { direction:rtl; }
.one
{ border-style:solid; }
.two
{ border-style:dashed; }
</style>
</head>
<body>
<p class="one"> ‫حذٚد‬٠‫ػبد‬‫خ‬ </p>
<p class="two"> ‫حذٚد‬‫ِزمـؼ‬‫خ‬ </p>
</body>
</html>

ٕٔ٘
‫شكؿ‬ ‫تحديد‬ ‫يمكف‬ :‫ممحوظة‬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>
p
{ direction:rtl; background-color:black; color:white; }
.padding
{
padding-top:25px;
padding-bottom:25px;
padding-right:50px;

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

ٕٔٚ
margin-top‫و‬ ‫العموي‬ ‫الطرؼ‬ ‫احة‬‫ز‬‫إل‬margin-bottom‫يؽ‬‫ر‬‫ط‬ ‫عف‬ ‫أو‬ ,‫السفمي‬ ‫الطرؼ‬ ‫احة‬‫ز‬‫إل‬
‫الخاصية‬margin‫بإ‬ ‫قيـ‬ ‫الخصائص‬ ‫ىذه‬ ‫إلى‬ ‫د‬َ‫سن‬ُ‫ي‬ ‫و‬ ,‫اؼ‬‫ر‬‫األط‬ ‫جميع‬ ‫احة‬‫ز‬‫إل‬‫القياس‬ ‫احدات‬‫و‬ ‫حدى‬
‫الداخمية‬ ‫احة‬‫ز‬‫اإل‬ ‫مقدار‬ ‫عف‬ ‫تعبر‬‫الخاصة‬ ‫القيمة‬ ‫أو‬auto‫الويب‬ ‫لمستعرض‬ ‫الميمة‬ ‫ىذه‬ ‫لترؾ‬,
<html>
<head>
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>

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

ٕٜٔ
‫كتمة‬ ‫بشكؿ‬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>
p { direction:rtl; text-align:justify; }

ٖٔٓ
img { float:right; }
</style>
</head>
<body>
<p>
<img src="picture1.gif" />
ٜٛ‫ِحز‬ ‫ِب‬ ٟ‫ٔظ‬ ٜٛ‫ِحز‬ ‫ِب‬ ٟ‫ٔظ‬ ٜٛ‫ِحز‬ ‫ِب‬ ٟ‫ٔظ‬ ٜٛ‫ِحز‬ ‫ِب‬ ٟ‫ٔظ‬ ٜٛ‫ِحز‬
ٜٛ‫ِحز‬ ‫ِب‬ ٟ‫ٔظ‬ ٜٛ‫ِحز‬ ‫ِب‬ ٟ‫ٔظ‬ ٜٛ‫ِحز‬ ‫ِب‬ ٟ‫ٔظ‬‫ِب‬ ٟ‫ٔظ‬ ٜٛ‫ِحز‬ ‫ِب‬ ٟ‫ٔظ‬
ٜٛ‫ِحز‬ ‫ِب‬ ٟ‫ٔظ‬ ٜٛ‫ِحز‬ ‫ِب‬ ٟ‫ٔظ‬ ٜٛ‫ِحز‬ ‫ِب‬ ٟ‫ٔظ‬ ٜٛ‫ِحز‬ ‫ِب‬ ٟ‫ٔظ‬ ٜٛ‫ِحز‬
‫ِب‬ ٟ‫ٔظ‬ ٜٛ‫ِحز‬ ‫ِب‬ ٟ‫ٔظ‬ ٜٛ‫ِحز‬ ‫ِب‬ ٟ‫ٔظ‬ ٜٛ‫ِحز‬ ‫ِب‬ ٟ‫ٔظ‬ ٜٛ‫ِحز‬ ‫ِب‬ ٟ‫ٔظ‬
ٛ‫ِحز‬.‫ِب‬ ٟ‫ٔظ‬ ٜ
</p>
</body>
</html>

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

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

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

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

ٖٔ٘
‫بعد‬ ‫نضع‬ ‫أف‬ ‫يمكف‬@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"

ٖٔٙ
**‫العناصر‬ ‫كؿ‬
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>

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

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

ٖٜٔ
‫الجديدة‬ ‫الحدود‬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>
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>

ٔٗٓ
<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

ٔٗٔ
‫الخاصية‬ ‫إلى‬ ‫ة‬‫ر‬‫الصو‬ ‫مسار‬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;
:‫اإلطار‬ ‫لصنع‬ ً‫ا‬‫سابق‬ ‫ت‬َ‫ض‬ِ‫ر‬ُ‫ع‬ ‫التي‬ ‫ة‬‫ر‬‫الصو‬ ‫عمى‬ ‫يعتمد‬ ‫الذي‬ ‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬
<html>
<head>
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>

ٕٔٗ
</body>
</html>
‫الشكل‬51‫كروم‬ ‫جوجل‬ ‫مستعرض‬ ‫في‬ ‫ي‬‫الصور‬ ‫اإلطار‬ :
‫مستعرض‬ :‫ممحوظة‬Firefox‫البدائة‬ ‫يستخدـ‬-moz-‫مستعرضا‬ ‫و‬ ,‫أعاله‬ ‫ة‬‫ر‬‫المذكو‬ ‫الخصائص‬ ‫أسماء‬ ‫قبؿ‬
Safari‫و‬Chrome‫البادئة‬ ‫يستخدماف‬-webkit-‫مستعرض‬ ‫و‬Opera‫البادئة‬ ‫يستخدـ‬-o-
‫تتيح‬CSS3‫الخاصية‬ ‫عبر‬ ‫ما‬ ‫لعنصر‬ ‫ظؿ‬ ‫إنشاء‬ ً‫ا‬‫أيض‬box-shadow‫قيمة‬ ‫إلييا‬ ‫يسند‬ ‫التي‬ ‫و‬
‫ا‬ ‫إحداثيات‬ ‫عف‬ ‫تعبر‬ ‫بالبكسؿ‬ ‫قيـ‬ ‫و‬ ‫الظؿ‬ ‫لوف‬ ‫عف‬ ‫تعبر‬ ‫لونية‬:‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬ ,‫لظؿ‬
<html>
<head>
div
{
width:300px;
height:100px;
background-color:yellow;

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

ٔٗٗ
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);

ٔٗ٘
‫تنسيق‬ ‫خصائص‬‫الجديدة‬ ‫النصوص‬‫في‬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
‫طوؿ‬ ‫يصبح‬ ‫عندما‬ ‫عممو‬ ‫يتـ‬ ‫الذي‬ ‫ما‬ ‫تحدد‬
‫لو‬ ‫الحاوي‬ ‫العنصر‬ ‫مف‬ ‫أطوؿ‬ ‫النص‬

ٔٗٙ
text-shadow‫و‬ ‫قمتيف‬‫ر‬ ‫قيمتيف‬
‫لونية‬ ‫قيمة‬
‫لمنص‬ ً‫ال‬‫ظ‬ ‫تضيؼ‬
text-wrapnone‫أو‬normal
‫أو‬unrestricted
‫أو‬suppress
‫تح‬‫تحقيؽ‬ ‫يقة‬‫ر‬‫ط‬ ‫دد‬‫النصوص‬ ‫التفاؼ‬
word-breaknormal‫أو‬
break-all‫أو‬
hyphenate
‫الطويمة‬ ‫الكممات‬ ‫تقسيـ‬ ‫يقة‬‫ر‬‫ط‬ ‫تحديد‬
word-wrapnormal‫أو‬
word-break
‫تقسيـ‬ ‫عبر‬ ‫النصوص‬ ‫التفاؼ‬ ‫بتحقيؽ‬ ‫تقوـ‬
‫المحددة‬ ‫يقة‬‫ر‬‫الط‬ ‫عمى‬ ً‫بناء‬ ‫الطويمة‬ ‫الكممات‬
‫الخاصة‬ ‫في‬word-break
‫الجدول‬13‫في‬ ‫الجديدة‬ ‫النصوص‬ ‫تنسيق‬ ‫خصائص‬ :CSS3
‫استخداـ‬ ‫التالي‬ ‫المثاؿ‬ ‫يعرض‬‫إحدى‬:‫الخصائص‬ ‫ىذه‬
<html>
<head>
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
</style>
</head>
<body>

ٔٗٚ
<h1>ًٍ‫اٌّظ‬ ‫إٌض‬</h1>
</body>
</html>
‫في‬ ‫الجديدة‬ ‫الخطوط‬ ‫خصائص‬CSS3
‫في‬CSS‫الموجودة‬ ‫و‬ ‫الشائعة‬ ‫الخطوط‬ ‫استخداـ‬ ‫الويب‬ ‫صفحات‬ ‫ي‬‫مطور‬ ‫اجب‬‫و‬ ‫مف‬ ‫كاف‬ ‫التقميدية‬
‫عمى‬ ً‫ا‬‫ر‬‫قاد‬ ‫يكف‬ ‫لـ‬ ‫المستعرض‬ ‫أف‬ ‫ذلؾ‬ ‫و‬ ‫الصفحة‬ ‫ار‬‫و‬‫ز‬ ‫اسيب‬‫و‬‫ح‬ ‫أغمب‬ ‫في‬‫غير‬ ‫خط‬ ‫أي‬ ‫عرض‬
‫مع‬ ,‫الموقع‬ ‫ائر‬‫ز‬ ‫حاسوب‬ ‫خطوط‬ ‫في‬ ‫موجود‬CSS3‫خط‬ ‫أي‬ ‫استخداـ‬ ‫باإلمكاف‬ ‫أصبح‬‫ضمف‬
‫الخاصية‬ ‫إلى‬ ‫ه‬‫ر‬‫مسا‬ ‫إسناد‬ ‫و‬ ‫و‬ ‫الموقع‬ ‫ممفات‬ ‫ضمف‬ ‫الخط‬ ‫ممؼ‬ ‫وضع‬ ‫بعد‬ ‫الويب‬ ‫صفحة‬src
‫لقاعدة‬@font-face:‫كمايمي‬ ‫تستخدـ‬ ‫التي‬ ‫و‬ ً‫ا‬‫كمي‬ ‫الجديدة‬
ً‫ّل‬‫و‬‫أ‬-‫باستخ‬ ‫جديدة‬ ‫عائمة‬ ‫اسـ‬ ‫يؼ‬‫ر‬‫تع‬ ‫يتـ‬‫القاعدة‬ ‫داـ‬@font-face.
ً‫ا‬‫ثاني‬-‫الخاصية‬ ‫إلى‬ ً‫ا‬‫سابق‬ َ‫ئ‬ِ‫ش‬ْ‫ُن‬‫أ‬ ‫الذي‬ ‫العائمة‬ ‫اسـ‬ ‫يسند‬font-family.‫تقميدي‬ ‫بشكؿ‬
‫مستعرض‬ :‫ممحوظة‬Internet Exploer‫ع‬‫النو‬ ‫ذات‬ ‫الخطوط‬ ‫يدعـ‬.eot‫المستعرضات‬ ‫باقي‬ ‫تدعـ‬ ‫بينما‬ ‫فقط‬
‫النوعيف‬.ttf‫و‬.otf
<html>
<head>
@font-face
{
font-family: myFont;

ٔٗٛ
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-
:‫الجديدة‬ ‫التحويؿ‬ ‫ابع‬‫و‬‫ت‬ ‫يعرض‬ ‫التالي‬ ‫الجدوؿ‬ ‫و‬

ٜٔٗ
‫التابع‬‫الشرح‬
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
<html>
<head>
div
{
-webkit-transform:skew(30deg,20deg);
width:100px;
height:75px;
background-color:red;
border:1px solid black;

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

ٔ٘ٔ
‫األبعاد‬ ‫ثالثية‬ ‫الهندسية‬ ‫التحويالت‬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
.‫متحرؾ‬ ‫بشكؿ‬ ‫العنصر‬ ‫يظير‬ ‫مما‬ ‫محدد‬ ‫زمف‬ ‫خالؿ‬ ‫لمعنصر‬ ‫األصمية‬ ‫القاعدة‬ ‫عف‬ ‫مختمفة‬

ٕٔ٘
:‫الصيغة‬ ‫يؽ‬‫ر‬‫ط‬ ‫عف‬
transition: property duration;
‫تعبر‬ ‫حيث‬property‫و‬ ‫ستتغير‬ ‫التي‬ ‫الخاصية‬ ‫اسـ‬ ‫عف‬duration‫تغيير‬ ‫يمكف‬ ‫و‬ ‫الزمف‬ ‫عف‬ ‫تعبر‬
:‫بالصيغة‬ ‫خاصية‬ ‫مف‬ ‫أكثر‬
transition: property1 duration1, property2 duration2,… etc;
<html>
<head>
div
{
width:100px;
height:100px;
background:red;
-webkit-transition:width 2s, height 2s;
}
div:hover
{
width:200px;
height:200px;
webkit-transform:rotate(180deg);
}

ٖٔ٘
</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.‫بالعنصر‬ ‫الخاصة‬
<html>

ٔ٘ٗ
<head>
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>
‫أثناء‬ ‫لمعنصر‬ ‫النيائية‬ ‫الحالة‬ ‫و‬ ‫البدائية‬ ‫الحالة‬ ‫عمى‬ ‫باّلعتماد‬ ‫حركة‬ ‫إنشاء‬ ‫يعرض‬ ‫السابؽ‬ ‫المثاؿ‬
‫ا‬ ‫بدء‬ ‫لحظة‬ ‫العنصر‬ ‫شكؿ‬ ‫عف‬ ‫تعبر‬ ‫البدائية‬ ‫الحالة‬ ‫أف‬ ‫حيث‬ ‫الحركة‬‫تعبر‬ ‫النيائية‬ ‫الحالة‬ ‫و‬ ‫لحركة‬
.‫الحركة‬ ‫نياية‬ ‫لحظة‬ ‫العنصر‬ ‫شكؿ‬ ‫عف‬

ٔ٘٘
‫قاعدة‬ ‫إنشاء‬ ‫عبر‬ ‫الحركة‬ ‫لحظات‬ ‫مف‬ ‫لحظة‬ ‫كؿ‬ ‫في‬ ‫العنصر‬ ‫شكؿ‬ ‫تخصيص‬ ‫يمكف‬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‫و‬ ,‫ىذه‬ ‫في‬

ٔ٘ٙ
‫نافذة‬ ‫حجـ‬ ‫تغير‬ ‫مع‬ ‫عددىا‬ ‫يتغير‬ ‫و‬ ‫منيا‬ ‫لكؿ‬ ‫ثابت‬ ‫عرض‬ ‫عمى‬ ‫األعمدة‬ ‫تحافظ‬ ‫يقة‬‫ر‬‫الط‬
.‫المستعرض‬
.‫المتعددة‬ ‫األعمدة‬ ‫خصائص‬ ‫مع‬ ً‫ا‬‫سابق‬ ‫ة‬‫ر‬‫المذكو‬ ‫البادئات‬ ‫نفس‬ ‫تستخدـ‬ :‫ممحوظة‬
:‫األولى‬ ‫يقة‬‫ر‬‫بالط‬ ‫المتعددة‬ ‫األعمدة‬ ‫إنشاء‬ ‫يعرض‬ ‫التالي‬ ‫المثاؿ‬
<html>
<head>
.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.

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

ٔ٘ٛ
‫الخاصية‬‫الممكنة‬ ‫القيم‬‫الشرح‬
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

ٜٔ٘
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>‫عديمة‬

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

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

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

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

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

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

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

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

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

ٔٚٗ
‫احدات‬‫و‬‫القياس‬‫في‬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.......................ٔ٘ٔ

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

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

ٔٚٛ
‫من‬
‫اته‬‫ر‬‫إصدا‬
‫ػة‬‫ػ‬‫ػ‬‫ػ‬ّ‫ي‬‫ر‬‫النظ‬ ‫ػف‬‫ػ‬‫ػ‬‫ػ‬‫م‬ ّ‫ػدي‬‫ػ‬‫ػ‬‫ػ‬‫ي‬‫اى‬‫ر‬‫الف‬ ُ‫ع‬‫ػرو‬‫ػ‬‫ػ‬‫ػ‬‫ش‬‫م‬
‫ػي‬‫ج‬‫البرم‬ ‫ػؽ‬‫ي‬‫التطب‬ ‫ى‬ّ‫حت‬-‫ػاب‬‫ت‬‫ك‬
ّ‫ػاني‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬ّ‫مج‬ ّ‫ػي‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ن‬‫إلكترو‬-‫ػؽ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ش‬‫دم‬
ٕٖٓٔ.
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.

ٜٔٚ
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 -
‫ػع‬‫ػ‬‫ق‬‫مو‬ ‫ع‬‫ػرو‬‫ش‬‫م‬ ‫ػف‬‫ػ‬‫ع‬ ‫ؿ‬ّ‫األو‬ ‫ػز‬‫ك‬‫المر‬
‫أبوكماؿ‬ ‫مدينة‬–‫عاـ‬ٕٜٓٓ.
‫ػة‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ي‬‫ز‬‫المرك‬ ‫ػة‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ي‬‫المعمومات‬ ‫ػابقة‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫س‬‫م‬
‫ة‬‫ر‬‫عش‬ ‫الثالثة‬-‫ػث‬‫ع‬‫الب‬ ‫ػة‬‫ع‬‫جام‬-
‫حمص‬ٕٜٓٓ.
‫ػاني‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ث‬‫ال‬ ‫ػي‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫م‬‫العم‬ ‫ػؤتمر‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫م‬‫ال‬–
‫ػوـ‬‫ػ‬‫ػ‬‫م‬‫لمع‬ ‫ػة‬‫ػ‬‫ػ‬‫ي‬‫الدول‬ ‫ية‬‫ر‬‫ػو‬‫ػ‬‫ػ‬‫س‬‫ال‬ ‫ػة‬‫ػ‬‫ػ‬‫ع‬‫الجام‬
‫التكنولوجيا‬ ‫و‬–‫دمشؽ‬ٕٓٓٛ.
‫ي‬‫ػور‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫س‬‫ال‬ ‫ػة‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬ّ‫المعموماتي‬ ‫ػاد‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ي‬‫أولمب‬
‫ػع‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ب‬‫ا‬‫ر‬‫ال‬-‫ػة‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ي‬‫العمم‬ ‫ػة‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ي‬‫الجمع‬
‫ػة‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ي‬‫لممعمومات‬ ‫ية‬‫ر‬‫ػو‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫س‬‫ال‬-‫ػؽ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ش‬‫دم‬
ٕٓٓٚ.
‫ة‬‫ر‬‫ػ‬‫ػ‬‫ػ‬‫ش‬‫ع‬ ‫ػة‬‫ػ‬‫ػ‬‫ي‬‫الحاد‬-‫ػث‬‫ػ‬‫ػ‬‫ع‬‫الب‬ ‫ػة‬‫ػ‬‫ػ‬‫ع‬‫جام‬
–‫حمص‬ٕٓٓٚ.
‫اء‬‫ر‬‫ػع‬‫ػ‬ّ‫ش‬‫ال‬ ‫ػر‬‫ػ‬‫ي‬‫أم‬ ‫ػاف‬‫ػ‬‫ج‬‫مير‬ ‫ػفيات‬‫ػ‬‫ص‬‫ت‬-
‫ػامس‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫خ‬‫ال‬ ‫ػـ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫س‬‫المو‬-‫ات‬‫ر‬‫ػا‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫م‬‫اإل‬
‫ة‬ّ‫المتحد‬ ‫ة‬ّ‫بي‬‫ر‬‫الع‬-ٕٖٓٔ.

ّ‫ػي‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ب‬‫ر‬‫الع‬ ‫ػداع‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ب‬‫لإل‬ ‫قة‬‫ر‬‫ػا‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬ّ‫ش‬‫ال‬ ‫ة‬‫ز‬‫ػائ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ج‬-
‫ة‬ّ‫ػد‬‫ح‬‫المت‬ ‫ة‬ّ‫بي‬‫ر‬‫الع‬ ‫ات‬‫ر‬‫اإلما‬-‫ػز‬‫ك‬‫المر‬
‫ؿ‬ّ‫األو‬-ٕٓٔٔ.
‫اء‬‫ر‬‫ػع‬‫ػ‬ّ‫ش‬‫ال‬ ‫ػر‬‫ػ‬‫ي‬‫أم‬ ‫ػاف‬‫ػ‬‫ج‬‫مير‬ ‫ػفيات‬‫ػ‬‫ص‬‫ت‬-
‫ػع‬‫ػ‬‫ػ‬‫ب‬‫ا‬‫ر‬‫ال‬ ‫ػـ‬‫ػ‬‫ػ‬‫س‬‫المو‬-‫ػة‬‫ػ‬‫ػ‬ّ‫بي‬‫ر‬‫الع‬ ‫ات‬‫ر‬‫ػا‬‫ػ‬‫ػ‬‫م‬‫اإل‬
‫ة‬ّ‫المتحد‬-ٕٓٔٔ.
‫ة‬‫ز‬‫ػائ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ج‬‫ػة‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ب‬‫لمطم‬ ّ‫ي‬‫ػعر‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬ِّ‫الش‬ ‫ػداع‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ب‬‫اإل‬-
‫ػة‬‫ػ‬‫ي‬‫الدول‬ ‫ية‬‫ر‬‫ػو‬‫ػ‬‫س‬‫ال‬ ‫ػة‬‫ػ‬‫ع‬‫الجام‬-‫ػز‬‫ػ‬‫ك‬‫المر‬
‫ؿ‬ّ‫األو‬-ٕٓٔٓ.
‫ػيات‬‫س‬‫األم‬ ‫ػف‬‫م‬ ‫ػر‬‫ي‬‫كب‬ ‫عدد‬ ‫في‬ ‫شارؾ‬
‫ػؿ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫خ‬‫دا‬ ‫َّة‬‫ي‬‫ر‬‫ػع‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬ِّ‫الش‬ ‫ػات‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ػ‬‫ن‬‫الميرجا‬ ‫و‬
‫يا‬‫ر‬‫سو‬.

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

كتاب تعلم Html5 css3

More Related Content

What's hot (14)

Viewers also liked (20)

Similar to كتاب تعلم Html5 css3 (20)

Recently uploaded (17)

كتاب تعلم Html5 css3