‫لممصمـ المبدع ‪:‬‬

‫ّ‬ ‫تصميـ الغالؼ‬

‫بدر عبدالعزيز اإلبراىيـ‬

 ‫تعمَّم‬

‫‪HTML5 & CSS3‬‬

‫(الخطوة األولى نحو البرمجة لمويب)‬

‫الميندس مختار سيِّد صالح‬

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

‫إلى أعمى نخمتيف عمى ضفاؼ ِ‬

‫القمب ‪...‬‬

‫الدي حفظيما اهلل‪.‬‬

‫و َّ‬
 ‫تنويه‬

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

‫مختار‬

‫البوكماؿ ٓٔ‪ٕٖٓٔ/ٙ/‬‬

‫‪ٜ‬‬
ٔٓ
 ‫بين يدي الكتاب‬

‫ِ‬
‫أصحابو أجمعيف‪ ,‬و‬ ‫محمٍد و عمى ِ‬
‫آلو و‬ ‫السالـ عمى نبيِّنا َّ‬
‫الرحيـ ‪ ,‬و الصَّالة و َّ‬
‫الرحمف ّ‬
‫بسـ اهلل ّ‬
‫بعد‪:‬‬

‫نصي بسيط‪ ,‬حيث أصبح مف الميـ تقديـ‬

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

‫يناقش ىذا الكتاب أحدث إصدار لكؿ مف لغتي ‪ HTML‬و ‪ CSS‬المتاف تعتبراف الخطوة األولى‬
‫ألي ُمطَ ِّور ‪ Web‬إذ يقوـ بشرح لغة ‪ HTML5‬بعد التمييد لذلؾ مف خالؿ شرح ‪ HTML‬التقميدية‬
‫مفصالً لػ‬
‫َّ‬ ‫ثـ معايير ‪ XHTML‬مف الصفر أيضاً‪ ,‬كما ِّ‬
‫يقدـ ىذا الكتاب شرحاً‬ ‫مف الصفر و مف َّ‬
‫‪ CSS3‬بعد التمييد لذلؾ مف خالؿ شرح ‪ CSS‬التقميدية مف الصفر أيضاً‪ ,‬و بيذا فإف ىذا الكتاب‬
‫يتألؼ مف فصميف‪:‬‬

‫ٔ‪ :HTML5 -‬يناقش ىذا الفصؿ اإلصدار الخامس (و األحدث) مف لغة البرمجة النصيَّة‬
‫متدرج و يضمف لقارئو أف يكوف قاد اًر عمى كتابة‬
‫َّ‬ ‫التشعبيَّة ‪ HTML‬بشكؿ مفصَّؿ و‬
‫صفحات ويب بالمحتوى الذي يرغبو و بالشكؿ الذي يريده بإذف اهلل‪.‬‬

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

‫أما عف طريقة عرض األفكار في ىذا الكتاب فقد حاولت و اجتيدت كي أجعميا غير مممَّة و ّل‬ ‫ّ‬
‫معقَّدة و ّل شبيية بالمحتوى المتعب الذي كثي اًر ما عانيت منو في الكتب التي تناقش لغات البرمجة‬
‫َّ‬
‫البرمجية غير المفيومة دفعةً‬ ‫لألسؼ و يمكنني أف أقوؿ أف ىذا الكتاب ّل ِّ‬
‫يفجر عشرات األسطر‬
‫واحدةً في وجو قارئو دوف توضيح ليا‪ ,‬كما َّأنو ّل يطيؿ أكثر مف المطموب في عرض الفكرة‪ ,‬لكنو‬
‫باختصار يقوؿ ما يجب قولو فقط دوف أف يغفؿ أي جانب مف الجوانب التي تتوجب معرفتيا‪.‬‬

‫ختاماً أسأؿ اهلل أف يتقبَّؿ ىذا العمؿ و أف يبارؾ فيو و يكتبو صدقةً جاريةً مف باب العمـ الذي ينتفع‬
‫بو و أف يميـ قارئو الفيـ و الحفظ و الصبر عمى التعمُّـ‪.‬‬

‫ـ‪.‬مختار سيِّد صالح‬

‫البوكماؿ ‪ٕٓٔٔ/ٛ/ٕٛ‬‬

‫ٕٔ‬
 ‫األوؿ‬
‫الفصؿ َّ‬

‫‪HTML 5‬‬

‫ٖٔ‬
ٔٗ
 ‫مقدمة‬

‫ألننا ّل‬
‫يناقش ىذا الفصؿ لغة ‪ HTML5‬التي تعتبر حجر األساس في إنشاء مواقع الويب‪ ,‬و ّ‬
‫يمكف أف نتحدث عف ‪ HTML5‬مباشرةً فسيناقش ىذا الفصؿ لغتي ‪ HTML‬و ‪ XHTML‬أوّلً‪ ,‬و‬
‫البداية مع لغة ‪.HTML‬‬

‫ما هي ‪ HTML‬؟‬

‫َّ‬
‫إف ‪ HTML‬ىي اختصار ‪ abbreviation‬الحروؼ األولى مف الجممة ‪Hyper Text Markup‬‬
‫‪ Language‬و التي تعني بترجمة غير حرفية (لغة وصؼ صفحات الويب)ٔ‪ ,‬و ىي ليست لغة‬
‫برمجيَّة‪ّ ,‬ل‪ ,‬بؿ ىي لغة وصفيَّة ‪َّ ,Markup Language‬‬
‫ألف ‪ HTML‬تستخدـ مجموعة مف‬
‫الوسوـ ‪ Tags‬لوصؼ صفحة الويب‪.‬‬

‫أما الوسوـ ‪ Tags‬فيي كممات أو أحرؼ محددة مسبقاً ‪ Keywords‬تحمؿ معاني خاصَّة‪ ,‬و تكوف‬
‫َّ‬
‫محصورة بيف قوسيف مف الشكؿ > < مثؿ >‪ <b‬و >‪ ,<html‬تأتي الوسوـ في الغالب عمى شكؿ‬
‫األوؿ >‪ <b‬بوسـ البداية ‪ Begin Tag‬أو وسـ الفتح‬
‫أزواج مثؿ >‪ <b‬و >‪ ,</b‬يدعى الوسـ َّ‬
‫أو وسـ اإلغالؽ‬ ‫‪ ,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‬عمى سبيؿ المثاؿ لنشاىد الشكؿ النيائي‬
‫لمصفحة كمايمي‪:‬‬

‫ألول صفحة مكتوبة باستخدام ‪HTML‬‬

‫الشكل ‪ : 2‬الشكل النهائي في المستعرض َّ‬

‫كما ترى فقد قمنا بكتابة صفحتنا األولى باستخداـ لغة ‪ 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‬و يحوي كؿ‬
‫نصاً َّ‬
‫عادياً لعرضو (كما فعؿ العنصر ‪p‬‬ ‫عنصر مف عناصر ‪ HTML‬بيف وسمي بدايتو و نيايتو َّ‬
‫في مثالنا السابؽ) و يمكف أف يحوي أي عدد آخر مف عناصر ‪ 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 href="index.htm‬‬ ‫‪Go to index‬‬ ‫>‪</a‬‬
‫>‪<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‬و ليا‬ ‫بالنسبة لممستند‬
‫استخدامات أخرى سيتـ عرض أحدىا في فقرة‬
‫الروابط الداخمية ّلحقاً‬
‫لتحديد اتجاه القراءة‪ ltr ,‬تعني أف اتجاه القراءة مف‬ ‫‪ltr‬‬ ‫‪dir‬‬
‫أما ‪ rtl‬فتعني أف اتجاه القراءة مف‬
‫اليسار إلى اليميف َّ‬ ‫‪rtl‬‬
‫اليميف إلى اليسار‬
‫لتحديد محاذاة النص‬ ‫‪left‬‬ ‫‪align‬‬
‫‪right‬‬
‫‪center‬‬
‫‪justify‬‬
‫لمنح كافة خصائص الفئة إلى العنصر و سيتـ‬ ‫أي اسـ فئة ‪ CSS‬صالح‬ ‫‪class‬‬
‫مناقشة ىذا بالتفصيؿ في الفصؿ الخاص بػ ‪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> <hr /‬حز‪ ٜٛ‬اٌفمشح األ‪ٌٍ ٌٝٚ‬زجشثخ فمؾ>‪<p‬‬

‫>‪ --‬انضطريه انرانييه نهفقرج انثاويح ‪<!--‬‬

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

‫>‪ --‬انضطر انراني نهفقرج انثانثح ‪<!--‬‬

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

‫>‪</body‬‬

‫>‪</html‬‬

‫‪ٕٜ‬‬
‫تبدو الشيفرة السابقة كمايمي في مستعرض الويب مما يؤ ّكد أف التعميقات ّل تظير في المستند( أثناء‬
‫جرب اختيار األمر "عرض‪ <-‬المصدر" أو "‪:)"View->source‬‬
‫استعراض الصفحة ِّ‬

‫الشكل ‪ : 6‬التعميقات تظهر بالمون األخضر في نافذة عرض المصدر و ال تظهر في الصفحة‬

‫األوؿ في بداية وسـ التعميؽ‪.‬‬

‫تنس إشارة التعجُّب بعد القوس ّ‬
‫ممحوظة‪ّ :‬ل َ‬

‫عناصر النصوص ‪Paragraphs‬‬

‫تتكوف صفحة الويب في الواقع مف مجموعة مف الفقرات النصية في الغالب‪ ,‬يتـ إنشاء ىذه الفقرات‬
‫باستخداـ الوسـ >‪ <p‬و الذي مر معنا استخدامو في األمثمة السابقة‪ ,‬و يستخدـ الوسـ >‪<br /‬‬
‫لمنزوؿ إلى السطر التالي و ذلؾ ألف محارؼ الفراغات بما فييا محرؼ المفتاح ‪ Enter‬ليس ليا‬
‫قيمة في لغة ‪ HTML‬كما ذكرنا سابقاً‪.‬‬

‫عناصر تنسيق النصوص ‪Text Formatting‬‬

‫توفر لغة ‪ HTML‬مجموعة مف العناصر لتنسيؽ النصوص‪ ,‬فمجعؿ النص عريضاً ‪ Bold‬توفر‬
‫العنصر >‪( <b‬أو العنصر >‪ ,)<strong‬و لجعؿ النص مائالً ‪ Italic‬توفر العنصر >‪( <i‬أو‬

‫ٖٓ‬
‫ توفر‬Delete ‫ و لشطب النص‬,<u> ‫ و لوضع خط أسفؿ النص توفر العنصر‬,)<em> ‫العنصر‬
:‫ لنشاىد الشيفرة التالية عمى سبيؿ المثاؿ‬,<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; ‫محرؼ الفراع‬
HTML ‫ بعض المحارف الخاصة في‬: 2 ‫الجدول‬

:‫لنشاىد المثاؿ التالي‬

<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><br /‬مايكروصىفد>"‪<a href="http://www.microsoft.com‬‬

‫>‪</a><br /‬جىجم>"‪<a href="http://www.google.com‬‬

‫>‪<a href="http://www.msn.com" target="_blank" >MSN</a‬‬

‫>‪<br /‬‬

‫>‪</a‬أول مثال>"‪<a href="firstPage.html" target="_self‬‬

‫>‪</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‬ساسٍٕ‪<a href ="mailto:mokhtar_ss@hotmail.com">ٟ‬‬

‫>‪</body‬‬

‫>‪</html‬‬

‫األوؿ ىو ظيور مرّبع تحميؿ الممؼ ‪ Save File Dialog‬و ما‬

‫ما سيحدث عند النقر عمى الرابط َّ‬
‫سيحدث عند النقر عمى الممؼ الثاني ىو ظيور برنامج مدير البريد اإللكتروني (مثؿ ‪Outlook‬‬
‫‪ )Express‬في وضع إرساؿ رسالة جديدة إلى البريد اإللكتروني المذكور في الرابط‪.‬‬

‫عناصر الصور ‪Images‬‬

‫توفر لغة ‪ HTML‬عنص اًر خاصاً لعرض الصور ضمف الصفحة ىذا العنصر ىو العنصر‬
‫>‪( <img/‬اختصا اًر لػ ‪ )Image‬الذي يقوـ بعرض الصورة ضمف الصفحة اعتماداً عمى مسارىا‬
‫الذي يمرر لمعنصر عبر الواصفة ‪( src‬اختصا اًر لػ ‪ ,)Source‬و كما ىو الحاؿ بالنسبة لمعنصر‬
‫فإف شكمو العاـ في الغالب‬
‫فإف العنصر >‪ّ <img/‬ل يمتمؾ أي وسـ نياية و لذلؾ ّ‬
‫الخاص >‪ّ <br/‬‬
‫يكوف >‪ ,<img src="path" /‬لنشاىد المثاؿ التالي‪:‬‬

‫>‪<html‬‬

‫>‪<head‬‬

‫>‪<title‬‬

‫طفحخ ٌؼشع ػٕبطش اٌظ‪ٛ‬س‬

‫>‪</title‬‬

‫>‪</head‬‬

‫‪ٖٚ‬‬
 ‫>‪<body‬‬

‫>‪<img src="myPic.jpg" /‬‬

‫>‪" /‬انصىرج انثاويح"=‪<img src="myPic2.gif" alt‬‬

‫"‪" width="100px‬اٌظ‪ٛ‬سح اٌثبٌثخ"=‪<img src="myPic.jpg" alt‬‬

‫>‪height="50px" /‬‬

‫>‪" /‬ط‪ٛ‬سر‪ ٟ‬راد اٌّسبس اٌخبؿئ"=‪ِ" alt‬سبس خبؿئ"=‪<img src‬‬

‫>‪</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‬‬

‫>‪" usemap="#planetmap" /‬اٌى‪ٛ‬اوت"=‪alt‬‬

‫>"‪<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‬تحدداف‬
‫منطقة كوكب الشمس بالمستطيؿ المرسوـ‬
‫أما في حالة المنطقة الدائرية فيتـ‬
‫بينيما‪َّ ,‬‬
‫تمرير ثالثة إحداثيات يعبر األوؿ و الثاني‬
‫عف نقطة مركز الدائرة و يعبر الثالث عف‬

‫الشكل ‪ : 13‬شكل تخيمي لتوضيح المبدأ الهندسي في رسم المناطق‬ ‫نصؼ قطرىا‪.‬‬

‫و في النياية قمنا بتمرير اسـ الخريطة إلى الواصفة ‪ usemap‬الخاصة بالصورة‪.‬‬

‫ممحوظة‪ :‬يتـ تمرير اسـ الخريطة إلى الواصفة ‪ usemap‬مسبوقاً بالرمز ‪#‬‬

‫الروابط الداخميَّة ‪Internal Linking‬‬

‫معينة كبي اًر إلى حد ما و في حالة مثؿ ىذه يصبح‬

‫أحياناً يكوف المحتوى الموجود ضمف صفحة ّ‬
‫اّلنتقاؿ إلى فقرة محددة ضمف الصفحة عممية تستغرؽ بعض الجيد و الوقت‪ ,‬توفِّر لغة ‪HTML‬‬
‫آليَّة لالنتقاؿ إلى جزء محدد مف الصفحة مباشرة عبر ما يعرؼ بالروابط الداخمية ‪Internal Links‬‬

‫ٕٗ‬
‫معرؼ العنصر المراد اّلنتقاؿ إليو‬
‫و التي يتـ تحقيقيا عبر استخداـ وسـ الرابط >‪ <a‬و تمرير َّ‬
‫كقيمة لمواصفة ‪ href‬بالشكؿ التالي‪:‬‬

‫‪<a href="#id"> id‬‬ ‫>‪</a‬أزمً إٌ‪ ٝ‬اٌؼٕظش ر‪ ٚ‬اٌّؼشف‬

‫ِّ‬
‫يوضح ىذه‬ ‫أف ‪ id‬يمثؿ معرؼ العنصر المراد اّلنتقاؿ إليو ضمف الصفحة و المثاؿ التالي‬
‫حيث ّ‬
‫الفكرة‪:‬‬

‫>‪<html‬‬

‫>‪<head‬‬

‫>‪<title‬‬

‫ِثبي ػٍ‪ ٝ‬اٌش‪ٚ‬اثؾ اٌذاخٍ‪١‬خ‬

‫>‪</title‬‬

‫>‪</head‬‬

‫>‪<body‬‬

‫>‪</a‬إٌ‪ ٝ‬اٌفمشح اٌشاثؼخ>"‪<a href="#Para4‬‬

‫>‪</h1‬اٌفمشح األ‪<h1>ٌٝٚ‬‬

‫>‪ٕ٘</p‬ب ِحز‪ ٜٛ‬اٌفمشح األ‪<p>ٌٝٚ‬‬

‫>‪</h1‬اٌفمشح اٌثبٔ‪١‬خ>‪<h1‬‬

‫>‪ٕ٘</p‬ب ِحز‪ ٜٛ‬اٌفمشح اٌثبٔ‪١‬خ>‪<p‬‬

‫>‪</h1‬اٌفمشح اٌثبٌثخ>‪<h1‬‬

‫>‪ٕ٘</p‬ب ِحز‪ ٜٛ‬اٌفمشح اٌثبٌثخ>‪<p‬‬

‫>‪</h1‬اٌفمشح اٌشاثؼخ>"‪<h1 id="Para4‬‬

‫>‪ٕ٘</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‬و الذي يتـ تحقيقو باستخداـ‬
‫ثـ يتـ ذكر محتويات خاليا ‪ table data‬كؿ سطر مف أسطر الجدوؿ عمى حدى و‬
‫الوسـ >‪َّ ,<tr‬‬
‫ذلؾ عبر الوسـ >‪ ,<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‬مف العرض الكمي‬
‫لمصفحة (حاوؿ تغيير حجـ نافذة المستعرض لتالحظ أف ذلؾ يبقى صحيحاً!)‪,‬و بعرض حدود‬
‫ثـ قمنا بإنشاء سطر جديد باستخداـ الوسميف >‪ ,<tr></tr‬يحوي ىذا السطر‬
‫‪ ٔ border‬بكسؿ‪َّ ,‬‬
‫ثـ قمنا‬
‫عمى خميتيف >‪ <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‬حيث يتـ إرساؿ البيانات في شريط العنواف في‬
‫المستعرض بعد اسـ الممؼ البرمجي بشكؿ أزواج مفتاح‪/‬قيمة‪ ,‬انظر لمرابط التالي عمى‬
‫سبيؿ المثاؿ‪:‬‬

‫‪٘ٛ‬‬
‫‪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‬و طبعاً سيتـ تزويد كؿ عنصر إدخاؿ باسـ فريد ُي َ‬
‫ثـ سيتـ تحديد نوع عنصر اإلدخاؿ عبر الواصفة ‪ type‬و الجدوؿ‬
‫لمواصفتيف ‪ name‬و ‪ ,id‬و مف َّ‬
‫التالي يوضح القيـ الممكنة و ما يمثمو كؿ منيا‪:‬‬

‫ما تمثمه‬ ‫القيمة‬

‫زر أوامر‬ ‫‪button‬‬
‫عنصر اختيار متعدد‬ ‫‪checkbox‬‬
‫مربع ّلختيار ممؼ بغية رفعو إلى الموقع‬ ‫‪file‬‬
‫عنصر إدخاؿ مخفي‬ ‫‪hidden‬‬
‫عنصر إدخاؿ كممة المرور‬ ‫‪password‬‬
‫عنصر اختيار فردي‬ ‫‪radio‬‬
‫زر إلعادة ضبط القيـ اّلفتراضية لعناصر‬ ‫‪reset‬‬

‫‪ٜ٘‬‬
 ‫اإلدخاؿ كاممةً في النموذج‬
)‫زر موافؽ (إرساؿ الطمب‬ submit
‫مربع إدخاؿ نص‬ text
>input< ‫ الخاصة بعنصر‬type ‫ القيم المختمفة لمواصفة‬: 3 ‫الجدول‬

:‫إف بدت لؾ المعمومات كثيرة و معقدة و تابع معي الشيفرة التالية‬

ْ ‫ّل تقمؽ‬
<html>

<head>

<title>

‫ؾ‬١‫رج ثس‬ّٛٔ ‫ إٔشبء‬ٍٝ‫ِثبي ػ‬

</title>

</head>

<body dir="rtl">

<form method="get" action="file.php">

: ‫االصم‬

<input type="text" name="nameText" id="nameText" />

<br/>

: ‫كهمح انمرور‬

<input type="password" name="pass" id="pass" />

<br/>

<input type="submit" name="okButton" id="okButton"

value="‫ "مىافك‬/>

</form>

</body>

</html>

ٙٓ
 ‫و التي تبدو عند عرضيا في مستعرض الويب و بعد إدخاؿ بعض البيانات كمايمي‪:‬‬

‫الشكل ‪ : 23‬مثال عمى إنشاء نموذج بسيط‬

‫حسناً الموضوع بسيط كما رأيت‪ ,‬دعنا نقوـ بتطوير نموذجنا ىذا ليشمؿ مجموعة أخرى مف عناصر‬
‫اإلدخاؿ عمى سبيؿ التجربة‪ ,‬انظر لمشيفرة التالية‪:‬‬

‫>‪<html‬‬

‫>‪<head‬‬

‫>‪ِ</title‬ثبي ػٍ‪ ٝ‬إٔشبء ّٔ‪ٛ‬رج أػمذ لٍ‪١‬لً>‪<title‬‬

‫>‪</head‬‬

‫>"‪<body dir="rtl‬‬

‫>"‪<form method="get" action="file.php‬‬

‫"‪ <input type="text" name="nameText‬االسُ‪:‬‬

‫>‪id="nameText" /‬‬

‫>‪<br/‬‬

‫"‪ <input type="password" name="pass‬وٍّخ اٌّش‪ٚ‬س‪:‬‬

‫>‪id="pass" /‬‬

‫>‪<br/‬‬

‫ٔ‪ٙ‬‬
 ‫"‪ <input type="file" name="pic‬اٌظ‪ٛ‬سح اٌشخظ‪١‬خ‪:‬‬
‫>"‪id="pic‬‬

‫>‪<br/‬‬

‫"‪<input type="reset" name="resBtn" id="resBtn‬‬

‫>‪" /‬اسزؼبدح"=‪value‬‬

‫"‪<input type="submit" name="okButton" id="okButton‬‬

‫>‪ِٛ" /‬افك"=‪value‬‬

‫>‪</form‬‬

‫>‪</body‬‬

‫>‪</html‬‬

‫تبدو الشيفرة السابقة في مستعرض الويب كمايمي‪:‬‬

‫الشكل ‪ : 24‬إنشاء نموذج أعقد بقميل‬

‫ميالً! ‪ ..‬و لكف ماذا عف عناصر اّلختيار ‪ radio‬و ‪ checkbox‬؟‬

‫حسناً‪ ,‬في الواقع يتـ استعماؿ ىذه العناصر في النماذج بغية تمكيف المستخدـ مف اإلجابة عمى‬
‫سؤاؿ محدد و ذلؾ باختيار جواب واحد فقط مف عدة إجابات محتممة (في حالة عنصر ‪ )radio‬أو‬
‫اإلجابة عمى سؤاؿ محدد باختيار أكثر مف جواب (في حالة عنصر ‪ )checkbox‬و يتـ استخداـ‬

‫ٕ‪ٙ‬‬
‫ىذه العناصر بنفس الطريقة السابقة مع ممحوظة إعطاء جميع العناصر التي تمثؿ إجابة لنفس‬
:‫ لنشاىد المثاؿ التالي‬,value ‫ و قيماً مختمفة لمواصفة‬name ‫السؤاؿ القيمة ذاتيا لمواصفة‬

<html>

<head>

<title> radio ٚ checkbox َ‫ اسزخذا‬ٍٝ‫<ِثبي ػ‬/title>

</head>

<body dir="rtl">

<form method="post" action="file.php">

<p>‫لؼٕب ؟‬ِٛ ٓ‫ٓ ػٍّذ ػ‬٠‫<ِٓ أ‬/p>

‫ذح‬٠‫جش‬

<input type="checkbox" name="wrKnow" value="nPaper" />

ٟٔٚ‫لغ إٌىزش‬ِٛ

<input type="checkbox" name="wrKnow" value="wbSite" />

‫ك‬٠‫طذ‬

<input type="checkbox" name="wrKnow" value="frnd" />

‫ِحشن ثحث‬

<input type="checkbox" name="wrKnow" value="srEng" />

<p>‫لؼٕب؟‬ٌّٛ ‫ّه‬١١‫<ِب رم‬/p>

‫ذ‬١‫ج‬

<input type="radio" name="rate" value="good" />

‫سؾ‬ٛ‫ِز‬

<input type="radio" name="rate" value="mid" />

‫ء‬ٟ‫س‬

<input type="radio" name="rate" value="bad" />

ٖٙ
‫>‪</form‬‬

‫>‪</body‬‬

‫>‪</html‬‬

‫و الذي يبدو في المستعرض كمايمي‪:‬‬

‫الشكل ‪ : 25‬مثال عمى استخدام ‪ checkbox‬و ‪radio‬‬

‫ىناؾ طريقة أخرى لتحقيؽ شيء مشابو لعنصر ‪ radio‬مف حيث اليدؼ و لكنو يستخدـ في حاؿ‬
‫وجود بدائؿ كثيرة (أجوبة كثيرة محتممة لمسؤاؿ) و ىو عنصر القائمة المنسدلة و يتـ تحقيقو عبر‬
‫أما عناصر القائمة فيتـ تحقيقيا مف خالؿ الوسـ >‪ <option‬و يتـ تحديد أحد‬
‫الوسـ >‪َّ <select‬‬
‫ىذه العناصر كخيار افتراضي عف طريؽ تمرير الواصفة "‪ selected="selected‬في وسـ بدايتو‪,‬‬
‫لنشاىد المثاؿ التالي‪:‬‬

‫>‪<html‬‬

‫>‪<head‬‬

‫>‪ِ</title‬ثبي ػٍ‪ ٝ‬اسزخذاَ ‪<title>select‬‬

‫>‪</head‬‬

‫>"‪<body dir="rtl‬‬

‫ٗ‪ٙ‬‬
 <form method="post" action="file.php">

<p>‫ اٌجٍذاْ أٔذ؟‬ٞ‫<ِٓ أ‬/p>

<select name="nationality">

<option selected="selected">‫<صىريا‬/option>

<option>‫<انعراق‬/option>

<option>‫<نثىان‬/option>

<option>‫<فهضطيه‬/option>

<option>‫<األردن‬/option>

<option>‫<انمغرب‬/option>

<option>‫<انجزائر‬/option>

</select>

</form>

</body>

</html>

:‫و الذي يبدو في المستعرض كمايمي‬

select ‫ مثال عمى استخدام عنصر‬: 26 ‫الشكل‬

ٙ٘
‫بقي عنصر إدخاؿ أخير لمناقشتو ىنا و ىو العنصر >‪ <textarea‬و الذي يستخدـ إلدخاؿ قيمة‬
‫نصية متعددة األسطر عمى عكس العنصر >‪ <input‬مف النوع ‪ text‬و الذي يستخدـ إلدخاؿ قيمة‬
‫نصية وحيدة السطر‪.‬‬

‫يمرر لمعنصر >‪ <textarea‬قيـ عددية صحيحة عبر الواصفتيف ‪ cols‬و ‪ rows‬لتحديد عرضو و‬
‫ارتفاعو‪ ,‬انظر الشيفرة التالية‪:‬‬

‫>‪<html‬‬

‫>‪<head‬‬

‫>‪<title‬‬

‫ِثبي ػٍ‪ ٝ‬اسزخذاَ ‪textarea‬‬

‫>‪</title‬‬

‫>‪</head‬‬

‫>"‪<body dir="rtl‬‬

‫>"‪<form method="post" action="file.php‬‬

‫>‪</p‬اوزت ٔجزح لظ‪١‬شح ػٕه>‪<p‬‬

‫>"‪<textarea cols="30" rows="10" name="bio‬‬

‫>‪</textarea‬‬

‫>‪</form‬‬

‫>‪</body‬‬

‫>‪</html‬‬

‫و الذي يبدو عند استعراضو في مستعرض الويب كمايمي‪:‬‬

‫‪ٙٙ‬‬
 ‫الشكل ‪ : 27‬مثال عمى استخدام العنصر ‪textarea‬‬

‫تقسيم عناصر اإلدخال إلى مجموعات‬

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

‫>‪<html‬‬

‫>‪<head‬‬

‫>‪<title‬‬

‫ِثبي ػٍ‪ ٝ‬اسزخذاَ ‪fieldset‬‬

‫>‪</title‬‬

‫>‪</head‬‬

‫‪ٙٚ‬‬
 <body dir="rtl">

<form method="get" action="">

<fieldset>

<legend>‫<انثياواخ انشخصيح‬/legend>

<label for="nameTXT">‫<االصم‬/label>

<input type="text" name="nameTXT" id="nameTXT"

maxlength="50" />

<br/><br/>

<label for="ageTXT">‫<انعمر‬/label>

<input type="text" name="ageTXT" id="ageTXT"

maxlength="2" />

</fieldset>

<br/>

<fieldset>

<legend>‫<مهاراخ انعمم‬/legend>

C#

<input type="checkbox" name="prog" value="cs"/>

VB.NET

<input type="checkbox" name="prog" value="vb"/>

F#

<input type="checkbox" name="prog" value="fs"/>

C++.NET

<input type="checkbox" name="prog" value="cpp"/>

ٙٛ
 ‫>‪</fieldset‬‬

‫>‪<fieldset‬‬

‫>‪" /‬إسسبي"=‪<input type="submit" value‬‬

‫>‪</fieldset‬‬

‫>‪</form‬‬

‫>‪</body‬‬

‫>‪</html‬‬

‫تبدو الشيفرة السابقة كمايمي في مستعرض الويب‪:‬‬

‫الشكل ‪ : 28‬مثال عمى استخدام ‪fieldSet‬‬

‫اإلطارات ‪Frames‬‬

‫تسمح لؾ لغة ‪ HTML‬بتضميف صفحات ويب ضمف صفحات أخرى‪ ,‬و ذلؾ عبر استخداـ‬
‫اإلطارات ‪.Frames‬‬

‫‪ٜٙ‬‬
‫يتـ استعماؿ اإلطارات في الصفحة عمى مرحمتيف‪ ,‬األولى بإنشاء حاوية اإلطارات باستخداـ الوسـ‬
‫>‪ <frameset‬و الذي يحدد بدايةً عدد اإلطارات التي سيتـ تضمينيا‪ ,‬و الحجـ الذي سيأخذه كؿ‬
‫أما المرحمة الثانية‬
‫إطار مف حجـ الصفحة الكمي‪ ,‬و يتـ تحديد الحجـ بالبكسؿ أو بالنسبة المئوية‪ّ ,‬‬
‫فيتـ فييا إضافة اإلطارات بيف وسمي البداية و النياية لمعنصر >‪ <frameset‬و ذلؾ باستخداـ‬
‫الوسـ >‪ <frame‬و إسناد مسار الصفحة التي سيحوييا اإلطار لمواصفة ‪ , src‬لنشاىد المثاؿ‬
‫األوؿ بحجـ قدره ٖٓ‪ %‬مف حجـ الصفحة الكمي و الثاني بالحجـ‬
‫التالي لصفحة ويب تضـ إطاريف َّ‬
‫الباقي مف الصفحة‪:‬‬

‫>‪<html‬‬

‫>"*‪<frameset cols="30%,‬‬
‫>‪<frame src="page_1.htm" /‬‬
‫>‪<frame src="page_2.htm" /‬‬
‫>‪</frameset‬‬

‫>‪</html‬‬

‫يبدو ىذا في مستعرض الويب كمايمي‪:‬‬

‫الشكل ‪ : 29‬استخدام اإلطارات بشكل عمودي‬

‫ٓ‪ٚ‬‬
 ‫ممحوظة‪ :‬الصفحة التي تستعمؿ فييا اإلطارات ّل تحوي عمى وسـ >‪.<body‬‬

‫يمكف أف يقوـ المستخدـ بتغيير حجـ اإلطارات عف طريؽ تحريؾ الخط الفاصؿ بينيما و الظاىر‬
‫بوضوح في الشكؿ السابؽ (انظر الشكؿ ‪ ,)ٕٜ‬يمكف إلغاء ىذا السموؾ لإلطارات عف طريؽ إضافة‬
‫الواصفة "‪ noresize="noresize‬إلى وسوـ >‪.<frame‬‬

‫في المثاؿ السابؽ كانت اإلطارات بشكؿ عمودي و ليذا تـ استعماؿ الواصفة ‪ cols‬مع الوسـ‬
‫>‪ ,<frameset‬و يمكف جعؿ اإلطارات بشكؿ أفقي عف طريؽ استبداؿ الواصفة ‪ cols‬بالواصفة‬
‫‪ ,rows‬لتصبح الصفحة كمايمي في مستعرض الويب‪:‬‬

‫الشكل ‪ : 31‬استخدام اإلطارات بشكل أفقي‬

‫تذكرة‪ :‬يمكف جعؿ الرابط يعرض محتواه في إطار معيَّف عف طريؽ إسناد اسـ اإلطار إلى واصفة ‪ target‬الخاصة‬
‫بالرابط >‪( <a‬انظر فقرة الروابط التشعبيَّة ‪.)Links‬‬

‫في حيف أف الوسميف >‪ <frameset‬و >‪ <frame‬يستخدماف إلنشاء صفحة أـ تضـ مجموعة مف‬
‫الصفحات فقط في إطاراتيا فإف لغة ‪ HTML‬توفر الوسـ >‪ <iframe‬لتضميف صفحة ويب في‬

‫ٔ‪ٚ‬‬
‫صفحة أخرى بشكؿ متناسؽ مع بقية محتوى الصفحة‪ ,‬و يستخدـ الوسـ >‪ <iframe‬بالصيغة‬
‫التالية‪:‬‬

‫>‪<iframe src="URL"></iframe‬‬

‫حيث َّ‬
‫أف ‪ URL‬ىو مسار الصفحة التي سيتـ تضمينيا‪ ,‬و يمكف ضبط حجـ اإلطار عف طريؽ‬
‫الواصفتيف ‪ height‬و ‪ width‬بالبكسؿ أو بالنسبة المئوية‪.‬‬

‫أف اإلطارات ستمغى مستقبالً‬

‫آخر ما يجب ذكره ىنا أف ىناؾ مستعرضات ّل تدعـ اإلطارات‪ ,‬كما ّ‬
‫مف المغة‪ ,‬عمى الرغـ مف أف بعض المستعرضات ما زالت تدعميا إلى تاريخ كتابة ىذه األسطر‪.‬‬

‫عناصر الـ ‪Meta‬‬

‫ذكرت في بداية ىذا الفصؿ َّ‬

‫أف ىناؾ عناصر غير مرئية تضاؼ في منطقة رأس الصفحة بيف‬
‫وسمي >‪ <head‬و >‪ </head‬تستخدميا محركات البحث مف أجؿ تصنيؼ صفحتؾ و عرضيا‬
‫ضمف نتائج البحث‪ ,‬و ىذه العناصر ىي عناصر الػ ‪ ,meta‬و بالطبع فمف األىمية بمكاف جعؿ‬
‫تصنؼ صفحتؾ بشكؿ صحيح كي ّل تخسر معظـ زوار موقعؾ القادميف إثر‬
‫ّ‬ ‫محركات البحث‬
‫عممية بحث ما عمى أحد محركات البحث‪.‬‬

‫يتـ تحقيؽ عناصر الػ ‪ meta‬مف خالؿ الوسـ ‪ meta‬و بتمرير اسـ ‪ name‬و محتوى ‪content‬‬
‫لعنصر الػ ‪ meta‬كواصفتيف لو‪ ,‬و َّ‬
‫لعؿ أىـ عنصري ‪ meta‬في أي صفحة ويب ىما العنصراف‬
‫المذاف يحمالف اّلسميف ‪ keywords‬و ‪ ,description‬و المذاف يستخدماف كمايمي‪:‬‬

‫>‪<html‬‬

‫>‪<head‬‬

‫‪<meta name="keywords" content="xhtml website test‬‬

‫>‪meta head"/‬‬

‫‪<meta name="description" content="this page‬‬

‫>‪demonstrates how to use meta elements"/‬‬

‫ٕ‪ٚ‬‬
 ‫>‪</head‬‬

‫ً س‪١‬ى‪ٕ٘ ْٛ‬ب>‪<body‬‬
‫َّب‬
‫>‪ِ</body‬حز‪ ٜٛ‬اٌظفحخ إٌ‪ٙ‬بئ‪ ٟ‬فؼٍ‪١‬‬

‫>‪</html‬‬

‫حيث يعرض عنصر الػ ‪ Meta‬ذو اّلسـ ‪ Keywords‬مجموعة مف الكممات المفتاحية التي تظف‬
‫أف المستخدميف سيبحثوف عف أحدىا ضمف المستعرض و الموجودة في صفحتؾ‪ ,‬أما عنصر الػ‬
‫‪ Meta‬ذو اّلسـ ‪ Description‬فيحوي وصفاً مختص اًر عف المحتوى الذي تقدمو صفحتؾ‪.‬‬

‫بالطبع عند عرض ىذه الصفحة في مستعرض الويب ّل تتوقع أف تشاىد محتوى عناصر الػ ‪Meta‬‬
‫فميمة ىذه العناصر كما قمنا ىو تقديـ بيانات عف البيانات الموجودة ضمف صفحتؾ‪.‬‬
‫ظاى اًر ّ‬

‫و بانتياء حديثنا عف عناصر الػ ‪ Meta‬نكوف قد أنيينا ‪-‬بفضؿ اهلل‪ -‬مناقشة لغة ‪ HTML‬بأغمب‬
‫وسوميا‪ ,‬و سنتابع في الصفحات التالية استعراض وسوـ ‪ HTML‬العصريَّة و التي تعرؼ باسـ‬
‫أما اآلف‬
‫‪ , HTML5‬و لكف قبؿ ذلؾ سنستعرض لغة ‪ HTML‬الموسَّعة أو ما ُيعرؼ بػ ‪َّ ,XHTML‬‬
‫فأرى أف نعرض جدوّلً بوسوـ ‪ HTML‬التقميديَّة ليكوف مرجعاً سريعاً عند الحاجة‪.‬‬

‫ٖ‪ٚ‬‬
 ‫دليل وسوم ‪HTML‬‬

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

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

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

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

‫‪ٚٚ‬‬
 ‫‪XHTML‬‬

‫َّ‬
‫إف ‪ XHTML‬ىي اختصار لػ ‪ eXtensible HTML‬و التي تعني ‪ HTML‬القابمة لمتوسُّع (البعض‬
‫يدعوىا ‪ HTML‬الموسَّعة)‪ ,‬و ىي ّل تختمؼ عف ‪ HTML‬التقميديَّة مف ناحية الوسوـ و ّل مف‬
‫ناحية الواصفات‪ ,‬و لكف ببساطة يمكف اعتبارىا معايير أكثر صرامةً لكتابة مستندات ‪HTML‬‬
‫بشكؿ يتوافؽ و قواعد لغة ‪ ,)eXtensible Markup Language( XML‬و ىذا ما يعطي‬
‫صفحاتنا توافقيَّة أكبر مع مستعرضات الويب‪ ,‬كما يدؿ اّللتزاـ بمعايير ‪ XHTML‬عمى احترافية‬
‫كمطوري ويب‪ -‬أف يبقى محصو اًر في مستعرض الويب‬
‫أكبر في العمؿ‪ ,‬و بالطبع ّل أريد لتفكيرنا ‪ِّ -‬‬
‫الخاص بالحاسوب‪ ,‬فمنف ِّكر في مستعرضات الويب الخاصة باليواتؼ الذكيَّة أو باألجيزة الصغيرة‬
‫األخرى و لنسأؿ أنفسنا‪ :‬ىؿ ستبدو صفحاتنا كما نريد عمى كؿ مستعرضات الويب؟‪ ,‬ىذا ما تحاوؿ‬
‫‪ XHTML‬اإلجابة عنو‪.‬‬

‫ففي حيف أف شبكة اّلنترنت تحوي مميارات صفحات الويب فثَ َّمةَ نسبة كبيرة مف ىذه الصفحات‬
‫مكتوبة بشكؿ رديء ‪ -‬لألسؼ ‪ -‬يشبو مايمي عمى سبيؿ المثاؿ‪:‬‬

‫>‪<hTml‬‬

‫>‪<heaD‬‬

‫>‪</title‬طفحخ ‪ HTML‬سد‪٠‬ئخ >‪<title‬‬

‫>‪<BODY‬‬

‫‪<h1>Bad HTML‬‬

‫‪<p>This is a paragraph‬‬

‫>‪</boDy‬‬

‫تؤمف أدنى فرصة‬

‫مع أف الشيفرة أعاله ستعمؿ عمى بعض المستعرضات إّل أنيا باعتقادي لف ِّ‬
‫عمؿ لمف قاـ بكتابتيا ألنيا ّل تعكس أدنى معرفو بكتابة ‪ HTML‬و أفضؿ ما يمكف أف يقاؿ عنيا‬
‫أنيا مكتوبة بشكؿ رديء‪ ,‬و قد ظيرت ‪ XHTML‬لمحد مف انتشار صفحات كالصفحة أعاله‪.‬‬

‫‪ٚٛ‬‬
 ‫قواعد ‪XHTML‬‬

‫إف يتـ تطبيقيا حيف كتابة أي مستند‬

‫تتمخص ‪ XHTML‬في مجموعة مف القواعد البسيطة التي ما ْ‬
‫فسي َع ُّد المستند مستند ‪ ,XHTML‬و أستطيع تمخيص قواعد ‪ XHTML‬في مجموعة‬
‫‪ُ HTML‬‬
‫النصائح التالية٘‪:‬‬

‫تنس وسـ اإلغالؽ‪.‬‬

‫‪ّ ‬ل َ‬
‫‪ ‬اكتب وسوـ و واصفات صفحتؾ بأحرؼ صغيرة ‪.Lower Case‬‬
‫اع أف يكوف ترتيب وسوـ اإلغالؽ متناظ اًر مع وسوـ الفتح‪.‬‬
‫‪ ‬رِ‬
‫سندة لمواصفات بيف عالمات اقتباس‪.‬‬
‫الم َ‬
‫‪ ‬ضع القيـ ُ‬
‫تستغف عف أي مف وسوـ >‪ <html‬و >‪ <body‬و >‪.<head‬‬ ‫ِ‬ ‫‪ّ ‬ل‬
‫‪ ‬ضع تعريؼ نوع المستند ‪ DOCTYPE‬في بداية صفحتؾ (سيعرض في الفقرة التالية)‪.‬‬

‫تعريف نوع المستند >‪<!DOCTYPE‬‬

‫تنص معايير ‪ XHTML‬عمى أف كؿ صفحات الويب يجب أف تحوي في أوؿ سطر منيا عمى‬
‫سطر التعريؼ >‪ <!DOCTYPE‬و الذي يعني تعريؼ نوع المستند ‪Document Type‬‬
‫‪ Definition‬أو ‪ DTD‬اختصا اًر‪ ,‬و ذلؾ أف مستعرضات الويب تستخدـ ىذا السطر كمرجعيَّة‬
‫قواعديَّة لصيغة الكتابة و ألنواع الوسوـ في الصفحة‪ ,‬إضافة إلى استخداميا الواصفة ‪xmlns‬‬
‫الخاصة بوسـ البداية >‪ <html‬و التي تصؼ فضاء أسماء ‪ Name Space‬الصفحة‪.‬‬

‫تعرض الشيفرة التالية عنصر تعريؼ نوع المستند الذي تصادفو في أغمب صفحات ‪ XHTML‬و‬
‫الذي يجب أف تكتبو كأوؿ سطر مف صفحتؾ إضافةً لمواصفة ‪ ,xmlns‬و بيذا يصبح الشكؿ العاـ‬
‫لمستند ‪ XHTML‬كمايمي‪:‬‬

‫٘‬
‫َّ‬
‫إف أغمب ما سيتـ ذكره مف القواعد كاف قد مر معنا في الصفحات السابقة عمى شكؿ ممحوظات‪.‬‬

‫‪ٜٚ‬‬
‫"‪<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN‬‬
‫>"‪"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd‬‬

‫>"‪<html xmlns="http://www.w3.org/1999/xhtml‬‬

‫>‪ِ</head‬حز‪ ٜٛ‬سأط اٌظفحخ ٕ٘ب>‪<head‬‬

‫>‪ِ</body‬حز‪ ٜٛ‬جسذ اٌظفحخ ٕ٘ب>‪<body‬‬

‫>‪</html‬‬

‫يسمى النوع ‪Transitional‬‬

‫يعتبر النوع >‪ <!DOCTYPE‬المعروض أعاله أحد أنواع المستند و َّ‬
‫و الفقرة التالية تناقش اّلختالؼ بينو و بيف األنواع األخرى‪.‬‬

‫ممحوظة‪ <!DOCTYPE> :‬ليس وسماً مف وسوـ المغة و َّإنما ىو سطر تعريؼ المستند‪.‬‬

‫األنواع المختمفة لممستند‬

‫في ‪ XHTML‬ىناؾ أربعة أنواع مختمفة لممستند و ىذه األنواع ىي‪:‬‬

‫ٔ‪:XHTML 1.0 Strict .‬‬

‫يحوي ىذا النوع جميع وسوـ ‪ HTML‬عدا الوسوـ >‪ <applet‬و >‪ <basefont‬و‬
‫>‪ <center‬و >‪ <dir‬و >‪ <font‬و >‪ <iframe‬و >‪ <isindex‬و >‪ <menu‬و‬
‫>‪ <noframes‬و >‪ <s‬و >‪ <strike‬و >‪ ,<u‬و ّل يسمح ىذا النوع باستخداـ إطارات‬
‫>‪ ,<frameset‬و سطر تعريؼ المستند مف ىذا النوع ىو‪:‬‬

‫"‪<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN‬‬

‫>"‪"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd‬‬

‫ٕ‪:XHTML 1.0 Tansitional .‬‬

‫يحوي ىذا النوع جميع وسوـ ‪ HTML‬و َّ‬

‫لكنو ّل يسمح كسابقو باستخداـ إطارات‬
‫>‪ ,<frameset‬و سطر تعريؼ المستند مف ىذا النوع ىو‪:‬‬

‫ٓ‪ٛ‬‬
‫‪<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0‬‬
‫‪Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-‬‬
‫>"‪transitional.dtd‬‬

‫ٖ‪:XHTML 1.0 Frameset .‬‬

‫يحوي جميع وسوـ ‪ HTML‬و يسمح باستخداـ اإلطارات‪ ,‬و سطر تعريؼ المستند مف ىذا‬
‫النوع ىو‪:‬‬

‫"‪<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN‬‬

‫>"‪"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd‬‬

‫ٗ‪:XHTML 1.1 .‬‬

‫لكنو يتيح لؾ إضافات وحدات برمجيَّة خاصة (وحدات ‪ Ruby‬مثالً)‬

‫يماثؿ النوع ‪ Strict‬و ّ‬
‫عمى عكس المذكور‪ ,‬و سطر تعريؼ المستند مف ىذا النوع ىو‪:‬‬

‫"‪<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN‬‬

‫>"‪"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd‬‬

‫التحقق من صحة صفحات ‪XHTML‬‬

‫مطور الويب (و غيره) أف يتحقؽ مف مطابقة‬

‫ننيي الحديث عف ‪ XHTML‬بالتذكير أنو بإمكاف ِّ‬
‫صفحة ويب ما لمعايير ‪ XHTML‬عبر الرابط‪:‬‬

‫‪http://www.w3schools.com/xhtml/default.asp‬‬

‫ممحوظة‪ :‬يعكس وضع رابط التحقؽ مف مطابقة الصفحة لمعايير ‪ XHTML‬في صفحتؾ نوع ًا مف الثقة بقدراتؾ‬
‫البرمجية باعتقادي‪.‬‬

‫ٔ‪ٛ‬‬
 ‫‪HTML5‬‬

‫ظيرت لغة ‪ HTML‬التي شرحناىا في الصفحات السابقة (المعروفة في األوساط التقنية باإلصدار‬
‫‪ )HTML 4.01‬في عاـ ‪ٜٜٜٔ‬ـ‪ ,‬و في الحقيقة فإف تطورات كثيرة حصمت عمى مفيوـ الويب منذ‬
‫ذلؾ الحيف إلى يومنا ىذا‪ ,‬و أصبحنا نسمع بما يعرؼ بالػ ‪ ,Web 2.0‬كما أصبح مف النادر أف‬
‫نجد موقع ويب (أعني المواقع الجيدة) ّل يقدـ خدمات مثؿ تشغيؿ الفيديو و الصوت و غير ذلؾ‪,‬‬
‫و ىذا ما استوجب تطوير إصدار جديد مف لغة ‪ HTML‬بإضافة مجموعة جديدة مف الوسوـ و‬
‫الواصفات إلى المغة القديمة ليظير اإلصدار الجديد باّلسـ ‪.HTML 5‬‬

‫و مف الميزات الجديدة التي جاءت بمجيء ‪ HTML 5‬ظيور وسوـ خاصة لعرض الفيديو و‬
‫الصوت و وسوـ خاصة لكتابة المقاّلت أو األخبار و وسوـ خاصة لمرسـ إضافةً إلى إضافة‬
‫مجموعة جديدة مف عناصر اإلدخاؿ الخاصة بالنماذج و غير ذلؾ مما سيعرض في الفقرات‬
‫القادمة‪.‬‬

‫مستعرضات الويب الداعمة لـ ‪HTML 5‬‬

‫ألف ‪ HTML 5‬ظيرت منذ فترة قصيرة نسبياً (بدأ العمؿ عمى وضع معاييرىا عاـ ‪ )ٕٓٓٙ‬فإف‬
‫معظـ مستعرضات الويب القديمة ّل تدعميا لألسؼ‪ ,‬و لكف المستعرضات الجديدة ستدعميا بكؿ‬
‫تأكيد‪ ,‬فػ ‪- HTML 5‬برأيي‪ -‬ستكوف لغة بناء صفحات الويب المعيارية في المستقبؿ القريب و‬
‫ليذا فقد بدأت بعض المستعرضات بدعيما فعالً مثؿ اإلصدارات األخيرة مف مستعرضات‪:‬‬
‫‪ٙ‬‬
‫‪ Google Chrome‬و ‪ Firefox‬و ‪ Opera‬و ‪ Internet Explorer‬و ‪.Safari‬‬

‫المغة الرسمية لتطوير الصفحات فيناؾ عشرات مستعرضات الويب األخرى‬ ‫كاؼ لجعؿ ‪HTML 5‬‬
‫‪ّ ٙ‬ل تعتقد أف دعـ ىذه المستعرضات ٍ‬
‫و التي تستخدميا نسبة مرتفعة مف مستخدمي اّلنترنت اإلجمالييف‪.‬‬

‫ٕ‪ٛ‬‬
 ‫عنصر الفيديو ‪Video‬‬

‫تقدـ ‪ HTML 5‬آلية بسيطة لعرض ممفات الفيديو ضمف صفحة الويب باستخداـ العنصر الجديد‬
‫>‪ ,<video‬و يتـ ذلؾ بإسناد القيـ المناسبة إلى واصفتي اّلرتفاع ‪ height‬و العرض ‪width‬‬
‫ثـ تمرير مسار ممؼ الفيديو عبر العنصر اّلبف >‪ <source‬كقيمة لواصفتو‬
‫الخاصة بو و مف َّ‬
‫‪ src‬و تمرير نوع ممؼ الفيديو عبر الواصفة ‪ ,type‬لنشاىد الشيفرة التالية عمى سبيؿ المثاؿ‪:‬‬

‫>‪<html‬‬

‫>‪<head‬‬

‫>‪<title‬‬

‫ِثبي ػٍ‪ ٝ‬ػٕظش ػشع اٌف‪١‬ذ‪ٛ٠‬‬

‫>‪</title‬‬

‫>‪</head‬‬

‫>‪<body‬‬

‫>"‪<video width="320" height="240" controls="controls‬‬

‫>‪<source src="movie.mp4" type="video/mp4" /‬‬

‫نألصف‪ ,‬انمضرعرض انحاني ال يذعم عىصر عرض انفيذيى!‬

‫>‪</video‬‬

‫>‪</body‬‬

‫>‪</html‬‬

‫يظير المحتوى النصي (الموجود بيف وسمي البداية و النياية لمعنصر >‪ )<video‬في‬
‫أما في المستعرضات الداعمة ليا فستبدو صفحتنا كمايمي‪:‬‬
‫المستعرضات التي ّل تدعـ ‪َّ ,HTML 5‬‬

‫ٖ‪ٛ‬‬
 ‫الشكل ‪ :31‬عنصر عرض الفيديو الجديد كما يبدو في مستعرض جوجل كروم‬

‫ممحوظة‪ :‬إلى ىذه المحظة فإف العنصر >‪ <video‬يدعـ تشغيؿ ثالثة أنواع مف صيغ الفيديو و ىي الصيغ‬
‫‪ MPEG4‬و ‪ Ogg‬و ‪.WebM‬‬

‫يعرض الجدوؿ التالي واصفات العنصر >‪:<video‬‬

‫الشرح‬ ‫القيم الممكنة‬ ‫الواصفة‬

‫كتـ الصوت‬ ‫‪muted‬‬ ‫‪audio‬‬
‫التشغيؿ التمقائي لممؼ الفيديو‬ ‫‪autoplay‬‬ ‫‪autoplay‬‬
‫عرض شريط األدوات في مشغؿ الفيديو‬ ‫‪controls‬‬ ‫‪controls‬‬
‫ارتفاع مشغؿ الفيديو‬ ‫قيمة بالبكسؿ‬ ‫‪height‬‬
‫إعادة تشغيؿ الفيديو بشكؿ تمقائي عند انتيائو‬ ‫‪loop‬‬ ‫‪loop‬‬
‫رابط تشعبي لصورة تعبر عف مقطع الفيديو و تظير قبؿ‬ ‫رابط تشعبي‬ ‫‪poster‬‬
‫أف يقوـ المستخدـ بتشغيمو‬
‫رابط ممؼ الفيديو‬ ‫رابط تشعبي‬ ‫‪src‬‬
‫عرض مشغؿ الفيديو‬ ‫قيمة بالبكسؿ‬ ‫‪width‬‬
‫الجدول ‪ : 5‬واصفات العنصر >‪<video‬‬

‫ٗ‪ٛ‬‬
 ‫عنصر الصوت ‪Audio‬‬

‫تتيح ‪ HTML 5‬عرض ممفات الصوت ضمف صفحة الويب ببساطة شديدة مف خالؿ العنصر‬
‫>‪ <audio‬و الذي يستخدـ بطريقة مشابية لعنصر عرض الفيديو كمايمي‪:‬‬

‫>‪<html‬‬

‫>‪<head‬‬

‫>‪ِ</title‬ثبي ػٍ‪ ٝ‬ػٕظش ػشع اٌظ‪ٛ‬د>‪<title‬‬

‫>‪</head‬‬

‫>‪<body‬‬

‫>"‪<audio controls="controls‬‬

‫>‪<source src="song.mp3" type="audio/mp3" /‬‬

‫نألصف‪ ,‬انمضرعرض انحاني ال يذعم عىصر عرض انصىخ!‬

‫>‪</audio‬‬

‫>‪</body‬‬

‫>‪</html‬‬

‫يبدو ىذا المثاؿ في المستعرضات التي تدعـ ىذا العنصر كمايمي‪:‬‬

‫الشكل ‪ : 32‬عنصر عرض الصوت الجديد كما يبدو في مستعرض جوجل كروم‬

‫٘‪ٛ‬‬
‫أما في المستعرضات التي ّل تدعـ ىذا العنصر فسيظير النص المذكور بيف وسمي البداية و‬
‫َّ‬
‫النياية لمعنصر >‪ <audio‬و الذي يحوي رسالة اّلعتذار‪.‬‬

‫ممحوظة‪ :‬إلى ىذه المحظة فإف العنصر >‪ <audio‬يدعـ تشغيؿ ثالث صيغ لممفات الصوت ىي ‪ MP3‬و ‪ Ogg‬و‬
‫‪.Wav‬‬

‫يعرض الجدوؿ التالي واصفات العنصر >‪:<audio‬‬

‫الشرح‬ ‫القيم الممكنة‬ ‫الواصفة‬

‫التشغيؿ التمقائي لممؼ الصوت‬ ‫‪autoplay‬‬ ‫‪autoplay‬‬
‫عرض شريط األدوات في مشغؿ الصوت‬ ‫‪controls‬‬ ‫‪controls‬‬
‫إعادة تشغيؿ ممؼ الصوت بشكؿ تمقائي عند انتيائو‬ ‫‪loop‬‬ ‫‪loop‬‬
‫تحميؿ الممؼ الصوت عند تحميؿ الصفحة بغض النظر‬ ‫‪preload‬‬ ‫‪preload‬‬
‫عف خاصية التشغيؿ التقائي و عف نقر المستخدـ لزر‬
‫التشغيؿ‬
‫رابط ممؼ الصوت‬ ‫رابط تشعبي‬ ‫‪src‬‬
‫الجدول ‪ : 6‬واصفات العنصر >‪<video‬‬

‫عناصر النماذج ‪Forms‬‬

‫تقدـ ‪ HTML 5‬مجموعة جديدة مف عناصر اإلدخاؿ الخاصة بالنماذج ‪ Forms‬باإلضافة إلى‬
‫مجموعة جديدة مف أنواع عنصر اإلدخاؿ التقميدي >‪ ,<input‬و سنبدأ حديثنا بالحديث عف األنواع‬
‫الجديدة لمعنصر >‪ <input‬و التي يعرضيا الجدوؿ التالي‪:‬‬

‫الشرح‬ ‫قيمة الواصفة ‪type‬‬

‫عنصر خاص إلدخاؿ البريد اإللكتروني‬ ‫‪email‬‬
‫عنصر خاص إلدخاؿ الروابط التشعبية‬ ‫‪url‬‬
‫عنصر خاص إلدخاؿ األرقاـ‬ ‫‪number‬‬

‫‪ٛٙ‬‬
‫عنصر خاص إلدخاؿ قيمة محصورة بمجاؿ معيَّف سمفاً‪ ,‬و يظير ىذا‬ ‫‪range‬‬
‫العنصر عمى شكؿ شريط تمرير‬
‫عنصر إلدخاؿ التاريخ (يوـ‪/‬شير‪/‬سنة)‬ ‫‪date‬‬
‫عنصر إلدخاؿ التاريخ (شير‪/‬سنة)‬ ‫‪month‬‬
‫عنصر إلدخاؿ التاريخ و يستخدـ لتحديد أسبوع مف السنة‬ ‫‪week‬‬
‫عنصر إلدخاؿ الوقت (ساعة‪/‬دقيقة)‬ ‫‪time‬‬
‫عنصر إلدخاؿ التاريخ و الوقت (الساعة‪/‬اليوـ‪/‬الشير‪/‬السنة)‪ ,‬بالتوقيت‬ ‫‪datetime‬‬
‫العالمي‬
‫عنصر إلدخاؿ التاريخ و الوقت‪ ,‬بالتوقيت المحمي‬ ‫‪datetime-local‬‬
‫عنصر لعرض مربع البحث و ىو شبيو بالنوع ‪text‬‬ ‫‪search‬‬
‫عنصر إلدخاؿ القيـ المونيَّة‬ ‫‪color‬‬
‫الجدول ‪ : 7‬أنواع عناصر اإلدخال الجديدة في ‪HTML 5‬‬

‫لنشاىد المثاؿ التالي‪:‬‬

‫>‪<!DOCTYPE HTML‬‬

‫>‪<html‬‬

‫>‪<body‬‬

‫>"‪<form action="" method="get‬‬

‫‪Name:‬‬

‫>‪<input type="text" name="stdnt_name" /><br /‬‬

‫‪E-Mail:‬‬

‫>‪<input type="email" name="stdnt_email" /><br /‬‬

‫‪Website:‬‬

‫>‪<input type="url" name="stdnt_url" /><br /‬‬

‫‪Points:‬‬

‫‪ٛٚ‬‬
 ‫"‪<input type="range" name="points" min="1‬‬
‫>‪max="10" /><br /‬‬

‫‪Date:‬‬

‫>‪<input type="date" name="user_date" /><br /‬‬

‫>‪<input type="submit" /‬‬

‫>‪</form‬‬

‫>‪</body‬‬

‫>‪</html‬‬

‫يبدو المثاؿ السابؽ كمايمي في مستعرض الويب‪:‬‬

‫الشكل ‪ :33‬عناصر اإلدخال الجديدة كما تبدو في مستعرض كروم‬

‫باإلضافة لما سبؽ ذكره تقدـ ‪ HTML5‬مجموعة مف وسوـ النماذج الجديدة و منيا الوسـ‬
‫>‪ <datalist‬و الذي يستخدـ إلنشاء القوائـ المنسدلة كخيارات إدخاؿ افتراضيَّة ألحد عناصر‬
‫اإلدخاؿ الموجودة و ُينشأ محتوى القائمة بالتعاوف مع وسـ >‪ <option‬و بطريقة مشابية لمعنصر‬
‫القديـ >‪ ,<select‬كما يتـ تمرير اسـ قائمة الخيارات اّلفتراضية (عنصر >‪ )<datalist‬لعنصر‬
‫اإلدخاؿ عبر الواصفة الجديدة ‪ ,list‬لنشاىد المثاؿ التالي‪:‬‬

‫‪ٛٛ‬‬
<!DOCTYPE HTML>

<html>

<body>

<form action="" method="get">

name:

<input type="text" list="names_list"

name="stdnt_name" /><br />

<datalist id="names_list">

<option label="A" value="nameA" />

<option label="B" value="nameB" />

<option label="C" value="nameC" />

</datalist>

</form>

</body>

</html>

‫ حيث‬,<output> ‫< و‬keygen> ‫ أيضاً العنصراف‬HTML5 ‫مف العناصر الجديدة التي قدمتيا‬
‫< في عمميات تسجيؿ الدخوؿ و التحقؽ مف المستخدميف‬keygen> ‫يستخدـ العنصر‬
‫مفتاح خصوصي) يرسؿ مع‬/‫ و ذلؾ عبر توليد زوج مفاتيح (مفتاح عمومي‬Authentication
:‫ و يستخدـ بالشكؿ‬,‫الطمب دوف تدخؿ المستخدـ‬

<keygen name="security" />

‫ مف أنواع مختمفة مثؿ نتائج‬Outputs ‫< فيستخدـ لعرض مخرجات‬output> ‫أما العنصر‬
:‫ كمايمي‬Java Script ‫عادة مف أحد توابع‬
َ ‫الم‬
ُ ‫الحسابات أو القيـ‬
<output id="result" onforminput="resCalc()"></output>

ٜٛ
 ‫رسم ‪Canvas‬‬
‫الم َ‬
‫عنصر َ‬
‫تقدـ ‪ HTML 5‬عنصر المرسـ >‪ <Canvas‬و الذي يتيح لؾ الرسـ ضمف صفحة الويب باستخداـ‬
‫‪ ٚ Java Script‬و بذلؾ تستغني عف أية إضافات خارجية ‪ Plugins‬كإضافات الػ ‪ Flash‬عمى‬
‫سبيؿ المثاؿ‪.‬‬

‫ّلستخداـ عنصر المرسـ يتـ إنشاؤه أوّلً بارتفاع ‪ height‬و عرض ‪ width‬محدديف كمايمي‪:‬‬

‫>‪<canvas id="myCanvas" width="200" height="100"></canvas‬‬

‫ثـ يتـ الرسـ عميو باستخداـ ‪ Java Script‬بشكؿ مشابو لمايمي‪:‬‬

‫>"‪<script type="text/javascript‬‬

‫;)"‪var c=document.getElementById("myCanvas‬‬
‫;)"‪var cxt=c.getContext("2d‬‬
‫;"‪cxt.fillStyle="#FF0000‬‬
‫;)‪cxt.fillRect(0,0,150,75‬‬

‫>‪</script‬‬

‫حيث قمنا أوّلً بتحديد عنصر المرسـ عف طريؽ الػ ‪ id‬الخاص بو و ذلؾ في السطر‪:‬‬

‫;)"‪var c=document.getElementById("myCanvas‬‬

‫ثـ قمنا بإنشاء كائف ‪ Object‬مف المرسـ و ىيأناه لمرسـ ثنائي األبعاد ‪ 2D‬في السطر التالي‪:‬‬
‫َّ‬

‫;)"‪var cxt=c.getContext("2d‬‬

‫اآلف و لمقياـ بالرسـ سيتـ استدعاء طرؽ ‪ Methods‬الكائف ‪ cxt‬الذي تـ إنشاؤه قبؿ قميؿ بالشكؿ‪:‬‬

‫;"‪cxt.fillStyle="#FF0000‬‬
‫;)‪cxt.fillRect(0,0,150,75‬‬

‫في مرجع آخر فيي خارج نطاؽ ىذا الكتاب و لكنني سأحاوؿ شرح استخداميا في األمثمة‪.‬‬ ‫‪ ٚ‬يمكنؾ قراءة المزيد عف ‪Java Script‬‬

‫ٓ‪ٜ‬‬
‫ففي السطر األوؿ تـ تحديد الموف األحمر لوناً لمشكؿ الذي سيتـ رسمو (ىذا ما تعنيو القيمة‬
‫‪ٛ‬‬
‫ثـ تـ رسـ المربع بتمرير إحداثيات ركنيو األيسر العموي و األيمف السفمي بشكؿ‬
‫‪َّ , )#FF0000‬‬
‫مشابو لما فعمناه عند تحديد مناطؽ الخريطة الصورية (انظر فقرة الخرائط الصورية)‪.‬‬

‫يبدو المثاؿ السابؽ ضمف الشيفرة الكاممة لصفحة الويب كمايمي‪:‬‬

‫>‪<!DOCTYPE HTML‬‬

‫>‪<html‬‬

‫>‪<body‬‬

‫>"‪<canvas id="myCanvas" width="200" height="100‬‬

‫ال يذعم مضرعرضك عىصر انمرصم‬

‫>‪</canvas‬‬

‫>"‪<script type="text/javascript‬‬

‫;)"‪var c=document.getElementById("myCanvas‬‬

‫;)"‪var cxt=c.getContext("2d‬‬

‫;"‪cxt.fillStyle="#FF0000‬‬

‫;)‪cxt.fillRect(0,0,150,75‬‬

‫>‪</script‬‬

‫>‪</body‬‬

‫>‪</html‬‬

‫يعرض الجدوؿ التالي بعض طرؽ ‪ Methods‬كائف المرسـ و وظيفة كؿ منيا‪:‬‬

‫سيتـ في الفصؿ الثاني عرض مفيوـ األلواف في ‪.HTML‬‬

‫‪ٛ‬‬

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

‫تخزين البيانات من طرف العميل‬

‫تتيح ‪ HTML 5‬كائنيف مختمفتيف لتخزيف البيانات مف طرؼ العميؿ ‪ Client‬و ىما‪:‬‬

‫ٔ‪ .‬الكائف ‪ :localStorage‬يستخدـ ىذا الكائف لتخزيف البيانات مف طرؼ العميؿ لفترة غير‬
‫محدودة و يستخدـ الصيغة العامة التالية لمتخزيف‪:‬‬

‫;"‪localStorage.varName="value‬‬

‫حيث أف ‪ varName‬ىو اسـ المتغير و ‪ value‬ىي قيمة ىذا المتغير و يمكف استرجاع‬
‫قيمة المتغير بالصيغة العامة التالية‪:‬‬

‫;‪localStorage.varName‬‬

‫ٕ‪ .‬الكائف ‪ :sessionStorage‬يستخدـ ىذا الكائف لتخزيف البيانات مف طرؼ العميؿ لفترة‬
‫محددة بجمسة واحدة فقط‪ ,‬و يستخدـ الصيغة العامة التالية لمتخزيف‪:‬‬

‫ٕ‪ٜ‬‬
‫;"‪sessionStorage.varName="value‬‬

‫حيث أف ‪ varName‬ىو اسـ المتغير و ‪ value‬ىي قيمة ىذا المتغير و يمكف استرجاع‬
‫قيمة المتغير بالصيغة العامة التالية‪:‬‬

‫;‪sessionStorage.varName‬‬

‫ممحوظة‪ :‬ىذاف الكائناف يستخدماف كمخازف خاصة لمبيانات أثناء كتابة شيفرات ‪.Java Script‬‬

‫دليل الوسوم الجديدة في ‪HTML 5‬‬

‫ختاماً ليذا الفصؿ نعرض فيمايمي جدوّلً بالوسوـ الجديدة في ‪:HTML 5‬‬

‫الشرح‬ ‫الوسم‬
‫مقالة‬ ‫>‪<article‬‬
‫جانب مف محتويات الموقع‬ ‫>‪<aside‬‬
‫لتشغيؿ ممفات الصوت‬ ‫>‪<audio‬‬
‫لمرسـ برمجياً‬ ‫>‪<canvas‬‬
‫>‪ <command‬زر أوامر‬
‫قائمة خيارات افتراضية لعنصر إدخاؿ‬ ‫>‪<datalist‬‬
‫تفاصيؿ عنصر ما‬ ‫>‪<details‬‬
‫تضميف عنصر تفاعمي أو ‪ plugin‬خارجي‬ ‫>‪<embed‬‬
‫>‪ <figcaption‬عنواف عنصر >‪<figure‬‬
‫مجموعة مف عناصر الوسائط‬ ‫>‪<figure‬‬
‫ذيؿ منطقة مف مناطؽ الصفحة‬ ‫>‪<footer‬‬
‫رأس منطقة مف مناطؽ الصفحة‬ ‫>‪<header‬‬
‫معمومات عف قسـ مف المستند‬ ‫>‪<hgroup‬‬
‫توليد مفاتيح التحقؽ في النموذج‬ ‫>‪<keygen‬‬
‫نص مميز‬ ‫>‪<mark‬‬

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

‫ٗ‪ٜ‬‬
 ‫الفصؿ الثاني‬

‫‪CSS 3‬‬

‫٘‪ٜ‬‬
ٜٙ
 ‫مقدمة‬

‫نتطرؽ‬ ‫َّ‬
‫تعممنا في الفصؿ الماضي كيفيَّة كتابة مستندات الويب باستخداـ لغة ‪ HTML5‬و لكننا لـ ّ‬
‫لنواحي كثيرة تتعمؽ بمظير و تنسيؽ تمؾ المستندات‪ ,‬و في الحقيقة فقد كاف ىذا األمر مقصوداً‬
‫ميمة أوراؽ األنماط اّلنسيابيَّة ‪ CSS‬التي يناقش ىذا‬
‫ألف ما يتعمؽ بالشكؿ و المظير ىو مف ّ‬
‫الفصؿ أحدث إصداراتيا و الذي يعرؼ بػ ‪ ,CSS3‬و لكننا ‪-‬في واقع األمر‪ّ -‬ل نستطيع أف‬
‫نتحدث مباشرةً عف ‪ CSS3‬لذلؾ سنتحدث قبؿ ذلؾ عف ‪ CSS‬التقميدية‪.‬‬
‫ّ‬

‫ما هي ‪ CSS‬؟‬

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

‫مشكمة مطوري الويب قبل ‪CSS‬‬

‫عندما تـ تصميـ لغة ‪ HTML‬كاف التركيز األكبر عمى تصميـ لغة تصؼ عناصر صفحات الويب‬
‫فقط‪ ,‬و لـ يكف ىناؾ أي توجو لدى مصممي ‪ HTML‬أف تيتـ لغتيـ بمظير و شكؿ المحتوى‬
‫َّ‬
‫المقدـ‪ ,‬و تُِرَك ْ‬
‫ت ىذه الميمة لمصممي مستعرضات الويب‪ ,‬حيث كاف ‪-‬و ما يزاؿ‪ -‬كؿ مستعرض‬
‫مف مستعرضات الويب يعرض كؿ عنصر مف عناصر صفحة الويب بمظير افتراضي خاص بو‬
‫حسبما رأى مصممو المستعرض و بغض النظر عف رغبة مصمـ الصفحة‪.‬‬

‫‪ٜ‬‬
‫ىذه الترجمة ىي الغالبة عمى المراجع العربية‪.‬‬

‫‪ٜٚ‬‬
‫تـ التنبو ليذه النقطة ّلحقاً فأضيفت وسوـ جديدة تيتـ بالتنسيؽ و مف أمثمتيا الوسـ >‪ <font‬الذي‬
‫يستخدـ لعرض نص بنوع خط (بنط)ٓٔ ‪ Font‬و حجـ و لوف محدد ضمف الصفحة‪ ,‬و كاف ىذا‬
‫شيئاً جميالً في أوؿ األمر لكنو سرعاف ما تحوؿ لكارثة بالنسبة لمطوري الويب‪ ,‬فقد كاف ىناؾ‬
‫بعض المواقع التي يصؿ عدد صفحاتيا إلى مئات أو آّلؼ الصفحات أحياناً‪ ,‬مما يعني أف عممية‬
‫تنسيؽ ىذه الصفحات تحتاج لوقت و جيد كبيريف‪ ,‬ناىيؾ عف الحاجة إلى التركيز الشديد في ضبط‬
‫خصائص الوسوـ المذكورة سابقاً لمحصوؿ عمى صفحات بألواف و أحجاـ و أنواع خطوط موحدة و‬
‫متجانسة‪ ,‬لكف و مف حسف الحظ فقد تالشت ىذه المشكمة مع ظيور ‪.CSS‬‬

‫حدى‪ ,‬و ىذا‬

‫مبدأياً يمكننا القوؿ أف ‪ CSS‬تصؼ مظير و شكؿ كؿ وسـ مف وسوـ ‪ HTML‬عمى ً‬
‫ّ‬
‫ما يعني بالنسبة لمطور الويب أنو سيقوـ بكتابة وصؼ لشكؿ و مظير الوسـ في مكاف واحد و لمرة‬
‫سيطَبَّؽ ىذا التنسيؽ عمى جميع مستندات الويب المرتبطة بذات الػ ‪.CSS‬‬
‫ثـ ُ‬
‫واحدة فقط‪َّ ,‬‬

‫البدء في استخدام ‪CSS‬‬

‫ىناؾ ثالث طرؽ ّلستخداـ أوراؽ األنماط اّلنسيابية ‪ CSS‬في صفحتؾ‪:‬‬

‫ٔ‪ CSS .‬السطريَّة ‪:Inline CSS‬‬

‫حدى‪ ,‬انظر المثاؿ‬

‫يتـ إسناد شيفرة ‪ CSS‬إلى الواصفة ‪ style‬الخاصة بكؿ عنصر عمى ً‬
‫التالي‪:‬‬

‫>‪ِ</p‬حز‪ ٜٛ‬اٌفمشح>";‪<p style="color:red‬‬

‫و ىذه الطريقة غير مفضمة ‪-‬بالنسبة لي‪ -‬ألنيا تعيدنا لمشاكؿ ما قبؿ ‪.CSS‬‬

‫ٕ‪ CSS .‬الداخميَّة (الدفينة) ‪:Embeded CSS‬‬

‫إلى "بنط" لكنيا وردت ىكذا في معجـ مصطمحات المعموماتية الصادر عف الجمعية العممية السورية‬ ‫ٓٔ مع عدـ اقتناعي بترجمة ‪font‬‬
‫في كتابي ىذا‪.‬‬ ‫لممعموماتية و سأسمح لنفسي باستخداـ "خط" كترجمة لػ ‪font‬‬

‫‪ٜٛ‬‬
‫يتـ كتابة شيفرة ‪ CSS‬في منطقة الػ ‪ Head‬مف الصفحة بيف وسمي >‪ <style‬و‬
‫>‪ </style‬لتصبح الصفحة بالشكؿ‪:‬‬

‫>‪<html‬‬

‫>‪<head‬‬

‫>"‪<style type="text/css‬‬

‫هىا يرم كراتح شيفراخ ‪CSS‬‬

‫>‪</style‬‬

‫>‪</head‬‬

‫>‪<body‬‬

‫ِحز‪ ٜٛ‬اٌظفحخ ٕ٘ب‬

‫>‪</body‬‬

‫>‪</html‬‬

‫و تعتبر ىذه الطريقة جيدة لممواقع ذات العدد المحدود مف الصفحات أما بالنسبة لممواقع‬
‫المتوسطة و الكبيرة فأفضؿ استخداـ الطريقة الثالثة‪.‬‬

‫ٖ‪ CSS .‬الخارجيَّة ‪:External CSS‬‬

‫ثـ يتـ ربط ىذا‬
‫يتـ كتابة كامؿ شيفرة ‪ CSS‬في ممؼ مستقؿ يحمؿ اّلمتداد ‪ .css‬أوّلً‪َّ ,‬‬
‫الممؼ مع صفحة الويب باستخداـ الوسـ >‪ <link‬في منطقة رأس الصفحة عبر تمرير‬
‫مسار الممؼ إلى واصفتو ‪ href‬و تحديد نوع العالقة بػ ‪ stylesheet‬كمايمي‪:‬‬

‫>‪<html‬‬

‫>‪<head‬‬

‫"‪<link rel="stylesheet" type="text/css‬‬

‫>‪href="style.css" /‬‬

‫>‪</head‬‬

‫‪ٜٜ‬‬
 ‫>‪ِ</body‬حز‪ ٜٛ‬اٌظفحخ ٕ٘ب>‪<body‬‬

‫>‪</html‬‬

‫و ىذه الطريقة ىي الطريقة المثالية ّلستخداـ ‪ CSS‬برأيي‪.‬‬

‫شيفرات ‪CSS‬‬

‫تتكوف شيفرة ‪ CSS‬مف مجموعة مف القواعد ‪ ,Rules‬تصؼ كؿ قاعدة منيا مظير عنصر أو‬
‫مجموعة مف العناصر في الصفحة‪ ,‬و الشكؿ العاـ لقاعدة ‪ CSS‬ىو‪:‬‬

‫{ ‪selector‬‬

‫;‪property:value‬‬

‫;‪property:value‬‬

‫;‪property:value‬‬

‫…‬

‫}‬

‫و ىذا ما يقوـ بتطبيؽ جميع خصائص المظير المذكورة بيف القوسيف { و } عمى كافة عناصر‬
‫الم َح ِّدد ‪.selector‬‬
‫الصفحة التي تطابؽ ُ‬

‫ممحوظة‪ :‬كما يبدو مف اسميا فالمحددات تستخدـ لتحديد عنصر أو مجموعة عناصر مف صفحة الويب بغية تطبيؽ‬
‫الم َح ِّدد في أبسط حاّلتو اسماً ألحد وسوـ‬ ‫الم َح ِّددات كثيرة و ِّ‬
‫متنوعة في ‪ CSS‬فقد يكوف ُ‬ ‫قواعد ‪ CSS‬عمييا‪ ,‬و ُ‬
‫الم َح ِّدد ‪ id‬لعنصر ما مثؿ ‪ #link1‬أو ‪ #header1‬أو ‪#searchForm‬‬‫‪ HTML‬مثؿ ‪ h1‬أو ‪ a‬أو ‪ ,p‬و قد يكوف ُ‬
‫الم ِّ‬
‫حددات بشكؿ ضمني في الفقرات التالية كما سيتـ عرض‬ ‫و قد يكوف غير ذلؾ‪ ,‬و بالطبع سيتـ شرح مجموعة مف ُ‬
‫جدوؿ بكافة المحددات مع معانييا في نياية الفصؿ‪.‬‬

‫يتـ ذكر كؿ خاصية مف خصائص ‪ CSS‬بشكؿ زوج اسـ‪/‬قيمة بالشكؿ‪:‬‬

‫;‪property:value‬‬

‫ٓٓٔ‬
‫حيث أف ‪ property‬ىي اسـ خاصية المظير و ‪ value‬ىي قيمة الخاصية‪ ,‬و ينتيي تعريؼ‬
‫الخاصية بالفاصمة المنقوطة‪ ,‬و سنبدأ باستعراض كافة الخصائص اعتبا اًر مف الفقرة التالية‪.‬‬

‫ِ‬
‫تذكرة‪ :‬كػ ‪ HTML‬فإف ‪ّ CSS‬ل تعطي أي قيمة لمحارؼ الفراغات و إنما يتـ استخداميا لغرض تسييؿ قراءة‬
‫الشيفرة فقط‪.‬‬

‫خصائص مظهر النصوص‬

‫توفر ‪ CSS‬مجموعة مف الخصائص لتنسيؽ مظير النصوص و ىي‪:‬‬

‫‪ ‬خاصية المحاذاة ‪ text-align‬و التي تستخدـ كمايمي‪:‬‬

‫};‪h1 {text-align:center‬‬

‫حيث أف المحدد ‪ h1‬يعني جميع عناصر >‪ <h1‬في المستند‪ ,‬و يمكف إسناد القيمة ‪right‬‬
‫إلى الخاصية ‪ text-align‬لمحاذاة النص لميميف أو ‪ left‬لمحاذاة النص لميسار أو ‪center‬‬
‫لتوسيط النص أو ‪ justify‬لجعؿ جميع أسطر الفقرة متساوية العرض ‪.width‬‬

‫‪ ‬خاصية التزييف (التأثيث)ٔٔ ‪ text-decoration‬و التي تستخدـ كمايمي‪:‬‬

‫};‪p a {text-decoration:overline‬‬

‫حيث أف المحدد ‪ p a‬يعني جميع عناصر الروابط >‪ <a‬الموجودة ضمف أي مف عناصر‬
‫الفقرات >‪ <p‬في المستند‪ ,‬و القيمة ‪ overline‬تعني عرض خط أعمى النصوص‪ ,‬و يمكف‬
‫إسناد القيـ التالية‪ none :‬إللغاء التزييف أو ‪ underline‬لعرض خط أسفؿ النص أو‬
‫‪ line-through‬لشطب النص‪.‬‬

‫‪ ‬خاصية اتجاه القراءة ‪ direction‬و التي تستخدـ كمايمي‪:‬‬

‫عمى أنيا "أثاث" و ليذا أوردت التأثيث بيف قوسيف‪ ,‬عمماً أنني أرى أف التزييف ىي الترجمة األنسب‪.‬‬ ‫ٔٔ ىـ يعربوف ‪Decor‬‬

‫ٔٓٔ‬
‫};‪p {direction:rtl‬‬

‫لجعؿ اتجاه القراءة مف اليميف إلى اليسار و ىذا ما تعنيو القيمة ‪( rtl‬اختصا اًر لػ ‪right to‬‬
‫‪ ,)left‬و يمكف جعؿ اتجاه القراءة مف اليسار لميميف بإسناد القيمة ‪ ltr‬إلى الواصفة‬
‫‪.direction‬‬

‫‪ ‬خاصية تحويؿ حالة األحرؼ ‪ text-transformation‬و التي تستخدـ كمايمي‪:‬‬

‫};‪p {text-transformation:uppercase‬‬

‫لجعؿ جميع أحرؼ عناصر >‪ <p‬بحالة الحرؼ الكبيرٕٔ‪ ,‬و يمكف أف تأخذ ىذه الخاصية‬
‫القيـ ‪ uppercase‬لمحروؼ الكبيرة أو ‪ lowercase‬لمحروؼ الصغيرة أو ‪capitalize‬‬
‫لجعؿ الحرؼ األوؿ فقط مف كؿ كممة حرفاً كبي اًر‪.‬‬

‫‪ ‬خاصية إزاحة البداية ‪ text-indent‬و التي تستخدـ كمايمي‪:‬‬

‫};‪p {text-indent:20px‬‬

‫إلزاحة أوؿ كممة مف المقطع بمقدار ٕٓ بكسؿ‪ ,‬و اإلزاحة غالباً ما تستخدـ مع بداية فقرات‬
‫المغة اإلنجميزيَّة‪.‬‬

‫‪ ‬خاصية الموف ‪ color‬و التي تستخدـ كمايمي‪:‬‬

‫};‪p {color:red‬‬

‫حيث أف المحدد ‪ p‬يعني جميع العناصر >‪ <p‬الموجودة في الصفحة‪ ,‬و يتـ إسناد الموف‬
‫لمخاصية ‪ color‬إما بإسناد اسـ الموف بالمغة اإلنجميزية مثؿ ‪ red‬أو ‪ green‬أو ‪white‬‬
‫‪..‬إلخ‪ ,‬أو بإسناد قيمة الموف بالنظاـ الست عشري ‪ Hexadecimal‬مثؿ ‪ #FF0000‬أو‬

‫في‬ ‫ٕٔ ىناؾ لغات تعطي أكثر مف رسـ لنفس الحرؼ فمثالً الحرؼ األوؿ في اإلنجميزية يرسـ ‪ A‬إذا كاف في حالة الحرؼ الكبير و ‪a‬‬
‫حالة الحرؼ الصغير‪.‬‬

‫ٕٓٔ‬
‫‪ #00FC00‬أو ‪.. #FFFFFF‬إلخ‪ ,‬أو بإسناد قيمة الموف عبر التابع ‪ rgb‬بالشكؿ‬
‫)‪ rgb(255,0,0‬أو )‪ rgb(0,255,0‬أو )‪.. rgb(255,255,255‬إلخ‪.‬‬

‫توضيح‪ :‬يتشكؿ كؿ لوف مف مزج ثالثة ألواف ىي األحمر و األخضر و األزرؽ‪ ,‬و تختمؼ األلواف عف‬
‫بعضيا باختالؼ نسبة كؿ مف األحمر‪/‬األخضر‪/‬األزرؽ فييا‪ ,‬و في حالة تمثيؿ الموف بالنظاـ الست‬
‫عشري يتـ اعتبار أوؿ خانتيف تمثالف درجة الموف األحمر‪ ,‬و يتـ اعتبار ثاني خانتيف تمثالف درجة الموف‬
‫األخضر‪ ,‬و يتـ اعتبار ثالث خانتيف تمثالف درجة الموف األزرؽ‪ ,‬و بالطبع تتدرج قيـ كؿ خانة بيف ‪00‬‬
‫كأدنى قيمة و ‪ FF‬كأعمى قيمة‪ ,‬فعمى سبيؿ المثاؿ لمحصوؿ عمى الموف البنفسجي يجب مزج المونيف‬
‫األزرؽ و األحمر دوف أي نسبة مف الموف األخضر و بيذا تصبح قيمة الموف البنفسجي ‪ #FF00FF‬و‬
‫يمكف التحكـ بتدرج الموف عبر تخفيؼ درجة األحمر و األزرؽ لتصبحا عمى سبيؿ المثاؿ ‪ #8B008B‬و‬
‫ىكذا‪ ,‬أما في حالة تمثيؿ الموف عبر التابع ‪ rgb‬فتمثؿ الخانة األولى الموف األحمر‪ ,‬و تمثؿ الثانية الموف‬
‫األخضر‪ ,‬و تمثؿ الثالثة الموف األزرؽ لكف قيمة كؿ خانة تتدرج بيف ‪ 0‬كحد أدنى و ‪ 255‬كحد أقصى‪.‬‬

‫لنشاىد المثاؿ التالي و الذي يعرض استخداـ خصائص مظير النصوص‪:‬‬

‫>‪<html‬‬

‫>‪<head‬‬

‫>‪<title‬‬

‫طفحخ اخزجبس ٌخظبئض ِظ‪ٙ‬ش إٌظ‪ٛ‬ص‬

‫>‪</title‬‬

‫>"‪<style type="text/css‬‬

‫{ ‪p‬‬

‫;‪text-align:justify‬‬

‫;‪color:#ff0000‬‬

‫;‪text-decoration:underline‬‬

‫;‪direction:rtl‬‬

‫}‬

‫ٖٓٔ‬
 ‫>‪</style‬‬

‫>‪</head‬‬

‫>‪<body‬‬

‫>‪<p‬‬

‫إْ ٘زٖ اٌظفحخ ػجبسح ػٓ طفحخ اخزجبس ٌخظبئض ِظ‪ٙ‬شإٌض ف‪ٟ‬‬

‫أ‪ٚ‬ساق األّٔبؽ االٔس‪١‬بث‪١‬خ ‪ ٚ‬لذ رؼّذٔب إؿبٌخ إٌض اٌّ‪ٛ‬ج‪ٛ‬د‬
‫ث‪ٚ ٓ١‬سّ‪ ٟ‬ثذا‪٠‬خ ‪ٙٔ ٚ‬ب‪٠‬خ ٘زٖ اٌفمشح ٌ‪١‬ظ‪ٙ‬ش ػًّ خبط‪١‬خ‬
‫اٌّحبراح ف‪ٌ ٟ‬مـخ اٌشبشخ اٌز‪ ٟ‬س‪ٛ‬ف ٔؼشػ‪ٙ‬ب ٌ‪ٙ‬زٖ اٌظفحخ‪.‬‬

‫>‪</p‬‬

‫>‪</body‬‬

‫>‪</html‬‬

‫و الذي يبدو في مستعرض الويب كمايمي‪:‬‬

‫الشكل ‪ : 34‬استخدام خصائص مظهر النصوص‬

‫ٗٓٔ‬
 ‫خصائص الخطوط ‪Fonts‬‬

‫توفر ‪ CSS‬مجموعة مف الخصائص لمتحكـ بالخطوط ‪ ,Fonts‬و يتـ التعامؿ مع الخطوط في‬
‫‪ CSS‬عمى شكؿ مجموعات تدعى كؿ منيا بػ"عائمة خطوط" ‪ ,font-family‬حيث يتـ إسناد خط‬
‫يتيـٖٔ أو أسماء أكثر مف خط مفصولة بفواصؿ ‪ comma‬إلى الخاصية ‪ font-family‬و يكوف‬
‫الخط األوؿ ىو الخط اّلفتراضي‪ ,‬و في الحالة التي يتعذر عمى المستعرض فييا العثور عمى الخط‬
‫اّلفتراضي فإنو يجعؿ الخط التالي ىو اّلفتراضي و ىكذا‪.‬‬

‫توفر ‪ CSS‬ثالثة عوائؿ افتراضية مف الخطوط ىي العائمة ‪ Serif‬و العائمة ‪ Sans-serif‬و‬

‫العائمة ‪ Monospace‬و ينصح باستعماؿ العائمة الثانية لمغة اإلنجميزية و العائمة الثالثة عند عرض‬
‫الشيفرات الحاسوبية مثؿ شيفرات لغات البرمجة في صفحة الويب‪.‬‬

‫كما توفر ‪ CSS‬مجموعة أخرى مف الخصائص لمتحكـ بالخطوط ىي الخاصية ‪ font-style‬و‬

‫التي يمكف أف تسند إلييا القيـ ‪( italic‬الخط المائؿ) و ‪( normal‬الخط العادي)‪ ,‬و الخاصية‬
‫‪ font-size‬و التي تستخدـ لتحديد حجـ النص بالبكسؿ أو بالواحدة ‪( em‬كؿ ٔ ‪ٔٙ = em‬‬
‫بكسؿ)‪ ,‬لنشاىد المثاؿ التالي‪:‬‬

‫>‪<html‬‬

‫>‪<head‬‬

‫>‪<title‬‬

‫طفحخ اخزجبس ٌخظبئض اٌخـ‪ٛ‬ؽ‬

‫>‪</title‬‬

‫>"‪<style type="text/css‬‬

‫ٖٔ‬
‫اجترحت مصطمح الخط اليتيـ لمحالة التي تكوف فييا عائمة الخطوط مكونة مف خط واحد‪.‬‬

‫٘ٓٔ‬
 p {

font-family:"Tahoma","Simplified Arabic",sans-serif;

font-size:1.5em;

font-style:italic;

direction:rtl;

</style>

</head>

<body>

<p>

‫ساق‬ٚ‫ أ‬ٟ‫ؽ ف‬ٛ‫إْ ٘زٖ اٌظفحخ ػجبسح ػٓ طفحخ اخزجبس ٌخظبئض اٌخـ‬
.‫خ‬١‫بث‬١‫األّٔبؽ االٔس‬

</p>

</body>

</html>

:‫و التي تبدو كمايمي في مستعرض الويب‬

‫ استخدام خصائص الخطوط‬: 35 ‫الشكل‬

ٔٓٙ
‫ممحوظة‪ :‬لـ نضع عالمتي اقتباس حوؿ القيمة ‪ sans-serif‬ألننا نقصد عائمة الخطوط اّلفتراضية و التي تحمؿ‬
‫اسـ ‪.sans-serif‬‬

‫خصائص مظهر الروابط‬

‫في الحقيقة ّل توجد خصائص خاصة لمظير الروابط‪ ,‬و لكف توجد محددات خاصة لمروابط‬
‫تستخدـ لتنسيؽ مظير الرابط في حاّلتو المختمفة‪ ,‬و المحددات ىي‪:‬‬

‫‪ a:link ‬و الذي يستخدـ لتنسيؽ مظير ال اربط في حالتو العادية و ىو مكافئ لممحدد ‪ a‬إذا‬
‫استُ ِ‬
‫خد َـ وحده‪.‬‬
‫‪ a:visited ‬و الذي يستخدـ لتنسيؽ مظير الرابط الذي تـ النقر عميو مسبقاً‪.‬‬
‫‪ a:hove ‬و الذي يستخدـ لتنسيؽ مظير الرابط عندما مرور ِّ‬
‫مؤشر الفأرة عميو‪.‬‬
‫‪ a:active ‬و الذي يستخدـ لتنسيؽ مظير الرابط لحظة النقر عميو‪.‬‬

‫و المثاؿ التالي يعرض استخداـ ىذه المحددات الخاصة‪:‬‬

‫>‪<html‬‬

‫>‪<head‬‬

‫>‪<title‬‬

‫طفحخ اخزجبس ٌخظبئض ِظ‪ٙ‬ش اٌش‪ٚ‬اثؾ‬

‫>‪</title‬‬

‫>"‪<style type="text/css‬‬

‫};‪a:link{text-decoration:none;color:blue‬‬

‫};‪a:visited{color:green‬‬

‫};‪a:hover{text-decoration:underline‬‬

‫};‪a:active{font-size:120%‬‬

‫>‪</style‬‬

‫‪ٔٓٚ‬‬
 ‫>‪</head‬‬

‫>‪<body‬‬

‫>‪<a href="#">normal link</a> <br/‬‬

‫>‪<a href="www.google.com">visited link</a> <br/‬‬

‫>‪<a href="#">hover link</a> <br/‬‬

‫>‪<a href="#">normal link 2</a> <br/‬‬

‫>‪</body‬‬

‫>‪</html‬‬

‫يبدو المثاؿ السابؽ في صفحة الويب بعد زيارة بعض الروابط‪:‬‬

‫الشكل ‪ : 36‬هكذا تبدو صفحة اختبار مظهر الروابط لحظة النقر عمى الرابط الثالث و بعد زيارة الثاني‬

‫ممحوظة‪ :‬يجب ذكر قاعدة ‪ a:hover‬بعد ‪ a:link‬و ‪ ,a:visited‬كما يجب ذكر ‪ a:active‬بعد ‪.a:hover‬‬

‫خصائص الخمفيات ‪Backgrounds‬‬

‫توفر ‪ CSS‬مجموعة مف الخصائص لتنسيؽ خمفيات العناصر‪ ,‬نبدأ استعراضيا بالحديث عف‬
‫الخاصية ‪ background-color‬و التي تستخدـ لتحديد خمفية لونيَّة ألحد العناصر بإسناد قيمة‬
‫الموف إلييا بالشكؿ‪:‬‬

‫‪ٔٓٛ‬‬
‫;‪background-color:#CF1A11‬‬

‫و يمكف تعييف صورة كخمفية ألحد العناصر عبر إسناد مسار الصورة لمخاصية ‪background-‬‬
‫‪ image‬بالشكؿ‪:‬‬

‫;)’‪background-image:url(‘image.jpg‬‬

‫و في حاؿ كوف حجـ الصورة (الخمفيَّة) أصغر مف حجـ العنصر يتـ تحديد طريقة تكرار الصورة‬
‫عبر الخاصة ‪ background-repeat‬فيتـ إسناد القيمة ‪ repeat-x‬لتكرار الصورة بشكؿ أفقي أو‬
‫القيمة ‪ repeat-y‬لتكرار الصورة بشكؿ عمودي أو ‪ repeat‬لتكرارىا بشكؿ أفقي و عمودي معاً أو‬
‫‪ no-repeat‬لعدـ التكرار و ىذا في الحالة األولى‪ ,‬أما في الحالة الثانية فيمكف عدـ تكرار الصورة‬
‫و تحديد موضعيا عف طريؽ الخاصية ‪ background-position‬حيث يتـ إسناد واحدة أو أكثر‬
‫مف القيـ ‪ left top‬أو ‪ left center‬أو ‪ left bottom‬أو ‪ center top‬أو ‪ center center‬أو‬
‫‪ center bottom‬أو ‪ right top‬أو ‪ right center‬أو ‪ ,right bottom‬لنشاىد المثاؿ التالي و‬
‫الذي سنعرض فيو عنصريف >‪ <p‬األوؿ بخمفية لونية و اآلخر بخمفية صورية‪:‬‬

‫>‪<html‬‬

‫>‪<head‬‬

‫>‪<title‬‬

‫طفحخ اخزجبس ٌخظبئض اٌخٍف‪١‬خ‬

‫>‪</title‬‬

‫>"‪<style type="text/css‬‬

‫{ ‪.firstP‬‬

‫;‪background-color:black‬‬

‫;‪color:white‬‬

‫}‬

‫{ ‪.secondP‬‬

‫‪ٜٔٓ‬‬
 ‫;)’‪background-image:url(‘image1.jpg‬‬

‫;‪background-repeat:no-repeat‬‬

‫;‪background-position:center center‬‬

‫}‬

‫};‪p {direction:rtl‬‬

‫>‪</style‬‬

‫>‪</head‬‬

‫>‪<body‬‬

‫>"‪<p class="firstP‬‬

‫اٌؼٕظش األ‪ٚ‬ي س‪١‬جذ‪ ٚ‬ثخٍف‪١‬خ س‪ٛ‬داء ‪ٔ ٌْٛ ٚ‬ض أث‪١‬غ‬

‫>‪</p‬‬

‫>"‪<p class="secondP‬‬

‫>‪ <br/><br/‬اٌؼٕظش اٌثبٔ‪ ٟ‬س‪١‬جذ‪ ٚ‬ثخٍف‪١‬خ ط‪ٛ‬س‪٠‬خ ‪ٌٙ ٚ‬زا‬

‫>‪ <br/‬سأل‪ َٛ‬ثبٌٕض‪ٚ‬ي ثؼؼخ أسـش ثغ‪١‬خ ِٕح ٘زا اٌؼٕظش‬

‫>‪<br/‬‬

‫اٌّسبحخ اٌىبف‪١‬خ ٌؼشع اٌظ‪ٛ‬سح اٌخٍف‪١‬خ‬

‫>‪</p‬‬

‫>‪</body‬‬

‫>‪</html‬‬

‫ممحوظة‪ :‬ىناؾ طريقة خاصة لتحديد العناصر تعرؼ باسـ التحديد بالفئات ‪ classes‬حيث يتـ استبداؿ المحدد بأي‬
‫اسـ مسبوقاً بنقطة و ىذا ما يعرؼ بتعريؼ الفئة ‪ class‬في ‪ ,CSS‬بعد ذلؾ يتـ إسناد اسـ ىذه الفئة (دوف نقطة)‬
‫إلى الواصفة ‪ class‬لمعناصر التي نرغب بجعؿ مظيرىا مطابقاً لمخصائص المذكورة في قاعدة الفئة‪.‬‬

‫يبدو المثاؿ السابؽ في مستعرض الويب كمايمي‪:‬‬

‫ٓٔٔ‬
 ‫الشكل ‪ : 37‬هكذا تبدو صفحة اختبار خصائص الخمفية‬

‫خصائص مظهر القوائم‬

‫يتـ تخصيص مظير القوائـ في ‪ CSS‬عبر تخصيص نوع الرمز‪/‬الرقـ المعروض أماـ كؿ عنصر‬
‫مف عناصر القائمة‪ ,‬و يتـ ىذا مف خالؿ الخاصيتيف التاليتيف‪:‬‬

‫‪ :list-style-type ‬و التي تستخدـ لتحديد نوع الرمز‪/‬الترقيـ أماـ كؿ عنصر مف‬
‫عناصر القائمة‪ ,‬و تأخذ القيـ ‪ circle‬و ‪ square‬و ‪ disc‬و ‪ none‬في حالة‬
‫القائمة غير المرتبة‪ ,‬و القيـ ‪ upper-roman‬و ‪ lower-roman‬و ‪lower-‬‬
‫‪ alpha‬و ‪ upper-alpha‬و ‪ lower-latin‬و ‪ upper-latin‬و ‪ decimal‬و‬
‫غيرىا في حالة القائمة المرتبة‪.‬‬
‫‪ :list-style-image ‬و التي تستخدـ لوضع صورة خاصة أماـ كؿ عنصر مف‬
‫عناصر القائمة كرمز لو‪ ,‬و تستخدـ بالشكؿ‪:‬‬

‫;)'‪list-style-image:url('image.gif‬‬

‫ٔٔٔ‬
 :‫لنشاىد المثاؿ التالي‬

<html>

<head>

<title>

ُ‫ائ‬ٛ‫ش اٌم‬ٙ‫طفحخ اخزجبس ٌخظبئض ِظ‬

</title>

<style type="text/css">

ul {list-style-type:square;}

ol {list-style-image:url('dot.gif');}

</style>

</head>

<body>

<ul>

<li>item 1</li>

<li>item 2</li>

<li>item 3</li>

</ul>

<ol>

<li>item 1</li>

<li>item 2</li>

<li>item 3</li>

</ol>

</body>

</html>

ٕٔٔ
 ‫يبدو ىذا المثاؿ في مستعرض الويب كمايمي‪:‬‬

‫الشكل ‪ : 38‬هكذا تبدو صفحة اختبار خصائص مظهر القوائم في مستعرض الويب‬

‫خصائص مظهر الجداول‬

‫أظف أف الجداوؿ ىي أكثر عناصر ‪ HTML‬التي تستفيد مف ‪ CSS‬إذا عرؼ مطور الويب كيفية‬
‫ت سابقاً بالشكؿ المناسب‪ ,‬لنشاىد المثاؿ التالي أوّلً‪:‬‬
‫ضْ‬‫توظيؼ خصائص ‪ CSS‬التي ُع ِر َ‬
‫>‪<html‬‬

‫>‪<head‬‬

‫>"‪<style type="text/css‬‬

‫‪table‬‬

‫{‬

‫;‪font-family:"Trebuchet MS", sans-serif‬‬

‫;‪width:100%‬‬

‫;‪border-collapse:collapse‬‬

‫ٖٔٔ‬
 direction:rtl;

text-align:center;

td, th

font-size:1em;

border:1px solid #98bf21;

th

font-size:1.1em;

background-color:#A7C942;

color:#ffffff;

.alt td

color:#000000;

background-color:#EAF2D3;

</style>

</head>

<body>

<table>

<tr>

<th>‫<الشركة‬/th>

ٔٔٗ
 ‫>‪</th‬العنواف>‪<th‬‬

‫>‪</th‬البمد>‪<th‬‬

‫>‪</tr‬‬

‫>‪<tr‬‬

‫>‪</td‬الشركة الوىمية ٔ>‪<td‬‬

‫>‪</td‬دمشؽ>‪<td‬‬

‫>‪</td‬سوريا>‪<td‬‬

‫>‪</tr‬‬

‫>"‪<tr class="alt‬‬

‫>‪</td‬الشركة الوىمية ٕ>‪<td‬‬

‫>‪</td‬بغداد>‪<td‬‬

‫>‪</td‬العراؽ>‪<td‬‬

‫>‪</tr‬‬

‫>‪<tr‬‬

‫…‬

‫إٌ‪ ٝ‬آخش ش‪١‬فشح اٌجذ‪ٚ‬ي‬

‫…‬

‫>‪</table‬‬

‫>‪</body‬‬

‫>‪</html‬‬

‫يبدو ىذا المثاؿ في مستعرض الويب كمايمي‪:‬‬

‫٘ٔٔ‬
 ‫الشكل ‪ : 39‬توظيف ‪ CSS‬لتنسيق مظهر الجداول‬

‫و ما يجب ذكره مف خصائص ‪ CSS‬عند الحديث عف المثاؿ السابؽ ىو مايمي‪:‬‬

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

‫ممحوظة‪ :‬لتسييؿ قراءة محتويات الجدوؿ ينصح دائماً بجعؿ أسطر الجدوؿ متناوبة ألواف الخمفية و ألواف النصوص‬
‫كما فعمنا في الجدوؿ المعروض في مثالنا السابؽ‪ ,‬و ىذا ما حققناه عبر استخداـ الفئة ‪ , .alt‬يعرؼ ىذا التناوب‬
‫الموني باسـ ‪Zebra-stripping‬‬

‫‪ٔٔٙ‬‬
 ‫الموضعة ‪Positioning‬‬
‫َ‬ ‫خصائص‬

‫ِ‬
‫موضع العنصر‪ ,‬و كيؼ يتـ عرض العنصر عندما‬ ‫الموضعة في ‪ CSS‬تحديد‬ ‫تتيح خصائص‬
‫َ‬
‫يكوف محتواه كبي اًر جداً‪ ,‬كما يتيح وضع عناصر خمؼ عناصر أخرى‪ ,‬و ىناؾ عدة أنواع لتحديد‬
‫موضع العنصر في ‪ CSS‬في الحقيقة و ىي‪:‬‬

‫‪ ‬النوع الستاتيكي ‪ :Static‬يتـ وضع العنصر في مكاف ظيوره في الصفحة أي بحسب‬

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

‫لنشاىد المثاؿ التالي‪:‬‬

‫>‪<html‬‬

‫>‪<head‬‬

‫‪ٔٔٚ‬‬
 ‫>"‪<style type="text/css‬‬

‫};‪* {direction:rtl‬‬

‫‪h1‬‬

‫} ;‪{ position:absolute; left:100px; top:150px‬‬

‫>‪</style‬‬

‫>‪</head‬‬

‫>‪<body‬‬

‫>‪٘</h1‬زا اٌؼٕ‪ٛ‬اْ ثئحذاث‪١‬بد ِـٍمخ>‪<h1‬‬

‫ً >‪<p‬‬
‫ف‪ ٟ‬حبٌخ اإلحذاث‪١‬بد اٌّـٍمخ ‪٠‬زُ ػشع اٌؼٕظش ؿجمب‬
‫ٌإلحذاث‪١‬بد اٌّّشح ٌخظبئظٗ ثغغ إٌظش ػٓ ِىبْ ‪ٚ‬س‪ٚ‬سد ‪ٚ‬سّٗ ف‪ٟ‬‬
‫>‪</p‬ش‪١‬فشح اٌظفحخ‬

‫>‪</body‬‬

‫>‪</html‬‬

‫و الذي يبدو في مستعرض الويب كمايمي‪:‬‬

‫موض َعة العناصر في ‪CSS‬‬

‫َ‬ ‫الشكل ‪ : 41‬مثال عمى استخدام خصائص‬

‫ممحوظة‪ :‬المحدد الخاص * يقوـ بتحديد جميع عناصر المستند‪.‬‬

‫‪ٔٔٛ‬‬
‫يمكف وضع عناصر خمؼ عناصر أخرى عف طريؽ الخاصية ‪ z-index‬و ذلؾ بإسناد رقـ‬
‫صحيح إلييا‪ ,‬حيث يتـ إظيار العنصر ذو الػ ‪ z-index‬األعمى أماـ العناصر األخرى‪ ,‬لنشاىد‬
‫المثاؿ التالي‪:‬‬

‫>‪<html‬‬

‫>‪<head‬‬

‫>"‪<style type="text/css‬‬

‫};‪* {direction:rtl‬‬

‫‪img‬‬

‫{‬

‫;‪position:absolute‬‬

‫;‪left:100px‬‬

‫;‪top:50px‬‬

‫;‪z-index:-1‬‬

‫}‬

‫>‪</style‬‬

‫>‪</head‬‬

‫>‪<body‬‬

‫>‪</h1‬ػٕ‪ٛ‬اْ اٌفمشح>‪<h1‬‬

‫>‪<img src="image1.jpg" width="100" height="140" /‬‬

‫س‪ٛ‬ف رظ‪ٙ‬ش اٌظ‪ٛ‬سح خٍف ٘زا إٌض ألْ ل‪ّ١‬خ اٌـ>‪<p‬‬

‫‪z-index‬‬

‫اٌخبص ث‪ٙ‬ب ألً ِٓ اٌم‪ّ١‬خ اٌخبطخ ثبٌٕض ‪ ٚ‬اٌز‪ ٟ‬رسب‪ ٞٚ‬طفش‬

‫ثشىً افزشاػ‪ٟ‬‬

‫>‪</p‬‬

‫‪ٜٔٔ‬‬
 ‫>‪</body‬‬

‫>‪</html‬‬

‫و الذي يبدو في مستعرض الويب كمايمي‪:‬‬

‫الشكل ‪ : 41‬مثال عمى استخدام الخاصية ‪z-index‬‬

‫يمكف أيضاً عرض أشرطة تمرير في الحالة التي يكوف فييا محتوى العنصر أكبر بكثير مف حجمو‪,‬‬
‫و ذلؾ عف طريؽ إسناد القيمة ‪ scroll‬إلى الخاصية ‪ ,overflow‬لنشاىد المثاؿ التالي‪:‬‬

‫>‪<html‬‬

‫>‪<head‬‬

‫>"‪<style type="text/css‬‬

‫};‪* {direction:rtl‬‬

‫‪div‬‬

‫{‬

‫;‪background-color:#00FFFF‬‬

‫;‪width:250px‬‬

‫ٕٓٔ‬
 ‫;‪height:100px‬‬

‫;‪overflow:scroll‬‬

‫}‬

‫>‪</style‬‬

‫>‪</head‬‬

‫>‪<body‬‬

‫>‪<div‬‬

‫ألْ أثؼبد اٌؼٕظش اٌحبٌ‪ ٟ‬سزى‪ ْٛ‬ألً ِٓ أثؼبد إٌض >‪<p‬‬

‫اٌز‪ ٞ‬رمشأٖ ا‪ ْ٢‬س‪١‬زُ ػشع أششؿخ اٌزّش‪٠‬ش ‪ٌٙ ٚ‬زا سأحب‪ٚ‬ي إؿبٌخ‬
‫>‪</p‬إٌض أوثش ثئػبفخ ثؼغ اٌىٍّبد اإلػبف‪١‬خ إٌ‪.ٗ١‬‬

‫>‪</div‬‬

‫>‪</body‬‬

‫>‪</html‬‬

‫يبدو المثاؿ السابؽ كمايمي في مستعرض الويب‪:‬‬

‫الشكل ‪ : 42‬مثال عمى عرض أشرطة التمرير لمعناصر ذات المحتوى الكبير‬

‫ٕٔٔ‬
 ‫واحدات القياس في ‪CSS‬‬

‫يتـ تحديد أبعاد العناصر عمى سبيؿ المثاؿ مف خالؿ خاصيتي العرض ‪ width‬و اّلرتفاع ‪height‬‬
‫وذلؾ بإسناد قيـ رقمية بالبكسؿ أو بإحدى واحدات القياس التالية‪:‬‬

‫مثال‬ ‫الشرح‬ ‫الواحدة‬

‫‪150px‬‬ ‫بكسؿ‬ ‫‪px‬‬
‫‪50%‬‬ ‫بالنسبة المئوية‬ ‫‪%‬‬
‫‪1.5em‬‬ ‫كؿ ٔ ‪ em‬يساوي ‪ ٔٙ‬بكسؿ‬ ‫‪em‬‬
‫‪1in‬‬ ‫إنش‬ ‫‪in‬‬
‫‪1cm‬‬ ‫سنتي ميتر‬ ‫‪cm‬‬
‫‪100mm‬‬ ‫ميمي ميتر‬ ‫‪mm‬‬
‫‪30pt‬‬ ‫إنش)‬ ‫نقطة (النقطة =‬ ‫‪pt‬‬
‫‪15pc‬‬ ‫إنش)‬ ‫بيكا (البيكا = ٕٔ نقطة =‬ ‫‪pc‬‬
‫الجدول ‪ : 11‬واحدات القياس في ‪CSS‬‬

‫نموذج الصندوق ‪CSS Box Model‬‬

‫عند الحديث عف تصميـ صفحات الويب يجب في الحقيقة فيـ ما يعرؼ بػ"نموذج الصندوؽ" أو‬
‫‪ box model‬باإلنجميزيَّة‪ ,‬حيث يتـ تمثيؿ كؿ عنصر مف عناصر مستند ‪ HTML‬عند إنشائو في‬
‫المستعرض بأربعة مستطيالت متداخمة تشكؿ نموذج الصندوؽ و ىي مف الداخؿ إلى الخارج‪:‬‬

‫ٔ‪ -‬محتوى العنصر ‪ :content‬و يمثؿ كؿ ما ىو موجود بيف وسمي بداية و نياية العنصر‪.‬‬
‫ٕ‪ -‬اإلزاحة الداخمية ‪ :padding‬و تمثؿ المسافة الفاصمة بيف محتوى العنصر و بيف حدوده‪.‬‬
‫ٖ‪ -‬الحدود ‪ :border‬و يمثؿ اإلطار الخارجي لمعنصر‪.‬‬
‫ٗ‪ -‬اإلزاحة الخارجية ‪ :margin‬و تمثؿ المسافة الفاصمة بيف حدود العنصر و العناصر‬
‫األخرى في المستند‪.‬‬

‫ٕٕٔ‬
 ‫ِّ‬
‫يوضح الشكؿ التالي نموذج الصندوؽ‪:‬‬

‫الشكل ‪ : 43‬نموذج الصندوق ‪box model‬‬

‫لمطور الويب التحكـ الكامؿ بكؿ منطقة مف ىذه المناطؽ األربع عبر مجموعة مف‬
‫ِّ‬ ‫تتيح ‪CSS‬‬
‫الخصائص نستعرضيا في الفقرات التالية‪.‬‬

‫خصائص الحدود ‪border‬‬

‫تسمح ‪ CSS‬لمطور الويب أف يتحكـ بحدود العناصر عبر الخصائص ‪ border-width‬و‬

‫‪ border-style‬و ‪ ,border-color‬يتـ إسناد قيمة رقمية بإحدى واحدات القياس إلى الخاصة‬
‫‪ border-width‬تعبر عف مقدار سماكة الحدود‪ ,‬و يتـ إسناد قيمة نصية تعبر عف شكؿ الحدود‬
‫لمخاصية ‪ border-style‬و التي يمكف أف تأخذ إحدى القيـ ‪ dotted‬لمحدود المنقطة و ‪dashed‬‬
‫لمحدود المتقطعة و ‪ solid‬لمحدود العادية و ‪ double‬لمحدود المضاعفة و ‪ groove‬و ‪ ridge‬و‬
‫‪ inset‬و ‪ outset‬لمحدود ثالثية األبعاد‪ ,‬و يتـ إسناد قيمة لونية تعبر عف لوف الحدود‪ ,‬لنشاىد‬
‫المثاؿ التالي‪:‬‬

‫>‪<html‬‬

‫>‪<head‬‬

‫ٖٕٔ‬
 <style type="text/css">

* { direction:rtl; }

.one

{ border-style:solid; }

.two

{ border-style:dashed; }

</style>

</head>

<body>

<p class="one">‫خ‬٠‫د ػبد‬ٚ‫<حذ‬/p>

<p class="two">‫د ِزمـؼخ‬ٚ‫<حذ‬/p>

</body>

</html>

:‫و الذي يبدو في مستعرض الويب كمايمي‬

ٕٔٗ
‫ممحوظة‪ :‬يمكف تحديد شكؿ ‪ border-style‬خاص لكؿ طرؼ مف أطراؼ الحدود و ذلؾ عف طريؽ إسناد أربعة‬
‫قيـ مفصولة بفراغات لمخاصية ‪ border-style‬تمثؿ األولى شكؿ الحد العموي و الثانية شكؿ الحد األيمف و الثالثة‬
‫شكؿ الحد السفمي و الرابعة شكؿ الحد األيسر بالشكؿ‪:‬‬

‫;‪border-style: dotted dashed groove double‬‬

‫أو عف طريؽ الخصائص الفردية ‪ border-left-style‬و ‪ border-right-style‬و ‪ border-top-style‬و‬

‫‪ ,border-bottom-style‬و بالطبع فإف ىذه الممحوظة تنطبؽ عمى خاصيتي الموف ‪ border-color‬و العرض‬
‫‪.border-width‬‬

‫خصائص اإل زاحة الداخمية ‪padding‬‬

‫يتـ تحديد مقدار اإلزاحة الداخمية (المسافة بيف محتوى العنصر و حدوده) عف طريؽ الخصائص‬
‫‪ padding-left‬إلزاحة الطرؼ األيسر و ‪ padding-right‬إلزاحة الطرؼ األيمف و ‪padding-‬‬
‫‪ top‬إلزاحة الطرؼ العموي و ‪ padding-bottom‬إلزاحة الطرؼ السفمي‪ ,‬أو عف طريؽ الخاصية‬
‫سند إلى ىذه الخصائص قيـ بإحدى واحدات القياس تعبر‬
‫‪ padding‬إلزاحة جميع األطراؼ‪ ,‬و ُي َ‬
‫عف مقدار اإلزاحة الداخمية‪ ,‬لنشاىد المثاؿ التالي‪:‬‬

‫>‪<html‬‬

‫>‪<head‬‬

‫>"‪<style type="text/css‬‬

‫‪p‬‬

‫} ;‪{ direction:rtl; background-color:black; color:white‬‬

‫‪.padding‬‬

‫{‬

‫;‪padding-top:25px‬‬

‫;‪padding-bottom:25px‬‬

‫;‪padding-right:50px‬‬

‫ٕ٘ٔ‬
 ‫;‪padding-left:50px‬‬

‫}‬

‫>‪</style‬‬

‫>‪</head‬‬

‫>‪<body‬‬

‫٘زٖ ٘‪ ٟ‬اٌحبٌخ اٌـج‪١‬ؼخ ٌؼٕظش اٌفمشح د‪ ْٚ‬إصاحخ >‪<p‬‬

‫>‪</p‬داخٍ‪١‬خ‬

‫٘زٖ ٘‪ ٟ‬حبٌخ ػٕظش اٌفمشح ِغ ‪ٚ‬ج‪ٛ‬د اإلصاحخ >"‪<p class="padding‬‬

‫>‪</p‬اٌذاخٍ‪١‬خ‬

‫>‪</body‬‬

‫>‪</html‬‬

‫و الذي يبدو في مستعرض الويب كمايمي‪:‬‬

‫الشكل ‪ : 44‬مثال عمى استخدام خصائص اإل زاحة الداخمية‬

‫خصائص اإل زاحة الخارجية ‪margin‬‬

‫يتـ تحديد مقدار اإلزاحة الخارجية (المسافة بيف حدود العنصر و العناصر األخرى) عف طريؽ‬
‫الخصائص ‪ margin-left‬إلزاحة الطرؼ األيسر و ‪ margin-right‬إلزاحة الطرؼ األيمف و‬

‫‪ٕٔٙ‬‬
‫‪ margin-top‬إلزاحة الطرؼ العموي و ‪ margin-bottom‬إلزاحة الطرؼ السفمي‪ ,‬أو عف طريؽ‬
‫سند إلى ىذه الخصائص قيـ بإحدى واحدات القياس‬
‫الخاصية ‪ margin‬إلزاحة جميع األطراؼ‪ ,‬و ُي َ‬
‫تعبر عف مقدار اإلزاحة الداخمية أو القيمة الخاصة ‪ auto‬لترؾ ىذه الميمة لمستعرض الويب‪,‬‬
‫لنشاىد المثاؿ التالي‪:‬‬

‫>‪<html‬‬

‫>‪<head‬‬

‫>"‪<style type="text/css‬‬

‫‪p‬‬

‫} ;‪{ direction:rtl; background-color:black; color:white‬‬

‫‪.margin‬‬

‫{‬

‫;‪margin-top:100px‬‬

‫;‪margin-bottom:100px‬‬

‫;‪margin-right:50px‬‬

‫;‪margin-left:50px‬‬

‫}‬

‫>‪</style‬‬

‫>‪</head‬‬

‫>‪<body‬‬

‫>‪٘</p‬زٖ اٌفمشح د‪ ْٚ‬إصاحخ خبسج‪١‬خ>‪<p‬‬

‫>‪</p‬أِب ٘زٖ اٌفمشح فّغ إصاحخ خبسج‪١‬خ>"‪<p class="margin‬‬

‫>‪</body‬‬

‫>‪</html‬‬

‫و الذي يبدو في مستعرض الويب كمايمي‪:‬‬

‫‪ٕٔٚ‬‬
 ‫الشكل ‪ :45‬مثال عمى استخدام خاصية اإل زاحة الخارجة ‪margin‬‬

‫إخفاء العناصر‬

‫مف الممكف إخفاء عناصر ‪ HTML‬باستخداـ ‪ CSS‬بطريقتيف‪:‬‬

‫‪ ‬إسناد القيمة ‪ none‬إلى الخاصية ‪.display‬‬

‫‪ ‬إسناد القيمة ‪ hidden‬إلى الخاصية ‪.visibility‬‬

‫و اّلختالؼ بينيما أف الطريقة الثانية تخفي العنصر مع الحفاظ عمى الحيز الذي يشغمو فارغاً أما‬
‫الطريقة األولى تخفي العنصر مع عدـ الحفاظ عمى الحيز الذي يشغمو مما يؤثر عمى تموضع‬
‫العناصر‪.‬‬

‫أنواع عرض العناصر‬

‫يتـ عرض العناصر في ‪ HTML‬بطريقتيف‪:‬‬

‫‪ٕٔٛ‬‬
‫‪ ‬بشكؿ كتمة ‪ :block‬حيث يتـ النزوؿ سط اًر قبؿ العنصر و النزوؿ سط اًر بعد العنصر و‬
‫ىذه الحالة نراىا مع عناصر مثؿ >‪ <h1‬و >‪ <p‬و >‪...<div‬إلخ‪.‬‬
‫‪ ‬بشكؿ سطري ‪ :inline‬حيث يتـ وضع العنصر ضمف نفس السطر دوف الحاجة لمنزوؿ‬
‫سط اًر و ىذه الحالة نراىا مع عناصر مثؿ >‪ <a‬و >‪... <span‬إلخ‪.‬‬

‫تسمح ‪ CSS‬بتغيير نوع العرض لمعناصر مف ‪ block‬إلى ‪ inline‬و بالعكس عف طريؽ إسناد‬
‫إحدى القيمتيف ‪ block‬و ‪ inline‬إلى الخاصية ‪.display‬‬

‫الشفافية ‪opacity‬‬

‫تتيح ‪ CSS‬لمطور الويب التحكـ بدرجة شفافية العناصر عف طريؽ الخاصة ‪ opacity‬عبر إسناد‬
‫رقـ عشري بيف ‪ 0.0‬و ‪ 1.0‬إلييا‪ ,‬حيث أف الػٓ‪ ٓ.‬تعني حالة عدـ الظيور و الػ ٓ‪ ٔ.‬تعني حالة‬
‫الظيور التاـ بشكؿ طبيعي‪.‬‬

‫التَّعويم ‪floating‬‬

‫تعتبر خاصية التعويـ ‪ float‬مف أىـ الخصائص التي تقدميا ‪ CSS‬لمحفاظ عمى تموضع متناسؽ‬
‫لمعناصر حيث يتـ تعويـ جميع العناصر إلى جية واحدة بالنسبة لعنصر محدد‪ ,‬و التعويـ في‬
‫‪ CSS‬تعويـ أفقي إما إلى اليميف ‪ right‬أو إلى اليسار ‪.left‬‬

‫عند تعويـ عنصر ما فإف العناصر التي تميو سوؼ تمتؼ حولو (تعوـ) بما يتالءـ و تعويمو‪ ,‬أما‬
‫العناصر التي قبمو فمف تتأثر بالتعويـ‪ ,‬لنشاىد المثاؿ التالي‪:‬‬

‫>‪<html‬‬

‫>‪<head‬‬

‫>"‪<style type="text/css‬‬

‫} ;‪p { direction:rtl; text-align:justify‬‬

‫‪ٕٜٔ‬‬
 ‫} ;‪img { float:right‬‬

‫>‪</style‬‬

‫>‪</head‬‬

‫>‪<body‬‬

‫>‪<p‬‬

‫>‪<img src="picture1.gif" /‬‬

‫ٔظ‪ِ ٟ‬ب ِحز‪ٔ ٜٛ‬ظ‪ِ ٟ‬ب ِحز‪ٜٛ‬‬
‫ِحز‪ٔ ٜٛ‬ظ‪ِ ٟ‬ب ِحز‪ٔ ٜٛ‬ظ‪ِ ٟ‬ب‬
‫ٔظ‪ِ ٟ‬ب ِحز‪ٔ ٜٛ‬ظ‪ِ ٟ‬ب ِحز‪ٜٛ‬‬
‫ِحز‪ٔ ٜٛ‬ظ‪ِ ٟ‬ب ِحز‪ٔ ٜٛ‬ظ‪ِ ٟ‬ب‬
‫ِحز‪ٔ ٜٛ‬ظ‪ِ ٟ‬ب‪.‬‬
‫ٔظ‪ِ ٟ‬ب ِحز‪ٜٛ‬‬ ‫ِحز‪ٔ ٜٛ‬ظ‪ِ ٟ‬ب ِحز‪ٜٛ‬‬
‫ِحز‪ٔ ٜٛ‬ظ‪ِ ٟ‬ب‬ ‫ٔظ‪ِ ٟ‬ب ِحز‪ٔ ٜٛ‬ظ‪ِ ٟ‬ب‬
‫ٔظ‪ِ ٟ‬ب ِحز‪ٜٛ‬‬ ‫ِحز‪ٔ ٜٛ‬ظ‪ِ ٟ‬ب ِحز‪ٜٛ‬‬
‫ِحز‪ٔ ٜٛ‬ظ‪ِ ٟ‬ب‬ ‫ٔظ‪ِ ٟ‬ب ِحز‪ٔ ٜٛ‬ظ‪ِ ٟ‬ب‬

‫>‪</p‬‬

‫>‪</body‬‬

‫>‪</html‬‬

‫و الذي يبدو في مستعرض الويب كمايمي‪:‬‬

‫ٖٓٔ‬
 ‫الشكل ‪ : 46‬مثال عمى استخدام خاصية التعويم ‪float‬‬

‫التؼ المحتوى الذي يمييا بما يتالءـ و‬

‫كما تالحظ فقد تـ تعويـ الصورة إلى اليميف مف النص و ّ‬
‫موضع الصورة الجديد بعد التعويـ‪ ,‬و التفاؼ النص بيذا الشكؿ المتناسؽ لـ يكف ليحدث لو تـ‬
‫وضع الصورة في ىذا الموضع بطريقة أخرى‪.‬‬

‫جرب حذؼ خاصية التعويـ مف‬

‫ثـ ِّ‬
‫جرب تغيير حجـ نافذة المستعرض و ّلحظ احتفاظ الصفحة بتناسقيا‪ّ ,‬‬
‫فائدة‪ِّ :‬‬
‫الصفحة و ّلحظ الفرؽ في حاؿ تكرار ذات العممية‪.‬‬

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

‫ٖٔٔ‬
‫عناصر عائمة مف اليسار أو ‪ right‬لمنع وجود عناصر عائمة مف اليميف أو ‪ both‬لمنع وجود‬
‫عناصر عائمة مف الجيتيف‪.‬‬

‫تعميقات ‪CSS‬‬

‫يتـ كتابة التعميقات البرمجية في أوراؽ األنماط اّلنسيابيَّة ‪ CSS‬بيف *‪ /‬و ‪ */‬كمايمي‪:‬‬

‫*‪/‬‬ ‫‪comment‬‬ ‫‪*/‬‬

‫أنواع الوسائط ‪Media types‬‬

‫بناء عمى ما يقوـ بعرضيا‪ ,‬فيمكف منح الصفحة‬

‫تتيح ‪ CSS‬تخصيص مظير و شكؿ الصفحة ً‬
‫مظي اًر و شكالً معيناً عند استعراضيا في مستعرض الويب و منحيا مظي اًر و شكالً مختمفاً تماماً‬
‫عند عرضيا عمى الورؽ (طباعتيا)‪...‬إلخ‪.‬‬

‫يتـ تحقيؽ ما سبؽ ذكره مف خالؿ وصؼ نوع ‪ media‬ما قبؿ مجموعة قواعد ‪ ,CSS‬و نوع‬
‫‪ media‬آخر قبؿ مجموعة قواعد ‪ CSS‬أخرى حيث يتـ تطبيؽ كؿ مجموعة عند الحالة المذكورة‬
‫في قاعد الػ ‪ ,@media‬لنشاىد المثاؿ التالي‪:‬‬

‫>‪<html‬‬

‫>‪<head‬‬

‫>"‪<style type="text/css‬‬

‫‪@media screen‬‬

‫{‬

‫{‪p‬‬

‫‪text-align:justfy‬‬

‫;‪direction:rtl‬‬

‫ٕٖٔ‬
 color:white;

body {

background-color:green;

@media print

text-align:justfy;

direction:rtl;

color:white;}

</style>

</head>

<body>

<p>

ٓ١‫مز‬٠‫ ثـش‬ٚ‫جذ‬٠ ‫ف‬ٛ‫ س‬ٞ‫ت اٌز‬٠ٌٛ‫ ٌّسزٕذ ا‬ٟ‫ إٌظ‬ٜٛ‫ اٌّحز‬ٛ٘ ‫٘زا‬
ٍٝ‫ اٌؼشع ػ‬ٚ ‫ اٌشبشخ‬ٍٝ‫ اٌؼشع ػ‬ٟ‫ حبٌز‬ٟ‫ٓ ف‬١‫ِخزٍفز‬
.‫اٌـجبػخ‬/‫سق‬ٌٛ‫ا‬

</p>

</body>

</html>

ٖٖٔ
 ‫يبدو المثاؿ السابؽ عند العرض في مستعرض الويب كمايمي‪:‬‬

‫الشكل ‪ : 47‬استخدام القاعدة ‪@media‬‬

‫و يبدو عمى الورؽ (في نافذة المعاينة قبؿ الطباعة في الحقيقة) كمايمي‪:‬‬

‫الشكل ‪ : 48‬استخدام القاعدة ‪@media‬‬

‫ٖٗٔ‬
 ‫يمكف أف نضع بعد ‪ @media‬إحدى القيـ التالية‪:‬‬

‫الشرح‬ ‫القيمة‬
‫جميع أجيزة العرض‬ ‫‪all‬‬
‫لألجيزة الناطقة‬ ‫‪aural‬‬
‫األجيزة المعتمدة عمى الممس‬ ‫‪braille‬‬
‫طابعات األجيزة المعتمدة عمى الممس‬ ‫‪embossed‬‬
‫لألجيزة الكفيَّة‬ ‫‪handheld‬‬
‫لكؿ الطابعات‬ ‫‪print‬‬
‫ألجيزة اإلسقاط (الراشؽ مثالً)‬ ‫‪projection‬‬
‫لشاشات الحواسيب‬ ‫‪screen‬‬
‫لكؿ األجيزة التي تستخدـ شاشات ذات عرض محرؼ ثابت (كالمبرقة الكاتبة)‪.‬‬ ‫‪tty‬‬
‫لكؿ األجيزة الشبيية بالتمفاز‬ ‫‪tv‬‬
‫الجدول ‪ : 11‬قيم القاعدة ‪@media‬‬

‫و بانتياء حديثنا عف قواعد الػ ‪ Media‬نكوف قد أنيينا ‪-‬بفضؿ اهلل‪ -‬مناقشة ‪ CSS‬بأغمب‬
‫خصائصيا‪ ,‬و سنتابع في الصفحات التالية استعراض خصائص ‪ CSS‬العصريَّة و التي تعرؼ‬
‫أما اآلف فأرى أف نعرض جدوّلً ب ُم َح ِّددات ‪ CSS‬التقميديَّة ليكوف مرجعاً سريعاً عند‬
‫باسـ ‪َّ ,CSS3‬‬
‫الحاجة‪.‬‬

‫دليل محددات ‪CSS‬‬

‫شرح المثال‬ ‫مثال‬ ‫المحدد‬

‫الواصفة‬ ‫ذات‬ ‫العناصر‬ ‫كؿ‬ ‫‪.Mukhtar‬‬ ‫‪.class‬‬
‫‪"class="Mukhtar‬‬
‫الواصفة‬ ‫ذات‬ ‫العناصر‬ ‫كؿ‬ ‫‪#name‬‬ ‫‪#id‬‬
‫‪"id="name‬‬

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

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

‫‪ٖٔٚ‬‬
 ‫‪CSS 3‬‬

‫مع تطور مفيوـ الويب (خصوصاً مع ظيور الػ ‪ )Web 2.0‬ظيرت الحاجة إلى تحسيف أوراؽ‬
‫األنماط اّلنسيابية لتحقيؽ تصاميـ أجمؿ في مواقع الويب دوف الحاجة إلى اإلفراط في استخداـ‬
‫برامج التصميـ و ىذا ما دفع إلى ظيور اإلصدار الجديد مف أوراؽ األنماط اّلنسيابيَّة و المعروؼ‬
‫بػ ‪.CSS3‬‬

‫تضيؼ ‪ CSS3‬مجموعة مف المحددات و الخصائص الجديدة إلى ‪ CSS‬التقميدية و اصطُمِ َح عمى‬

‫تسمية كؿ مجموعة مف ىذه الخصائص أو المحددات باسـ الوحدة ‪ ,Module‬و لعؿ أىـ الوحدات‬
‫المضافة ىي‪:‬‬

‫‪ ‬وحدة المحددات الجديدة‬

‫‪ ‬وحدة الحدود و الخمفيات الجديدة‬
‫‪ ‬وحدة تحسيف نموذج الصندوؽ‬
‫‪ ‬وحدة مؤثرات النصوص الجديدة‬
‫‪ ‬وحدة التحويالت اليندسية ذات البعديف‬
‫‪ ‬وحدة التحويالت اليندسية ذات الثالثة أبعاد‬
‫‪ ‬وحدة الحركات‬
‫‪ ‬وحدة الصفحات متعددة األعمدة‬
‫‪ ‬وحدة واجية المستخدـ‬

‫المستعرضات الداعمة‬

‫بالنسبة لػ ‪ CSS3‬فيي مدعومة مف أغمب مستعرضات الويب الحديثة و بشكؿ أوسع بكثير مف‬
‫دعـ ذات المستعرضات لػ ‪.HTML5‬‬

‫‪ٖٔٛ‬‬
 CSS3 Borders ‫الحدود الجديدة‬

‫) بسيولة و‬Round Corner Borders( ‫ إنشاء الحدود ذات الزوايا غير القائمة‬CSS3 ‫تتيح‬
‫) التي طالما استخدمت‬Photoshop ‫يسر و دوف الحاجة ّلستخداـ أي مف برامج التصميـ (مثؿ‬
‫ و ذلؾ بإسناد قيمة إلييا‬border-radius ‫لتحقيؽ ىذه الميمة عبر خاصية جديدة ىي الخاصية‬
,‫ تعبر القيمة المسندة عف نصؼ قطر قوس الدائرة المقتطع كزاوية لإلطار‬,‫بإحدى واحدات القياس‬
:‫لنشاىد المثاؿ التالي‬

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style type="text/css">

div

border:2px solid #a1a1a1;

padding:10px 40px;

background:#dddddd;

width:300px;

border-radius:25px;

-moz-border-radius:25px; /* Firefox 3.6 and earlier */

</style>

</head>

<body>

ٖٜٔ
 ‫‪<div>The border-radius property allows you to add rounded‬‬
‫>‪corners to elements.</div‬‬

‫>‪</body‬‬

‫>‪</html‬‬

‫و الذي يبدو في مستعرض الويب كمايمي‪:‬‬

‫الشكل ‪ : 49‬استخدام خاصية ‪ border-radius‬في مستعرض كروم‬

‫ممحوظة‪ :‬مستعرض ‪ Firefox‬يعتبر أف اسـ الخاصية ىو ‪-moz-border-radius‬‬

‫كما تتيح ‪ CSS3‬إنشاء حدود العناصر باّلعتماد عمى صورة صغيرة تعبر عف أصغر شكؿ ممكف‬
‫لإلطار‬

‫و يتـ إنشاء اإلطار بطريقتيف‪:‬‬

‫‪ :repeated ‬بتكرار جزء مف الصورة‪.‬‬

‫‪ :stretch ‬بتمديد جزء مف الصورة‪.‬‬

‫ِّ‬
‫يوضح الفرؽ بيف الطريقتيف‬ ‫و الشكؿ الجانبي‬
‫المذكورتيف‪.‬‬

‫الشكل ‪ : 51‬اإلطارات الصورية في ‪CSS3‬‬ ‫يتـ إنشاء الحدود الصورية مف خالؿ تمرير‬

‫ٓٗٔ‬
‫ أو‬repeat ‫ ثـ إسناد إحدى القيمتيف‬,border-image-source ‫مسار الصورة إلى الخاصية‬
‫ ثـ إسناد عرض اإلطار بالبكسؿ إلى‬,border-image-repeat ‫ إلى الخاصية‬stretch
border- ‫ و إسناد قيـ مناسبة بالبكسؿ إلى الخاصيتيف‬,border-image-width ‫الخاصية‬
‫ لتحديد جزء الصورة الذي سيتـ تك ارره أو تمديده‬border-image-outset ‫ و‬image-slice
.‫لصنع اإلطار‬

‫ و التي تجمع جميع الخصائص السابقة بالصيغة‬border-image ‫ يمكف استخداـ الخاصية المختصرة‬:‫ممحوظة‬
border-image:source slice width outside repeat;

َ ‫لنشاىد المثاؿ التالي الذي يعتمد عمى الصورة التي ُع ِر‬

:‫ضت سابقاً لصنع اإلطار‬

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style type="text/css">

div

border-width:15px;

width:250px;

padding:10px 20px;

-webkit-border-image:url(border.png) 30 30 stretch;

</style>

</head>

<body>

<div> Here, the image is stretched to fill the area.</div>

ٔٗٔ
 ‫>‪</body‬‬

‫>‪</html‬‬

‫و الذي يبدو في مستعرض الويب كمايمي‪:‬‬

‫الشكل ‪ : 51‬اإلطار الصوري في مستعرض جوجل كروم‬

‫ممحوظة‪ :‬مستعرض ‪ Firefox‬يستخدـ البدائة ‪ -moz-‬قبؿ أسماء الخصائص المذكورة أعاله‪ ,‬و مستعرضا‬
‫‪ Safari‬و ‪ Chrome‬يستخدماف البادئة ‪ -webkit-‬و مستعرض ‪ Opera‬يستخدـ البادئة ‪-o-‬‬

‫تتيح ‪ CSS3‬أيضاً إنشاء ظؿ لعنصر ما عبر الخاصية ‪ box-shadow‬و التي يسند إلييا قيمة‬
‫لونية تعبر عف لوف الظؿ و قيـ بالبكسؿ تعبر عف إحداثيات الظؿ‪ ,‬لنشاىد المثاؿ التالي‪:‬‬

‫"‪<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN‬‬

‫>"‪"http://www.w3.org/TR/html4/loose.dtd‬‬

‫>‪<html‬‬

‫>‪<head‬‬

‫>"‪<style type="text/css‬‬

‫‪div‬‬

‫{‬

‫;‪width:300px‬‬

‫;‪height:100px‬‬

‫;‪background-color:yellow‬‬

‫ٕٗٔ‬
 ‫;‪-webkit-box-shadow: 10px 10px 5px #888888‬‬

‫}‬

‫>‪</style‬‬

‫>‪</head‬‬

‫>‪<body‬‬

‫>‪<div></div‬‬

‫>‪</body‬‬

‫>‪</html‬‬

‫و الذي يبدو في مستعرض الويب كمايمي‪:‬‬

‫الشكل ‪ : 52‬خاصية الظل كما تبدو في مستعرض كروم‬

‫ممحوظة‪ :‬يستخدـ مستعرضا ‪ Safari‬و ‪ Chrome‬البادئة ‪ -webkit-‬قبؿ اسـ الخاصية‬

‫الخمفيات الجديدة ‪CSS3 Backgrounds‬‬

‫في ‪ CSS3‬تـ إضافة خاصيتيف جديدتيف لمساعدة مطور الويب عمى التحكـ بالخمفيات بشكؿ‬
‫أفضؿ‪ ,‬األولى ىي الخاصية ‪ background-size‬و التي تسمح بتحديد أبعاد الصورة الخمفية‬
‫بالبكسؿ مما يسمح بإعطاء الصورة كخمفية أبعاداً تختمؼ عف األبعاد األصمية لمصورة و ىو ما لـ‬
‫يكف ممكناً قبؿ ‪ ,CSS3‬يتـ استخداـ ىذه الخاصية كمايمي‪:‬‬

‫ٖٗٔ‬
‫;‪background-size: 80px 60px‬‬

‫يعني الرقـ األوؿ إلى عرض الصورة في حيف أف الثاني يشير إلى ارتفاعيا‪.‬‬

‫ممحوظة‪ :‬في مستعرض ‪ Firefox‬تسبؽ الخاصية بالبادئة ‪-moz-‬‬

‫أما الخاصية الثانية فيي الخاصية ‪ background-origin‬و التي تحدد أحد أجزاء نموذج‬
‫الصندوؽ ليتـ تطبيؽ الخمفية عمى أساسو و يمكف أف تأخذ إحدى القيـ ‪ context-box‬لتطبيؽ‬
‫الخمفية عمى المستطيؿ المحدد بالمحتوى أو ‪ padding-box‬لتطبيؽ الخمفية عمى المستطيؿ‬
‫المحدد بالمحتوى و اإلزاحة الداخمية معاً أو ‪ border-box‬لتطبيؽ الخمفية عمى المستطيؿ المحدد‬
‫بالمحتوى و باإلزاحة الداخمية و بالحدود و الشكؿ التالي يوضح الفرؽ بيف المستطيالت الثالثة‪.‬‬

‫الشكل ‪ : 53‬نموذج الصندوق بالنسبة لخاصية الخمفية في ‪CSS3‬‬

‫ممحوظة‪ :‬في مستعرضي ‪ Safari‬و ‪ Chrome‬يتـ استخداـ البادئة ‪-webkit-‬‬

‫مف التحسينات التي أضيفت إلى خاصية الخمفية في ‪ CSS3‬السماح بإضافة أكثر مف صورة في‬
‫نفس الوقت كخمفية لنفس العنصر و ذلؾ عبر الفصؿ بيف كؿ خمفية و األخرى بالفاصمة بالشكؿ‪:‬‬

‫;)‪background-image:url(back1.gif),url(back2.png‬‬

‫ٗٗٔ‬
 ‫خصائص تنسيق النصوص الجديدة في ‪CSS3‬‬

‫تـ إضافة مجموعة مف الخصائص الجديدة لتنسيؽ النصوص في ‪ CSS3‬نعرض بعضيا في‬
‫الجدوؿ التالي‪:‬‬

‫الشرح‬ ‫القيم الممكنة‬ ‫الخاصية‬

‫‪ none‬أو ‪ first‬أو تحدد وضع عالمة الترقيـ خارج حدود‬ ‫‪hanging-punctuation‬‬
‫‪ last‬أو ‪ allow-‬العنصر >‪<p‬‬
‫‪ end‬أو ‪force-‬‬
‫‪end‬‬
‫‪ start‬أو ‪ end‬أو تزيؿ عالمة الترقيـ اّلفتتاحية مف بداية كؿ‬ ‫‪punctuation-trim‬‬
‫أو سطر مف أسطر >‪<p‬‬ ‫‪allow-end‬‬
‫أو‬ ‫‪adjacent‬‬
‫‪none‬‬
‫‪ auto‬أو ‪ inter-‬تحدد طريقة تحقيؽ المحاذاة عندما تكوف‬ ‫‪text-justify‬‬
‫‪ word‬أو ‪ inter-‬قيمة الخاصية ‪ text-align‬مساوية لػ‬
‫أو ‪Justify‬‬ ‫‪ideograph‬‬
‫‪ inter-cluster‬أو‬
‫أو‬ ‫‪distribute‬‬
‫‪ kashida‬أو ‪trim‬‬
‫قيمة بالبكسؿ تعبر تحدد عرض و لوف الحدود الخارجية‬ ‫‪text-outline‬‬
‫عف العرض و قيمة لمنص‬
‫عف‬ ‫تعبر‬ ‫لونية‬
‫الموف‬
‫‪ clip‬أو ‪ ellipsis‬أو تحدد ما الذي يتـ عممو عندما يصبح طوؿ‬ ‫‪text-overflow‬‬
‫النص أطوؿ مف العنصر الحاوي لو‬ ‫‪string‬‬

‫٘ٗٔ‬
 ‫قيمتيف رقمتيف و تضيؼ ظالً لمنص‬ ‫‪text-shadow‬‬
‫قيمة لونية‬
‫‪ none‬أو ‪ normal‬تحدد طريقة تحقيؽ التفاؼ النصوص‬ ‫‪text-wrap‬‬
‫أو ‪unrestricted‬‬
‫أو ‪suppress‬‬
‫أو تحديد طريقة تقسيـ الكممات الطويمة‬ ‫‪normal‬‬ ‫‪word-break‬‬
‫أو‬ ‫‪break-all‬‬
‫‪hyphenate‬‬
‫أو تقوـ بتحقيؽ التفاؼ النصوص عبر تقسيـ‬ ‫‪normal‬‬ ‫‪word-wrap‬‬
‫بناء عمى الطريقة المحددة‬
‫الكممات الطويمة ً‬ ‫‪word-break‬‬
‫في الخاصة ‪word-break‬‬
‫الجدول ‪ : 13‬خصائص تنسيق النصوص الجديدة في ‪CSS3‬‬

‫يعرض المثاؿ التالي استخداـ إحدى ىذه الخصائص‪:‬‬

‫"‪<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN‬‬

‫>"‪"http://www.w3.org/TR/html4/loose.dtd‬‬

‫>‪<html‬‬

‫>‪<head‬‬

‫>"‪<style type="text/css‬‬

‫‪h1‬‬

‫{‬

‫;‪text-shadow: 5px 5px 5px #FF0000‬‬

‫}‬

‫>‪</style‬‬

‫>‪</head‬‬

‫>‪<body‬‬

‫‪ٔٗٙ‬‬
 ‫>‪</h1‬إٌض اٌّظًٍ>‪<h1‬‬

‫>‪</body‬‬

‫>‪</html‬‬

‫خصائص الخطوط الجديدة في ‪CSS3‬‬

‫في ‪ CSS‬التقميدية كاف مف واجب مطوري صفحات الويب استخداـ الخطوط الشائعة و الموجودة‬
‫في أغمب حواسيب زوار الصفحة و ذلؾ أف المستعرض لـ يكف قاد اًر عمى عرض أي خط غير‬
‫موجود في خطوط حاسوب زائر الموقع‪ ,‬مع ‪ CSS3‬أصبح باإلمكاف استخداـ أي خط ضمف‬
‫صفحة الويب بعد وضع ممؼ الخط ضمف ممفات الموقع و و إسناد مساره إلى الخاصية ‪src‬‬
‫لقاعدة ‪ @font-face‬الجديدة كمياً و التي تستخدـ كمايمي‪:‬‬

‫أوّلً‪ -‬يتـ تعريؼ اسـ عائمة جديدة باستخداـ القاعدة ‪.@font-face‬‬

‫ئ سابقاً إلى الخاصية ‪ font-family‬بشكؿ تقميدي‪.‬‬ ‫ِ‬

‫ثانياً‪ -‬يسند اسـ العائمة الذي أ ُْنش َ‬

‫ممحوظة‪ :‬مستعرض ‪ Internet Exploer‬يدعـ الخطوط ذات النوع ‪ .eot‬فقط بينما تدعـ باقي المستعرضات‬
‫النوعيف ‪ .ttf‬و ‪.otf‬‬

‫لنشاىد المثاؿ التالي‪:‬‬

‫"‪<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN‬‬

‫>"‪"http://www.w3.org/TR/html4/loose.dtd‬‬

‫>‪<html‬‬

‫>‪<head‬‬

‫>"‪<style type="text/css‬‬

‫‪@font-face‬‬

‫{‬

‫;‪font-family: myFont‬‬

‫‪ٔٗٚ‬‬
 ‫)'‪src: url('Sansation_Light.ttf‬‬

‫‪,url('Sansation_Light.eot') format("opentype"); /* IE */‬‬

‫}‬

‫‪div‬‬

‫{‬

‫;‪font-family:myFont‬‬

‫}‬

‫>‪</style‬‬

‫>‪</head‬‬

‫>‪<body‬‬

‫>‪<div‬‬

‫‪ّ٠‬ىٓ اسزخذاَ أ‪ٛٔ ٞ‬ع خـ‪ٛ‬ؽ ٌ‪ٙ‬زا إٌض‬

‫>‪</div‬‬

‫>‪</body‬‬

‫>‪</html‬‬

‫التحويالت الهندسية ذات البعدين ‪2D Transformation‬‬

‫تمكننا ‪ CSS3‬مف إجراء تحويالت ىندسية ثنائية البعد عمى عناصر الصفحة كاّلنسحاب‬
‫‪ translate‬و التدوير ‪ rotate‬و تغيير الحجـ ‪ scale‬و غيرىا بإسناد أحد توابع التحويؿ إلى‬
‫الخاصة ‪.transform‬‬

‫ممحوظة‪ :‬مستعرض ‪ Internet Explorer‬يستخدـ البادئة ‪ -ms-‬قبؿ اسـ الخاصية‪ ,‬و مستعرض ‪Firefox‬‬
‫يستخدـ البادئة ‪ -moz-‬و مستعرض ‪ Opera‬يستخدـ البادئة ‪ -o-‬و مستعرضي ‪ Chrome‬و ‪ Safari‬يستخدماف‬
‫البادئة ‪-webkit-‬‬

‫و الجدوؿ التالي يعرض توابع التحويؿ الجديدة‪:‬‬

‫‪ٔٗٛ‬‬
 ‫الشرح‬ ‫التابع‬
‫ينقؿ العنصر إلى اإلحداثيات الممرة لو‬ ‫)‪translate(x,y‬‬
‫ينقؿ العنصر عمى المحور ‪ X‬مسافة ‪n‬‬ ‫)‪translateX(n‬‬
‫ينقؿ العنصر عمى المحور ‪ Y‬مسافة ‪n‬‬ ‫)‪translate(n‬‬
‫يغير بعدي العنصر إلى البعديف الممرريف لو‬ ‫)‪scale(x,y‬‬
‫يغير بعد العنصر ‪ X‬إلى القيمة ‪n‬‬ ‫)‪scaleX(n‬‬
‫يغير بعد العنصر ‪ Y‬إلى القيمة ‪n‬‬ ‫)‪scaleY(n‬‬
‫يقوـ بتدوير العنصر بزاوية ‪α‬‬ ‫)‪rotate(α‬‬
‫يقوـ بإجراء تحويؿ اّلنحراؼ وفؽ الزاويتيف ‪ Xα‬و ‪Yα‬‬ ‫)‪skew(Xα,Yα‬‬
‫يقوـ بإجراء تحويؿ اّلنحراؼ عمى المحور ‪ X‬وفؽ الزاوية ‪α‬‬ ‫)‪skewX(α‬‬
‫يقوـ بإجراء تحويؿ اّلنحراؼ عمى المحور ‪ Y‬وفؽ الزاوية ‪α‬‬ ‫)‪skewY(α‬‬
‫الجدول ‪ : 14‬توابع التحويل الهندسي ثنائي البعد في ‪CSS3‬‬

‫لنشاىد المثاؿ التالي‪:‬‬

‫"‪<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN‬‬

‫>"‪"http://www.w3.org/TR/html4/loose.dtd‬‬

‫>‪<html‬‬

‫>‪<head‬‬

‫>"‪<style type="text/css‬‬

‫‪div‬‬

‫{‬

‫;)‪-webkit-transform:skew(30deg,20deg‬‬

‫;‪width:100px‬‬

‫;‪height:75px‬‬

‫;‪background-color:red‬‬

‫;‪border:1px solid black‬‬

‫‪ٜٔٗ‬‬
 ‫}‬

‫>‪</style‬‬

‫>‪</head‬‬

‫>‪<body‬‬

‫>‪<div>It is CSS3 Magic!</div‬‬

‫>‪</body‬‬

‫>‪</html‬‬

‫و الذي يبدو في مستعرض الويب كمايمي‪:‬‬

‫الشكل ‪ : 54‬مثال عمى تحويل ‪ Skew‬في مستعرض جوجل كروم‬

‫ممحوظة‪ :‬األحرؼ ‪ deg‬التي تـ تمريرىا بعد األرقاـ إلى تابع التحويؿ تعني درجة ‪ degree‬و ذلؾ تميي اًز عف‬
‫الرادياف و الذي ترمز لو األحرؼ ‪rad‬‬

‫ٓ٘ٔ‬
 ‫التحويالت الهندسية ثالثية األبعاد ‪3D transformation‬‬

‫تتيح ‪ CSS3‬القياـ بتحويالت ىندسية ثالثية األبعاد عمى العناصر بنفس األسموب السابؽ و لكف‬
‫باستخداـ التوابع التي يعرضيا الجدوؿ التالي‪:‬‬

‫الشرح‬ ‫التابع‬
‫ينقؿ العنصر إلى اإلحداثيات الممرة لو‬ ‫)‪translate3d(x,y,z‬‬
‫ينقؿ العنصر مسافة ‪ n‬عمى المحور ‪X‬‬ ‫)‪translateX(n‬‬
‫ينقؿ العنصر مسافة ‪ n‬عمى المحور ‪Y‬‬ ‫)‪translateY(n‬‬
‫ينقؿ العنصر مسافة ‪ n‬عمى المحور ‪Z‬‬ ‫)‪translateZ(n‬‬
‫يغير أبعاد العنصر إلى األبعاد الممرة لو‬ ‫)‪scale3d(x,y,z‬‬
‫يغير بعد العنصر ‪ X‬إلى المقدار ‪n‬‬ ‫)‪scaleX(n‬‬
‫يغير بعد العنصر ‪ Y‬إلى المقدار ‪n‬‬ ‫)‪scaleY(n‬‬
‫يغير بعد العنصر ‪ Z‬إلى المقدار ‪n‬‬ ‫)‪scaleZ(n‬‬
‫يقوـ بتدوير العنصر عمى المحاور الثالثة بزاوية‬ ‫)‪rotate3d(x,y,z,α‬‬
‫مقدارىا ‪α‬‬
‫يقوـ بتدوير العنصر عمى المحور ‪ X‬بزاوية ‪α‬‬ ‫)‪rotateX(α‬‬
‫يقوـ بتدوير العنصر عمى المحور ‪ Y‬بزاوية ‪α‬‬ ‫)‪rotateY(α‬‬
‫يقوـ بتدوير العنصر عمى المحور ‪ Z‬بزاوية ‪α‬‬ ‫)‪rotateZ(α‬‬
‫يحدد منظور الرؤية‬ ‫)‪perspective(n‬‬
‫الجدول ‪ : 15‬التحويالت الهندسية ثالثية األبعاد في ‪CSS3‬‬

‫االنتقال المتحرك ‪Transition‬‬

‫توفر ‪ CSS3‬طريقة جميمة و مميزة إلنشاء تأثير عمى عناصر المستند يعرؼ ىذا التأثير الخاص‬
‫باسـ اّلنتقاؿ المتحرؾ و الذي يتـ تحقيقو عبر الخاصية ‪ transition‬حيث يتـ تطبيؽ قاعدة ‪CSS‬‬
‫مختمفة عف القاعدة األصمية لمعنصر خالؿ زمف محدد مما يظير العنصر بشكؿ متحرؾ‪.‬‬

‫ٔ٘ٔ‬
 :‫عف طريؽ الصيغة‬

transition: property duration;

‫ تعبر عف الزمف و يمكف تغيير‬duration ‫ عف اسـ الخاصية التي ستتغير و‬property ‫حيث تعبر‬
:‫أكثر مف خاصية بالصيغة‬

transition: property1 duration1, property2 duration2,… etc;

:‫لنشاىد المثاؿ التالي‬

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style type="text/css">

div

width:100px;

height:100px;

background:red;

-webkit-transition:width 2s, height 2s;

div:hover

width:200px;

height:200px;

webkit-transform:rotate(180deg);

ٕٔ٘
 ‫>‪</style‬‬

‫>‪</head‬‬

‫>‪<body‬‬

‫>‪<div>Hover over me to see the transition effect!</div‬‬

‫>‪</body‬‬

‫>‪</html‬‬

‫ممحوظة‪ :‬لف أذكر البادئات التي تستخدميا المستعرضات الشييرة ىنا فمف المفترض أنؾ اعتدت عمييا اآلف و سأنوه‬
‫إلى أف الحرؼ ‪ s‬بعد القيمة الرقمية يعني أف الزمف بالثانية ‪second‬‬

‫حركات ‪CSS3‬‬

‫تتيح ‪ CSS3‬إنشاء حركات مخصصة في صفحة الويب مما يغني مطور الويب عف استخداـ‬
‫صور الػ ‪ .gif‬المتحركة أو تأثيرات ‪ flash‬و غيرىا ضمف الصفحة‪ ,‬و يتـ إنشاء الحركات‬
‫بخطوتيف‪:‬‬

‫أوّلً‪ -‬يتـ تعريؼ اسـ خاص لمحركة في القاعدة ‪ @keyframe‬و تحديد ماىيتيا عبر تحديد‬
‫الوضع اّلبتدائي ‪ from‬و الوضع النيائي ‪ ,to‬و بالطبع عند تطبيؽ الحركة يتـ اّلنتقاؿ مف الوضع‬
‫اّلبتدائي لمعنصر إلى الوضع النيائي خالؿ فترة زمنية مما يجعمنا نشعر بالحركة‪.‬‬

‫ثانياً‪ -‬يتـ إسناد اسـ الحركة و زمف تنفيذىا إلى الخاصية ‪ animation‬الخاصة بالعنصر‪.‬‬

‫لنشاىد المثاؿ التالي‪:‬‬

‫"‪<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN‬‬

‫>"‪"http://www.w3.org/TR/html4/loose.dtd‬‬

‫>‪<html‬‬

‫ٖ٘ٔ‬
 ‫>‪<head‬‬

‫>"‪<style type="text/css‬‬

‫‪div‬‬

‫{‬

‫;‪width:100px‬‬

‫;‪height:100px‬‬

‫;‪background:red‬‬

‫;‪-webkit-animation:myAnimation 5s‬‬

‫}‬

‫‪@-webkit-keyframes myAnimation‬‬

‫{‬

‫};‪from {background:red‬‬

‫};‪to {background:yellow‬‬

‫}‬

‫>‪</style‬‬

‫>‪</head‬‬

‫>‪<body‬‬

‫>‪<div></div‬‬

‫>‪</body‬‬

‫>‪</html‬‬

‫المثاؿ السابؽ يعرض إنشاء حركة باّلعتماد عمى الحالة البدائية و الحالة النيائية لمعنصر أثناء‬
‫الحركة حيث أف الحالة البدائية تعبر عف شكؿ العنصر لحظة بدء الحركة و الحالة النيائية تعبر‬
‫عف شكؿ العنصر لحظة نياية الحركة‪.‬‬

‫ٗ٘ٔ‬
‫يمكف تخصيص شكؿ العنصر في كؿ لحظة مف لحظات الحركة عبر إنشاء قاعدة ‪ CSS‬خاصة‬
‫بيذه المحظة ضمف قاعدة ‪ @keyframes‬بالشكؿ‪:‬‬

‫‪@-webkit-keyframes myAnimation‬‬

‫{‬

‫};‪0% {background:red‬‬

‫};‪15% {backgroung:green;width:150px;color:white‬‬

‫};‪50% {height:350px‬‬

‫};‪100% {background:yellow‬‬

‫}‬

‫حيث أف ‪ 0%‬تعني لحظة بداية الحركة و ‪ 100%‬تعني لحظة نيايتيا و القيـ األخرى تعبر عف‬
‫فترات أثناء حدوث الحركة‪.‬‬

‫ممحوظة‪ :‬تحدث ىذه التغيرات أثناء الحركة و يعود العنصر إلى شكمو الطبيعي عند انتياء الحركة‬

‫األعمدة المتعددة في ‪CSS3‬‬

‫تسمح ‪ CSS3‬بعرض محتوى العناصر عمى شكؿ أعمدة متعددة ‪( Multi-Columns‬عمى مبدأ‬
‫الجرائد) بطريقتيف‪:‬‬

‫األولى‪ -‬عدد أعمدة ثابت و عرض عمود متغير‪ :‬و يتـ ذلؾ مف خالؿ إسناد عدد األعمدة إلى‬
‫الخاصية ‪ column-count‬التي تقسِّـ المحتوى إلى العدد المذكور مف األعمدة‪ ,‬و يتغير عرض‬
‫األعمدة مع تغير حجـ نافذة المستعرض‪.‬‬

‫الثانية‪ -‬عرض عمود ثابت و عدد أعمدة متغير‪ :‬و يتـ ذلؾ مف خالؿ عرض العمود الواحد إلى‬
‫الخاصية ‪ column-width‬و المسافة بيف كؿ عموديف إلى الخاصية ‪ ,column-gap‬و في ىذه‬

‫٘٘ٔ‬
‫الطريقة تحافظ األعمدة عمى عرض ثابت لكؿ منيا و يتغير عددىا مع تغير حجـ نافذة‬
.‫المستعرض‬

.‫ تستخدـ نفس البادئات المذكورة سابقاً مع خصائص األعمدة المتعددة‬:‫ممحوظة‬

:‫المثاؿ التالي يعرض إنشاء األعمدة المتعددة بالطريقة األولى‬

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style type="text/css">

.newspaper

-webkit-column-count:3;

</style>

</head>

<body>

<div class="newspaper">

this is a sample content this is a sample content this is a

sample content this is a
this is a sample content
sample content this is a
this is a sample content
sample content this is a
this is a sample content
sample content this is a
this is a sample content
sample content this is a
this is a sample content
sample content this is a sample content
this is a sample content this is a
sample content this is a sample content
this is a sample content this is a
sample content this is a sample content
this is a sample content this is a
sample content this is a sample content
this is a sample content this is a
sample content this is a sample content
this is a sample content.

ٔ٘ٙ
 ‫>‪</div‬‬

‫>‪</body‬‬

‫>‪</html‬‬

‫يبدو المثاؿ السابؽ في مستعرض الويب كمايمي‪:‬‬

‫الشكل ‪ : 55‬إنشاء محتوى بأعمدة متعددة محددة العدد‪.‬‬

‫يمكف وضع فواصؿ ذات مظير و لوف محدديف بيف األعمدة عف طريؽ الخاصية ‪column-rule‬‬
‫بشكؿ مشابو لممثاؿ التالي‪:‬‬

‫;‪column-rule: 4px dotted black‬‬

‫واجهة المستخدم ‪CSS3 User Interface‬‬

‫باإلضافة لما قدمتو ‪ CSS3‬مف ميزات لمف ينشئ صفحات الويب فقد قدمت مجموعة مف‬
‫التحسينات لممستخدـ النيائي لمصفحة عبر الخصائص التي يعرضيا الجدوؿ التالي‪:‬‬

‫‪ٔ٘ٚ‬‬
 ‫الشرح‬ ‫القيم الممكنة‬ ‫الخاصية‬
‫‪ normal‬أو ‪ icon‬أو تحدد لمستعرض الويب كيفية (شكؿ)‬ ‫‪appearance‬‬
‫‪ window‬أو ‪ button‬أو عرض العنصر ضمف المستند‬
‫‪ menu‬أو ‪field‬‬
‫‪ auto‬أو ‪ inherit‬أو رابط تتيح جعؿ عنصر ما بشكؿ أيقوني‬ ‫‪icon‬‬
‫لصورة‬
‫أو تحدد أيف سيتـ اّلنتقاؿ عندما يضغط‬ ‫‪inherit‬‬ ‫أو‬ ‫‪auto‬‬ ‫‪ nav-down‬و‬
‫معرؼ أحد العناصر أو المستخدـ عمى مفاتيح األسيـ في لوحة‬ ‫‪ nav-left‬و‬
‫المفاتيح‬ ‫اسـ إطار‬ ‫‪ nav-right‬و‬
‫‪nav-up‬‬
‫يحدد العدد المسند إلييا عدد ضغطات‬ ‫عدد صحيح و مميز‬ ‫‪nav-index‬‬
‫مفتاح ‪ Tab‬الالزمة لالنتقاؿ إلى العنصر‬
‫أو بشكؿ أدؽ تسمسؿ اّلنتقاؿ بيف العناصر‬
‫عند الضغط عمى مفتاح ‪Tab‬‬
‫‪ none‬أو ‪ horizontal‬أو تحدد فيما إذاكاف مف المسموح لممستخدـ‬ ‫‪resize‬‬
‫تغيير حجـ أحد عناصر ‪ div‬بشكؿ يدوي‬ ‫‪ vertical‬أو ‪both‬‬
‫الشكل ‪ : 56‬خصائص واجهة المستخدم الجديدة في ‪CSS3‬‬

‫محددات ‪CSS3‬‬

‫تـ إضافة مجموعة مف المحددات الجديدة في ‪ CSS3‬نعرضيا في الجدوؿ التالي‪:‬‬

‫شرح المثال‬ ‫مثال‬ ‫المحدد‬

‫كؿ عنصر قائمة غير مرتبة مسبوؽ‬ ‫‪p~ul‬‬ ‫‪tag1~tag2‬‬
‫بعنصر فقرة‬
‫كؿ عناصر الروابط التي تبدأ قيـ‬ ‫]"‪a[href^="https‬‬ ‫]‪tag[attribute^=v‬‬
‫واصفتيا ‪ href‬بالقيمة ‪https‬‬

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

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

‫ٓ‪ٔٙ‬‬
 ‫الخاتمة‬

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

‫أتمنى أف يكوف كتابي ىذا قد ساىـ في إعطائؾ فكرة جيدة عف لغتي ‪ HTML5‬و ‪ CSS3‬و أسأؿ‬
‫ّ‬
‫أما اآلف فسأتركؾ برعاية اهلل و حفظو‬
‫اهلل أف يكوف أسموبو في عرض األفكار قد راقؾ و أرضاؾ‪َّ ,‬‬
‫أنوه ّأنني ما أزاؿ أحبو في عالـ‬
‫و سأدعو لؾ برحمة ىادئة و ممتعة في عالـ التطوير لمويب‪ ,‬و ّ‬
‫أرحب بأي اقتراح أو استفسار عمى بريدي اإللكتروني‬ ‫ّ‬ ‫الويب و أتعمّـ و‬
‫‪ mokhtar_ss@hotmail.com‬و السالـ عميكـ و رحمة اهلل و بركاتو‪.‬‬

‫ٔ‪ٔٙ‬‬
ٕٔٙ
‫الفهارس‬

‫ٖ‪ٔٙ‬‬
ٔٙٗ
 ‫فهرس األشكال‬

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

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

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

‫‪ٔٙٚ‬‬
ٔٙٛ
 ‫فهرس الجداول‬

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

‫‪ٜٔٙ‬‬
ٔٚٓ
 ‫فهرس المحتويات‬

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

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

‫ٕ‪ٔٚ‬‬
‫‪ٕٛ ......................................................................‬‬ ‫‪HTML5‬‬

‫‪ٕٛ .........................................‬‬ ‫‪HTML 5‬‬ ‫مستعرضات الويب الداعمة لػ‬

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

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

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

‫٘‪ٔٚ‬‬
ٔٚٙ
 ‫عن مؤلِّف الكتاب‬

‫(سيرة ذاتية)‬

‫أدبية‬
‫ّ‬ ‫عممية‬
‫ّ‬
‫َّ‬
‫األدبيػػة ‪ :‬مختػػار‬ ‫اّلس ػ ػػـ الصػ ػ ػريح ‪ :‬مخت ػ ػػار فػ ػ ػؤاد اّلسػػـ المسػػتعار لألعمػػاؿ‬ ‫‪‬‬ ‫المعمومات‬
‫الكمالي‪.‬‬ ‫سيد صالح‪.‬‬ ‫ّ‬ ‫الشخصيَّة‬
‫مك ػػاف و ت ػػاريخ الم ػػيالد ‪ :‬س ػػوريا‬ ‫‪‬‬

‫‪ -‬البوكماؿ ‪ٜٜٔٛ -‬ـ‪.‬‬

‫ماجس ػػتير ف ػػي تقان ػػات الوي ػػب ‪ -‬الجامع ػػة اّلفت ارض ػ ّػية الس ػػورّية ‪ -‬طال ػػب حتّػػى‬ ‫‪‬‬ ‫التحصيل‬
‫تاريخو‪.‬‬ ‫العممي‬
‫السػورّية‬
‫جيػد ج ّػداً ‪ -‬الجامعػة ّ‬ ‫َّ‬
‫المعموماتيػة بمع ّػدؿ ّ‬ ‫إجازة في ىندسة الحاسوب و‬ ‫‪‬‬

‫الدولية ‪.ٕٓٔٔ -‬‬

‫ّ‬
‫ثانوية فايز منصور بالبوكماؿ ‪.ٕٓٓٙ -‬‬
‫عامة ‪ -‬الفرع العممي ‪ّ -‬‬
‫ثانوية ّ‬
‫ّ‬ ‫‪‬‬

‫متفػ ػ ّػرغ لمعمػ ػػؿ اإلبػ ػػداعي منػ ػػذ عػ ػػاـ‬ ‫‪‬‬ ‫برمجي ػػات وي ػػب ‪ -‬ب ػػيف‬
‫ّ‬ ‫مين ػػدس‬ ‫‪‬‬ ‫الخبرات‬
‫ٖٕٔٓ‪.‬‬ ‫ػامي ٕٕٔٓ و ٖٕٔٓ ‪-‬‬ ‫عػػػػػػػػػػػ َ‬ ‫العمميَّة‬
‫عاميػ ػاً ث ػ َّػـ انتق ػػؿ ِّ‬
‫لمش ػػعر‬ ‫ب ػػدأ ش ػػاع اًر َّ‬ ‫‪‬‬ ‫ش ػ ػ ػ ػػركة عج ػ ػ ػ ػػرـ لمتكنولوجي ػ ػ ػ ػػا ‪-‬‬
‫الفصيح في بداية ‪.ٕٓٓٚ‬‬ ‫دمشؽ‪.‬‬
‫برمجي ػػات ‪ -‬عم ػػؿ ح ػػر‬ ‫ّ‬ ‫مين ػػدس‬ ‫‪‬‬

‫ػامي ٕٗٓٓ و‬ ‫ػيف عػ ػ ػ ػ ػ ػ ػ ػ ػ ػ َ‬

‫‪ -‬بػ ػ ػ ػ ػ ػ ػ ػ ػ ػ َ‬
‫ٕٓٔٓ‪.‬‬

‫‪ٔٚٚ‬‬
‫ػب ‪ِ -‬ش ػػعر ‪ -‬دائ ػػرة‬ ‫الح ػ ِّ‬ ‫ِ‬
‫ف ػػي َغ َي َاب ػػة ُ‬ ‫‪‬‬ ‫ػدي م ػػف النظرّي ػػة‬
‫مش ػػروعُ الفراىي ػ ّ‬ ‫‪‬‬ ‫من‬
‫الثقافػ ػ ػ ػ ػػة و اإلعػ ػ ػ ػ ػػالـ بال ّشػ ػ ػ ػ ػػارقة ‪-‬‬ ‫حتّى التطبيػؽ البرمجػي ‪ -‬كتػاب‬ ‫إصداراته‬
‫ٕٕٔٓ‪.‬‬ ‫ػاني ‪ -‬دمش ػ ػ ػ ػػؽ‬
‫مج ػ ػ ػ ػ ّ‬
‫ػي ّ‬
‫إلكترون ػ ػ ػ ػ ّ‬
‫ٖٕٔٓ‪.‬‬
‫‪ HTML5 & CSS3‬الخطػوة‬ ‫‪‬‬

‫األولػ ػػى نحػػػو ويػػػب المسػ ػػتقبؿ –‬

‫ػاني –‬
‫مجػ ػ ػ ػ ػ ّ‬
‫ػي ّ‬‫كتػ ػ ػ ػ ػػاب إلكترونػ ػ ػ ػ ػ ّ‬
‫البوكماؿ ‪.ٕٖٓٔ -‬‬
‫تعمّػـ ‪ jQuery‬فػي ٕٓٔ دقيقػة‬ ‫‪‬‬

‫‪ -‬مكتبػ ػ ػػة المػ ػ ػػورد لمكمبيػ ػ ػػوتر ‪-‬‬

‫دمشؽ ‪.ٕٓٔٓ -‬‬
‫‪ 3D Game Studio‬طريقػؾ‬ ‫‪‬‬

‫نح ػػو برمج ػػة األلع ػػاب ‪ -‬ممح ػػؽ‬

‫َّ‬
‫التقني ػػة‬ ‫مجػػاني م ػػع مجمّػػة ‪F1‬‬ ‫ّ‬
‫‪ -‬دمشؽ ‪.ٕٓٓٙ -‬‬
‫ت لػ ػػو مجموعػ ػػة كبي ػ ػرة مػ ػػف‬‫ُن ِشػ ػ َػر ْ‬ ‫‪‬‬

‫التقنيػ ػػة فػ ػػي عػ ػػدد مػ ػػف‬

‫ّ‬ ‫المقػ ػػاّلت‬
‫المجػ ػ ػ ػ ػ ػ ػ ػ ػ ػ ػ ػ ّػالت المطبوعػ ػ ػ ػ ػ ػ ػ ػ ػ ػ ػ ػػة و‬
‫اإللكترونية المتخصصة‪.‬‬
‫ّ‬

‫مهارات‬
‫العمل‬
‫‪‬‬ ‫‪Desktop: C#, VB.NET, VB6, Java.‬‬
‫البرمجية‬
‫ّ‬
‫‪‬‬ ‫‪Web:‬‬
‫‪o‬‬ ‫‪Server-Side: ASP.NET classic and ASP.NET MVC,‬‬
‫‪PHP Classic & PHP MVC using CodeIginiter‬‬
‫‪framework., JSP.‬‬

‫‪ٔٚٛ‬‬
 ‫‪o‬‬ ‫‪Client-Side: HTML 5, CSS 3, java script & jQuery.‬‬
‫‪o‬‬ ‫‪Technologies: XML, JSON.‬‬
‫‪‬‬ ‫‪Smart phones: Android programming.‬‬

‫‪-Access.‬‬

‫‪-Word, MS-PowerPoint, Photoshop, Maintenance‬‬

‫‪skills‬‬
‫تصػػفيات ميرجػػاف أميػػر ال ّشػػعراء ‪-‬‬ ‫‪‬‬ ‫مسػابقة أفضػؿ برمجػة و تصػػميـ‬ ‫‪‬‬ ‫الجوائز و‬
‫الموس ػ ػ ػ ػ ػػـ الخ ػ ػ ػ ػ ػػامس ‪ -‬اإلم ػ ػ ػ ػ ػػارات‬ ‫بتقنيػة ‪ASP.NET‬‬ ‫موقع ويػب ّ‬ ‫المشاركات‬
‫المتحدة ‪.ٕٖٓٔ -‬‬ ‫ّ‬ ‫العر ّبية‬ ‫المنظّم ػ ػ ػ ػ ػػة م ػ ػ ػ ػ ػػف قب ػ ػ ػ ػ ػػؿ موق ػ ػ ػ ػ ػػع‬
‫ػي ‪-‬‬
‫جػ ػػائزة ال ّشػ ػػارقة لإلبػ ػػداع العربػ ػ ّ‬ ‫‪‬‬ ‫المبرمجيف ‪vb4arab.com -‬‬
‫اإلمارات العر ّبية المتح ّػدة ‪ -‬المركػز‬ ‫األوؿ عػػف مشػروع موقػػع‬
‫المركػز ّ‬
‫األوؿ ‪.ٕٓٔٔ -‬‬ ‫ّ‬ ‫مدينة أبوكماؿ – عاـ ‪.ٕٜٓٓ‬‬
‫تصػػفيات ميرجػػاف أميػػر ال ّشػػعراء ‪-‬‬ ‫‪‬‬ ‫مس ػ ػ ػػابقة المعموماتي ػ ػ ػػة المركزي ػ ػ ػػة‬ ‫‪‬‬

‫الموس ػػـ ال ارب ػػع ‪ -‬اإلم ػػارات العر ّبي ػػة‬ ‫الثالثة عشرة ‪ -‬جامعػة البعػث ‪-‬‬
‫المتحدة ‪.ٕٓٔٔ -‬‬ ‫ّ‬ ‫حمص ‪.ٕٜٓٓ‬‬
‫ي لمطمب ػ ػػة ‪-‬‬ ‫جػ ػػائزة اإلب ػ ػػداع ِّ‬
‫الشػ ػػعر ّ‬ ‫‪‬‬ ‫الم ػ ػ ػ ػ ػػؤتمر العمم ػ ػ ػ ػ ػػي الث ػ ػ ػ ػ ػػاني –‬ ‫‪‬‬

‫الجامعػػة السػػورية الدوليػػة ‪ -‬المركػػز‬ ‫الجامعػػة السػػورية الدوليػػة لمعمػػوـ‬

‫األوؿ ‪.ٕٓٔٓ -‬‬
‫ّ‬ ‫و التكنولوجيا – دمشؽ ‪.ٕٓٓٛ‬‬
‫شارؾ في عدد كبيػر مػف األمسػيات‬ ‫‪‬‬ ‫المعموماتي ػ ػ ػػة الس ػ ػ ػػوري‬
‫ّ‬ ‫أولمبي ػ ػ ػػاد‬ ‫‪‬‬

‫و الميرجانػ ػ ػ ػ ػػات ِّ‬

‫الشػ ػ ػ ػ ػػعريَّة داخػ ػ ػ ػ ػػؿ‬ ‫ال اربػػ ػ ػ ػ ػػع ‪ -‬الجمعيػ ػ ػ ػ ػ ػػة العمميػ ػ ػ ػ ػ ػػة‬
‫سوريا‪.‬‬ ‫الس ػ ػػورية لممعموماتي ػ ػػة ‪ -‬دمش ػ ػػؽ‬
‫‪.ٕٓٓٚ‬‬
‫مس ػ ػ ػػابقة المعموماتي ػ ػ ػػة المركزي ػ ػ ػػة‬ ‫‪‬‬

‫الحاديػػة عش ػرة ‪ -‬جامعػػة البعػػث‬

‫– حمص ‪.ٕٓٓٚ‬‬

‫‪ٜٔٚ‬‬
 ‫مس ػ ػ ػػابقة المعموماتي ػ ػ ػػة المركزي ػ ػ ػػة‬ ‫‪‬‬

‫الثامنػػة– جامعػػة تش ػريف ‪-‬‬

‫الالذقية ٕ٘ٓٓ‪.‬‬ ‫ّ‬
‫الممتق ػ ػ ػ ػػى الخ ػ ػ ػ ػػامس لإلب ػ ػ ػ ػػداع و‬ ‫‪‬‬

‫البرمجي ػػات) –‬
‫ّ‬ ‫اّلختػ ػراع (ورش ػػة‬
‫حماة ٕ٘ٓٓ‪.‬‬
‫الممتقػ ػ ػ ػ ػ ػ ػ ػػى العربػ ػ ػ ػ ػ ػ ػ ػػي الثالػ ػ ػ ػ ػ ػ ػ ػػث‬ ‫‪‬‬

‫لممبػ ػ ػ ػ ػػرمجيف الشػ ػ ػ ػ ػػباب (ورشػ ػ ػ ػ ػػة‬

‫البرمجيػ ػػات) – حمػ ػػب ٕٗٓٓ –‬
‫المركز الثالث عف مشػروع نظػاـ‬
‫مكاتب الحواّلت الصوتي ٕ‪.‬‬
‫المعموماتي ػ ػ ػػة الس ػ ػ ػػوري‬
‫ّ‬ ‫أولمبي ػ ػ ػػاد‬ ‫‪‬‬

‫األوؿ – الجمعي ػ ػ ػ ػ ػ ػ ػ ػػة العممي ػ ػ ػ ػ ػ ػ ػ ػػة‬ ‫ّ‬

‫الس ػ ػػورية لممعموماتي ػ ػػة ‪ -‬دمش ػ ػػؽ‬
‫ٕٗٓٓ – الميدالية الفضّية‪.‬‬

‫العنواف الحالي ‪ :‬سوريا ‪ -‬دمشؽ‬ ‫‪‬‬ ‫العناوين‬

‫بريد إلكتروني ‪mokhtar_ss@hotmail.com :‬‬ ‫‪‬‬

‫ٓ‪ٔٛ‬‬