1

‫دورة تصميم المواقع‬

‫اعداد‬
‫م‪/‬مـهـــنـــد مـــحـــمـــود جــابــر‬

‫‪2‬‬
 ‫المقدمة‬
‫قد تعرف عزيزي القارئ ان تصميم المواقع اصبح اليوم من افضل االعمال في العالم‬
‫على المستوى الشخصي او الحكومي او الدولي فهو يعتبر مصدر دخل جيد بالنسبة‬
‫للكثير من العاملين في هذا المجال وايضا ال يخفى على الجميع ان المواقع‬
‫اإللكترونية اصبحت بحد ذاتها منصات تستطيع ان تكَ ون شركات قائمة بدون مباني وال‬
‫سقوف وقد تتساءل عن ماهية المصمم وبماذا يمكننا ان ُنعرفه ؟ بشكل مختصر جدا‬
‫نستطيع ان نعرف المصمم على انه الشخص الذي يهتم بمظهر الموقع الخارجي‬
‫وكيف يتفاعل الزوار معه ويعمل على تحسين تجربتهم وايضا يجب ان يكون المصمم‬
‫ذو نظره واسعه في مجال االلوان والتخطيط وترتيب العناصر المهمة في الموقع‬
‫ويتعرف على كيفية تفاعل المستخدمين مع الموقع وتسهيل عمل الموقع بالنسبة‬
‫سهال‬
‫ً‬ ‫للزوار وقد تجد مطورين المواقع يعملون بشكل مجموعات لكي يصبح العمل‬
‫وذو جودة عالية وقد تالحظ ايضاً ان المطور يعمل على تحويل الموقع من كونه‬
‫تصميم جامد الى موقع متفاعل وذلك ما يسمى بـ ‪ Front-End‬ويستخدم مجموعة‬
‫من اللغات المختلفة سواء كانت برمجية او هيكلية لتنفذ ذلك اﻷمر مثل ‪HTML , CSS ,‬‬
‫‪ JavaScript‬باإلضافة الى مجموعة واسعة من المكاتب االخرى ونحن االن في هذا‬
‫الكتاب سوف نعمل على شرح لهذه المواضيع وقد صممنا هذا الكتاب ليكون‬
‫متوافق مع الدورة المقدمة وايضاً امتداد لكل ما تم شرحه في قناتي على اليوتيوب‬
‫بأسم (‪ )Muhannad Mahamooad‬ويمكن ان يكون الشرح اكثر تفصيل من الكتاب‬
‫لهذا يجدر بي ان أنوه ان الكتاب هو مصدر مراجعة اكثر من كونه مصدر متكامل ‪..‬‬
‫واالن اترككم مع الكتاب واتمنى ان يكون عند حسن …‬

‫‪3‬‬
 ‫الفصل االول < ‪> HTML‬‬
‫ما هي لغة ‪HTML‬‬
‫مفهـــوم – لغـــة ‪ HTML‬اتش تي ام ال‪ ،‬هي لغـــة النصـــوص التشـــعبية وتكتب باإلنجليزيـــة‬
‫‪ Hypertext markup language‬أو كمــا تعــرف بـ ‪ ، HTML‬هي اللغــة الــتي تســتخدم في‬
‫انشاء و تصـميم صـفحات و مواقـع الـويب و تعتـبر الهيكـل الرئيسـي ألي صـفحة أو موقـع علي‬
‫الويب‪.‬‬

‫ال تعتــبر لغــة الـ ‪ HTML‬لغــة برمجــة و لكنهــا تســتخدم في اعطــاء األوامــر لمتصــفح االنــترنت‬
‫وترشـده فيهـا الي طريقـة عـرض الصـور والروابـط والنصـوص واألشـياء األخـري الـتي تحتويهـا‬
‫الصــفحة و أمــاكن عــرض كــل منهــا داخــل الصــفحة‪ ،‬كمــا تقــوم بإمــداد المتصــفح بالمعلومــات‬
‫الخاصة بالصفحة مثل عنوان الصفحة و وصفها و الكلمات الداللية الخاصة بها ‪.‬‬

‫هيكل لغة ‪HTML‬‬

‫تتكون لغة ‪ HTML‬من مجموعة من (‪ )Tags‬او (وسوم) حيث تمثل هيكل بناء الصفحة وتكون‬
‫هذه الوسوم معدة مسبقا او انت من يقوم بصنعها لكي يتم استخدامها ولكل وسم منها‬
‫مجموعة من الخصائص التي تختلف باختالف االستخدام ولكي نتعرف على هيكل الصفحة‬
‫بشكل بسيط قبل ان نتطرق الى الوسوم بشكل مفصل‬
‫نلقي نظره على الشكل رقم (‪)1‬‬

‫الشكل رقم (‪)1‬‬

‫‪4‬‬
 ‫في الشكل اعاله يبين السطر االول تعريف لنوع الصفحة التي سوف نقوم بكتابتها وهي‬
‫اختصار لكلمة (‪ )Document Type‬المسبوقة بعالمة التعجب (!)‬

‫مالحظة ‪ :‬قد تالحظ صديقي ان كل وسم يبدا وينتهي بعالمتين " < > " وتشبه عالمتي‬
‫االكبر واالصغر في الرياضيات وهي تقوم بتنبيه المحرر ان ما بينهم يعتبر وسم قد يكون له‬
‫خصائص معينة وتختلف الوسوم بينها فبعضه يحتاج الى وسم اغالق او ما يسمى بـ(‪Close‬‬
‫‪ )Tag‬كما مبين في نهاية وسم البداية ويكون بعد المحتوى ‪ ,‬وقد تالحظ انه ال يختلف عن‬
‫وسوم البداية اال بعالمة ( ‪ ) /‬حيث تمثل نهاية الوسم‪.‬‬
‫يمكن ان نمثل هيكل صفحة الـ ‪ HTML‬كجسم االنسان فهي تحتوي على وسم<‪>head‬‬
‫ويمثل رأس وعقل الصفحة ويحمل عنوان الصفحة وايضا جميع روابط الصفحات المرتبطة‬
‫وغيرها من االمور سوف يمر ذكرها الحقا ‪ ..‬وايضا وسم <‪ >body‬حيث يمثل جسم الصفحة‬
‫ويحتوي على كل العناصر التي سوف يتم عرضها في داخل صفحتك على المتصفح ‪.‬‬

‫ما هي السمات (‪)Attributes‬‬

‫وهو كل عنصر يكون متضمنا داخل العنصر الرئيسي ويكتب بعد اسم الوسم وبين عالمتي < >‬
‫وتحتوي جميع عناصر ‪ HTML‬على سمات و توفر السمات معلومات إضافية حول عنصر بحيث‬
‫يكون تحديد العنصر اكثر دقة ويكتب كما في الشكل رقم (‪)2‬‬

‫الشكل رقم (‪)2‬‬

‫التعليقات في ‪HTML‬‬
‫تستخدم التعليقات في اكثر اللغات سواء كانت برمجية او غيرها حيث تعمل على انشاء عنصر‬
‫غير مقروء لتوضح امر معين يريد المطور ان يوضحه لمن يأتي بعده لتسهيل امر التعديالت‬
‫وغيرها ويمكن ان تكتب كما في الشكل رقم (‪)3‬‬

‫‪5‬‬
 ‫الشكل رقم (‪)3‬‬

‫عناصر رأس الصفحة‬

‫وسم <‪ >head‬وما في داخله‬

‫سبق وذكرنا ان وسم <‪ >head‬يمثل رأس وعقل الصفحة حيث يحمل كل العناصر التي تأثر‬
‫على الصفحة وارتباطاتها وسوف نتحدث في هذا الفصل عن تفاصيل هذا االمر‬

‫وسم <‪>title‬‬
‫يستخدم في التعبير عن عنوان الصفحة ويظهر في رأس الصفحة‬

‫وسم <‪>link‬‬
‫ويستخدم الستدعاء رابط معين او ملف كاستدعاء ملف ‪ CSS‬او رابط مكتبة مثل مكتبة‬
‫الخطوط (‪ )Font Awesome‬وقد تالحظ في الشكل رقم (‪ )4‬ان الوسم يحتوي على‬
‫مجموعة من ‪ Attributes‬مثل ‪ – rel -‬ويعمل على تعيين نوع الملف المستدعى و ‪href -‬‬
‫– ويوضع في داخله مسار الملف المراد استدعائه‪.‬‬

‫وسم <‪>style‬‬
‫هذا الوسم ال يشترط ان يكتب داخل وسم <‪ >head‬لكن جرت العادة والمتعارف على ذلك‬
‫عند مبرمجي المواقع أن يكتب داخل وسم <‪ >head‬لكن وجب التنويه اننا نستطيع ان نكتبه‬
‫حتى داخل وسم <‪ >body‬اذاً ما فائدة هذا الوسم ؟ بكل اختصار هذا الوسم يحمل تنسيقات‬
‫الموقع من حيث االلوان ويحمل كل عناصر لغة ‪CSS‬‬

‫وسم <‪>meta‬‬
‫هذا الوسم يحمل الكثير من الخصائص والتي سوف نأخذ جزئ بسيط منها كما في الشكل‬
‫رقم (‪ )4‬يبين ‪ -‬النوع االول ‪ -‬منها وهو الذي يحمل سمة ‪ charset‬حيث يقوم بتعيين نوع‬
‫الترميز الذي سوف تعمل عليه الصفحة وينصح وضع ترميز (‪ )UTF-8‬فهو يقوم بتعريف جميع‬
‫اللغات تقريباً منها العربية – النوع الثاني – وهو الذي يحمل سمة ‪ name‬التي يسند لها‬

‫‪6‬‬
‫‪ description‬وتعمل على تعين نوع الوصف لموقعك في محركات البحث الذي يظهر اسفل‬
‫عنوان الموقع ويكتب الوصف داخل سمة ‪ content‬كما مبين في الشكل رقم (‪.)4‬‬

‫شكل رقم (‪)4‬‬

‫عناصر ‪Headings‬‬
‫وتتكون من مجموعة من العناصر التي تتعامل مع النصوص منها‬

‫وسم <‪>h1> - <h6‬‬

‫وتستخدم هذه العناصر مع العناوين مثل عناوين المواضيع او الصفحات وتبدا من رقم ‪1‬‬
‫وتنتهي برقم ‪ 6‬وتكتب كما موضح في الشكل رقم (‪ )5‬ويكون لكل منها حجم خاص مثل ‪:‬‬
‫‪h1 = 24px , h2 = 22px , h3 18px , h4 = 16px , h5 = 12px , h6 = 10px‬‬

‫‪-‬وسم <‪>p‬‬

‫ويحمل نص معين يكون وصف للعنوان‬

‫‪-‬وسم <‪>br‬‬

‫ويعمل على انشاء سطر جديد‬

‫‪-‬وسم < ‪>hr‬‬

‫‪7‬‬
 ‫ويعمل على انشاء خط افقي في الصفحة‬

‫‪-‬وسم <‪ >strong‬و وسم <‪>b‬‬

‫وتعمل على جعل النص عريض وبارز‬

‫‪-‬وسم <‪ >i‬و وسم <‪>em‬‬

‫وتعمل على جعل النص مائل‬

‫وجميعها تكتب كما في الشكل اآلتي ‪:‬‬

‫الشكل رقم (‪)5‬‬

‫عناصر اخرى في النصوص‬

‫وهو االس او القوة الموجود في الرياضيات‬ ‫‪sup‬‬
‫وهو الذي يكون اسفل الحرف او الرقم مثل‬ ‫‪sub‬‬
‫الرموز الكيميائية‬
‫اقتباس فقرة نصية‬ ‫‪blockquote‬‬
‫تبين ان النص هو عنوان معين‬ ‫‪address‬‬
‫شطب الكلمة‬ ‫‪del‬‬
‫وتعمل على قلب النص وتاخذ سمة ‪ dir‬التي‬ ‫‪bdo‬‬
‫تكون اما ‪ rtl‬او ‪ltr‬‬
‫نص تحته خط – نص مهم‬ ‫‪ins‬‬

‫‪8‬‬
 ‫عنصر الصور <‪>img‬‬
‫يعمل هذا العنصر على عرض الصور التي تسند اليه ويقوم بعرضها في الصفحة عندما تكون‬
‫موجوده ويكتب كما موضح في الشكل (‪ )6‬حيث نالحظ انه يحمل سمه جديدة بالنسبة لنا اال‬
‫وهو ‪ src‬حيث تأخذ هذه السمه مسار الصورة المراد عرضها كما هو موضح في الشكل رقم‬
‫(‪ )6‬وايضا نشاهد ان العنصر يأخذ وسم يسمى ‪ alt‬وهو‬

‫خاصية جميلة جدا تقوم بعرض نص عندما تكون الصورة غير موجوده او هناك خطأ في‬
‫المسار ويتم اسناد النص اليها بين عالمتي االقتباس‪.‬‬

‫مالحظة ‪ :‬ايضا يمكن ان ياخذ العنصر سمتي ‪ width‬و ‪ height‬حيث يعمالن على تحجيم‬
‫الصورة ويسند لهما الحجم رقما لكن ال ينصح بذلك ويتم تعديل االحجام من خالل عناصر ‪CSS‬‬

‫الشكل رقم (‪)6‬‬

‫وسم الروابط <‪>a‬‬

‫يعمل هذا الوسم على ادراج رابط على نص معين ويبين الشكل رقم ‪ ))7‬ان سمة ‪ href‬يتم‬
‫ادراج الرابط من خاللها وايضا سمة ‪ target‬التي تحدد ان كان سوف ينتقل الى صفحة‬
‫جديدة فنضع ‪ _blank‬وان كنت تريد ان يقوم بفتحه في نفس الصفحة نقوم بكتابة ‪_self‬‬
‫كما موضح في الشكل رقم (‪)7‬‬

‫شكل رقم (‪)7‬‬

‫عناصر القوائم <‪ >ul‬و <‪>li‬‬

‫تعمل عناصر القوائم على تصميم قائمة منسدله فيعمل عنصر <‪ >ul‬على تصميم قائمة غير‬
‫مرتبة لكي تحتوي عنصر <‪ >li‬الذي يحمل عناصر القائمة وتكتب كما في الشكل رقم (‪)8‬‬
‫حيث يمكن ان نستخدم اكثر من <‪ >li‬داخل <‪ >ul‬الواحدة‬

‫‪9‬‬
 ‫الشكل رقم (‪)8‬‬

‫عناصر القوائم <‪ >ol‬و <‪>li‬‬

‫وسم <‪ >ol‬يعتبر من القوائم المرتبة بحيث تكون مرتبه بشكل رقمي او حرفي ويمكن تغير‬
‫شكل الترقيم من خالل استخدام (‪ )A , a , 1 , I , i‬كما يبين الشكل رقم (‪)9‬‬

‫الشكل رقم (‪)9‬‬

‫عناصر التنسيق‬

‫عنصر <‪>div‬‬
‫ويعمل كحاوية للعناصر حيث يتم تنسيق العناصر من خالله كما يبين الشكل رقم (‪)10‬‬

‫عنصر <‪>span‬‬

‫‪10‬‬
‫يعمل عمل عنصر <‪ >div‬ولكن بشكل مصغر ويكتب ايضا مثل ما يكتب وسم <‪ >div‬وعادة ما‬
‫يكون داخل وسم <‪>div‬‬

‫الشكل رقم (‪)10‬‬

‫عناصر الجداول ‪Table‬‬

‫وكما مبين في الشكل رقم (‪ )11‬تكون عناصر الجداول من عدة عناصر ومنها‬

‫الوسم االولي لبداية الجدول ونهايتها ويأخذ‬ ‫عنصر <‪>table‬‬

‫سمة لتحديد – اطار – الجدول هي ‪border‬‬
‫ويمثل عنوان الجدول ويتوسط الجدول من‬ ‫عنصر <‪>caption‬‬
‫االعلى وخارج الجدول‬
‫ويمثل عناصر رائس الجدول‬ ‫عنصر <‪>thead‬‬
‫ويمثل عنصر صندوق المحتوى لعناصر‬ ‫عنصر <‪>tr‬‬
‫الجدول‬
‫ويمثل محتوى المصفوفة‬ ‫عنصر <‪>td‬‬
‫ويمثل عنوان المصفوفة في الجدول‬ ‫عنصر <‪>th‬‬
‫ويمثل عناصر جسم الجدول ككل قد تكون من‬ ‫عنصر <‪>tbody‬‬
‫قائمة واحدة او اكثر بكثير‬
‫ويمثل عناصر ذيل الصفحة‬ ‫عنصر <‪>tfoot‬‬

‫عنصر <‪ >th‬و <‪ >td‬يأخذ سمتين ‪:‬‬

‫‪ : rowspan‬وتعمل على اخذ مساحة للعنصر بمقدار العدد المسند بشكل عمودي اليها‬
‫‪ : colspan‬وتأخذ مساحة بمقدار العدد المسند اليها بشكل افقي‬

‫‪11‬‬
 ‫الشكل رقم (‪)11‬‬

‫عنصر <‪>iframe‬‬
‫يعمل هذا العنصر على جلب صفحة او صورة وغيرها لعرضها داخل صفحتك من دون االنتقال‬
‫الى الصفحة او االنتقال الى صفحة جديدة وكما مبين في الشكل رقم (‪ )12‬اننا يمكن لنا ان‬
‫نعدل على حجم العناصر من خالل استخدام ‪width – height‬‬

‫الشكل رقم (‪)12‬‬

‫‪12‬‬
 ‫عناصر النوافذ (النماذج) ‪Form‬‬
‫تعتبر عناصر النوافذ من اهم العناصر واكثرها استخدام بسبب كونها تعمل على جعل الموقع‬
‫اكثر تفاعل من خالل عمليات االدخال وغيرها وسوف نتطرق في هذا الفصل الى مجموعة‬
‫من عناصر النوافذ مع تبيين عملها وطريقة كتابتها بشكل مفصل ولكن يجدر الذكر ان هذا‬
‫العناصر ال تعمل بشكل حقيقي وكامل اذا كانت خارج وسم <‪ >form‬فكل العناصر التي‬
‫سوف نقوم بذكرها في هذا الفصل يجب ان تكتب داخل هذا الوسم‬

‫عنصر <‪>form‬‬
‫يعمل كحاوية للعناصر التابعة الى عناصر النوافذ ويأخذ مجموعة من السمات سوف يتم‬
‫شرحها الحقاً ويكتب كما في الشكل رقم (‪)13‬‬

‫عنصر <‪>label‬‬
‫وهو عبارة عن ملصق او عالمة نصية يتم ادرجها قبل او بعد العناصر لتكون عنصر توضيح‬
‫ويكتب كما في الشكل رقم (‪)13‬‬

‫عنصر <‪>textarea‬‬
‫وهية حاوية نصية تتيح لك كتابة عبارة نصية بعدد كبير من االسطر ويمكن لنا تغير عدد‬
‫االسطر واالعمدة الظاهرة من خالل استخدام ‪ rows‬تعمل على تغير عدد الصفوف العمودية‬
‫و ‪ cols‬تعمل على تغيير عدد الصفوف االفقية كما ان ‪ readonly‬تجعل الحاوية النصية‬
‫للقرائة فقط ويمكن لنا ان نكتب اي نص بين وسمي <‪ >textarea‬وتكتب كما في الشكل‬
‫رقم (‪)13‬‬

‫الشكل رقم (‪)13‬‬

‫عنصر <‪>select‬‬

‫‪13‬‬
‫يقوم عنصر <‪ >select‬بانشاء قائمة منسدلة يمكن ان تاخذ قيم معينة يمكن ان يتم التعامل‬
‫معها على شكل قيم مرسلة الى قاعدة البينات او المبرمج للتفاعل مع كل اختيار لوحده‬
‫وتكتب كما في الشكل (‪)14‬‬

‫تعمل على انشاء قائمة منسدلة‬ ‫عنصر <‪>select‬‬

‫تعمل على انشاء عناصر القائمة المنسدلة‬ ‫سمة <‪>option‬‬
‫تعمل على تحديد مجموعة من العناصر داخل‬ ‫عنصر <‪>optgroup‬‬
‫القائمة المنسدلة‬
‫تعمل على تجميد القائمة او العنصر من‬ ‫سمة ‪disabled‬‬
‫االستخدام‬
‫تحدد عدد العناصر الظاهرة من القائمة‬ ‫سمة ‪size‬‬
‫تمكين اختيار اكثر من عنصر في نفس الوقت‬ ‫سمة ‪multiple‬‬
‫اعطاء عنوان للمجموعة‬ ‫سمة ‪label‬‬
‫القيمة المرسلة‬ ‫سمة ‪vaule‬‬
‫اختيار العنصر بشكل افتراضي عند تحميل‬ ‫سمة ‪selected‬‬
‫الصفحة‬

‫الشكل رقم (‪)14‬‬

‫عناصر االدخال <‪>input‬‬

‫‪14‬‬
 ‫وهو من العناصر التي ليس لها وسم اغالق وياخذ مجموعة متنوعة ومختلفة من سمات‬
‫ادخال القيم و يكتب بشكل واحد وكما يظهر بالشكل رقم (‪)15‬‬

‫العمل‬ ‫النوع (‪)type‬‬

‫انشاء حقل ادخال نص عادي‬ ‫‪text‬‬
‫انشاء حقل ادخال رمز سري‬ ‫‪password‬‬
‫انشاء مربع حقل اختيار‬ ‫‪checkbox‬‬
‫انشاء زر ارسال قيمة‬ ‫‪submit‬‬
‫زر ضغط لتنفيذ امر مسند له برمجياً‬ ‫‪button‬‬
‫حذف معلومات المدخله واعادة تصفير‬ ‫‪reset‬‬
‫الحقول‬
‫رفع ملف من داخل الجهاز‬ ‫‪file‬‬
‫اراج صورة يمكن الضغط عليها كـ زر السباب‬ ‫‪image‬‬
‫عدة منها اخذ البيانات وايضا يجب ان تسند‬
‫لها صورة عن طريق سمة ‪src‬‬
‫عنصر اختيار او تحديد احد الخيرات المسندة‬ ‫‪Radio‬‬
‫اليها‬
‫مالحظة ‪ :‬لكي نجعل االختيار يقع على خيار‬
‫واحد يجب ان نقوم بجعل اسم (‪)name‬‬
‫نفس االسم‬
‫وتعمل على أخفاء العنصر مع بقاء تأثيره‬ ‫‪hidden‬‬
‫وعمله المسند له‬

‫الشكل رقم (‪)15‬‬

‫سمات االستدعاء‬

‫‪15‬‬
 ‫يمكن ان نتطرق في هذا الفصل الى مجموعة طرق من االستدعاء العناصر والفائدة من‬
‫االستدعاء هو عملية ربط العنصر بملفات اخرى يمكن التحكم بالعنصر من خاللها مثل التحكم‬
‫بعناصر ‪ HTML‬من داخل ملف ‪ CSS‬او التحكم بعناصر ‪ HTML‬من حالل ملف ‪JS‬‬

‫سمة ‪class‬‬
‫نقوم بستخدام هذه السمة من اجل العمل على استدعاء عنصر والتحكم فيه داخل ملف ‪JS‬‬
‫او ‪ CSS‬ويتم اسناد اليه اسم معين ومختلف عن اي اسم ‪ class‬اخر ويكتب كما في الشكل‬
‫رقم (‪ )16‬يتعارف استخدامه مع ملفات ‪ CSS‬بكثرة ولكن يجب التنويه الى انه عند استدعاء‬
‫العنصر يجب ان نسبق اسم العنصر بـنقطة‬

‫الشكل رقم (‪)16‬‬

‫سمة ‪id‬‬
‫ويعمل عمل ‪ class‬بشكل شبه كامل لكن تعارف عليه ان يستخدم مع ملفات ‪ JS‬ويكتب كما‬
‫في الشكل رقم (‪ )17‬وايضا يمكن ان يتسخدم اداة انتقال بين اقسام الموقع‬

‫وسوف يتم شرحة بشكل مفصل ولكن يجب التنويه الى انه عند استدعاء العنصر يجب ان‬
‫نسبق اسم العنصر بـ‪#‬‬

‫الشكل رقم (‪)17‬‬

‫‪16‬‬
 ‫الفصل الثاني <‪>HTML5‬‬
‫ما هي ال ‪html5‬؟‬

‫جدد لل ‪html‬‬
‫معيار ٌ‬
‫‪ Html5‬عبارة عن ٌ‬
‫الكبر الذي حصل على شبكة االنترنت‪ ,‬ومع انها حتى هذه‬
‫ٌ‬ ‫والسبب ًفي ظهورها هو التطور‬
‫اللحظة ‪-‬لحظة كتابة هذا الشرح البسيط‪ -‬تم العمل لتطورها الى أن الكثٌ ر من الخصائص تم‬
‫اضافتها للمتصفحات الرئيسية‪ ,‬ولكن ال يوجد متصفح قد دعم جميع هذه الخصائص بشكل‬
‫كامل حتى االن‪.‬‬

‫خصائص يجب ان نعلمها عن ‪html5‬‬

‫‪ html5‬تعتمد على ‪html, JavaScript, css .‬‬ ‫‪‬‬

‫ال ‪ html5‬قامت بتقليل الحاجة الى اإلضافات الخارجية (‪ ) in-plug‬مثل الفالش‪...‬‬ ‫‪‬‬

‫ال ‪ html5‬أفضل ًفي معالجة االخطاء‪.‬‬ ‫‪‬‬

‫جددة‪ ,‬تقوم بنفس العمل‪.‬‬

‫طريق اضافة ‪ٌ tag‬‬
‫ال ‪ html5‬تقلل من بعض االوامر عن ٌ‬ ‫‪‬‬

‫تمكنك من انشاء وسوم خاصة بك وتنسيقها من خالل ‪CSS‬‬ ‫‪‬‬

‫مالحظة ‪ :‬في البداية يجب ان نوضح ان هناك مجموعة من الوسوم التي تم االستغناء عنها‬
‫في هذا االصدار واستخدام مجموعة من الوسوم الخاصة في ‪ CSS‬ومنها (وسوم محاذات‬
‫النصوص ‪ ,‬وسوم التكبير والتصغير) ويفضل استخدام الــ ‪CSS‬‬

‫مثال ‪ , big , center :‬مجموعة من الخطوط ‪ ,‬واللستات المرتبة وغيرها …‬

‫فكل شيء سوف يتم شرحه هنا هي الوسوم الحديثة المدعومة بشكل شبه مؤكد‬

‫مالحظة يمكن معرفة الوسوم المدعومة والمحذوفة من خالل الرابط التالي‬

‫(‪)https://developer.mozilla.org/ar/docs/web/html/element‬‬

‫‪17‬‬
 ‫تقسيم صفحة ‪HTML5‬‬

‫ظهر في هذا االصدار الية تقسيم الصفحة الى اقسام حسب االجزاء لتسهيل العمل عليها‬
‫وكما في الجدول التالي وتكتب كما في الشكل رقم (‪: )18‬‬

‫ويعمل على اخذ تقسيم بداية الصفحة اي‬ ‫وسم <‪>header‬‬

‫رأس الصفحة‬
‫ويعمل على تقسيم الذي ياخذ شريط‬ ‫وسم <‪>nav‬‬
‫االقسام‬
‫ويعمل على تقسيم محتوى الصفحة الداخلي‬ ‫وسم <‪>article‬‬
‫اي وسط الصفحة‬
‫وتكون في داخل وسم <‪ >article‬وتعمل‬ ‫وسم <‪>section‬‬
‫على تخصيص قسم داخل وسم <‪>article‬‬
‫اي جزء منه‬
‫ويعمل على اخذ تقسيم نهاية الصفحة اي‬ ‫وسم <‪>footer‬‬
‫ذيل الصفحة‬
‫يعمل على الجزء االساسي من الصفحة اي‬ ‫وسم <‪>main‬‬
‫موضوع الصفحة ويكتب مره واحدة اي ال‬
‫يكرر في الصفحة‬
‫هي الجزء العمودي الموضوع على جاني‬ ‫وسم <‪>aside‬‬
‫الصفحة بصورة عمودية غالباً وتعمل على‬
‫احتواء مجموعة عناصر‬

‫الشكل رقم (‪)18‬‬

‫‪18‬‬
 ‫عناصر التحميل او العدادات‬

‫ضهر في هذا االصدار مجموعة من الوسوم التي تعمل على تشيكل عدادات تعمل على‬
‫تحديد نسبة التقدم او التحميل وغيرها وسوف نعمل على شرحا في التفصيل في الجدول‬
‫التالي وتكتب كما في الشكل رقم (‪: )19‬‬

‫ويستخدم كشريط يضهر التقدم او التحميل‬ ‫وسم <‪>progress‬‬

‫ويحتوي اهم سمتين ‪:‬‬
‫‪ = value ‬تاخذ رقم وهي نسبة‬
‫التحميل من اصل التحميل‬
‫‪ = max ‬هي النسبة التي تحدد كنسبة‬
‫نهائية للتحميل‬

‫‪-‬بصورة اوضح نسبة ‪ value‬من ‪ max‬هي‬

‫‪ %50‬اي نسبة التحميل وصلة الى النصف‬
‫شريط عداد يوضح المتسوى المستنفذ اي‬ ‫وسم <‪>meter‬‬
‫هو شرط استهالك او قيمة لشيء ما وياخذ‬
‫عدد من السمات منها ‪:‬‬
‫‪ = min ‬وتعني اقل قيمة ممكنة اي ‪-‬‬
‫من‪ -‬وتاخذ قيمة عددية‬
‫‪ = max ‬وتعني اكبر قيمة ممكنة اي ‪-‬‬
‫الى‪ -‬وتاخذ قيمة عددية‬
‫‪ = value ‬تاخذ رقم وهي نسبة‬
‫التحميل من اصل التحميل‬
‫‪ = low ‬اقل نسبة " سيئه " وتاخذ‬
‫قيمة عشرية بين ‪ 0‬و ‪1‬‬
‫‪ = high ‬اقل نسبة "لالفضل" وتاخذ‬
‫قيمة عشرية بين ‪ 0‬و ‪1‬‬
‫‪ = optimum ‬الوضع االمثل وتاخذ‬
‫قيمة عددية‬

‫وتعني التفاصيل المخفية والقابلة لالظهار‬ ‫وسم <‪>details‬‬

‫من خالل الضغط على كلمة "تفاصيل" يمكن‬
‫استخدام جميع انواع العناصر في داخلها‬

‫‪19‬‬
 ‫الشكل رقم (‪)19‬‬

‫عناصر اخرى‬

‫وتكتب كما في الشكل رقم (‪)20‬‬

‫وتعني عالمه اي تقوم بالتحديد على كلمة‬ ‫وسم <‪>mark‬‬

‫معينة‬
‫وتعمل كعمل وسم <‪ >br‬ولكن تستخدم مع‬ ‫وسم <‪>wbr‬‬
‫الروابط الطويلة‬
‫بمعنى شكل وهو عباره عن صندوق او شكل‬ ‫وسم <‪>figure‬‬
‫يوضع في داخله عناصر عرض قيم غير‬
‫رئيسية في الصفحة اي يمكن وضعها في‬
‫داخل سطر برمجي او صورة والخ‪..‬‬
‫وهو عنصر نصي يكون شرح للعنصر‬ ‫وسم <‪>figcaption‬‬
‫<‪ >figure‬يوضع اسفله او اعاله‬
‫ويعمل على عزل اتجاه العنصر ويستخدم في‬ ‫وسم <‪>bdi‬‬
‫العناصر التي فيها لغات معكوسة االتجاه‬
‫مثل تداخل العربية مع االنكليزية‬

‫‪20‬‬
 ‫الشكل رقم (‪)20‬‬

‫عناصر النوافذ (‪)Form‬‬

‫في ‪ HTML5‬تم اضافة مجموعة من النوافذ المختلفه في هذا االصدار والمعتمده بكثرة‬
‫لذالك سوف يتم شرح كل واحدة بالتفصيل‬

‫الوسم <‪>datalist‬‬

‫وهي قائمة منسدلة تحتوي على بيانات وتتيح الكتابة في صندوق نصي ومطابقتها مع‬
‫البيانات المحفوظة في عنصر <‪ >option‬او االختيار من القائمة المنسدلة ‪.‬‬

‫يجب ان يكون اسم ‪ id‬شبيه باسم الموضوع في ‪ list‬الخاصة في عنصر االدخال وتكتب كما‬
‫في الشكل رقم (‪)21‬‬

‫‪21‬‬
 ‫الشكل رقم (‪)21‬‬

‫عنصر <‪>audio‬‬

‫يعمل على عرض ملف صوتي ويكتب كما في الشكل رقم (‪)22‬‬

‫يعمل على جعل العنصر ظاهر على الشاشة‬ ‫سمة ‪controls‬‬

‫سوف يعمل الصوت بشكل تلقائي بعد‬ ‫سمة ‪autoplay‬‬

‫تحميل الصفحة مباشرتاً‪.‬‬

‫يعمل على اعادة تشغيل الملف بعد‬ ‫سمة ‪loop‬‬

‫االنتهاء وعدم توقفه‪.‬‬

‫عند ادراجه سوف يقوم بكتم الصوت‬ ‫سمة ‪muted‬‬

‫هذا العنصر يعمل على تشغيل العنصر قبل‬ ‫سمة ‪preload‬‬

‫التحميل وياخذ عدة قيم‬

‫‪ = auto‬تحميل الملف مع الصفحة‬ ‫‪‬‬

‫‪ = none‬الوضع االفتراضي اي عدم‬ ‫‪‬‬

‫التحميل مع تحميل الصفحة والتحميل‬
‫عند الطلب‬

‫‪22‬‬
‫‪ = metadata‬تحميل معلومات الملف‬ ‫‪‬‬
‫فقط عند تحميل الصفحة‬

‫هي التي يوضع بها المسار الخاص بالملف‪.‬‬ ‫سمة ‪src‬‬

‫الشكل رقم (‪)22‬‬

‫عنصر <‪>video‬‬

‫وتعمل على عرض ملف فيديو "مرئي" وتاخذ نفس القيم في الملف الصوتي بالضبط مع‬
‫اضافة بعض السمات وتكتب كما في الشكل رقم (‪ )23‬مثل‬

‫تحديد حجم الفديو طول و عرض‬ ‫سمة ‪width , height‬‬

‫لوضع صورة داللية قبل التشغيل‬ ‫سمة ‪poster‬‬

‫عنصر <‪>track‬‬

‫ويستخدم لعرض ترجمة الفيديو وتكتب كما في الشكل رقم (‪ )23‬ويأخذ سمات مثل‬

‫هي التي يوضع بها المسار الخاص بملف‬ ‫سمة ‪src‬‬

‫الترجمة‪.‬‬

‫تأخذ نوع ملف الترجمة‬ ‫سمة ‪kind‬‬

‫تأخذ هامش الترجمة او صيغته‬ ‫سمة ‪srclang‬‬

‫اسم لغة الترجمة‬ ‫سمة ‪label‬‬

‫وتعني ان الترجمة المحددة هي االساسية‬ ‫سمة ‪default‬‬

‫‪23‬‬
 ‫عنصر <‪>Sourse‬‬

‫ويعمل على اضافة مصدر العنصر الخاص بالملف وياخذ سمة ‪ src‬التي يوضع بها المسار‬
‫الخاص بالملف و سمة ‪ type‬وياخذ صيغة الملف مع تغير الصيغة فقط وبقاء كلمة ‪audio‬‬
‫ويمكن وضع في داخلها رسالة تحذير او ما شابه ‪ ,‬وتكتب كما في الشكل رقم (‪)23‬‬

‫الشكل رقم (‪)23‬‬

‫عناصر االدخال <‪>input‬‬

‫عناصر االدخال الذي تم اضافتها في هذا االصدار ولها انواع كثيرة وكما قلنا انها ال تمتلك‬
‫وسم اغالق وتكتب كما في الشكل رقم (‪)24‬‬

‫العمل‬ ‫النوع (‪)type‬‬

‫خانة اختيار االلوان‬ ‫‪color‬‬
‫شريط افقي يمرر للمين واليسار يأخذ سمات‬ ‫‪range‬‬
‫‪ = min ‬اقل قيمة‬
‫‪ = max ‬اعلى قيمة‬
‫‪ = step ‬عدد قفزات االنتقال‬
‫حقل ادخال ارقام فقط وعداد رقمي يأخذ‬ ‫‪number‬‬
‫سمات‬
‫‪ = min ‬اقل قيمة‬
‫‪ = max ‬اعلى قيمة‬
‫‪ = step ‬عدد قفزات االنتقال‬
‫ادخال بريد الكتروني فقط‬ ‫‪email‬‬
‫حقل خانة البحث‬ ‫‪search‬‬

‫‪24‬‬
 ‫حقل ادخال التاريخ بالشهر والسنة‬ ‫‪month‬‬
‫تستخدم الدخال التاريخ بعدد االسابيع والسنة‬ ‫‪week‬‬
‫التاريخ بالسنه والشهر كتابتا‬ ‫‪date‬‬
‫ادخال يدوي للتاريخ والشهر والسنة بدون‬ ‫‪datetime‬‬
‫تحديد‬
‫ادخال يدوي للتاريخ والشهر والسنة رقماً‬ ‫‪datetime-local‬‬
‫ادخال رابط فقط‬ ‫‪url‬‬

‫الشكل رقم (‪)24‬‬

‫سمات ‪Form‬‬

‫وتكتب كما في الشكل رقم (‪)25‬‬

‫بمعنى ان هذا الحقل مطلوب‬ ‫‪Required‬‬

‫تعني الوقوف عند هذا العنصر مباشرتا بعد‬ ‫‪Autofocus‬‬
‫تحميل الصفحة‬
‫توضع في داخل وسم الـ‪ form‬وتعني رفع‬ ‫‪Novalidate‬‬
‫القيود داخل الحقول ‪ -‬مثال البريد االلكتروني‬
‫يمكن ان يكتب بدون عالمة @ بدون تقييد‬
‫وضع نص افتراضي بشكل شفاف داخل‬ ‫‪Placeholder‬‬
‫الحقل القابل للكتابة يختفي عند بدا الكتابة‬
‫ويدل على المطلوب في ادخل الصندوق‬
‫النصي‬
‫جعل العنصر يستقبل اكثر من ملف بمعنى‬ ‫‪Multiple‬‬
‫تحديد اكثر من ملف مره واحده مثل نوع ‪file‬‬

‫‪25‬‬
‫لتقيد االدخال كبيرة {‪ }A-Z‬او حروف صغيره {‬ ‫‪pattern‬‬
‫‪ }a-z‬وعدد الحروف المدخلة‬
‫لجعل الحقل للقرائة فقط‬ ‫‪readonly‬‬
‫تجميد الحقل اي ال يمكن استخدامه‬ ‫‪disabled‬‬

‫الشكل رقم (‪)25‬‬

‫‪26‬‬
 ‫الفصل الثالث <‪>CSS‬‬
‫مقدمة إلى ‪CSS‬‬

‫متطلبات تعلم المنهج ‪:‬‬

‫قب ــل الش ــروع في دراس ــة لغ ــة ‪ CSS‬يجب أن تك ــون ملم ــاً ببعض المفـــاهيم األساس ــية ح ــول‬
‫اإلنترنت و لغة ‪ HTML‬باإلضافة إلى أساسيات بناء صفحات الويب ‪.‬‬

‫ما هي ‪ CSS‬؟‬

‫‪ CSS‬هي اختصــار لـ ‪ Cascading Style Sheet‬و هي تعــني صــفحات األنمــاط االنســيابية ‪ ،‬و‬
‫تســـتخدم تقنيـــة ‪ CSS‬في تصـــميم صـــفحات الـــويب بحيث يتم من خاللهـــا التحكم في شـــكل‬
‫الموقع بالكامل من حيث نوع الخط المستخدم أو لونه أو حجمه و ذلك دون الحاجة لكتابة تلــك‬
‫األكواد أو تكرارها في كل صفحة داخل الموقع‪ ،‬و بالتالي فيمكن من خالل ملــف واحــد فقــط‬
‫إجراء أي تعديالت على كافة الملفات ممـا يـوفر الكثـير من الجهـد و الـوقت ‪ .‬و وظيفـة هــذه‬
‫التقنية هي التحكم بكيفيــة عــرض صــفحة الــويب دون التــدخل في المحتــوى‪ ،‬ممــا يســهل من‬
‫عمليــة إدارة الموقــع‪ ،‬فتعــديل ملــف ‪ CSS‬واحــد ســيؤثر على تصــميم كافــة صــفحات الموقــع ‪.‬‬
‫فملفــات ‪ CSS‬تعمــل على تبســيط عمليــة تصــميم و إدارة المواقــع‪ ،‬وتحــل الكثــير من المشــاكل‬
‫الــتي قــد يواجههــا أي مطــور للمواقــع‪ ،‬فعلى ســبيل المثــال إذا كنت قــد صــممت موقعــك‬
‫باستخدام لغــة الـ ‪ ، HTML‬و على فــرض أن هــذا الموقــع يتكــون من خمســة صــفحات‪ ،‬ثم أردت‬
‫بعــد فــترة تطــوير و تعــديل طريقــة عــرض هــذا الموقــع ‪ ...‬عليــك هنــا إعــادة تصــميم الصــفحات‬
‫الخمس من جديد ‪ ،‬هــذا أمــر سـهل جــداً و عليــك أن تبــدأ اآلن أمـا على فــرض أن موقعــك هــذا‬
‫يحتوي على عدد أكبر من الصفحات و ليكن ‪ 50‬أو ‪ 100‬صــفحة فمن المؤكــد أنــك ســوف تــتردد‬
‫قبل الشروع في التطوير و التعديل ‪ ...‬أما إذا كنت قد صممت موقعك منــذ البدايــة باســتخدام‬
‫تقنيــــــــــة ‪ ،CSS‬فكــــــــــل مــــــــــا عليــــــــــك هــــــــــو تعــــــــــديل ملــــــــــف واحــــــــــداً فقــــــــــط ‪.‬‬
‫فملفــات األنمــاط االنســيابية ‪ CSS‬تلغي الحاجــة إلى اســتخدام الكثــير من أوامــر ‪ ، HTML‬كــأمر‬
‫‪ FONT‬الــذي يحــدد نــوع الخــط أو حجمــه أو لونــه‪ ،‬كــذلك األمــر ‪ TABLE‬الــذي يســتخدم إلنشــاء‬
‫الجــداول ‪ ،‬و بمعــنى آخــر يســتطيع أي شـخص باسـتخدام ‪ CSS‬أن يصــمم موقعـه بالكامــل دون‬
‫استخدام الجداول كما هو متبع في الطــرق التقليديــة لتصــميم الصــفحات‪ ،‬و هــذا ال يعــني أن‬
‫الجــداول لن يتم اســتخدامها مــع ‪ ، CSS‬فالجــداول لهــا وظيفــة أخــرى وهي عــرض وتنســيق‬
‫البيانات التي تحتاج إلى أن تكون ضمن جدول ‪ .‬و قد قامت منظمة ‪ W3C‬بابتكار هذه التقنية‬
‫و جعلتها كمعيار قياسي لتصــميم المواقـع ‪ ،‬وقــد بـدأت الكثــير من المواقـع في االنتقـال من‬
‫األسلوب التقليدي للتصميم باستخدام الجداول إلى األسلوب الجديد باستخدام تقنية ‪. CSS‬‬

‫‪27‬‬
 ‫التركيبة البنائية لـ ‪CSS‬‬

‫إذا أردت استخدام صفحات األنماط االنسيابية ‪ CSS‬في موقعك كل مــا عليــك هــو كتابــة أوامــر‬
‫أوال على التركيب ــة البنائي ــة "‬
‫ً‬ ‫‪ CSS‬و لكن كي ــف يتم كتاب ــة تل ــك األوام ــر إذن علين ــا أن نتعـــرف‬
‫الصيغة العامه" لتلــك األوامــر‪ :‬و هي تتكــون من ثالثــة أجــزاء‪ selector‬و ‪ property‬و ‪value‬‬
‫كما في الشكل رقم (‪. )26‬‬

‫الشكل رقم (‪)26‬‬

‫و بنظرة سريعة نجد أن أوامر ‪ CSS‬تتكون من شقين الشق األول هو ‪ selector‬و هي تعني‬
‫المحدد و هو عبارة عن أحد وسوم الـ ‪ HTML‬المتعارف عليها فيمكنك استخدام الوسم‬
‫‪ body‬للصفحة أو ‪ p‬للفقرات‪ ،‬أو ‪ a‬للروابط ‪ ،‬أو ‪ table‬للجداول و هكذا‬
‫و الشق الثاني و يدعى ‪ declaration‬و تعني اإلعالن ‪ ،‬و هو ما يقع بين القوسين‬
‫المعقوفين و يحتوي على ‪ property‬و هي الخاصية التي تريد تطبيق القيمة عليها و‬
‫سوف نطلق عليها مصطلح المتغير ‪ ،‬و كذلك ‪ value‬و هي تعني قيمة المتغير ‪.‬‬

‫الحظ أن في الشكل رقم (‪)27‬‬

‫‪ - 1‬األمــر الواحــد قــد يحتــوي على أكــثر من محــدد " ‪ " selector‬و هنــا يجب أن يتم الفصــل‬
‫بينهم بفاصلة عادية هكذا " ‪ ، " ,‬أو أكثر من متغــير " ‪ " property‬و أكــثر من قيمــة " ‪value‬‬
‫" و هنا يجب أن يتم الفصل بينهم بفاصلة منقوطة هكذا " ; " ‪.‬‬

‫‪ - 2‬كود الـ ‪ CSS‬يمكن كتابته في سطر واحد أو في عدة اسطر ‪.‬‬

‫‪28‬‬
 ‫الشكل رقم (‪)27‬‬

‫كيفية ادراج الـ ‪ CSS‬في الملفات و داخل صفحات ‪ HTML‬؟‬

‫يمكنك إدراج ‪ CSS‬داخل صفحات ‪ HTML‬بإحدى الطرق الثالثة التالية ‪:‬‬

‫‪External Style Sheet - 1‬‬

‫تعــد طريقــة الملــف الخــارجي هي األفضــل عنــد تطبيقهــا على عــدد كبــير من الملفــات ‪ ،‬حيث‬
‫يمكنك إجــراء تعــديالت على طريقــة عــرض جميــع الصــفحات من خالل التعــديل في ملــف واحــد‬
‫فقط‪.‬‬
‫في هذه الطريقة يتم إدراج جميع أوامـر ‪ CSS‬في ملـف نصـي يتم اسـتدعاء الملــف من خالل‬
‫جميع صفحات الـ ‪ HTML‬عن طريق العنصر " ‪ " link‬الذي مر ذكره ســابقا و يجب أن يتم إدراج‬
‫هذا األمر في منطقة رأس الصفحة " ‪ ، " head‬كما في الشكل رقم (‪)28‬‬

‫مالحظة يجب ان يكون امتداد ملف ‪ CSS‬منتهي بمتداد ‪.CSS‬‬

‫الشكل رقم (‪)28‬‬

‫‪29‬‬
 ‫‪Internal Style Sheet - 2‬‬

‫أو ‪ embedded style sheets‬و هي تعني التضمين " اإلدراج " داخل رأس الصفحة ‪ ،‬و يجب‬
‫عليك استخدام النمط الداخلي في حالة تطبيقه على مستند وحيد ‪ ،‬حيث تقوم بتحديد النمط‬
‫في رأس الصفحة " ‪ " head‬عن طريق استخدام الوسم <‪ >style‬كما في الشكل رقم (‪: )29‬‬

‫الشكل رقم (‪)29‬‬

‫‪Inline Styles - 3‬‬

‫يمكن ان نكتب سطر ‪ CSS‬داخل سطر الـ‪ HTML‬بستخدام سمة ‪ style‬كما في الشكل رقم(‬
‫‪)30‬‬

‫الشكل رقم (‪)30‬‬

‫فكرة التوارث‬

‫ذكرنا في الفقرة السابقة أن الصفحة الواحدة قد تحتوى على أكثر من نمط داخل الموقع‬
‫الواحد و وبينا أيضاً أن المتصفح سوف يقوم باستخدام النمط األقرب إلى الوسم كما يلي‬
‫( النمط الموجود داخل الوسم ‪ ،‬ثم النمط في رأس الصفحة ‪ ،‬ثم النمط الموجود في ملف‬
‫خارجي ) ‪ .‬فعلى فرض أن الملف الخارجي حدد نمط الفقرة كما يلي ‪ :‬حدد لون الخط‬
‫بالقيمة " أزرق " و حدد حجم الخط بالقيمة " ‪ ، " 2‬بينما النمط في رأس الصفحة حدد لون‬
‫الخط بالقيمة " أخضر " و حدد المحاذاة بالقيمة " الوسط " ‪ ،‬بينما النمط داخل الوسم حدد‬
‫لون الخط بالقيمة " أحمر " ‪ .‬كيف يتم عرض الصفحة في هذه الحالة ‪ :‬كما عرفنا فإن لون‬
‫الخط سيكون األحمر ألن هذه هي القيمة األقرب للوسم ‪ ،‬ثم يتم تطبيق القيمة النمط براس‬
‫الصفحة و هذا يعني أن محاذاة الخط ستكون إلى الوسط ‪ ،‬ثم تطبيق النمط بالملف‬

‫‪30‬‬
 ‫الخارجي أي أن حجم الخط سيعطى القيمة " ‪ . " 2‬هذه هي فكرة التوارث أي استيراد‬
‫التنسيقات من األنماط البعيدة إذا لم تكن محددة داخل النمط األقرب ‪.‬‬

‫التعليقات في ‪CSS‬‬

‫يمكن كتابة التعليقات كما في الشكل رقم (‪)31‬‬

‫الشكل رقم (‪)31‬‬

‫عناصر ألـــ ‪ CSS‬كما ذكرنا سابقاً طريقة كتابة عناصر ‪ CSS‬سوف نشرح االن عناصر ‪CSS‬‬

‫العمل‬ ‫العنصر‬
‫هي من اكثر العناصر المستخدمة في‬ ‫‪color‬‬
‫التصميم وتقسم الى ‪ 3‬انواع من‬
‫االستخدامات‬
‫‪ ‬كتابة اسم اللون مباشرتا‬
‫‪ ‬كتابة ‪ Hex Code‬الخاص باللون مثل (‬
‫‪)#000000‬‬
‫‪ ‬كتابة )‪Decimal Code (R,G,B‬‬
‫الخاص بااللوان الثالثة االساسية‬
‫ويمكن اضافة الشفافية اليها مثل‬
‫()‪ )rgb(220,20,60‬او مع الشفافية‬
‫التي تمثل بــ ‪ a‬مثل‬
‫()‪)rgba(220,20,60,0.3‬‬
‫‪ = a‬الشفافية ويجب ان تكون اصغر من ‪1‬‬
‫واكبر من ‪0‬‬

‫وتعمل علة وضع خلفية للصفحة او العنصر‬

‫‪31‬‬
 ‫ولها انواع منها‬ ‫‪Background‬‬
‫‪ = background-color ‬وضع خلفية‬
‫لونية وتاخذ قيمة مثل قيمة ‪color‬‬
‫‪ = background-image ‬وتعمل على‬
‫وضع صورة للخلفية ويجب ان تكون‬
‫قيمتها ‪url‬‬
‫‪ = background-attachment ‬تعرف‬
‫من خالل القيم التالية‬
‫‪ = fixed -‬الصورة تبقى ثابته في‬
‫مكانها‬
‫‪ = inherit -‬عدم الثبات‬
‫‪ = background-position ‬تغير‬
‫مكان واتجاه الصورة وموضعها‬
‫‪ ‬كل الخواص السابقة يمكن كتابتها‬
‫بكود مختصر‬
‫هو فقط ‪ background‬و ياخذ القيم‬
‫السابقة بالترتيب‬

‫عناصر النصوص – الخطوط‬

‫العمل‬ ‫العنصر‬
‫تعمل على جعل هناك تباعد بين االسطر‬ ‫‪line-height‬‬
‫وتاخذ قيمة رقمية بـ‪px‬‬
‫وتعمل على محاذات النصوص وتاخذ‬ ‫‪text-align‬‬
‫‪ = center ‬توسيط النص‬
‫‪ = right ‬جعل النص من جهة اليمين‬
‫‪ = left ‬جعل النص من جهة اليسار‬
‫‪ = justify ‬تنسيق النص (اي جعل‬
‫جميع االسطر متناسقة)‬
‫‪ = top ‬جعل النص من االعلى‬
‫‪ = bottom ‬جعل النص من االسفل‬
‫‪ = inherit ‬الوضع االعتيادي‬

‫ويستخدم إلضافة مؤثرات على النصوص‬

‫ومنها التالي ‪:‬‬ ‫‪text-decoration‬‬
‫‪ = none ‬ازالة المؤثرات‬

‫‪32‬‬
 ‫العمل‬ ‫العنصر‬
‫‪ = line-through ‬جعل خط على النص‬
‫‪ = underline ‬جعل خط تحت النص‬
‫‪ = overline ‬جعل خط فوق النص‬

‫تعمل على ترك مسافة في اول السطر‬ ‫‪text-indent‬‬

‫وتاخذ قيمة عددية‬
‫تعمل على تحويل النص من والى حسب‬ ‫‪text-transform‬‬
‫القيم التالية‬
‫‪ = uppercase ‬كل حرف من الحروف‬
‫الصغيرة الى الحروف الكبيرة‬
‫‪ = lowercase ‬كل حرف من الحروف‬
‫الكبيرة الى حرف صغير‬
‫‪ = capitalize ‬جعل اول حرف كبير من‬
‫اي كلمة‬
‫تعمل على جعل هناك تباعد بين الكلمات‬ ‫‪word-spacing‬‬
‫وتاخذ قيمة رقمية بـ‪px‬‬
‫تعمل على جعل هناك تباعد بين الحروف‬ ‫‪letter-spacing‬‬
‫وتاخذ قيمة رقمية بـ‪px‬‬
‫تعمل على كون النص ياخذ حقه في داخل‬ ‫‪white-space‬‬
‫المساحة المحددة له فقط وينزل الى‬
‫االسفل عندما تنتهي المساحة المحدده في‬
‫داخل العنصر االب وياخذ قيمة‬
‫‪ = nowrap ‬عكس تاثيره الن‬
‫االفتراضي يعمل كما ذكر سابقاً‬
‫(شبيه بعمل ‪ Enter‬عند انتهاء‬
‫السطر)‬
‫تحديد اتجاه النص وياخذ قيم‬ ‫‪direction‬‬
‫‪ = rtl ‬من اليمين الى اليسار‬
‫‪ = ltr ‬من اليسار الى اليمين‬
‫تعمل على تعيين خط الكتابة ويوجود الكثير‬ ‫‪font-family‬‬
‫منها وايضا يمكن اضافة خطوط من االنترنت‬
‫تحديد حجم الخط‬ ‫‪font-size‬‬
‫تحديد سمك الخط‬ ‫‪font-weight‬‬
‫اضافة تاثيرات على الخط مثل كونه مائل‬ ‫‪font-style‬‬

‫‪33‬‬
‫مالحظة كل ما ذكر سابقا عندما نقول (مساحة ‪ ,‬مسافة ‪ ,‬طول ‪ ,‬عرض ‪ ,‬حجم وسمك) نعني‬
‫ان العنصر يأخذ قيمة عددية كان تكون ربما ‪10px‬‬

‫عناصر القوائم‬

‫تعمل عناصر القوائم على التحكم بالكثير من خصائص ‪ list‬وتعمل على تنظيم شكل القوائم‬
‫في االن‬
‫القوائم الى عدة اشكال‬ ‫بشكل جميل ومنسق وسوف نتطرق الغلب العناصر‬
‫تغير شكل (الكرات على الجانب) الموجودة‬ ‫‪List-style-image‬‬
‫في القوائم الى صور‬
‫اخراج (الكرات على الجانب) الى خارج الحاوية‬ ‫‪list-style-position‬‬

‫التنسيق العناصر‬

‫هذه العناصر تقوم بعمل تنسيق كامل لكل العناصر من حيث الشكل والتحريك والمكان‬
‫والحجم وغيرها وسوف نتطرق االن الى هذه العناصر‬

‫العمل‬ ‫العنصر‬
‫ويعني بها الحواف او حدود العنصر كما‬ ‫‪border‬‬
‫سوف يأخذ االنواع منها‬

‫اتجاه الحافه المراد التعديل عليها‬

‫‪border-left ‬‬
‫‪border-right ‬‬
‫‪border-top ‬‬
‫‪border-bottom ‬‬
‫ويأخذ ايضاً اللون والحجم والشكل ويكتب‬
‫‪border-color ‬‬
‫‪border-width ‬‬

‫‪34‬‬
 ‫‪border-style ‬‬
‫ويمكن التالعب بجه معينة كما يلي‬
‫‪border-left-style ‬‬
‫‪border-right-color ‬‬
‫‪border-bottom-width ‬‬

‫شرح مدخالت عنصر ‪border-style‬‬

‫‪ = outset ‬تستخدم للحدود ثالثة‬
‫االبعاد‬
‫‪ = inset ‬تستخدم للحدود ثالثة االبعاد‬
‫‪ = groove ‬تستخدم للحدود ثالثة‬
‫االبعاد‬
‫‪ = double ‬تستخدم للحدود‬
‫المضاعفة‬
‫‪ = solid ‬تستخدم للحدود العادية‬
‫‪ = ridge ‬تستخدم للحدود ثالثة‬
‫االبعاد‬
‫‪ = dashed ‬تستخدم للحدود‬
‫المتقطعة‬
‫‪ = dotted ‬تستخدم للحدود المنقطة‬

‫يستخدم لعمل ازاحة للعنصر من جه معينة‬ ‫‪margin‬‬

‫بمسافة معينة وياخذ قيم عددية يمكن كتابة‬
‫االمر المختصر ‪ margin‬او استخدام‬
‫‪margin-left ‬‬
‫‪margin-right ‬‬
‫‪margin-top ‬‬
‫‪margin-bottom ‬‬
‫عمل ازاحة داخلية للعنصر وتغير مكان العنصر‬ ‫‪padding‬‬
‫ويمكن استخدام االمر المختصر ‪ padding‬او‬
‫استخدام‬
‫‪padding-left ‬‬
‫‪padding-right ‬‬
‫‪padding-top ‬‬
‫‪padding-bottom ‬‬
‫التحكم بعرض العنصر ويأخذ قيمة عددية‬ ‫‪width‬‬
‫ويكتب ‪ width‬فقط ويمكن استخدام قيمتين‬

‫‪35‬‬
 ‫له للتحكم بعرض العنصر‬
‫‪ = min-width ‬تأخذ اقل عرض للعنصر‬
‫‪ = max-width ‬تأخذ اكبر عرض للعنصر‬
‫التحكم بطول العنصر ويأخذ قيمة عددية‬ ‫‪height‬‬
‫ويكتب ‪ height‬فقط ويمكن استخدام‬
‫قيمتين له للتحكم بطول العنصر‬
‫‪ = min-height ‬تأخذ اقل طول‬
‫للعنصر‬
‫‪ = max-height ‬تاخذ اكبر طول‬
‫للعنصر‬
‫وتستخدم لتغير عرض العنصر او مجموعة من‬ ‫‪display‬‬
‫العناصر معاً ولها مجموعة من القيم‬
‫‪ = none ‬إخفاء العنصر من الصفحة‬
‫نهائياً مع عدم حجز مكان له‬
‫‪ = block ‬عرض العنصر بشكل عمودي‬
‫‪ = inline ‬عرض بشكل افقي‬
‫‪ = inline-block ‬ترتيب افقي بخواص‬
‫الـ ‪block‬‬
‫نستخدم هذه الدالة بتحريك العناصر دون‬ ‫‪postion‬‬
‫تنفيذ اي ازاحة ولها مجموعة من القيم‬

‫‪ = fixed ‬ثبات العنصر بالنسبة للشاشة‬

‫والتحريك مع الصفحة ويمكن تحريك‬
‫مكانة باالتجاهات المذكورة اسفل *‬

‫‪ = relative ‬ثبات العنصر بالنسبة‬

‫للصفحة والتحرك مع الشاشة ويمكن‬
‫تغيير مكان باالتجاهات المذكورة‬
‫اسفل *‬

‫‪ = absolute ‬هذه الخاصية تختلف عن‬

‫البقية حيث أنها ال يتم التأثير عليها‬
‫من قبل اخوتها‪ ،‬ويمكن وضعها في‬
‫أي مكان في الحاوي عبر القيم‬
‫ويمكن تغيير مكان باالتجاهات‬
‫المذكورة اسفل *‬
‫مالحظة‪ :‬لكي تعمل الخاصية مع الحاوي‬

‫‪36‬‬
‫الذي فوقها مباشرة‪ ،‬فعلى تلك الحاوي أن‬
‫تملك خاصية ‪ position: relative‬وإال‬
‫ستتمركز على الحاوي الذي فوقه وهكذا‬

‫* عناصر التحريك‬
‫‪left ‬‬
‫‪right ‬‬
‫‪bottom ‬‬
‫‪top ‬‬
‫الطوفان او العوم ويمكن استخدام هذه‬ ‫‪float‬‬
‫الخاصية لجعل عنصر معين عائم في احد‬
‫الجهتين من اليمني او اليسار ومن مميزات‬
‫هذه الخاصية عند ازالة احد العناصر فأن‬
‫العنصر الذي ياتي بعده يأخذ مكانه والقيم‬
‫التي تسند له هي االتجاهات والقيم‬
‫االفتراضية له هي ‪none‬‬
‫وتعمل على ازالة تأثير الـ‪ float‬من العنصر‬ ‫‪clear‬‬
‫وستند له قيم االتجاهات والقيمة االفتراضية‬
‫له هي ‪ none‬ويقصد بقيمة ‪ both‬كال‬
‫االتجاهين‬

‫وتعني اخفاء المحتوى الخارج عن العنصر‬

‫مثال لو كان عنصر ‪ p‬يوجد به نص‬
‫ً‬ ‫(الزائد)‬ ‫‪overflow‬‬
‫يفوق حجم العنصر االب نقوم بستخدام عنصر‬
‫‪ overflow‬الخفاء النص الخارج عن الحجم‬
‫المحدد لالب ويمكن ان تاخذ قيم مثل‬

‫‪ = inherit‬القيمة االفتراضية اي انه‬ ‫‪‬‬

‫يبقى ضاهر‬
‫‪ = visible‬المحتوى يبقى ضاهر‬ ‫‪‬‬
‫‪ = hidden‬اخفاء المحتوى فقط‬ ‫‪‬‬
‫‪ = scroll‬اخفاء المحتوى مع اضهار‬ ‫‪‬‬
‫شريط تمرير‬
‫‪ = auto‬اخفاء المحتوى مع اضهار‬ ‫‪‬‬
‫شريط تمرير عند الحاجة‬
‫تستخدم إلخفاء العنصر مع حجز مكانه في‬ ‫‪visibility‬‬

‫‪37‬‬
 ‫الصفحة وياخذ القيمة االفتراضية ‪visible‬‬
‫وتعني العنصر ضاهر والقيمة ‪hidden‬‬
‫وتعني ان العنصر مخفي‬
‫كلنا نعرف أن عند كتابة عناصر في صفحة‬ ‫‪Z-index‬‬
‫‪ html‬تأتي العناصر واحد تلو األخرى‪ ،‬أو‬
‫باألحرى عنصر أسفل عنصر‪ ،‬أو ما يعرف‬
‫بـ"التراص االفتراضي"‪ ،‬و هنا يمكننا استخدام‬
‫لغة الـ‪ CSS‬لحل هذه المشاكل و منها ‪Z-‬‬
‫‪ index‬تستخدم خاصية ‪ z-index‬لترتيب‬
‫العناصر فوق بعضها البعض باإلستعانة بالـ‬
‫‪ ،HTML‬لكن ال قيمة وال نتيجة لها في حال‬
‫عدم استخدام خاصية ‪( position‬التي سبق‬
‫و قمنا بتخصيص لها شرح سابقا‪,‬وتاخذ قيم‬
‫قيم رقمية وكلما زاد الرقم زاد تفضيله اي‬
‫تفضيال‬
‫ً‬ ‫االعلى هو االكثر‬
‫وتعمل هذه الخاصية على تغير شكل سهم‬ ‫‪cursor‬‬
‫التحرك(‪ )mouse‬الى عدة اشكال منها ‪auto‬‬
‫‪ , zoom‬الخ ‪..‬‬
‫يعمل مثل ‪ border‬لكن بعد الضغط على‬ ‫‪outline‬‬
‫العنصر يضهر التاثر المحدد له‬

‫عناصر التأثير‬

‫العمل‬ ‫العنصر‬
‫تعمل على تنفذي السطر المسند اليها على‬ ‫‪hover‬‬
‫العنصر قبل عالمة (‪ ):‬عند المرور عليه فقط‬
‫وتكتب‬
‫}‪a:hover {code‬‬
‫تعمل على تنفذي السطر المسند اليها على‬ ‫‪active‬‬
‫العنصر قبل عالمة (‪ ):‬عند الضغط عليه فقط‬
‫وتكتب‬
‫}‪a:active {code‬‬
‫تعمل على تنفذي السطر المسند اليها على‬ ‫‪first-letter‬‬
‫اول حرف من العنصر قبل عالمة (‪)::‬‬
‫}‪a::first-letter {code‬‬
‫تعمل على تنفذي السطر المسند اليها على‬ ‫‪first-line‬‬

‫‪38‬‬
 ‫اول سطر من العنصر قبل عالمة (‪)::‬‬
‫}‪a::first-line {code‬‬
‫تعمل على تنفذي السطر المسند اليها على‬ ‫‪first-child‬‬
‫اول عنصر في داخل العنصر قبل عالمة (‪):‬‬
‫}‪a:first-child {code‬‬
‫تعمل على تنفذي السطر المسند اليها بعد‬ ‫‪after‬‬
‫العنصر قبل عالمة (‪)::‬‬
‫}‪a::after {code‬‬
‫تعمل على تنفذي السطر المسند اليها قبل‬ ‫‪before‬‬
‫العنصر قبل عالمة (‪)::‬‬
‫}‪a::before {code‬‬

‫عناصر التحديد واالقتناص‬

‫تعمل مثل هذه العناصر على تحديد عنصر والمرور الى عنصر اخر من خالله من خالل سلسلة‬
‫من االنتقاالت‬

‫العمل ‪ +‬نموذج‬ ‫العالمة‬

‫بمعنى ان جميع العناصر سوف تاخذ هذا‬ ‫*‬
‫السطر بين عالمتي { }‬
‫{‪*}code‬‬
‫وتعمل على تنفيذ السطر بين { } على‬ ‫<‬
‫العنصر الذي يقع بعد عالمة < مباشرتا وال‬
‫ينفذ على العناصر المشابها له في داخل‬
‫نفس الحاوية‬
‫}‪div > p {code‬‬

‫يوجد هناك الكثير من المحددات اترك لكم مجال البحث عنها والتعرف عليها‬

‫‪39‬‬