SlideShare a Scribd company logo
1 of 180
Download to read offline
HTML 5 - CSS 3 Arabic Book
: ‫المبدع‬ ‫ـ‬ّ‫لممصم‬ ‫الغالؼ‬ ‫تصميـ‬
‫اىيـ‬‫ر‬‫اإلب‬ ‫يز‬‫ز‬‫عبدالع‬ ‫بدر‬
‫م‬َّ‫م‬‫تع‬
HTML5 & CSS3
(‫نحو‬ ‫األولى‬ ‫الخطوة‬‫البرمجة‬‫لمويب‬)
‫صالح‬ ‫ِّد‬‫سي‬ ‫مختار‬ ‫الميندس‬
HTML 5 - CSS 3 Arabic Book
‫ؼ‬ِّ‫ل‬‫لممؤ‬ ‫محفوظة‬ ‫الحقوؽ‬ ‫جميع‬
HTML 5 - CSS 3 Arabic Book
‫اإلهداء‬
‫نخمتيف‬ ‫أعمى‬ ‫إلى‬ِ‫القمب‬ ‫ضفاؼ‬ ‫عمى‬...
.‫اهلل‬ ‫حفظيما‬ َّ‫الدي‬‫و‬
HTML 5 - CSS 3 Arabic Book
ٜ
‫تنويه‬
ُ‫غت‬‫فر‬‫تأليؼ‬ ‫مف‬‫في‬ ‫الكتاب‬ ‫ىذا‬‫األولى‬ ‫األشير‬‫مف‬‫عاـ‬ٕٓٔٔ,ُ‫عقدت‬ ‫قد‬ ‫كنت‬ ‫و‬‫عمى‬ َ‫العزـ‬
ً‫ا‬‫مطبوع‬ ‫ه‬‫ر‬‫إصدا‬َّ‫كأو‬‫بي‬‫ر‬‫ع‬ ‫كتاب‬ ‫ؿ‬‫موضوعو‬ ‫في‬,ً‫ا‬‫حاذي‬‫بذلؾ‬‫حذو‬‫و‬ ‫أخيو‬‫ـ‬ّ‫م‬‫(تع‬ ‫سابقو‬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‫كما‬ ‫وصفية‬ ‫لغة‬
‫قمت‬‫لكتابة‬ ‫التالية‬ ‫العامة‬ ‫الصيغة‬ ‫ـ‬ِّ‫فتقد‬ ,‫المستندات‬ ‫ضمف‬ ‫التعميقات‬ ‫لكتابة‬ ‫آلية‬ ‫توفر‬ ‫أنيا‬ ّ‫إّل‬ ً‫ا‬‫سابق‬
:‫التعميؽ‬
<!-- comment -->
‫مستند‬ ‫ضمف‬ ‫التعميقات‬ ‫استخداـ‬ ‫عمى‬ ‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬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/> ‫اسزخذِٕب‬ -->
<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
<&lt;
>&gt;
≠&ne;
™&trade;
©&copy;
‫اع‬‫ر‬‫الف‬ ‫محرؼ‬&nbsp;
‫الجدول‬2:‫الخاصة‬ ‫المحارف‬ ‫بعض‬‫في‬HTML
:‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬
<html>
<head>
<title>
‫اٌخبطخ‬ ‫اٌّحبسف‬ ‫ٌجؼغ‬ ‫اخزجبس‬ ‫طفحخ‬
</title>
</head>
<body>
<p>
3 &lt; 5 and 10 &gt; 2 and also 3 &ne; 4 ....
all rights reserved for &copy; Mukhtar &trade;
</p>
</body>
</html>
ٖٗ
:‫كمايمي‬ ‫المستعرض‬ ‫في‬ ‫عرضو‬ ‫عند‬ ‫يبدو‬ ‫الذي‬ ‫و‬
‫الشكل‬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">
<table border="1" width="50%">
<caption>‫انكرة‬ ‫شراء‬ ‫فاذىرج‬</caption>
<thead>
<tr>
<th>‫انكراب‬ ‫اصم‬</th>
<th>‫انضعر‬</th>
</tr>
</thead>
<tbody>
<tr>
<td>‫اٌٛ٠ت‬ ‫ثشِجخ‬</td>
<td>150</td>
</tr>
<tr>
<td>‫اٌجٛاي‬ ‫ثشِجخ‬</td>
٘ٗ
<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">
<table border="1" width="100%">
<tbody>
<tr>
<td>‫اٌىزبة‬ ُ‫اس‬</td>
<td>ٍُ‫رؼ‬ jQuery ٟ‫ف‬021‫دل١مخ‬ </td>
<td rowspan="3">
<img src="jQuery120.png">
</td>
</tr>
<tr>
<td>‫اٌّؤٌف‬</td>
<td>‫طبٌح‬ ‫س١ذ‬ ‫ِخزبس‬</td>
</tr>
<tr>
<td>‫اإلطذاس‬ ‫سٕخ‬</td>
<td>2010</td>
</tr>
<tr>
<td colspan="3">
‫ِىزجخ‬ ٓ‫ػ‬ ‫ِؼٍِٛبد‬ ‫اٌىزبة‬ ‫٘زا‬ َ‫٠مذ‬jQuery
٘ٚ
ً‫ثشى‬‫إٌخ‬ ..... ‫ٚاػح‬ ٚ ‫ِجسؾ‬.
</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‫في‬ ‫البيانات‬ ‫إرساؿ‬ ‫يتـ‬ ‫حيث‬‫في‬ ‫اف‬‫و‬‫العن‬ ‫يط‬‫ر‬‫ش‬
‫عمى‬ ‫التالي‬ ‫ابط‬‫ر‬‫لم‬ ‫انظر‬ ,‫مفتاح/قيمة‬ ‫اج‬‫و‬‫أز‬ ‫بشكؿ‬ ‫البرمجي‬ ‫الممؼ‬ ‫اسـ‬ ‫بعد‬ ‫المستعرض‬
:‫المثاؿ‬ ‫سبيؿ‬
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book

More Related Content

What's hot

الرحلات المعرفية عبر الويب
الرحلات المعرفية عبر الويبالرحلات المعرفية عبر الويب
الرحلات المعرفية عبر الويبahmad al-dhafeeri
 
الوسائط المتعددة
الوسائط المتعددةالوسائط المتعددة
الوسائط المتعددةMalek Abu Wardah
 
محاضرة نماذج تصميم المنهج
محاضرة نماذج تصميم المنهجمحاضرة نماذج تصميم المنهج
محاضرة نماذج تصميم المنهجmnahjj
 
مبادئ التصميم التعليمي
مبادئ التصميم التعليميمبادئ التصميم التعليمي
مبادئ التصميم التعليميMohammadAlqarni8
 
مراحل التصميم الاختبارات الالكترونيه
مراحل التصميم الاختبارات الالكترونيهمراحل التصميم الاختبارات الالكترونيه
مراحل التصميم الاختبارات الالكترونيهsamsamamohamed
 
نماذج تصميم التدريس
نماذج تصميم التدريسنماذج تصميم التدريس
نماذج تصميم التدريسTamam Jaradat
 
الوسائط المتعددة
الوسائط المتعددةالوسائط المتعددة
الوسائط المتعددةfawzy elnady
 
La différenciation pédagogique
La différenciation pédagogiqueLa différenciation pédagogique
La différenciation pédagogiqueFaycel Chaoua
 
الوحدة الأولى - مقرر المناهج
الوحدة الأولى - مقرر المناهجالوحدة الأولى - مقرر المناهج
الوحدة الأولى - مقرر المناهجmnahjj
 
تصميم المقررات الرقمية
تصميم المقررات الرقميةتصميم المقررات الرقمية
تصميم المقررات الرقميةmaryam_s
 
أنواع نظم تشغيل الحاسب
أنواع نظم تشغيل الحاسبأنواع نظم تشغيل الحاسب
أنواع نظم تشغيل الحاسبAhmad Abdelbaqy
 
صياغة البرامج ولغات البرمجة
صياغة البرامج ولغات البرمجةصياغة البرامج ولغات البرمجة
صياغة البرامج ولغات البرمجةguest98ae80
 
نماذج التصميم التعليمي
نماذج التصميم التعليمينماذج التصميم التعليمي
نماذج التصميم التعليميmarzou1 o
 
1366136913.9485 نظم ادارة قواعد البيانات 2
1366136913.9485 نظم ادارة  قواعد البيانات 21366136913.9485 نظم ادارة  قواعد البيانات 2
1366136913.9485 نظم ادارة قواعد البيانات 2mh ED
 
استراتيجية التدريس المباشر
استراتيجية التدريس المباشراستراتيجية التدريس المباشر
استراتيجية التدريس المباشرkemon7
 
تصميم درس باستخدام نموذج جيرلاك وايلي ودمج التقنية في الدرس باستخدام نموذج (TIP)
تصميم درس باستخدام نموذج جيرلاك وايلي ودمج التقنية في الدرس باستخدام نموذج (TIP)تصميم درس باستخدام نموذج جيرلاك وايلي ودمج التقنية في الدرس باستخدام نموذج (TIP)
تصميم درس باستخدام نموذج جيرلاك وايلي ودمج التقنية في الدرس باستخدام نموذج (TIP)arwa88
 
الديداكتيك ح1 المثلث الديداكتيكي.11.7.2016 ملوك
الديداكتيك ح1 المثلث الديداكتيكي.11.7.2016 ملوكالديداكتيك ح1 المثلث الديداكتيكي.11.7.2016 ملوك
الديداكتيك ح1 المثلث الديداكتيكي.11.7.2016 ملوكmed mel
 
المستودعات الرقمية
 المستودعات الرقمية المستودعات الرقمية
المستودعات الرقميةNogaFathy2
 
Mayer'in Çoklu Ortamla Bilişsel Öğrenme Kuramı
Mayer'in Çoklu Ortamla Bilişsel Öğrenme KuramıMayer'in Çoklu Ortamla Bilişsel Öğrenme Kuramı
Mayer'in Çoklu Ortamla Bilişsel Öğrenme Kuramıgeredelix
 

What's hot (20)

الرحلات المعرفية عبر الويب
الرحلات المعرفية عبر الويبالرحلات المعرفية عبر الويب
الرحلات المعرفية عبر الويب
 
الوسائط المتعددة
الوسائط المتعددةالوسائط المتعددة
الوسائط المتعددة
 
محاضرة نماذج تصميم المنهج
محاضرة نماذج تصميم المنهجمحاضرة نماذج تصميم المنهج
محاضرة نماذج تصميم المنهج
 
مبادئ التصميم التعليمي
مبادئ التصميم التعليميمبادئ التصميم التعليمي
مبادئ التصميم التعليمي
 
مراحل التصميم الاختبارات الالكترونيه
مراحل التصميم الاختبارات الالكترونيهمراحل التصميم الاختبارات الالكترونيه
مراحل التصميم الاختبارات الالكترونيه
 
نماذج تصميم التدريس
نماذج تصميم التدريسنماذج تصميم التدريس
نماذج تصميم التدريس
 
الوسائط المتعددة
الوسائط المتعددةالوسائط المتعددة
الوسائط المتعددة
 
La différenciation pédagogique
La différenciation pédagogiqueLa différenciation pédagogique
La différenciation pédagogique
 
الوحدة الأولى - مقرر المناهج
الوحدة الأولى - مقرر المناهجالوحدة الأولى - مقرر المناهج
الوحدة الأولى - مقرر المناهج
 
تصميم المقررات الرقمية
تصميم المقررات الرقميةتصميم المقررات الرقمية
تصميم المقررات الرقمية
 
أنواع نظم تشغيل الحاسب
أنواع نظم تشغيل الحاسبأنواع نظم تشغيل الحاسب
أنواع نظم تشغيل الحاسب
 
صياغة البرامج ولغات البرمجة
صياغة البرامج ولغات البرمجةصياغة البرامج ولغات البرمجة
صياغة البرامج ولغات البرمجة
 
نماذج التصميم التعليمي
نماذج التصميم التعليمينماذج التصميم التعليمي
نماذج التصميم التعليمي
 
1366136913.9485 نظم ادارة قواعد البيانات 2
1366136913.9485 نظم ادارة  قواعد البيانات 21366136913.9485 نظم ادارة  قواعد البيانات 2
1366136913.9485 نظم ادارة قواعد البيانات 2
 
المحاضرة الثالثة لغات البرمجة
المحاضرة الثالثة  لغات البرمجةالمحاضرة الثالثة  لغات البرمجة
المحاضرة الثالثة لغات البرمجة
 
استراتيجية التدريس المباشر
استراتيجية التدريس المباشراستراتيجية التدريس المباشر
استراتيجية التدريس المباشر
 
تصميم درس باستخدام نموذج جيرلاك وايلي ودمج التقنية في الدرس باستخدام نموذج (TIP)
تصميم درس باستخدام نموذج جيرلاك وايلي ودمج التقنية في الدرس باستخدام نموذج (TIP)تصميم درس باستخدام نموذج جيرلاك وايلي ودمج التقنية في الدرس باستخدام نموذج (TIP)
تصميم درس باستخدام نموذج جيرلاك وايلي ودمج التقنية في الدرس باستخدام نموذج (TIP)
 
الديداكتيك ح1 المثلث الديداكتيكي.11.7.2016 ملوك
الديداكتيك ح1 المثلث الديداكتيكي.11.7.2016 ملوكالديداكتيك ح1 المثلث الديداكتيكي.11.7.2016 ملوك
الديداكتيك ح1 المثلث الديداكتيكي.11.7.2016 ملوك
 
المستودعات الرقمية
 المستودعات الرقمية المستودعات الرقمية
المستودعات الرقمية
 
Mayer'in Çoklu Ortamla Bilişsel Öğrenme Kuramı
Mayer'in Çoklu Ortamla Bilişsel Öğrenme KuramıMayer'in Çoklu Ortamla Bilişsel Öğrenme Kuramı
Mayer'in Çoklu Ortamla Bilişsel Öğrenme Kuramı
 

Viewers also liked

HTML5 New and Improved
HTML5   New and ImprovedHTML5   New and Improved
HTML5 New and ImprovedTimothy Fisher
 
Text Formatting+(HTML5)
Text Formatting+(HTML5)Text Formatting+(HTML5)
Text Formatting+(HTML5)Ahmed Hassan
 
HTML5 Accessibility
HTML5 AccessibilityHTML5 Accessibility
HTML5 Accessibilitybgibson
 
HTML5 & WAI-ARIA - Happy Families
HTML5 & WAI-ARIA - Happy FamiliesHTML5 & WAI-ARIA - Happy Families
HTML5 & WAI-ARIA - Happy FamiliesSteven Faulkner
 
IT & Network Companies in Egypt
IT & Network Companies in EgyptIT & Network Companies in Egypt
IT & Network Companies in EgyptiTawy Community
 
Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginnersSingsys Pte Ltd
 
دورة CSS3 باللغة العربية
دورة CSS3 باللغة العربيةدورة CSS3 باللغة العربية
دورة CSS3 باللغة العربيةanees abu-hmaid
 
باللغة العربية HTML5 دورة
باللغة العربية HTML5 دورة باللغة العربية HTML5 دورة
باللغة العربية HTML5 دورة anees abu-hmaid
 
كتاب تعلم Html5 css3
كتاب تعلم Html5 css3كتاب تعلم Html5 css3
كتاب تعلم Html5 css3titifcom
 
أحدث الأدوات والمستجدات في تطوير تطبيقات الأجهزة الذكية
أحدث الأدوات والمستجدات في تطوير تطبيقات الأجهزة الذكيةأحدث الأدوات والمستجدات في تطوير تطبيقات الأجهزة الذكية
أحدث الأدوات والمستجدات في تطوير تطبيقات الأجهزة الذكيةAbdullah AlQasim
 
Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Peter Lubbers
 
14. Defining Classes
14. Defining Classes14. Defining Classes
14. Defining ClassesIntro C# Book
 
20. Object-Oriented Programming Fundamental Principles
20. Object-Oriented Programming Fundamental Principles20. Object-Oriented Programming Fundamental Principles
20. Object-Oriented Programming Fundamental PrinciplesIntro C# Book
 
17. Trees and Graphs
17. Trees and Graphs17. Trees and Graphs
17. Trees and GraphsIntro C# Book
 

Viewers also liked (20)

طور نفسك
طور نفسكطور نفسك
طور نفسك
 
HTML5 New and Improved
HTML5   New and ImprovedHTML5   New and Improved
HTML5 New and Improved
 
Text Formatting+(HTML5)
Text Formatting+(HTML5)Text Formatting+(HTML5)
Text Formatting+(HTML5)
 
HTML5 Tutorial
HTML5 TutorialHTML5 Tutorial
HTML5 Tutorial
 
HTML5 Accessibility
HTML5 AccessibilityHTML5 Accessibility
HTML5 Accessibility
 
HTML5 & WAI-ARIA - Happy Families
HTML5 & WAI-ARIA - Happy FamiliesHTML5 & WAI-ARIA - Happy Families
HTML5 & WAI-ARIA - Happy Families
 
Html 5 Features And Benefits
Html 5 Features And Benefits  Html 5 Features And Benefits
Html 5 Features And Benefits
 
IT & Network Companies in Egypt
IT & Network Companies in EgyptIT & Network Companies in Egypt
IT & Network Companies in Egypt
 
Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginners
 
1 فون جاب
1  فون جاب1  فون جاب
1 فون جاب
 
دورة CSS3 باللغة العربية
دورة CSS3 باللغة العربيةدورة CSS3 باللغة العربية
دورة CSS3 باللغة العربية
 
باللغة العربية HTML5 دورة
باللغة العربية HTML5 دورة باللغة العربية HTML5 دورة
باللغة العربية HTML5 دورة
 
كتاب تعلم Html5 css3
كتاب تعلم Html5 css3كتاب تعلم Html5 css3
كتاب تعلم Html5 css3
 
أحدث الأدوات والمستجدات في تطوير تطبيقات الأجهزة الذكية
أحدث الأدوات والمستجدات في تطوير تطبيقات الأجهزة الذكيةأحدث الأدوات والمستجدات في تطوير تطبيقات الأجهزة الذكية
أحدث الأدوات والمستجدات في تطوير تطبيقات الأجهزة الذكية
 
Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)
 
14. Defining Classes
14. Defining Classes14. Defining Classes
14. Defining Classes
 
Programming in c#
Programming in c#Programming in c#
Programming in c#
 
20. Object-Oriented Programming Fundamental Principles
20. Object-Oriented Programming Fundamental Principles20. Object-Oriented Programming Fundamental Principles
20. Object-Oriented Programming Fundamental Principles
 
Www.kutub.info 16076
Www.kutub.info 16076Www.kutub.info 16076
Www.kutub.info 16076
 
17. Trees and Graphs
17. Trees and Graphs17. Trees and Graphs
17. Trees and Graphs
 

Similar to HTML 5 - CSS 3 Arabic Book

Noor-Book.com تعلم HTML و CSS 2 .pdf
Noor-Book.com  تعلم HTML و CSS 2 .pdfNoor-Book.com  تعلم HTML و CSS 2 .pdf
Noor-Book.com تعلم HTML و CSS 2 .pdfAshrafDabbas1
 
باللغة العربية HTML دورة
  باللغة العربية HTML دورة   باللغة العربية HTML دورة
باللغة العربية HTML دورة anees abu-hmaid
 
تعلم HTML CSS و JavaScript
تعلم HTML CSS و JavaScriptتعلم HTML CSS و JavaScript
تعلم HTML CSS و JavaScriptMolham Al-Maleh
 
java script course دورة جافا سكربت باللغة العربية
java script course دورة جافا سكربت باللغة العربيةjava script course دورة جافا سكربت باللغة العربية
java script course دورة جافا سكربت باللغة العربيةanees abu-hmaid
 
Introduction ( Html 1)
Introduction  ( Html 1)Introduction  ( Html 1)
Introduction ( Html 1)Ahmed Hassan
 
مذكرة في لغة Html 2
مذكرة في لغة Html   2مذكرة في لغة Html   2
مذكرة في لغة Html 2خالد مراد
 
مذكرة في لغة Html 2
مذكرة في لغة Html   2مذكرة في لغة Html   2
مذكرة في لغة Html 2خالد مراد
 
Web Development Course PHP lecture11.pptx
Web Development Course PHP lecture11.pptxWeb Development Course PHP lecture11.pptx
Web Development Course PHP lecture11.pptxssuser8c8fc1
 
باللغة العربية CSS دورة
  باللغة العربية CSS دورة   باللغة العربية CSS دورة
باللغة العربية CSS دورة anees abu-hmaid
 
الدرس الثاني عشر
الدرس الثاني عشرالدرس الثاني عشر
الدرس الثاني عشرAnas Aloklah
 
البرمجة | أقوي مجالات العمل والربح من الانترنت..دليلك نحو الاحتراف
البرمجة | أقوي مجالات العمل والربح من الانترنت..دليلك نحو الاحترافالبرمجة | أقوي مجالات العمل والربح من الانترنت..دليلك نحو الاحتراف
البرمجة | أقوي مجالات العمل والربح من الانترنت..دليلك نحو الاحترافMohamed E. Saleh
 
PHP Advance 101 دورة
PHP Advance 101 دورة PHP Advance 101 دورة
PHP Advance 101 دورة anees abu-hmaid
 
Computer 2nd-preparatory-second-term- (10)
Computer 2nd-preparatory-second-term- (10)Computer 2nd-preparatory-second-term- (10)
Computer 2nd-preparatory-second-term- (10)khawagah
 
اسئلة نهائية لمقرر تقنية تصميم صفحات الويب - 1266
اسئلة نهائية لمقرر تقنية تصميم صفحات الويب - 1266اسئلة نهائية لمقرر تقنية تصميم صفحات الويب - 1266
اسئلة نهائية لمقرر تقنية تصميم صفحات الويب - 1266جامعة القدس المفتوحة
 
بالعربيةAngular js(ar)تحميل كتاب دورة لتعلم
بالعربيةAngular js(ar)تحميل كتاب دورة لتعلم بالعربيةAngular js(ar)تحميل كتاب دورة لتعلم
بالعربيةAngular js(ar)تحميل كتاب دورة لتعلم NoureddineHassi
 

Similar to HTML 5 - CSS 3 Arabic Book (20)

Noor-Book.com تعلم HTML و CSS 2 .pdf
Noor-Book.com  تعلم HTML و CSS 2 .pdfNoor-Book.com  تعلم HTML و CSS 2 .pdf
Noor-Book.com تعلم HTML و CSS 2 .pdf
 
باللغة العربية HTML دورة
  باللغة العربية HTML دورة   باللغة العربية HTML دورة
باللغة العربية HTML دورة
 
تعلم HTML CSS و JavaScript
تعلم HTML CSS و JavaScriptتعلم HTML CSS و JavaScript
تعلم HTML CSS و JavaScript
 
java script course دورة جافا سكربت باللغة العربية
java script course دورة جافا سكربت باللغة العربيةjava script course دورة جافا سكربت باللغة العربية
java script course دورة جافا سكربت باللغة العربية
 
Introduction ( Html 1)
Introduction  ( Html 1)Introduction  ( Html 1)
Introduction ( Html 1)
 
مذكرة في لغة Html 2
مذكرة في لغة Html   2مذكرة في لغة Html   2
مذكرة في لغة Html 2
 
مذكرة في لغة Html 2
مذكرة في لغة Html   2مذكرة في لغة Html   2
مذكرة في لغة Html 2
 
Bootstrap-1
Bootstrap-1Bootstrap-1
Bootstrap-1
 
Web Development Course PHP lecture11.pptx
Web Development Course PHP lecture11.pptxWeb Development Course PHP lecture11.pptx
Web Development Course PHP lecture11.pptx
 
Images_Amended.ppt
Images_Amended.pptImages_Amended.ppt
Images_Amended.ppt
 
باللغة العربية CSS دورة
  باللغة العربية CSS دورة   باللغة العربية CSS دورة
باللغة العربية CSS دورة
 
الدرس الثاني عشر
الدرس الثاني عشرالدرس الثاني عشر
الدرس الثاني عشر
 
البرمجة | أقوي مجالات العمل والربح من الانترنت..دليلك نحو الاحتراف
البرمجة | أقوي مجالات العمل والربح من الانترنت..دليلك نحو الاحترافالبرمجة | أقوي مجالات العمل والربح من الانترنت..دليلك نحو الاحتراف
البرمجة | أقوي مجالات العمل والربح من الانترنت..دليلك نحو الاحتراف
 
PHP Advance 101 دورة
PHP Advance 101 دورة PHP Advance 101 دورة
PHP Advance 101 دورة
 
Basics(HTML 2)
Basics(HTML 2)Basics(HTML 2)
Basics(HTML 2)
 
CSS - LESSON1
CSS - LESSON1CSS - LESSON1
CSS - LESSON1
 
Computer 2nd-preparatory-second-term- (10)
Computer 2nd-preparatory-second-term- (10)Computer 2nd-preparatory-second-term- (10)
Computer 2nd-preparatory-second-term- (10)
 
اسئلة نهائية لمقرر تقنية تصميم صفحات الويب - 1266
اسئلة نهائية لمقرر تقنية تصميم صفحات الويب - 1266اسئلة نهائية لمقرر تقنية تصميم صفحات الويب - 1266
اسئلة نهائية لمقرر تقنية تصميم صفحات الويب - 1266
 
Angular js دورة
Angular js دورةAngular js دورة
Angular js دورة
 
بالعربيةAngular js(ar)تحميل كتاب دورة لتعلم
بالعربيةAngular js(ar)تحميل كتاب دورة لتعلم بالعربيةAngular js(ar)تحميل كتاب دورة لتعلم
بالعربيةAngular js(ar)تحميل كتاب دورة لتعلم
 

More from iTawy Community

Upgrading from WinS 2008/2008 R2 to WinS 2012
Upgrading from WinS 2008/2008 R2 to WinS 2012Upgrading from WinS 2008/2008 R2 to WinS 2012
Upgrading from WinS 2008/2008 R2 to WinS 2012iTawy Community
 
Introduction to Game Development
Introduction to Game DevelopmentIntroduction to Game Development
Introduction to Game DevelopmentiTawy Community
 
Cisco stack wise technology
Cisco stack wise technologyCisco stack wise technology
Cisco stack wise technologyiTawy Community
 
Cisco certs guide - iTawy
Cisco certs guide - iTawyCisco certs guide - iTawy
Cisco certs guide - iTawyiTawy Community
 
VMware Paravirtualization
VMware ParavirtualizationVMware Paravirtualization
VMware ParavirtualizationiTawy Community
 

More from iTawy Community (9)

Upgrading from WinS 2008/2008 R2 to WinS 2012
Upgrading from WinS 2008/2008 R2 to WinS 2012Upgrading from WinS 2008/2008 R2 to WinS 2012
Upgrading from WinS 2008/2008 R2 to WinS 2012
 
Introduction to Game Development
Introduction to Game DevelopmentIntroduction to Game Development
Introduction to Game Development
 
Cisco stack wise technology
Cisco stack wise technologyCisco stack wise technology
Cisco stack wise technology
 
Open Source Lecture
Open Source LectureOpen Source Lecture
Open Source Lecture
 
How to be a programmer!
How to be a programmer!How to be a programmer!
How to be a programmer!
 
MOOC
MOOCMOOC
MOOC
 
Cisco certs guide - iTawy
Cisco certs guide - iTawyCisco certs guide - iTawy
Cisco certs guide - iTawy
 
VMware Paravirtualization
VMware ParavirtualizationVMware Paravirtualization
VMware Paravirtualization
 
10 CES 2015 Highlights
10 CES 2015 Highlights10 CES 2015 Highlights
10 CES 2015 Highlights
 

HTML 5 - CSS 3 Arabic Book

  • 2. : ‫المبدع‬ ‫ـ‬ّ‫لممصم‬ ‫الغالؼ‬ ‫تصميـ‬ ‫اىيـ‬‫ر‬‫اإلب‬ ‫يز‬‫ز‬‫عبدالع‬ ‫بدر‬
  • 3. ‫م‬َّ‫م‬‫تع‬ HTML5 & CSS3 (‫نحو‬ ‫األولى‬ ‫الخطوة‬‫البرمجة‬‫لمويب‬) ‫صالح‬ ‫ِّد‬‫سي‬ ‫مختار‬ ‫الميندس‬
  • 7. ‫اإلهداء‬ ‫نخمتيف‬ ‫أعمى‬ ‫إلى‬ِ‫القمب‬ ‫ضفاؼ‬ ‫عمى‬... .‫اهلل‬ ‫حفظيما‬ َّ‫الدي‬‫و‬
  • 9. ٜ ‫تنويه‬ ُ‫غت‬‫فر‬‫تأليؼ‬ ‫مف‬‫في‬ ‫الكتاب‬ ‫ىذا‬‫األولى‬ ‫األشير‬‫مف‬‫عاـ‬ٕٓٔٔ,ُ‫عقدت‬ ‫قد‬ ‫كنت‬ ‫و‬‫عمى‬ َ‫العزـ‬ ً‫ا‬‫مطبوع‬ ‫ه‬‫ر‬‫إصدا‬َّ‫كأو‬‫بي‬‫ر‬‫ع‬ ‫كتاب‬ ‫ؿ‬‫موضوعو‬ ‫في‬,ً‫ا‬‫حاذي‬‫بذلؾ‬‫حذو‬‫و‬ ‫أخيو‬‫ـ‬ّ‫م‬‫(تع‬ ‫سابقو‬jQuery ‫في‬ٕٔٓ)‫دقيقة‬,َّ‫لكف‬‫مشيئة‬‫اهلل‬‫قضت‬ّ‫أّل‬‫بعد‬ ‫المحظة‬ ‫ىذه‬ ‫ى‬ّ‫حت‬ ‫لذلؾ‬ ‫المالئمة‬ ‫الظروؼ‬ ‫أ‬ّ‫تتيي‬ ‫مرور‬ ‫مع‬ ‫تتضاءؿ‬ ‫كيذا‬ ٍ‫عمؿ‬ ‫قيمة‬ َّ‫أف‬ ‫أؤمف‬ ‫ني‬َّ‫ألن‬ ‫و‬ , ‫إتمامو‬ ‫عمى‬ ً‫ا‬‫ر‬‫شي‬ ‫يف‬‫ر‬‫عش‬ ‫و‬ ‫خمسة‬ ‫انقضاء‬ ‫الوقت‬‫أيت‬‫ر‬ ‫فقد‬-‫تفكير‬ ‫بعد‬-‫ه‬‫ر‬‫أنش‬ ‫أف‬ً‫ا‬‫مخمص‬‫اني‬ّ‫مج‬ ٍ‫بشكؿ‬( ِّ‫اإللكتروني‬ ‫الكتاب‬ ‫بصيغة‬PDF) .‫األسطر‬ ‫ىذه‬ ‫كتابة‬ ‫مف‬ ‫أكثر‬ ‫ي‬ّ‫من‬ ‫ب‬ّ‫م‬‫يتط‬ ‫ّل‬ ‫يغة‬ّ‫الص‬ ‫بيذه‬ ‫ه‬‫ر‬‫نش‬ ‫كاف‬ ‫ا‬ّ‫لم‬ ‫بو‬ ‫ينتفع‬ ‫ارسيف‬ّ‫الد‬ ‫أحد‬ َّ‫لعؿ‬ ‫مختار‬ ‫البوكماؿ‬ٔٓ/ٙ/ٕٖٓٔ
  • 10. ٔٓ
  • 11. ٔٔ ‫الكتاب‬ ‫يدي‬ ‫بين‬ ‫حيـ‬ّ‫الر‬ ‫حمف‬ّ‫الر‬ ‫اهلل‬ ‫بسـ‬َّ‫الس‬ ‫و‬ ‫َّالة‬‫الص‬ ‫و‬ ,‫و‬ ِ‫آلو‬ ‫عمى‬ ‫و‬ ٍ‫د‬َّ‫محم‬ ‫ِّنا‬‫نبي‬ ‫عمى‬ ‫الـ‬‫أجمعيف‬ ِ‫أصحابو‬,‫و‬ :‫بعد‬ ‫ػ‬‫ل‬‫ا‬ ‫د‬ُ‫ع‬َ‫ي‬ ‫لـ‬Web‫بسيط‬ ‫ي‬ِّ‫نص‬ ‫بشكؿ‬ ‫المعمومة‬ ‫تقديـ‬ ‫عمى‬ ً‫ا‬‫ر‬‫مقتص‬ ‫اليوـ‬,‫تقديـ‬ ‫الميـ‬ ‫مف‬ ‫أصبح‬ ‫حيث‬ ‫المحتوى‬‫أسموب‬ ‫و‬ ‫بشكؿ‬‫اإلعالمي‬ ‫إلى‬ ‫يكوف‬ ‫ما‬ ‫أقرب‬,‫ف‬ ,ً‫ال‬‫فع‬ ‫كذلؾ‬ ‫ىو‬ ‫َّما‬‫ب‬‫ر‬ ‫بؿ‬‫أصبح‬ ‫قد‬‫مف‬ ‫النادر‬-‫أيي‬‫ر‬‫ب‬-‫ػ‬‫ل‬‫ا‬ ‫اقع‬‫و‬‫م‬ ‫في‬ ‫تجد‬ ‫أف‬Web‫اليوـ‬-‫منيا‬ ‫الجيدة‬ ‫اقع‬‫و‬‫الم‬ ‫أعني‬ ‫و‬-‫يقدـ‬ ‫ّل‬ ‫ما‬ ‫الشكؿ‬ ‫إلى‬ ‫إضافة‬ ‫ئي‬‫ر‬‫م‬ ‫و‬ ‫ع‬‫مسمو‬ ‫بشكؿ‬ ‫المعمومات‬‫التقميدي‬‫المقروء‬‫و‬‫ناحية‬ ‫مف‬ ‫ىذا‬,‫مف‬ ‫أما‬ ‫ال‬‫ناحية‬‫األ‬‫ػ‬‫ل‬‫ا‬ ‫ر‬َّ‫تطو‬ ‫فقد‬ ‫ى‬‫خر‬Web‫ػ‬‫ل‬‫ػا‬‫ب‬ ‫يعرؼ‬ ‫لما‬ ‫التنظير‬ ‫بدء‬ ‫مع‬ ‫كفيوـ‬ ‫ذاتو‬Web 2.0‫عاـ‬ ٕٓٓٙ‫ظيور‬ ‫إلى‬ ‫بالنتيجة‬ ‫ى‬ّ‫أد‬ ‫ما‬ ‫ىذا‬ ‫و‬ ,‫كانت‬ ‫التي‬ ‫البرمجية‬ ‫المغات‬ ‫و‬ ‫ات‬‫و‬‫األد‬ ‫لتطوير‬ ‫الحاجة‬ ‫ػ‬‫ل‬‫ا‬ ‫اقع‬‫و‬‫م‬ ‫مصممي‬ ‫و‬ ‫ي‬‫مطور‬ ‫يدي‬ ‫بيف‬Web‫العمالء‬ ‫متطمبات‬ ‫تحقيؽ‬ ‫عف‬ ً‫ة‬‫ر‬‫قاص‬ ‫أصبحت‬ ‫التي‬ ‫و‬ ‫ية‬‫ر‬‫عص‬ ‫ويب‬ ‫اقع‬‫و‬‫م‬ ‫بامتالؾ‬ ‫الطموحيف‬‫التي‬ ‫و‬‫ب‬ ‫التقنية‬ ‫أمر‬ ‫ييمو‬ ‫مف‬ ‫قاـ‬ ‫ما‬ ‫عاف‬‫سر‬‫ىا‬‫تطوير‬‫تقديـ‬ ‫و‬ ‫تأقم‬ ‫أكثر‬ ‫و‬ ‫أقوى‬ ‫منيا‬ ‫جديدة‬ ‫ات‬‫ر‬‫إصدا‬‫مع‬ ً‫ا‬‫م‬Web‫اليوـ‬ّ‫ألف‬ ‫ذلؾ‬ ,"‫في‬ ‫النجاح‬ ‫أساس‬ ‫يعتبر‬ ‫التأقمـ‬ ‫ػ‬‫ل‬‫ا‬ ‫عالـ‬Web". ‫ي‬‫الكتاب‬ ‫ىذا‬ ‫ناقش‬‫مف‬ ‫لكؿ‬ ‫إصدار‬ ‫أحدث‬‫لغتي‬HTML‫و‬CSS‫األولى‬ ‫الخطوة‬ ‫اف‬‫ر‬‫تعتب‬ ‫المتاف‬ ُ‫م‬ ‫ألي‬َ‫ط‬‫ر‬ِّ‫و‬Web‫إذ‬‫ح‬‫بشر‬ ‫يقوـ‬‫لغة‬HTML5‫ح‬‫شر‬ ‫خالؿ‬ ‫مف‬ ‫لذلؾ‬ ‫التمييد‬ ‫بعد‬HTML‫التقميدية‬ ‫الصفر‬ ‫مف‬‫و‬‫معايير‬ َّ‫ثـ‬ ‫مف‬XHTMLً‫ا‬‫أيض‬ ‫الصفر‬ ‫مف‬,‫كما‬‫ػ‬‫ل‬ ً‫ال‬َّ‫مفص‬ ً‫ا‬‫شرح‬ ‫الكتاب‬ ‫ىذا‬ ‫ـ‬ِّ‫يقد‬ CSS3‫ح‬‫شر‬ ‫خالؿ‬ ‫مف‬ ‫لذلؾ‬ ‫التمييد‬ ‫بعد‬CSS‫التقميدية‬ً‫ا‬‫أيض‬ ‫الصفر‬ ‫مف‬‫الكتاب‬ ‫ىذا‬ ‫فإف‬ ‫بيذا‬ ‫و‬ , ‫يتألؼ‬‫مف‬‫فصميف‬: ٔ-HTML5‫الفصؿ‬ ‫ىذا‬ ‫يناقش‬ :( ‫الخامس‬ ‫اإلصدار‬‫و‬‫مف‬ )‫األحدث‬‫َّة‬‫النصي‬ ‫البرمجة‬ ‫لغة‬ ‫الت‬‫َّة‬‫شعبي‬HTML‫كتابة‬ ‫عمى‬ ً‫ا‬‫ر‬‫قاد‬ ‫يكوف‬ ‫أف‬ ‫ئو‬‫ر‬‫لقا‬ ‫يضمف‬ ‫و‬ ‫ج‬َّ‫متدر‬ ‫و‬ ‫َّؿ‬‫مفص‬ ‫بشكؿ‬ .‫اهلل‬ ‫بإذف‬ ‫يده‬‫ر‬‫ي‬ ‫الذي‬ ‫بالشكؿ‬ ‫و‬ ‫غبو‬‫ير‬ ‫الذي‬ ‫بالمحتوى‬ ‫ويب‬ ‫صفحات‬
  • 12. ٕٔ ٕ-CSS3‫ا‬ ‫ىذا‬ ‫يناقش‬ :( ‫الثالث‬ ‫اإلصدار‬ ‫يقدميا‬ ‫التي‬ ‫ايا‬‫ز‬‫الم‬ ‫كامؿ‬ ‫لفصؿ‬‫و‬‫مف‬ )‫األحدث‬ ‫َّة‬‫اّلنسيابي‬ ‫األنماط‬ ‫اؽ‬‫ر‬‫أو‬CSS‫مف‬ ‫و‬ ‫بسيط‬ ‫بشكؿ‬‫يوـ‬,‫عمى‬ ً‫ا‬‫ر‬‫قاد‬ ‫يكوف‬ ‫أف‬ ‫ئو‬‫ر‬‫قا‬ ‫يعد‬ ‫و‬ ‫تجميؿ‬‫في‬ ‫مو‬َّ‫قد‬ ‫الذي‬ ‫المحتوى‬‫الويب‬ ‫صفحات‬.‫ؿ‬َّ‫األو‬ ‫الفصؿ‬ ‫في‬ ‫كتابتيا‬ ‫ـ‬َّ‫تعم‬ ‫التي‬ ٖ-‫عف‬ ‫الحديث‬ ‫يكتمؿ‬ ‫كي‬‫لمويب‬ ‫البرمجة‬‫العميؿ‬ ‫طرؼ‬ ‫مف‬Client Side‫أف‬ ‫يجب‬ ‫كاف‬ ‫فصؿ‬ ‫ىناؾ‬ ‫يكوف‬‫ثالث‬‫لغة‬ ‫عف‬ ‫يتحدث‬Java Script‫الحداثة‬ ‫أنصار‬ ‫مف‬ ‫ألنني‬ ‫و‬ ‫لكف‬ ‫و‬ )‫السيولة‬ ‫(و‬‫كتابي‬ ‫اءة‬‫ر‬‫بق‬ ‫يز‬‫ز‬‫الع‬ ‫ئ‬‫القار‬ ‫فأنصح‬ ‫البرمجية‬ ‫بالتقنيات‬ ‫يتعمؽ‬ ‫فيما‬"‫ـ‬َّ‫تعم‬ jQuery‫في‬ٕٔٓ‫دقيقة‬"‫لغة‬ ‫عف‬ ‫يتحدث‬ ‫جع‬‫مر‬ ‫أي‬ ‫أو‬jQuery‫َّط‬‫مبس‬ ‫و‬ ‫اضح‬‫و‬ ‫بشكؿ‬ ً‫ّل‬‫و‬‫أ‬ ‫الكتاب‬ ‫ىذا‬ ‫اءة‬‫ر‬‫ق‬ ‫بعد‬‫ألف‬ ,jQuery‫لمغة‬ ‫ي‬‫العصر‬ ‫البديؿ‬ ‫ىي‬Java Script‫أيي‬‫ر‬‫ب‬. ‫ف‬ ‫الكتاب‬ ‫ىذا‬ ‫في‬ ‫األفكار‬ ‫عرض‬ ‫يقة‬‫ر‬‫ط‬ ‫عف‬ ‫ا‬ّ‫أم‬‫أجعم‬ ‫كي‬ ‫اجتيدت‬ ‫و‬ ‫حاولت‬ ‫قد‬‫يا‬‫غير‬‫ّل‬ ‫و‬ ‫ة‬َّ‫ممم‬ ‫و‬ ‫دة‬َّ‫ق‬‫مع‬‫ّل‬ً‫ا‬‫ر‬‫كثي‬ ‫الذي‬ ‫المتعب‬ ‫بالمحتوى‬ ‫شبيية‬‫عانيت‬ ‫ما‬‫منو‬‫البرمجة‬ ‫لغات‬ ‫تناقش‬ ‫التي‬ ‫الكتب‬ ‫في‬ ‫لألسؼ‬‫أف‬ ‫أقوؿ‬ ‫أف‬ ‫يمكنني‬ ‫و‬‫ى‬‫الكتاب‬ ‫ذا‬َّ‫البرمجي‬ ‫األسطر‬ ‫ات‬‫ر‬‫عش‬ ‫ر‬ِّ‫يفج‬ ‫ّل‬ً‫ة‬‫دفع‬ ‫المفيومة‬ ‫غير‬ ‫ة‬ ,‫ة‬‫ر‬‫الفك‬ ‫عرض‬ ‫في‬ ‫المطموب‬ ‫مف‬ ‫أكثر‬ ‫يطيؿ‬ ‫ّل‬ ‫و‬َّ‫أن‬ ‫كما‬ ,‫ليا‬ ‫توضيح‬ ‫دوف‬ ‫ئو‬‫ر‬‫قا‬ ‫وجو‬ ‫في‬ ً‫احدة‬‫و‬‫لكنو‬ ‫باختصار‬.‫فتيا‬‫ر‬‫مع‬ ‫تتوجب‬ ‫التي‬ ‫انب‬‫و‬‫الج‬ ‫مف‬ ‫جانب‬ ‫أي‬ ‫يغفؿ‬ ‫أف‬ ‫دوف‬ ‫فقط‬ ‫قولو‬ ‫يجب‬ ‫ما‬ ‫يقوؿ‬ ً‫ا‬‫ختام‬‫و‬ ‫العمؿ‬ ‫ىذا‬ ‫َّؿ‬‫يتقب‬ ‫أف‬ ‫اهلل‬ ‫أسأؿ‬‫أف‬‫يكتبو‬ ‫و‬ ‫فيو‬ ‫يبارؾ‬ً‫ة‬‫صدق‬ً‫ة‬‫ي‬‫ر‬‫جا‬‫مف‬‫باب‬‫ينتفع‬ ‫الذي‬ ‫العمـ‬ .‫ـ‬ُّ‫التعم‬ ‫عمى‬ ‫الصبر‬ ‫و‬ ‫الحفظ‬ ‫و‬ ‫الفيـ‬ ‫ئو‬‫ر‬‫قا‬ ‫يميـ‬ ‫أف‬ ‫و‬ ‫بو‬ ‫صالح‬ ‫ِّد‬‫سي‬ ‫ـ.مختار‬ ‫البوكماؿ‬ٕٛ/ٛ/ٕٓٔٔ
  • 14. ٔٗ
  • 15. ٔ٘ ‫مقدمة‬ ‫لغة‬ ‫الفصؿ‬ ‫ىذا‬ ‫يناقش‬HTML5‫ّل‬ ‫نا‬ّ‫ألن‬ ‫و‬ ,‫الويب‬ ‫اقع‬‫و‬‫م‬ ‫إنشاء‬ ‫في‬ ‫األساس‬ ‫حجر‬ ‫تعتبر‬ ‫التي‬ ‫عف‬ ‫نتحدث‬ ‫أف‬ ‫يمكف‬HTML5‫لغتي‬ ‫الفصؿ‬ ‫ىذا‬ ‫فسيناقش‬ ً‫ة‬‫ر‬‫مباش‬HTML‫و‬XHTMLً‫ّل‬‫و‬‫أ‬,‫و‬ ‫مع‬ ‫البداية‬‫لغة‬HTML. ‫هي‬ ‫ما‬HTML‫؟‬ َّ‫إف‬HTML‫اختصار‬ ‫ىي‬abbreviation‫الجممة‬ ‫مف‬ ‫األولى‬ ‫الحروؼ‬Hyper Text Markup Language‫وصؼ‬ ‫(لغة‬ ‫فية‬‫ر‬‫ح‬ ‫غير‬ ‫بترجمة‬ ‫تعني‬ ‫التي‬ ‫و‬‫الويب‬ ‫صفحات‬)ٔ ,‫لغة‬ ‫ليست‬ ‫ىي‬ ‫و‬ ‫َّة‬‫وصفي‬ ‫لغة‬ ‫ىي‬ ‫بؿ‬ ,‫ّل‬ ,‫َّة‬‫برمجي‬Markup Language,َّ‫ألف‬HTML‫تستخدـ‬‫مف‬ ‫مجموعة‬ ‫الوسوـ‬Tags‫لوصؼ‬‫الويب‬ ‫صفحة‬. ‫الوسوـ‬ ‫ا‬َّ‫أم‬Tagsً‫ا‬‫مسبق‬ ‫محددة‬ ‫أحرؼ‬ ‫أو‬ ‫كممات‬ ‫فيي‬Keywords‫تكوف‬ ‫و‬ ,‫َّة‬‫خاص‬ ‫معاني‬ ‫تحمؿ‬ ‫الشكؿ‬ ‫مف‬ ‫قوسيف‬ ‫بيف‬ ‫ة‬‫ر‬‫محصو‬< >‫مثؿ‬<b>‫و‬<html>‫شكؿ‬ ‫عمى‬ ‫الغالب‬ ‫في‬ ‫الوسوـ‬ ‫تأتي‬ , ‫مثؿ‬ ‫اج‬‫و‬‫أز‬<b>‫و‬</b>‫ؿ‬َّ‫األو‬ ‫الوسـ‬ ‫يدعى‬ ,<b>‫البداية‬ ‫بوسـ‬Begin Tag‫الفتح‬ ‫وسـ‬ ‫أو‬ Opening Tag‫الثا‬ ‫الوسـ‬ ‫يدعى‬ ‫و‬ ,‫ني‬</b>‫النياية‬ ‫بوسـ‬End Tag‫اإلغالؽ‬ ‫وسـ‬ ‫أو‬ Closing Tag. ‫مستندات‬ ‫كتابة‬ ‫يتـ‬HTML‫(مثؿ‬ ‫بسيط‬ ‫نصي‬ ‫محرر‬ ‫أي‬ ‫باستخداـ‬notepad‫ـ‬ِّ‫متقد‬ ‫أو‬ )‫(مثؿ‬ DreamWaver‫أو‬Visual Studioً‫ا‬‫امتداد‬ ‫تحمؿ‬ ‫ممفات‬ ‫في‬ ‫ينيا‬‫ز‬‫تخ‬ ‫يتـ‬ ‫و‬ ,)extension‫مف‬ : ‫التالييف‬ ‫اّلمتداديف‬.html‫أو‬.htm,‫و‬‫بالطبع‬‫ّل‬‫يوجد‬‫أي‬‫فرؽ‬‫بينيما‬. ٔ ‫قبمي‬ ‫أحد‬ ‫قاـ‬ ‫إف‬ ‫أعرؼ‬ ‫ّل‬.‫األنسب‬ ‫الترجمة‬ ‫أنيا‬ ‫أشعر‬ ‫ني‬ّ‫لكن‬ ‫يقة‬‫ر‬‫الط‬ ‫بيذه‬ ‫بترجمتيا‬
  • 16. ٔٙ ‫تتكوف‬‫مستندات‬HTML‫إلى‬ ‫باإلضافة‬ ‫عادي‬ ‫نصي‬ ‫محتوى‬ ‫مف‬ ‫أساسي‬ ‫بشكؿ‬‫وسوـ‬ ‫مف‬ ‫مجموعة‬ HTML,‫مستندات‬ ‫فإف‬ ‫الحقيقة‬ ‫في‬ ‫و‬HTML)‫الويب‬ ‫ػ(صفحات‬‫ب‬ ‫تدعى‬Web Pages,‫و‬‫يتـ‬ ‫استخداـ‬‫الويب‬ ‫مستعرض‬ ‫باسـ‬ ‫نامج‬‫ر‬‫الب‬ ‫ىذا‬ ‫يعرؼ‬ ‫المستندات‬ ‫ىذه‬ ‫اءة‬‫ر‬‫لق‬ ‫خاص‬ ‫نامج‬‫ر‬‫ب‬Web Browser‫أمثمتو‬ ‫مف‬ ‫و‬Internet Explorer‫و‬Firefox‫و‬Google chrome..‫إلخ‬. ‫مستندات‬ ‫اءة‬‫ر‬‫ق‬ ‫ىو‬ ‫الويب‬ ‫مستعرض‬ ‫مف‬ ‫اليدؼ‬HTML‫بمعنى‬ ,‫ويب‬ ‫صفحات‬ ‫بشكؿ‬ ‫عرضيا‬ ‫و‬ ‫وسوـ‬ ‫يعرض‬ ‫ّل‬ ‫الويب‬ ‫مستعرض‬ ‫أف‬HTML‫إلنتاج‬ ‫يستخدميا‬ ‫و‬َّ‫لكن‬ ‫و‬ ‫مباشر‬ ‫بشكؿ‬ ‫كنصوص‬ ‫المو‬ ‫المحتوى‬ ‫و‬ ‫بالشكؿ‬ ‫ويب‬ ‫صفحة‬‫مستند‬ ‫في‬ ‫صوفيف‬HTML. ‫في‬ ‫أبدأ‬ ‫كيف‬‫تعمم‬‫مستندات‬ ‫كتابة‬HTML‫؟‬ ‫في‬ ‫تبدأ‬ ‫لكي‬ ‫تحتاجو‬ ‫ما‬ ‫كؿ‬‫تعمـ‬‫مستندات‬ ‫كتابة‬HTML‫(مثؿ‬ ‫نصوص‬ ‫محرر‬ ‫ىو‬Notepad‫و‬ ) ‫(مثؿ‬ ‫ويب‬ ‫مستعرض‬Internet Explorer)‫خطوة‬ ‫التعمـ‬ ‫و‬ ‫التالية‬ ‫ات‬‫ر‬‫الفق‬ ‫اءة‬‫ر‬‫ق‬ ‫يمكنؾ‬ ‫ذلؾ‬ ‫بعد‬ , ‫ل‬ ‫يقة‬‫ر‬‫ط‬ ‫أفضؿ‬ َّ‫أف‬ ‫لؾ‬ ‫أؤكد‬ ‫و‬ ‫بخطوة‬‫متعمـ‬–‫أيي‬‫ر‬‫ب‬-‫ستصادفؾ‬ ‫التي‬ ‫األمثمة‬ ‫كتابة‬ ‫ىي‬ً‫ا‬‫ّلحق‬‫بشكؿ‬ ‫مباشر‬.‫الويب‬ ‫مستعرض‬ ‫باستخداـ‬ ‫ىا‬‫اختبار‬ َّ‫ثـ‬ ‫مف‬ ‫و‬ ‫النصوص‬ ‫محرر‬ ‫باستخداـ‬ ‫لغة‬ ‫في‬ ‫ل‬ َّ‫األو‬ ‫المثال‬HTML ‫صفحة‬ ‫أوؿ‬ ‫بكتابة‬ ‫اآلف‬ ‫سنقوـ‬HTML:‫التالية‬ ‫ات‬‫و‬‫الخط‬ ‫باتباع‬ ً‫ا‬‫مع‬ ‫نقوـ‬ً‫ّل‬‫و‬‫أ‬‫ة‬‫ر‬‫المفك‬ ‫ليكف‬ ‫و‬ ‫النصوص‬ ‫ات‬‫ر‬‫محر‬ ‫أحد‬ ‫بفتح‬Notepad‫نكتب‬ ‫و‬ ‫المثاؿ‬ ‫سبيؿ‬ ‫عمى‬ :‫التالية‬ ‫ة‬‫ر‬‫الشيف‬ <html> <head> <title> My first HTML page
  • 17. ٔٚ </title> </head> <body> <p> Welcome to my first HTML page! </p> </body> </html> ‫باسـ‬ ‫الممؼ‬ ‫بحفظ‬ ‫نقوـ‬ َّ‫ثـ‬firstPage.html ‫الشكل‬1:‫ة‬‫شيفر‬ ‫أول‬ ‫كتابة‬HTML‫الممف‬ ‫حفظ‬ ‫و‬ ‫ة‬‫المفكر‬ ‫برنامج‬ ‫في‬ ‫الالحقة‬ ‫عف‬ ‫مختمفة‬ ‫بالحقة‬ ‫الممؼ‬ ‫لحفظ‬ : ‫ممحوظة‬.txt,‫يقتاف‬‫ر‬‫ط‬ ‫ىناؾ‬‫الممفات‬ ‫جميع‬ ‫الخيار‬ ‫نختار‬ ‫أف‬ ‫األولى‬ *.*‫ػ‬‫ك‬ ‫حفظ‬ ‫المنسدلة‬ ‫القائمة‬ ‫مف‬Save as type‫نك‬ ‫ثـ‬ ‫الممؼ‬ ‫اسـ‬ ‫أسفؿ‬ ‫ة‬‫ر‬‫الصو‬ ‫في‬ ‫ة‬‫ر‬‫الظاى‬‫و‬ ‫الممؼ‬ ‫اسـ‬ ‫تب‬ ,‫عادي‬ ‫بشكؿ‬ ‫ّلحقتو‬‫أف‬ ‫فيي‬ ً‫ا‬َّ‫شخصي‬ ‫ميا‬ِّ‫أفض‬ ‫التي‬ ‫و‬ ‫الثانية‬ ‫ا‬َّ‫أم‬‫عالمتي‬ ‫بيف‬ ‫المطموبة‬ ‫ّلحقتو‬ ‫مع‬ ‫الممؼ‬ ‫اسـ‬ ‫نضع‬ ‫اقتباس‬‫مزدوجتيف‬‫أع‬ ‫ة‬‫ر‬‫الصو‬ ‫في‬ ‫ح‬َّ‫موض‬ ‫ىو‬ ‫كما‬ ‫حفظ‬ ‫نختار‬ ‫و‬.‫اله‬
  • 18. ٔٛ ‫اآلف‬‫و‬‫باّلسـ‬ ‫الممؼ‬ ‫بحفظ‬ ‫قمنا‬ ‫أف‬ ‫بعد‬firstPage.html‫أحد‬ ‫باستخداـ‬ ‫اضو‬‫ر‬‫باستع‬ ‫نقوـ‬ ‫مستعرضات‬‫الويب‬‫ليكف‬ ‫و‬Internet Explorer 8‫النيائي‬ ‫الشكؿ‬ ‫لنشاىد‬ ‫المثاؿ‬ ‫سبيؿ‬ ‫عمى‬ :‫كمايمي‬ ‫لمصفحة‬ ‫الشكل‬2:‫النهائي‬ ‫الشكل‬‫المستعرض‬ ‫في‬‫باستخدام‬ ‫مكتوبة‬ ‫صفحة‬ ‫ل‬ َّ‫ألو‬HTML ‫لغة‬ ‫باستخداـ‬ ‫األولى‬ ‫صفحتنا‬ ‫بكتابة‬ ‫قمنا‬ ‫فقد‬ ‫ى‬‫تر‬ ‫كما‬HTML‫نص‬ ‫عمى‬ ‫تحتوي‬ ‫الصفحة‬ ‫ىذه‬ ‫و‬ ‫النص‬ ‫ىو‬ ‫بسيط‬ ‫ترحيب‬Welcome to my first HTML page!,‫باستخداـ‬ ‫النص‬ ‫ىذا‬ ‫توليد‬ ‫تـ‬ ‫الخاص‬ ‫الوسـ‬p‫البا‬ ‫ستكوف‬ ‫بساطتيا‬ ‫عمى‬ ‫الصفحة‬ ‫ىذه‬ َّ‫فإف‬ ‫ي‬‫ر‬ّ‫بتصو‬ ‫و‬‫لغة‬ ‫إلى‬ ‫لمدخوؿ‬ ‫اسع‬‫و‬‫ال‬ ‫ب‬ HTMLْ‫إف‬.‫التركيز‬ ‫مف‬ ‫بقميؿ‬ ‫التالية‬ ‫ات‬‫ر‬‫الفق‬ ‫أت‬‫ر‬‫ق‬ ‫عناصر‬HTML ‫صفحات‬ ‫مف‬ ‫صفحة‬ ‫كؿ‬ ‫تتكوف‬HTML‫العناصر‬ ‫مف‬ ‫مجموعة‬ ‫مف‬Elements‫إنشاؤىا‬ ‫يتـ‬ ‫الوسوـ‬ ‫باستخداـ‬Tags‫الوسوـ‬ ‫و‬ً‫ا‬‫سابق‬ ‫قمنا‬ ‫كما‬‫أحرؼ‬ ‫عف‬ ‫ة‬‫ر‬‫عبا‬‫أ‬‫كممات‬ ‫و‬‫خاصة‬ ‫معاني‬ ‫تحمؿ‬ ‫ال‬ ‫لمستعرض‬ ‫بالنسبة‬‫َّة‬‫ي‬‫ز‬‫إنجمي‬ ‫لكممات‬ ‫ات‬‫ر‬‫اختصا‬ ‫عف‬ ‫ة‬‫ر‬‫عبا‬ ‫الوسوـ‬ ‫أسماء‬ ‫تكوف‬ ‫ما‬ ً‫ا‬‫غالب‬ ‫و‬ ‫ويب‬ ‫فالوسـ‬<p>‫النصوص‬ ‫مقاطع‬ ‫عرض‬ ‫عف‬ ‫المسؤوؿ‬ ‫العنصر‬ ‫إلنشاء‬ ‫يستخدـ‬ ً‫ال‬‫مث‬Paragraphs ‫صفحات‬ ‫ضمف‬HTML‫و‬‫الذي‬‫سيتـ‬‫عممو‬ ‫مناقشة‬‫مع‬‫عمؿ‬‫في‬ ‫تفصيمي‬ ‫بشكؿ‬ ‫الوسوـ‬ ‫باقي‬ ‫التالية‬ ‫الصفحات‬. ‫الشكؿ‬ ‫مف‬ ‫اس‬‫و‬‫أق‬ ‫بيف‬ ‫الوسوـ‬ ‫تحصر‬< >‫الوسـ‬ ‫أمثمتيا‬ ‫مف‬ ‫و‬<html>‫الوسـ‬ ‫و‬<head>‫و‬ ‫الوسـ‬<title>‫الوسـ‬ ‫و‬<body>‫الوسـ‬ ‫و‬<p>.
  • 19. ٜٔ ‫عناصر‬ ‫مف‬ ‫عنصر‬ ‫لكؿ‬HTML‫بداية‬ ‫وسـ‬Begin Tag‫نياية‬ ‫وسـ‬ ‫و‬End Tag‫وسوـ‬ ‫تكوف‬ ‫القوسيف‬ ‫بيف‬ ‫ة‬‫ر‬‫محصو‬ ‫البداية‬< >‫ة‬‫ر‬‫محصو‬ ‫فتكوف‬ ‫النياية‬ ‫وسوـ‬ ‫ا‬َّ‫أم‬ً‫ا‬‫مضاف‬ ‫السابقيف‬ ‫القوسيف‬ ‫بيف‬ ‫المائؿ‬ ‫الخط‬ ‫رمز‬ ‫إلييما‬/‫ػ‬‫ب‬ ‫المعروؼ‬Slash‫بالشكؿ‬</ >‫الوسـ‬ ‫النياية‬ ‫وسوـ‬ ‫أمثمة‬ ‫مف‬ ‫و‬ </html>‫الوسـ‬ ‫و‬</head>‫الوسـ‬ ‫و‬</title>‫الوسـ‬ ‫و‬</body>‫الوسـ‬ ‫و‬</p>‫كؿ‬ ‫يحوي‬ ‫و‬ ‫عناصر‬ ‫مف‬ ‫عنصر‬HTML‫لعرض‬ ً‫ا‬َّ‫عادي‬ ً‫ا‬َّ‫نص‬ ‫نيايتو‬ ‫و‬ ‫بدايتو‬ ‫وسمي‬ ‫بيف‬‫و‬‫العنصر‬ ‫فعؿ‬ ‫(كما‬p )‫السابؽ‬ ‫مثالنا‬ ‫في‬‫عناصر‬ ‫مف‬ ‫آخر‬ ‫عدد‬ ‫أي‬ ‫يحوي‬ ‫أف‬ ‫يمكف‬ ‫و‬HTML‫تيب‬‫ر‬‫بت‬ ‫اـ‬‫ز‬‫اّللت‬ ‫شرط‬ ‫متناظر‬‫ل‬‫وسـ‬ ‫كتابة‬ ‫فيتـ‬ ‫تيب‬‫ر‬‫الت‬ ‫اعى‬‫ر‬ُ‫ي‬ ‫أف‬ ‫يجب‬ ‫النياية‬ ‫وسوـ‬ ‫كتابة‬ ‫فعند‬ ,‫البداية‬ ‫و‬ ‫النياية‬ ‫وسوـ‬ ‫األ‬ )‫نياية‬ ‫وسـ‬ ‫لو‬ ‫ليس‬ ‫(الذي‬ ‫المنتيي‬ ‫غير‬ ‫البداية‬ ‫بوسـ‬ ‫الخاص‬ ‫النياية‬‫أف‬ ‫حيف‬ ‫ففي‬ ,‫فاألقرب‬ ‫قرب‬ :ً‫ا‬‫صحيحي‬ ‫يعتبر‬ ‫التالي‬ ‫تيب‬‫ر‬‫الت‬ <html> <body> <p> !‫اٌّسزؼشع‬ ٟ‫ف‬ ٗ‫ػشػ‬ ُ‫س١ز‬ ٞ‫ػبد‬ ‫ٔض‬ </p> </body> </html> ‫ؿ‬َّ‫األو‬ ‫النياية‬ ‫وسـ‬ َّ‫ألف‬</p>‫ىو‬ ‫و‬ ‫منتيي‬ ‫غير‬ ‫بداية‬ ‫وسـ‬ ‫أقرب‬ ‫إلنياء‬ ‫جاء‬<p>َّ‫ثـ‬ ,‫مثالنا‬ ‫في‬ ‫النياية‬ ‫وسـ‬ ‫جاء‬</body>‫ىو‬ ‫و‬ ‫منتيي‬ ‫غير‬ ‫بداية‬ ‫وسـ‬ ‫أقرب‬ ‫إلنياء‬<body>‫وسـ‬ ‫جاء‬ َّ‫ثـ‬ , ‫النياية‬</html>‫ىو‬ ‫و‬ ‫منتيي‬ ‫غير‬ ‫بداية‬ ‫وسـ‬ ‫أقرب‬ ‫إلنياء‬<html>. :ً‫ا‬‫خاطئ‬ ‫يعتبر‬ ‫التالي‬ ‫تيب‬‫ر‬‫الت‬ َّ‫فإف‬ <html> <body>
  • 20. ٕٓ <p> !‫اٌّسزؼشع‬ ٟ‫ف‬ ٗ‫ػشػ‬ ُ‫س١ز‬ ٞ‫ػبد‬ ‫ٔض‬ </body> </html> </p> ‫النياية‬ ‫وسـ‬ ‫ألف‬</body>‫الوسـ‬ ‫إلنياء‬ ‫جاء‬<body>‫المنتيي‬ ‫غير‬ ‫األقرب‬ ‫الوسـ‬ ‫يكف‬ ‫لـ‬ ‫الذي‬ ‫النياية‬ ‫وسمي‬ ‫مع‬ ‫تكررت‬ ‫نفسيا‬ ‫الحالة‬ ‫و‬ ‫لألسؼ‬</html>‫و‬</p>. ‫الخالصة‬‫ت‬ ‫ّل‬ :َ‫نس‬‫كتابة‬‫تيب‬‫ر‬‫ت‬ ِ‫ع‬‫ا‬‫ر‬ ‫و‬ ‫اإلغالؽ‬ ‫وسـ‬.‫اإلغالؽ‬ ‫وسوـ‬ ‫اغات‬‫ر‬‫الف‬White Spaces ‫لغة‬ ‫في‬HTML‫(مثؿ‬ ‫اغات‬‫ر‬‫الف‬ ‫لمحارؼ‬ ‫قيمة‬ ‫أي‬ ‫يوجد‬ ‫ّل‬Space‫و‬Tab‫اض‬‫ر‬‫استع‬ ‫عند‬ )‫إلخ‬ .. ‫مستعرض‬ ‫باستخداـ‬ ‫الصفحات‬‫الويب‬‫و‬ ‫ة‬‫ر‬‫الشيف‬ ‫تيب‬‫ر‬‫ت‬ ‫لغرض‬ ‫اغات‬‫ر‬‫الف‬ ‫محارؼ‬ ‫تستخدـ‬ ‫ما‬َّ‫إن‬ ‫و‬ ‫ة‬‫ر‬‫شيف‬ ‫اءة‬‫ر‬‫فق‬ ,‫فقط‬ ‫أوضح‬ ‫بشكؿ‬ ‫مقروءة‬ ‫جعميا‬HTML:‫المثاؿ‬ ‫سبيؿ‬ ‫عمى‬ ‫التالية‬ <html> <body> <h1> Hi! </h1> </body> </html> ‫ة‬‫ر‬‫شيف‬ ‫اءة‬‫ر‬‫ق‬ ‫مف‬ ‫بكثير‬ ‫أسيؿ‬HTML:‫التالية‬ <html><body><h1>Hi!</h1></body></html>
  • 21. ٕٔ ‫يما‬َّ‫أن‬ ‫مع‬‫متماثمتاف‬.‫الويب‬ ‫مستعرض‬ ‫باستخداـ‬ ‫اضيما‬‫ر‬‫استع‬ ‫عند‬ ً‫ا‬‫تمام‬ ‫ضغطة‬ ‫بمقدار‬ ‫متماثميف‬ ‫نياية‬ ‫و‬ ‫بداية‬ ‫وسمي‬ ‫بيف‬ ‫الموجود‬ ‫المحتوى‬ ‫كؿ‬ ‫احة‬‫ز‬‫إ‬ ‫الجيدة‬ ‫َّة‬‫البرمجي‬ ‫العادات‬ ‫مف‬ : ‫فائدة‬ Tab‫اغات‬‫ر‬‫ف‬ ‫ثالث‬ ‫بمقدار‬ ‫احتيا‬‫ز‬‫إ‬ ‫ؿ‬ِّ‫يفض‬ ‫البعض‬ ‫و‬‫مفتاح‬ ‫عمى‬ ‫ضغطات‬ ‫(ثالث‬Space). ‫لعناصر‬ ‫العام‬ ‫الشكل‬HTML ‫وصؼ‬ ‫يتـ‬‫عناصر‬HTML‫لعنصر‬ ‫العاـ‬ ‫الشكؿ‬ ‫نعرض‬ ‫فيمايمي‬ ‫و‬ ,‫الوسوـ‬ ‫باستخداـ‬HTML: ‫عنصر‬ ‫يبدأ‬HTML‫البداية‬ ‫بوسـ‬Begin Tag. ‫عنصر‬ ‫ينتيي‬HTML‫النياية‬ ‫بوسـ‬End Tag. ‫عنصر‬ ‫محتوى‬ ‫يدعى‬ ‫النياية‬ ‫و‬ ‫البداية‬ ‫وسمي‬ ‫بيف‬ ‫كتابتو‬ ‫يتـ‬ ‫ما‬ ‫كؿ‬HTML‫ىناؾ‬ ‫أف‬ ً‫ا‬‫عمم‬ ‫العناصر‬ ‫بعض‬‫التي‬‫محتوى‬ ‫أي‬ ‫تحوي‬ ‫ّل‬‫المحتوى‬ ‫عديمة‬ ‫تسمى‬ ‫التي‬ ‫و‬. ‫يندمج‬‫وسم‬‫ا‬‫النياية‬ ‫و‬ ‫البداية‬‫احد‬‫و‬ ‫وسـ‬ ‫في‬‫في‬‫حالة‬.‫المحتوى‬ ‫عديمة‬ ‫العناصر‬ ‫عناصر‬ ‫ألغمب‬ ‫الخصائص‬ ‫مف‬ ‫مجموعة‬ ‫ير‬‫ر‬‫تم‬ ‫يتـ‬HTML‫يؽ‬‫ر‬‫ط‬ ‫عف‬ ‫البداية‬ ‫وسـ‬ ‫في‬ ‫اصفات‬‫و‬‫ال‬Attributes. :‫ممحوظة‬,ً‫ا‬‫أبد‬ ‫و‬ ً‫ا‬‫دائم‬‫ب‬ ‫قـ‬‫عناصر‬ ‫كتابة‬HTML‫ة‬‫ر‬‫الصغي‬ ‫بحالتيا‬ ‫َّة‬‫ي‬‫ز‬‫اإلنجمي‬ ‫باألحرؼ‬Lower Case. :‫التالية‬ ‫األمثمة‬ ‫لنشاىد‬ ‫النهاية‬ ‫وسم‬‫العنصر‬ ‫محتوى‬‫البداية‬ ‫وسم‬ </p>Welcome to my website.<p> </a>Go to index<a href="index.htm"> <hr /> ‫سطر‬ ‫كؿ‬ ‫ؿ‬ِّ‫ث‬‫يم‬‫السابؽ‬ ‫الجدوؿ‬ ‫في‬‫عناصر‬ ‫مف‬ ً‫ا‬‫ر‬‫عنص‬HTML‫الصفحة‬ ‫في‬‫ُّمي‬‫تخي‬ ‫بشكؿ‬, ‫بالوسـ‬ ‫يبدأ‬ ‫ؿ‬َّ‫األو‬ ‫فالعنصر‬<p>‫بالوسـ‬ ‫ينتيي‬ ‫و‬</p>‫و‬‫يحوي‬‫النصي‬ ‫المحتوى‬Welcome to
  • 22. ٕٕ my website‫بالوسـ‬ ‫الثاني‬ ‫العنصر‬ ‫يبدأ‬ ‫بينما‬<a href="index.htm">‫بالوسـ‬ ‫ينتيي‬ ‫و‬</a> ‫و‬‫يحوي‬‫النصي‬ ‫المحتوى‬Go to index‫القيمة‬ ‫إسناد‬ ‫مع‬index.htm‫اصفتو‬‫و‬ ‫إلى‬href‫في‬ , ‫عديـ‬ ‫الثالث‬ ‫العنصر‬ َّ‫أف‬ ‫حيف‬‫احد‬‫و‬ ‫وسـ‬ ‫في‬ ‫النياية‬ ‫و‬ ‫البداية‬ ‫وسمي‬ ‫اتحاد‬ ‫مف‬ ‫يتكوف‬ ‫المحتوى‬ ‫بالشكؿ‬<hr />. ‫لصفحات‬ ‫العام‬ ‫الشكل‬HTML ‫صفحة‬ ‫كؿ‬ ‫تتكوف‬HTML:‫مناطؽ‬ ‫ثالث‬ ‫مف‬ ‫الصفحة‬ ‫جسد‬ ‫منطقة‬Body Section: ‫وسمي‬ ‫بيف‬ ‫ة‬‫ر‬‫المحصو‬ ‫المنطقة‬ ‫ىي‬ ‫و‬<body>‫و‬</body>‫التي‬ ‫ىي‬ ‫المنطقة‬ ‫ىذه‬ ‫و‬ ‫لمصفحة‬ ‫الظاىر‬ ‫المحتوى‬ ‫ؿ‬ِّ‫ث‬‫تم‬ ‫التي‬ ‫العناصر‬ ‫جميع‬ ‫تضـ‬ ‫و‬ ‫لمصفحة‬ ‫النيائي‬ ‫الشكؿ‬ ‫تنتج‬ ‫مستعرض‬ ‫في‬ ‫سيظير‬ ‫الذي‬ ‫و‬‫الويب‬‫بالطبع‬ ‫و‬ ‫الصفحة‬ ‫ىذه‬ ‫اض‬‫ر‬‫استع‬ ‫عند‬‫ء‬‫الجز‬ ‫فإف‬ ‫عناصر‬ ‫مف‬ ‫األكبر‬HTML.‫المنطقة‬ ‫ىذه‬ ‫في‬ ‫سيكوف‬ ‫الصفحة‬ ‫أس‬‫ر‬ ‫منطقة‬Head Section: ‫وسمي‬ ‫بيف‬ ‫ة‬‫ر‬‫المحصو‬ ‫المنطقة‬ ‫ىي‬ ‫و‬<head>‫و‬</head>‫تحوي‬ ‫المنطقة‬ ‫ىذه‬ ‫و‬ ‫عناصر‬ ‫مف‬ ‫مجموعة‬HTML‫اض‬‫ر‬‫استع‬ ‫عند‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫يظير‬ ‫ّل‬ ‫أغمبيا‬ ‫ا‬ ‫لكف‬ ‫و‬ ‫الصفحة‬‫ليذه‬ ‫ئيسية‬‫ر‬‫ال‬ ‫لميمة‬‫ىي‬ ‫المنطقة‬‫المحتوى‬ ‫َّة‬‫ماىي‬ ‫عف‬ ‫معمومات‬ ‫إعطاء‬ ‫تستخدميا‬ ‫التي‬ ‫و‬ ‫ى‬‫األخر‬ ‫ة‬‫ر‬‫الظاى‬ ‫غير‬ ‫المعمومات‬ ‫لبعض‬ ‫إضافة‬ ‫بالصفحة‬ ‫الموجود‬ .‫الغالب‬ ‫في‬ ‫البحث‬ ‫و‬ ‫األرشفة‬ ‫أجؿ‬ ‫مف‬ ‫البحث‬ ‫محركات‬ ‫األـ‬ ‫المنطقة‬ٕ : ٕ ‫المطروحة‬ ‫ة‬‫ر‬‫الفك‬ ‫لتبسيط‬ ‫شخصي‬ ‫اجتياد‬ ‫ىو‬ ‫َّما‬‫إن‬ ‫و‬ ‫أتيا‬‫ر‬‫ق‬ ‫التي‬ ‫اجع‬‫ر‬‫الم‬ ‫مف‬ ‫أي‬ ‫في‬ ‫المصطمح‬ ‫ىذا‬ ‫يرد‬ ‫لـ‬)‫أيي‬‫ر‬‫(ب‬.
  • 23. ٕٖ ‫وسمي‬ ‫بيف‬ ‫ة‬‫ر‬‫المحصو‬ ‫المنطقة‬ ‫ىي‬ ‫و‬<html>‫و‬</html>‫المنطقة‬ ‫ىي‬ ‫المنطقة‬ ‫ىذه‬ ‫و‬ ‫التي‬‫فيي‬ ‫بيذا‬ ‫و‬ ‫الجسد‬ ‫و‬ ‫أس‬‫ر‬‫ال‬ ‫منطقتي‬ ‫تضـ‬ ‫التي‬ ‫ىي‬ ‫و‬ ‫الصفحة‬ ‫نياية‬ ‫و‬ ‫بداية‬ ‫تحدد‬ )‫(صفحة‬ ‫مستند‬ ‫كامؿ‬ ‫تضـ‬HTML. ‫مستند‬ ‫ألي‬ ‫العاـ‬ ‫الشكؿ‬ ‫يكوف‬ ‫بيذا‬ ‫و‬HTML:‫كمايمي‬ <html> <head> ‫ٕ٘ب‬ ْٛ‫س١ى‬ ‫اٌظب٘ش‬ ‫غ١ش‬ ‫اٌشأط‬ ‫ِٕـمخ‬ ٜٛ‫ِحز‬ </head> <body> ٟ‫إٌٙبئ‬ ‫اٌظفحخ‬ ٜٛ‫ِحز‬‫اٌظ‬ ٚ‫ب٘ش‬‫ٕ٘ب‬ ْٛ‫س١ى‬ ً‫ب‬َّ١ٍ‫فؼ‬ </body> </html> ‫الوسوم‬ ‫اصفات‬‫و‬Attributes ‫لغة‬ َّ‫بأف‬ ً‫ا‬‫سابق‬ ‫قمناه‬ ‫ما‬ ‫كؿ‬ ‫ص‬ّ‫يتمخ‬HTML‫مف‬ ‫مجموعة‬ ‫إنشاء‬ ‫عبر‬ ‫المحتوى‬ ‫تقديـ‬ ‫لؾ‬ ‫تتيح‬ ‫عناصر‬ ‫مف‬ ‫عنصر‬ ‫كؿ‬ ‫ميمة‬ ,‫العناصر‬HTML‫فيناؾ‬ ‫صفحتؾ‬ ‫في‬ ً‫ا‬‫جد‬ ‫محدد‬ ‫شيء‬ ‫عرض‬ ‫ابط‬‫و‬‫الر‬ ‫لعرض‬ ‫عناصر‬ ‫ىناؾ‬ ‫و‬ ‫الصور‬ ‫لعرض‬ ‫عناصر‬ ‫ىناؾ‬ ‫و‬ ‫النصوص‬ ‫لعرض‬ ‫عناصر‬ ‫َّة‬‫التشعبي‬Links‫وسوـ‬ ‫مف‬ ‫خاص‬ ‫وسـ‬ ‫اسطة‬‫و‬‫ب‬ ‫العناصر‬ ‫ىذه‬ ‫مف‬ ‫عنصر‬ ‫كؿ‬ ‫إنشاء‬ ‫يتـ‬ ,‫إلخ‬ .. HTML‫بي‬ ‫الظاىر‬ ‫العنصر‬ ‫محتوى‬ ‫اف‬‫ر‬‫يحص‬ ‫نياية‬ ‫وسـ‬ ‫و‬ ‫بداية‬ ‫وسـ‬ ‫عنصر‬ ‫لكؿ‬ ‫يكوف‬ ‫و‬ ,.‫نيما‬ ‫عرض‬ ‫سموؾ‬ ‫ص‬ّ‫تخص‬ ‫التي‬ ‫و‬ ‫َّة‬‫اإلضافي‬ ‫الخصائص‬ ‫مف‬ ‫بمجموعة‬ ‫البداية‬ ‫وسوـ‬ ‫بعض‬ ‫تزويد‬ ‫يمكف‬ ‫اصفات‬‫و‬‫بال‬ ‫يعرؼ‬ ‫ما‬ ‫عبر‬ ‫ىذا‬ ‫يتـ‬ ‫و‬ ‫اه‬‫و‬‫لمحت‬ ‫العنصر‬Attributes‫سبيؿ‬ ‫عمى‬ ‫التالية‬ ‫ة‬‫ر‬‫لمشيف‬ ‫انظر‬ , :‫المثاؿ‬
  • 24. ٕٗ <p align="center"> ‫إٌظٛص‬ ‫ػشع‬ ‫ٌؼٕظش‬ ٟ‫إٌظ‬ ٜٛ‫اٌّحز‬ </p> ‫فقد‬ ‫تالحظ‬ ‫كما‬‫بالعنصر‬ ‫الخاص‬ ‫البداية‬ ‫وسـ‬ ‫إلى‬ ‫ة‬‫ر‬‫الشيف‬ ‫ىذه‬ ‫في‬ ‫جديد‬ ‫شيء‬ ‫بإضافة‬ ‫قمنا‬p‫و‬ ‫أّل‬ ‫اصفة‬‫و‬‫ال‬ ‫ىو‬align‫العنصر‬ ‫سيعرضو‬ ‫الذي‬ ‫النص‬ ‫محاذاة‬ ‫تحدد‬ ‫التي‬p‫القيمة‬ ‫أعطيناىا‬ ‫و‬center :‫كمايمي‬ ‫النص‬ ‫سيظير‬ ‫اضيا‬‫ر‬‫استع‬ ‫عند‬ ‫و‬ ‫الصفحة‬ ‫منتصؼ‬ ‫في‬ ‫النص‬ ‫لعرض‬ ‫الشكل‬3‫النصوص‬ ‫عرض‬ ‫عنصر‬ :<p>‫المحاذاة‬ ‫اصفة‬‫و‬ ‫إضافة‬ ‫عند‬align ‫وسوـ‬ ‫مف‬ ‫بداية‬ ‫وسـ‬ ‫لكؿ‬ ‫يوجد‬ ,ً‫ا‬‫حسن‬HTML‫اصفات‬‫و‬‫ال‬ ‫مف‬ ً‫ا‬‫سمف‬ ‫معروفة‬ ‫مجموعة‬Attributes‫و‬ ‫اصفة‬‫و‬‫فال‬ ,‫اصفة‬‫و‬‫ال‬ ‫إلى‬ ‫إسنادىا‬ ‫يتـ‬ ‫أف‬ ‫يمكف‬ ‫التي‬ ‫القيـ‬ ‫مف‬ ً‫ا‬‫سمف‬ ‫معروفة‬ ‫مجموعة‬ ‫اصفة‬‫و‬ ‫لكؿ‬ ‫يوجد‬ align‫البداية‬ ‫لوسـ‬ ً‫ا‬‫سمف‬ ‫المعروفة‬ ‫اصفات‬‫و‬‫ال‬ ‫إحدى‬ ‫ىي‬<p>‫يمكف‬ ‫التي‬ ‫القيـ‬ ‫و‬ ‫المثاؿ‬ ‫سبيؿ‬ ‫عمى‬ ‫ىي‬ ‫إلييا‬ ‫تسند‬ ‫أف‬left‫أو‬ ‫اليسار‬ ‫إلى‬ ‫النص‬ ‫لمحاذاة‬right‫أو‬ ‫اليميف‬ ‫إلى‬ ‫النص‬ ‫لمحاذاة‬center ‫و‬ ‫عنو‬ ‫الحديث‬ ‫عند‬ ‫بالتفصيؿ‬ ‫وسـ‬ ‫كؿ‬ ‫اصفات‬‫و‬ ‫عرض‬ ‫بالطبع‬ ‫سيتـ‬ ‫و‬ ,‫الوسط‬ ‫إلى‬ ‫النص‬ ‫لمحاذاة‬ ‫أ‬‫ىو‬ ‫اصفة‬‫و‬‫لم‬ ‫العاـ‬ ‫الشكؿ‬ ‫أف‬ ‫لمقوؿ‬ ‫داعي‬ ‫ّل‬ ‫أنو‬ ‫ظف‬name="value"َّ‫أف‬ ‫حيث‬name‫اسـ‬ ‫ىو‬ ‫و‬ ‫اصفة‬‫و‬‫ال‬value‫اقتباس‬ ‫عالمتي‬ ‫بيف‬ ‫توضع‬ ‫أف‬ ‫يجب‬ ‫التي‬ ‫و‬ ‫اصفة‬‫و‬‫ال‬ ‫لتمؾ‬ ‫دة‬َ‫سن‬ُ‫الم‬ ‫القيمة‬ ‫ىي‬ ‫مزدوجتيف‬""‫مفردتيف‬ ‫اقتباس‬ ‫عالمتي‬ ‫أو‬‘ ‘. ‫اصفات‬‫و‬ ‫و‬ ‫وسوـ‬ ‫كتابة‬ ‫تتـ‬ ‫أف‬ ‫يجب‬ : ‫ممحوظة‬HTML‫ب‬‫ة‬‫ر‬‫صغي‬ ‫َّة‬‫ي‬‫ز‬‫إنجمي‬ ‫حروؼ‬Lower Case.
  • 25. ٕ٘ ‫عناصر‬ ‫عف‬ ‫بالحديث‬ ‫نبدأ‬ ‫أف‬ ‫اآلف‬ ‫نستطيع‬ ‫نا‬َّ‫أن‬ ‫أظف‬HTML‫مع‬ ‫البداية‬ ‫و‬ ‫بالتفصيؿ‬ ‫و‬ ً‫ة‬‫كاف‬ ‫عناصر‬‫العناويف‬Headings‫المشتركة‬ ‫اصفات‬‫و‬‫ال‬ ‫مف‬ ‫بمجموعة‬ ً‫ّل‬‫و‬‫جد‬ ‫سنعرض‬ ‫ذلؾ‬ ‫قبؿ‬ ‫لكف‬ ‫و‬ , ‫وسوـ‬ ‫أغمب‬ ‫بيف‬HTML‫ا‬ ‫تمؾ‬ ‫مف‬ ‫وسـ‬ ‫كؿ‬ ‫مع‬ ‫ىا‬‫ار‬‫ر‬‫تك‬ ‫مف‬ ً‫ّل‬‫بد‬ ‫ىنا‬,‫لوسوـ‬‫و‬:‫الجدوؿ‬ ‫فيمايمي‬ ‫اصفة‬‫و‬‫ال‬ ‫اسم‬‫الممكنة‬ ‫القيم‬‫الشرح‬ id)‫مكرر‬ ‫يد(غير‬‫ر‬‫ف‬ ‫اسـ‬ ‫اي‬ ‫لممستند‬ ‫بالنسبة‬ ً‫ا‬َّ‫برمجي‬ ‫العنصر‬ ‫مع‬ ‫لمتعامؿ‬ ‫اّلسـ‬ ‫ىذا‬ ‫استخداـ‬ ‫يتـ‬ ‫لغة‬ ‫باستخداـ‬Java Script‫أو‬jQuery‫ليا‬ ‫و‬ , ‫استخدام‬‫س‬ ‫ى‬‫أخر‬ ‫ات‬‫عرض‬ ‫يتـ‬‫أحدىا‬‫ة‬‫ر‬‫فق‬ ‫في‬ ً‫ا‬‫ّلحق‬ ‫الداخمية‬ ‫ابط‬‫و‬‫الر‬ dirltr rtl ,‫اءة‬‫ر‬‫الق‬ ‫اتجاه‬ ‫لتحديد‬ltr‫مف‬ ‫اءة‬‫ر‬‫الق‬ ‫اتجاه‬ ‫أف‬ ‫تعني‬ ‫ا‬َّ‫أم‬ ‫اليميف‬ ‫إلى‬ ‫اليسار‬rtl‫مف‬ ‫اءة‬‫ر‬‫الق‬ ‫اتجاه‬ ‫أف‬ ‫فتعني‬ ‫اليسار‬ ‫إلى‬ ‫اليميف‬ alignleft right center justify ‫النص‬ ‫محاذاة‬ ‫لتحديد‬ class‫فئة‬ ‫اسـ‬ ‫أي‬CSS‫صالح‬‫سيتـ‬ ‫و‬ ‫العنصر‬ ‫إلى‬ ‫الفئة‬ ‫خصائص‬ ‫كافة‬ ‫لمنح‬ ‫الفصؿ‬ ‫في‬ ‫بالتفصيؿ‬ ‫ىذا‬ ‫مناقشة‬‫ػ‬‫ب‬ ‫الخاص‬CSS3 name‫يد‬‫ر‬‫ف‬ ‫اسـ‬ ‫أي‬ً‫ا‬ّ‫برمجي‬ ‫العنصر‬ ‫لتمييز‬ ‫تستخدـ‬ ‫الجدول‬1‫عناصر‬ ‫أغمب‬ ‫بين‬ ‫المشتركة‬ ‫اصفات‬‫و‬‫ال‬ ‫جدول‬ :HTML
  • 26. ٕٙ ‫العناوين‬ ‫عناصر‬Headings ‫لغة‬ ‫توفر‬HTML:‫تيب‬‫ر‬‫الت‬ ‫عمى‬ ‫ىي‬ ‫و‬ ‫العناويف‬ ‫لعرض‬ ‫عناصر‬ ‫ة‬َّ‫ت‬‫س‬h1‫و‬h2‫و‬h3‫و‬h4‫و‬ h5‫و‬h6‫العنصر‬ َّ‫أف‬ ‫حيث‬h1‫العنصر‬ ‫و‬ ً‫ا‬‫حجم‬ ‫ىا‬‫أكبر‬ ‫ىو‬h6‫ج‬‫يتدر‬ ‫بينيما‬ ‫ما‬ ‫و‬ ‫األصغر‬ ‫ىو‬ ‫ػ‬‫ل‬‫ا‬ ‫حرؼ‬ ً‫ا‬‫طبع‬ ‫و‬ ,‫الحجـ‬ ‫في‬h‫لكممة‬ ‫اختصار‬ ‫ىنا‬Heading‫عمى‬ ‫التالية‬ ‫ة‬‫ر‬‫الشيف‬ ‫نجرب‬ ‫دعنا‬ , :‫المثاؿ‬ ‫سبيؿ‬ <html> <head> <title> ٓ٠ٚ‫اٌؼٕب‬ ‫ٌؼٕبطش‬ ‫اخزجبس‬ ‫طفحخ‬ </title> </head> <body dir='rtl'> <h1>‫ل‬َّ‫األو‬ ‫انمضرىي‬ ‫مه‬ ‫عىىان‬ ‫عىصر‬</h1> <h2>‫انثاوي‬ ‫انمضرىي‬ ‫مه‬ ‫عىىان‬ ‫عىصر‬</h2> <h3>‫انثانث‬ ‫انمضرىي‬ ‫مه‬ ‫عىىان‬ ‫عىصر‬</h3> <h4> ‫انمضرىي‬ ‫مه‬ ‫عىىان‬ ‫عىصر‬‫انراتع‬ </h4> <h5>‫انخامش‬ ‫انمضرىي‬ ‫مه‬ ‫عىىان‬ ‫عىصر‬</h5> <h6>‫انضادس‬ ‫انمضرىي‬ ‫مه‬ ‫عىىان‬ ‫عىصر‬</h6> </body> </html> :‫التالية‬ ‫النتيجة‬ ‫سنشاىد‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫السابقة‬ ‫الصفحة‬ ‫اض‬‫ر‬‫استع‬ ‫عند‬
  • 27. ٕٚ ‫الشكل‬4:‫العناوين‬ ‫عناصر‬ ‫اختبار‬ ‫صفحة‬h1‫إلى‬h6 ‫الوسـ‬ ‫بتزويد‬ ‫قمنا‬ ‫فقد‬ ‫تالحظ‬ ‫كما‬<body>‫اصفة‬‫و‬‫بال‬dir‫و‬ ‫المستند‬ ‫جسد‬ ‫اءة‬‫ر‬‫ق‬ ‫اتجاه‬ ‫تحدد‬ ‫التي‬ ‫و‬ ‫القيمة‬ ‫بإسناد‬ ‫قمنا‬rtl‫و‬ ‫ليا‬‫لنجعؿ‬ ‫ذلؾ‬‫اليسار‬ ‫إلى‬ ‫اليميف‬ ‫مف‬ ‫اءة‬‫ر‬‫الق‬ ‫اتجاه‬right to left‫ما‬ ‫ىو‬ ‫و‬ ‫أية‬ َ‫ط‬ْ‫ع‬ُ‫ت‬ ‫لـ‬ ‫اصفة‬‫و‬‫ال‬ ‫ىذه‬ ‫أف‬ ‫حاؿ‬ ‫في‬ ‫و‬ ,‫بالطبع‬ ‫بية‬‫ر‬‫الع‬ ‫المغة‬ ‫مع‬ ‫يتناسب‬‫القيمة‬ ‫فإف‬ ‫قيمة‬ ‫ىي‬ ‫ليا‬ ‫اضية‬‫ر‬‫اّلفت‬ltr.‫اليميف‬ ‫إلى‬ ‫اليسار‬ ‫مف‬ ‫اضي‬‫ر‬‫اّلفت‬ ‫اءة‬‫ر‬‫الق‬ ‫اتجاه‬ ‫أف‬ ‫أي‬ ‫استخدـ‬ :‫ممحوظة‬‫العناويف‬ ‫عناصر‬<h1>‫إلى‬<h6>‫أجؿ‬ ‫مف‬‫تستخدميا‬ ‫ّل‬ ‫و‬ ,‫فقط‬ ‫ات‬‫ر‬‫الفق‬ ‫عناويف‬‫النص‬ ‫لجعؿ‬ ً‫ا‬‫يض‬‫ر‬‫ع‬.‫الغرضيف‬ ‫ليذيف‬ ‫خاصة‬ ‫وسوـ‬ ‫فيناؾ‬ ‫الحجـ‬ ‫كبير‬ ‫أو‬ ‫األفقي‬ ‫الخط‬ ‫عنصر‬Horizontal Line ‫لغة‬ ‫ـ‬ِّ‫تقد‬HTML‫الخاص‬ ‫الوسـ‬<hr />:‫التالي‬ ‫لممثاؿ‬ ‫انظر‬ ,‫الصفحة‬ ‫في‬ ‫َّة‬‫األفقي‬ ‫الخطوط‬ ‫إلنشاء‬ <html> <head>
  • 28. ٕٛ <title> ٟ‫األفم‬ ‫اٌخؾ‬ ‫ٌؼٕظش‬ ‫اخزجبس‬ ‫طفحخ‬ </title> </head> <body dir='rtl'> <p>‫فمؾ‬ ‫ٌٍزجشثخ‬ ٌٝٚ‫األ‬ ‫اٌفمشح‬ ٜٛ‫ِحز‬</p> <hr /> <p>‫فمؾ‬ ‫ٌٍزجشثخ‬ ‫اٌثبٔ١خ‬ ‫اٌفمشح‬ ٜٛ‫ِحز‬</p> <hr /> <p>‫فمؾ‬ ‫ٌٍزجشثخ‬ ‫اٌثبٌثخ‬ ‫اٌفمشح‬ ٜٛ‫ِحز‬</p> </body> </html> :‫كمايمي‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫السابقة‬ ‫ة‬‫ر‬‫الشيف‬ ‫تبدو‬ ‫الشكل‬5:‫العنصر‬ ‫تجربة‬ ‫صفحة‬<hr />
  • 29. ٕٜ ‫التعميقات‬Comments ‫في‬ ‫المبرمجوف‬ ‫اعتاد‬‫ج‬َ‫ل‬‫عا‬ُ‫ت‬ ‫ّل‬ ‫َّة‬‫توضيحي‬ ‫أسطر‬ ‫كتابة‬ ‫عمى‬ ‫َّة‬‫التقميدي‬ ‫البرمجة‬ ‫لغات‬‫تعتبر‬ ‫ّل‬ ‫أنيا‬ ‫إذ‬ ‫ة‬‫ر‬‫الشيف‬ ‫مف‬ ً‫ا‬‫ء‬‫جز‬,‫ة‬‫ر‬‫فت‬ ‫بعد‬ ‫لتعديميا‬ ‫يعود‬ ‫عندما‬ ‫ة‬‫ر‬‫الشيف‬ ‫اء‬‫ز‬‫بأج‬ ‫المبرمج‬ ‫لتذكير‬ ‫فقط‬ ‫تستخدـ‬ ‫ما‬َّ‫إن‬ ‫و‬ ‫بالتعميقات‬ ‫تعرؼ‬ ‫األسطر‬ ‫ىذه‬ ‫و‬ ,‫الزمف‬ ‫مف‬Commentsَّ‫أف‬ ‫مع‬ ‫و‬ ,HTML‫كما‬ ‫وصفية‬ ‫لغة‬ ‫قمت‬‫لكتابة‬ ‫التالية‬ ‫العامة‬ ‫الصيغة‬ ‫ـ‬ِّ‫فتقد‬ ,‫المستندات‬ ‫ضمف‬ ‫التعميقات‬ ‫لكتابة‬ ‫آلية‬ ‫توفر‬ ‫أنيا‬ ّ‫إّل‬ ً‫ا‬‫سابق‬ :‫التعميؽ‬ <!-- comment --> ‫مستند‬ ‫ضمف‬ ‫التعميقات‬ ‫استخداـ‬ ‫عمى‬ ‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬HTML: <html> <head> <title> ‫إٌ١ٙب‬ ً‫ب‬‫ِؼبف‬ ٟ‫األفم‬ ‫اٌخؾ‬ ‫ٌؼٕظش‬ ‫اخزجبس‬ ‫طفحخ‬ ‫ِجّٛػخ‬‫خ‬َّ١‫اٌجشِج‬ ‫اٌزؼٍ١مبد‬ ِٓ </title> </head> <body dir='rtl'> <!-- ‫انرانييه‬ ‫انضطريه‬ً‫األون‬ ‫نهفقرج‬ --> <p>‫فمؾ‬ ‫ٌٍزجشثخ‬ ٌٝٚ‫األ‬ ‫اٌفمشح‬ ٜٛ‫ِحز‬</p> <hr /> <!-- ‫انثاويح‬ ‫نهفقرج‬ ‫انرانييه‬ ‫انضطريه‬ --> <p>‫فمؾ‬ ‫ٌٍزجشثخ‬ ‫اٌثبٔ١خ‬ ‫اٌفمشح‬ ٜٛ‫ِحز‬</p> <hr /> <!-- ‫انثانثح‬ ‫نهفقرج‬ ‫انراني‬ ‫انضطر‬ --> <p>‫فمؾ‬ ‫ٌٍزجشثخ‬ ‫اٌثبٌثخ‬ ‫اٌفمشح‬ ٜٛ‫ِحز‬</p> </body> </html>
  • 30. ٖٓ ‫كمايمي‬ ‫السابقة‬ ‫ة‬‫ر‬‫الشيف‬ ‫تبدو‬‫تظي‬ ‫ّل‬ ‫التعميقات‬ ‫أف‬ ‫د‬ّ‫ك‬‫يؤ‬ ‫مما‬ ‫الويب‬ ‫مستعرض‬ ‫في‬‫أثناء‬ (‫المستند‬ ‫في‬ ‫ر‬ ‫األمر‬ ‫اختيار‬ ‫ب‬ِّ‫جر‬ ‫الصفحة‬ ‫اض‬‫ر‬‫استع‬"‫عرض‬-<‫المصدر‬"‫أو‬"View->source"): ‫الشكل‬6‫الصفحة‬ ‫في‬ ‫تظهر‬ ‫ال‬ ‫و‬ ‫المصدر‬ ‫عرض‬ ‫نافذة‬ ‫في‬ ‫األخضر‬ ‫بالمون‬ ‫تظهر‬ ‫التعميقات‬ : .‫التعميؽ‬ ‫وسـ‬ ‫بداية‬ ‫في‬ ‫ؿ‬ّ‫األو‬ ‫القوس‬ ‫بعد‬ ‫ُّب‬‫التعج‬ ‫ة‬‫ر‬‫إشا‬ َ‫تنس‬ ‫ّل‬ :‫ممحوظة‬ ‫النصوص‬ ‫عناصر‬Paragraphs ‫ىذه‬ ‫إنشاء‬ ‫يتـ‬ ,‫الغالب‬ ‫في‬ ‫النصية‬ ‫ات‬‫ر‬‫الفق‬ ‫مف‬ ‫مجموعة‬ ‫مف‬ ‫اقع‬‫و‬‫ال‬ ‫في‬ ‫الويب‬ ‫صفحة‬ ‫تتكوف‬‫ات‬‫ر‬‫الفق‬ ‫الوسـ‬ ‫باستخداـ‬<p>‫الوسـ‬ ‫يستخدـ‬ ‫و‬ ,‫السابقة‬ ‫األمثمة‬ ‫في‬ ‫استخدامو‬ ‫معنا‬ ‫مر‬ ‫الذي‬ ‫و‬<br /> ‫فييا‬ ‫بما‬ ‫اغات‬‫ر‬‫الف‬ ‫محارؼ‬ ‫ألف‬ ‫ذلؾ‬ ‫و‬ ‫التالي‬ ‫السطر‬ ‫إلى‬ ‫لمنزوؿ‬‫محرؼ‬‫المفتاح‬Enter‫لي‬ ‫ليس‬‫ا‬ ‫لغة‬ ‫في‬ ‫قيمة‬HTML.ً‫ا‬‫سابق‬ ‫نا‬‫ر‬‫ذك‬ ‫كما‬ ‫النصوص‬ ‫تنسيق‬ ‫عناصر‬Text Formatting ‫لغة‬ ‫توفر‬HTMLً‫ا‬‫يض‬‫ر‬‫ع‬ ‫النص‬ ‫فمجعؿ‬ ,‫النصوص‬ ‫لتنسيؽ‬ ‫العناصر‬ ‫مف‬ ‫مجموعة‬Bold‫توفر‬ ‫العنصر‬<b>‫العنصر‬ ‫(أو‬<strong>ً‫ال‬‫مائ‬ ‫النص‬ ‫لجعؿ‬ ‫و‬ ,)Italic‫العنصر‬ ‫توفر‬<i>‫(أو‬
  • 31. ٖٔ ‫العنصر‬<em>‫العنصر‬ ‫توفر‬ ‫النص‬ ‫أسفؿ‬ ‫خط‬ ‫لوضع‬ ‫و‬ ,)<u>‫النص‬ ‫لشطب‬ ‫و‬ ,Delete‫توفر‬ ‫العنصر‬<del>:‫المثاؿ‬ ‫سبيؿ‬ ‫عمى‬ ‫التالية‬ ‫ة‬‫ر‬‫الشيف‬ ‫لنشاىد‬ , <html> <head> <title>‫إٌظٛص‬ ‫رٕس١ك‬ ‫ٌؼٕبطش‬ ‫اخزجبس‬ ‫طفحخ‬</title> </head> <body> <p> This is a sample text to demonstrate <b>bold</b>, <i>italic</i>, <u>underline</u> and <del>delete</del> tags. <!-- ً‫ا‬‫سـش‬ ‫ٌٍٕضٚي‬ً‫ا‬‫ٚاحذ‬ <br/> ‫اسزخذِٕب‬ --> <br/> You may use other tags to generate the same output: <br/> This is a sample text to demonstrate <strong>bold</strong>, <em>italic</em>, <u>underline</u> and <del>delete</del> tags. </p> </body>
  • 32. ٖٕ </html> :‫كمايمي‬ ‫المستعرض‬ ‫في‬ ‫أعاله‬ ‫ة‬‫ر‬‫الشيف‬ ‫تبدو‬ ‫الشكل‬7‫النصوص‬ ‫تنسيق‬ ‫عناصر‬ ‫اختبار‬ ‫صفحة‬ : ‫وسوـ‬ ‫جع‬‫مر‬ ‫في‬ ‫ىا‬‫ذكر‬ ‫سيتـ‬ ‫النصوص‬ ‫تنسيؽ‬ ‫عناصر‬ ‫مف‬ ‫يد‬‫ز‬‫الم‬ ‫ىناؾ‬ ‫بالطبع‬ :‫ممحوظة‬HTML‫ىذا‬ ‫نياية‬ ‫في‬ .‫الفصؿ‬ ‫ة‬َّ‫الخاص‬ ‫الرموز‬ ‫و‬ ‫المحارف‬Special Characters ‫كتابتيا‬ ‫يؽ‬‫ر‬‫ط‬ ‫عف‬ ‫الصفحة‬ ‫في‬ ‫عرضيا‬ ‫يمكف‬ ‫ّل‬ ‫التي‬ ‫الرموز‬ ‫و‬ ‫المحارؼ‬ ‫بعض‬ ‫ىناؾ‬‫مباشر‬ ‫بشكؿ‬ ‫ياضيات‬‫ر‬‫ال‬ ‫في‬ ‫المستخدمة‬ ‫الرموز‬ ‫مثؿ‬‫اغات‬‫ر‬‫الف‬ ‫محارؼ‬ ‫و‬‫لغة‬ ‫توفر‬ ,‫ىا‬‫غير‬ ‫و‬HTML‫خاصة‬ ‫آلية‬ ‫التالية‬ ‫العامة‬ ‫الصيغة‬ ‫باتباع‬ ‫ذلؾ‬ ‫و‬ ‫الرموز‬ ‫ىذه‬ ‫لعرض‬&value;‫القيمة‬ ‫باستبدؿ‬value‫بقيمة‬ ‫المطموب‬ ‫المحرؼ‬‫أف‬‫في‬ ‫عرضو‬ ‫يتـ‬‫الويب‬ ‫مستعرض‬‫ىذه‬ ‫مف‬ ‫نماذج‬ ‫التالي‬ ‫الجدوؿ‬ ‫في‬ ‫و‬ :‫المحارؼ‬ٖ ٖ :‫التالي‬ ‫ابط‬‫ر‬‫ال‬ ‫اتباع‬ ‫يمكف‬ ‫الكامؿ‬ ‫الجدوؿ‬ ‫عمى‬ ‫لمحصوؿ‬ http://www.w3schools.com/tags/ref_symbols.asp
  • 33. ٖٖ ‫الرمز‬‫ة‬‫شيفر‬XHTML <&lt; >&gt; ≠&ne; ™&trade; ©&copy; ‫اع‬‫ر‬‫الف‬ ‫محرؼ‬&nbsp; ‫الجدول‬2:‫الخاصة‬ ‫المحارف‬ ‫بعض‬‫في‬HTML :‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬ <html> <head> <title> ‫اٌخبطخ‬ ‫اٌّحبسف‬ ‫ٌجؼغ‬ ‫اخزجبس‬ ‫طفحخ‬ </title> </head> <body> <p> 3 &lt; 5 and 10 &gt; 2 and also 3 &ne; 4 .... all rights reserved for &copy; Mukhtar &trade; </p> </body> </html>
  • 34. ٖٗ :‫كمايمي‬ ‫المستعرض‬ ‫في‬ ‫عرضو‬ ‫عند‬ ‫يبدو‬ ‫الذي‬ ‫و‬ ‫الشكل‬8‫ب‬ ‫الستخدام‬ ‫مثال‬ :‫الصفحة‬ ‫في‬ ‫الخاصة‬ ‫المحارف‬ ‫عض‬ ‫ابط‬‫و‬‫الر‬ ‫عناصر‬Hyper Links ‫لغة‬ ‫توفر‬HTML‫ابط‬‫و‬‫الر‬ ‫عناصر‬ ‫عبر‬ ‫المختمفة‬ ‫الصفحات‬ ‫بيف‬ ‫لالنتقاؿ‬ ‫آلية‬Hyper Links‫و‬ , ‫عمييا‬ ‫النقر‬ ‫عند‬ ‫تنقمؾ‬ ‫صور‬ ‫أو‬ ‫نصوص‬ ‫عف‬ ‫ة‬‫ر‬‫عبا‬ ‫ابط‬‫و‬‫الر‬‫إلى‬ ‫الحالية‬ ‫الصفحة‬ ‫مف‬‫صفحة‬ ‫إلى‬ ‫بعرض‬ ‫ابط‬‫و‬‫الر‬ ‫بتمييز‬ ‫الويب‬ ‫مستعرضات‬ ‫تقوـ‬ ,‫ى‬‫أخر‬ ‫ويب‬"‫ة‬‫ر‬‫صغي‬ ‫يد‬"‫ة‬‫ر‬‫اإلشا‬ ‫عند‬ ‫ة‬‫ر‬‫لمفأ‬ ‫كمؤشر‬ ,‫ابط‬‫و‬‫الر‬ ‫أحد‬ ‫إلى‬‫و‬‫ابط‬‫و‬‫الر‬ ‫إنشاء‬ ‫يتـ‬‫الوسـ‬ ‫اسطة‬‫و‬‫ب‬<a>‫ػ‬‫ل‬‫ا‬ ‫و‬ ,a‫ػ‬‫ل‬ ‫اختصار‬ ‫ىذه‬Anchor‫يتـ‬ , ‫اّل‬ ‫سيتـ‬ ‫(الذي‬ ‫اليدؼ‬ ‫الموقع‬ ‫ا‬َّ‫أم‬ ‫لو‬ ‫كمحتوى‬ ‫عرض‬ُ‫ي‬ ‫بنص‬ ‫ابط‬‫ر‬‫ال‬ ‫عنصر‬ ‫تزويد‬‫النقر‬ ‫عند‬ ‫إليو‬ ‫نتقاؿ‬ ‫اصفة‬‫و‬‫لم‬ ‫تزويده‬ ‫فيتـ‬ )‫ابط‬‫ر‬‫ال‬ ‫عمى‬href‫ػ‬‫ل‬ ‫اختصار‬ ‫ىي‬ ‫التي‬ ‫و‬Hyper Reference‫فممنظر‬ , :‫التالي‬ ‫لممثاؿ‬ <html> <head> <title> ‫اٌشٚاثؾ‬ ‫ٌؼٕبطش‬ ‫اخزجبس‬ ‫طفحخ‬ </title> </head>
  • 35. ٖ٘ <body> <a href="http://www.microsoft.com"> ‫مايكرو‬‫صىفد‬ </a><br /> <a href="http://www.google.com">‫جىجم‬</a><br /> <a href="http://www.msn.com" target="_blank" >MSN</a> <br /> <a href="firstPage.html" target="_self">‫مثال‬ ‫أول‬</a> </body> </html> :‫كمايمي‬ ‫الويب‬ ‫بمستعرض‬ ‫اضو‬‫ر‬‫استع‬ ‫عند‬ ‫يبدو‬ ‫الذي‬ ‫الشكل‬9:‫اختبار‬ ‫صفحة‬‫عنصر‬‫ابط‬‫و‬‫الر‬ ‫قد‬ ‫و‬ ‫ة‬‫ر‬‫الشيي‬ ‫اقع‬‫و‬‫الم‬ ‫بعض‬ ‫إلى‬ ‫تشير‬ ‫التي‬ ‫ابط‬‫و‬‫الر‬ ‫عناصر‬ ‫مف‬ ‫بمجموعة‬ ‫صفحتنا‬ ‫بتزويد‬ ‫قمنا‬ ‫لقد‬ ‫و‬ ‫الفصؿ‬ ‫ىذا‬ ‫بداية‬ ‫في‬ ً‫ا‬‫مع‬ ‫بإنشائو‬ ‫قمنا‬ ‫الذي‬ ‫ؿ‬ّ‫األو‬ ‫المثاؿ‬ ‫ممؼ‬ ‫اسـ‬ ‫ذكر‬ ‫األخير‬ ‫ابط‬‫ر‬‫ال‬ ‫في‬ ‫تعمدت‬ ‫مطمقة‬ ‫تكوف‬ ‫أف‬ ‫يمكف‬ ‫ابط‬‫و‬‫الر‬ ‫أف‬ ‫لتوضيح‬ ‫ذلؾ‬Absolute‫نسبية‬ ‫أو‬ )‫األولى‬ ‫(كالثالثة‬Relative
  • 36. ٖٙ ‫مسار‬ ‫عف‬ ‫ة‬‫ر‬‫عبا‬ ‫يكوف‬ ‫المذكور‬ ‫ابط‬‫ر‬‫ال‬ ‫أف‬ ‫بالنسبية‬ ‫يقصد‬ ‫و‬ )‫األخير‬ ‫ابط‬‫ر‬‫(كال‬Path‫الصفحة‬ ‫ممؼ‬ ‫اليدؼ‬ ‫الصفحة‬ ‫كانت‬ ‫فقد‬ ‫حالتنا‬ ‫في‬ ‫و‬ ‫الحالية‬ ‫لمصفحة‬ ‫بالنسبة‬ ‫اليدؼ‬firstPage.html‫نفس‬ ‫في‬ ‫الحالية‬ ‫الصفحة‬ ‫مجمد‬ٗ . ‫ا‬‫ر‬‫ال‬ ‫إلى‬ ‫اّلنتقاؿ‬ ‫سيتـ‬ ‫ابط‬‫و‬‫الر‬ ‫ىذه‬ ‫أحد‬ ‫عمى‬ ‫النقر‬ ‫عند‬‫بط‬URL‫اصفة‬‫و‬‫ال‬ ‫في‬ ‫المذكور‬href‫افقة‬‫ر‬‫الم‬ ‫اصفة‬‫و‬‫بال‬ ‫ابط‬‫و‬‫الر‬ ‫بعض‬ ‫بتزويد‬ ‫قمنا‬ ‫نا‬َّ‫أن‬ ‫بالذكر‬ ‫الجدير‬ ‫مف‬ ,‫عميو‬ ‫النقر‬ ‫تـ‬ ‫الذي‬ ‫ابط‬‫ر‬‫ال‬ ‫لعنصر‬ target‫األسئمة‬ ‫عمى‬ ‫تجيب‬ ‫يا‬ّ‫أن‬ ‫بمعنى‬ ‫المستعرض‬ ‫في‬ ‫اليدؼ‬ ‫الصفحة‬ ‫عرض‬ ‫مكاف‬ ‫تحدد‬ ‫التي‬ ‫و‬ :‫التالية‬ ‫الص‬ ‫نفس‬ ‫في‬ ‫اليدؼ‬ ‫الصفحة‬ ‫عرض‬ ‫سيتـ‬ ‫ىؿ‬‫ىي‬ ‫اصفة‬‫و‬‫ال‬ ‫قيمة‬ ‫فإف‬ ‫الحالة‬ ‫ىذه‬ ‫(في‬ ‫الحالية؟‬ ‫فحة‬ ‫القيمة‬_self‫فإف‬ ‫الحالة‬ ‫ىذه‬ ‫في‬ ( ‫جديدة؟‬ ‫مستعرض‬ ‫نافذة‬ ‫في‬ ‫اليدؼ‬ ‫الصفحة‬ ‫عرض‬ ‫سيتـ‬ ‫ىؿ‬ ,) ‫اصفة‬‫و‬‫ال‬ ‫قيمة‬_blank‫فإف‬ ‫الحالة‬ ‫ىذه‬ ‫(في‬ ‫محدد؟‬ ‫إطار‬ ‫في‬ ‫اليدؼ‬ ‫الصفحة‬ ‫عرض‬ ‫سيتـ‬ ‫ىؿ‬ ,) ‫اإلطا‬ ‫تناوؿ‬ ‫سيتـ‬ ‫و‬ ‫اإلطار‬ ‫اسـ‬ ‫ىي‬ ‫اصفة‬‫و‬‫ال‬ ‫قيمة‬.)ً‫ا‬‫ّلحق‬ ‫ؿ‬ّ‫مفص‬ ‫بشكؿ‬ ‫ات‬‫ر‬ ‫مورد‬ ‫أي‬ ‫إلى‬ ‫يشير‬ ‫أف‬ ‫ابط‬‫ر‬‫لم‬ ‫يمكف‬ ‫و‬َّ‫أن‬ ً‫ا‬‫حالي‬ ‫ابط‬‫و‬‫الر‬ ‫عف‬ ‫ه‬‫ر‬‫ذك‬ ‫يجب‬ ‫ما‬ ‫آخر‬Resource‫متوفر‬ ‫إلكتروني‬ ‫يد‬‫ر‬‫ب‬ ‫إلى‬ ‫ابط‬‫ر‬‫ال‬ ‫يشير‬ ‫أف‬ ‫يمكف‬ ‫كما‬ ,‫الصفحات‬ ‫فقط‬ ‫ليس‬ ‫و‬ ‫الويب‬ ‫عمى‬E-Mail‫ذلؾ‬ ‫و‬ ‫القيمة‬ ‫نضع‬ ‫بأف‬mailto::‫التالي‬ ‫المثاؿ‬ ‫انظر‬ ,‫لو‬ ً‫ا‬‫ابط‬‫ر‬ ‫نضع‬ ‫أف‬ ‫يد‬‫ر‬‫ن‬ ‫الذي‬ ‫اإللكتروني‬ ‫يد‬‫ر‬‫الب‬ ‫قبؿ‬ <html> <head> <title> ‫خبطخ‬ ‫سٚاثؾ‬ </title> ٗ ‫ات‬‫ر‬‫المسا‬ ‫عف‬ ‫يد‬‫ز‬‫الم‬ ‫تعمـ‬ ‫يمكنؾ‬Paths:‫الموقع‬ ‫ة‬‫ر‬‫يا‬‫ز‬ ‫خالؿ‬ ‫مف‬ http://msdn.microsoft.com/en-us/library/aa365247(VS.85).aspx
  • 37. ٖٚ </head> <body> <a href="http://www.somesite.com/files/file1.zip"> ‫ٕ٘ب‬ ‫أمش‬ ‫اٌٍّف‬ ً١ّ‫ٌزح‬</a> <br /> <a href ="mailto:mokhtar_ss@hotmail.com">ٍٟٕ‫ساس‬</a> </body> </html> ‫الممؼ‬ ‫تحميؿ‬ ‫ع‬ّ‫ب‬‫ر‬‫م‬ ‫ظيور‬ ‫ىو‬ ‫ؿ‬َّ‫األو‬ ‫ابط‬‫ر‬‫ال‬ ‫عمى‬ ‫النقر‬ ‫عند‬ ‫سيحدث‬ ‫ما‬Save File Dialog‫ما‬ ‫و‬ ‫(مثؿ‬ ‫اإللكتروني‬ ‫يد‬‫ر‬‫الب‬ ‫مدير‬ ‫نامج‬‫ر‬‫ب‬ ‫ظيور‬ ‫ىو‬ ‫الثاني‬ ‫الممؼ‬ ‫عمى‬ ‫النقر‬ ‫عند‬ ‫سيحدث‬Outlook Express‫رسال‬ ‫إرساؿ‬ ‫وضع‬ ‫في‬ ).‫ابط‬‫ر‬‫ال‬ ‫في‬ ‫المذكور‬ ‫اإللكتروني‬ ‫يد‬‫ر‬‫الب‬ ‫إلى‬ ‫جديدة‬ ‫ة‬ ‫الصور‬ ‫عناصر‬Images ‫لغة‬ ‫توفر‬HTML‫العنصر‬ ‫ىو‬ ‫العنصر‬ ‫ىذا‬ ‫الصفحة‬ ‫ضمف‬ ‫الصور‬ ‫لعرض‬ ً‫ا‬‫خاص‬ ً‫ا‬‫ر‬‫عنص‬ <img/>‫ػ‬‫ل‬ ً‫ا‬‫ر‬‫(اختصا‬Image‫ىا‬‫مسار‬ ‫عمى‬ ً‫ا‬‫اعتماد‬ ‫الصفحة‬ ‫ضمف‬ ‫ة‬‫ر‬‫الصو‬ ‫بعرض‬ ‫يقوـ‬ ‫الذي‬ ) ‫اصفة‬‫و‬‫ال‬ ‫عبر‬ ‫لمعنصر‬ ‫يمرر‬ ‫الذي‬src‫ػ‬‫ل‬ ً‫ا‬‫ر‬‫(اختصا‬Source‫لمعنصر‬ ‫بالنسبة‬ ‫الحاؿ‬ ‫ىو‬ ‫كما‬ ‫و‬ ,) ‫الخاص‬<br/>‫العنصر‬ ّ‫فإف‬<img/>‫الغالب‬ ‫في‬ ‫العاـ‬ ‫شكمو‬ ّ‫فإف‬ ‫لذلؾ‬ ‫و‬ ‫نياية‬ ‫وسـ‬ ‫أي‬ ‫يمتمؾ‬ ‫ّل‬ ‫يكوف‬<img src="path" />:‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬ , <html> <head> <title> ‫اٌظٛس‬ ‫ػٕبطش‬ ‫ٌؼشع‬ ‫طفحخ‬ </title> </head>
  • 38. ٖٛ <body> <img src="myPic.jpg" /> <img src="myPic2.gif" alt="‫انثاويح‬ ‫انصىرج‬" /> <img src="myPic.jpg" alt="‫اٌثبٌثخ‬ ‫اٌظٛسح‬" width="100px" height="50px" /> <img src="‫خبؿئ‬ ‫ِسبس‬" alt="‫اٌخبؿئ‬ ‫اٌّسبس‬ ‫راد‬ ٟ‫طٛسر‬" /> </body> </html> ‫عند‬ ‫يبدو‬ ‫الذي‬ ‫و‬:‫كمايمي‬ ‫المستعرض‬ ‫في‬ ‫عرضو‬ ‫الشكل‬11:‫الصور‬ ‫لعنصر‬ ‫اختبار‬ ‫صفحة‬ ‫وسـ‬ ‫كؿ‬ ‫في‬ ‫ة‬‫ر‬‫المذكو‬ ‫ات‬‫ر‬‫المسا‬ ‫ذات‬ ‫الصور‬ ‫بعرض‬ ‫الصور‬ ‫عرض‬ ‫عنصر‬ ‫قاـ‬ ‫فقد‬ ‫تالحظ‬ ‫كما‬ <img/>‫اصفة‬‫و‬‫ال‬ ‫العنصر‬ ‫ىذا‬ ‫اصفات‬‫و‬ ‫مف‬ ‫و‬ ,alt‫في‬ ‫عرضيا‬ ‫يتـ‬ ‫ة‬ّ‫نصي‬ ‫قيمة‬ ‫إلييا‬ ‫تسند‬ ‫التي‬ ‫ال‬ ‫تعذر‬ ‫حاؿ‬‫اصفة‬‫و‬‫ال‬ ‫في‬ ‫ة‬‫ر‬‫المذكو‬ ‫ة‬‫ر‬‫الصو‬ ‫إلى‬ ‫وصوؿ‬src‫ة‬‫ر‬‫الصو‬ ‫في‬ ‫معنا‬ ‫حدثت‬ ‫الحالة‬ ‫ىذه‬ ‫و‬ ‫ة‬‫ر‬‫الصو‬ ‫عرض‬ ‫يمكف‬ ‫كما‬ ,‫الحالة‬ ‫ىذه‬ ‫لعرض‬ ‫قصد‬ ‫عف‬ ‫خاطئ‬ ‫بمسار‬ ‫زودناىا‬ ‫التي‬ ‫و‬ ‫ابعة‬‫ر‬‫ال‬ ‫العنصر‬ ‫تزويد‬ ‫عبر‬ ‫ذلؾ‬ ‫و‬ ‫محدد‬ ‫بمقاس‬img‫تفاع‬‫ر‬‫اّل‬ ‫اصفتي‬‫و‬‫ب‬height‫العرض‬ ‫و‬width‫التي‬ ‫و‬
  • 39. ٖٜ َّ‫قمي‬‫ر‬ ‫قيـ‬ ‫إلييما‬ ‫تسند‬‫تعنيو‬ ‫ما‬ ‫بالبكسؿ(ىذا‬ ‫المعروضة‬ ‫ة‬‫ر‬‫الصو‬ ‫تفاع‬‫ر‬‫ا‬ ‫و‬ ‫عرض‬ ‫تحدد‬ ‫ة‬px‫القيـ‬ ‫في‬ .)‫اصفتيف‬‫و‬‫ال‬ ‫لياتيف‬ ‫المسندة‬ ‫تحتوي‬ ‫صفحتنا‬ ‫أف‬ ‫فرض‬ ‫عمى‬ :‫ممحوظة‬٘‫لتحميؿ‬ ‫سيحتاج‬ ‫صحيح‬ ‫و‬ ‫تاـ‬ ‫بشكؿ‬ ‫الصفحة‬ ‫عرض‬ َّ‫فإف‬ ‫صور‬ٙ ‫عم‬ ً‫ا‬‫ائد‬‫ز‬ ً‫ال‬‫حم‬ ‫يسبب‬ ‫قد‬ ‫ما‬ ‫ىذا‬ ‫و‬ ‫الخمسة‬ ‫الصور‬ ‫ممفات‬ ‫و‬ ‫الصفحة‬ ‫ممؼ‬ ‫ىي‬ ‫ممفات‬‫حاؿ‬ ‫في‬ ً‫ال‬‫مستقب‬ ‫موقعؾ‬ ‫ى‬ .‫الصور‬ ‫استخداـ‬ ‫في‬ ‫اط‬‫ر‬‫اإلف‬ ‫ابط‬‫و‬‫الر‬ ‫نصوص‬ ‫من‬ ً‫ال‬‫بد‬ ‫الصور‬ ‫ابط‬‫و‬‫الر‬ ‫عناصر‬ ‫محتوى‬ ‫نصوص‬ ‫استبداؿ‬ ‫يتـ‬ ‫أف‬ ‫الويب‬ ‫اقع‬‫و‬‫م‬ ‫في‬ ‫الشائع‬ ‫مف‬<a>‫ذلؾ‬ ‫و‬ ‫بالصور‬ ‫مف‬ ً‫ّل‬‫بد‬ ‫ة‬‫ر‬‫الصو‬ ‫عمى‬ ‫النقر‬ ‫عند‬ ‫ابط‬‫ر‬‫لم‬ ‫اليدؼ‬ ‫لمصفحة‬ ‫اّلنتقاؿ‬ ‫يتـ‬ ‫بحيث‬ ‫الموقع‬ ‫محتوى‬ ‫لتجميؿ‬ ‫عم‬ ‫النقر‬‫العنصر‬ ‫بتضميف‬ ‫ذلؾ‬ ‫يتـ‬ ‫و‬ ‫النص‬ ‫ى‬<img/>‫لمعنصر‬ ‫كمحتوى‬<a>‫نعرض‬ ‫فيمايمي‬ ‫و‬ :‫لذلؾ‬ ً‫ا‬‫بسيط‬ ً‫ّل‬‫مثا‬ <html> <head> <title> ‫ٌشاثؾ‬ ٜٛ‫وّحز‬ ‫طٛسح‬ ‫ػشع‬ </title> </head> <body> <a href = "mailto:mokhtar_ss@hotmail.com"> <img src="myPic.jpg" alt="‫راصهىي‬" /> </a> </body> </html>
  • 40. ٗٓ :‫كمايمي‬ ‫المستعرض‬ ‫في‬ ‫يبدو‬ ‫ما‬ ‫ىذا‬ ‫و‬ ‫الشكل‬11:‫ابط‬‫و‬‫لمر‬ ‫كمحتوى‬ ‫النصوص‬ ‫عن‬ ً‫ال‬‫بد‬ ‫الصور‬ ‫استخدام‬ ‫َّة‬‫الصوري‬ ‫ائط‬‫ر‬‫الخ‬Image Maps ‫ابط‬‫و‬‫ر‬ ‫ما‬ ‫ة‬‫ر‬‫صو‬ ‫مف‬ ‫دة‬ّ‫محد‬ ‫اء‬‫ز‬‫أج‬ ‫جعؿ‬ ‫تعني‬ ‫َّة‬‫ي‬‫ر‬‫الصو‬ ‫ائط‬‫ر‬‫الخ‬ً‫ا‬,‫و‬,‫احؿ‬‫ر‬‫م‬ ‫ثالث‬ ‫عمى‬ ‫ىذا‬ ‫يتـ‬ ‫األولى‬‫يتـ‬ ‫أف‬ ‫ىي‬‫الوسـ‬ ‫يؽ‬‫ر‬‫ط‬ ‫عف‬ ‫تقميدي‬ ‫بشكؿ‬ ‫الصفحة‬ ‫في‬ ‫ة‬‫ر‬‫الصو‬ ‫وضع‬<img/>‫الثانية‬ ‫أما‬ , ‫يطة‬‫ر‬‫الخ‬ ‫عنصر‬ ‫إنشاء‬ ‫فيي‬<map>‫اصفة‬‫و‬‫ال‬ ‫قيمة‬ ‫إسناد‬ ‫مع‬name‫و‬ ‫يطة‬‫ر‬‫لمخ‬ ‫كاسـ‬ ‫بو‬ ‫الخاصة‬ ‫عناصر‬ ‫مف‬ ‫مجموعة‬ ‫إنشاء‬ َّ‫ثـ‬ ‫مف‬<area>‫ستتحوؿ‬ ‫التي‬ ‫المناطؽ‬ ‫بإحداثيات‬‫في‬ ‫ابط‬‫و‬‫ر‬ ‫إلى‬ ‫يطة‬‫ر‬‫الخ‬ ‫اسـ‬ ‫بإسناد‬ ‫ذلؾ‬ ‫و‬ ‫ة‬‫ر‬‫الصو‬ ‫عنصر‬ ‫و‬ ‫يطة‬‫ر‬‫الخ‬ ‫عنصر‬ ‫بط‬‫ر‬‫ب‬ ‫تتـ‬ ‫الثالثة‬ ‫المرحمة‬ ‫و‬ ,‫ة‬‫ر‬‫الصو‬ ‫اصفة‬‫و‬‫ال‬ ‫إلى‬usemap:‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬ ,‫ة‬‫ر‬‫الصو‬ ‫بعنصر‬ ‫الخاصة‬ <html> <body> <p>ٕٗ‫ػ‬ ‫ِؼٍِٛبد‬ ‫ٌؼشع‬ ‫اٌىٛاوت‬ ‫أحذ‬ ٍٝ‫ػ‬ ‫أمش‬</p> <img src="planets.gif" width="145" height="126" alt="‫اٌىٛاوت‬" usemap="#planetmap" /> <map name="planetmap">
  • 41. ٗٔ <area shape="rect" coords="0,0,82,126" alt="‫انشمش‬" href="sun.htm" /> <area shape="circle" coords="90,58,3" alt="‫انمريخ‬" href="mercur.htm" /> <area shape="circle" coords="124,58,8" alt="‫انزهرج‬" href="venus.htm" /> </map> </body> </html> :‫كمايمي‬ ‫المستعرض‬ ‫في‬ ‫التالي‬ ‫المثاؿ‬ ‫يبدو‬ ‫الشكل‬12‫صورية‬ ‫خريطة‬ ‫صنع‬ ‫عمى‬ ‫مثال‬ : ‫أعيطناىا‬ ‫و‬ ‫يطة‬‫ر‬‫الخ‬ ‫بإنشاء‬ ‫بدأنا‬ َّ‫ثـ‬ ,ً‫ّل‬‫و‬‫أ‬ ‫طبيعي‬ ‫بشكؿ‬ ‫ة‬‫ر‬‫الصو‬ ‫إضافة‬ ‫تمت‬ ‫فقد‬ ‫تالحظ‬ ‫كما‬ً‫ا‬‫اسم‬ :‫بالسطر‬ <map name="planetmap">
  • 42. ٕٗ ‫الوسـ‬ ‫عبر‬ ‫اكب‬‫و‬‫الك‬ ‫مف‬ ‫كوكب‬ ‫لكؿ‬ ‫منطقة‬ ‫بإنشاء‬ ‫قمنا‬ ‫ذلؾ‬ ‫بعد‬area‫األولى‬ ‫اصفتاف‬‫و‬ ‫لو‬ ‫الذي‬ ‫و‬ shape‫اإلحداثيات‬ ‫اصفة‬‫و‬ ‫فيي‬ ‫الثانية‬ ‫ا‬َّ‫أم‬ ,)‫إلخ‬ .. ‫ية‬‫ر‬‫دائ‬ ,‫(مستطيمة‬ ‫المنطقة‬ ‫شكؿ‬ ‫لتحديد‬ coords‫يمثؿ‬ ‫المستطيؿ‬ ‫أبعاد‬ ‫لتحديد‬ ‫المستطيؿ‬ ‫حالة‬ ‫في‬ ‫إحداثيات‬ ‫بعة‬‫ر‬‫أ‬ ‫ير‬‫ر‬‫تم‬ ‫تـ‬ ‫حيث‬ ‫اإلحداثي‬‫اف‬‫المستطيؿ‬ ‫مف‬ ‫العموي‬ ‫األيسر‬ ‫الركف‬ ‫الثاني‬ ‫و‬ ‫األوؿ‬‫ابع‬‫ر‬‫ال‬ ‫و‬ ‫الثالث‬ ‫اإلحداثياف‬ ‫يمثؿ‬ ‫بينما‬ ‫ىذا‬ ‫تـ‬ ‫بالطبع‬ ‫و‬ ,‫لتحديده‬ ٍ‫كاؼ‬ ‫ىذا‬ ‫و‬ ‫المستطيؿ‬ ‫مف‬ ‫السفمي‬ ‫األيمف‬ ‫الركف‬‫أف‬ ‫اعتبار‬ ‫عمى‬‫مركز‬ ‫ة‬‫ر‬‫لمصو‬ ‫َّة‬‫تي‬‫ر‬‫الديكا‬ ‫الجممة‬‫األيسر‬ ‫الركف‬ ‫ىو‬ ‫النقطة‬ ‫فإف‬ ‫بيذا‬ ‫و‬ ,‫ة‬‫ر‬‫الصو‬ ‫مف‬ ‫العموي‬ (ٓ,ٓ( ‫النقطة‬ ‫و‬ )82,126‫تحدداف‬ ) ‫المرسوـ‬ ‫بالمستطيؿ‬ ‫الشمس‬ ‫كوكب‬ ‫منطقة‬ ‫ال‬ ‫حالة‬ ‫في‬ ‫ا‬َّ‫أم‬ ,‫بينيما‬‫فيتـ‬ ‫ية‬‫ر‬‫الدائ‬ ‫منطقة‬ ‫الثاني‬ ‫و‬ ‫األوؿ‬ ‫يعبر‬ ‫إحداثيات‬ ‫ثالثة‬ ‫ير‬‫ر‬‫تم‬ ‫نقط‬ ‫عف‬‫عف‬ ‫الثالث‬ ‫يعبر‬ ‫و‬ ‫ة‬‫ر‬‫الدائ‬ ‫مركز‬ ‫ة‬ .‫ىا‬‫قطر‬ ‫نصؼ‬ ‫اصفة‬‫و‬‫ال‬ ‫إلى‬ ‫يطة‬‫ر‬‫الخ‬ ‫اسـ‬ ‫ير‬‫ر‬‫بتم‬ ‫قمنا‬ ‫النياية‬ ‫في‬ ‫و‬usemap.‫ة‬‫ر‬‫بالصو‬ ‫الخاصة‬ ‫اصفة‬‫و‬‫ال‬ ‫إلى‬ ‫يطة‬‫ر‬‫الخ‬ ‫اسـ‬ ‫ير‬‫ر‬‫تم‬ ‫يتـ‬ :‫ممحوظة‬usemap‫بالرمز‬ ً‫ا‬‫مسبوق‬# ‫َّة‬‫الداخمي‬ ‫ابط‬‫و‬‫الر‬Internal Linking ‫يصبح‬ ‫ىذه‬ ‫مثؿ‬ ‫حالة‬ ‫في‬ ‫و‬ ‫ما‬ ‫حد‬ ‫إلى‬ ً‫ا‬‫ر‬‫كبي‬ ‫نة‬ّ‫معي‬ ‫صفحة‬ ‫ضمف‬ ‫الموجود‬ ‫المحتوى‬ ‫يكوف‬ ً‫ا‬‫أحيان‬ ‫لغة‬ ‫ر‬ِّ‫ف‬‫تو‬ ,‫الوقت‬ ‫و‬ ‫الجيد‬ ‫بعض‬ ‫تستغرؽ‬ ‫عممية‬ ‫الصفحة‬ ‫ضمف‬ ‫محددة‬ ‫ة‬‫ر‬‫فق‬ ‫إلى‬ ‫اّلنتقاؿ‬HTML ‫الداخمية‬ ‫ابط‬‫و‬‫بالر‬ ‫يعرؼ‬ ‫ما‬ ‫عبر‬ ‫ة‬‫ر‬‫مباش‬ ‫الصفحة‬ ‫مف‬ ‫محدد‬ ‫ء‬‫جز‬ ‫إلى‬ ‫لالنتقاؿ‬ ‫َّة‬‫آلي‬Internal Links ‫الشكل‬13‫المناطق‬ ‫رسم‬ ‫في‬ ‫الهندسي‬ ‫المبدأ‬ ‫لتوضيح‬ ‫تخيمي‬ ‫شكل‬ :
  • 43. ٖٗ ‫ابط‬‫ر‬‫ال‬ ‫وسـ‬ ‫استخداـ‬ ‫عبر‬ ‫تحقيقيا‬ ‫يتـ‬ ‫التي‬ ‫و‬<a>‫اّلنتقاؿ‬ ‫اد‬‫ر‬‫الم‬ ‫العنصر‬ ‫ؼ‬َّ‫معر‬ ‫ير‬‫ر‬‫تم‬ ‫و‬‫إليو‬ ‫اصفة‬‫و‬‫لم‬ ‫كقيمة‬href:‫التالي‬ ‫بالشكؿ‬ <a href="#id"> id ٌّ‫ا‬ ٚ‫ر‬ ‫اٌؼٕظش‬ ٌٝ‫إ‬ ً‫أزم‬‫ؼشف‬ </a> ّ‫أف‬ ‫حيث‬id‫الصفحة‬ ‫ضمف‬ ‫إليو‬ ‫اّلنتقاؿ‬ ‫اد‬‫ر‬‫الم‬ ‫العنصر‬ ‫معرؼ‬ ‫يمثؿ‬‫و‬‫المثاؿ‬‫التالي‬‫ىذه‬ ‫ح‬ِّ‫يوض‬ :‫ة‬‫ر‬‫الفك‬ <html> <head> <title> ‫اٌذاخٍ١خ‬ ‫اٌشٚاثؾ‬ ٍٝ‫ػ‬ ‫ِثبي‬ </title> </head> <body> <a href="#Para4">‫اٌشاثؼخ‬ ‫اٌفمشح‬ ٌٝ‫إ‬</a> <h1>ٌٝٚ‫األ‬ ‫اٌفمشح‬</h1> <p>ٌٝٚ‫األ‬ ‫اٌفمشح‬ ٜٛ‫ِحز‬ ‫ٕ٘ب‬</p> <h1>‫اٌثبٔ١خ‬ ‫اٌفمشح‬</h1> <p>‫اٌثبٔ١خ‬ ‫اٌفمشح‬ ٜٛ‫ِحز‬ ‫ٕ٘ب‬</p> <h1>‫اٌثبٌثخ‬ ‫اٌفمشح‬</h1> <p>‫اٌثبٌثخ‬ ‫اٌفمشح‬ ٜٛ‫ِحز‬ ‫ٕ٘ب‬</p> <h1 id="Para4">‫اٌشاثؼخ‬ ‫اٌفمشح‬</h1> <p>‫اٌشاثؼخ‬ ‫اٌفمشح‬ ٜٛ‫ِحز‬ ‫ٕ٘ب‬</p> </body> </html>
  • 44. ٗٗ ‫ائم‬‫و‬‫الق‬Lists ‫لغة‬ ‫توفر‬HTML:‫ائـ‬‫و‬‫الق‬ ‫عناصر‬ ‫مف‬ ‫نوعيف‬ ٔ-‫تبة‬‫ر‬‫الم‬ ‫غير‬ ‫ائـ‬‫و‬‫الق‬Unordered List‫الوسـ‬ ‫عبر‬<ul>. ٕ-‫تبة‬‫ر‬‫الم‬ ‫ائـ‬‫و‬‫الق‬Ordered List‫الوسـ‬ ‫عبر‬<ol>. ‫عناصر‬ ‫مف‬ ‫كمجموعة‬ ‫اىا‬‫و‬‫محت‬ ‫نضيؼ‬ ‫بإنشائيا‬ ‫غب‬‫نر‬ ‫التي‬ ‫القائمة‬ ‫ع‬‫نو‬ ‫بتحديد‬ ‫نقوـ‬ ‫أف‬ ‫بعد‬<li>‫و‬ ‫تعني‬ ‫التي‬List Item‫و‬ ‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬ ,:‫بسيطة‬ ‫تبة‬‫ر‬‫م‬ ‫غير‬ ‫قائمة‬ ‫إنشاء‬ ‫َّة‬‫كيفي‬ ‫يعرض‬ ‫الذي‬ <html> <head> <title>‫ِشرجخ‬ ‫غ١ش‬ ‫لبئّخ‬ ٍٝ‫ػ‬ ‫ِثبي‬</title> </head> <body dir="rtl"> <p>‫اٌىزبة‬ ‫٘زا‬ ٟ‫ف‬ ٍُ‫سٕزؼ‬</p> <ul> <li>HTML</li> <li>HTML5</li> <li>XHTML</li> <li>CSS</li> <li>CSS3</li> </ul> </body> </html> :‫كمايمي‬ ‫المستعرض‬ ‫في‬ ‫عرضو‬ ‫عند‬ ‫يبدو‬ ‫الذي‬ ‫و‬
  • 45. ٗ٘ ‫الشكل‬14:‫بسيطة‬ ‫مرتبة‬ ‫غير‬ ‫لقائمة‬ ‫مثال‬ ‫مف‬ ‫القائمة‬ ‫لعنصر‬ ‫النياية‬ ‫و‬ ‫البداية‬ ‫وسمي‬ ‫بتغيير‬<ul>‫و‬</ul>‫إلى‬<ol>‫و‬</ol>‫ستصبح‬ :‫التالي‬ ‫بالشكؿ‬ ‫تبة‬‫ر‬‫م‬ ‫القائمة‬ ‫الشكل‬15‫بسيطة‬ ‫مرتبة‬ ‫قائمة‬ ‫عمى‬ ‫مثال‬ :
  • 46. ٗٙ ‫الفصؿ‬ ‫ىذا‬ ‫بداية‬ ‫منذ‬ ‫ذكرت‬ ‫كما‬ ‫و‬ ‫بالطبع‬‫فإف‬‫عناصر‬ ‫مف‬ ‫عنصر‬ ‫أي‬HTML‫يحوي‬ ‫أف‬ ‫يمكف‬ ‫نيايتو‬ ‫و‬ ‫بدايتو‬ ‫وسمي‬ ‫بيف‬‫أية‬‫م‬ ‫ى‬‫أخر‬ ‫مجموعة‬‫نستطيع‬ ‫أننا‬ ‫يعني‬ ‫ىذا‬ ‫و‬ ‫العناصر‬ ‫ف‬‫قائمة‬ ‫إنشاء‬ ‫تحوي‬‫يوض‬ ‫التالي‬ ‫المثاؿ‬ ‫و‬ ,‫ليا‬ ‫كعناصر‬ ‫َّة‬‫عي‬‫فر‬ ‫ائـ‬‫و‬‫ق‬:‫ة‬‫ر‬‫الفك‬ ‫ىذه‬ ‫ح‬ <html> <head> <title>‫ِؼمذح‬ ‫لبئّخ‬ ٍٝ‫ػ‬ ‫ِثبي‬</title> </head> <body dir="rtl"> <p>‫اٌىزبة‬ ‫٘زا‬ ٟ‫ف‬ ٍُ‫سٕزؼ‬</p> <ol> <li> HTML <ul> <li>‫انرواتط‬</li> <li>‫انصىر‬</li> <li>‫انقىائم‬ <ul> <li>‫انمرذثح‬</li> <li>‫انمرذثح‬ ‫غير‬</li> </ul> </li> </ul> </li> <li>HTML 5</li>
  • 47. ٗٚ <li>XHTML</li> <li>CSS</li> <li>CSS 3</li> </ol> </body> </html> :‫كمايمي‬ ‫المستعرض‬ ‫في‬ ‫أعاله‬ ‫المثاؿ‬ ‫يبدو‬ ‫الشكل‬16:‫عمى‬ ‫مثال‬‫معقدة‬ ‫قائمة‬ ‫اصفة‬‫و‬‫ال‬ ‫استخداـ‬ ‫يمكف‬ ‫و‬ّ‫أن‬ ‫ائـ‬‫و‬‫الق‬ ‫عف‬ ‫ه‬‫ر‬‫ذك‬ ‫يجب‬ ‫ما‬ ‫آخر‬type‫حالة‬ ‫ففي‬ ‫القائمة‬ ‫شكؿ‬ ‫لتغيير‬ :‫إلييا‬ ‫التالية‬ ‫القيـ‬ ‫إحدى‬ ‫إسناد‬ ‫يمكف‬ ‫تبة‬‫ر‬‫الم‬ ‫غير‬ ‫ائـ‬‫و‬‫الق‬square‫أو‬disc‫أو‬circle‫رمز‬ ‫لوضع‬ ‫تي‬‫ر‬‫الت‬ ‫عمى‬ ‫عنصر‬ ‫كؿ‬ ‫أماـ‬ ‫ة‬‫ر‬‫الدائ‬ ‫أو‬ ‫القرص‬ ‫أو‬ ‫بع‬‫ر‬‫الم‬,‫ب‬‫إسناد‬ ‫يمكف‬ ‫تبة‬‫ر‬‫الم‬ ‫القائمة‬ ‫حالة‬ ‫في‬ ‫و‬
  • 48. ٗٛ ‫القيـ‬ ‫إحدى‬ٔ‫أو‬A‫أو‬a‫أو‬I‫أو‬i‫اصفة‬‫و‬‫ال‬ ‫إلى‬type‫قيـ‬‫ر‬‫ت‬ ,‫بية‬‫ر‬‫ع‬ ‫قاـ‬‫ر‬‫بأ‬ ‫قيـ‬‫ر‬‫ت‬ ‫إلى‬ ‫قيـ‬‫ر‬‫الت‬ ‫لتحويؿ‬ ‫ّلتينية‬ ‫قاـ‬‫ر‬‫بأ‬ ‫قيـ‬‫ر‬‫ت‬ ,‫ة‬‫ر‬‫كبي‬ ‫ّلتينية‬ ‫قاـ‬‫ر‬‫بأ‬ ‫قيـ‬‫ر‬‫ت‬ ,‫ة‬‫ر‬‫صغي‬ ‫ية‬‫ز‬‫إنجمي‬ ‫بأحرؼ‬ ‫قيـ‬‫ر‬‫ت‬ ,‫ة‬‫ر‬‫كبي‬ ‫ية‬‫ز‬‫إنجمي‬ ‫بأحرؼ‬ .‫تيب‬‫ر‬‫الت‬ ‫عمى‬ ‫ة‬‫ر‬‫صغي‬ ‫يوج‬‫الوسـ‬ ‫باستخداـ‬ ‫إنشاؤه‬ ‫يتـ‬ ‫المصطمحات‬ ‫ائـ‬‫و‬‫بق‬ ‫يعرؼ‬ ‫ائـ‬‫و‬‫الق‬ ‫مف‬ ‫خاص‬ ‫ع‬‫نو‬ ‫د‬<dl>‫لعنصر‬ ‫الوسـ‬ ‫و‬ ‫القائمة‬<dt>‫الوسـ‬ ‫و‬ ‫المصطمح‬ ‫لعنصر‬<dd>‫المثاؿ‬ ‫لنشاىد‬ ,‫المصطمح‬ ‫يؼ‬‫ر‬‫تع‬ ‫لعنصر‬ :‫التالي‬ <html> <head> <title>‫ِظـٍحبد‬ ‫لبئّخ‬ ٍٝ‫ػ‬ ‫ِثبي‬</title> </head> <body dir="rtl"> <dl> <dt>HTML</dt> <dd>Hyper Text Markup Language</dd> <dt>XHTML</dt> <dd>eXtensible Hyper Text Markup Language</dd> <dt>CSS</dt> <dd>Cascading Style Sheet</dd> </dl> </body> </html> :‫كمايمي‬ ‫المستعرض‬ ‫في‬ ‫المصطمحات‬ ‫قائمة‬ ‫تبدو‬
  • 49. ٜٗ ‫الشكل‬17‫المستعرض‬ ‫في‬ ‫المصطمحات‬ ‫قائمة‬ ‫تبدو‬ ‫هكذا‬ : ‫الجداول‬Tables ‫لغة‬ ‫توفر‬HTML‫العنصر‬ ‫عبر‬ ‫الجداوؿ‬ ‫إلنشاء‬ ‫آلية‬<table>‫العنصر‬ ‫إنشاء‬ ‫عبر‬ ‫ذلؾ‬ ‫يتـ‬ ‫و‬ <table>‫العرض‬ ‫اصفتي‬‫و‬ ‫ير‬‫ر‬‫تم‬ ‫و‬ ً‫ّل‬ّ‫أو‬width‫الحدود‬ ‫عرض‬ ‫و‬borderَّ‫ثـ‬ ‫مف‬ ‫و‬ ,‫بالبكسؿ‬ ‫الجدوؿ‬ ‫أسطر‬ ‫عنصر‬ ‫عبر‬ ‫الجدوؿ‬ ‫محتويات‬ ‫إنشاء‬table rows‫باستخداـ‬ ‫تحقيقو‬ ‫يتـ‬ ‫الذي‬ ‫و‬ ‫الوسـ‬<tr>‫خاليا‬ ‫محتويات‬ ‫ذكر‬ ‫يتـ‬ َّ‫ثـ‬ ,table data‫و‬ ‫حدى‬ ‫عمى‬ ‫الجدوؿ‬ ‫أسطر‬ ‫مف‬ ‫سطر‬ ‫كؿ‬ ‫الوسـ‬ ‫عبر‬ ‫ذلؾ‬<td>,:‫كمايمي‬ ‫ئي‬‫ر‬‫م‬ ‫بشكؿ‬ ‫تمثيميا‬ ‫يمكف‬ ‫الوسوـ‬ ‫حفظ‬ ‫لتسييؿ‬ ‫و‬ ‫الشكل‬18‫الجدول‬ ‫إلنشاء‬ ‫المستعممة‬ ‫الوسوم‬ ‫لتوضيح‬ ‫تخيمي‬ ‫شكل‬ : ‫جدوؿ‬ ‫بإنشاء‬ ‫تقوـ‬ ‫التي‬ ‫التالية‬ ‫ة‬‫ر‬‫الشيف‬ ‫نشاىد‬ ‫دعنا‬ ‫أكثر‬ ‫توضيحو‬ ‫بغية‬ ً‫ا‬‫عممي‬ ‫المفيوـ‬ ‫ىذا‬ ‫لتطبيؽ‬ ‫و‬ :‫بسيط‬
  • 50. ٘ٓ <html> <head> <title>‫ثس١ؾ‬ ‫جذٚي‬ ‫إٔشبء‬ ٍٝ‫ػ‬ ‫ِثبي‬</title> </head> <body dir="rtl"> <table border="1" width="50%"> <tr> <td>‫انكراب‬ ‫اصم‬</td> <td>‫انضعر‬</td> </tr> <tr> <td>‫انىية‬ ‫ترمجح‬</td> <td>051</td> </tr> <tr> <td>‫انجىال‬ ‫ترمجح‬</td> <td>011</td> </tr> <tr> <td>‫األنعاب‬ ‫ترمجح‬</td> <td>051</td> </tr> <tr> <td>‫انطثخ‬ ‫ذعهم‬</td> <td>51</td>
  • 51. ٘ٔ </tr> </table> </body> </html> :‫كمايمي‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫عرضو‬ ‫عند‬ ‫الجدوؿ‬ ‫ىذا‬ ‫يبدو‬ ‫الشكل‬19:‫بسيط‬ ‫جدول‬ ‫إنشاء‬ ‫عمى‬ ‫مثال‬ ‫الجدوؿ‬ ‫عنصر‬ ‫بإنشاء‬ ً‫ّل‬‫و‬‫أ‬ ‫قمنا‬ ‫فقد‬ ‫أينا‬‫ر‬ ‫كما‬<table>‫بعرض‬width٘ٓ‫الكمي‬ ‫العرض‬ ‫مف‬ % ‫حدود‬ ‫بعرض‬ ‫!),و‬ً‫ا‬‫صحيح‬ ‫يبقى‬ ‫ذلؾ‬ ‫أف‬ ‫لتالحظ‬ ‫المستعرض‬ ‫نافذة‬ ‫حجـ‬ ‫تغيير‬ ‫(حاوؿ‬ ‫لمصفحة‬ borderٔ‫الوسميف‬ ‫باستخداـ‬ ‫جديد‬ ‫سطر‬ ‫بإنشاء‬ ‫قمنا‬ َّ‫ثـ‬ ,‫بكسؿ‬<tr></tr>‫السطر‬ ‫ىذا‬ ‫يحوي‬ , ‫خميتيف‬ ‫عمى‬<td></td>‫القيمة‬ ‫األولى‬ ‫تحوي‬"‫الكتاب‬ ‫اسـ‬"‫القيمة‬ ‫الثانية‬ ‫تحوي‬ ‫و‬"‫السعر‬"‫قمنا‬ َّ‫ثـ‬ , ‫أصبح‬ ‫ع‬‫الموضو‬ ‫أف‬ ‫أظف‬ ,‫الكتب‬ ‫بيانات‬ ‫تحوي‬ ‫التي‬ ‫ى‬‫األخر‬ ‫األسطر‬ ‫مع‬ ‫األسموب‬ ‫نفس‬ ‫ار‬‫ر‬‫بتك‬ .‫اآلف‬ ً‫ا‬‫اضح‬‫و‬ ‫قياس‬ ‫احدة‬‫و‬ ‫بأي‬ ‫أو‬ ً‫ا‬‫أيض‬ ‫بالبكسؿ‬ ‫الجدوؿ‬ ‫عرض‬ ‫قيمة‬ ‫إعطاء‬ ‫يمكف‬ :‫ممحوظة‬‫احدات‬‫و‬‫ال‬ ‫مف‬‫ال‬‫مدعومة‬‫لغة‬ ‫في‬ HTMLً‫ا‬‫ّلحق‬ ‫ىا‬‫ذكر‬ ‫سيتـ‬ ‫التي‬ ‫و‬.
  • 52. ٕ٘ ‫جداوؿ‬ ‫مف‬ ‫جدوؿ‬ ‫كؿ‬ ‫يقسـ‬HTML:‫مناطؽ‬ ‫بع‬‫ر‬‫أ‬ ‫إلى‬ ٔ-‫الجدوؿ‬ ‫أس‬‫ر‬ ‫منطقة‬Table Head‫الوسميف‬ ‫باستخداـ‬ ‫القسـ‬ ‫ىذا‬ ‫نشأ‬ُ‫ي‬ :<thead>‫و‬ </thead>‫سطر‬ ‫عنصر‬ ‫عمى‬ ‫الغالب‬ ‫في‬ ‫يحوي‬ ‫و‬<tr></tr>‫و‬ ‫بدايتو‬ ‫وسمي‬ ‫بيف‬ ‫يحوي‬ ‫ع‬‫النو‬ ‫مف‬ ‫خاليا‬ ‫في‬ ‫الجدوؿ‬ ‫أعمدة‬ ‫عناويف‬ ‫نيايتو‬<th>‫مف‬ ً‫ّل‬‫بد‬<td>‫تـ‬ ‫حيث‬ , ‫أف‬ ‫اّلصطالح‬<td>‫بيانات‬ ‫خمية‬ ‫تعني‬table data‫أف‬ ‫حيف‬ ‫في‬<th>‫خمية‬ ‫تعني‬ ‫اف‬‫و‬‫عن‬table heading. ٕ-‫الجدوؿ‬ ‫جسـ‬ ‫منطقة‬Table Body‫الوسميف‬ ‫باستخداـ‬ ‫القسـ‬ ‫ىذا‬ ‫نشأ‬ُ‫ي‬ :<tbody>‫و‬ </tbody>‫باستخداـ‬ ‫تنشأ‬ ‫التي‬ ‫و‬ ‫البيانات‬ ‫سطور‬ ‫عمى‬ ‫يحوي‬ ‫و‬<tr>‫خالياىا‬ ‫أف‬ ‫بما‬ ‫و‬ ‫الوسوـ‬ ‫باستخداـ‬ ‫تنشأ‬ ‫الخاليا‬ ‫فإف‬ ‫معمومات‬ ‫تحوي‬<td>. ٖ-‫الجدوؿ‬ ‫ذيؿ‬ ‫منطقة‬Table Foot‫الوسميف‬ ‫باستخداـ‬ ‫القسـ‬ ‫ىذا‬ ‫نشأ‬ُ‫ي‬ :<tfoot>‫و‬ </tfoot>‫سطر‬ ‫عنصر‬ ‫عمى‬ ‫الغالب‬ ‫في‬ ‫يحوي‬ ‫و‬<tr></tr>‫يحو‬‫و‬ ‫بدايتو‬ ‫وسمي‬ ‫بيف‬ ‫ي‬ ‫ع‬‫النو‬ ‫مف‬ ‫خاليا‬ ‫في‬ ‫الجدوؿ‬ ‫أعمدة‬ ‫عف‬ ‫ممخصات‬ ‫نيايتو‬<th>. ٗ-‫الجدوؿ‬ ‫اف‬‫و‬‫عن‬Caption‫وسمي‬ ‫بيف‬ ‫اف‬‫و‬‫العن‬ ‫نص‬ ‫بكتابة‬ ‫الجدوؿ‬ ‫اف‬‫و‬‫عن‬ ‫ضاؼ‬ُ‫ي‬ : <caption>‫و‬</caption>:‫المختمفة‬ ‫الجدوؿ‬ ‫مناطؽ‬ ‫التالي‬ ‫الشكؿ‬ ‫ح‬ِّ‫يوض‬ , ‫الشكل‬21:‫توضيحي‬ ‫رسم‬‫أل‬‫في‬ ‫الجدول‬ ‫قسام‬HTML
  • 53. ٖ٘ ‫ة‬‫ر‬‫شيف‬ ‫سنكتب‬ ‫صفحتنا‬ ‫في‬ ‫المذكور‬ ‫الجدوؿ‬ ‫لتحقيؽ‬HTML:‫التالية‬ <html> <head> <title>ٌٟ‫ِثب‬ ‫جذٚي‬ ‫إٔشبء‬ ٍٝ‫ػ‬ ‫ِثبي‬</title> </head> <body dir="rtl"> <table border="1" width="50%"> <caption>‫انكرة‬ ‫شراء‬ ‫فاذىرج‬</caption> <thead> <tr> <th>‫انكراب‬ ‫اصم‬</th> <th>‫انضعر‬</th> </tr> </thead> <tbody> <tr> <td>‫اٌٛ٠ت‬ ‫ثشِجخ‬</td> <td>150</td> </tr> <tr> <td>‫اٌجٛاي‬ ‫ثشِجخ‬</td>
  • 55. ٘٘ ‫الشكل‬21‫جدول‬ ‫إلنشاء‬ ‫مثال‬ :HTML‫مثالي‬ ‫الذيؿ‬ ‫و‬ ‫أس‬‫ر‬‫ال‬ ‫منطقتي‬ ‫في‬ ‫الموجودة‬ ‫األسطر‬ ‫أف‬ ‫كما‬ ,‫الجدوؿ‬ ‫أعمى‬ ‫يظير‬ ‫اف‬‫و‬‫العن‬ َّ‫فإف‬ ‫تالحظ‬ ‫كما‬ ‫يض‬‫ر‬‫ع‬ ‫بخط‬ ‫تظير‬bold. ‫البسيطة‬ ‫غير‬ ‫الجداول‬ ‫حالة‬ ‫مثؿ‬ ‫لحالة‬ ‫فبالنسبة‬ ً‫ا‬‫أيض‬ ً‫ا‬‫بسيط‬ ‫و‬ ً‫ال‬‫جمي‬ ‫كاف‬ ‫الماضية‬ ‫ة‬‫ر‬‫الفق‬ ‫في‬ ‫اضو‬‫ر‬‫استع‬ ‫تـ‬ ‫ما‬ ‫الحقيقة‬ ‫في‬ ‫الحاّلت‬ ‫عف‬ ‫ماذا‬ ‫لكف‬ ‫و‬ ‫بسيط‬ ‫أمر‬ ‫األسطر‬ ‫مف‬ ‫بمجموعة‬ ‫و‬ ‫بعموديف‬ ً‫ّل‬‫و‬‫جد‬ ‫فإف‬ ‫اء‬‫ر‬‫الش‬ ‫ة‬‫ر‬‫فاتو‬ ‫األس‬ ‫ّل‬ ‫و‬ ,‫األحجاـ؟‬ ‫متساوية‬ ‫الخاليا‬ ‫فييا‬ ‫تكوف‬ ‫ّل‬ ‫التي‬ ‫الحاّلت‬ ‫عف‬ ‫ماذا‬ ,‫األعقد؟‬‫متساوية‬ ‫طر‬ ‫تجيب‬ ,‫الخاليا؟‬ ‫عدد‬HTML‫اصفتيف‬‫و‬‫ال‬ ‫تقديـ‬ ‫عبر‬ ‫ة‬ّ‫ق‬‫المح‬ ‫ّلت‬‫ؤ‬‫التسا‬ ‫ىذه‬ ‫عمى‬rowspan‫و‬ colspan. ‫اصفتاف‬‫و‬‫ال‬ ‫تستخدـ‬rowspan‫و‬colspan‫الخمية‬ ‫بداية‬ ‫وسـ‬ ‫مع‬<td>‫أو‬<th>‫إلييما‬ ‫تسند‬ ‫و‬ ( ‫صحيحة‬ ‫قمية‬‫ر‬ ‫قيمة‬ٔ‫أو‬ٕ‫أو‬ٖ‫خميت‬ ‫بحجـ‬ ‫فتجعميا‬ ‫الخمية‬ ‫حجـ‬ ‫مف‬ ‫تغير‬ )‫إلخ‬ ..‫ثالث‬ ‫أو‬ ‫يف‬ ‫أف‬ ‫حيث‬ ,‫إلخ‬ .. ‫بع‬‫ر‬‫أ‬ ‫أو‬rowspan‫أما‬ ,‫الخمية‬ ‫بعرض‬ ‫تتحكـ‬colspan.‫الخمية‬ ‫تفاع‬‫ر‬‫با‬ ‫فتتحكـ‬ :‫المثاؿ‬ ‫سبيؿ‬ ‫عمى‬ ‫التالية‬ ‫ة‬‫ر‬‫الشيف‬ ‫لنشاىد‬
  • 56. ٘ٙ <html> <head> <title>‫ثس١ؾ‬ ‫غ١ش‬ ‫جذٚي‬ ‫إٔشبء‬ ٍٝ‫ػ‬ ‫ِثبي‬</title> </head> <body dir="rtl"> <table border="1" width="100%"> <tbody> <tr> <td>‫اٌىزبة‬ ُ‫اس‬</td> <td>ٍُ‫رؼ‬ jQuery ٟ‫ف‬021‫دل١مخ‬ </td> <td rowspan="3"> <img src="jQuery120.png"> </td> </tr> <tr> <td>‫اٌّؤٌف‬</td> <td>‫طبٌح‬ ‫س١ذ‬ ‫ِخزبس‬</td> </tr> <tr> <td>‫اإلطذاس‬ ‫سٕخ‬</td> <td>2010</td> </tr> <tr> <td colspan="3"> ‫ِىزجخ‬ ٓ‫ػ‬ ‫ِؼٍِٛبد‬ ‫اٌىزبة‬ ‫٘زا‬ َ‫٠مذ‬jQuery
  • 57. ٘ٚ ً‫ثشى‬‫إٌخ‬ ..... ‫ٚاػح‬ ٚ ‫ِجسؾ‬. </td> </tr> </tbody> </table> </body> </html> ‫السابقة‬ ‫ة‬‫ر‬‫الشيف‬ ‫تبدو‬:‫كمايمي‬ ‫المستعرض‬ ‫في‬ ‫عرضيا‬ ‫عند‬ ‫الشكل‬22‫اصفتين‬‫و‬‫ال‬ ‫باستخدام‬ ‫بسيط‬ ‫غير‬ ‫جدول‬ ‫إنشاء‬ ‫عمى‬ ‫مثال‬ :rowspan‫و‬colspan ‫منيا‬ ‫احدة‬‫و‬ ‫خاليا‬ ‫ثالث‬ ‫عمى‬ ‫ؿ‬َّ‫األو‬ ‫السطر‬ ‫يحوي‬ ‫سطور‬ ‫بعة‬‫ر‬‫أ‬ ‫مف‬ ‫يتكوف‬ ‫الجدوؿ‬ ّ‫فإف‬ ‫ى‬‫تر‬ ‫كما‬ ‫تعنيو‬ ‫ما‬ ‫(ىذا‬ ً‫ة‬‫مجتمع‬ ‫أسطر‬ ‫ثالثة‬ ‫تفاع‬‫ر‬‫ا‬ ‫يعادؿ‬ ‫تفاع‬‫ر‬‫با‬rowspan="3"‫مف‬ ‫األخير‬ ‫السطر‬ ‫ا‬َّ‫أم‬ ,) ‫تعنيو‬ ‫ما‬ ‫ىذا‬ ‫(و‬ ً‫ة‬‫مجتمع‬ ‫الثالثة‬ ‫الجدوؿ‬ ‫أعمدة‬ ‫بعرض‬ ‫احدة‬‫و‬ ‫خمية‬ ‫عمى‬ ‫فيحوي‬ ‫الجدوؿ‬
  • 58. ٘ٛ colspan="3"‫اصفتيف‬‫و‬‫ال‬ ‫استخداـ‬ ‫أف‬ ‫أظف‬ ,)rowspan‫و‬colspan‫و‬ ,‫اآلف‬ ً‫ا‬‫اضح‬‫و‬ ‫أصبح‬ ‫بتغيير‬ ‫ا‬‫و‬‫يقوم‬ ‫أف‬ ‫أنصحيـ‬ ‫و‬ ‫منيـ‬ ‫فأعتذر‬ ‫ليـ‬ ‫بالنسبة‬ ‫ة‬‫ر‬‫الصو‬ ‫تتضح‬ ‫لـ‬ ‫الذيف‬ ‫ألصدقائي‬ ‫بالنسبة‬ ‫اصفتيف‬‫و‬‫ال‬ ‫في‬ ‫ة‬‫ر‬‫المذكو‬ ‫القيـ‬rowspan‫و‬colspan‫الحاصؿ‬ ‫الفرؽ‬ ‫ا‬‫و‬‫يالحظ‬ ‫و‬ ‫السابؽ‬ ‫المثاؿ‬ ‫في‬ ‫أحجاـ‬ ‫في‬.‫أظف‬ ‫كما‬ ‫لدييـ‬ ‫أفضؿ‬ ‫ر‬ّ‫تصو‬ ‫تشكيؿ‬ ‫في‬ ً‫ا‬‫ر‬‫كثي‬ ‫يساعد‬ ‫فيذا‬ ‫الخاليا‬ :‫ممحوظة‬‫قمبي‬ ‫ليطمئف‬‫عناصر‬ ‫مف‬ ‫أي‬ ‫وضع‬ ‫بإمكانؾ‬ ‫أنو‬ ‫أذكرؾ‬ ‫أف‬ ‫أحب‬HTML.‫الجدوؿ‬ ‫خاليا‬ ‫في‬ ‫كمحتوى‬ ‫النماذج‬Forms ‫النماذج‬ ‫تستخدـ‬Forms‫لغة‬ ‫في‬HTML‫المدخالت‬ ‫ّلستقباؿ‬Inputs‫عرضيا‬ ‫بغية‬ ‫المستخدـ‬ ‫مف‬ ‫يني‬‫ز‬‫تخ‬ ‫أو‬‫الوسميف‬ ‫باستخداـ‬ ‫النماذج‬ ‫إنشاء‬ ‫يتـ‬ ,‫عمييا‬ ‫معينة‬ ‫معالجة‬ ‫بعمميات‬ ‫القياـ‬ ‫أو‬ ‫ا‬<form> ‫و‬</form>‫اإلدخاؿ‬ ‫عناصر‬ ‫مف‬ ‫مجموعة‬ ‫بينيما‬ ‫سيحوياف‬ ‫الذاف‬<input>‫بعات‬‫ر‬‫م‬ ‫مثؿ‬ ‫النصوص‬text boxes‫اّلختيار‬ ‫عناصر‬ ‫و‬check boxes‫ار‬‫ر‬‫األز‬ ‫و‬buttons‫ائـ‬‫و‬‫الق‬ ‫و‬ ‫المنسدلة‬select lists...‫إلخ‬ ‫النموذج‬ ‫عنصر‬ ‫بداية‬ ‫وسـ‬ ‫تزويد‬ ‫يتـ‬<form>‫اصفة‬‫و‬‫ال‬ ‫ىي‬ ‫األولى‬ ‫أساسيتيف‬ ‫اصفتيف‬‫و‬‫ب‬action‫و‬ ‫الممؼ‬ ‫يكوف‬ ‫و‬ ‫النموذج‬ ‫في‬ ‫المدخمة‬ ‫البيانات‬ ‫بمعالجة‬ ‫سيقوـ‬ ‫الذي‬ ‫البرمجي‬ ‫الممؼ‬ ‫اسـ‬ ‫تحدد‬ ‫التي‬ ‫فر‬‫ر‬‫السي‬ ‫طرؼ‬ ‫مف‬ ‫البرمجة‬ ‫لغات‬ ‫بإحدى‬ ً‫ا‬‫مكتوب‬ ‫البرمجي‬Server Side‫مثؿ‬PHP‫أو‬ ASP.NET‫أو‬JSP( ‫إلخ‬ .. ‫أو‬‫و‬‫فر‬‫ر‬‫السي‬ ‫طرؼ‬ ‫مف‬ ‫البرمجة‬‫نطاؽ‬ ‫ج‬‫خار‬ ‫ع‬‫موضو‬,)‫الكتاب‬ ‫ىذا‬ ‫اصفة‬‫و‬‫ال‬ ‫فيي‬ ‫الثانية‬ ‫اصفة‬‫و‬‫ال‬ ‫ا‬ّ‫أم‬method‫البرمجي‬ ‫الممؼ‬ ‫إلى‬ ‫البيانات‬ ‫إرساؿ‬ ‫يقة‬‫ر‬‫ط‬ ‫تحدد‬ ‫التي‬ ‫و‬ :‫يقتيف‬‫ر‬‫ط‬ ‫بإحدى‬ ً‫ا‬‫سابق‬ ‫المذكور‬ ٔ-‫يقة‬‫ر‬‫الط‬ ‫ىي‬ ‫األولى‬ ‫يقة‬‫ر‬‫الط‬get‫في‬ ‫البيانات‬ ‫إرساؿ‬ ‫يتـ‬ ‫حيث‬‫في‬ ‫اف‬‫و‬‫العن‬ ‫يط‬‫ر‬‫ش‬ ‫عمى‬ ‫التالي‬ ‫ابط‬‫ر‬‫لم‬ ‫انظر‬ ,‫مفتاح/قيمة‬ ‫اج‬‫و‬‫أز‬ ‫بشكؿ‬ ‫البرمجي‬ ‫الممؼ‬ ‫اسـ‬ ‫بعد‬ ‫المستعرض‬ :‫المثاؿ‬ ‫سبيؿ‬