‫‪1‬‬

‫بسم هللا الرحمان الرحيم‬

‫‪http://aggouni.blogspot.com‬‬
‫المستشار في التربية محمد عقوني‬
 ‫‪2‬‬

‫إنشاء موقع ويب بالذكاء االصطناعي‬

‫اهمية إنشاء موقع ويب بالذكاء االصطناعي‬

‫أهمية إنشاء موقع ويب بالذكاء االصطناعي‪:‬‬

‫يُقدم دمج تقنيات الذكاء االصطناعي في مواقع الويب العديد من‬
‫الفوائد‪ ،‬مما يجعلها أكثر فاعلية وجاذبية للمستخدمين‪ .‬تشمل بعض‬
‫أهم المزايا ما يلي‪:‬‬
‫‪1.‬تجربة مستخدم مخصصة‪:‬‬
‫تحليل سلوك المستخدم ‪:‬يمكن للذكاء االصطناعي تحليل سلوك‬ ‫‪‬‬

‫المستخدم وتفضيالته عبر الموقع‪ ،‬مما يسمح بتقديم تجربة شخصية‬

‫فريدة لكل زائر‪ .‬يتضمن ذلك تخصيص المحتوى والتوصيات‬
‫والعروض وعناصر أخرى من واجهة المستخدم‪.‬‬
‫الدردشة اآللية وخدمة العمالء ‪:‬يمكن استخدام روبوتات الدردشة‬ ‫‪‬‬

‫التي تعمل بالذكاء االصطناعي لتقديم خدمة عمالء على مدار‬

‫الساعة طوال أيام األسبوع‪ ،‬واإلجابة على األسئلة‪ ،‬وحل‬
‫المشكالت‪ ،‬حتى في غير ساعات العمل‪.‬‬
‫البحث وفلترة النتائج ‪:‬يمكن للذكاء االصطناعي تحسين وظائف‬ ‫‪‬‬

‫البحث في الموقع‪ ،‬مما يسهل على المستخدمين العثور على‬

‫المعلومات التي يبحثون عنها بسرعة وفعالية‪.‬‬
‫البحث‪(SEO):‬‬ ‫‪2.‬تحسين تحسين محركات‬
‫فهم نية البحث ‪:‬يمكن للذكاء االصطناعي فهم نية البحث للمستخدم‬ ‫‪‬‬

‫بشكل أفضل‪ ،‬مما يسمح بإنشاء محتوى أكثر صلة يجذب المزيد من‬
‫الزوار من محركات البحث‪.‬‬
 ‫‪3‬‬

‫تحسين المحتوى ‪:‬يمكن للذكاء االصطناعي تحسين محتوى الموقع‬ ‫‪‬‬

‫تلقائيًا لجعله أكثر مالءمة لمعايير محركات البحث‪ ،‬مما يؤدي إلى‬
‫تحسين ترتيب الموقع في نتائج البحث‪.‬‬
‫التنبؤ باتجاهات البحث ‪:‬يمكن للذكاء االصطناعي تحليل اتجاهات‬ ‫‪‬‬

‫البحث والتنبؤ بها‪ ،‬مما يسمح للمواقع بإنشاء محتوى استباقي يلبي‬
‫احتياجات المستخدمين المتطورة‪.‬‬
‫‪3.‬أتمتة المهام‪:‬‬
‫إدارة المهام المتكررة ‪:‬يمكن للذكاء االصطناعي أتمتة المهام‬ ‫‪‬‬

‫المتكررة مثل معالجة الطلبات والرد على البريد اإللكتروني وخدمة‬

‫العمالء‪ ،‬مما يوفر الوقت والمال ويُحرر الموظفين للتركيز على‬
‫مهام أكثر أهمية‪.‬‬
‫التحديثات والتعديالت التلقائية ‪:‬يمكن للذكاء االصطناعي تحديث‬ ‫‪‬‬

‫محتوى الموقع تلقائيًا وإجراء التعديالت بنا ًء على بيانات‬

‫المستخدمين واتجاهات السوق‪ ،‬مما يضمن أن الموقع يبقى دائ ًما‬
‫محدثًا ودقيقًا‪.‬‬
‫التصليح ‪ maintenance:‬يمكن للذكاء االصطناعي مراقبة أداء‬ ‫‪‬‬

‫الموقع واكتشاف المشكالت المحتملة وإصالحها تلقائ ًيا‪ ،‬مما يقلل‬

‫من وقت التوقف ويضمن تجربة مستخدم سلسة‪.‬‬
‫‪4.‬زيادة المبيعات وتحويل العمالء‪:‬‬
‫التوصيات الشخصية ‪:‬يمكن للذكاء االصطناعي تقديم توصيات‬ ‫‪‬‬

‫شخصية للمنتجات أو الخدمات بنا ًء على سلوك المستخدم‬

‫وتفضيالته‪ ،‬مما يزيد من احتمالية الشراء‪.‬‬
‫استهداف اإلعالنات ‪:‬يمكن استخدام الذكاء االصطناعي لعرض‬ ‫‪‬‬

‫إعالنات مستهدفة للمستخدمين بنا ًء على اهتماماتهم وسلوكهم‪ ،‬مما‬

‫يزيد من فعالية حمالت التسويق‪.‬‬
 ‫‪4‬‬

‫تحسين تجربة الدفع ‪:‬يمكن للذكاء االصطناعي تبسيط عملية الدفع‬ ‫‪‬‬

‫وتسهيلها على المستخدمين‪ ،‬مما يؤدي إلى زيادة معدالت التحويل‪.‬‬

‫‪5.‬تحسين األمان‪:‬‬
‫كشف االحتيال ‪:‬يمكن للذكاء االصطناعي اكتشاف األنشطة‬ ‫‪‬‬

‫االحتيالية ومنعها‪ ،‬مثل عمليات الشراء االحتيالية وانتحال الهوية‪.‬‬

‫حماية البيانات ‪:‬يمكن للذكاء االصطناعي حماية بيانات المستخدم‬ ‫‪‬‬

‫من خالل تشفيرها والتحكم في الوصول إليها‪.‬‬

‫مكافحة هجمات اإلنترنت ‪:‬يمكن للذكاء االصطناعي اكتشاف‬ ‫‪‬‬

‫هجمات اإلنترنت والتصدي لها في وقت مبكر‪ ،‬مما يحمي الموقع‬

‫من االنتهاكات‪.‬‬
‫بشكل عام‪ ،‬يُقدم استخدام تقنيات الذكاء االصطناعي في‬
‫مواقع الويب العديد من الفوائد التي يمكن أن تعود بالنفع على‬
‫كل من الشركات والعمالء‪.‬‬
‫إنشاء مواقع الويب باستخدام الذكاء االصطناعي‪ :‬ثورة‬
‫في عالم التطوير‬
‫يُحدث الذكاء االصطناعي ثورة في مجال تصميم وتطوير المواقع‬
‫اإللكترونية‪ ،‬حيث يقدم أدوات و إمكانيات جديدة تتيح للمستخدمين‬
‫إنشاء مواقع ويب احترافية و جذابة دون الحاجة إلى خبرة برمجية‬
‫واسعة‪.‬‬
‫مزايا استخدام الذكاء االصطناعي في إنشاء المواقع‪:‬‬
‫سرعة وسهولة ‪:‬تُتيح أدوات الذكاء االصطناعي للمستخدمين إنشاء‬ ‫‪‬‬

‫مواقع ويب في غضون دقائق قليلة من خالل اإلجابة على بعض‬

‫األسئلة البسيطة واختيار التصميمات والصور والنصوص المناسبة‪.‬‬
 ‫‪5‬‬

‫تخصيص ‪:‬توفر أدوات الذكاء االصطناعي إمكانيات واسعة‬ ‫‪‬‬

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

‫وعالمتهم التجارية‪ ،‬بما في ذلك اختيار األلوان والخطوط و‬
‫تخطيطات الصفحات‪.‬‬
‫ذكاء ‪:‬تستخدم أدوات الذكاء االصطناعي تقنيات التعلم اآللي لفهم‬ ‫‪‬‬

‫احتياجات المستخدمين و تقديم اقتراحات و توصيات ذكية لتصميم‬

‫الموقع و تحسينه‪.‬‬
‫إمكانية الوصول ‪:‬تُتيح أدوات الذكاء االصطناعي لألشخاص الذين‬ ‫‪‬‬

‫ليس لديهم خبرة تقنية إنشاء مواقع ويب احترافية و سهلة‬

‫االستخدام‪.‬‬
‫التكلفة ‪:‬يمكن أن يساعد استخدام أدوات الذكاء االصطناعي في‬ ‫‪‬‬

‫تقليل تكلفة تصميم و تطوير المواقع اإللكترونية‪ ،‬خاصة بالنسبة‬

‫للشركات الصغيرة و رواد األعمال‪.‬‬
‫أمثلة على أدوات إنشاء مواقع الويب باستخدام الذكاء االصطناعي‪:‬‬
‫‪Wix:‬منصة رائدة إلنشاء مواقع الويب باستخدام أدوات الذكاء‬ ‫‪‬‬

‫االصطناعي‪ ،‬توفر واجهة سهلة االستخدام و مجموعة واسعة من‬

‫القوالب و الميزات‪.‬‬
‫‪Squarespace:‬منصة أخرى شهيرة إلنشاء مواقع الويب‪ ،‬تتميز‬ ‫‪‬‬

‫بتصميماتها األنيقة و أدواتها المتقدمة للتجارة اإللكترونية‪.‬‬

‫‪WordPress:‬نظام إدارة محتوى شائع‪ ،‬يُمكن دمجه مع أدوات‬ ‫‪‬‬

‫الذكاء االصطناعي إلنشاء مواقع ويب ديناميكية و غنية بالميزات‪.‬‬

‫‪Webflow:‬منصة إلنشاء مواقع ويب مخصصة‪ ،‬تُتيح‬ ‫‪‬‬

‫للمستخدمين تصميم مواقعهم اإللكترونية بدقة باستخدام أدوات‬

‫السحب و اإلفالت‪.‬‬
 ‫‪6‬‬

‫‪Appy Pie:‬منصة شاملة إلنشاء تطبيقات الجوال و مواقع الويب‪،‬‬ ‫‪‬‬

‫توفر أدوات ذكاء اصطناعي إلنشاء مواقع ويب احترافية بدون‬

‫برمجة‪.‬‬
‫الخالصة‪:‬‬
‫يُقدم إنشاء مواقع الويب باستخدام الذكاء االصطناعي حلوالً مبتكرة‬
‫و فعالة لألفراد و الشركات الراغبين في إنشاء مواقع ويب احترافية‬
‫و جذابة دون الحاجة إلى استثمارات كبيرة أو خبرة تقنية واسعة‪.‬‬
‫مع استمرار تطور تقنيات الذكاء االصطناعي‪ ،‬نتوقع أن نرى‬
‫المزيد من األدوات المتقدمة و الميزات الذكية التي تُسهل عملية‬
‫إنشاء و تطوير المواقع اإللكترونية‪ ،‬مما يجعلها في متناول الجميع‪.‬‬

‫فوائد استخدام الذكاء االصطناعي في تصميم وتطوير المواقع‪:‬‬

‫يُحدث الذكاء االصطناعي ثورة في مجال تصميم وتطوير المواقع‪،‬‬
‫سن كفاءة‬ ‫مقدما ً العديد من الفوائد التي ت ُ ّ‬
‫عزز تجربة المستخدم وتح ّ‬
‫العمل‪ .‬تشمل بعض أهم هذه الفوائد ما يلي‪:‬‬
‫‪1.‬تحسين تجربة المستخدم‪:‬‬
‫تصميم ُمخصص ‪:‬يُمكن للذكاء االصطناعي تحليل سلوك المستخدم‬ ‫‪‬‬

‫سن من‬‫وتفضيالته لتقديم تصميمات ُمخصصة لكل فرد‪ ،‬مما يُح ّ‬

‫مستوى التفاعل واإلشراك‪.‬‬
‫المحتوى ال ُمالئم ‪:‬يُمكن للذكاء االصطناعي تحليل احتياجات‬ ‫‪‬‬

‫المستخدمين وتقديم محتوى ُمالئم لكل فرد‪ ،‬مما يُقلّل من معدل‬

‫االرتداد ويزيد من وقت التفاعل‪.‬‬
 ‫‪7‬‬

‫سن ‪:‬يُمكن للذكاء االصطناعي تحسين وظائف البحث‬ ‫البحث ال ُمح ّ‬ ‫‪‬‬

‫على الموقع لجعل العثور على المعلومات أسهل وأسرع‪.‬‬

‫الدردشة اآللية ‪:‬يُمكن استخدام روبوتات الدردشة التي تعمل بالذكاء‬ ‫‪‬‬

‫االصطناعي لتقديم خدمة عمالء على مدار الساعة وطوال أيام‬

‫األسبوع‪ ،‬واإلجابة على أسئلة المستخدمين‪ ،‬وح ّل المشكالت‪.‬‬
‫‪2.‬زيادة كفاءة العمل‪:‬‬
‫أتمتة المهام ‪:‬يُمكن للذكاء االصطناعي أتمتة العديد من المهام‬ ‫‪‬‬

‫ال ُمستهلكة للوقت‪ ،‬مثل إنشاء الصور‪ ،‬وكتابة النصوص‪ ،‬وتحسين‬

‫محركات البحث)‪ ، (SEO‬مما يُتيح للمصممين والمطورين التركيز‬
‫عا واستراتيجية‪.‬‬
‫على المهام األكثر إبدا ً‬
‫تحسين سير العمل ‪:‬يُمكن للذكاء االصطناعي تحسين سير العمل‬ ‫‪‬‬

‫من خالل ربط األدوات المختلفة وتبادل البيانات تلقائيًا‪ ،‬مما يُقلّل‬
‫سرع من عملية التصميم والتطوير‪.‬‬ ‫من األخطاء ويُ ّ‬
‫التنبؤات والتحليالت ‪:‬يُمكن للذكاء االصطناعي تحليل بيانات‬ ‫‪‬‬

‫الموقع وتقديم تنبؤات حول سلوك المستخدم‪ ،‬مما يُساعد أصحاب‬

‫المواقع على اتخاذ قرارات أفضل بشأن التصميم والتطوير‬
‫والتسويق‪.‬‬
‫‪3.‬خفض التكاليف‪:‬‬
‫تقليل الوقت ‪:‬يُمكن للذكاء االصطناعي تقليل الوقت ال ُمستغرق‬ ‫‪‬‬

‫لتصميم وتطوير المواقع‪ ،‬مما يُقلّل من التكاليف‪.‬‬

‫تحسين التحويالت ‪:‬يُمكن للذكاء االصطناعي تحسين معدالت‬ ‫‪‬‬

‫سنة ومحتوى ُمالئم‪ ،‬مما‬ ‫التحويل من خالل تقديم تجربة مستخدم ُمح ّ‬
‫يُؤدّي إلى زيادة المبيعات واإليرادات‪.‬‬
‫تقليل األخطاء ‪:‬يُمكن للذكاء االصطناعي تقليل األخطاء البشرية‪،‬‬ ‫‪‬‬

‫مما يُقلّل من الحاجة إلى إعادة العمل والتكاليف ال ُمرتبطة بها‪.‬‬

 ‫‪8‬‬

‫‪4.‬الوصول إلى جمهور أوسع‪:‬‬

‫الترجمة اآللية ‪:‬يُمكن للذكاء االصطناعي ترجمة المحتوى تلقائيًا‬ ‫‪‬‬

‫إلى لغات متعددة‪ ،‬مما يجعل الموقع متا ًحا لجمهور أوسع‪.‬‬
‫التخصيص اإلقليمي ‪:‬يُمكن للذكاء االصطناعي تخصيص الموقع‬ ‫‪‬‬

‫سن من تجربة المستخدم‬ ‫حسب الموقع الجغرافي للمستخدم‪ ،‬مما يُح ّ‬

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

‫على الموقع وحماية البيانات‪.‬‬

‫الحفاظ على أمان الموقع ‪:‬يُمكن للذكاء االصطناعي اكتشاف‬ ‫‪‬‬

‫التهديدات اإللكترونية وحماية الموقع من الهجمات اإللكترونية‪.‬‬

‫اختبار ‪ A/B:‬يُمكن للذكاء االصطناعي أتمتة اختبار ‪ A/B‬لتحسين‬ ‫‪‬‬

‫تصميم الموقع وتجربة المستخدم‪.‬‬

‫مع استمرار تطور تقنية الذكاء االصطناعي‪ ،‬من ال ُمتوقع أن‬
‫نرى المزيد من الفوائد والتطبيقات ال ُمبتكرة في مجال تصميم‬
‫وتطوير المواقع‪.‬‬
 ‫‪9‬‬

‫أنواع أدوات الذكاء االصطناعي المستخدمة في إنشاء‬

‫مواقع الويب‬

‫يتم استخدام مجموعة متنوعة من أدوات الذكاء االصطناعي إلنشاء‬

‫مواقع الويب‪ ،‬وتشمل بعض األنواع الشائعة ما يلي‪:‬‬
‫‪1.‬منشئو مواقع الويب بالذكاء االصطناعي‪:‬‬
‫أدوات إنشاء المواقع التي تعمل بالذكاء االصطناعي مثل ‪Wix‬‬ ‫‪‬‬

‫‪ADI‬و ‪ Jimdo Dolphin‬و ‪ Website Planet‬تُمكن‬

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

‫الذكاء االصطناعي إلنشاء موقع ويب مخصص لك‪.‬‬

‫عادة ً ما توفر مجموعة متنوعة من القوالب والصور والنصوص‬ ‫‪‬‬

‫ضا تخصيص موقع الويب الخاص‬ ‫لالختيار من بينها‪ ،‬ويمكنك أي ً‬

‫بك ليتناسب مع عالمتك التجارية‪.‬‬
‫‪2.‬أدوات تحسين تجربة المستخدم‪(UX):‬‬
‫تستخدم أدوات تحسين تجربة المستخدم )‪ (UX‬الذكاء االصطناعي‬ ‫‪‬‬

‫لفهم سلوك المستخدم وتحسين تجربة المستخدم على موقع الويب‬

‫الخاص بك‪.‬‬
‫يمكن لهذه األدوات تتبع مسارات المستخدمين على موقع الويب‬ ‫‪‬‬

‫وتحديد العناصر التي يتفاعلون معها واألماكن التي يتعثرون فيها‪.‬‬

‫يمكن بعد ذلك استخدام هذه البيانات لتحسين تصميم موقع الويب‬ ‫‪‬‬

‫الخاص بك وجعله أكثر سهولة في االستخدام‪.‬‬

‫‪3.‬أدوات تحسين محركات البحث‪(SEO):‬‬
 ‫‪10‬‬

‫تستخدم أدوات تحسين محركات البحث )‪ (SEO‬الذكاء‬ ‫‪‬‬

‫االصطناعي لمساعدتك على تحسين موقع الويب الخاص بك لنتائج‬

‫البحث‪.‬‬
‫يمكن لهذه األدوات البحث عن الكلمات الرئيسية ذات الصلة‬ ‫‪‬‬

‫بنشاطك التجاري وتقديم اقتراحات حول كيفية تحسين محتوى موقع‬

‫الويب الخاص بك لتصنيفه بشكل أفضل في نتائج البحث‪.‬‬
‫‪4.‬روبوتات الدردشة‪:‬‬
‫يمكن استخدام روبوتات الدردشة التي تعمل بالذكاء االصطناعي‬ ‫‪‬‬

‫لتزويد خدمة العمالء على مدار الساعة طوال أيام األسبوع‬

‫واإلجابة على أسئلة المستخدمين‪.‬‬
‫ضا استخدامها لجمع البيانات من المستخدمين وتخصيص‬ ‫يمكن أي ً‬ ‫‪‬‬

‫تجربة موقع الويب‪.‬‬

‫‪5.‬أدوات إنشاء المحتوى‪:‬‬
‫يمكن استخدام أدوات إنشاء المحتوى التي تعمل بالذكاء‬ ‫‪‬‬

‫االصطناعي إلنشاء نصوص وصور ومقاطع فيديو لموقع الويب‬

‫الخاص بك‪.‬‬
‫يمكن أن تكون هذه األدوات مفيدة بشكل خاص للشركات التي ليس‬ ‫‪‬‬

‫لديها الكثير من الوقت أو الموارد إلنشاء محتوى خاص بها‪.‬‬

‫‪6.‬أدوات األمان‪:‬‬
‫يمكن استخدام أدوات األمان التي تعمل بالذكاء االصطناعي لحماية‬ ‫‪‬‬

‫موقع الويب الخاص بك من التهديدات اإللكترونية مثل البرامج‬

‫الضارة والهجمات اإللكترونية‪.‬‬
‫يمكن لهذه األدوات مراقبة حركة المرور على موقع الويب الخاص‬ ‫‪‬‬

‫بك واكتشاف األنشطة المشبوهة واتخاذ اإلجراءات لمنعها‪.‬‬

 ‫‪11‬‬

‫هذه ليست سوى أمثلة قليلة ألنواع أدوات الذكاء االصطناعي‬

‫المستخدمة في إنشاء مواقع الويب ‪.‬مع استمرار تطور تقنية الذكاء‬
‫االصطناعي‪ ،‬من المرجح أن نرى المزيد من األدوات المبتكرة‬
‫التي يتم تطويرها والتي يمكن أن تساعد في إنشاء مواقع ويب أكثر‬
‫فعالية وجاذبية‪.‬‬
‫مالحظة ‪:‬من المهم مالحظة أن الذكاء االصطناعي هو أداة‪ ،‬ومثل‬
‫أي أداة‪ ،‬يمكن استخدامه للخير أو للشر ‪.‬من المهم استخدام أدوات‬
‫الذكاء االصطناعي بشكل مسؤول‬

‫أساسيات لغة‪HTML‬‬
‫ما هي لغة‪ HTML‬؟‬
‫هي لغة توصيف النصوص التشعبية ‪(HyperText Markup‬‬
‫)‪Language‬وهي لغة برمجة أساسية لبناء صفحات الويب‪.‬‬
‫تُستخدم إلنشاء هيكل الصفحة وتنسيقها‪ ،‬وتحديد محتوىها من‬
‫نصوص وصور وروابط وفيديوهات وغيرها‪.‬‬
‫مميزات لغة‪HTML:‬‬
‫سهلة التعلم ‪:‬تتميز لغة ‪ HTML‬ببساطة قواعدها وسهولة فهمها‪،‬‬ ‫‪‬‬

‫حتى للمبتدئين‪.‬‬
‫واسعة االنتشار ‪:‬تُستخدم لغة ‪ HTML‬في جميع أنحاء العالم‬ ‫‪‬‬

‫إلنشاء مواقع الويب‪ ،‬مما يجعلها لغة أساسية ألي شخص يرغب في‬
‫العمل في مجال تطوير الويب‪.‬‬
 ‫‪12‬‬

‫متعددة االستخدامات ‪:‬يمكن استخدام لغة ‪ HTML‬إلنشاء مختلف‬ ‫‪‬‬

‫أنواع صفحات الويب‪ ،‬من مواقع بسيطة إلى مواقع معقدة ذات‬
‫وظائف متعددة‪.‬‬
‫متوافقة مع جميع المتصفحات ‪:‬تدعم جميع المتصفحات الحديثة لغة‬ ‫‪‬‬

‫‪ ،HTML‬مما يضمن عرض صفحات الويب بشكل صحيح على‬

‫جميع األجهزة‪.‬‬
‫أساسيات كتابة كود‪HTML:‬‬
‫العناصر ‪:‬تتكون لغة ‪ HTML‬من مجموعة من العناصر‪ ،‬وكل‬ ‫‪‬‬

‫عنصر له وظيفة محددة‪ .‬تبدأ العناصر بعالمة البداية )<( وتنتهي‬

‫بعالمة النهاية)>( ‪ ،‬مثل >‪: <p‬و >‪ </p‬لكتابة فقرة نصية‪.‬‬
‫الوسوم ‪:‬تُستخدم الوسوم لتحديد خصائص العناصر‪،‬‬ ‫‪‬‬

‫مثل ‪: id‬و ‪ class‬و ‪ style.‬تُكتب الوسوم داخل عالمة البداية‬

‫للعنصر‪ ،‬مثل>"‪: <p id="myparagraph‬هذا مثال على فقرة‬
‫نصية‪</p>.‬‬
‫الهيكل ‪:‬يتم بناء هيكل الصفحة باستخدام العناصر ال ُمتداخلة‪ .‬على‬ ‫‪‬‬

‫سبيل المثال‪ ،‬يمكن استخدام عنصر >‪ <div‬إلنشاء قسم‪ ،‬وداخل‬

‫هذا القسم يمكن استخدام عنصر >‪ <p‬لكتابة فقرة نصية‪.‬‬
‫المحتوى ‪:‬يمكن إضافة محتوى نصي أو وسائط متعددة‪ ،‬مثل‬ ‫‪‬‬

‫الصور والفيديوهات‪ ،‬إلى داخل العناصر‪.‬‬

‫التعليقات ‪:‬يمكن استخدام التعليقات لشرح الكود أو إضافة‬ ‫‪‬‬

‫مالحظات‪ ،‬دون التأثير على عرض الصفحة‪ .‬تبدأ التعليقات بعالمة‬

‫‪``.‬‬
‫أمثلة على عناصر ‪ HTML‬شائعة‪:‬‬
‫‪<html>:‬العنصر الجذر الذي يحتوي على جميع عناصر الصفحة‬ ‫‪‬‬

‫األخرى‪.‬‬
 ‫‪13‬‬

‫‪<head>:‬يحتوي على معلومات حول الصفحة‪ ،‬مثل العنوان‬ ‫‪‬‬

‫ووصف الصفحة وربط الملفات الخارجية‪.‬‬

‫‪<body>:‬يحتوي على محتوى الصفحة الذي سيراه المستخدم‪.‬‬ ‫‪‬‬

‫>‪<h1‬إلى ‪ <h6>:‬عناوين النصوص من المستوى األول إلى‬ ‫‪‬‬

‫المستوى السادس‪.‬‬
‫‪<p>:‬فقرة نصية‪.‬‬ ‫‪‬‬

‫‪<img>:‬صورة‪.‬‬ ‫‪‬‬

‫‪<a>:‬رابط تشعبي‪.‬‬ ‫‪‬‬

‫‪<ul>:‬قائمة غير ُمرقمة‪.‬‬ ‫‪‬‬

‫‪<ol>:‬قائمة ُمرقمة‪.‬‬ ‫‪‬‬

‫‪<table>:‬جدول بيانات‪.‬‬ ‫‪‬‬

‫أساسيات لغة‪HTML‬‬
‫ما هي لغة‪ HTML‬؟‬
‫هي لغة توصيف النصوص التشعبية ‪(HyperText Markup‬‬
‫)‪Language‬وهي لغة برمجة أساسية لبناء صفحات الويب‪.‬‬
‫تُستخدم إلنشاء هيكل الصفحة وتنسيقها‪ ،‬وتحديد محتوىها من‬
‫نصوص وصور وروابط وفيديوهات وغيرها‪.‬‬
‫مميزات لغة‪HTML:‬‬
‫سهلة التعلم ‪:‬تتميز لغة ‪ HTML‬ببساطة قواعدها وسهولة فهمها‪،‬‬ ‫‪‬‬

‫حتى للمبتدئين‪.‬‬
‫واسعة االنتشار ‪:‬تُستخدم لغة ‪ HTML‬في جميع أنحاء العالم‬ ‫‪‬‬

‫إلنشاء مواقع الويب‪ ،‬مما يجعلها لغة أساسية ألي شخص يرغب في‬
‫العمل في مجال تطوير الويب‪.‬‬
 ‫‪14‬‬

‫متعددة االستخدامات ‪:‬يمكن استخدام لغة ‪ HTML‬إلنشاء مختلف‬ ‫‪‬‬

‫أنواع صفحات الويب‪ ،‬من مواقع بسيطة إلى مواقع معقدة ذات‬
‫وظائف متعددة‪.‬‬
‫متوافقة مع جميع المتصفحات ‪:‬تدعم جميع المتصفحات الحديثة لغة‬ ‫‪‬‬

‫‪ ،HTML‬مما يضمن عرض صفحات الويب بشكل صحيح على‬

‫جميع األجهزة‪.‬‬
‫أساسيات كتابة كود‪HTML:‬‬
‫العناصر ‪:‬تتكون لغة ‪ HTML‬من مجموعة من العناصر‪ ،‬وكل‬ ‫‪‬‬

‫عنصر له وظيفة محددة‪ .‬تبدأ العناصر بعالمة البداية )<( وتنتهي‬

‫بعالمة النهاية)>( ‪ ،‬مثل >‪: <p‬و >‪ </p‬لكتابة فقرة نصية‪.‬‬
‫الوسوم ‪:‬تُستخدم الوسوم لتحديد خصائص العناصر‪،‬‬ ‫‪‬‬

‫مثل ‪: id‬و ‪ class‬و ‪ style.‬تُكتب الوسوم داخل عالمة البداية‬

‫للعنصر‪ ،‬مثل>"‪: <p id="myparagraph‬هذا مثال على فقرة‬
‫نصية‪</p>.‬‬
‫الهيكل ‪:‬يتم بناء هيكل الصفحة باستخدام العناصر ال ُمتداخلة‪ .‬على‬ ‫‪‬‬

‫سبيل المثال‪ ،‬يمكن استخدام عنصر >‪ <div‬إلنشاء قسم‪ ،‬وداخل‬

‫هذا القسم يمكن استخدام عنصر >‪ <p‬لكتابة فقرة نصية‪.‬‬
‫المحتوى ‪:‬يمكن إضافة محتوى نصي أو وسائط متعددة‪ ،‬مثل‬ ‫‪‬‬

‫الصور والفيديوهات‪ ،‬إلى داخل العناصر‪.‬‬

‫التعليقات ‪:‬يمكن استخدام التعليقات لشرح الكود أو إضافة‬ ‫‪‬‬

‫مالحظات‪ ،‬دون التأثير على عرض الصفحة‪ .‬تبدأ التعليقات بعالمة‬

‫‪``.‬‬
‫أمثلة على عناصر ‪ HTML‬شائعة‪:‬‬
‫‪<html>:‬العنصر الجذر الذي يحتوي على جميع عناصر الصفحة‬ ‫‪‬‬

‫األخرى‪.‬‬
 ‫‪15‬‬

‫‪<head>:‬يحتوي على معلومات حول الصفحة‪ ،‬مثل العنوان‬ ‫‪‬‬

‫ووصف الصفحة وربط الملفات الخارجية‪.‬‬

‫‪<body>:‬يحتوي على محتوى الصفحة الذي سيراه المستخدم‪.‬‬ ‫‪‬‬

‫>‪<h1‬إلى ‪ <h6>:‬عناوين النصوص من المستوى األول إلى‬ ‫‪‬‬

‫المستوى السادس‪.‬‬
‫‪<p>:‬فقرة نصية‪.‬‬ ‫‪‬‬

‫‪<img>:‬صورة‪.‬‬ ‫‪‬‬

‫‪<a>:‬رابط تشعبي‪.‬‬ ‫‪‬‬

‫‪<ul>:‬قائمة غير ُمرقمة‪.‬‬ ‫‪‬‬

‫‪<ol>:‬قائمة ُمرقمة‪.‬‬ ‫‪‬‬

‫‪<table>:‬جدول بيانات‪.‬‬ ‫‪‬‬

‫نصائح لتعلم لغة‪HTML:‬‬

‫ابدأ بأساسيات اللغة ‪:‬قبل االنتقال إلى مواضيع أكثر تعقيدًا‪ ،‬تأكد من‬ ‫‪‬‬

‫فهمك لقواعد اللغة األساسية‪.‬‬

‫مارس الكتابة ‪:‬أفضل طريقة لتعلم لغة ‪ HTML‬هي الممارسة‪.‬‬ ‫‪‬‬

‫حاول كتابة صفحات ويب بسيطة وتجربة عناصر ووسوم مختلفة‪.‬‬

‫استخدم أدوات التطوير ‪:‬توفر معظم المتصفحات أدوات تطوير‬ ‫‪‬‬

‫تتيح لك عرض كود ‪ HTML‬للصفحة وتعديله‪.‬‬

‫اسأل عن المساعدة ‪:‬ال تتردد في طلب المساعدة من مجتمعات‬ ‫‪‬‬

‫المطورين عبر اإلنترنت أو من خالل المنتديات المتخصصة‪.‬‬

‫مع الممارسة والتعلم المستمر‪ ،‬ستتمكن من إتقان لغة ‪HTML‬‬
‫وإنشاء مواقع ويب احترافية‪.‬‬
 ‫‪16‬‬

‫هيكل مستند‪HTML‬‬
‫يتكون مستند ‪ HTML‬أساسي من عنصرين رئيسيين‪:‬‬
‫‪1.‬العنصر الجذر ‪<html>:‬‬
‫يحتوي هذا العنصر على جميع عناصر المستند األخرى‪.‬‬ ‫‪‬‬

‫يُستخدم لتحديد نوع المستند كملف‪HTML.‬‬ ‫‪‬‬

‫‪2.‬قسم الرأس ‪<head>:‬‬

‫يحتوي على معلومات وصفية حول المستند‪ ،‬مثل العنوان وترميز‬ ‫‪‬‬

‫الحروف‪.‬‬
‫ال يتم عرضه مباشرة ً في متصفح الويب‪.‬‬ ‫‪‬‬

‫عناصر مهمة داخل قسم الرأس‪:‬‬

‫العنوان ‪ <title>:‬يحدد عنوان الصفحة الذي يظهر في شريط‬ ‫‪‬‬

‫عنوان المتصفح‪.‬‬
‫البيانات الوصفية ‪ <meta>:‬توفر معلومات إضافية عن المستند‪،‬‬ ‫‪‬‬

‫مثل ترميز الحروف والكلمات الرئيسية‪.‬‬

‫االرتباطات الخارجية ‪ <link>:‬تربط ملفات ‪ CSS‬خارجية‬ ‫‪‬‬

‫بالصفحة لتنسيقها‪.‬‬
‫النصوص ‪ <script>:‬تربط ملفات ‪ JavaScript‬خارجية إلضافة‬ ‫‪‬‬

‫وظائف تفاعلية إلى الصفحة‪.‬‬

‫‪3.‬قسم الجسم ‪<body>:‬‬
‫يحتوي على المحتوى المرئي للمستند‪ ،‬مثل النصوص والصور‬ ‫‪‬‬

‫والروابط‪.‬‬
 ‫‪17‬‬

‫هو الجزء الذي يتم عرضه مباشرة ً في متصفح الويب‪.‬‬ ‫‪‬‬

‫عناصر شائعة داخل قسم الجسم‪:‬‬

‫فقرات ‪ <p>:‬تُستخدم لكتابة النص العادي‪.‬‬ ‫‪‬‬

‫العناوين >‪ <h1‬إلى ‪ <h6>:‬تُستخدم لتنسيق العناوين الرئيسية‬ ‫‪‬‬

‫والعناوين الفرعية‪.‬‬
‫القوائم >‪ <ul‬و ‪ <ol>:‬تُستخدم لعرض القوائم غير ال ُمرقمة‬ ‫‪‬‬

‫وال ُمرقمة‪.‬‬
‫الصور ‪ <img>:‬تُستخدم لعرض الصور‪.‬‬ ‫‪‬‬

‫الروابط ‪ <a>:‬تُستخدم إلنشاء روابط تشعبية إلى صفحات ويب‬ ‫‪‬‬

‫أخرى‪.‬‬
‫مالحظات‪:‬‬
‫يجب أن يكون لكل عنصر ‪ HTML‬عالمة بداية وعالمة نهاية‪.‬‬ ‫‪‬‬

‫غالبًا ما يتم اختصار عالمات ‪ HTML‬باستخدام قوسين زاويتين <‬ ‫‪‬‬

‫‪>.‬‬
‫يمكن إضافة صفات إلى العناصر لتغيير سلوكها أو مظهرها‪.‬‬ ‫‪‬‬

‫مثال على مستند ‪ HTML‬بسيط‪:‬‬

‫‪HTML‬‬
‫>‪<!DOCTYPE html‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪ <title‬مثال صفحة>‪HTML</title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪ <h1‬عنوان الصفحة>‪</h1‬‬
 ‫‪18‬‬

‫>‪ <p‬هذا مثال على فقرة>‪.</p‬‬

‫"=‪ <img src="image.jpg" alt‬صورة>"‬
‫>"‪ <a href="https://www.example.com‬رابط‬
‫تشعبي>‪</a‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫العناصر األساسية في‪HTML‬‬
‫تُعدّ لغة )‪HTML (HyperText Markup Language‬لغة‬
‫أساسية لبناء صفحات الويب‪ ،‬وتتكون من وحدات بناء تسمى‬
‫العناصر ‪.‬تُشكل هذه العناصر هيكل الصفحة وتحدد محتواها‬
‫وعرضها‪.‬‬
‫فيما يلي بعض العناصر األساسية في‪HTML:‬‬
‫‪1.‬إعالن نوع المستند‪(DOCTYPE):‬‬
‫يُستخدم هذا العنصر إلخبار المتصفح بنوع المستند الذي يتم‬
‫عرضه‪ .‬وهو العنصر األول في أي ملف ‪ HTML‬ويجب كتابته‬
‫على هذا النحو‪:‬‬
‫‪HTML‬‬
‫>‪<!DOCTYPE html‬‬
‫‪content_copy‬‬
‫‪2.‬العنصر الجذر‪(html):‬‬
‫يُمثل هذا العنصر العنصر الجذر لجميع عناصر ‪ HTML‬األخرى‬
‫في الصفحة‪ .‬ويحتوي على عنصرين رئيسيين هما‪:‬‬
 ‫‪19‬‬

‫رأس الصفحة ‪ (head):‬يحتوي على معلومات وصفية حول‬ ‫‪‬‬

‫الصفحة‪ ،‬مثل العنوان وترميز الحروف وروابط ملفات ‪ CSS‬و‬

‫‪JavaScript.‬‬
‫جسم الصفحة ‪ (body):‬يحتوي على المحتوى الذي يراه المستخدم‬ ‫‪‬‬

‫على الصفحة‪ ،‬مثل النصوص والصور والروابط‪.‬‬

‫‪3.‬عنوان الصفحة‪(title):‬‬
‫يُستخدم هذا العنصر لتحديد عنوان الصفحة الذي يظهر في شريط‬
‫عنوان المتصفح‪ .‬ويكتب داخل عنصر رأس الصفحة‪.‬‬
‫‪HTML‬‬
‫>‪<head‬‬
‫>‪ <title‬عنوان الصفحة>‪</title‬‬
‫>‪</head‬‬
‫‪4.‬العناوين‪(h1-h6):‬‬
‫تُستخدم هذه العناصر لتحديد عناوين مختلفة لمحتوى الصفحة‪ .‬تبدأ‬
‫من ( ‪h1‬ألكبر عنوان) وتنتهي بـ ( ‪h6‬ألصغر عنوان‪).‬‬
‫‪HTML‬‬
‫>‪<h1‬عنوان المستوى األول>‪</h1‬‬
‫>‪<h2‬عنوان المستوى الثاني>‪</h2‬‬
‫‪5.‬الفقرات‪(p):‬‬
‫تُستخدم هذه العناصر لكتابة النصوص في الصفحة‪.‬‬
‫‪HTML‬‬
 ‫‪20‬‬

‫>‪<p‬هذا مثال على فقرة>‪.</p‬‬

‫‪6.‬الصور‪(img):‬‬
‫تُستخدم هذه العناصر لعرض الصور على الصفحة‪.‬‬
‫‪HTML‬‬
‫"=‪<img src‬صورة"=‪.jpg" alt‬وصف الصورة>"‬
‫‪7.‬الروابط‪(a):‬‬
‫تُستخدم هذه العناصر إلنشاء روابط تشعبية إلى صفحات ويب‬
‫أخرى أو إلى ملفات‪.‬‬
‫‪HTML‬‬
‫>"‪<a href="https://www.example.com‬رابط‬
‫تشعبي>‪</a‬‬
‫‪8.‬القوائم‪(ul, ol, li):‬‬
‫تُستخدم هذه العناصر إلنشاء قوائم غير مرتبة )‪ (ul‬أو مرتبة ‪(ol).‬‬
‫تتكون القوائم من عناصر القائمة‪(li).‬‬
‫‪HTML‬‬
‫>‪<ul‬‬
‫>‪ <li‬عنصر القائمة ‪</li>1‬‬
‫>‪ <li‬عنصر القائمة ‪</li>2‬‬
‫>‪</ul‬‬
‫‪9.‬الجداول‪(table, tr, th, td):‬‬
 ‫‪21‬‬

‫تُستخدم هذه العناصر إلنشاء جداول على الصفحة‪ .‬تتكون الجداول‬

‫من صفوف )‪ (tr‬وأعمدة‪(th, td).‬‬
‫‪HTML‬‬
‫>‪<table‬‬
‫>‪<tr‬‬
‫>‪ <th‬عنوان العمود ‪</th>1‬‬
‫>‪ <th‬عنوان العمود ‪</th>2‬‬
‫>‪</tr‬‬
‫>‪<tr‬‬
‫>‪ <td‬بيانات الصف ‪ ،1‬العمود ‪</td>1‬‬
‫>‪ <td‬بيانات الصف ‪ ،1‬العمود ‪</td>2‬‬
‫>‪</tr‬‬
‫>‪</table‬‬
‫هذه مجرد أمثلة قليلة على العناصر األساسية في ‪ HTML.‬هناك‬
‫العديد من العناصر األخرى التي يمكنك استخدامها إلنشاء صفحات‬
‫ويب أكثر تعقيدًا‪.‬‬

‫تنسيق النصوص باستخدام‪HTML‬‬

‫تُستخدم لغة ‪ HTML‬إلنشاء صفحات الويب‪ ،‬ومن ضمن‬
‫إمكانياتها تنسيق النصوص بطرق مختلفة‪ .‬إليك بعض الوسوم‬
‫الشائعة المستخدمة لتنسيق النصوص‪:‬‬
‫‪1.‬الخط العريض‪:‬‬
 ‫‪22‬‬

‫الوسوم المستخدمة >‪: <b‬أو>‪<strong‬‬ ‫‪‬‬

‫مثال>‪: <b‬هذا النص بخط عريض >‪</b‬سيظهر" هذا النص بخط‬ ‫‪‬‬

‫عريض"‬
‫‪2.‬الخط المائل‪:‬‬
‫الوسوم المستخدمة >‪: <i‬أو>‪<em‬‬ ‫‪‬‬

‫مثال>‪: <i‬هذا النص مائل >‪</i‬سيظهر" هذا النص مائل"‬ ‫‪‬‬

‫‪3.‬النص ال ُمحذوف‪:‬‬
‫الوسوم المستخدمة>‪: <s‬‬ ‫‪‬‬

‫مثال>‪: <s‬هذا النص ُمحذوف >‪</s‬سيظهر" هذا النص ُمحذوف"‬ ‫‪‬‬

‫‪4.‬النص ال ُمرفوع‪:‬‬
‫الوسوم المستخدمة>‪: <sup‬‬ ‫‪‬‬

‫مثال>‪: <sup‬هذا النص مرفوع >‪</sup‬سيظهر" هذا النص‬ ‫‪‬‬

‫مرفوع"‬
‫‪5.‬النص ال ُمنخفض‪:‬‬
‫الوسوم المستخدمة>‪: <sub‬‬ ‫‪‬‬

‫مثال>‪: <sub‬هذا النص منخفض >‪</sub‬سيظهر" هذا النص‬ ‫‪‬‬

‫منخفض"‬
‫‪6.‬تغيير حجم الخط‪:‬‬
‫الوسوم المستخدمة ‪: <h1‬إلى>‪h6‬‬ ‫‪‬‬

‫مثال>‪: <h1‬هذا عنوان كبير >‪</h1‬سيظهر" هذا عنوان كبير"‬ ‫‪‬‬

‫‪7.‬تغيير لون الخط‪:‬‬

 ‫‪23‬‬

‫الوسوم المستخدمة>";‪: <span style="color: #rrggbb‬‬ ‫‪‬‬

‫مثال>";‪: <span style="color: #ff0000‬هذا النص‬ ‫‪‬‬

‫أحمر >‪</span‬سيظهر" هذا النص أحمر( "مع العلم أن‬

‫‪#ff0000‬هو رمز اللون األحمر)‬
‫‪8.‬إنشاء قوائم‪:‬‬
‫قوائم غير ُمرقمة >‪: <ul‬و >‪<li‬‬ ‫‪‬‬

‫مثال>‪: <ul><li‬عنصر ‪</li><li>1‬عنصر ‪</li><li>2‬عنصر‬ ‫‪‬‬

‫‪</li></ul> 3‬سيظهر قائمة غير ُمرقمة‬

‫قوائم ُمرقمة >‪: <ol‬و >‪<li‬‬ ‫‪‬‬

‫مثال>‪: <ol><li‬عنصر ‪</li><li>1‬عنصر ‪</li><li>2‬عنصر‬ ‫‪‬‬

‫‪</li></ol> 3‬سيظهر قائمة ُمرقمة‬

‫‪9.‬إنشاء عناوين فرعية‪:‬‬
‫الوسوم المستخدمة >‪: <p‬و >‪ <h2‬إلى>‪h6‬‬ ‫‪‬‬

‫مثال>‪: <p‬هذا هو الفقرة األولى>‪.</p><h2‬هذا هو العنوان‬ ‫‪‬‬

‫الفرعي األول>‪</h2><p‬هذا هو الفقرة الثانية >‪.</p‬سيظهر‬

‫"هذا هو الفقرة األولى ‪.‬هذا هو العنوان الفرعي األول هذا هو‬
‫الفقرة الثانية"‪.‬‬
‫مالحظات‪:‬‬
‫تأكد من إغالق جميع الوسوم بشكل صحيح‪.‬‬ ‫‪‬‬

‫يمكنك استخدام ‪ CSS‬لتنسيق النصوص بشكل ُمزيد من الدقة‪.‬‬ ‫‪‬‬

‫يوجد العديد من الوسوم األخرى المتاحة لتنسيق النصوص في‬ ‫‪‬‬

‫‪ ،HTML‬يمكنك التعرف عليها من خالل البحث على اإلنترنت‪.‬‬

‫إنشاء الروابط والصور في‪HTML‬‬
 ‫‪24‬‬

‫إنشاء الروابط‪:‬‬
‫إلنشاء رابط في‪ ، HTML‬نستخدم وسم ‪<a>.‬إليك بعض األمثلة‪:‬‬
‫ربط بصفحة أخرى‪:‬‬ ‫‪‬‬

‫‪HTML‬‬
‫>"‪<a href="https://www.example.com‬صفحة‬
‫مثال>‪</a‬‬
‫‪content_copy‬‬
‫ربط بعنوان في نفس الصفحة‪:‬‬ ‫‪‬‬

‫‪HTML‬‬
‫>"‪<a href="#myAnchor‬عنواني>‪</a‬‬
‫‪content_copy‬‬
‫إرسال بريد إلكتروني‪:‬‬ ‫‪‬‬

‫‪HTML‬‬
‫>"‪<a href="mailto:info@example.com‬إرسال بريد‬
‫إلكتروني>‪</a‬‬
‫‪content_copy‬‬
‫خصائص وسم ‪<a>:‬‬
‫‪href:‬تحدد وجهة الرابط‪.‬‬ ‫‪‬‬

‫‪target:‬تحدد أين يتم فتح الرابط (نافذة جديدة‪ ،‬نفس النافذة‪ ،‬إلخ‪).‬‬ ‫‪‬‬

‫صا توضيحيًا يظهر عند تمرير الماوس فوق الرابط‪.‬‬ ‫‪title:‬تحدد ن ً‬ ‫‪‬‬

‫مالحظة ‪:‬تأكد من إضافة عنوان لصفحتك باستخدام وسم ‪<title>.‬‬

 ‫‪25‬‬

‫إدراج الصور‪:‬‬
‫إلدراج صورة في‪ ، HTML‬نستخدم وسم ‪<img>.‬إليك مثال‪:‬‬
‫‪HTML‬‬
‫"‪<img src="https://www.example.com/image.jpg‬‬
‫"=‪alt‬وصف الصورة>"‬
‫‪content_copy‬‬
‫خصائص وسم ‪<img>:‬‬
‫‪src:‬تحدد مسار الصورة‪.‬‬ ‫‪‬‬

‫صا ً‬
‫بديال يظهر إذا لم تتمكن الصورة من التحميل أو إذا‬ ‫‪alt:‬تحدد ن ً‬ ‫‪‬‬

‫كان المستخدم يستخدم قارئ شاشة‪.‬‬

‫‪width:‬تحدد عرض الصورة‪.‬‬ ‫‪‬‬

‫‪height:‬تحدد ارتفاع الصورة‪.‬‬ ‫‪‬‬

‫مالحظة ‪:‬تأكد من أن لديك حقوق استخدام الصورة التي تريد‬

‫إدراجها‪.‬‬
‫استخدام الجداول في‪HTML‬‬
‫إلنشاء جدول في‪ ، HTML‬نستخدم العناصر التالية‪:‬‬
‫‪<table>:‬يبدأ الجدول‪.‬‬ ‫‪‬‬

‫‪<tr>:‬يبدأ صفًا جديدًا في الجدول‪.‬‬ ‫‪‬‬

‫‪<th>:‬يحدد خلية رأس الجدول‪.‬‬ ‫‪‬‬

‫‪<td>:‬يحدد خلية بيانات في الجدول‪.‬‬ ‫‪‬‬

‫‪</table:‬ينهي الجدول‪.‬‬ ‫‪‬‬

‫مثال‪:‬‬
 ‫‪26‬‬

‫‪HTML‬‬
‫>‪<table‬‬
‫>‪<tr‬‬
‫>‪ <th‬االسم>‪</th‬‬
‫>‪ <th‬العمر>‪</th‬‬
‫>‪ <th‬المهنة>‪</th‬‬
‫>‪</tr‬‬
‫>‪<tr‬‬
‫>‪ <td‬محمد>‪</td‬‬
‫>‪<td>30</td‬‬
‫>‪ <td‬مطور>‪</td‬‬
‫>‪</tr‬‬
‫>‪<tr‬‬
‫>‪ <td‬فاطمة>‪</td‬‬
‫>‪<td>25</td‬‬
‫>‪ <td‬معلمة>‪</td‬‬
‫>‪</tr‬‬
‫>‪</table‬‬
‫‪content_copy‬‬
‫خصائص الجداول‪:‬‬
‫‪border:‬تحدد حدود الجدول‪.‬‬ ‫‪‬‬

‫‪width:‬تحدد عرض الجدول‪.‬‬ ‫‪‬‬

‫‪cellspacing:‬تحدد المسافة بين خاليا الجدول‪.‬‬ ‫‪‬‬

‫‪cellpadding:‬تحدد المسافة بين محتوى خاليا الجدول وحوافها‪.‬‬ ‫‪‬‬

‫مالحظة ‪:‬يمكنك استخدام ‪ CSS‬لتنسيق الجداول بشكل أكبر‪.‬‬

 ‫‪27‬‬

‫أمثلة إضافية‪:‬‬
‫إنشاء جدول بعنوان‪:‬‬ ‫‪‬‬

‫‪HTML‬‬
‫>‪<table‬‬
‫>‪ <caption‬جدول عناوين الكتب>‪</caption‬‬
‫>‪<tr‬‬
‫>‪ <th‬العنوان>‪</th‬‬
‫>‪ <th‬المؤلف>‪</th‬‬
‫>‪ <th‬سنة النشر>‪</th‬‬
‫>‪</tr‬‬
‫>‪<tr‬‬
‫>‪ <td‬الكتاب األول>‪</td‬‬
‫>‪ <td‬المؤلف األول>‪</td‬‬
‫>‪<td>2020</td‬‬
‫>‪</tr‬‬
‫>‪<tr‬‬
‫>‪ <td‬الكتاب الثاني>‪</td‬‬
‫>‪ <td‬المؤلف الثاني>‪</td‬‬
‫>‪<td>2021</td‬‬
‫>‪</tr‬‬
‫>‪</table‬‬
‫‪content_copy‬‬
‫دمج خاليا‪:‬‬ ‫‪‬‬

‫‪HTML‬‬
‫>‪<table‬‬
 28

<tr>
</th>‫< معلومات الطالب‬th colspan="2">
</tr>
<tr>
</td>‫< االسم‬td>
</td>‫< محمد‬td>
</tr>
<tr>
</td>‫< العمر‬td>
<td>30</td>
</tr>
</table>
content_copy
:‫إنشاء جدول بخطوط عمودية وأفقية‬ 

HTML
<table border="1">
<tr>
</th>‫< االسم‬th>
</th>‫< العمر‬th>
</th>‫< المهنة‬th>
</tr>
<tr>
</td>‫< محمد‬td>
<td>30</td>
</td>‫< مطور‬td>
</tr>
 ‫‪29‬‬

‫>‪<tr‬‬
‫>‪ <td‬فاطمة>‪</td‬‬
‫>‪<td>25</td‬‬
‫>‪ <td‬معلمة>‪</td‬‬
‫>‪</tr‬‬
‫>‪</table‬‬
‫تصميم المواقع باستخدام‪CSS‬‬
‫‪CSS‬أو ‪Cascading Style Sheets‬هي لغة برمجة تُستخدم‬
‫لتنسيق وتصميم صفحات الويب‪ .‬تُكمل ‪HTML‬التي تُستخدم‬
‫إلنشاء بنية الصفحة‪ ،‬حيث تتحكم ‪CSS‬في مظهرها‪.‬‬
‫مميزات استخدام ‪ CSS‬في تصميم المواقع‪:‬‬
‫التحكم الدقيق ‪:‬تُتيح ‪ CSS‬التحكم الدقيق في جميع عناصر صفحة‬ ‫‪‬‬

‫الويب‪ ،‬مثل الخطوط واأللوان وحجم النص ومسافة الهامش‬

‫والتباعد وترتيب العناصر‪.‬‬
‫التوافق ‪:‬تدعم جميع متصفحات الويب الحديثة‪ ، CSS‬مما يضمن‬ ‫‪‬‬

‫أن يظهر موقعك اإللكتروني بشكل متسق على جميع األجهزة‪.‬‬

‫سهولة االستخدام ‪: CSS‬لغة سهلة التعلم نسبيًا‪ ،‬خاصةً للمبتدئين‪.‬‬ ‫‪‬‬

‫الكفاءة ‪:‬تُقلل ‪ CSS‬من حجم أكواد‪ ، HTML‬مما يجعل صفحات‬ ‫‪‬‬

‫الويب أسرع في التحميل‪.‬‬

‫إمكانية إعادة االستخدام ‪:‬يمكن تعريف أنماط ‪ CSS‬وإعادة‬ ‫‪‬‬

‫استخدامها في صفحات متعددة‪ ،‬مما يوفر الوقت ويُعزز اتساق‬

‫التصميم‪.‬‬
‫التجاوب ‪:‬تُتيح ‪ CSS‬تصميم مواقع ويب تتكيف مع مختلف أحجام‬ ‫‪‬‬

‫الشاشات‪ ،‬مثل الهواتف الذكية واألجهزة اللوحية وأجهزة الكمبيوتر‬

‫المكتبية‪.‬‬
 ‫‪30‬‬

‫مكونات أساسية لتصميم المواقع باستخدام‪CSS:‬‬

‫المحددات ‪ (Selectors):‬تُستخدم لتحديد العناصر التي تريد‬ ‫‪‬‬

‫تطبيق األنماط عليها‪.‬‬

‫الخصائص ‪ (Properties):‬تُحدد الخصائص كيفية تنسيق‬ ‫‪‬‬

‫العناصر المحددة‪.‬‬
‫القيم ‪ (Values):‬تُحدد القيم كيفية تطبيق الخصائص‪.‬‬ ‫‪‬‬

‫نصائح لتصميم المواقع باستخدام‪CSS:‬‬

‫ابدأ بتعلم أساسيات‪CSS.‬‬ ‫‪‬‬

‫استخدم ‪ CSS‬لتنسيق محتوى‪ ، HTML‬وليس إلنشاء بنيته‪.‬‬ ‫‪‬‬

‫استخدم المحددات بذكاء لتجنب كتابة أكواد ‪ CSS‬زائدة‪.‬‬ ‫‪‬‬

‫استخدم ‪ CSS Grid‬أو ‪ Flexbox‬إلنشاء تخطيطات مرنة‪.‬‬ ‫‪‬‬

‫اختبر موقعك اإللكتروني على مختلف األجهزة‪.‬‬ ‫‪‬‬

‫**استمر في التعلم ومواكبة أحدث تقنيات‪CSS.‬‬ ‫‪‬‬

‫مع الممارسة والتعلم المستمر‪ ،‬ستتمكن من تصميم مواقع ويب‬

‫جميلة وجذابة باستخدام‪CSS.‬‬

‫مقدمة إلى ‪CSS‬‬

‫ما هو ‪CSS‬؟‬
‫‪ CSS‬تعني ‪ ،Cascading Style Sheets‬وهي لغة برمجة‬
‫بسيطة تُستخدم لتنسيق صفحات الويب‪ .‬تُستخدم ‪ CSS‬لوصف‬
 ‫‪31‬‬

‫مظهر العناصر في صفحة ويب‪ ،‬مثل األلوان والخطوط وحجم‬

‫الخطوط والتباعد والتخطيط‪.‬‬
‫لماذا ‪ CSS‬مهمة؟‬
‫‪ CSS‬مهمة ألنها تسمح لك بإنشاء صفحات ويب جذابة وسهلة‬
‫االستخدام‪ .‬بدون ‪ ،CSS‬ستكون صفحات الويب بسيطة ورتيبة‪.‬‬
‫كيف تعمل ‪CSS‬؟‬
‫تعمل ‪ CSS‬عن طريق ربط قواعد التصميم بعناصر ‪.HTML‬‬
‫عرف قواعد التصميم كيفية عرض عنصر ‪ HTML‬معين‪ .‬على‬ ‫تُ ّ‬
‫سبيل المثال‪ ،‬يمكنك استخدام ‪ CSS‬لتحديد لون خط عنوان أو حجم‬
‫صورة أو تباعد فقرة‪.‬‬
‫مزايا استخدام ‪:CSS‬‬
‫تحسين سهولة االستخدام‪ :‬تجعل ‪ CSS‬صفحات الويب أكثر‬ ‫‪‬‬

‫سهولة في القراءة واالستخدام‪.‬‬

‫تحسين المظهر‪ :‬تتيح لك ‪ CSS‬إنشاء صفحات ويب أكثر جاذبية‪.‬‬ ‫‪‬‬

‫إمكانية الصيانة‪ :‬تسهل ‪ CSS‬صيانة صفحات الويب‪ ،‬حيث يمكنك‬ ‫‪‬‬

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

‫التوافق‪ :‬تدعم جميع متصفحات الويب الحديثة ‪.CSS‬‬ ‫‪‬‬

‫كيفية تعلم ‪:CSS‬‬

‫هناك العديد من الموارد المتاحة لتعلم ‪ .CSS‬يمكنك العثور على‬
‫ضا تجربة‬‫دروس تعليمية ومقاالت وكتب على اإلنترنت‪ .‬يمكنك أي ً‬
‫أدوات التطوير في متصفح الويب الخاص بك لمشاهدة كيفية تأثير‬
‫قواعد ‪ CSS‬المختلفة على صفحة ويب‪.‬‬
 ‫‪32‬‬

‫‪‬‬

‫نصائح لتعلم ‪:CSS‬‬

‫ابدأ بأساسيات ‪ :CSS‬قبل أن تبدأ في إنشاء تصميمات معقدة‪ ،‬تأكد‬ ‫‪‬‬

‫من فهمك لألساسيات‪ ،‬مثل المحددات والخصائص وقيم‬

‫الخصائص‪.‬‬
‫مارس ما تتعلمه‪ :‬أفضل طريقة لتعلم ‪ CSS‬هي الممارسة‪ .‬حاول‬ ‫‪‬‬

‫إنشاء صفحات ويب بسيطة وتجربة قواعد ‪ CSS‬مختلفة‪.‬‬

‫ال تستسلم‪ :‬قد يكون تعلم ‪ CSS‬صعبًا في البداية‪ ،‬لكن ال تستسلم‪.‬‬ ‫‪‬‬

‫مع الممارسة‪ ،‬ستصبح أفضل في ذلك‪.‬‬

‫ختا ًما‪:‬‬
‫‪ CSS‬هي أداة قوية يمكن استخدامها إلنشاء صفحات ويب جذابة‬
‫وسهلة االستخدام‪ .‬إذا كنت مهت ًما بتصميم الويب‪ ،‬فإن تعلم ‪CSS‬‬
‫أمر ضروري‪.‬‬
‫محددات ‪ :CSS‬مفتاح تنسيق صفحاتك اإللكترونية‬
‫في عالم تصميم وتطوير المواقع اإللكترونية‪ ،‬تُعدّ محددات ‪CSS‬‬
‫(‪ )CSS Selectors‬أدوات أساسية لتنظيم وتنسيق مظهر‬
‫الصفحات‪ .‬فهي بمثابة مفاتيح سحرية تمنحك القدرة على استهداف‬
‫عناصر محددة داخل محتوى ‪ HTML‬وتطبيق خصائص ‪CSS‬‬
‫عليها‪.‬‬
‫ما هي أنواع محددات ‪CSS‬؟‬
‫تتنوع أنواع محددات ‪ CSS‬لتُلبي احتياجات مختلفة‪ ،‬ونذكر من‬
‫أهمها‪:‬‬
 ‫‪33‬‬

‫محددات النوع (‪ :)Type Selectors‬تحدد نوع العنصر‬ ‫‪‬‬

‫‪ ،HTML‬مثل ‪ p‬للفقرات و ‪ h1‬للعناوين‪.‬‬

‫عنصرا محددًا‬
‫ً‬ ‫محددات المعرف (‪ :)ID Selectors‬تستهدف‬ ‫‪‬‬

‫بمعرف فريد باستخدام ‪ ،#‬مثل ‪ header#‬للعنوان الرئيسي‪.‬‬

‫محددات الطبقة (‪ :)Class Selectors‬تُطبق التنسيق على‬ ‫‪‬‬

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

‫محددات النسل (‪ :)Descendant Selectors‬تحدد العناصر‬ ‫‪‬‬

‫الموجودة داخل عنصر آخر‪ ،‬مثل ‪ div p‬لجميع الفقرات داخل‬

‫عنصر ‪.div‬‬
‫محددات السلف (‪ :)Ancestor Selectors‬تستهدف العناصر‬ ‫‪‬‬

‫الموجودة أعلى عنصر محدد‪ ،‬مثل ‪ p ~ h2‬لعناوين ‪ h2‬بعد كل‬

‫فقرة‪.‬‬
‫محددات السمة (‪ :)Attribute Selectors‬تُحدد العناصر بنا ًء‬ ‫‪‬‬

‫على قيم سمات ‪ ،HTML‬مثل ‪ ]a[href‬لجميع الروابط‪.‬‬

‫محددات ‪ :pseudo-classes‬تُطبق التنسيق على حاالت خاصة‬ ‫‪‬‬

‫للعناصر‪ ،‬مثل ‪ hover:‬عند تحريك الماوس فوق عنصر‪.‬‬

‫كيف تُستخدم محددات ‪CSS‬؟‬
‫تتكون قاعدة ‪ CSS‬من جزئين رئيسيين‪ :‬المحدد و إعالن الخاصية‪.‬‬
‫يحدد المحدد العناصر التي ستتأثر بالقاعدة‪ ،‬بينما يُحدد إعالن‬
‫الخاصية قيمة الخصائص التي سيتم تطبيقها على تلك العناصر‪.‬‬
‫على سبيل المثال‪ ،‬لتغيير لون جميع الفقرات في صفحة ‪HTML‬‬
‫إلى اللون األحمر‪ ،‬يمكنك استخدام الكود التالي‪:‬‬
‫‪CSS‬‬
‫{‪p‬‬
 ‫‪34‬‬

‫;‪color: red‬‬
‫}‬
‫‪content_copy‬‬
‫نصائح الستخدام محددات ‪ CSS‬بفعالية‪:‬‬
‫كن محددًا قدر اإلمكان‪ :‬كلما كان المحدد أكثر تحديدًا‪ ،‬زادت دقة‬ ‫‪‬‬

‫تطبيق القاعدة‪.‬‬
‫استخدم التسلسل الصحيح‪ :‬يتم تطبيق قواعد ‪ CSS‬من أعلى إلى‬ ‫‪‬‬

‫أسفل‪ ،‬مع إعطاء األولوية للمحددات األكثر تحديدًا‪.‬‬

‫استخدم مجموعات المحددات‪ :‬يمكنك الجمع بين أنواع مختلفة من‬ ‫‪‬‬

‫المحددات إلنشاء قواعد معقدة‪.‬‬

‫تعرف على محددات ‪ CSS‬الحديثة‪ :‬تتضمن إصدارات ‪CSS‬‬ ‫‪‬‬

‫الحديثة العديد من المحددات الجديدة القوية‪.‬‬

‫مع إتقانك لمحددات ‪ ،CSS‬ستتمكن من تحويل أفكارك‬
‫التصميمية إلى واقع ملموس‪ ،‬وخلق تجارب مستخدم ُمذهلة‬
‫على صفحاتك اإللكترونية‪.‬‬
‫خصائص‪CSS:‬‬
‫)‪CSS (Cascading Style Sheets‬هي لغة تستخدم‬
‫لتنسيق صفحات الويب‪ .‬تُستخدم لوصف كيفية عرض عناصر‬
‫‪HTML‬على الشاشة أو الورق أو في وسائل أخرى‪.‬‬
‫تشمل بعض خصائص ‪ CSS‬الشائعة ما يلي‪:‬‬
‫األلوان ‪:‬يمكنك استخدام ‪ CSS‬لتحديد لون النص والخلفيات‬ ‫‪‬‬

‫والعناصر األخرى‪.‬‬
 ‫‪35‬‬

‫الخطوط ‪:‬يمكنك استخدام ‪ CSS‬لتحديد نوع الخط وحجمه ووزنه‬ ‫‪‬‬

‫ونمطه‪.‬‬
‫المسافات ‪:‬يمكنك استخدام ‪ CSS‬لتحديد المسافة بين العناصر‪.‬‬ ‫‪‬‬

‫الحواف ‪:‬يمكنك استخدام ‪ CSS‬لتحديد سمك ولون ونوع حواف‬ ‫‪‬‬

‫العناصر‪.‬‬
‫التبطين ‪:‬يمكنك استخدام ‪ CSS‬لتحديد المساحة الفارغة حول‬ ‫‪‬‬

‫محتوى العنصر‪.‬‬
‫الموضع ‪:‬يمكنك استخدام ‪ CSS‬لتحديد موقع العناصر على‬ ‫‪‬‬

‫الصفحة‪.‬‬
‫العرض ‪:‬يمكنك استخدام ‪ CSS‬لتحديد عرض وارتفاع العناصر‪.‬‬ ‫‪‬‬

‫الخلفية ‪:‬يمكنك استخدام ‪ CSS‬لتحديد لون أو صورة الخلفية‬ ‫‪‬‬

‫لعناصر‪.‬‬
‫الحدود ‪:‬يمكنك استخدام ‪ CSS‬إلنشاء حدود حول العناصر‪.‬‬ ‫‪‬‬

‫التأثيرات ‪:‬يمكنك استخدام ‪ CSS‬إلضافة تأثيرات إلى العناصر‪،‬‬ ‫‪‬‬

‫مثل التظليل والتظليل والتدرج اللوني‪.‬‬

‫باإلضافة إلى هذه الخصائص األساسية‪ ،‬هناك العديد من‬
‫خصائص ‪ CSS‬األخرى المتاحة لتحديد مظهر صفحات الويب‬
‫بشكل أكثر تفصيلا‪.‬‬
‫ملحظات‪:‬‬
‫‪CSS‬هي لغة سهلة التعلم نسبياا‪ ،‬ولكن هناك الكثير لتعلمه‪.‬‬ ‫‪‬‬

‫هناك العديد من موارد التعلم المتاحة عبر اإلنترنت لمساعدتك‬ ‫‪‬‬

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

‫مع الممارسة‪ ،‬ستتمكن من إنشاء صفحات ويب جميلة وجذابة‪.‬‬ ‫‪‬‬
 ‫‪36‬‬

‫تنسيق العناصر باستخدام‪CSS‬‬

‫( ‪CSS‬أوراق األنماط المتتالية) هي لغة برمجة تُستخدم لتنسيق‬
‫مظهر صفحات الويب‪ .‬تُتيح لك ‪ CSS‬التحكم في مظهر العناصر‬
‫على الصفحة‪ ،‬مثل‪:‬‬
‫األلوان ‪:‬يمكنك تغيير لون خط النص‪ ،‬ولون الخلفية‪ ،‬ولون‬ ‫‪‬‬

‫الروابط‪ ،‬وغيرها‪.‬‬
‫األحجام ‪:‬يمكنك التحكم في حجم الخط‪ ،‬وعرض العناصر‪،‬‬ ‫‪‬‬

‫وارتفاعها‪ ،‬وحجم الهامش‪ ،‬وحجم الحشو‪.‬‬

‫الخطوط ‪:‬يمكنك تحديد نوع الخط المستخدم‪ ،‬ووزنه‪ ،‬وحجمه‪.‬‬ ‫‪‬‬

‫الموضع ‪:‬يمكنك التحكم في موضع العناصر على الصفحة‪ ،‬مثل‪:‬‬ ‫‪‬‬

‫محاذاتها إلى اليمين أو اليسار أو الوسط‪ ،‬وتحديد المسافة بينها‪.‬‬

‫الحدود ‪:‬يمكنك إضافة حدود حول العناصر‪ ،‬وتحديد لونها وسمكها‬ ‫‪‬‬

‫ونوعها‪.‬‬
‫الخلفية ‪:‬يمكنك إضافة صورة أو لون إلى خلفية أي عنصر‪.‬‬ ‫‪‬‬

‫التأثيرات ‪:‬يمكنك إضافة تأثيرات إلى العناصر‪ ،‬مثل‪ :‬التظليل‬ ‫‪‬‬

‫والتدرج اللوني والتأثيرات عند تحريك الماوس فوقها‪.‬‬

‫كيفية استخدام‪CSS:‬‬
‫هناك طريقتان رئيسيتان الستخدام‪CSS:‬‬
‫األنماط ال ُمضمنة ‪:‬يمكنك إضافة ‪ CSS‬مباشرة ً إلى عنصر‬ ‫‪‬‬

‫‪HTML‬باستخدام سمة‪style.‬‬
‫أوراق األنماط الخارجية ‪:‬يمكنك كتابة ‪ CSS‬في ملف منفصل‬ ‫‪‬‬

‫)‪(.css‬ثم ربطه بصفحة ‪ HTML‬باستخدام عالمة‪<link>.‬‬

 ‫‪37‬‬

‫مثال على تنسيق عنصر باستخدام‪CSS:‬‬

‫‪HTML‬‬
‫>‪<!DOCTYPE html‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪p‬‬
‫;‪color: red‬‬
‫;‪font-size: 20px‬‬
‫;‪text-align: center‬‬
‫}‬
‫>‪</style‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<p‬هذا هو مثال على تنسيق عنصر باستخدام>‪CSS.</p‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫‪content_copy‬‬
‫في هذا المثال‪ ،‬ستقوم ‪ CSS‬بتغيير لون جميع عناصر >‪<p‬إلى‬
‫اللون األحمر‪ ،‬وزيادة حجم الخط إلى ‪ 20‬بكسل‪ ،‬ومحاذاة النص‬
‫إلى الوسط‪.‬‬
 ‫‪38‬‬

‫نصائح لتنسيق العناصر باستخدام‪CSS:‬‬

‫ابدأ بأساسيات ‪ CSS:‬قبل البدء بتنسيق صفحات الويب المعقدة‪،‬‬ ‫‪‬‬

‫تأكد من أنك تفهم أساسيات‪ ، CSS‬مثل‪ :‬المحددات‪ ،‬وكتل‬

‫اإلعالنات‪ ،‬والخصائص‪ ،‬والقيم‪.‬‬
‫استخدم التعليقات ‪:‬أضف تعليقات إلى ‪ CSS‬الخاص بك لجعله‬ ‫‪‬‬

‫أكثر قابلية للقراءة والفهم‪.‬‬

‫استخدم أداة فحص الصفحة ‪:‬تتيح لك معظم المتصفحات أداة‬ ‫‪‬‬

‫فحص الصفحة التي تتيح لك رؤية ‪ CSS‬المطبق على أي عنصر‬

‫على الصفحة‪.‬‬
‫جرب‬‫جرب أشياء جديدة ‪:‬أفضل طريقة لتعلم ‪ CSS‬هي تجربته‪ّ .‬‬ ‫ّ‬ ‫‪‬‬

‫أشياء مختلفة وانظر كيف تؤثر على مظهر صفحات الويب‬

‫الخاصة بك‪.‬‬
‫مع الممارسة‪ ،‬ستتمكن من استخدام ‪ CSS‬إلنشاء صفحات ويب‬
‫جميلة وجذابة‪.‬‬

‫إنشاء تخطيطات الصفحات باستخدام‪CSS‬‬

‫تُعدّ( ‪ CSS‬أو )‪ Cascading Style Sheets‬لغة برمجة أساسية‬
‫لتنسيق صفحات الويب‪ ،‬حيث تتيح لك التحكم بمظهر وتخطيط‬
‫العناصر المختلفة على الصفحة‪ .‬توفر ‪ CSS‬أدوات قوية إلنشاء‬
‫تخطيطات متنوعة‪ ،‬بد ًءا من التصميمات البسيطة ذات العمود‬
‫ً‬
‫وصوال إلى التخطيطات المعقدة متعددة األعمدة وتصميمات‬ ‫الواحد‬
‫الشبكات‪.‬‬
 ‫‪39‬‬

‫تقنيات أساسية لتنسيق الصفحات‪:‬‬

‫خاصية العرض ‪ (display):‬تُحدد هذه الخاصية كيفية عرض‬ ‫‪‬‬

‫عنصر ‪ HTML‬على الصفحة‪ .‬تشمل القيم‬

‫الشائعة ‪ block‬و ‪ inline‬و ‪ flex‬و‪grid.‬‬
‫‪block:‬يُعرض العنصر ككتلة تشغل عرض الصفحة بالكامل‪.‬‬ ‫‪o‬‬

‫‪inline:‬يُعرض العنصر ضمن سطر واحد مع العناصر المجاورة‪.‬‬ ‫‪o‬‬

‫‪flex:‬يُتيح إنشاء تخطيطات مرنة باستخدام الصناديق المرنة‪.‬‬ ‫‪o‬‬

‫‪grid:‬يُتيح إنشاء تخطيطات شبكية قابلة للتكيف‪.‬‬ ‫‪o‬‬

‫الت َ َموضع ‪ (positioning):‬يُحدد موقع العنصر بدقة على‬ ‫‪‬‬

‫الصفحة‪ُ ،‬مم ّكنًا من تحريره من التدفق الطبيعي للعناصر‪.‬‬

‫‪static:‬الموقع االفتراضي للعنصر ضمن تدفق الصفحة‪.‬‬ ‫‪o‬‬

‫‪absolute:‬يتموضع العنصر نسبيًا إلى أقرب‬ ‫‪o‬‬

‫عنصر ُموضع‪(positioned).‬‬
‫‪fixed:‬يتموضع العنصر نسبيًا إلى نافذة المتصفح‪.‬‬ ‫‪o‬‬

‫‪relative:‬يتموضع العنصر نسبيًا لموقعه األصلي في تدفق‬ ‫‪o‬‬

‫الصفحة‪.‬‬
‫المسافات )‪ (margins‬والحواف ‪ (padding):‬تُحدد المسافات‬ ‫‪‬‬

‫الفارغة حول العنصر وداخله‪.‬‬

‫العرض )‪ (width‬واالرتفاع ‪ (height):‬يُحددان أبعاد العنصر‪.‬‬ ‫‪‬‬

‫التحكم في المحاذاة ‪ (alignment):‬يُحدد كيفية محاذاة محتوى‬ ‫‪‬‬

‫العنصر أفقيًا ورأسيًا‪.‬‬

‫نماذج تخطيط شائعة‪:‬‬
‫التصميم ذو العمود الواحد ‪:‬أبسط نموذج‪ ،‬حيث يتم ترتيب‬ ‫‪‬‬

‫العناصر واحدًا فوق اآلخر‪.‬‬

 ‫‪40‬‬

‫التصميم ذو العمودين ‪:‬يُقسم الصفحة إلى عمودين جانبيين‪ ،‬عادة ً‬ ‫‪‬‬

‫لمحتوى النص واإلعالنات أو القوائم الجانبية‪.‬‬

‫التصميم ذو ثالثة أعمدة ‪:‬يُقسم الصفحة إلى ثالثة أعمدة‪ ،‬غالبًا‬ ‫‪‬‬

‫لمحتوى النص على الجانبين وشريط جانبي في المنتصف‪.‬‬

‫تصميم الشبكة ‪:‬يُستخدم إلنشاء تخطيطات مرصوفة من العناصر‪،‬‬ ‫‪‬‬

‫مثل المعارض أو قوائم المنتجات‪.‬‬

‫أدوات مساعدة‪:‬‬
‫أدوات التفتيش ‪ (Developer Tools):‬توفر معظم المتصفحات‬ ‫‪‬‬

‫أدوات مدمجة لعرض وتعديل قواعد ‪ CSS‬في الوقت الفعلي‪.‬‬

‫إطارات عمل ‪ CSS:‬مثل ‪ Bootstrap‬و‪ ، Foundation‬تُقدم‬ ‫‪‬‬

‫مجموعات جاهزة من مكونات ‪ CSS‬لتسهيل إنشاء تخطيطات‬

‫شائعة‪.‬‬
‫مواقع تعليمية ‪:‬تتوفر العديد من المواقع اإللكترونية والدورات‬ ‫‪‬‬

‫المجانية لتعلم‪ ، CSS‬مثل ‪ MDN Web Docs‬و‪CSS Tricks.‬‬

‫استخدام االستعالمات الوسيطة إلنشاء مواقع ويب‬

‫متجاوبة‪CSS‬‬
‫تُعدّ االستعالمات الوسيطة )‪ (Media Queries‬في ‪ CSS‬أداة‬
‫أساسية إلنشاء مواقع ويب متجاوبة تتكيف مع مختلف أحجام‬
‫الشاشات واألجهزة‪ .‬تسمح لك هذه االستعالمات بتحديد قواعد‬
‫‪CSS‬مختلفة بنا ًء على خصائص العرض مثل عرض الشاشة‬
‫وارتفاعها واتجاهها‪.‬‬
‫خطوات استخدام االستعالمات الوسيطة‪:‬‬
 ‫‪41‬‬

‫‪ .1‬تحديد نقطة االنهيار ‪:‬حدد النقطة التي تريد أن يتغير فيها تصميم‬
‫موقعك اإللكتروني استجابةً لحجم الشاشة‪ .‬على سبيل المثال‪ ،‬قد‬
‫ترغب في تغيير تصميم موقعك من ثالثة أعمدة إلى عمودين عندما‬
‫يكون عرض الشاشة أقل من ‪ 768‬بكسل‪.‬‬
‫‪ .2‬إنشاء استعالم وسائط ‪:‬استخدم ‪ @media query‬لتحديد قواعد‬
‫‪CSS‬التي تريد تطبيقها عند استيفاء شروط معينة‪ .‬على سبيل‬
‫المثال‪:‬‬
‫‪CSS‬‬
‫{ )‪@media (max-width: 768px‬‬
‫*‪ /‬قواعد ‪ CSS‬لتغيير التصميم عند عرض الشاشة أقل من ‪768‬‬
‫بكسل‪*/‬‬
‫}‬
‫‪ .3‬تطبيق قواعد ‪ CSS:‬داخل استعالم الوسائط‪ ،‬يمكنك تطبيق قواعد‬
‫‪CSS‬كما تفعل عادةً‪ .‬على سبيل المثال‪ ،‬يمكنك تغيير عرض‬
‫العناصر‪ ،‬وتعديل حجم الخط‪ ،‬وإعادة ترتيب المحتوى‪.‬‬
‫نصائح الستخدام االستعالمات الوسيطة بشكل فعال‪:‬‬
‫استخدم وحدات قياس نسبية ‪:‬استخدم وحدات قياس‬ ‫‪‬‬

‫مثل ‪ %‬و ‪ vw‬و ‪ vh‬بدالً من ‪ px‬لضمان تناسق التصميم على‬

‫مختلف أحجام الشاشات‪.‬‬
‫اختبر موقعك على أجهزة مختلفة ‪:‬تأكد من اختبار موقعك على‬ ‫‪‬‬

‫أجهزة مختلفة ذات أحجام شاشات مختلفة للتأكد من مظهره وتفاعله‬

‫بشكل صحيح‪.‬‬
 ‫‪42‬‬

‫استخدم أدوات االستعالمات الوسيطة ‪:‬تتوفر العديد من األدوات‬ ‫‪‬‬

‫عبر اإلنترنت التي تساعدك في إنشاء استعالمات الوسيطة‬

‫واختبارها‪.‬‬
‫إضافة وظائف تفاعلية باستخدام ‪Javascript‬‬
‫تُعدّ ‪ Javascript‬لغة برمجة أساسية لجعل مواقع الويب تفاعلية‪.‬‬
‫من خالل دمج ‪ Javascript‬مع ‪ HTML‬و ‪ ،CSS‬يمكنك إنشاء‬
‫صفحات ويب ديناميكية تستجيب لمدخالت المستخدم وتوفر تجربة‬
‫مستخدم أكثر جاذبية‪.‬‬
‫إليك بعض األمثلة على كيفية استخدام ‪ Javascript‬إلضافة‬
‫وظائف تفاعلية‪:‬‬
‫معالجة النماذج‪:‬‬ ‫‪‬‬

‫التحقق من صحة إدخال المستخدم قبل إرسال النموذج‪.‬‬ ‫‪o‬‬

‫منع إرسال النموذج إذا كانت هناك أي حقول مطلوبة فارغة‪.‬‬ ‫‪o‬‬

‫عرض رسائل الخطأ للمستخدمين عند إدخال بيانات غير صحيحة‪.‬‬ ‫‪o‬‬

‫إرسال بيانات النموذج إلى الخادم ومعالجة االستجابة‪.‬‬ ‫‪o‬‬

‫التأثيرات المرئية‪:‬‬ ‫‪‬‬

‫إنشاء رسوم متحركة وانتقاالت ديناميكية‪.‬‬ ‫‪o‬‬

‫عرض أو إخفاء عناصر الصفحة بنا ًء على تفاعل المستخدم‪.‬‬ ‫‪o‬‬

‫تغيير ألوان العناصر أو خصائصها األخرى استجابة لمدخالت‬ ‫‪o‬‬

‫المستخدم‪.‬‬
‫السلوك التفاعلي‪:‬‬ ‫‪‬‬

‫إنشاء قوائم منسدلة قابلة للتفاعل‪.‬‬ ‫‪o‬‬

‫السماح للمستخدمين بتحديد صور أو ملفات متعددة‪.‬‬ ‫‪o‬‬

‫عرض صور أو مقاطع فيديو قابلة للتكبير‪.‬‬ ‫‪o‬‬

‫إنشاء خرائط تفاعلية أو رسومات بيانية‪.‬‬ ‫‪o‬‬

 ‫‪43‬‬

‫ألعاب بسيطة وتطبيقات ويب‪:‬‬ ‫‪‬‬

‫إنشاء ألعاب بسيطة مثل ألعاب ألغاز أو ألعاب لوحية‪.‬‬ ‫‪o‬‬

‫تطوير تطبيقات ويب بسيطة مثل حاسبات أو محوالت وحدات‪.‬‬ ‫‪o‬‬

‫إنشاء أدوات إبداعية مثل لوحات رسم أو محررات موسيقية‪.‬‬ ‫‪o‬‬

‫نصائح لتعلم ‪:Javascript‬‬

‫ابدأ بأساسيات اللغة‪ :‬قبل االنتقال إلى مشاريع أكثر تعقيدًا‪ ،‬تأكد من‬ ‫‪‬‬

‫فهمك لمفاهيم ‪ Javascript‬األساسية مثل المتغيرات واألنواع‬

‫والوظائف والحلقات‪.‬‬
‫مارس بانتظام‪ :‬أفضل طريقة لتعلم ‪ Javascript‬هي الممارسة‬ ‫‪‬‬

‫بانتظام‪ .‬حاول كتابة بعض التعليمات البرمجية كل يوم‪ ،‬حتى لو‬

‫كانت مجرد أمثلة بسيطة‪.‬‬
‫ابحث عن مشاريع للعمل عليها‪ :‬بمجرد أن تشعر براحة أكبر مع‬ ‫‪‬‬

‫األساسيات‪ ،‬ابحث عن مشاريع للعمل عليها‪ .‬سيساعدك هذا على‬

‫تطبيق مهاراتك وتعلم أشياء جديدة‪.‬‬
‫ال تستسلم‪ :‬قد يكون تعلم ‪ Javascript‬صعبًا في بعض األحيان‪،‬‬ ‫‪‬‬

‫لكن ال تستسلم‪ .‬استمر في الممارسة وستتحسن بمرور الوقت‪.‬‬

‫مع الممارسة والتفاني‪ ،‬يمكنك تعلم ‪ Javascript‬وإنشاء‬
‫مواقع ويب تفاعلية ورائعة‪.‬‬

‫‪1‬‬
 ‫‪44‬‬

‫مقدمة إلى ‪Javascript‬‬

‫ما هي ‪Javascript‬؟‬
‫‪ Javascript‬هي لغة برمجة ديناميكية تُستخدم بشكل أساسي‬
‫لجعل صفحات الويب أكثر تفاعلية‪ .‬تُمكنك ‪ Javascript‬من إضافة‬
‫ميزات مثل‪:‬‬
‫التفاعل مع المستخدم‪ :‬مثل الضغط على األزرار‪ ،‬وتغيير محتوى‬ ‫‪‬‬

‫الصفحة‪ ،‬والتحقق من صحة البيانات المدخلة‪.‬‬

‫الرسوم المتحركة والتأثيرات المرئية‪ :‬مثل إنشاء رسومات‬ ‫‪‬‬

‫متحركة وتأثيرات ديناميكية على الصفحة‪.‬‬

‫األلعاب البسيطة والتطبيقات‪ :‬يمكنك إنشاء ألعاب بسيطة وتطبيقات‬ ‫‪‬‬

‫ويب تفاعلية باستخدام ‪.Javascript‬‬

‫معالجة البيانات‪ :‬يمكن لـ ‪ Javascript‬معالجة البيانات من نماذج‬ ‫‪‬‬

‫‪ ،HTML‬وإجراء العمليات الحسابية‪ ،‬وإنشاء رسومات بيانية‪.‬‬

‫التواصل مع الخادم‪ :‬يمكن لـ ‪ Javascript‬التواصل مع خوادم‬ ‫‪‬‬

‫الويب لتبادل البيانات وإنشاء تطبيقات ويب ديناميكية‪.‬‬

‫لماذا تعلم ‪Javascript‬؟‬
‫لغة أساسية لصفحات الويب‪ :‬تُعد ‪ Javascript‬لغة أساسية إلنشاء‬ ‫‪‬‬

‫صفحات ويب تفاعلية‪ ،‬وتدعمها جميع المتصفحات الحديثة‪.‬‬

‫سهلة التعلم‪ :‬تُعد ‪ Javascript‬لغة برمجة سهلة التعلم نسبيًا‪،‬‬ ‫‪‬‬

‫خاصةً للمبتدئين‪.‬‬
‫متعددة االستخدامات‪ :‬يمكن استخدام ‪ Javascript‬إلنشاء مجموعة‬ ‫‪‬‬

‫واسعة من التطبيقات‪ ،‬من صفحات الويب البسيطة إلى تطبيقات‬

‫الويب المعقدة واأللعاب‪.‬‬
 ‫‪45‬‬

‫مطلوبة بشدة‪ :‬تُعد ‪ Javascript‬من أكثر مهارات البرمجة طلبًا‬ ‫‪‬‬

‫في سوق العمل‪ ،‬حيث تُستخدم من قبل العديد من الشركات في‬

‫جميع أنحاء العالم‪.‬‬
‫أساسيات برمجة‪Javascript‬‬
‫ما هي‪ Javascript‬؟‬
‫‪Javascript‬هي لغة برمجة عالية المستوى تُستخدم لجعل مواقع‬
‫الويب تفاعلية ‪.‬تُفسر معظم المتصفحات الرئيسية كود‬
‫‪Javascript‬وتنفذه‪ ،‬مما يسمح لك بإضافة وظائف مثل‪:‬‬
‫التفاعل مع المستخدم ‪:‬مثل النقر على األزرار وإدخال البيانات في‬ ‫‪‬‬

‫النماذج‪.‬‬
‫التأثيرات الديناميكية ‪:‬مثل الرسوم المتحركة وتغيير المحتوى على‬ ‫‪‬‬

‫الصفحة‪.‬‬
‫معالجة البيانات من جانب العميل ‪:‬مثل التحقق من صحة إدخال‬ ‫‪‬‬

‫المستخدم وإجراء الحسابات األساسية‪.‬‬

‫إنشاء تطبيقات ويب معقدة ‪:‬مثل األلعاب والتطبيقات‪.‬‬ ‫‪‬‬

‫لماذا تعلم‪ Javascript‬؟‬

‫لغة أساسية لتطوير الويب ‪:‬تُستخدم ‪ Javascript‬في الغالبية‬ ‫‪‬‬

‫العظمى من مواقع الويب‪.‬‬

‫سهلة التعلم ‪:‬تتمتع ‪ Javascript‬بنحو بسيط نسبيًا مقارنة بلغات‬ ‫‪‬‬

‫البرمجة األخرى‪.‬‬
‫متعددة االستخدامات ‪:‬يمكن استخدام ‪ Javascript‬إلنشاء مجموعة‬ ‫‪‬‬

‫متنوعة من التطبيقات‪ ،‬من مواقع الويب البسيطة إلى تطبيقات‬

‫الويب المعقدة‪.‬‬
 ‫‪46‬‬

‫طلب كبير ‪:‬هناك طلب كبير على مطوري ‪ Javascript‬في سوق‬ ‫‪‬‬

‫العمل‪.‬‬
‫مواضيع أساسية لتعلم‪Javascript:‬‬
‫‪ .1‬األساسيات‪:‬‬
‫‪ o‬المتغيرات والبيانات‬
‫‪ o‬العمليات الحسابية‬
‫‪ o‬الشروط والحلقات‬
‫‪ o‬الوظائف‬
‫‪HTML .2‬و‪CSS:‬‬
‫‪ o‬كيفية استخدام ‪ Javascript‬للتفاعل مع عناصر ‪ HTML‬و‪CSS.‬‬
‫‪DOM (Document Object Model): .3‬‬
‫‪ o‬كيفية التالعب بعناصر ‪ HTML‬باستخدام‪Javascript.‬‬
‫‪ .4‬األحداث‪:‬‬
‫‪ o‬كيفية االستجابة لتفاعالت المستخدم مثل النقر والمرور على‬
‫الشاشة‪.‬‬
‫‪Ajax: .5‬‬
‫‪ o‬كيفية تحميل البيانات من الخادم دون إعادة تحميل الصفحة بأكملها‪.‬‬
‫‪ .6‬المكتبات‪:‬‬
‫‪ o‬كيفية استخدام مكتبات ‪ Javascript‬الشائعة لتسهيل مهامك‪.‬‬
‫موارد لتعلم‪Javascript:‬‬
‫نصائح لتعلم‪Javascript:‬‬
‫ابدأ بالمبادئ األساسية ‪:‬تأكد من فهمك للمفاهيم األساسية مثل‬ ‫‪‬‬

‫المتغيرات والبيانات والعمليات الحسابية قبل االنتقال إلى‬

‫الموضوعات األكثر تعقيدًا‪.‬‬
 ‫‪47‬‬

‫مارس بانتظام ‪:‬أفضل طريقة لتعلم ‪ Javascript‬هي الممارسة‬ ‫‪‬‬

‫المستمرة‪ .‬حاول كتابة بعض التعليمات البرمجية كل يوم‪ ،‬حتى لو‬

‫كانت مجرد أمثلة بسيطة‪.‬‬
‫ابحث عن المساعدة ‪:‬ال تتردد في طلب المساعدة عندما تواجه‬ ‫‪‬‬

‫صعوبة‪ .‬هناك العديد من الموارد المتاحة على اإلنترنت‪ ،‬مثل‬

‫منتديات ومجموعات المناقشة‪.‬‬
‫كن صبورا ً ‪:‬تعلم ‪ Javascript‬يستغرق وقتًا وجهدًا‪ .‬ال تستسلم إذا‬ ‫‪‬‬

‫لم تفهمه على الفور‪.‬‬

‫مع الممارسة والمثابرة‪ ،‬ستتمكن من تعلم ‪ Javascript‬وإنشاء‬
‫تطبيقات ويب مذهلة‪.‬‬
‫مالحظة ‪:‬هذه مجرد مقدمة أساسية لبرمجة ‪ Javascript.‬هناك‬
‫الكثير من األشياء األخرى التي يمكنك تعلمها لتصبح مبرمج‬
‫سا‪.‬‬
‫‪Javascript‬متمر ً‬

‫التعامل مع األحداث في‪Javascript‬‬

‫تُعدّ األحداث ّ‬
‫مكونًا أساس ًيا في لغة‪ ، Javascript‬حيث تسمح لك‬
‫بالتفاعل مع المستخدم وتغيير سلوك الصفحة استجابةً إلدخاالته‪.‬‬
‫تتراوح األحداث من النقر على زر إلى الضغط على مفتاح أو‬
‫تحريك الماوس‪.‬‬
‫طرق التعامل مع األحداث في‪Javascript:‬‬
‫‪1.‬خصائص الحدث‪:‬‬
‫الطريقة األسهل واألقدم‪ ،‬لكنها ليست األفضل من حيث الممارسات‬ ‫‪‬‬

‫البرمجية‪.‬‬
 48

،‫تُستخدم عن طريق إضافة خاصية مباشرة إلى العنصر‬ 

onchange.‫ أو‬onclick ‫مثل‬

‫اضغط‬: <button onclick="changeText()">‫مثال‬ 

</button>.‫علي‬
:‫معالجات األحداث‬2.
.‫تحسين للطريقة السابقة من حيث التنظيم‬ 

.‫تُستخدم عن طريق تعيين دالة للعنصر كمعالج للحدث‬ 

:‫مثال‬ 

JavaScript
function changeText() {
const paragraph =
document.getElementById("myParagraph");
!";‫ تم تغيير النص‬paragraph.textContent = "
}

const button =
document.getElementById("myButton");
button.onclick = changeText;
content_copy
:‫مستمعو األحداث‬3.
.‫الطريقة الحديثة واألكثر مرونة‬ 

‫ على‬addEventListener() ‫تُستخدم عن طريق استدعاء دالة‬ 

.‫العنصر‬
:‫مثال‬ 
 49

JavaScript
const button =
document.getElementById("myButton");
button.addEventListener("click", function() {
const paragraph =
document.getElementById("myParagraph");
!";‫ تم تغيير النص‬paragraph.textContent = "
});
content_copy
:‫أنواع األحداث‬
mouseout.‫ و‬mouseover ‫ و‬click ‫مثل‬: ‫أحداث الماوس‬ 

keypress.‫ و‬keyup ‫ و‬keydown ‫مثل‬: ‫أحداث لوحة المفاتيح‬ 

input.‫ و‬change ‫ و‬submit ‫مثل‬: ‫أحداث النموذج‬ 

scroll.‫ و‬resize ‫ و‬load ‫ مثل‬DOM: ‫أحداث‬ 

:‫مالحظات‬
.‫يمكن ربط أكثر من مستمع حدث بنفس العنصر‬ 

(stopPropagation) ‫يمكن استخدام مبدأ منع انتشار األحداث‬ 

.‫لمنع انتشار الحدث إلى العناصر األبوية‬

‫( لمنع‬preventDefault) ‫يمكن استخدام مبدأ منع التخزين المؤقت‬ 

.‫سلوك الحدث االفتراضي‬

 ‫‪50‬‬

‫إنشاء عناصر تفاعلية باستخدام‪Javascript‬‬

‫تُعدّ ‪ Javascript‬لغة برمجة قوية تُستخدم لتوفير تجارب تفاعلية‬
‫لمواقع الويب‪ .‬تسمح لك بإنشاء عناصر ديناميكية وتغيير سلوك‬
‫الصفحة استجابة إلدخال المستخدم‪ .‬إليك بعض األمثلة على كيفية‬
‫استخدام ‪ Javascript‬إلنشاء عناصر تفاعلية‪:‬‬
‫‪1.‬األزرار‪:‬‬
‫إنشاء زر ‪:‬يمكنك استخدام ‪ Javascript‬إلنشاء زر جديد وتعيين‬ ‫‪‬‬

‫وظيفة له عند النقر عليه‪ .‬على سبيل المثال‪ ،‬يمكنك إنشاء زر يُظهر‬
‫تنبي ًها عند النقر عليه‪.‬‬
‫‪HTML‬‬
‫>"‪<button id="myButton‬انقر هنا>‪</button‬‬

‫>‪<script‬‬
‫= ‪const button‬‬
‫;)'‪document.getElementById('myButton‬‬
‫{ )(‪button.addEventListener('click', function‬‬
‫'(‪ alert‬لقد ضغطت على الزر;)'!‬
‫;)}‬
‫>‪</script‬‬
‫‪content_copy‬‬
‫ضا استخدام ‪ Javascript‬لتغيير مظهر‬ ‫تغيير مظهر الزر ‪:‬يمكنك أي ً‬ ‫‪‬‬

‫الزر استجابة ألحداث معينة‪ .‬على سبيل المثال‪ ،‬يمكنك تغيير لون‬
‫الزر إلى اللون األحمر عند الضغط عليه‪.‬‬
 51

HTML
</button>‫<انقر هنا‬button id="myButton">

<script>
const button =
document.getElementById('myButton');
button.addEventListener('click', function() {
button.style.backgroundColor = 'red';
});
</script>
content_copy
:‫قوائم التحديد‬2.
‫ لتعبئة قائمة‬Javascript ‫يمكنك استخدام‬: ‫تعبئة قائمة التحديد‬ 

‫ على سبيل‬.‫التحديد بخيارات من قاعدة بيانات أو مصدر آخر‬

.‫ يمكنك تعبئة قائمة تحديد ببلدان العالم‬،‫المثال‬
HTML
<select id="countrySelect">
</option>‫< اختر بلدًا‬option value="">
</select>

<script>
', ‫'مصر‬, '‫'تونس‬, '‫'المغرب‬, '‫ الجزائر‬const countries = ['
'];‫'السعودية‬
const select =
document.getElementById('countrySelect');
 ‫‪52‬‬

‫{ )‪for (const country of countries‬‬

‫= ‪const option‬‬
‫;)'‪document.createElement('option‬‬
‫;‪option.value = country‬‬
‫;‪option.text = country‬‬
‫;)‪select.appendChild(option‬‬
‫}‬
‫>‪</script‬‬
‫‪content_copy‬‬
‫ضا استخدام‬
‫التعامل مع األحداث في قائمة التحديد ‪:‬يمكنك أي ً‬ ‫‪‬‬

‫‪Javascript‬للتعامل مع األحداث في قائمة التحديد‪ ،‬مثل تغيير‬

‫محتوى صفحة الويب بنا ًء على الخيار المحدد‪ .‬على سبيل المثال‪،‬‬
‫يمكنك عرض معلومات حول بلد معين عند تحديد اسمه في قائمة‬
‫التحديد‪.‬‬
‫‪HTML‬‬
‫>"‪<select id="countrySelect‬‬
‫>""=‪ <option value‬اختر بلدًا>‪</option‬‬
‫>‪</select‬‬

‫>‪<div id="countryInfo"></div‬‬

‫>‪<script‬‬
‫{ = ‪const countries‬‬
‫' الجزائر' ‪':‬عاصمة الجزائر هي مدينة الجزائر‪.',‬‬
‫' المغرب' ‪':‬عاصمة المغرب هي مدينة الرباط‪.',‬‬
 53

.',‫'عاصمة تونس هي مدينة تونس‬: '‫' تونس‬

.',‫'عاصمة مصر هي مدينة القاهرة‬: '‫' مصر‬
.',‫'عاصمة السعودية هي مدينة الرياض‬: '‫' السعودية‬
};

const select =
document.getElementById('countrySelect');
const countryInfo =
document.getElementById('countryInfo');

select.addEventListener('change', function() {
const selectedCountry = select.value;
if (selectedCountry) {
countryInfo.innerHTML =
countries[selectedCountry];
} else {
countryInfo.innerHTML = '';
}
});
</script>
content_copy
:‫نماذج اإلدخال‬3.
Javascript ‫يمكنك استخدام‬: ‫التحقق من صحة بيانات النموذج‬ 

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

‫ يمكنك التأكد من إدخال المستخدم لعنوان بريد‬،‫سبيل المثال‬
.‫إلكتروني صالح‬
 54

HTML
<form id="myForm">
<input type="email" id="emailInput" required>
</button>‫< إرسال‬button type="submit">
</form>

<script>
const form =
document.getElementById('myForm');
const emailInput =
document.getElementById('emailInput');

form.addEventListener('submit', function(event) {
event.preventDefault();

if
(!emailInput.value.match(/^[^\s@]+@[^\s@]+\.[^\
s@]+$/)) {
.');‫ عنوان البريد اإللكتروني غير صالح‬alert('
return;
}

‫إرسال البيانات إلى الخادم‬ //

// ...
});
</script>
 ‫‪55‬‬

‫استخدام ‪ Javascript‬لمعالجة البيانات‬

‫تُعدّ ‪ Javascript‬لغة برمجة قوية ومرنة تتيح لك معالجة البيانات‬
‫بطرق متنوعة‪ .‬تشمل بعض مهام معالجة البيانات الشائعة التي‬
‫يمكنك تنفيذها باستخدام ‪ Javascript‬ما يلي‪:‬‬
‫التالعب بالمصافات ‪:‬توفر ‪ Javascript‬العديد من الوظائف‬ ‫‪‬‬

‫المدمجة للتعامل مع المصفوفات‪ ،‬مثل ‪ map‬و ‪ filter‬و ‪reduce.‬‬

‫يمكنك استخدام هذه الوظائف لفرز البيانات وتصفية البيانات‬
‫وإجراء الحسابات على العناصر‪.‬‬
‫آخرا لتخزين البيانات‬‫معالجة الكائنات ‪:‬تُعدّ الكائنات هيكالً شائ ًعا ً‬ ‫‪‬‬

‫في ‪ Javascript.‬يمكنك استخدام نقاط الوصول واألساليب‬

‫للوصول إلى خصائص الكائنات ومعالجتها‪.‬‬
‫طلبات الشبكة ‪:‬يمكنك استخدام ‪ Javascript‬إلنشاء طلبات‬ ‫‪‬‬

‫‪HTTP‬واسترداد البيانات من الخوادم‪ .‬يُعدّ هذا مفيدًا لتنفيذ‬

‫تطبيقات الويب التي تتطلب تحميل البيانات من مصدر خارجي‪.‬‬
‫تحليل البيانات ‪:‬توفر العديد من المكتبات الخارجية وظائف متقدمة‬ ‫‪‬‬

‫لتحليل البيانات‪ ،‬مثل الرسم البياني وتعلم اآللة‪ .‬يمكنك استخدام هذه‬
‫المكتبات الستخراج رؤى من مجموعات البيانات الخاصة بك‪.‬‬
‫فيما يلي بعض األمثلة على كيفية استخدام ‪ Javascript‬لمعالجة‬
‫البيانات‪:‬‬
‫حساب متوسط مجموعه من األرقام‪:‬‬ ‫‪‬‬

‫‪JavaScript‬‬
‫{ )‪function average(numbers‬‬
 56

const sum = numbers.reduce((accumulator,

currentValue) => accumulator + currentValue, 0);
const average = sum / numbers.length;
return average;
}

const numbers = [1, 2, 3, 4, 5];

const averageValue = average(numbers);
console.log(averageValue); // Output: 3
content_copy
:‫إنشاء مخطط شريطي بسيط‬ 

JavaScript
const data = [5, 10, 15, 20, 25];

const chartCanvas =
document.getElementById('chartCanvas');
const chartContext = chartCanvas.getContext('2d');

chartContext.beginPath();
for (let i = 0; i < data.length; i++) {
const x = i * 50;
const y = 300 - data[i];
const width = 50;
const height = data[i];
chartContext.fillRect(x, y, width, height);
}
 ‫‪57‬‬

‫;)(‪chartContext.stroke‬‬
‫‪content_copy‬‬
‫تحليل مشاعر النص‪:‬‬ ‫‪‬‬

‫‪JavaScript‬‬
‫' = ‪const text‬هذا النص إيجابي جدًا;'!‬

‫;)‪const sentimentScore = Sentiment.analyze(text‬‬

‫{ ‪console.log(sentimentScore); // Output:‬‬
‫‪positivity: 0.8, negativity: 0.2‬‬

‫دمج ‪ Javascript‬مع ‪ HTML‬و ‪CSS‬‬

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

‫األساسية مثل النصوص والصور والروابط‪.‬‬

‫‪ CSS‬هي لغة تنسيق الصفحة‪ ،‬وتُستخدم لتحديد مظهر العناصر‬ ‫‪‬‬

‫على الصفحة‪.‬‬
‫‪ Javascript‬هي لغة برمجة تُستخدم إلضافة سلوك تفاعلي إلى‬ ‫‪‬‬

‫الصفحة‪.‬‬
‫يمكن دمج ‪ Javascript‬مع ‪ HTML‬و ‪ CSS‬إلنشاء صفحات‬
‫ويب غنية بالميزات‪ .‬على سبيل المثال‪ ،‬يمكنك استخدام‬
‫‪ Javascript‬ل‪:‬‬
 ‫‪58‬‬

‫معالجة إدخال المستخدم‪ ،‬مثل النماذج واالختيارات‪.‬‬ ‫‪‬‬

‫تغيير محتوى الصفحة ديناميكيًا‪ ،‬مثل عرض أو إخفاء العناصر‪.‬‬ ‫‪‬‬

‫إنشاء رسوم متحركة وتأثيرات مرئية‪.‬‬ ‫‪‬‬

‫التواصل مع الخادم‪ ،‬مثل جلب البيانات من قاعدة بيانات‪.‬‬ ‫‪‬‬

‫كيفية دمج ‪ Javascript‬مع ‪ HTML‬و ‪CSS‬‬

‫هناك طريقتان رئيسيتان لدمج ‪ Javascript‬مع ‪ HTML‬و ‪:CSS‬‬
‫استخدام عنصر <‪>script‬‬ ‫‪‬‬

‫يُستخدم عنصر <‪ >script‬إلدراج نص ‪ Javascript‬في صفحة‬

‫‪ .HTML‬يمكنك وضع عنصر <‪ >script‬في أي مكان في ملف‬
‫‪ ،HTML‬لكن عادة ً ما يتم وضعه في رأس الصفحة أو أسفلها‪.‬‬
‫‪HTML‬‬
‫>‪<!DOCTYPE html‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪ <title‬دمج ‪ Javascript‬مع ‪ HTML‬و>‪CSS</title‬‬
‫>"‪<link rel="stylesheet" href="style.css‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪ <h1‬عنوان الصفحة>‪</h1‬‬

‫>"‪ <p id="demo‬هذا النص سيُغيره>‪Javascript.</p‬‬

‫>‪<script src="script.js"></script‬‬
‫>‪</body‬‬
 ‫‪59‬‬

‫>‪</html‬‬
‫‪content_copy‬‬
‫في هذا المثال‪ ،‬سيتم تحميل ملف ‪ script.js Javascript‬وسيتم‬
‫تشغيله عند تحميل الصفحة‪ .‬سيقوم ‪ Javascript‬بتغيير النص في‬
‫العنصر ‪ p‬ذي المعرف ‪.demo‬‬
‫استخدام صفات ‪HTML‬‬ ‫‪‬‬

‫يمكن استخدام بعض صفات ‪ HTML‬إلضافة ‪Javascript‬‬

‫مباشرة إلى العناصر‪ .‬على سبيل المثال‪ ،‬يمكنك استخدام سمة‬
‫‪ onclick‬إلضافة ‪ Javascript‬يتم تشغيله عند النقر على عنصر‪.‬‬
‫‪HTML‬‬
‫>")(‪<button onclick="myFunction‬انقر هنا>‪</button‬‬

‫>‪<script‬‬
‫{ )(‪function myFunction‬‬
‫"(‪ alert‬لقد ضغطت على الزر;)"!‬
‫}‬
‫>‪</script‬‬
‫‪content_copy‬‬
‫في هذا المثال‪ ،‬سيؤدي النقر على الزر إلى تشغيل دالة‬
‫‪.)(myFunction Javascript‬‬
‫ممارسة‬
‫‪‬‬
 ‫‪60‬‬

‫نصائح‬
‫ابدأ بأساسيات ‪ Javascript‬و ‪ HTML‬و ‪ CSS‬قبل محاولة‬ ‫‪‬‬

‫دمجها م ًعا‪.‬‬
‫استخدم أدوات التطوير في متصفحك لتصحيح أخطاء‬ ‫‪‬‬

‫‪.Javascript‬‬
‫ال تخف من تجربة أشياء جديدة‪.‬‬ ‫‪‬‬

‫خاتمة‬
‫‪ Javascript‬و ‪ HTML‬و ‪ CSS‬هي أدوات قوية يمكن استخدامها‬
‫إلنشاء صفحات ويب رائعة‪ .‬مع القليل من الممارسة‪ ،‬ستتمكن من‬
‫دمج هذه اللغات بسهولة إلنشاء صفحات ويب تفاعلية ومجزية‪.‬‬
‫استخدام الذكاء االصطناعي في إنشاء مواقع الويب‬
‫يُحدث الذكاء االصطناعي ثورة في طريقة تصميم وإنشاء مواقع‬
‫صا جديدة لزيادة الكفاءة واإلبداع وتحسين‬‫الويب‪ ،‬مما يوفر فر ً‬
‫تجربة المستخدم‪ .‬إليك بعض الطرق الرئيسية التي يُستخدم بها‬
‫الذكاء االصطناعي في إنشاء مواقع الويب‪:‬‬
‫أدوات إنشاء مواقع الويب التي تعمل بالذكاء االصطناعي‪:‬‬
‫تُتيح هذه األدوات للمستخدمين إنشاء مواقع ويب احترافية دون‬
‫الحاجة إلى أي خبرة برمجية‪ .‬تُطرح أسئلة على المستخدمين حول‬
‫احتياجاتهم وتفضيالتهم‪ ،‬ثم يقوم الذكاء االصطناعي بإنشاء موقع‬
‫ويب بنا ًء على إجاباتهم‪ .‬تشمل بعض األمثلة الشائعة‪:‬‬
‫)‪Wix (https://www.wix.com/‬‬ ‫‪‬‬

‫)‪Squarespace (https://account.squarespace.com/‬‬ ‫‪‬‬

‫)‪GoDaddy (https://www.godaddy.com/‬‬ ‫‪‬‬

 ‫‪61‬‬

‫استخدام الذكاء االصطناعي لتصميم واجهات المستخدم‪:‬‬

‫يمكن للذكاء االصطناعي تحسين تصميم واجهات المستخدم من‬
‫خالل اختبار ‪ A/B‬وتحديد العناصر التي تجذب انتباه المستخدمين‬
‫وتُحفزهم على اتخاذ إجراءات‪ .‬كما يمكنه تحليل سلوك المستخدم‬
‫وتقديم توصيات لتحسين التصميم‪.‬‬
‫إنشاء محتوى ديناميكي باستخدام الذكاء االصطناعي‪:‬‬
‫يمكن للذكاء االصطناعي إنشاء محتوى مخصص لكل مستخدم‪،‬‬
‫بنا ًء على اهتماماته وسلوكه‪ .‬على سبيل المثال‪ ،‬يمكنه كتابة مقاالت‬
‫إخبارية أو منشورات مدونة أو حتى رسائل بريد إلكتروني‬
‫مخصصة‪.‬‬
‫تحسين أداء مواقع الويب باستخدام الذكاء االصطناعي‪:‬‬
‫يمكن للذكاء االصطناعي تحسين أداء مواقع الويب من خالل‪:‬‬
‫تحسين سرعة التحميل‪:‬‬ ‫‪‬‬

‫تحسين تحسين محركات البحث‪(SEO):‬‬ ‫‪‬‬

‫كشف األخطاء وإصالحها‪:‬‬ ‫‪‬‬

‫اعتبارات أمنية عند استخدام الذكاء االصطناعي في إنشاء مواقع‬

‫الويب‪:‬‬
‫من المهم مراعاة المخاطر األمنية عند استخدام الذكاء االصطناعي‬
‫في إنشاء مواقع الويب‪ .‬تشمل بعض المخاوف الشائعة‪:‬‬
‫البيانات الضارة‪:‬‬ ‫‪‬‬

‫التحيز الخوارزمي‪:‬‬ ‫‪‬‬

 ‫‪62‬‬

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

‫مستقبل إنشاء مواقع الويب باستخدام الذكاء االصطناعي‬

‫يتمتع إنشاء مواقع الويب باستخدام الذكاء االصطناعي بإمكانيات‬
‫هائلة لتغيير طريقة تصميمنا وبنائنا لمواقع الويب في المستقبل‪.‬‬
‫إليك بعض االتجاهات الرئيسية التي نتوقع رؤيتها‪:‬‬
‫أتمتة مهام التصميم ‪:‬سيساعد الذكاء االصطناعي في أتمتة مهام‬ ‫‪‬‬

‫التصميم مثل اختيار األلوان والخطوط وتخطيطات الصفحات‪ ،‬مما‬

‫يوفر الوقت للمصممين ليركزوا على العمل اإلبداعي األكثر‬
‫أهمية‪.‬‬
‫إنشاء محتوى مخصص ‪:‬يمكن استخدام الذكاء االصطناعي إلنشاء‬ ‫‪‬‬

‫محتوى مخصص لكل زائر‪ ،‬مما يوفر تجربة أكثر تفاعلية‬

‫وجاذبية‪.‬‬
‫التخصيص في الوقت الفعلي ‪:‬يمكن للذكاء االصطناعي تخصيص‬ ‫‪‬‬

‫مواقع الويب في الوقت الفعلي بنا ًء على سلوك المستخدم‬

‫وتفضيالته‪ ،‬مما يوفر تجربة أكثر سهولة وفعالية‪.‬‬
‫إنشاء مواقع ويب قابلة للتكيف ‪:‬يمكن للذكاء االصطناعي إنشاء‬ ‫‪‬‬

‫مواقع ويب تتكيف مع مختلف األجهزة والشاشات‪ ،‬مما يضمن‬

‫تجربة مستخدم جيدة عبر جميع األنظمة األساسية‪.‬‬
‫أفضل الممارسات إلنشاء مواقع ويب ذكية‬
‫إذا كنت تفكر في استخدام الذكاء االصطناعي إلنشاء موقع ويب‪،‬‬
‫فإليك بعض أفضل الممارسات التي يجب مراعاتها‪:‬‬
 ‫‪63‬‬

‫حدد أهدافك بوضوح ‪:‬ما الذي تريد تحقيقه باستخدام الذكاء‬ ‫‪‬‬

‫االصطناعي في موقع الويب الخاص بك؟ بمجرد معرفة أهدافك‪،‬‬

‫يمكنك اختيار األدوات والتقنيات المناسبة‪.‬‬
‫ابدأ بمشروع صغير ‪:‬ال تحاول إعادة تصميم موقع الويب الخاص‬ ‫‪‬‬

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

‫االصطناعي على جودة البيانات التي تدرب عليها‪ .‬تأكد من‬

‫استخدام بيانات دقيقة وحديثة لضمان أفضل النتائج‪.‬‬
‫كن مبدعاا ‪:‬ال تخف من تجربة أدوات وتقنيات جديدة‪ .‬هناك العديد‬ ‫‪‬‬

‫عا‬
‫من إمكانيات الذكاء االصطناعي المتاحة ‪ ،‬لذا كن مبد ً‬
‫واستكشف ما هو ممكن‪.‬‬
‫قياس النتائج ‪:‬من المهم تتبع نتائجك وقياس تأثير الذكاء‬ ‫‪‬‬

‫االصطناعي على موقع الويب الخاص بك‪ .‬سيساعدك هذا على‬

‫تحديد ما يعمل وما ال يعمل ‪ ،‬حتى تتمكن من إجراء التعديالت‬
‫الالزمة‪.‬‬

‫قاموس مصطلحات‪:‬‬
‫الذكاء االصطناعي ‪ (AI):‬هو فرع من علوم الكمبيوتر يتعامل مع‬ ‫‪‬‬

‫إنشاء ذكاء اصطناعي‪ ،‬وهو عبارة عن أنظمة يمكنها التعلم‬

‫والتفكير واالستقاللية في حل المشكالت‪.‬‬
‫إنشاء مواقع الويب ‪:‬هي عملية تصميم وإنشاء موقع ويب‪ .‬يتضمن‬ ‫‪‬‬

‫ذلك التخطيط وتطوير المحتوى واختيار التصميم وتنفيذ الموقع‪.‬‬

‫أدوات إنشاء مواقع الويب التي تعمل بالذكاء االصطناعي ‪:‬هي‬ ‫‪‬‬

‫برامج تستخدم الذكاء االصطناعي لمساعدة المستخدمين في إنشاء‬

 ‫‪64‬‬

‫مواقع ويب‪ .‬يمكن أن تساعد هذه األدوات في مهام مثل إنشاء‬

‫محتوى واختيار التصميم وتنفيذ الموقع‪.‬‬
‫قائمة أدوات إنشاء مواقع الويب التي تعمل بالذكاء االصطناعي‪:‬‬
‫‪Wix ADI: https://www.wix.com/‬‬ ‫‪‬‬

‫‪Squarespace: https://www.squarespace.com/‬‬ ‫‪‬‬

‫‪GoDaddy Website‬‬ ‫‪‬‬

‫‪Builder: https://www.godaddy.com/websites/website-builder‬‬
‫‪Zyro: https://www.hostinger.com/website-builder‬‬ ‫‪‬‬

‫‪Webflow: https://webflow.com/‬‬ ‫‪‬‬

‫‪Appy Pie: https://www.appypie.com/‬‬ ‫‪‬‬

‫‪Jimdo: https://www.jimdo.com/‬‬ ‫‪‬‬

‫‪SITE123: https://www.site123.com/‬‬ ‫‪‬‬

‫‪Tailor Brands: https://www.tailorbrands.com/‬‬ ‫‪‬‬

‫مراجع‪:‬‬

‫أفضل ‪ 10‬أدوات إنشاء مواقع ويب تعمل بالذكاء االصطناعي‬ ‫‪‬‬

‫(أبريل ‪): https://www.unite.ai/ar/best-ai-2024‬‬

‫‪website-builders/‬‬
‫تعرف‬
‫أبرز أدوات الذكاء االصطناعي إلنشاء المواقع اإللكترونية‪ّ ..‬‬ ‫‪‬‬

‫إليها‬
‫‪: https://www.youtube.com/watch?v=UPiTvJ9bew‬‬
‫‪s‬‬
‫‪5‬مواقع ذكاء اصطناعي إلنشاء المواقع توفر الوقت والمال في‬ ‫‪‬‬

‫عام ‪: https://katteb.com/ar/2024‬‬
‫مالحظة ‪:‬هذه القائمة ليست شاملة‪ ،‬ويتم إصدار أدوات إنشاء مواقع‬
‫ويب جديدة تعمل بالذكاء االصطناعي طوال الوقت‪.‬‬
‫نصائح الختيار أداة إنشاء مواقع ويب تعمل بالذكاء االصطناعي‪:‬‬
 ‫‪65‬‬

‫فكر في احتياجاتك وميزانيتك ‪:‬تقدم كل أداة ميزات ووظائف‬ ‫‪‬‬

‫مختلفة بأسعار مختلفة‪ .‬قارن بين الميزات المختلفة واختر األداة‬

‫التي تناسب احتياجاتك وميزانيتك‪.‬‬
‫سهولة االستخدام ‪:‬اختر أداة سهلة االستخدام حتى لو لم تكن لديك‬ ‫‪‬‬

‫خبرة سابقة في إنشاء مواقع الويب‪.‬‬

‫التصميمات والقوالب ‪:‬تقدم العديد من األدوات مجموعة متنوعة‬ ‫‪‬‬

‫من التصميمات والقوالب لالختيار من بينها‪ .‬اختر أداة تقدم تصاميم‬

‫تناسب أسلوبك وعالمتك التجارية‪.‬‬
‫الميزات ‪:‬تقدم بعض األدوات ميزات إضافية مثل تحليالت ‪SEO‬‬ ‫‪‬‬

‫والتجارة اإللكترونية والتسويق عبر البريد اإللكتروني‪ .‬اختر أداة‬

‫تقدم الميزات التي تحتاجها‪.‬‬
‫الدعم ‪:‬تأكد من أن األداة التي تختارها تقدم دع ًما جيدًا للعمالء في‬ ‫‪‬‬

‫حال واجهت أي مشكالت‪.‬‬