كتاب تعلم Html5 css3

3,334
-1

Published on

كتاب رائع لتعلم لغات البرمجة HTML5 و CSS3 كتاب تعلم كيفية إنشاء موقع مع CSS3 و HTML5
لن أطول عليكم، وأتمنى لكم قراءة جيدة.

Published in: Education
1 Comment
8 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,334
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
386
Comments
1
Likes
8
Embeds 0
No embeds

No notes for slide

كتاب تعلم Html5 css3

  1. 1. : ‫المبدع‬ ‫ـ‬ّ‫لممصم‬ ‫الغالؼ‬ ‫تصميـ‬ ‫اىيـ‬‫ر‬‫اإلب‬ ‫يز‬‫ز‬‫عبدالع‬ ‫بدر‬
  2. 2. ‫م‬َّ‫م‬‫تع‬ HTML5 & CSS3 (‫نحو‬ ‫األولى‬ ‫الخطوة‬‫البرمجة‬‫لمويب‬) ‫صالح‬ ‫ِّد‬‫سي‬ ‫مختار‬ ‫الميندس‬
  3. 3. ‫ؼ‬ِّ‫ل‬‫لممؤ‬ ‫محفوظة‬ ‫الحقوؽ‬ ‫جميع‬
  4. 4. ‫اإلهداء‬ ‫نخمتيف‬ ‫أعمى‬ ‫إلى‬ِ‫القمب‬ ‫ضفاؼ‬ ‫عمى‬... .‫اهلل‬ ‫حفظيما‬ َّ‫الدي‬‫و‬
  5. 5. ٜ ‫تنويه‬ ُ‫غت‬‫فر‬‫تأليؼ‬ ‫مف‬‫في‬ ‫الكتاب‬ ‫ىذا‬‫األولى‬ ‫األشير‬‫مف‬‫عاـ‬ٕٓٔٔ,ُ‫عقدت‬ ‫قد‬ ‫كنت‬ ‫و‬‫عمى‬ َ‫العزـ‬ ً‫ا‬‫مطبوع‬ ‫ه‬‫ر‬‫إصدا‬َّ‫كأو‬‫بي‬‫ر‬‫ع‬ ‫كتاب‬ ‫ؿ‬‫موضوعو‬ ‫في‬,ً‫ا‬‫حاذي‬‫بذلؾ‬‫حذو‬‫و‬ ‫أخيو‬‫ـ‬ّ‫م‬‫(تع‬ ‫سابقو‬jQuery ‫في‬ٕٔٓ)‫دقيقة‬,َّ‫لكف‬‫مشيئة‬‫اهلل‬‫قضت‬ّ‫أّل‬‫بعد‬ ‫المحظة‬ ‫ىذه‬ ‫ى‬ّ‫حت‬ ‫لذلؾ‬ ‫المالئمة‬ ‫الظروؼ‬ ‫أ‬ّ‫تتيي‬ ‫مرور‬ ‫مع‬ ‫تتضاءؿ‬ ‫كيذا‬ ٍ‫عمؿ‬ ‫قيمة‬ َّ‫أف‬ ‫أؤمف‬ ‫ني‬َّ‫ألن‬ ‫و‬ , ‫إتمامو‬ ‫عمى‬ ً‫ا‬‫ر‬‫شي‬ ‫يف‬‫ر‬‫عش‬ ‫و‬ ‫خمسة‬ ‫انقضاء‬ ‫الوقت‬‫أيت‬‫ر‬ ‫فقد‬-‫تفكير‬ ‫بعد‬-‫ه‬‫ر‬‫أنش‬ ‫أف‬ً‫ا‬‫مخمص‬‫اني‬ّ‫مج‬ ٍ‫بشكؿ‬( ِّ‫اإللكتروني‬ ‫الكتاب‬ ‫بصيغة‬PDF) .‫األسطر‬ ‫ىذه‬ ‫كتابة‬ ‫مف‬ ‫أكثر‬ ‫ي‬ّ‫من‬ ‫ب‬ّ‫م‬‫يتط‬ ‫ّل‬ ‫يغة‬ّ‫الص‬ ‫بيذه‬ ‫ه‬‫ر‬‫نش‬ ‫كاف‬ ‫ا‬ّ‫لم‬ ‫بو‬ ‫ينتفع‬ ‫ارسيف‬ّ‫الد‬ ‫أحد‬ َّ‫لعؿ‬ ‫مختار‬ ‫البوكماؿ‬ٔٓ/ٙ/ٕٖٓٔ
  6. 6. ٔٓ
  7. 7. ٔٔ ‫الكتاب‬ ‫يدي‬ ‫بين‬ ‫حيـ‬ّ‫الر‬ ‫حمف‬ّ‫الر‬ ‫اهلل‬ ‫بسـ‬َّ‫الس‬ ‫و‬ ‫َّالة‬‫الص‬ ‫و‬ ,‫و‬ ِ‫آلو‬ ‫عمى‬ ‫و‬ ٍ‫د‬َّ‫محم‬ ‫ِّنا‬‫نبي‬ ‫عمى‬ ‫الـ‬‫أجمعيف‬ ِ‫أصحابو‬,‫و‬ :‫بعد‬ ‫ػ‬‫ل‬‫ا‬ ‫د‬ُ‫ع‬َ‫ي‬ ‫لـ‬Web‫بسيط‬ ‫ي‬ِّ‫نص‬ ‫بشكؿ‬ ‫المعمومة‬ ‫تقديـ‬ ‫عمى‬ ً‫ا‬‫ر‬‫مقتص‬ ‫اليوـ‬,‫تقديـ‬ ‫الميـ‬ ‫مف‬ ‫أصبح‬ ‫حيث‬ ‫المحتوى‬‫أسموب‬ ‫و‬ ‫بشكؿ‬‫اإلعالمي‬ ‫إلى‬ ‫يكوف‬ ‫ما‬ ‫أقرب‬,‫ف‬ ,ً‫ال‬‫فع‬ ‫كذلؾ‬ ‫ىو‬ ‫َّما‬‫ب‬‫ر‬ ‫بؿ‬‫أصبح‬ ‫قد‬‫مف‬ ‫النادر‬-‫أيي‬‫ر‬‫ب‬-‫ػ‬‫ل‬‫ا‬ ‫اقع‬‫و‬‫م‬ ‫في‬ ‫تجد‬ ‫أف‬Web‫اليوـ‬-‫منيا‬ ‫الجيدة‬ ‫اقع‬‫و‬‫الم‬ ‫أعني‬ ‫و‬-‫يقدـ‬ ‫ّل‬ ‫ما‬ ‫الشكؿ‬ ‫إلى‬ ‫إضافة‬ ‫ئي‬‫ر‬‫م‬ ‫و‬ ‫ع‬‫مسمو‬ ‫بشكؿ‬ ‫المعمومات‬‫التقميدي‬‫المقروء‬‫و‬‫ناحية‬ ‫مف‬ ‫ىذا‬,‫مف‬ ‫أما‬ ‫ال‬‫ناحية‬‫األ‬‫ػ‬‫ل‬‫ا‬ ‫ر‬َّ‫تطو‬ ‫فقد‬ ‫ى‬‫خر‬Web‫ػ‬‫ل‬‫ػا‬‫ب‬ ‫يعرؼ‬ ‫لما‬ ‫التنظير‬ ‫بدء‬ ‫مع‬ ‫كفيوـ‬ ‫ذاتو‬Web 2.0‫عاـ‬ ٕٓٓٙ‫ظيور‬ ‫إلى‬ ‫بالنتيجة‬ ‫ى‬ّ‫أد‬ ‫ما‬ ‫ىذا‬ ‫و‬ ,‫كانت‬ ‫التي‬ ‫البرمجية‬ ‫المغات‬ ‫و‬ ‫ات‬‫و‬‫األد‬ ‫لتطوير‬ ‫الحاجة‬ ‫ػ‬‫ل‬‫ا‬ ‫اقع‬‫و‬‫م‬ ‫مصممي‬ ‫و‬ ‫ي‬‫مطور‬ ‫يدي‬ ‫بيف‬Web‫العمالء‬ ‫متطمبات‬ ‫تحقيؽ‬ ‫عف‬ ً‫ة‬‫ر‬‫قاص‬ ‫أصبحت‬ ‫التي‬ ‫و‬ ‫ية‬‫ر‬‫عص‬ ‫ويب‬ ‫اقع‬‫و‬‫م‬ ‫بامتالؾ‬ ‫الطموحيف‬‫التي‬ ‫و‬‫ب‬ ‫التقنية‬ ‫أمر‬ ‫ييمو‬ ‫مف‬ ‫قاـ‬ ‫ما‬ ‫عاف‬‫سر‬‫ىا‬‫تطوير‬‫تقديـ‬ ‫و‬ ‫تأقم‬ ‫أكثر‬ ‫و‬ ‫أقوى‬ ‫منيا‬ ‫جديدة‬ ‫ات‬‫ر‬‫إصدا‬‫مع‬ ً‫ا‬‫م‬Web‫اليوـ‬ّ‫ألف‬ ‫ذلؾ‬ ,"‫في‬ ‫النجاح‬ ‫أساس‬ ‫يعتبر‬ ‫التأقمـ‬ ‫ػ‬‫ل‬‫ا‬ ‫عالـ‬Web". ‫ي‬‫الكتاب‬ ‫ىذا‬ ‫ناقش‬‫مف‬ ‫لكؿ‬ ‫إصدار‬ ‫أحدث‬‫لغتي‬HTML‫و‬CSS‫األولى‬ ‫الخطوة‬ ‫اف‬‫ر‬‫تعتب‬ ‫المتاف‬ ُ‫م‬ ‫ألي‬َ‫ط‬‫ر‬ِّ‫و‬Web‫إذ‬‫ح‬‫بشر‬ ‫يقوـ‬‫لغة‬HTML5‫ح‬‫شر‬ ‫خالؿ‬ ‫مف‬ ‫لذلؾ‬ ‫التمييد‬ ‫بعد‬HTML‫التقميدية‬ ‫الصفر‬ ‫مف‬‫و‬‫معايير‬ َّ‫ثـ‬ ‫مف‬XHTMLً‫ا‬‫أيض‬ ‫الصفر‬ ‫مف‬,‫كما‬‫ػ‬‫ل‬ ً‫ال‬َّ‫مفص‬ ً‫ا‬‫شرح‬ ‫الكتاب‬ ‫ىذا‬ ‫ـ‬ِّ‫يقد‬ CSS3‫ح‬‫شر‬ ‫خالؿ‬ ‫مف‬ ‫لذلؾ‬ ‫التمييد‬ ‫بعد‬CSS‫التقميدية‬ً‫ا‬‫أيض‬ ‫الصفر‬ ‫مف‬‫الكتاب‬ ‫ىذا‬ ‫فإف‬ ‫بيذا‬ ‫و‬ , ‫يتألؼ‬‫مف‬‫فصميف‬: ٔ-HTML5‫الفصؿ‬ ‫ىذا‬ ‫يناقش‬ :( ‫الخامس‬ ‫اإلصدار‬‫و‬‫مف‬ )‫األحدث‬‫َّة‬‫النصي‬ ‫البرمجة‬ ‫لغة‬ ‫الت‬‫َّة‬‫شعبي‬HTML‫كتابة‬ ‫عمى‬ ً‫ا‬‫ر‬‫قاد‬ ‫يكوف‬ ‫أف‬ ‫ئو‬‫ر‬‫لقا‬ ‫يضمف‬ ‫و‬ ‫ج‬َّ‫متدر‬ ‫و‬ ‫َّؿ‬‫مفص‬ ‫بشكؿ‬ .‫اهلل‬ ‫بإذف‬ ‫يده‬‫ر‬‫ي‬ ‫الذي‬ ‫بالشكؿ‬ ‫و‬ ‫غبو‬‫ير‬ ‫الذي‬ ‫بالمحتوى‬ ‫ويب‬ ‫صفحات‬
  8. 8. ٕٔ ٕ-CSS3‫ا‬ ‫ىذا‬ ‫يناقش‬ :( ‫الثالث‬ ‫اإلصدار‬ ‫يقدميا‬ ‫التي‬ ‫ايا‬‫ز‬‫الم‬ ‫كامؿ‬ ‫لفصؿ‬‫و‬‫مف‬ )‫األحدث‬ ‫َّة‬‫اّلنسيابي‬ ‫األنماط‬ ‫اؽ‬‫ر‬‫أو‬CSS‫مف‬ ‫و‬ ‫بسيط‬ ‫بشكؿ‬‫يوـ‬,‫عمى‬ ً‫ا‬‫ر‬‫قاد‬ ‫يكوف‬ ‫أف‬ ‫ئو‬‫ر‬‫قا‬ ‫يعد‬ ‫و‬ ‫تجميؿ‬‫في‬ ‫مو‬َّ‫قد‬ ‫الذي‬ ‫المحتوى‬‫الويب‬ ‫صفحات‬.‫ؿ‬َّ‫األو‬ ‫الفصؿ‬ ‫في‬ ‫كتابتيا‬ ‫ـ‬َّ‫تعم‬ ‫التي‬ ٖ-‫عف‬ ‫الحديث‬ ‫يكتمؿ‬ ‫كي‬‫لمويب‬ ‫البرمجة‬‫العميؿ‬ ‫طرؼ‬ ‫مف‬Client Side‫أف‬ ‫يجب‬ ‫كاف‬ ‫فصؿ‬ ‫ىناؾ‬ ‫يكوف‬‫ثالث‬‫لغة‬ ‫عف‬ ‫يتحدث‬Java Script‫الحداثة‬ ‫أنصار‬ ‫مف‬ ‫ألنني‬ ‫و‬ ‫لكف‬ ‫و‬ )‫السيولة‬ ‫(و‬‫كتابي‬ ‫اءة‬‫ر‬‫بق‬ ‫يز‬‫ز‬‫الع‬ ‫ئ‬‫القار‬ ‫فأنصح‬ ‫البرمجية‬ ‫بالتقنيات‬ ‫يتعمؽ‬ ‫فيما‬"‫ـ‬َّ‫تعم‬ jQuery‫في‬ٕٔٓ‫دقيقة‬"‫لغة‬ ‫عف‬ ‫يتحدث‬ ‫جع‬‫مر‬ ‫أي‬ ‫أو‬jQuery‫َّط‬‫مبس‬ ‫و‬ ‫اضح‬‫و‬ ‫بشكؿ‬ ً‫ّل‬‫و‬‫أ‬ ‫الكتاب‬ ‫ىذا‬ ‫اءة‬‫ر‬‫ق‬ ‫بعد‬‫ألف‬ ,jQuery‫لمغة‬ ‫ي‬‫العصر‬ ‫البديؿ‬ ‫ىي‬Java Script‫أيي‬‫ر‬‫ب‬. ‫ف‬ ‫الكتاب‬ ‫ىذا‬ ‫في‬ ‫األفكار‬ ‫عرض‬ ‫يقة‬‫ر‬‫ط‬ ‫عف‬ ‫ا‬ّ‫أم‬‫أجعم‬ ‫كي‬ ‫اجتيدت‬ ‫و‬ ‫حاولت‬ ‫قد‬‫يا‬‫غير‬‫ّل‬ ‫و‬ ‫ة‬َّ‫ممم‬ ‫و‬ ‫دة‬َّ‫ق‬‫مع‬‫ّل‬ً‫ا‬‫ر‬‫كثي‬ ‫الذي‬ ‫المتعب‬ ‫بالمحتوى‬ ‫شبيية‬‫عانيت‬ ‫ما‬‫منو‬‫البرمجة‬ ‫لغات‬ ‫تناقش‬ ‫التي‬ ‫الكتب‬ ‫في‬ ‫لألسؼ‬‫أف‬ ‫أقوؿ‬ ‫أف‬ ‫يمكنني‬ ‫و‬‫ى‬‫الكتاب‬ ‫ذا‬َّ‫البرمجي‬ ‫األسطر‬ ‫ات‬‫ر‬‫عش‬ ‫ر‬ِّ‫يفج‬ ‫ّل‬ً‫ة‬‫دفع‬ ‫المفيومة‬ ‫غير‬ ‫ة‬ ,‫ة‬‫ر‬‫الفك‬ ‫عرض‬ ‫في‬ ‫المطموب‬ ‫مف‬ ‫أكثر‬ ‫يطيؿ‬ ‫ّل‬ ‫و‬َّ‫أن‬ ‫كما‬ ,‫ليا‬ ‫توضيح‬ ‫دوف‬ ‫ئو‬‫ر‬‫قا‬ ‫وجو‬ ‫في‬ ً‫احدة‬‫و‬‫لكنو‬ ‫باختصار‬.‫فتيا‬‫ر‬‫مع‬ ‫تتوجب‬ ‫التي‬ ‫انب‬‫و‬‫الج‬ ‫مف‬ ‫جانب‬ ‫أي‬ ‫يغفؿ‬ ‫أف‬ ‫دوف‬ ‫فقط‬ ‫قولو‬ ‫يجب‬ ‫ما‬ ‫يقوؿ‬ ً‫ا‬‫ختام‬‫و‬ ‫العمؿ‬ ‫ىذا‬ ‫َّؿ‬‫يتقب‬ ‫أف‬ ‫اهلل‬ ‫أسأؿ‬‫أف‬‫يكتبو‬ ‫و‬ ‫فيو‬ ‫يبارؾ‬ً‫ة‬‫صدق‬ً‫ة‬‫ي‬‫ر‬‫جا‬‫مف‬‫باب‬‫ينتفع‬ ‫الذي‬ ‫العمـ‬ .‫ـ‬ُّ‫التعم‬ ‫عمى‬ ‫الصبر‬ ‫و‬ ‫الحفظ‬ ‫و‬ ‫الفيـ‬ ‫ئو‬‫ر‬‫قا‬ ‫يميـ‬ ‫أف‬ ‫و‬ ‫بو‬ ‫صالح‬ ‫ِّد‬‫سي‬ ‫ـ.مختار‬ ‫البوكماؿ‬ٕٛ/ٛ/ٕٓٔٔ
  9. 9. ٖٔ ‫الفصؿ‬‫ؿ‬َّ‫األو‬ HTML 5
  10. 10. ٔٗ
  11. 11. ٔ٘ ‫مقدمة‬ ‫لغة‬ ‫الفصؿ‬ ‫ىذا‬ ‫يناقش‬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,‫و‬‫بالطبع‬‫ّل‬‫يوجد‬‫أي‬‫فرؽ‬‫بينيما‬. ٔ ‫قبمي‬ ‫أحد‬ ‫قاـ‬ ‫إف‬ ‫أعرؼ‬ ‫ّل‬.‫األنسب‬ ‫الترجمة‬ ‫أنيا‬ ‫أشعر‬ ‫ني‬ّ‫لكن‬ ‫يقة‬‫ر‬‫الط‬ ‫بيذه‬ ‫بترجمتيا‬
  12. 12. ٔٙ ‫تتكوف‬‫مستندات‬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
  13. 13. ٔٚ </title> </head> <body> <p> Welcome to my first HTML page! </p> </body> </html> ‫باسـ‬ ‫الممؼ‬ ‫بحفظ‬ ‫نقوـ‬ َّ‫ثـ‬firstPage.html ‫الشكل‬1:‫ة‬‫شيفر‬ ‫أول‬ ‫كتابة‬HTML‫الممف‬ ‫حفظ‬ ‫و‬ ‫ة‬‫المفكر‬ ‫برنامج‬ ‫في‬ ‫الالحقة‬ ‫عف‬ ‫مختمفة‬ ‫بالحقة‬ ‫الممؼ‬ ‫لحفظ‬ : ‫ممحوظة‬.txt,‫يقتاف‬‫ر‬‫ط‬ ‫ىناؾ‬‫الممفات‬ ‫جميع‬ ‫الخيار‬ ‫نختار‬ ‫أف‬ ‫األولى‬ *.*‫ػ‬‫ك‬ ‫حفظ‬ ‫المنسدلة‬ ‫القائمة‬ ‫مف‬Save as type‫نك‬ ‫ثـ‬ ‫الممؼ‬ ‫اسـ‬ ‫أسفؿ‬ ‫ة‬‫ر‬‫الصو‬ ‫في‬ ‫ة‬‫ر‬‫الظاى‬‫و‬ ‫الممؼ‬ ‫اسـ‬ ‫تب‬ ,‫عادي‬ ‫بشكؿ‬ ‫ّلحقتو‬‫أف‬ ‫فيي‬ ً‫ا‬َّ‫شخصي‬ ‫ميا‬ِّ‫أفض‬ ‫التي‬ ‫و‬ ‫الثانية‬ ‫ا‬َّ‫أم‬‫عالمتي‬ ‫بيف‬ ‫المطموبة‬ ‫ّلحقتو‬ ‫مع‬ ‫الممؼ‬ ‫اسـ‬ ‫نضع‬ ‫اقتباس‬‫مزدوجتيف‬‫أع‬ ‫ة‬‫ر‬‫الصو‬ ‫في‬ ‫ح‬َّ‫موض‬ ‫ىو‬ ‫كما‬ ‫حفظ‬ ‫نختار‬ ‫و‬.‫اله‬
  14. 14. ٔٛ ‫اآلف‬‫و‬‫باّلسـ‬ ‫الممؼ‬ ‫بحفظ‬ ‫قمنا‬ ‫أف‬ ‫بعد‬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>.
  15. 15. ٜٔ ‫عناصر‬ ‫مف‬ ‫عنصر‬ ‫لكؿ‬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>
  16. 16. ٕٓ <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>
  17. 17. ٕٔ ‫يما‬َّ‫أن‬ ‫مع‬‫متماثمتاف‬.‫الويب‬ ‫مستعرض‬ ‫باستخداـ‬ ‫اضيما‬‫ر‬‫استع‬ ‫عند‬ ً‫ا‬‫تمام‬ ‫ضغطة‬ ‫بمقدار‬ ‫متماثميف‬ ‫نياية‬ ‫و‬ ‫بداية‬ ‫وسمي‬ ‫بيف‬ ‫الموجود‬ ‫المحتوى‬ ‫كؿ‬ ‫احة‬‫ز‬‫إ‬ ‫الجيدة‬ ‫َّة‬‫البرمجي‬ ‫العادات‬ ‫مف‬ : ‫فائدة‬ 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
  18. 18. ٕٕ 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‫اض‬‫ر‬‫استع‬ ‫عند‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫يظير‬ ‫ّل‬ ‫أغمبيا‬ ‫ا‬ ‫لكف‬ ‫و‬ ‫الصفحة‬‫ليذه‬ ‫ئيسية‬‫ر‬‫ال‬ ‫لميمة‬‫ىي‬ ‫المنطقة‬‫المحتوى‬ ‫َّة‬‫ماىي‬ ‫عف‬ ‫معمومات‬ ‫إعطاء‬ ‫تستخدميا‬ ‫التي‬ ‫و‬ ‫ى‬‫األخر‬ ‫ة‬‫ر‬‫الظاى‬ ‫غير‬ ‫المعمومات‬ ‫لبعض‬ ‫إضافة‬ ‫بالصفحة‬ ‫الموجود‬ .‫الغالب‬ ‫في‬ ‫البحث‬ ‫و‬ ‫األرشفة‬ ‫أجؿ‬ ‫مف‬ ‫البحث‬ ‫محركات‬ ‫األـ‬ ‫المنطقة‬ٕ : ٕ ‫المطروحة‬ ‫ة‬‫ر‬‫الفك‬ ‫لتبسيط‬ ‫شخصي‬ ‫اجتياد‬ ‫ىو‬ ‫َّما‬‫إن‬ ‫و‬ ‫أتيا‬‫ر‬‫ق‬ ‫التي‬ ‫اجع‬‫ر‬‫الم‬ ‫مف‬ ‫أي‬ ‫في‬ ‫المصطمح‬ ‫ىذا‬ ‫يرد‬ ‫لـ‬)‫أيي‬‫ر‬‫(ب‬.
  19. 19. ٕٖ ‫وسمي‬ ‫بيف‬ ‫ة‬‫ر‬‫المحصو‬ ‫المنطقة‬ ‫ىي‬ ‫و‬<html>‫و‬</html>‫المنطقة‬ ‫ىي‬ ‫المنطقة‬ ‫ىذه‬ ‫و‬ ‫التي‬‫فيي‬ ‫بيذا‬ ‫و‬ ‫الجسد‬ ‫و‬ ‫أس‬‫ر‬‫ال‬ ‫منطقتي‬ ‫تضـ‬ ‫التي‬ ‫ىي‬ ‫و‬ ‫الصفحة‬ ‫نياية‬ ‫و‬ ‫بداية‬ ‫تحدد‬ )‫(صفحة‬ ‫مستند‬ ‫كامؿ‬ ‫تضـ‬HTML. ‫مستند‬ ‫ألي‬ ‫العاـ‬ ‫الشكؿ‬ ‫يكوف‬ ‫بيذا‬ ‫و‬HTML:‫كمايمي‬ <html> <head> ‫ٕ٘ب‬ ْٛ‫س١ى‬ ‫اٌظب٘ش‬ ‫غ١ش‬ ‫اٌشأط‬ ‫ِٕـمخ‬ ٜٛ‫ِحز‬ </head> <body> ٟ‫إٌٙبئ‬ ‫اٌظفحخ‬ ٜٛ‫ِحز‬‫اٌظ‬ ٚ‫ب٘ش‬‫ٕ٘ب‬ ْٛ‫س١ى‬ ً‫ب‬َّ١ٍ‫فؼ‬ </body> </html> ‫الوسوم‬ ‫اصفات‬‫و‬Attributes ‫لغة‬ َّ‫بأف‬ ً‫ا‬‫سابق‬ ‫قمناه‬ ‫ما‬ ‫كؿ‬ ‫ص‬ّ‫يتمخ‬HTML‫مف‬ ‫مجموعة‬ ‫إنشاء‬ ‫عبر‬ ‫المحتوى‬ ‫تقديـ‬ ‫لؾ‬ ‫تتيح‬ ‫عناصر‬ ‫مف‬ ‫عنصر‬ ‫كؿ‬ ‫ميمة‬ ,‫العناصر‬HTML‫فيناؾ‬ ‫صفحتؾ‬ ‫في‬ ً‫ا‬‫جد‬ ‫محدد‬ ‫شيء‬ ‫عرض‬ ‫ابط‬‫و‬‫الر‬ ‫لعرض‬ ‫عناصر‬ ‫ىناؾ‬ ‫و‬ ‫الصور‬ ‫لعرض‬ ‫عناصر‬ ‫ىناؾ‬ ‫و‬ ‫النصوص‬ ‫لعرض‬ ‫عناصر‬ ‫َّة‬‫التشعبي‬Links‫وسوـ‬ ‫مف‬ ‫خاص‬ ‫وسـ‬ ‫اسطة‬‫و‬‫ب‬ ‫العناصر‬ ‫ىذه‬ ‫مف‬ ‫عنصر‬ ‫كؿ‬ ‫إنشاء‬ ‫يتـ‬ ,‫إلخ‬ .. HTML‫بي‬ ‫الظاىر‬ ‫العنصر‬ ‫محتوى‬ ‫اف‬‫ر‬‫يحص‬ ‫نياية‬ ‫وسـ‬ ‫و‬ ‫بداية‬ ‫وسـ‬ ‫عنصر‬ ‫لكؿ‬ ‫يكوف‬ ‫و‬ ,.‫نيما‬ ‫عرض‬ ‫سموؾ‬ ‫ص‬ّ‫تخص‬ ‫التي‬ ‫و‬ ‫َّة‬‫اإلضافي‬ ‫الخصائص‬ ‫مف‬ ‫بمجموعة‬ ‫البداية‬ ‫وسوـ‬ ‫بعض‬ ‫تزويد‬ ‫يمكف‬ ‫اصفات‬‫و‬‫بال‬ ‫يعرؼ‬ ‫ما‬ ‫عبر‬ ‫ىذا‬ ‫يتـ‬ ‫و‬ ‫اه‬‫و‬‫لمحت‬ ‫العنصر‬Attributes‫سبيؿ‬ ‫عمى‬ ‫التالية‬ ‫ة‬‫ر‬‫لمشيف‬ ‫انظر‬ , :‫المثاؿ‬
  20. 20. ٕٗ <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.
  21. 21. ٕ٘ ‫عناصر‬ ‫عف‬ ‫بالحديث‬ ‫نبدأ‬ ‫أف‬ ‫اآلف‬ ‫نستطيع‬ ‫نا‬َّ‫أن‬ ‫أظف‬HTML‫مع‬ ‫البداية‬ ‫و‬ ‫بالتفصيؿ‬ ‫و‬ ً‫ة‬‫كاف‬ ‫عناصر‬‫العناويف‬Headings‫المشتركة‬ ‫اصفات‬‫و‬‫ال‬ ‫مف‬ ‫بمجموعة‬ ً‫ّل‬‫و‬‫جد‬ ‫سنعرض‬ ‫ذلؾ‬ ‫قبؿ‬ ‫لكف‬ ‫و‬ , ‫وسوـ‬ ‫أغمب‬ ‫بيف‬HTML‫ا‬ ‫تمؾ‬ ‫مف‬ ‫وسـ‬ ‫كؿ‬ ‫مع‬ ‫ىا‬‫ار‬‫ر‬‫تك‬ ‫مف‬ ً‫ّل‬‫بد‬ ‫ىنا‬,‫لوسوـ‬‫و‬:‫الجدوؿ‬ ‫فيمايمي‬ ‫اصفة‬‫و‬‫ال‬ ‫اسم‬‫الممكنة‬ ‫القيم‬‫الشرح‬ id)‫مكرر‬ ‫يد(غير‬‫ر‬‫ف‬ ‫اسـ‬ ‫اي‬ ‫لممستند‬ ‫بالنسبة‬ ً‫ا‬َّ‫برمجي‬ ‫العنصر‬ ‫مع‬ ‫لمتعامؿ‬ ‫اّلسـ‬ ‫ىذا‬ ‫استخداـ‬ ‫يتـ‬ ‫لغة‬ ‫باستخداـ‬Java Script‫أو‬jQuery‫ليا‬ ‫و‬ , ‫استخدام‬‫س‬ ‫ى‬‫أخر‬ ‫ات‬‫عرض‬ ‫يتـ‬‫أحدىا‬‫ة‬‫ر‬‫فق‬ ‫في‬ ً‫ا‬‫ّلحق‬ ‫الداخمية‬ ‫ابط‬‫و‬‫الر‬ dirltr rtl ,‫اءة‬‫ر‬‫الق‬ ‫اتجاه‬ ‫لتحديد‬ltr‫مف‬ ‫اءة‬‫ر‬‫الق‬ ‫اتجاه‬ ‫أف‬ ‫تعني‬ ‫ا‬َّ‫أم‬ ‫اليميف‬ ‫إلى‬ ‫اليسار‬rtl‫مف‬ ‫اءة‬‫ر‬‫الق‬ ‫اتجاه‬ ‫أف‬ ‫فتعني‬ ‫اليسار‬ ‫إلى‬ ‫اليميف‬ alignleft right center justify ‫النص‬ ‫محاذاة‬ ‫لتحديد‬ class‫فئة‬ ‫اسـ‬ ‫أي‬CSS‫صالح‬‫سيتـ‬ ‫و‬ ‫العنصر‬ ‫إلى‬ ‫الفئة‬ ‫خصائص‬ ‫كافة‬ ‫لمنح‬ ‫الفصؿ‬ ‫في‬ ‫بالتفصيؿ‬ ‫ىذا‬ ‫مناقشة‬‫ػ‬‫ب‬ ‫الخاص‬CSS3 name‫يد‬‫ر‬‫ف‬ ‫اسـ‬ ‫أي‬ً‫ا‬ّ‫برمجي‬ ‫العنصر‬ ‫لتمييز‬ ‫تستخدـ‬ ‫الجدول‬1‫عناصر‬ ‫أغمب‬ ‫بين‬ ‫المشتركة‬ ‫اصفات‬‫و‬‫ال‬ ‫جدول‬ :HTML
  22. 22. ٕٙ ‫العناوين‬ ‫عناصر‬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> :‫التالية‬ ‫النتيجة‬ ‫سنشاىد‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫السابقة‬ ‫الصفحة‬ ‫اض‬‫ر‬‫استع‬ ‫عند‬
  23. 23. ٕٚ ‫الشكل‬4:‫العناوين‬ ‫عناصر‬ ‫اختبار‬ ‫صفحة‬h1‫إلى‬h6 ‫الوسـ‬ ‫بتزويد‬ ‫قمنا‬ ‫فقد‬ ‫تالحظ‬ ‫كما‬<body>‫اصفة‬‫و‬‫بال‬dir‫و‬ ‫المستند‬ ‫جسد‬ ‫اءة‬‫ر‬‫ق‬ ‫اتجاه‬ ‫تحدد‬ ‫التي‬ ‫و‬ ‫القيمة‬ ‫بإسناد‬ ‫قمنا‬rtl‫و‬ ‫ليا‬‫لنجعؿ‬ ‫ذلؾ‬‫اليسار‬ ‫إلى‬ ‫اليميف‬ ‫مف‬ ‫اءة‬‫ر‬‫الق‬ ‫اتجاه‬right to left‫ما‬ ‫ىو‬ ‫و‬ ‫أية‬ َ‫ط‬ْ‫ع‬ُ‫ت‬ ‫لـ‬ ‫اصفة‬‫و‬‫ال‬ ‫ىذه‬ ‫أف‬ ‫حاؿ‬ ‫في‬ ‫و‬ ,‫بالطبع‬ ‫بية‬‫ر‬‫الع‬ ‫المغة‬ ‫مع‬ ‫يتناسب‬‫القيمة‬ ‫فإف‬ ‫قيمة‬ ‫ىي‬ ‫ليا‬ ‫اضية‬‫ر‬‫اّلفت‬ltr.‫اليميف‬ ‫إلى‬ ‫اليسار‬ ‫مف‬ ‫اضي‬‫ر‬‫اّلفت‬ ‫اءة‬‫ر‬‫الق‬ ‫اتجاه‬ ‫أف‬ ‫أي‬ ‫استخدـ‬ :‫ممحوظة‬‫العناويف‬ ‫عناصر‬<h1>‫إلى‬<h6>‫أجؿ‬ ‫مف‬‫تستخدميا‬ ‫ّل‬ ‫و‬ ,‫فقط‬ ‫ات‬‫ر‬‫الفق‬ ‫عناويف‬‫النص‬ ‫لجعؿ‬ ً‫ا‬‫يض‬‫ر‬‫ع‬.‫الغرضيف‬ ‫ليذيف‬ ‫خاصة‬ ‫وسوـ‬ ‫فيناؾ‬ ‫الحجـ‬ ‫كبير‬ ‫أو‬ ‫األفقي‬ ‫الخط‬ ‫عنصر‬Horizontal Line ‫لغة‬ ‫ـ‬ِّ‫تقد‬HTML‫الخاص‬ ‫الوسـ‬<hr />:‫التالي‬ ‫لممثاؿ‬ ‫انظر‬ ,‫الصفحة‬ ‫في‬ ‫َّة‬‫األفقي‬ ‫الخطوط‬ ‫إلنشاء‬ <html> <head>
  24. 24. ٕٛ <title> ٟ‫األفم‬ ‫اٌخؾ‬ ‫ٌؼٕظش‬ ‫اخزجبس‬ ‫طفحخ‬ </title> </head> <body dir='rtl'> <p>‫فمؾ‬ ‫ٌٍزجشثخ‬ ٌٝٚ‫األ‬ ‫اٌفمشح‬ ٜٛ‫ِحز‬</p> <hr /> <p>‫فمؾ‬ ‫ٌٍزجشثخ‬ ‫اٌثبٔ١خ‬ ‫اٌفمشح‬ ٜٛ‫ِحز‬</p> <hr /> <p>‫فمؾ‬ ‫ٌٍزجشثخ‬ ‫اٌثبٌثخ‬ ‫اٌفمشح‬ ٜٛ‫ِحز‬</p> </body> </html> :‫كمايمي‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫السابقة‬ ‫ة‬‫ر‬‫الشيف‬ ‫تبدو‬ ‫الشكل‬5:‫العنصر‬ ‫تجربة‬ ‫صفحة‬<hr />
  25. 25. ٕٜ ‫التعميقات‬Comments ‫في‬ ‫المبرمجوف‬ ‫اعتاد‬‫ج‬َ‫ل‬‫عا‬ُ‫ت‬ ‫ّل‬ ‫َّة‬‫توضيحي‬ ‫أسطر‬ ‫كتابة‬ ‫عمى‬ ‫َّة‬‫التقميدي‬ ‫البرمجة‬ ‫لغات‬‫تعتبر‬ ‫ّل‬ ‫أنيا‬ ‫إذ‬ ‫ة‬‫ر‬‫الشيف‬ ‫مف‬ ً‫ا‬‫ء‬‫جز‬,‫ة‬‫ر‬‫فت‬ ‫بعد‬ ‫لتعديميا‬ ‫يعود‬ ‫عندما‬ ‫ة‬‫ر‬‫الشيف‬ ‫اء‬‫ز‬‫بأج‬ ‫المبرمج‬ ‫لتذكير‬ ‫فقط‬ ‫تستخدـ‬ ‫ما‬َّ‫إن‬ ‫و‬ ‫بالتعميقات‬ ‫تعرؼ‬ ‫األسطر‬ ‫ىذه‬ ‫و‬ ,‫الزمف‬ ‫مف‬Commentsَّ‫أف‬ ‫مع‬ ‫و‬ ,HTML‫كما‬ ‫وصفية‬ ‫لغة‬ ‫قمت‬‫لكتابة‬ ‫التالية‬ ‫العامة‬ ‫الصيغة‬ ‫ـ‬ِّ‫فتقد‬ ,‫المستندات‬ ‫ضمف‬ ‫التعميقات‬ ‫لكتابة‬ ‫آلية‬ ‫توفر‬ ‫أنيا‬ ّ‫إّل‬ ً‫ا‬‫سابق‬ :‫التعميؽ‬ <!-- comment --> ‫مستند‬ ‫ضمف‬ ‫التعميقات‬ ‫استخداـ‬ ‫عمى‬ ‫التالي‬ ‫المثاؿ‬ ‫لنشاىد‬HTML: <html> <head> <title> ‫إٌ١ٙب‬ ً‫ب‬‫ِؼبف‬ ٟ‫األفم‬ ‫اٌخؾ‬ ‫ٌؼٕظش‬ ‫اخزجبس‬ ‫طفحخ‬ ‫ِجّٛػخ‬‫خ‬َّ١‫اٌجشِج‬ ‫اٌزؼٍ١مبد‬ ِٓ </title> </head> <body dir='rtl'> <!-- ‫انرانييه‬ ‫انضطريه‬ً‫األون‬ ‫نهفقرج‬ --> <p>‫فمؾ‬ ‫ٌٍزجشثخ‬ ٌٝٚ‫األ‬ ‫اٌفمشح‬ ٜٛ‫ِحز‬</p> <hr /> <!-- ‫انثاويح‬ ‫نهفقرج‬ ‫انرانييه‬ ‫انضطريه‬ --> <p>‫فمؾ‬ ‫ٌٍزجشثخ‬ ‫اٌثبٔ١خ‬ ‫اٌفمشح‬ ٜٛ‫ِحز‬</p> <hr /> <!-- ‫انثانثح‬ ‫نهفقرج‬ ‫انراني‬ ‫انضطر‬ --> <p>‫فمؾ‬ ‫ٌٍزجشثخ‬ ‫اٌثبٌثخ‬ ‫اٌفمشح‬ ٜٛ‫ِحز‬</p> </body> </html>
  26. 26. ٖٓ ‫كمايمي‬ ‫السابقة‬ ‫ة‬‫ر‬‫الشيف‬ ‫تبدو‬‫تظي‬ ‫ّل‬ ‫التعميقات‬ ‫أف‬ ‫د‬ّ‫ك‬‫يؤ‬ ‫مما‬ ‫الويب‬ ‫مستعرض‬ ‫في‬‫أثناء‬ (‫المستند‬ ‫في‬ ‫ر‬ ‫األمر‬ ‫اختيار‬ ‫ب‬ِّ‫جر‬ ‫الصفحة‬ ‫اض‬‫ر‬‫استع‬"‫عرض‬-<‫المصدر‬"‫أو‬"View->source"): ‫الشكل‬6‫الصفحة‬ ‫في‬ ‫تظهر‬ ‫ال‬ ‫و‬ ‫المصدر‬ ‫عرض‬ ‫نافذة‬ ‫في‬ ‫األخضر‬ ‫بالمون‬ ‫تظهر‬ ‫التعميقات‬ : .‫التعميؽ‬ ‫وسـ‬ ‫بداية‬ ‫في‬ ‫ؿ‬ّ‫األو‬ ‫القوس‬ ‫بعد‬ ‫ُّب‬‫التعج‬ ‫ة‬‫ر‬‫إشا‬ َ‫تنس‬ ‫ّل‬ :‫ممحوظة‬ ‫النصوص‬ ‫عناصر‬Paragraphs ‫ىذه‬ ‫إنشاء‬ ‫يتـ‬ ,‫الغالب‬ ‫في‬ ‫النصية‬ ‫ات‬‫ر‬‫الفق‬ ‫مف‬ ‫مجموعة‬ ‫مف‬ ‫اقع‬‫و‬‫ال‬ ‫في‬ ‫الويب‬ ‫صفحة‬ ‫تتكوف‬‫ات‬‫ر‬‫الفق‬ ‫الوسـ‬ ‫باستخداـ‬<p>‫الوسـ‬ ‫يستخدـ‬ ‫و‬ ,‫السابقة‬ ‫األمثمة‬ ‫في‬ ‫استخدامو‬ ‫معنا‬ ‫مر‬ ‫الذي‬ ‫و‬<br /> ‫فييا‬ ‫بما‬ ‫اغات‬‫ر‬‫الف‬ ‫محارؼ‬ ‫ألف‬ ‫ذلؾ‬ ‫و‬ ‫التالي‬ ‫السطر‬ ‫إلى‬ ‫لمنزوؿ‬‫محرؼ‬‫المفتاح‬Enter‫لي‬ ‫ليس‬‫ا‬ ‫لغة‬ ‫في‬ ‫قيمة‬HTML.ً‫ا‬‫سابق‬ ‫نا‬‫ر‬‫ذك‬ ‫كما‬ ‫النصوص‬ ‫تنسيق‬ ‫عناصر‬Text Formatting ‫لغة‬ ‫توفر‬HTMLً‫ا‬‫يض‬‫ر‬‫ع‬ ‫النص‬ ‫فمجعؿ‬ ,‫النصوص‬ ‫لتنسيؽ‬ ‫العناصر‬ ‫مف‬ ‫مجموعة‬Bold‫توفر‬ ‫العنصر‬<b>‫العنصر‬ ‫(أو‬<strong>ً‫ال‬‫مائ‬ ‫النص‬ ‫لجعؿ‬ ‫و‬ ,)Italic‫العنصر‬ ‫توفر‬<i>‫(أو‬
  27. 27. ٖٔ ‫العنصر‬<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>
  28. 28. ٖٕ </html> :‫كمايمي‬ ‫المستعرض‬ ‫في‬ ‫أعاله‬ ‫ة‬‫ر‬‫الشيف‬ ‫تبدو‬ ‫الشكل‬7‫النصوص‬ ‫تنسيق‬ ‫عناصر‬ ‫اختبار‬ ‫صفحة‬ : ‫وسوـ‬ ‫جع‬‫مر‬ ‫في‬ ‫ىا‬‫ذكر‬ ‫سيتـ‬ ‫النصوص‬ ‫تنسيؽ‬ ‫عناصر‬ ‫مف‬ ‫يد‬‫ز‬‫الم‬ ‫ىناؾ‬ ‫بالطبع‬ :‫ممحوظة‬HTML‫ىذا‬ ‫نياية‬ ‫في‬ .‫الفصؿ‬ ‫ة‬َّ‫الخاص‬ ‫الرموز‬ ‫و‬ ‫المحارف‬Special Characters ‫كتابتيا‬ ‫يؽ‬‫ر‬‫ط‬ ‫عف‬ ‫الصفحة‬ ‫في‬ ‫عرضيا‬ ‫يمكف‬ ‫ّل‬ ‫التي‬ ‫الرموز‬ ‫و‬ ‫المحارؼ‬ ‫بعض‬ ‫ىناؾ‬‫مباشر‬ ‫بشكؿ‬ ‫ياضيات‬‫ر‬‫ال‬ ‫في‬ ‫المستخدمة‬ ‫الرموز‬ ‫مثؿ‬‫اغات‬‫ر‬‫الف‬ ‫محارؼ‬ ‫و‬‫لغة‬ ‫توفر‬ ,‫ىا‬‫غير‬ ‫و‬HTML‫خاصة‬ ‫آلية‬ ‫التالية‬ ‫العامة‬ ‫الصيغة‬ ‫باتباع‬ ‫ذلؾ‬ ‫و‬ ‫الرموز‬ ‫ىذه‬ ‫لعرض‬&value;‫القيمة‬ ‫باستبدؿ‬value‫بقيمة‬ ‫المطموب‬ ‫المحرؼ‬‫أف‬‫في‬ ‫عرضو‬ ‫يتـ‬‫الويب‬ ‫مستعرض‬‫ىذه‬ ‫مف‬ ‫نماذج‬ ‫التالي‬ ‫الجدوؿ‬ ‫في‬ ‫و‬ :‫المحارؼ‬ٖ ٖ :‫التالي‬ ‫ابط‬‫ر‬‫ال‬ ‫اتباع‬ ‫يمكف‬ ‫الكامؿ‬ ‫الجدوؿ‬ ‫عمى‬ ‫لمحصوؿ‬ http://www.w3schools.com/tags/ref_symbols.asp
  29. 29. ٖٖ ‫الرمز‬‫ة‬‫شيفر‬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>
  30. 30. ٖٗ :‫كمايمي‬ ‫المستعرض‬ ‫في‬ ‫عرضو‬ ‫عند‬ ‫يبدو‬ ‫الذي‬ ‫و‬ ‫الشكل‬8‫ب‬ ‫الستخدام‬ ‫مثال‬ :‫الصفحة‬ ‫في‬ ‫الخاصة‬ ‫المحارف‬ ‫عض‬ ‫ابط‬‫و‬‫الر‬ ‫عناصر‬Hyper Links ‫لغة‬ ‫توفر‬HTML‫ابط‬‫و‬‫الر‬ ‫عناصر‬ ‫عبر‬ ‫المختمفة‬ ‫الصفحات‬ ‫بيف‬ ‫لالنتقاؿ‬ ‫آلية‬Hyper Links‫و‬ , ‫عمييا‬ ‫النقر‬ ‫عند‬ ‫تنقمؾ‬ ‫صور‬ ‫أو‬ ‫نصوص‬ ‫عف‬ ‫ة‬‫ر‬‫عبا‬ ‫ابط‬‫و‬‫الر‬‫إلى‬ ‫الحالية‬ ‫الصفحة‬ ‫مف‬‫صفحة‬ ‫إلى‬ ‫بعرض‬ ‫ابط‬‫و‬‫الر‬ ‫بتمييز‬ ‫الويب‬ ‫مستعرضات‬ ‫تقوـ‬ ,‫ى‬‫أخر‬ ‫ويب‬"‫ة‬‫ر‬‫صغي‬ ‫يد‬"‫ة‬‫ر‬‫اإلشا‬ ‫عند‬ ‫ة‬‫ر‬‫لمفأ‬ ‫كمؤشر‬ ,‫ابط‬‫و‬‫الر‬ ‫أحد‬ ‫إلى‬‫و‬‫ابط‬‫و‬‫الر‬ ‫إنشاء‬ ‫يتـ‬‫الوسـ‬ ‫اسطة‬‫و‬‫ب‬<a>‫ػ‬‫ل‬‫ا‬ ‫و‬ ,a‫ػ‬‫ل‬ ‫اختصار‬ ‫ىذه‬Anchor‫يتـ‬ , ‫اّل‬ ‫سيتـ‬ ‫(الذي‬ ‫اليدؼ‬ ‫الموقع‬ ‫ا‬َّ‫أم‬ ‫لو‬ ‫كمحتوى‬ ‫عرض‬ُ‫ي‬ ‫بنص‬ ‫ابط‬‫ر‬‫ال‬ ‫عنصر‬ ‫تزويد‬‫النقر‬ ‫عند‬ ‫إليو‬ ‫نتقاؿ‬ ‫اصفة‬‫و‬‫لم‬ ‫تزويده‬ ‫فيتـ‬ )‫ابط‬‫ر‬‫ال‬ ‫عمى‬href‫ػ‬‫ل‬ ‫اختصار‬ ‫ىي‬ ‫التي‬ ‫و‬Hyper Reference‫فممنظر‬ , :‫التالي‬ ‫لممثاؿ‬ <html> <head> <title> ‫اٌشٚاثؾ‬ ‫ٌؼٕبطش‬ ‫اخزجبس‬ ‫طفحخ‬ </title> </head>
  31. 31. ٖ٘ <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
  32. 32. ٖٙ ‫مسار‬ ‫عف‬ ‫ة‬‫ر‬‫عبا‬ ‫يكوف‬ ‫المذكور‬ ‫ابط‬‫ر‬‫ال‬ ‫أف‬ ‫بالنسبية‬ ‫يقصد‬ ‫و‬ )‫األخير‬ ‫ابط‬‫ر‬‫(كال‬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
  33. 33. ٖٚ </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>
  34. 34. ٖٛ <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‫التي‬ ‫و‬
  35. 35. ٖٜ َّ‫قمي‬‫ر‬ ‫قيـ‬ ‫إلييما‬ ‫تسند‬‫تعنيو‬ ‫ما‬ ‫بالبكسؿ(ىذا‬ ‫المعروضة‬ ‫ة‬‫ر‬‫الصو‬ ‫تفاع‬‫ر‬‫ا‬ ‫و‬ ‫عرض‬ ‫تحدد‬ ‫ة‬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>
  36. 36. ٗٓ :‫كمايمي‬ ‫المستعرض‬ ‫في‬ ‫يبدو‬ ‫ما‬ ‫ىذا‬ ‫و‬ ‫الشكل‬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">
  37. 37. ٗٔ <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">
  38. 38. ٕٗ ‫الوسـ‬ ‫عبر‬ ‫اكب‬‫و‬‫الك‬ ‫مف‬ ‫كوكب‬ ‫لكؿ‬ ‫منطقة‬ ‫بإنشاء‬ ‫قمنا‬ ‫ذلؾ‬ ‫بعد‬area‫األولى‬ ‫اصفتاف‬‫و‬ ‫لو‬ ‫الذي‬ ‫و‬ shape‫اإلحداثيات‬ ‫اصفة‬‫و‬ ‫فيي‬ ‫الثانية‬ ‫ا‬َّ‫أم‬ ,)‫إلخ‬ .. ‫ية‬‫ر‬‫دائ‬ ,‫(مستطيمة‬ ‫المنطقة‬ ‫شكؿ‬ ‫لتحديد‬ coords‫يمثؿ‬ ‫المستطيؿ‬ ‫أبعاد‬ ‫لتحديد‬ ‫المستطيؿ‬ ‫حالة‬ ‫في‬ ‫إحداثيات‬ ‫بعة‬‫ر‬‫أ‬ ‫ير‬‫ر‬‫تم‬ ‫تـ‬ ‫حيث‬ ‫اإلحداثي‬‫اف‬‫المستطيؿ‬ ‫مف‬ ‫العموي‬ ‫األيسر‬ ‫الركف‬ ‫الثاني‬ ‫و‬ ‫األوؿ‬‫ابع‬‫ر‬‫ال‬ ‫و‬ ‫الثالث‬ ‫اإلحداثياف‬ ‫يمثؿ‬ ‫بينما‬ ‫ىذا‬ ‫تـ‬ ‫بالطبع‬ ‫و‬ ,‫لتحديده‬ ٍ‫كاؼ‬ ‫ىذا‬ ‫و‬ ‫المستطيؿ‬ ‫مف‬ ‫السفمي‬ ‫األيمف‬ ‫الركف‬‫أف‬ ‫اعتبار‬ ‫عمى‬‫مركز‬ ‫ة‬‫ر‬‫لمصو‬ ‫َّة‬‫تي‬‫ر‬‫الديكا‬ ‫الجممة‬‫األيسر‬ ‫الركف‬ ‫ىو‬ ‫النقطة‬ ‫فإف‬ ‫بيذا‬ ‫و‬ ,‫ة‬‫ر‬‫الصو‬ ‫مف‬ ‫العموي‬ (ٓ,ٓ( ‫النقطة‬ ‫و‬ )82,126‫تحدداف‬ ) ‫المرسوـ‬ ‫بالمستطيؿ‬ ‫الشمس‬ ‫كوكب‬ ‫منطقة‬ ‫ال‬ ‫حالة‬ ‫في‬ ‫ا‬َّ‫أم‬ ,‫بينيما‬‫فيتـ‬ ‫ية‬‫ر‬‫الدائ‬ ‫منطقة‬ ‫الثاني‬ ‫و‬ ‫األوؿ‬ ‫يعبر‬ ‫إحداثيات‬ ‫ثالثة‬ ‫ير‬‫ر‬‫تم‬ ‫نقط‬ ‫عف‬‫عف‬ ‫الثالث‬ ‫يعبر‬ ‫و‬ ‫ة‬‫ر‬‫الدائ‬ ‫مركز‬ ‫ة‬ .‫ىا‬‫قطر‬ ‫نصؼ‬ ‫اصفة‬‫و‬‫ال‬ ‫إلى‬ ‫يطة‬‫ر‬‫الخ‬ ‫اسـ‬ ‫ير‬‫ر‬‫بتم‬ ‫قمنا‬ ‫النياية‬ ‫في‬ ‫و‬usemap.‫ة‬‫ر‬‫بالصو‬ ‫الخاصة‬ ‫اصفة‬‫و‬‫ال‬ ‫إلى‬ ‫يطة‬‫ر‬‫الخ‬ ‫اسـ‬ ‫ير‬‫ر‬‫تم‬ ‫يتـ‬ :‫ممحوظة‬usemap‫بالرمز‬ ً‫ا‬‫مسبوق‬# ‫َّة‬‫الداخمي‬ ‫ابط‬‫و‬‫الر‬Internal Linking ‫يصبح‬ ‫ىذه‬ ‫مثؿ‬ ‫حالة‬ ‫في‬ ‫و‬ ‫ما‬ ‫حد‬ ‫إلى‬ ً‫ا‬‫ر‬‫كبي‬ ‫نة‬ّ‫معي‬ ‫صفحة‬ ‫ضمف‬ ‫الموجود‬ ‫المحتوى‬ ‫يكوف‬ ً‫ا‬‫أحيان‬ ‫لغة‬ ‫ر‬ِّ‫ف‬‫تو‬ ,‫الوقت‬ ‫و‬ ‫الجيد‬ ‫بعض‬ ‫تستغرؽ‬ ‫عممية‬ ‫الصفحة‬ ‫ضمف‬ ‫محددة‬ ‫ة‬‫ر‬‫فق‬ ‫إلى‬ ‫اّلنتقاؿ‬HTML ‫الداخمية‬ ‫ابط‬‫و‬‫بالر‬ ‫يعرؼ‬ ‫ما‬ ‫عبر‬ ‫ة‬‫ر‬‫مباش‬ ‫الصفحة‬ ‫مف‬ ‫محدد‬ ‫ء‬‫جز‬ ‫إلى‬ ‫لالنتقاؿ‬ ‫َّة‬‫آلي‬Internal Links ‫الشكل‬13‫المناطق‬ ‫رسم‬ ‫في‬ ‫الهندسي‬ ‫المبدأ‬ ‫لتوضيح‬ ‫تخيمي‬ ‫شكل‬ :
  39. 39. ٖٗ ‫ابط‬‫ر‬‫ال‬ ‫وسـ‬ ‫استخداـ‬ ‫عبر‬ ‫تحقيقيا‬ ‫يتـ‬ ‫التي‬ ‫و‬<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>
  40. 40. ٗٗ ‫ائم‬‫و‬‫الق‬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> :‫كمايمي‬ ‫المستعرض‬ ‫في‬ ‫عرضو‬ ‫عند‬ ‫يبدو‬ ‫الذي‬ ‫و‬
  41. 41. ٗ٘ ‫الشكل‬14:‫بسيطة‬ ‫مرتبة‬ ‫غير‬ ‫لقائمة‬ ‫مثال‬ ‫مف‬ ‫القائمة‬ ‫لعنصر‬ ‫النياية‬ ‫و‬ ‫البداية‬ ‫وسمي‬ ‫بتغيير‬<ul>‫و‬</ul>‫إلى‬<ol>‫و‬</ol>‫ستصبح‬ :‫التالي‬ ‫بالشكؿ‬ ‫تبة‬‫ر‬‫م‬ ‫القائمة‬ ‫الشكل‬15‫بسيطة‬ ‫مرتبة‬ ‫قائمة‬ ‫عمى‬ ‫مثال‬ :
  42. 42. ٗٙ ‫الفصؿ‬ ‫ىذا‬ ‫بداية‬ ‫منذ‬ ‫ذكرت‬ ‫كما‬ ‫و‬ ‫بالطبع‬‫فإف‬‫عناصر‬ ‫مف‬ ‫عنصر‬ ‫أي‬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>
  43. 43. ٗٚ <li>XHTML</li> <li>CSS</li> <li>CSS 3</li> </ol> </body> </html> :‫كمايمي‬ ‫المستعرض‬ ‫في‬ ‫أعاله‬ ‫المثاؿ‬ ‫يبدو‬ ‫الشكل‬16:‫عمى‬ ‫مثال‬‫معقدة‬ ‫قائمة‬ ‫اصفة‬‫و‬‫ال‬ ‫استخداـ‬ ‫يمكف‬ ‫و‬ّ‫أن‬ ‫ائـ‬‫و‬‫الق‬ ‫عف‬ ‫ه‬‫ر‬‫ذك‬ ‫يجب‬ ‫ما‬ ‫آخر‬type‫حالة‬ ‫ففي‬ ‫القائمة‬ ‫شكؿ‬ ‫لتغيير‬ :‫إلييا‬ ‫التالية‬ ‫القيـ‬ ‫إحدى‬ ‫إسناد‬ ‫يمكف‬ ‫تبة‬‫ر‬‫الم‬ ‫غير‬ ‫ائـ‬‫و‬‫الق‬square‫أو‬disc‫أو‬circle‫رمز‬ ‫لوضع‬ ‫تي‬‫ر‬‫الت‬ ‫عمى‬ ‫عنصر‬ ‫كؿ‬ ‫أماـ‬ ‫ة‬‫ر‬‫الدائ‬ ‫أو‬ ‫القرص‬ ‫أو‬ ‫بع‬‫ر‬‫الم‬,‫ب‬‫إسناد‬ ‫يمكف‬ ‫تبة‬‫ر‬‫الم‬ ‫القائمة‬ ‫حالة‬ ‫في‬ ‫و‬
  44. 44. ٗٛ ‫القيـ‬ ‫إحدى‬ٔ‫أو‬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> :‫كمايمي‬ ‫المستعرض‬ ‫في‬ ‫المصطمحات‬ ‫قائمة‬ ‫تبدو‬
  45. 45. ٜٗ ‫الشكل‬17‫المستعرض‬ ‫في‬ ‫المصطمحات‬ ‫قائمة‬ ‫تبدو‬ ‫هكذا‬ : ‫الجداول‬Tables ‫لغة‬ ‫توفر‬HTML‫العنصر‬ ‫عبر‬ ‫الجداوؿ‬ ‫إلنشاء‬ ‫آلية‬<table>‫العنصر‬ ‫إنشاء‬ ‫عبر‬ ‫ذلؾ‬ ‫يتـ‬ ‫و‬ <table>‫العرض‬ ‫اصفتي‬‫و‬ ‫ير‬‫ر‬‫تم‬ ‫و‬ ً‫ّل‬ّ‫أو‬width‫الحدود‬ ‫عرض‬ ‫و‬borderَّ‫ثـ‬ ‫مف‬ ‫و‬ ,‫بالبكسؿ‬ ‫الجدوؿ‬ ‫أسطر‬ ‫عنصر‬ ‫عبر‬ ‫الجدوؿ‬ ‫محتويات‬ ‫إنشاء‬table rows‫باستخداـ‬ ‫تحقيقو‬ ‫يتـ‬ ‫الذي‬ ‫و‬ ‫الوسـ‬<tr>‫خاليا‬ ‫محتويات‬ ‫ذكر‬ ‫يتـ‬ َّ‫ثـ‬ ,table data‫و‬ ‫حدى‬ ‫عمى‬ ‫الجدوؿ‬ ‫أسطر‬ ‫مف‬ ‫سطر‬ ‫كؿ‬ ‫الوسـ‬ ‫عبر‬ ‫ذلؾ‬<td>,:‫كمايمي‬ ‫ئي‬‫ر‬‫م‬ ‫بشكؿ‬ ‫تمثيميا‬ ‫يمكف‬ ‫الوسوـ‬ ‫حفظ‬ ‫لتسييؿ‬ ‫و‬ ‫الشكل‬18‫الجدول‬ ‫إلنشاء‬ ‫المستعممة‬ ‫الوسوم‬ ‫لتوضيح‬ ‫تخيمي‬ ‫شكل‬ : ‫جدوؿ‬ ‫بإنشاء‬ ‫تقوـ‬ ‫التي‬ ‫التالية‬ ‫ة‬‫ر‬‫الشيف‬ ‫نشاىد‬ ‫دعنا‬ ‫أكثر‬ ‫توضيحو‬ ‫بغية‬ ً‫ا‬‫عممي‬ ‫المفيوـ‬ ‫ىذا‬ ‫لتطبيؽ‬ ‫و‬ :‫بسيط‬
  46. 46. ٘ٓ <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>
  47. 47. ٘ٔ </tr> </table> </body> </html> :‫كمايمي‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫عرضو‬ ‫عند‬ ‫الجدوؿ‬ ‫ىذا‬ ‫يبدو‬ ‫الشكل‬19:‫بسيط‬ ‫جدول‬ ‫إنشاء‬ ‫عمى‬ ‫مثال‬ ‫الجدوؿ‬ ‫عنصر‬ ‫بإنشاء‬ ً‫ّل‬‫و‬‫أ‬ ‫قمنا‬ ‫فقد‬ ‫أينا‬‫ر‬ ‫كما‬<table>‫بعرض‬width٘ٓ‫الكمي‬ ‫العرض‬ ‫مف‬ % ‫حدود‬ ‫بعرض‬ ‫!),و‬ً‫ا‬‫صحيح‬ ‫يبقى‬ ‫ذلؾ‬ ‫أف‬ ‫لتالحظ‬ ‫المستعرض‬ ‫نافذة‬ ‫حجـ‬ ‫تغيير‬ ‫(حاوؿ‬ ‫لمصفحة‬ borderٔ‫الوسميف‬ ‫باستخداـ‬ ‫جديد‬ ‫سطر‬ ‫بإنشاء‬ ‫قمنا‬ َّ‫ثـ‬ ,‫بكسؿ‬<tr></tr>‫السطر‬ ‫ىذا‬ ‫يحوي‬ , ‫خميتيف‬ ‫عمى‬<td></td>‫القيمة‬ ‫األولى‬ ‫تحوي‬"‫الكتاب‬ ‫اسـ‬"‫القيمة‬ ‫الثانية‬ ‫تحوي‬ ‫و‬"‫السعر‬"‫قمنا‬ َّ‫ثـ‬ , ‫أصبح‬ ‫ع‬‫الموضو‬ ‫أف‬ ‫أظف‬ ,‫الكتب‬ ‫بيانات‬ ‫تحوي‬ ‫التي‬ ‫ى‬‫األخر‬ ‫األسطر‬ ‫مع‬ ‫األسموب‬ ‫نفس‬ ‫ار‬‫ر‬‫بتك‬ .‫اآلف‬ ً‫ا‬‫اضح‬‫و‬ ‫قياس‬ ‫احدة‬‫و‬ ‫بأي‬ ‫أو‬ ً‫ا‬‫أيض‬ ‫بالبكسؿ‬ ‫الجدوؿ‬ ‫عرض‬ ‫قيمة‬ ‫إعطاء‬ ‫يمكف‬ :‫ممحوظة‬‫احدات‬‫و‬‫ال‬ ‫مف‬‫ال‬‫مدعومة‬‫لغة‬ ‫في‬ HTMLً‫ا‬‫ّلحق‬ ‫ىا‬‫ذكر‬ ‫سيتـ‬ ‫التي‬ ‫و‬.
  48. 48. ٕ٘ ‫جداوؿ‬ ‫مف‬ ‫جدوؿ‬ ‫كؿ‬ ‫يقسـ‬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
  49. 49. ٖ٘ ‫ة‬‫ر‬‫شيف‬ ‫سنكتب‬ ‫صفحتنا‬ ‫في‬ ‫المذكور‬ ‫الجدوؿ‬ ‫لتحقيؽ‬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>
  50. 50. ٘ٗ <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> :‫كمايمي‬ ‫الويب‬ ‫مستعرض‬ ‫في‬ ‫ة‬‫ر‬‫الشيف‬ ‫ىذه‬ ‫تبدو‬
  51. 51. ٘٘ ‫الشكل‬21‫جدول‬ ‫إلنشاء‬ ‫مثال‬ :HTML‫مثالي‬ ‫الذيؿ‬ ‫و‬ ‫أس‬‫ر‬‫ال‬ ‫منطقتي‬ ‫في‬ ‫الموجودة‬ ‫األسطر‬ ‫أف‬ ‫كما‬ ,‫الجدوؿ‬ ‫أعمى‬ ‫يظير‬ ‫اف‬‫و‬‫العن‬ َّ‫فإف‬ ‫تالحظ‬ ‫كما‬ ‫يض‬‫ر‬‫ع‬ ‫بخط‬ ‫تظير‬bold. ‫البسيطة‬ ‫غير‬ ‫الجداول‬ ‫حالة‬ ‫مثؿ‬ ‫لحالة‬ ‫فبالنسبة‬ ً‫ا‬‫أيض‬ ً‫ا‬‫بسيط‬ ‫و‬ ً‫ال‬‫جمي‬ ‫كاف‬ ‫الماضية‬ ‫ة‬‫ر‬‫الفق‬ ‫في‬ ‫اضو‬‫ر‬‫استع‬ ‫تـ‬ ‫ما‬ ‫الحقيقة‬ ‫في‬ ‫الحاّلت‬ ‫عف‬ ‫ماذا‬ ‫لكف‬ ‫و‬ ‫بسيط‬ ‫أمر‬ ‫األسطر‬ ‫مف‬ ‫بمجموعة‬ ‫و‬ ‫بعموديف‬ ً‫ّل‬‫و‬‫جد‬ ‫فإف‬ ‫اء‬‫ر‬‫الش‬ ‫ة‬‫ر‬‫فاتو‬ ‫األس‬ ‫ّل‬ ‫و‬ ,‫األحجاـ؟‬ ‫متساوية‬ ‫الخاليا‬ ‫فييا‬ ‫تكوف‬ ‫ّل‬ ‫التي‬ ‫الحاّلت‬ ‫عف‬ ‫ماذا‬ ,‫األعقد؟‬‫متساوية‬ ‫طر‬ ‫تجيب‬ ,‫الخاليا؟‬ ‫عدد‬HTML‫اصفتيف‬‫و‬‫ال‬ ‫تقديـ‬ ‫عبر‬ ‫ة‬ّ‫ق‬‫المح‬ ‫ّلت‬‫ؤ‬‫التسا‬ ‫ىذه‬ ‫عمى‬rowspan‫و‬ colspan. ‫اصفتاف‬‫و‬‫ال‬ ‫تستخدـ‬rowspan‫و‬colspan‫الخمية‬ ‫بداية‬ ‫وسـ‬ ‫مع‬<td>‫أو‬<th>‫إلييما‬ ‫تسند‬ ‫و‬ ( ‫صحيحة‬ ‫قمية‬‫ر‬ ‫قيمة‬ٔ‫أو‬ٕ‫أو‬ٖ‫خميت‬ ‫بحجـ‬ ‫فتجعميا‬ ‫الخمية‬ ‫حجـ‬ ‫مف‬ ‫تغير‬ )‫إلخ‬ ..‫ثالث‬ ‫أو‬ ‫يف‬ ‫أف‬ ‫حيث‬ ,‫إلخ‬ .. ‫بع‬‫ر‬‫أ‬ ‫أو‬rowspan‫أما‬ ,‫الخمية‬ ‫بعرض‬ ‫تتحكـ‬colspan.‫الخمية‬ ‫تفاع‬‫ر‬‫با‬ ‫فتتحكـ‬ :‫المثاؿ‬ ‫سبيؿ‬ ‫عمى‬ ‫التالية‬ ‫ة‬‫ر‬‫الشيف‬ ‫لنشاىد‬
  52. 52. ٘ٙ <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
  53. 53. ٘ٚ ً‫ثشى‬‫إٌخ‬ ..... ‫ٚاػح‬ ٚ ‫ِجسؾ‬. </td> </tr> </tbody> </table> </body> </html> ‫السابقة‬ ‫ة‬‫ر‬‫الشيف‬ ‫تبدو‬:‫كمايمي‬ ‫المستعرض‬ ‫في‬ ‫عرضيا‬ ‫عند‬ ‫الشكل‬22‫اصفتين‬‫و‬‫ال‬ ‫باستخدام‬ ‫بسيط‬ ‫غير‬ ‫جدول‬ ‫إنشاء‬ ‫عمى‬ ‫مثال‬ :rowspan‫و‬colspan ‫منيا‬ ‫احدة‬‫و‬ ‫خاليا‬ ‫ثالث‬ ‫عمى‬ ‫ؿ‬َّ‫األو‬ ‫السطر‬ ‫يحوي‬ ‫سطور‬ ‫بعة‬‫ر‬‫أ‬ ‫مف‬ ‫يتكوف‬ ‫الجدوؿ‬ ّ‫فإف‬ ‫ى‬‫تر‬ ‫كما‬ ‫تعنيو‬ ‫ما‬ ‫(ىذا‬ ً‫ة‬‫مجتمع‬ ‫أسطر‬ ‫ثالثة‬ ‫تفاع‬‫ر‬‫ا‬ ‫يعادؿ‬ ‫تفاع‬‫ر‬‫با‬rowspan="3"‫مف‬ ‫األخير‬ ‫السطر‬ ‫ا‬َّ‫أم‬ ,) ‫تعنيو‬ ‫ما‬ ‫ىذا‬ ‫(و‬ ً‫ة‬‫مجتمع‬ ‫الثالثة‬ ‫الجدوؿ‬ ‫أعمدة‬ ‫بعرض‬ ‫احدة‬‫و‬ ‫خمية‬ ‫عمى‬ ‫فيحوي‬ ‫الجدوؿ‬
  54. 54. ٘ٛ 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‫في‬ ‫البيانات‬ ‫إرساؿ‬ ‫يتـ‬ ‫حيث‬‫في‬ ‫اف‬‫و‬‫العن‬ ‫يط‬‫ر‬‫ش‬ ‫عمى‬ ‫التالي‬ ‫ابط‬‫ر‬‫لم‬ ‫انظر‬ ,‫مفتاح/قيمة‬ ‫اج‬‫و‬‫أز‬ ‫بشكؿ‬ ‫البرمجي‬ ‫الممؼ‬ ‫اسـ‬ ‫بعد‬ ‫المستعرض‬ :‫المثاؿ‬ ‫سبيؿ‬
  55. 55. ٜ٘ http://www.site.com/file.php?name=Mukhtar&age=23&job=ComputerEngin eer ‫ىو‬ ‫الحالة‬ ‫ىذه‬ ‫في‬ ‫البرمجي‬ ‫الممؼ‬ ‫فإف‬ ‫تالحظ‬ ‫كما‬http://www.site.com/file.php ‫ا‬َّ‫أم‬‫فيي‬ ‫المرسمة‬ ‫القيـ‬: name = Mukhtar‫و‬age = 23‫و‬job = ComputerEngineer ٕ–‫يقة‬‫ر‬‫الط‬ ‫ىي‬ ‫الثانية‬ ‫يقة‬‫ر‬‫الط‬post‫في‬ ‫ظاىر‬ ‫غير‬ ‫بشكؿ‬ ‫البيانات‬ ‫إرساؿ‬ ‫يتـ‬ ‫حيث‬ ‫طمب‬ ‫ترويسة‬ ‫مع‬ ‫إرساليا‬ ‫يتـ‬ ‫الحقيقة‬ ‫(في‬ ‫اف‬‫و‬‫العن‬ ‫يط‬‫ر‬‫ش‬HTTP.) ‫أننا‬ ‫بما‬-‫الكتاب‬ ‫ىذا‬ ‫في‬-‫فقط‬ ‫النماذج‬ ‫إنشاء‬ ‫بكيفية‬ ‫سنيتـ‬‫الطمبات‬ ‫معالجة‬ ‫كيفية‬ ‫نناقش‬ ‫لف‬ ‫و‬ ‫فبإمكانؾ‬‫اصفة‬‫و‬‫ال‬ ‫عف‬ ‫ه‬‫ر‬‫ذك‬ ‫تـ‬ ‫ما‬ ‫تجاىؿ‬ ‫اآلف‬method.‫النماذج‬ ‫بناء‬ ‫كيفية‬ ‫عمى‬ ‫التركيز‬ ‫و‬ ‫العنصر‬ ‫إنشاء‬ ‫بعد‬<form>‫و‬ ‫بدايتو‬ ‫وسمي‬ ‫بيف‬ ‫اإلدخاؿ‬ ‫عناصر‬ ‫مف‬ ‫مجموعة‬ ‫بوضع‬ ‫سنقوـ‬ ‫ب‬ ‫نيايتو‬‫الوسـ‬ ‫استخداـ‬<input>ُ‫ي‬ ‫يد‬‫ر‬‫ف‬ ‫باسـ‬ ‫إدخاؿ‬ ‫عنصر‬ ‫كؿ‬ ‫تزويد‬ ‫سيتـ‬ ً‫ا‬‫طبع‬ ‫و‬َ‫سن‬‫كقيمة‬ ‫د‬ ‫اصفتيف‬‫و‬‫لم‬name‫و‬id‫اصفة‬‫و‬‫ال‬ ‫عبر‬ ‫اإلدخاؿ‬ ‫عنصر‬ ‫ع‬‫نو‬ ‫تحديد‬ ‫سيتـ‬ َّ‫ثـ‬ ‫مف‬ ‫و‬ ,type‫الجدوؿ‬ ‫و‬ :‫منيا‬ ‫كؿ‬ ‫يمثمو‬ ‫ما‬ ‫و‬ ‫الممكنة‬ ‫القيـ‬ ‫يوضح‬ ‫ال؀

×