SlideShare a Scribd company logo

مع التعريف الخصائص والمعطيات html,css,java scriptانشاء موقع للمبتدئين بلغة

Download as DOC, PDF
N
NabilRharib

هذا الكتاب شامل يهدف إلى تعلم أساسيات لغات البرمجة html وcss وjavascript لتطوير المواقع الإلكترونية. يتضمن شرحًا مفصلاً حول كل لغة، مع تقديم أمثلة عملية ومشاريع لتطبيق المهارات المكتسبة. كما يحتوي الكتاب على موارد للتدريب ووسائل التواصل لتسهيل التعلم والتفاعل.

Software
1 of 34
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
‫للغات‬ ‫األكواد‬ ‫جميع‬ ‫يغطي‬ ‫شامل‬ ‫كتاب‬ ‫كتابة‬ ‫إن‬ HTML ‫و‬CSS ‫و‬JavaScript ‫مع‬ .‫ومعقد‬ ‫طموح‬ ‫مشروع‬ ‫هو‬ ‫عميق‬ ‫بتفصيل‬ ‫أمر‬ ‫كل‬ ‫وشرح‬ ‫والمعطيات‬ ‫والخصائص‬ ‫التعريفات‬ ‫الكتاب‬ ‫هذا‬ ‫مثل‬ ‫إنشاء‬ ‫في‬ ‫يساعدك‬ ‫أن‬ ‫يمكن‬ ً‫إطارا‬ ‫إليك‬: 1. ‫مقدمة‬ ‫تعلم‬ ‫أهمية‬ HTML ‫و‬CSS ‫و‬JavaScript: ‫هذه‬ ‫استخدام‬ ‫كيفية‬ ‫عن‬ ‫عامة‬ ‫نظرة‬ ‫تقديم‬ ‫الويب‬ ‫مواقع‬ ‫وتطوير‬ ‫لبناء‬ ‫ا‬ً ‫ع‬‫م‬ ‫اللغات‬. 2. HTML (Hypertext Markup Language) ‫في‬ ‫مقدمة‬ HTML: ‫تاريخ‬ HTML ‫التوصيف‬ ‫لغة‬ ‫وأهمية‬. ‫أساسيات‬ HTML: ‫للصفحة‬ ‫األساسي‬ ‫الهيكل‬ (‫األساسية‬ ‫العناصر‬: <html>, <head>, <body>, ‫)إلخ‬. ‫العناصر‬: <h1>, <p>, <a>, <div>, <span>, ‫إلخ‬. ‫السمات‬ (Attributes): ‫مثل‬ ‫السمات‬ ‫استخدام‬ ‫كيفية‬ class, id, href, src. ‫والجداول‬ ‫القوائم‬: )‫التعريفية‬ ‫والقوائم‬ ،‫المرتبة‬ ،‫المرتبة‬ ‫(غير‬ ‫القوائم‬. ‫واألعمدة‬ ‫الصفوف‬ ‫وإضافة‬ ‫الجداول‬ ‫إنشاء‬ ‫كيفية‬ :‫الجداول‬. ‫النماذج‬: ‫نماذج‬ ‫إنشاء‬ ‫كيفية‬ (form) ‫مثل‬ ‫النموذج‬ ‫عناصر‬ ‫واستخدام‬ <input>, <textarea>, <button>. ‫الوسائط‬: ‫والصوتيات‬ ‫والفيديوهات‬ ‫الصور‬ ‫إدراج‬. 3. CSS (Cascading Style Sheets) ‫في‬ ‫مقدمة‬ CSS: ‫باستخدام‬ ‫التصميم‬ ‫مفهوم‬ CSS ‫والتنسيق‬ ‫الفصول‬ ‫وأهمية‬.
‫أساسيات‬ CSS: ‫إدراج‬ ‫كيفية‬ CSS ‫في‬ HTML (‫والتمهيدية‬ ،‫الخارجية‬ ،‫الداخلية‬ ‫)األنماط‬. ‫األنماط‬ ‫وتطبيق‬ ‫العناصر‬ ‫تحديد‬ (‫باستخدام‬ ‫االنتقاء‬ selector). ‫النصوص‬ ‫تنسيق‬: ‫مثل‬ ‫األساسية‬ ‫الخصائص‬ color, font-size, font-family. ‫العناصر‬ ‫تنسيق‬: ‫الحدود‬ ،‫الحشوات‬ ،‫الهوامش‬ ،‫األلوان‬. ‫المتقدمة‬ ‫األنماط‬: ‫الشرطية‬ ‫القواعد‬ ‫استخدام‬ (media queries) ‫المتجاوب‬ ‫للتصميم‬. ‫والتحويل‬ ‫االنتقال‬ ‫تأثيرات‬ (transitions and transformations). ‫التخطيط‬: ‫مثل‬ ‫التخطيط‬ ‫أنماط‬ Flexbox ‫و‬ Grid. 4. JavaScript ‫في‬ ‫مقدمة‬ JavaScript: ‫لـ‬ ‫يمكن‬ ‫كيف‬ JavaScript ‫الصفحة‬ ‫مع‬ ‫المستخدم‬ ‫تفاعل‬ ‫تعزيز‬. ‫أساسيات‬ JavaScript: ‫والعمليات‬ ،‫التعبيرات‬ ،‫األنواع‬ ،‫المتغيرات‬. ‫التدفق‬ ‫في‬ ‫التحكم‬: ‫والحلقات‬ ‫الشروط‬ (if, switch, for, while). ‫وظائف‬ (Functions): ‫األسهم‬ ‫ووظائف‬ ،‫الوظائف‬ ‫واستدعاء‬ ‫تعريف‬ ‫كيفية‬ (Arrow Functions). ‫مع‬ ‫العمل‬ DOM:
‫باستخدام‬ ‫الصفحة‬ ‫عناصر‬ ‫وتعديل‬ ‫إلى‬ ‫الوصول‬ ‫كيفية‬ JavaScript. ‫األحداث‬ (Events): ‫المستخدم‬ ‫تفاعالت‬ ‫مع‬ ‫والتفاعل‬ ‫األحداث‬ ‫مستمعي‬ ‫إضافة‬. ‫البيانات‬ ‫مع‬ ‫التعامل‬: ‫عبر‬ ‫البيانات‬ ‫مع‬ ‫التعامل‬ JSON، ‫التطبيقات‬ ‫برمجة‬ ‫واجهات‬ (APIs). 5. ‫عملية‬ ‫مشاريع‬ ‫مشروع‬ 1 ‫باستخدام‬ ‫بسيطة‬ ‫ويب‬ ‫صفحة‬ ‫تصميم‬ : HTML ‫و‬ CSS. ‫مشروع‬ 2 ‫باستخدام‬ ‫تفاعل‬ ‫إضافة‬ : JavaScript ‫السابق‬ ‫المشروع‬ ‫إلى‬. ‫مشروع‬ 3 ‫باستخدام‬ ‫الصحة‬ ‫من‬ ‫التحقق‬ ‫وإضافة‬ ‫تفاعلي‬ ‫نموذج‬ ‫بناء‬ : JavaScript. 6. ‫إضافية‬ ‫وموارد‬ ‫مراجع‬ ‫ومنتديات‬ ،‫تدريبية‬ ‫دورات‬ ،‫تعليمية‬ ‫مواقع‬ :‫اإلنترنت‬ ‫عبر‬ ‫المصادر‬. ‫متقدمة‬ ‫أخرى‬ ‫لكتب‬ ‫توصيات‬ :‫أخرى‬ ‫كتب‬. ‫األكواد‬ ‫وتصحيح‬ ‫تطوير‬ ‫في‬ ‫تساعد‬ ‫أدوات‬ :‫تطوير‬ ‫أدوات‬. 7. ‫خاتمة‬ ‫مهاراتك‬ ‫وتطوير‬ ‫تعلم‬ ‫في‬ ‫االستمرار‬ ‫كيفية‬ :‫الويب‬ ‫تطوير‬ ‫مستقبل‬. ‫بشكل‬ ‫مفهوم‬ ‫كل‬ ‫لتوضيح‬ ‫وتمارين‬ ‫عملية‬ ‫أمثلة‬ ‫وتضمين‬ ،‫الحاجة‬ ‫حسب‬ ‫قسم‬ ‫كل‬ ‫توسيع‬ ‫يمكنك‬ ‫أفضل‬. ‫مقدمة‬ ‫من‬ ‫ا‬ً ‫ي‬‫أساس‬ ‫ا‬ً ‫ء‬‫جز‬ ‫اإللكترونية‬ ‫المواقع‬ ‫تطوير‬ ‫أصبح‬ ،‫الحديث‬ ‫الرقمية‬ ‫التكنولوجيا‬ ‫عصر‬ ‫في‬ ‫موقع‬ ‫كل‬ ،‫المعقدة‬ ‫اإللكترونية‬ ‫المنصات‬ ‫إلى‬ ‫البسيطة‬ ‫الشخصية‬ ‫المواقع‬ ‫من‬ .‫اليومية‬ ‫حياتنا‬ ،‫التقني‬ ‫العالم‬ ‫هذا‬ ‫قلب‬ ‫في‬ .‫وتطويره‬ ‫لبنائه‬ ‫والتقنيات‬ ‫اللغات‬ ‫من‬ ‫مجموعة‬ ‫استخدام‬ ‫يتطلب‬ ‫ويب‬ ‫لغات‬ ‫تلعب‬
HTML ‫و‬ CSS ‫و‬ JavaScript ‫ومتكاملة‬ ‫حيوية‬ ً‫أدوارا‬. ‫هي‬ ‫ما‬ HTML‫؟‬ HTML، ‫التشعبية‬ ‫النصوص‬ ‫توصيف‬ ‫لغة‬ ‫أو‬ (HyperText Markup Language)، ‫تستخدم‬ .‫الويب‬ ‫صفحات‬ ‫عليه‬ ‫بنى‬ُ ‫ت‬ ‫الذي‬ ‫األساس‬ ‫هي‬ HTML ‫على‬ ‫المحتوى‬ ‫هيكل‬ ‫لتحديد‬ ‫العناصر‬ ‫من‬ ‫مجموعة‬ ‫خالل‬ ‫من‬ .‫والصور‬ ‫الروابط‬ ‫إلى‬ ‫والفقرات‬ ‫العناوين‬ ‫من‬ ،‫الويب‬ ‫والعالمات‬ (tags)، ‫تمكن‬ HTML ‫يسهل‬ ‫مما‬ ،‫للمحتوى‬ ‫ومترابطة‬ ‫واضحة‬ ‫بنية‬ ‫إنشاء‬ ‫من‬ ‫صحيح‬ ‫بشكل‬ ‫المحتوى‬ ‫عرض‬ ‫المتصفحات‬ ‫على‬. ‫هي‬ ‫ما‬ CSS‫؟‬ CSS، ‫المتتالية‬ ‫األنماط‬ ‫أوراق‬ ‫أو‬ (Cascading Style Sheets)، ‫المسؤولة‬ ‫اللغة‬ ‫هي‬ ‫باستخدام‬ ‫إنشاؤه‬ ‫تم‬ ‫الذي‬ ‫المحتوى‬ ‫وتجميل‬ ‫تنسيق‬ ‫عن‬ HTML. ‫تهتم‬ ‫بينما‬ HTML ‫بتحديد‬ ‫فإن‬ ،‫للمحتوى‬ ‫األساسي‬ ‫الهيكل‬ CSS ‫مظهر‬ ‫لتعزيز‬ ‫والتخطيطات‬ ،‫الخطوط‬ ،‫األلوان‬ ‫تضيف‬ ‫تساعد‬ ،‫المختلفة‬ ‫العناصر‬ ‫على‬ ‫األنماط‬ ‫تطبيق‬ ‫خالل‬ ‫من‬ .‫جاذبية‬ ‫أكثر‬ ‫وجعلها‬ ‫الصفحة‬ CSS ‫الموقع‬ ‫مع‬ ‫التفاعل‬ ‫وتسهيل‬ ‫المستخدم‬ ‫تجربة‬ ‫تحسين‬ ‫في‬. ‫هي‬ ‫ما‬ JavaScript‫؟‬ JavaScript ‫بينما‬ .‫الويب‬ ‫صفحات‬ ‫إلى‬ ‫والديناميكية‬ ‫التفاعل‬ ‫تضيف‬ ‫التي‬ ‫البرمجة‬ ‫لغة‬ ‫هي‬ ‫تقوم‬ HTML ‫و‬ CSS ‫فإن‬ ،‫المحتوى‬ ‫عرض‬ ‫كيفية‬ ‫بتحديد‬ JavaScript ‫بإنشاء‬ ‫يسمح‬ ‫من‬ .‫البيانات‬ ‫صحة‬ ‫من‬ ‫والتحقق‬ ،‫المتحركة‬ ‫الرسوم‬ ،‫للتفاعل‬ ‫القابلة‬ ‫النماذج‬ ‫مثل‬ ‫تفاعلية‬ ‫تجارب‬ ‫تمكن‬ ،‫الصفحة‬ ‫إلى‬ ‫برمجية‬ ‫وظائف‬ ‫إضافة‬ ‫خالل‬ JavaScript ‫مستخدم‬ ‫تجربة‬ ‫تقديم‬ ‫من‬ ‫وغنى‬ ‫تفاعلية‬ ‫أكثر‬. ‫اللغات؟‬ ‫هذه‬ ‫تعلم‬ ‫لماذا‬ ‫استخدام‬ ‫كيفية‬ ‫فهم‬ HTML ‫و‬ CSS ‫و‬ JavaScript ‫ألي‬ ‫ا‬ً ‫ي‬‫ضرور‬ ‫بل‬ ‫ًا‬ ‫د‬‫مفي‬ ‫فقط‬ ‫ليس‬ ‫الويب‬ ‫مواقع‬ ‫معظم‬ ‫عليه‬ ‫يقوم‬ ‫الذي‬ ‫األساس‬ ‫هي‬ ‫اللغات‬ ‫هذه‬ .‫الويب‬ ‫بتطوير‬ ‫مهتم‬ ‫شخص‬ ‫إلى‬ ‫تطمح‬ ‫كنت‬ ‫سواء‬ ،‫المهنية‬ ‫للفرص‬ ‫جديدة‬ ‫ا‬ً ‫ب‬‫أبوا‬ ‫يفتح‬ ‫أن‬ ‫يمكن‬ ‫تعلمها‬ .‫الحديثة‬ ‫والتطبيقات‬ ‫المعلومات‬ ‫تكنولوجيا‬ ‫مجال‬ ‫في‬ ‫مهاراتك‬ ‫تحسين‬ ‫في‬ ‫ترغب‬ ‫أو‬ ‫ويب‬ ‫كمطور‬ ‫العمل‬.
‫الكتاب‬ ‫هذا‬ ‫هدف‬ ‫أساسيات‬ ‫على‬ ‫للتعرف‬ ‫شامل‬ ‫دليل‬ ‫تقديم‬ ‫إلى‬ ‫الكتاب‬ ‫هذا‬ ‫يهدف‬ HTML ‫و‬ CSS ‫و‬ JavaScript، ‫كل‬ ‫سنستعرض‬ .‫بفعالية‬ ‫لغة‬ ‫كل‬ ‫استخدام‬ ‫كيفية‬ ‫حول‬ ‫مفصل‬ ‫شرح‬ ‫تقديم‬ ‫مع‬ ‫دمج‬ ‫كيفية‬ ‫وسنستعرض‬ ،‫األساسية‬ ‫واألوامر‬ ‫واألنماط‬ ‫الخصائص‬ ‫توضيح‬ ‫مع‬ ،‫حدة‬ ‫على‬ ‫لغة‬ ‫في‬ ‫لمساعدتك‬ ‫وتمارين‬ ‫عملية‬ ‫أمثلة‬ ‫الكتاب‬ ‫يتضمن‬ .‫متكاملة‬ ‫ويب‬ ‫مواقع‬ ‫لتطوير‬ ‫اللغات‬ ‫هذه‬ ‫تعلمتها‬ ‫التي‬ ‫المهارات‬ ‫وتطبيق‬ ‫فهمك‬ ‫تعزيز‬. ‫مواقع‬ ‫بناء‬ ‫على‬ ً‫ا‬‫قادر‬ ‫تكون‬ ‫وأن‬ ‫المقدمة‬ ‫المعلومات‬ ‫من‬ ‫تستفيد‬ ‫أن‬ ‫نأمل‬ ،‫الكتاب‬ ‫هذا‬ ‫خالل‬ ‫من‬ ‫أو‬ ‫الويب‬ ‫تطوير‬ ‫عالم‬ ‫في‬ ‫ا‬ً ‫ئ‬‫مبتد‬ ‫كنت‬ ‫سواء‬ .‫المتاحة‬ ‫األدوات‬ ‫باستخدام‬ ‫وتفاعلية‬ ‫جذابة‬ ‫ويب‬ ‫أهدافك‬ ‫وتحقيق‬ ‫مهاراتك‬ ‫لتعزيز‬ ‫الالزمة‬ ‫الموارد‬ ‫لك‬ ‫سيقدم‬ ‫الكتاب‬ ‫هذا‬ ‫فإن‬ ،‫سابقة‬ ‫خبرة‬ ‫لديك‬ ‫الديناميكي‬ ‫المجال‬ ‫هذا‬ ‫في‬. 2. HTML (HyperText Markup Language) HTML، ‫تستخدم‬ .‫الويب‬ ‫لتطوير‬ ‫األساس‬ ‫حجر‬ ‫هي‬ ،‫التشعبية‬ ‫النصوص‬ ‫توصيف‬ ‫لغة‬ ‫أو‬ HTML ‫هذا‬ ‫في‬ .‫والعناصر‬ ‫النصوص‬ ‫هيكل‬ ‫خالل‬ ‫من‬ ‫الويب‬ ‫صفحات‬ ‫محتوى‬ ‫وتنسيق‬ ‫لكتابة‬ ‫من‬ ‫تجعل‬ ‫التي‬ ‫التفاصيل‬ ‫في‬ ‫ونغوص‬ ‫األساسيات‬ ‫سنستعرض‬ ،‫القسم‬ HTML ‫ألي‬ ‫أساسية‬ ‫لغة‬ ‫ويب‬ ‫مطور‬. 2.1 ‫في‬ ‫مقدمة‬ HTML ‫تعتبر‬ HTML ‫مكن‬ُ ‫ت‬ .‫الويب‬ ‫صفحات‬ ‫هيكل‬ ‫إلنشاء‬ ‫ستخدم‬ُ ‫ت‬ ‫توصيف‬ ‫لغة‬ HTML ‫تحديد‬ ‫من‬ ‫هذه‬ ‫بترجمة‬ ‫للمتصفحات‬ ‫يسمح‬ ‫مما‬ ،‫والنماذج‬ ،‫الجداول‬ ،‫الصور‬ ،‫الروابط‬ ،‫النصوص‬ ‫للمستخدم‬ ‫وعرضها‬ ‫العناصر‬ 2.2 ‫للصفحة‬ ‫األساسي‬ ‫الهيكل‬ ‫مستند‬ ‫أي‬ ‫تبدأ‬ HTML ‫بالعالمة‬ <!DOCTYPE html>، ‫وتخبر‬ ‫المستند‬ ‫نوع‬ ‫تحدد‬ ‫التي‬ ‫مستند‬ ‫أنه‬ ‫المتصفح‬ HTML5. ‫التالية‬ ‫العناصر‬ ‫استخدام‬ ‫يتم‬ ،‫ذلك‬ ‫بعد‬:
<!DOCTYPE html>: ‫مستند‬ ‫هو‬ ‫هذا‬ ‫أن‬ ‫إلى‬ ‫ويشير‬ ‫المستند‬ ‫نوع‬ ‫يحدد‬ HTML5. <html>: ‫للمستند‬ ‫الجذري‬ ‫العنصر‬. <head>: ‫وتعريفات‬ ‫الصفحة‬ ‫عنوان‬ ‫مثل‬ ،‫للمستخدم‬ ‫مرئية‬ ‫غير‬ ‫معلومات‬ ‫على‬ ‫يحتوي‬ ‫الميتا‬. <title>: ‫المتصفح‬ ‫في‬ ‫التبويب‬ ‫عالمة‬ ‫أو‬ ‫العنوان‬ ‫شريط‬ ‫في‬ ‫يظهر‬ ‫الذي‬ ‫الصفحة‬ ‫عنوان‬ ‫يحدد‬. <body>: ‫والصور‬ ‫النصوص‬ ‫مثل‬ ،‫للصفحة‬ ‫المرئي‬ ‫المحتوى‬ ‫على‬ ‫يحتوي‬. 2.3 ‫األساسية‬ ‫العناصر‬ ‫في‬ ‫العناصر‬ HTML ‫بداية‬ ‫من‬ ‫تتكون‬ ‫العناصر‬ .‫المحتوى‬ ‫وتنظيم‬ ‫هيكل‬ ‫إلنشاء‬ ‫ستخدم‬ُ ‫ت‬ ‫سمات‬ ‫على‬ ‫يحتوي‬ ‫وبعضها‬ ،‫نهاية‬ ‫وعالمة‬ (attributes). ‫العناوين‬:
href: ‫الرابط‬ ‫عنوان‬ ‫يحدد‬. target: ‫الرابط‬ ‫فتح‬ ‫كيفية‬ ‫يحدد‬. _blank ‫جديدة‬ ‫نافذة‬ ‫في‬ ‫الرابط‬ ‫فتح‬ ‫يعني‬. 2.5 ‫والجداول‬ ‫القوائم‬ ‫القوائم‬:
<table>: ‫الجدول‬ ‫تعريف‬. <tr>: ‫الصف‬ ‫تعريف‬. <th>: ‫العمود‬ ‫رأس‬ ‫تعريف‬. <td>: ‫البيانات‬ ‫خلية‬ ‫تعريف‬. 2.6 ‫النماذج‬ (Forms)
<form>: ‫النموذج‬ ‫عناصر‬ ‫من‬ ‫مجموعة‬ ‫على‬ ‫يحتوي‬ ‫الذي‬ ‫العنصر‬. action: ‫يحدد‬ URL ‫البيانات‬ ‫إليه‬ ‫رسل‬ُ ‫ت‬‫س‬ ‫الذي‬. method: ‫اإلرسال‬ ‫طريقة‬ ‫يحدد‬ (GET ‫أو‬ POST). <input>: ‫واألزرار‬ ‫النصوص‬ ‫مثل‬ ‫الحقول‬ ‫من‬ ‫مختلفة‬ ‫أنواع‬ ‫إلنشاء‬. 2.7 ‫الوسائط‬ ‫والفيديوهات‬ ‫الصور‬ ‫مثل‬ ‫وسائط‬ ‫إلدراج‬: ‫خالصة‬ ‫تعتبر‬ HTML ‫بفهم‬ .‫المحتوى‬ ‫وتنظم‬ ‫األساسي‬ ‫الهيكل‬ ‫توفر‬ ‫حيث‬ ،‫ويب‬ ‫موقع‬ ‫كل‬ ‫أساس‬ ‫أساسيات‬ HTML ‫ويب‬ ‫صفحات‬ ‫بناء‬ ‫في‬ ‫البدء‬ ‫يمكنك‬ ،‫المختلفة‬ ‫العناصر‬ ‫استخدام‬ ‫وكيفية‬ ‫سنتناول‬ ،‫القادمة‬ ‫الفصول‬ ‫في‬ .‫ومؤثرة‬ ‫منسقة‬ CSS ‫و‬ JavaScript ‫لكيفية‬ ‫فهمك‬ ‫لتكملة‬
‫وجمالي‬ ‫تفاعلي‬ ‫بشكل‬ ‫الويب‬ ‫صفحات‬ ‫وتطوير‬ ‫تحسين‬. 3. CSS (Cascading Style Sheets) ChatGPT 3. CSS (Cascading Style Sheets) CSS، ‫صفحات‬ ‫محتوى‬ ‫وتجميل‬ ‫لتنسيق‬ ‫ستخدم‬ُ ‫ت‬ ‫التي‬ ‫اللغة‬ ‫هي‬ ،‫المتتالية‬ ‫األنماط‬ ‫أوراق‬ ‫أو‬ ‫تحدد‬ ‫بينما‬ .‫الويب‬ HTML ‫فإن‬ ،‫المحتوى‬ ‫هيكل‬ CSS ‫هذا‬ ‫ظهور‬ ‫كيفية‬ ‫بتحديد‬ ‫عنى‬ُ ‫ت‬ ‫خالل‬ ‫من‬ .‫المحتوى‬ CSS، ‫مما‬ ،‫والتخطيطات‬ ،‫المسافات‬ ،‫الخطوط‬ ،‫األلوان‬ ‫في‬ ‫التحكم‬ ‫يمكننا‬ ً ‫ال‬‫وتفاع‬ ‫جاذبية‬ ‫أكثر‬ ‫الصفحات‬ ‫يجعل‬. 3.1 ‫في‬ ‫مقدمة‬ CSS CSS ‫المكتوب‬ ‫المحتوى‬ ‫وتنسيق‬ ‫شكل‬ ‫لتحديد‬ ‫تستخدم‬ ‫وهي‬ ،‫المتتالية‬ ‫األنماط‬ ‫أوراق‬ ‫تعني‬ ‫بلغة‬ HTML. CSS ‫حتى‬ ‫أو‬ ،‫العناصر‬ ‫من‬ ‫مجموعات‬ ،‫فردية‬ ‫عناصر‬ ‫على‬ ‫تؤثر‬ ‫أن‬ ‫يمكن‬ ‫بأكملها‬ ‫الصفحات‬. ‫إدراج‬ ‫يمكن‬ CSS ‫مستند‬ ‫في‬ HTML ‫مختلفة‬ ‫بطرق‬:
مع التعريف الخصائص والمعطيات html,css,java scriptانشاء موقع للمبتدئين بلغة
مع التعريف الخصائص والمعطيات html,css,java scriptانشاء موقع للمبتدئين بلغة
مع التعريف الخصائص والمعطيات html,css,java scriptانشاء موقع للمبتدئين بلغة
مع التعريف الخصائص والمعطيات html,css,java scriptانشاء موقع للمبتدئين بلغة
3.7 ‫في‬ ‫جيدة‬ ‫ممارسات‬ CSS ‫ملفات‬ ‫استخدم‬ :‫األنماط‬ ‫تنظيم‬ CSS ‫الكود‬ ‫لتنظيم‬ ‫خارجية‬. ‫الفصول‬ ‫استخدم‬ :‫االستخدام‬ ‫إعادة‬ (classes) ‫االستخدام‬ ‫إلعادة‬ ‫قابلة‬ ‫األنماط‬ ‫لجعل‬. ‫ا‬ً ‫ن‬‫ممك‬ ‫ذلك‬ ‫يكون‬ ‫عندما‬ ‫الداخلية‬ ‫واألنماط‬ ‫المدمجة‬ ‫األنماط‬ ‫استخدام‬ ‫من‬ ‫قلل‬ :‫األداء‬ ‫تحسين‬. ‫خالصة‬ CSS ‫تعزز‬ HTML ‫المواقع‬ ‫تجعل‬ ‫بطريقة‬ ‫المحتوى‬ ‫وتصميم‬ ‫لتنسيق‬ ‫وسيلة‬ ‫توفير‬ ‫خالل‬ ‫من‬ ‫استخدام‬ ‫لكيفية‬ ‫بفهمك‬ .‫وتفاعلية‬ ‫جاذبية‬ ‫أكثر‬ CSS ‫وتطبيق‬ ‫والعناصر‬ ‫النصوص‬ ‫لتنسيق‬ ‫إلى‬ ‫سننتقل‬ ،‫القادمة‬ ‫الفصول‬ ‫في‬ .‫كبير‬ ‫بشكل‬ ‫المستخدم‬ ‫تجربة‬ ‫تحسين‬ ‫يمكنك‬ ،‫المتقدمة‬ ‫األنماط‬ JavaScript ‫الويب‬ ‫صفحات‬ ‫إلى‬ ‫والديناميكية‬ ‫التفاعل‬ ‫إلضافة‬. 4. JavaScript ChatGPT 4. JavaScript JavaScript ‫بينما‬ .‫الويب‬ ‫صفحات‬ ‫إلى‬ ‫والديناميكية‬ ‫التفاعل‬ ‫إلضافة‬ ‫ستخدم‬ُ ‫ت‬ ‫برمجة‬ ‫لغة‬ ‫هي‬ ‫توفر‬ HTML ‫و‬ ‫الهيكل‬CSS ‫فإن‬ ،‫التجميل‬ JavaScript ‫الصفحة‬ ‫سلوك‬ ‫برمجة‬ ‫لك‬ ‫يتيح‬ ‫الرسوم‬ ‫إنشاء‬ ‫إلى‬ ‫النماذج‬ ‫صحة‬ ‫من‬ ‫التحقق‬ ‫من‬ .‫المستخدمين‬ ‫مع‬ ً ‫ال‬‫تفاع‬ ‫أكثر‬ ‫وجعلها‬ ‫توفر‬ ،‫المتحركة‬ JavaScript ‫غنية‬ ‫مستخدم‬ ‫تجربة‬ ‫لتطوير‬ ‫واسعة‬ ‫إمكانيات‬.
4.1 ‫في‬ ‫مقدمة‬ JavaScript JavaScript ‫العميل‬ ‫جانب‬ ‫على‬ ‫الغالب‬ ‫في‬ ‫تستخدم‬ ‫برمجة‬ ‫لغة‬ ‫هي‬ (Client-Side) ‫لكن‬ ‫الخادم‬ ‫جانب‬ ‫على‬ ‫استخدامها‬ ‫ا‬ ً ‫أيض‬ ‫يمكن‬ (Server-Side) ‫مثل‬ ‫بيئات‬ ‫باستخدام‬ Node.js. ‫تتميز‬ JavaScript ‫عناصر‬ ‫مع‬ ‫التفاعل‬ ‫على‬ ‫بقدرتها‬ HTML ‫و‬CSS ‫مما‬ ،‫ديناميكي‬ ‫بشكل‬ ‫الحديث‬ ‫الويب‬ ‫لتطوير‬ ‫ضرورية‬ ‫يجعلها‬. ‫إدراج‬ ‫يمكن‬ JavaScript ‫في‬ HTML ‫مختلفة‬ ‫بطرق‬:
مع التعريف الخصائص والمعطيات html,css,java scriptانشاء موقع للمبتدئين بلغة
4.4 ‫مع‬ ‫العمل‬ DOM DOM (Document Object Model) ‫ستخدم‬ُ ‫ت‬ ‫التي‬ ‫التطبيقات‬ ‫برمجة‬ ‫واجهة‬ ‫هو‬ ‫عناصر‬ ‫مع‬ ‫للتفاعل‬ HTML ‫و‬CSS.
4.5 ‫األحداث‬ (Events) ‫مكنك‬ُ ‫ت‬ JavaScript ‫والتمرير‬ ‫النقر‬ ‫مثل‬ ‫المستخدم‬ ‫لتفاعالت‬ ‫االستجابة‬ ‫من‬.
مع التعريف الخصائص والمعطيات html,css,java scriptانشاء موقع للمبتدئين بلغة
4.8 ‫في‬ ‫جيدة‬ ‫ممارسات‬ JavaScript ‫الكود‬ ‫لتنظيم‬ ‫وكائنات‬ ‫دوال‬ ‫استخدم‬ :‫الكود‬ ‫تنظيم‬. ‫استخدم‬ :‫األخطاء‬ ‫مع‬ ‫التعامل‬ try...catch ‫المحتملة‬ ‫األخطاء‬ ‫مع‬ ‫للتعامل‬. ‫التكرار‬ ‫لتقليل‬ ‫االستخدام‬ ‫إلعادة‬ ‫اًل‬‫ب‬‫قا‬ ‫الكود‬ ‫اجعل‬ :‫التكرار‬ ‫تجنب‬. ‫مع‬ ‫التعامل‬ ‫عند‬ ‫ا‬ً ‫حذر‬ ‫كن‬ :‫األداء‬ ‫تحسين‬ DOM ‫األداء‬ ‫على‬ ‫تؤثر‬ ‫التي‬ ‫الثقيلة‬ ‫العمليات‬ ‫لتجنب‬. ‫خالصة‬ JavaScript ‫أكثر‬ ‫المستخدم‬ ‫تجربة‬ ‫يجعل‬ ‫مما‬ ،‫والتفاعل‬ ‫الديناميكية‬ ‫الويب‬ ‫صفحات‬ ‫تمنح‬ ‫أساسيات‬ ‫فهم‬ ‫خالل‬ ‫من‬ .‫وغنى‬ ً ‫ال‬‫تفاع‬ JavaScript ‫مع‬ ‫والتعامل‬ DOM ‫يمكنك‬ ،‫واألحداث‬ ،‫التالية‬ ‫الفصول‬ ‫في‬ .‫قوة‬ ‫أكثر‬ ‫بك‬ ‫الخاصة‬ ‫الويب‬ ‫صفحات‬ ‫وجعل‬ ‫مخصصة‬ ‫تفاعالت‬ ‫إضافة‬ ‫دمج‬ ‫كيفية‬ ‫سنستعرض‬ HTML ‫و‬ CSS ‫و‬ JavaScript ‫الويب‬ ‫تطوير‬ ‫أهداف‬ ‫لتحقيق‬ ‫ا‬ً ‫ع‬‫م‬ ‫المتقدمة‬. 5. ‫عملية‬ ‫مشاريع‬ ‫من‬ ‫تعلمناه‬ ‫ما‬ ‫لتطبيق‬ ‫عملية‬ ‫مشاريع‬ ‫ثالثة‬ ‫بتنفيذ‬ ‫سنقوم‬ ،‫الفقرة‬ ‫هذه‬ ‫في‬ HTML ‫و‬ CSS ‫و‬
JavaScript. ‫إلنشاء‬ ‫ا‬ً ‫ع‬‫م‬ ‫التقنيات‬ ‫هذه‬ ‫استخدام‬ ‫لكيفية‬ ‫فهمك‬ ‫تعزيز‬ ‫إلى‬ ‫تهدف‬ ‫المشاريع‬ ‫هذه‬ ‫ومفيدة‬ ‫تفاعلية‬ ‫ويب‬ ‫صفحات‬. 5.1 ‫مشروع‬ 1 ‫بسيطة‬ ‫ويب‬ ‫صفحة‬ : ‫وصورة‬ ،‫وصف‬ ،‫عنوان‬ ‫على‬ ‫تحتوي‬ ‫بسيطة‬ ‫شخصية‬ ‫ويب‬ ‫صفحة‬ ‫بناء‬ :‫الهدف‬. ‫الخطوات‬ ‫ملف‬ ‫إنشاء‬ HTML
مع التعريف الخصائص والمعطيات html,css,java scriptانشاء موقع للمبتدئين بلغة
مع التعريف الخصائص والمعطيات html,css,java scriptانشاء موقع للمبتدئين بلغة
مع التعريف الخصائص والمعطيات html,css,java scriptانشاء موقع للمبتدئين بلغة
5.3 ‫مشروع‬ 3 ‫تفاعلية‬ ‫قائمة‬ : ‫عليها‬ ‫النقر‬ ‫عند‬ ‫عناصر‬ ‫وتخفي‬ ‫ظهر‬ُ ‫ت‬ ‫تفاعلية‬ ‫قائمة‬ ‫إنشاء‬ :‫الهدف‬. ‫الخطوات‬
مع التعريف الخصائص والمعطيات html,css,java scriptانشاء موقع للمبتدئين بلغة
‫خالصة‬
‫في‬ ‫تعلمته‬ ‫ما‬ ‫لتطبيق‬ ‫وسيلة‬ ‫أفضل‬ ‫هو‬ ‫عملية‬ ‫مشاريع‬ ‫تطبيق‬ HTML ‫و‬ CSS ‫و‬ JavaScript. ‫ويب‬ ‫صفحات‬ ‫إنشاء‬ ‫لتجربة‬ ‫فرصة‬ ‫لك‬ ‫تتيح‬ ‫هنا‬ ‫المذكورة‬ ‫الثالثة‬ ‫المشاريع‬ .‫قيمة‬ ‫عملية‬ ‫تجربة‬ ‫ويعطيك‬ ‫مهاراتك‬ ‫يعزز‬ ‫مما‬ ،‫ديناميكية‬ ‫وقوائم‬ ،‫تفاعلية‬ ‫نماذج‬ ،‫بسيطة‬ ‫وتطلعاتك‬ ‫الحتياجاتك‬ ‫ا‬ً ‫ق‬‫وف‬ ‫الميزات‬ ‫من‬ ‫المزيد‬ ‫وإضافة‬ ‫المشاريع‬ ‫هذه‬ ‫توسيع‬ ‫يمكنك‬. ### 6. ‫إضافية‬ ‫وموارد‬ ‫مراجع‬ ‫في‬ ‫مهاراتك‬ ‫لتحسين‬ HTML ‫و‬ CSS ‫و‬ JavaScript، ‫وصول‬ ‫لديك‬ ‫يكون‬ ‫أن‬ ‫المهم‬ ‫من‬ ‫وتعزيز‬ ‫التعلم‬ ‫في‬ ‫تساعدك‬ ‫أن‬ ‫يمكن‬ ‫التي‬ ‫بالموارد‬ ‫قائمة‬ ‫هنا‬ .‫موثوقة‬ ‫وموارد‬ ‫مراجع‬ ‫إلى‬ ‫معرفتك‬: #### 6.1 HTML 1. **[‫مستندات‬ MDN - HTML](https://developer.mozilla.org/ar/docs/Web/HTML)**: - ‫تعتبر‬ MDN (Mozilla Developer Network) ‫لتعلم‬ ‫المصادر‬ ‫أفضل‬ ‫من‬ HTML، ‫عملية‬ ‫وأمثلة‬ ً ‫ال‬‫شام‬ ‫ا‬ً ‫ق‬‫توثي‬ ‫وتوفر‬. 2. **[W3Schools - HTML Tutorial](https://www.w3schools.com/html/)**: - ‫موقع‬ W3Schools ‫لتعلم‬ ‫الفهم‬ ‫سهلة‬ ‫وأمثلة‬ ‫تفاعلية‬ ‫ا‬ ً ‫دروس‬ ‫يقدم‬ HTML. 3. **[HTML.com](https://html.com/)**: - ‫موقع‬ ‫يقدم‬ HTML.com ‫أساسيات‬ ‫حول‬ ‫ا‬ً ‫ومباشر‬ ‫ا‬ ً ‫بسيط‬ ‫اًل‬‫ي‬‫دل‬ HTML.
#### 6.2 CSS 1. **[‫مستندات‬ MDN - CSS](https://developer.mozilla.org/ar/docs/Web/CSS)**: - ‫خصائص‬ ‫جميع‬ ‫حول‬ ‫شامل‬ ‫توثيق‬ CSS ‫مفصلة‬ ‫وتفسيرات‬. 2. **[CSS-Tricks](https://css-tricks.com/)**: - ‫تقنيات‬ ‫حول‬ ‫عملية‬ ‫وأمثلة‬ ،‫دروس‬ ،‫مقاالت‬ ‫على‬ ‫يحتوي‬ ‫موقع‬ CSS. 3. **[W3Schools - CSS Tutorial](https://www.w3schools.com/css/)**: - ‫لتعلم‬ ‫تفاعلي‬ ‫تعليمي‬ ‫مصدر‬ CSS ‫المتقدمة‬ ‫التقنيات‬ ‫إلى‬ ‫األساسيات‬ ‫من‬. #### 6.3 JavaScript 1. **[‫مستندات‬ MDN - JavaScript](https://developer.mozilla.org/ar/docs/Web/JavaScript) **: - ‫للغة‬ ‫وشامل‬ ‫غني‬ ‫توثيق‬ JavaScript، ‫والطرق‬ ‫للوظائف‬ ‫وشرح‬ ‫أمثلة‬ ‫على‬ ‫يحتوي‬ ‫المختلفة‬. 2. **[Eloquent JavaScript](https://eloquentjavascript.net/)**: - ‫يتناول‬ ‫اإلنترنت‬ ‫عبر‬ ‫مجاني‬ ‫كتاب‬ JavaScript ‫تطبيقية‬ ‫تمارين‬ ‫مع‬ ‫بعمق‬.
3. **[W3Schools - JavaScript Tutorial](https://www.w3schools.com/js/)**: - ‫حول‬ ‫تفاعلية‬ ‫دروس‬ JavaScript، ‫العملية‬ ‫والتمارين‬ ‫السريع‬ ‫للتعلم‬ ‫مفيدة‬. 4. **[JavaScript.info](https://javascript.info/)**: - ‫في‬ ‫شاملة‬ ‫دورات‬ ‫على‬ ‫يحتوي‬ ‫موقع‬ JavaScript ‫وتدريبات‬ ‫مفصل‬ ‫شرح‬ ‫مع‬. #### 6.4 ‫عامة‬ ‫موارد‬ 1. **[FreeCodeCamp](https://www.freecodecamp.org/)**: - ‫في‬ ‫وشهادات‬ ‫ا‬ ً ‫دروس‬ ‫تقدم‬ ‫تعليمية‬ ‫منصة‬ HTML، CSS، ‫و‬JavaScript ‫باإلضافة‬ ‫عملية‬ ‫مشاريع‬ ‫إلى‬. 2. **[Codecademy](https://www.codecademy.com/)**: - ‫في‬ ‫تفاعلية‬ ‫ا‬ ً ‫دروس‬ ‫تقدم‬ HTML، CSS، ‫و‬JavaScript ‫عملية‬ ‫تطبيقات‬ ‫مع‬. 3. **[Coursera](https://www.coursera.org/)**: - ‫في‬ ‫مرموقة‬ ‫جامعات‬ ‫من‬ ‫تعليمية‬ ‫دورات‬ ‫تقدم‬ ‫منصة‬ HTML، CSS، ‫و‬JavaScript. 4. **[edX](https://www.edx.org/)**: - ‫تطوير‬ ‫في‬ ‫مرموقة‬ ‫تعليمية‬ ‫ومؤسسات‬ ‫جامعات‬ ‫من‬ ‫متقدمة‬ ‫دورات‬ ‫تقدم‬ ‫تعليمية‬ ‫منصة‬
‫الويب‬. 5. **[Udemy](https://www.udemy.com/)**: - ‫في‬ ‫الدورات‬ ‫من‬ ‫واسعة‬ ‫مجموعة‬ ‫على‬ ‫تحتوي‬ ‫منصة‬ HTML، CSS، ‫و‬JavaScript، ‫والمتقدمين‬ ‫للمبتدئين‬ ‫خيارات‬ ‫مع‬. 6. **[Stack Overflow](https://stackoverflow.com/)**: - ‫حول‬ ‫المجتمع‬ ‫من‬ ‫إجابات‬ ‫على‬ ‫والحصول‬ ‫األسئلة‬ ‫طرح‬ ‫يمكنك‬ ‫حيث‬ ‫للمبرمجين‬ ‫منتدى‬ ‫الويب‬ ‫تطوير‬ ‫مشكالت‬. 7. **[GitHub](https://github.com/)**: - ‫المصدر‬ ‫مفتوحة‬ ‫مشاريع‬ ‫استكشاف‬ ‫يمكنك‬ ‫حيث‬ ‫المصدرية‬ ‫الشيفرة‬ ‫لمشاركة‬ ‫منصة‬ ‫حقيقية‬ ‫أمثلة‬ ‫من‬ ‫وتعلم‬ ‫أكواد‬ ‫وتحميل‬. #### 6.5 ‫مفيدة‬ ‫كتب‬ 1. **"HTML and CSS: Design and Build Websites"** by Jon Duckett - ‫حول‬ ‫واضحة‬ ‫بصرية‬ ‫مقدمة‬ ‫على‬ ‫يحتوي‬ ‫للمبتدئين‬ ‫رائع‬ ‫كتاب‬ HTML ‫و‬CSS. 2. **"JavaScript and JQuery: Interactive Front-End Web Development"** by Jon Duckett - ‫على‬ ‫يركز‬ ‫شامل‬ ‫كتاب‬ JavaScript ‫و‬jQuery ‫توضيحية‬ ‫أمثلة‬ ‫مع‬.
3. **"You Don’t Know JS"** Series by Kyle Simpson - ‫في‬ ‫متعمقة‬ ‫كتب‬ ‫سلسلة‬ JavaScript ً ‫ال‬‫تفصي‬ ‫أكثر‬ ‫معرفة‬ ‫يريدون‬ ‫الذين‬ ‫للمطورين‬ ‫اللغة‬ ‫حول‬. ### ‫خالصة‬ ‫في‬ ‫مهاراتك‬ ‫وتطوير‬ ‫لتعلم‬ ‫هامة‬ ‫أدوات‬ ‫أعاله‬ ‫المذكورة‬ ‫والمراجع‬ ‫الموارد‬ ‫تعد‬ HTML ‫و‬CSS ‫و‬JavaScript. ‫من‬ ‫سيعزز‬ ‫خاللها‬ ‫من‬ ‫تعلمته‬ ‫ما‬ ‫وممارسة‬ ‫الموارد‬ ‫هذه‬ ‫استكشاف‬ ‫وكفاءة‬ ‫ا‬ً ‫تطور‬ ‫أكثر‬ ‫ويب‬ ‫تطبيقات‬ ‫بناء‬ ‫على‬ ‫قدرتك‬.
مع التعريف الخصائص والمعطيات html,css,java scriptانشاء موقع للمبتدئين بلغة

More Related Content

DOCX
الفرق بين تصميم وتطوير المواقع​ الإلكترونية 2025 - قيمة تك.docx
MohamedAbdelBaset37
 
PDF
تعلم HTML CSS و JavaScript
Molham Al-Maleh
 
PPTX
lecture 2.en.ar Website Design yem .pptx
husinefahmi93
 
PPT
Web Page Design 1
English TVTC
 
PPTX
Day 13 HTML Basics and tags level 1 . pptx
MaysaloonAbuZaglan
 
PPTX
ويب 2
guest5eceb37
 
PPTX
خارطة الطريق لإنشاء موقع إلكتروني متميز.pptx
junjer
 
PPTX
معايير تصميم صفحات الويب
تقنيات التعليم
 
الفرق بين تصميم وتطوير المواقع​ الإلكترونية 2025 - قيمة تك.docx
MohamedAbdelBaset37
 
تعلم HTML CSS و JavaScript
Molham Al-Maleh
 
lecture 2.en.ar Website Design yem .pptx
husinefahmi93
 
Web Page Design 1
English TVTC
 
Day 13 HTML Basics and tags level 1 . pptx
MaysaloonAbuZaglan
 
ويب 2
guest5eceb37
 
خارطة الطريق لإنشاء موقع إلكتروني متميز.pptx
junjer
 
معايير تصميم صفحات الويب
تقنيات التعليم
 

Similar to مع التعريف الخصائص والمعطيات html,css,java scriptانشاء موقع للمبتدئين بلغة (20)

PPS
خلاصات Rss
Khaled Safi
 
PDF
Bootstrap-1
Mohamed Sherif
 
PDF
Web Design
Anas Alpure
 
PDF
محتوي دورة السيو الشاملة.pdf
HassanEssam4
 
PDF
Search engine-optimization123-starter-guide-ar
Eslam El Hemaly
 
PPTX
المحاضرة الثامنة وورد2013.
د. عائشة بليهش العمري
 
PPT
sultante Of Oman , Ministry of Education
Thuraya Alghaithi
 
PPTX
PhpStorm
Basel Issmail
 
PDF
Search engine-optimization-starter-guide-ar
Mohamed HeJazy
 
PPTX
مشروع التخرج
alaa44
 
PPSX
مشروع التخرج الجديد
alaa44
 
PPTX
مشروع التخرج
alaa44
 
PPSX
مشروع التخرج الجديد
alaa44
 
DOCX
تعرف على الفرق بين تصميم المواقع وبرمجة المواقع.docx
MohamedAbdelBaset37
 
PDF
منهاج بناء و تصميم مواقع الانترنيت
DrMohammed Qassim
 
PDF
ماهو الويب ديزاين؟
Click Apps
 
PPTX
2 100426133756-phpapp01
Mohamed Alfakih
 
PPTX
تصميم المواقع الالكترونية عرض
Alnoor26
 
PDF
يعنى أية ويب ديزاين
Mustafa Mahmoud A.ElQader
 
PDF
الدرس الثاني عشر
Anas Aloklah
 
خلاصات Rss
Khaled Safi
 
Bootstrap-1
Mohamed Sherif
 
Web Design
Anas Alpure
 
محتوي دورة السيو الشاملة.pdf
HassanEssam4
 
Search engine-optimization123-starter-guide-ar
Eslam El Hemaly
 
المحاضرة الثامنة وورد2013.
د. عائشة بليهش العمري
 
sultante Of Oman , Ministry of Education
Thuraya Alghaithi
 
PhpStorm
Basel Issmail
 
Search engine-optimization-starter-guide-ar
Mohamed HeJazy
 
مشروع التخرج
alaa44
 
مشروع التخرج الجديد
alaa44
 
مشروع التخرج
alaa44
 
مشروع التخرج الجديد
alaa44
 
تعرف على الفرق بين تصميم المواقع وبرمجة المواقع.docx
MohamedAbdelBaset37
 
منهاج بناء و تصميم مواقع الانترنيت
DrMohammed Qassim
 
ماهو الويب ديزاين؟
Click Apps
 
2 100426133756-phpapp01
Mohamed Alfakih
 
تصميم المواقع الالكترونية عرض
Alnoor26
 
يعنى أية ويب ديزاين
Mustafa Mahmoud A.ElQader
 
الدرس الثاني عشر
Anas Aloklah
 
Ad

مع التعريف الخصائص والمعطيات html,css,java scriptانشاء موقع للمبتدئين بلغة

  • 1. ‫للغات‬ ‫األكواد‬ ‫جميع‬ ‫يغطي‬ ‫شامل‬ ‫كتاب‬ ‫كتابة‬ ‫إن‬ HTML ‫و‬CSS ‫و‬JavaScript ‫مع‬ .‫ومعقد‬ ‫طموح‬ ‫مشروع‬ ‫هو‬ ‫عميق‬ ‫بتفصيل‬ ‫أمر‬ ‫كل‬ ‫وشرح‬ ‫والمعطيات‬ ‫والخصائص‬ ‫التعريفات‬ ‫الكتاب‬ ‫هذا‬ ‫مثل‬ ‫إنشاء‬ ‫في‬ ‫يساعدك‬ ‫أن‬ ‫يمكن‬ ً‫إطارا‬ ‫إليك‬: 1. ‫مقدمة‬ ‫تعلم‬ ‫أهمية‬ HTML ‫و‬CSS ‫و‬JavaScript: ‫هذه‬ ‫استخدام‬ ‫كيفية‬ ‫عن‬ ‫عامة‬ ‫نظرة‬ ‫تقديم‬ ‫الويب‬ ‫مواقع‬ ‫وتطوير‬ ‫لبناء‬ ‫ا‬ً ‫ع‬‫م‬ ‫اللغات‬. 2. HTML (Hypertext Markup Language) ‫في‬ ‫مقدمة‬ HTML: ‫تاريخ‬ HTML ‫التوصيف‬ ‫لغة‬ ‫وأهمية‬. ‫أساسيات‬ HTML: ‫للصفحة‬ ‫األساسي‬ ‫الهيكل‬ (‫األساسية‬ ‫العناصر‬: <html>, <head>, <body>, ‫)إلخ‬. ‫العناصر‬: <h1>, <p>, <a>, <div>, <span>, ‫إلخ‬. ‫السمات‬ (Attributes): ‫مثل‬ ‫السمات‬ ‫استخدام‬ ‫كيفية‬ class, id, href, src. ‫والجداول‬ ‫القوائم‬: )‫التعريفية‬ ‫والقوائم‬ ،‫المرتبة‬ ،‫المرتبة‬ ‫(غير‬ ‫القوائم‬. ‫واألعمدة‬ ‫الصفوف‬ ‫وإضافة‬ ‫الجداول‬ ‫إنشاء‬ ‫كيفية‬ :‫الجداول‬. ‫النماذج‬: ‫نماذج‬ ‫إنشاء‬ ‫كيفية‬ (form) ‫مثل‬ ‫النموذج‬ ‫عناصر‬ ‫واستخدام‬ <input>, <textarea>, <button>. ‫الوسائط‬: ‫والصوتيات‬ ‫والفيديوهات‬ ‫الصور‬ ‫إدراج‬. 3. CSS (Cascading Style Sheets) ‫في‬ ‫مقدمة‬ CSS: ‫باستخدام‬ ‫التصميم‬ ‫مفهوم‬ CSS ‫والتنسيق‬ ‫الفصول‬ ‫وأهمية‬.
  • 2. ‫أساسيات‬ CSS: ‫إدراج‬ ‫كيفية‬ CSS ‫في‬ HTML (‫والتمهيدية‬ ،‫الخارجية‬ ،‫الداخلية‬ ‫)األنماط‬. ‫األنماط‬ ‫وتطبيق‬ ‫العناصر‬ ‫تحديد‬ (‫باستخدام‬ ‫االنتقاء‬ selector). ‫النصوص‬ ‫تنسيق‬: ‫مثل‬ ‫األساسية‬ ‫الخصائص‬ color, font-size, font-family. ‫العناصر‬ ‫تنسيق‬: ‫الحدود‬ ،‫الحشوات‬ ،‫الهوامش‬ ،‫األلوان‬. ‫المتقدمة‬ ‫األنماط‬: ‫الشرطية‬ ‫القواعد‬ ‫استخدام‬ (media queries) ‫المتجاوب‬ ‫للتصميم‬. ‫والتحويل‬ ‫االنتقال‬ ‫تأثيرات‬ (transitions and transformations). ‫التخطيط‬: ‫مثل‬ ‫التخطيط‬ ‫أنماط‬ Flexbox ‫و‬ Grid. 4. JavaScript ‫في‬ ‫مقدمة‬ JavaScript: ‫لـ‬ ‫يمكن‬ ‫كيف‬ JavaScript ‫الصفحة‬ ‫مع‬ ‫المستخدم‬ ‫تفاعل‬ ‫تعزيز‬. ‫أساسيات‬ JavaScript: ‫والعمليات‬ ،‫التعبيرات‬ ،‫األنواع‬ ،‫المتغيرات‬. ‫التدفق‬ ‫في‬ ‫التحكم‬: ‫والحلقات‬ ‫الشروط‬ (if, switch, for, while). ‫وظائف‬ (Functions): ‫األسهم‬ ‫ووظائف‬ ،‫الوظائف‬ ‫واستدعاء‬ ‫تعريف‬ ‫كيفية‬ (Arrow Functions). ‫مع‬ ‫العمل‬ DOM:
  • 3. ‫باستخدام‬ ‫الصفحة‬ ‫عناصر‬ ‫وتعديل‬ ‫إلى‬ ‫الوصول‬ ‫كيفية‬ JavaScript. ‫األحداث‬ (Events): ‫المستخدم‬ ‫تفاعالت‬ ‫مع‬ ‫والتفاعل‬ ‫األحداث‬ ‫مستمعي‬ ‫إضافة‬. ‫البيانات‬ ‫مع‬ ‫التعامل‬: ‫عبر‬ ‫البيانات‬ ‫مع‬ ‫التعامل‬ JSON، ‫التطبيقات‬ ‫برمجة‬ ‫واجهات‬ (APIs). 5. ‫عملية‬ ‫مشاريع‬ ‫مشروع‬ 1 ‫باستخدام‬ ‫بسيطة‬ ‫ويب‬ ‫صفحة‬ ‫تصميم‬ : HTML ‫و‬ CSS. ‫مشروع‬ 2 ‫باستخدام‬ ‫تفاعل‬ ‫إضافة‬ : JavaScript ‫السابق‬ ‫المشروع‬ ‫إلى‬. ‫مشروع‬ 3 ‫باستخدام‬ ‫الصحة‬ ‫من‬ ‫التحقق‬ ‫وإضافة‬ ‫تفاعلي‬ ‫نموذج‬ ‫بناء‬ : JavaScript. 6. ‫إضافية‬ ‫وموارد‬ ‫مراجع‬ ‫ومنتديات‬ ،‫تدريبية‬ ‫دورات‬ ،‫تعليمية‬ ‫مواقع‬ :‫اإلنترنت‬ ‫عبر‬ ‫المصادر‬. ‫متقدمة‬ ‫أخرى‬ ‫لكتب‬ ‫توصيات‬ :‫أخرى‬ ‫كتب‬. ‫األكواد‬ ‫وتصحيح‬ ‫تطوير‬ ‫في‬ ‫تساعد‬ ‫أدوات‬ :‫تطوير‬ ‫أدوات‬. 7. ‫خاتمة‬ ‫مهاراتك‬ ‫وتطوير‬ ‫تعلم‬ ‫في‬ ‫االستمرار‬ ‫كيفية‬ :‫الويب‬ ‫تطوير‬ ‫مستقبل‬. ‫بشكل‬ ‫مفهوم‬ ‫كل‬ ‫لتوضيح‬ ‫وتمارين‬ ‫عملية‬ ‫أمثلة‬ ‫وتضمين‬ ،‫الحاجة‬ ‫حسب‬ ‫قسم‬ ‫كل‬ ‫توسيع‬ ‫يمكنك‬ ‫أفضل‬. ‫مقدمة‬ ‫من‬ ‫ا‬ً ‫ي‬‫أساس‬ ‫ا‬ً ‫ء‬‫جز‬ ‫اإللكترونية‬ ‫المواقع‬ ‫تطوير‬ ‫أصبح‬ ،‫الحديث‬ ‫الرقمية‬ ‫التكنولوجيا‬ ‫عصر‬ ‫في‬ ‫موقع‬ ‫كل‬ ،‫المعقدة‬ ‫اإللكترونية‬ ‫المنصات‬ ‫إلى‬ ‫البسيطة‬ ‫الشخصية‬ ‫المواقع‬ ‫من‬ .‫اليومية‬ ‫حياتنا‬ ،‫التقني‬ ‫العالم‬ ‫هذا‬ ‫قلب‬ ‫في‬ .‫وتطويره‬ ‫لبنائه‬ ‫والتقنيات‬ ‫اللغات‬ ‫من‬ ‫مجموعة‬ ‫استخدام‬ ‫يتطلب‬ ‫ويب‬ ‫لغات‬ ‫تلعب‬
  • 4. HTML ‫و‬ CSS ‫و‬ JavaScript ‫ومتكاملة‬ ‫حيوية‬ ً‫أدوارا‬. ‫هي‬ ‫ما‬ HTML‫؟‬ HTML، ‫التشعبية‬ ‫النصوص‬ ‫توصيف‬ ‫لغة‬ ‫أو‬ (HyperText Markup Language)، ‫تستخدم‬ .‫الويب‬ ‫صفحات‬ ‫عليه‬ ‫بنى‬ُ ‫ت‬ ‫الذي‬ ‫األساس‬ ‫هي‬ HTML ‫على‬ ‫المحتوى‬ ‫هيكل‬ ‫لتحديد‬ ‫العناصر‬ ‫من‬ ‫مجموعة‬ ‫خالل‬ ‫من‬ .‫والصور‬ ‫الروابط‬ ‫إلى‬ ‫والفقرات‬ ‫العناوين‬ ‫من‬ ،‫الويب‬ ‫والعالمات‬ (tags)، ‫تمكن‬ HTML ‫يسهل‬ ‫مما‬ ،‫للمحتوى‬ ‫ومترابطة‬ ‫واضحة‬ ‫بنية‬ ‫إنشاء‬ ‫من‬ ‫صحيح‬ ‫بشكل‬ ‫المحتوى‬ ‫عرض‬ ‫المتصفحات‬ ‫على‬. ‫هي‬ ‫ما‬ CSS‫؟‬ CSS، ‫المتتالية‬ ‫األنماط‬ ‫أوراق‬ ‫أو‬ (Cascading Style Sheets)، ‫المسؤولة‬ ‫اللغة‬ ‫هي‬ ‫باستخدام‬ ‫إنشاؤه‬ ‫تم‬ ‫الذي‬ ‫المحتوى‬ ‫وتجميل‬ ‫تنسيق‬ ‫عن‬ HTML. ‫تهتم‬ ‫بينما‬ HTML ‫بتحديد‬ ‫فإن‬ ،‫للمحتوى‬ ‫األساسي‬ ‫الهيكل‬ CSS ‫مظهر‬ ‫لتعزيز‬ ‫والتخطيطات‬ ،‫الخطوط‬ ،‫األلوان‬ ‫تضيف‬ ‫تساعد‬ ،‫المختلفة‬ ‫العناصر‬ ‫على‬ ‫األنماط‬ ‫تطبيق‬ ‫خالل‬ ‫من‬ .‫جاذبية‬ ‫أكثر‬ ‫وجعلها‬ ‫الصفحة‬ CSS ‫الموقع‬ ‫مع‬ ‫التفاعل‬ ‫وتسهيل‬ ‫المستخدم‬ ‫تجربة‬ ‫تحسين‬ ‫في‬. ‫هي‬ ‫ما‬ JavaScript‫؟‬ JavaScript ‫بينما‬ .‫الويب‬ ‫صفحات‬ ‫إلى‬ ‫والديناميكية‬ ‫التفاعل‬ ‫تضيف‬ ‫التي‬ ‫البرمجة‬ ‫لغة‬ ‫هي‬ ‫تقوم‬ HTML ‫و‬ CSS ‫فإن‬ ،‫المحتوى‬ ‫عرض‬ ‫كيفية‬ ‫بتحديد‬ JavaScript ‫بإنشاء‬ ‫يسمح‬ ‫من‬ .‫البيانات‬ ‫صحة‬ ‫من‬ ‫والتحقق‬ ،‫المتحركة‬ ‫الرسوم‬ ،‫للتفاعل‬ ‫القابلة‬ ‫النماذج‬ ‫مثل‬ ‫تفاعلية‬ ‫تجارب‬ ‫تمكن‬ ،‫الصفحة‬ ‫إلى‬ ‫برمجية‬ ‫وظائف‬ ‫إضافة‬ ‫خالل‬ JavaScript ‫مستخدم‬ ‫تجربة‬ ‫تقديم‬ ‫من‬ ‫وغنى‬ ‫تفاعلية‬ ‫أكثر‬. ‫اللغات؟‬ ‫هذه‬ ‫تعلم‬ ‫لماذا‬ ‫استخدام‬ ‫كيفية‬ ‫فهم‬ HTML ‫و‬ CSS ‫و‬ JavaScript ‫ألي‬ ‫ا‬ً ‫ي‬‫ضرور‬ ‫بل‬ ‫ًا‬ ‫د‬‫مفي‬ ‫فقط‬ ‫ليس‬ ‫الويب‬ ‫مواقع‬ ‫معظم‬ ‫عليه‬ ‫يقوم‬ ‫الذي‬ ‫األساس‬ ‫هي‬ ‫اللغات‬ ‫هذه‬ .‫الويب‬ ‫بتطوير‬ ‫مهتم‬ ‫شخص‬ ‫إلى‬ ‫تطمح‬ ‫كنت‬ ‫سواء‬ ،‫المهنية‬ ‫للفرص‬ ‫جديدة‬ ‫ا‬ً ‫ب‬‫أبوا‬ ‫يفتح‬ ‫أن‬ ‫يمكن‬ ‫تعلمها‬ .‫الحديثة‬ ‫والتطبيقات‬ ‫المعلومات‬ ‫تكنولوجيا‬ ‫مجال‬ ‫في‬ ‫مهاراتك‬ ‫تحسين‬ ‫في‬ ‫ترغب‬ ‫أو‬ ‫ويب‬ ‫كمطور‬ ‫العمل‬.
  • 5. ‫الكتاب‬ ‫هذا‬ ‫هدف‬ ‫أساسيات‬ ‫على‬ ‫للتعرف‬ ‫شامل‬ ‫دليل‬ ‫تقديم‬ ‫إلى‬ ‫الكتاب‬ ‫هذا‬ ‫يهدف‬ HTML ‫و‬ CSS ‫و‬ JavaScript، ‫كل‬ ‫سنستعرض‬ .‫بفعالية‬ ‫لغة‬ ‫كل‬ ‫استخدام‬ ‫كيفية‬ ‫حول‬ ‫مفصل‬ ‫شرح‬ ‫تقديم‬ ‫مع‬ ‫دمج‬ ‫كيفية‬ ‫وسنستعرض‬ ،‫األساسية‬ ‫واألوامر‬ ‫واألنماط‬ ‫الخصائص‬ ‫توضيح‬ ‫مع‬ ،‫حدة‬ ‫على‬ ‫لغة‬ ‫في‬ ‫لمساعدتك‬ ‫وتمارين‬ ‫عملية‬ ‫أمثلة‬ ‫الكتاب‬ ‫يتضمن‬ .‫متكاملة‬ ‫ويب‬ ‫مواقع‬ ‫لتطوير‬ ‫اللغات‬ ‫هذه‬ ‫تعلمتها‬ ‫التي‬ ‫المهارات‬ ‫وتطبيق‬ ‫فهمك‬ ‫تعزيز‬. ‫مواقع‬ ‫بناء‬ ‫على‬ ً‫ا‬‫قادر‬ ‫تكون‬ ‫وأن‬ ‫المقدمة‬ ‫المعلومات‬ ‫من‬ ‫تستفيد‬ ‫أن‬ ‫نأمل‬ ،‫الكتاب‬ ‫هذا‬ ‫خالل‬ ‫من‬ ‫أو‬ ‫الويب‬ ‫تطوير‬ ‫عالم‬ ‫في‬ ‫ا‬ً ‫ئ‬‫مبتد‬ ‫كنت‬ ‫سواء‬ .‫المتاحة‬ ‫األدوات‬ ‫باستخدام‬ ‫وتفاعلية‬ ‫جذابة‬ ‫ويب‬ ‫أهدافك‬ ‫وتحقيق‬ ‫مهاراتك‬ ‫لتعزيز‬ ‫الالزمة‬ ‫الموارد‬ ‫لك‬ ‫سيقدم‬ ‫الكتاب‬ ‫هذا‬ ‫فإن‬ ،‫سابقة‬ ‫خبرة‬ ‫لديك‬ ‫الديناميكي‬ ‫المجال‬ ‫هذا‬ ‫في‬. 2. HTML (HyperText Markup Language) HTML، ‫تستخدم‬ .‫الويب‬ ‫لتطوير‬ ‫األساس‬ ‫حجر‬ ‫هي‬ ،‫التشعبية‬ ‫النصوص‬ ‫توصيف‬ ‫لغة‬ ‫أو‬ HTML ‫هذا‬ ‫في‬ .‫والعناصر‬ ‫النصوص‬ ‫هيكل‬ ‫خالل‬ ‫من‬ ‫الويب‬ ‫صفحات‬ ‫محتوى‬ ‫وتنسيق‬ ‫لكتابة‬ ‫من‬ ‫تجعل‬ ‫التي‬ ‫التفاصيل‬ ‫في‬ ‫ونغوص‬ ‫األساسيات‬ ‫سنستعرض‬ ،‫القسم‬ HTML ‫ألي‬ ‫أساسية‬ ‫لغة‬ ‫ويب‬ ‫مطور‬. 2.1 ‫في‬ ‫مقدمة‬ HTML ‫تعتبر‬ HTML ‫مكن‬ُ ‫ت‬ .‫الويب‬ ‫صفحات‬ ‫هيكل‬ ‫إلنشاء‬ ‫ستخدم‬ُ ‫ت‬ ‫توصيف‬ ‫لغة‬ HTML ‫تحديد‬ ‫من‬ ‫هذه‬ ‫بترجمة‬ ‫للمتصفحات‬ ‫يسمح‬ ‫مما‬ ،‫والنماذج‬ ،‫الجداول‬ ،‫الصور‬ ،‫الروابط‬ ،‫النصوص‬ ‫للمستخدم‬ ‫وعرضها‬ ‫العناصر‬ 2.2 ‫للصفحة‬ ‫األساسي‬ ‫الهيكل‬ ‫مستند‬ ‫أي‬ ‫تبدأ‬ HTML ‫بالعالمة‬ <!DOCTYPE html>، ‫وتخبر‬ ‫المستند‬ ‫نوع‬ ‫تحدد‬ ‫التي‬ ‫مستند‬ ‫أنه‬ ‫المتصفح‬ HTML5. ‫التالية‬ ‫العناصر‬ ‫استخدام‬ ‫يتم‬ ،‫ذلك‬ ‫بعد‬:
  • 6. <!DOCTYPE html>: ‫مستند‬ ‫هو‬ ‫هذا‬ ‫أن‬ ‫إلى‬ ‫ويشير‬ ‫المستند‬ ‫نوع‬ ‫يحدد‬ HTML5. <html>: ‫للمستند‬ ‫الجذري‬ ‫العنصر‬. <head>: ‫وتعريفات‬ ‫الصفحة‬ ‫عنوان‬ ‫مثل‬ ،‫للمستخدم‬ ‫مرئية‬ ‫غير‬ ‫معلومات‬ ‫على‬ ‫يحتوي‬ ‫الميتا‬. <title>: ‫المتصفح‬ ‫في‬ ‫التبويب‬ ‫عالمة‬ ‫أو‬ ‫العنوان‬ ‫شريط‬ ‫في‬ ‫يظهر‬ ‫الذي‬ ‫الصفحة‬ ‫عنوان‬ ‫يحدد‬. <body>: ‫والصور‬ ‫النصوص‬ ‫مثل‬ ،‫للصفحة‬ ‫المرئي‬ ‫المحتوى‬ ‫على‬ ‫يحتوي‬. 2.3 ‫األساسية‬ ‫العناصر‬ ‫في‬ ‫العناصر‬ HTML ‫بداية‬ ‫من‬ ‫تتكون‬ ‫العناصر‬ .‫المحتوى‬ ‫وتنظيم‬ ‫هيكل‬ ‫إلنشاء‬ ‫ستخدم‬ُ ‫ت‬ ‫سمات‬ ‫على‬ ‫يحتوي‬ ‫وبعضها‬ ،‫نهاية‬ ‫وعالمة‬ (attributes). ‫العناوين‬:
  • 7. href: ‫الرابط‬ ‫عنوان‬ ‫يحدد‬. target: ‫الرابط‬ ‫فتح‬ ‫كيفية‬ ‫يحدد‬. _blank ‫جديدة‬ ‫نافذة‬ ‫في‬ ‫الرابط‬ ‫فتح‬ ‫يعني‬. 2.5 ‫والجداول‬ ‫القوائم‬ ‫القوائم‬:
  • 8. <table>: ‫الجدول‬ ‫تعريف‬. <tr>: ‫الصف‬ ‫تعريف‬. <th>: ‫العمود‬ ‫رأس‬ ‫تعريف‬. <td>: ‫البيانات‬ ‫خلية‬ ‫تعريف‬. 2.6 ‫النماذج‬ (Forms)
  • 9. <form>: ‫النموذج‬ ‫عناصر‬ ‫من‬ ‫مجموعة‬ ‫على‬ ‫يحتوي‬ ‫الذي‬ ‫العنصر‬. action: ‫يحدد‬ URL ‫البيانات‬ ‫إليه‬ ‫رسل‬ُ ‫ت‬‫س‬ ‫الذي‬. method: ‫اإلرسال‬ ‫طريقة‬ ‫يحدد‬ (GET ‫أو‬ POST). <input>: ‫واألزرار‬ ‫النصوص‬ ‫مثل‬ ‫الحقول‬ ‫من‬ ‫مختلفة‬ ‫أنواع‬ ‫إلنشاء‬. 2.7 ‫الوسائط‬ ‫والفيديوهات‬ ‫الصور‬ ‫مثل‬ ‫وسائط‬ ‫إلدراج‬: ‫خالصة‬ ‫تعتبر‬ HTML ‫بفهم‬ .‫المحتوى‬ ‫وتنظم‬ ‫األساسي‬ ‫الهيكل‬ ‫توفر‬ ‫حيث‬ ،‫ويب‬ ‫موقع‬ ‫كل‬ ‫أساس‬ ‫أساسيات‬ HTML ‫ويب‬ ‫صفحات‬ ‫بناء‬ ‫في‬ ‫البدء‬ ‫يمكنك‬ ،‫المختلفة‬ ‫العناصر‬ ‫استخدام‬ ‫وكيفية‬ ‫سنتناول‬ ،‫القادمة‬ ‫الفصول‬ ‫في‬ .‫ومؤثرة‬ ‫منسقة‬ CSS ‫و‬ JavaScript ‫لكيفية‬ ‫فهمك‬ ‫لتكملة‬
  • 10. ‫وجمالي‬ ‫تفاعلي‬ ‫بشكل‬ ‫الويب‬ ‫صفحات‬ ‫وتطوير‬ ‫تحسين‬. 3. CSS (Cascading Style Sheets) ChatGPT 3. CSS (Cascading Style Sheets) CSS، ‫صفحات‬ ‫محتوى‬ ‫وتجميل‬ ‫لتنسيق‬ ‫ستخدم‬ُ ‫ت‬ ‫التي‬ ‫اللغة‬ ‫هي‬ ،‫المتتالية‬ ‫األنماط‬ ‫أوراق‬ ‫أو‬ ‫تحدد‬ ‫بينما‬ .‫الويب‬ HTML ‫فإن‬ ،‫المحتوى‬ ‫هيكل‬ CSS ‫هذا‬ ‫ظهور‬ ‫كيفية‬ ‫بتحديد‬ ‫عنى‬ُ ‫ت‬ ‫خالل‬ ‫من‬ .‫المحتوى‬ CSS، ‫مما‬ ،‫والتخطيطات‬ ،‫المسافات‬ ،‫الخطوط‬ ،‫األلوان‬ ‫في‬ ‫التحكم‬ ‫يمكننا‬ ً ‫ال‬‫وتفاع‬ ‫جاذبية‬ ‫أكثر‬ ‫الصفحات‬ ‫يجعل‬. 3.1 ‫في‬ ‫مقدمة‬ CSS CSS ‫المكتوب‬ ‫المحتوى‬ ‫وتنسيق‬ ‫شكل‬ ‫لتحديد‬ ‫تستخدم‬ ‫وهي‬ ،‫المتتالية‬ ‫األنماط‬ ‫أوراق‬ ‫تعني‬ ‫بلغة‬ HTML. CSS ‫حتى‬ ‫أو‬ ،‫العناصر‬ ‫من‬ ‫مجموعات‬ ،‫فردية‬ ‫عناصر‬ ‫على‬ ‫تؤثر‬ ‫أن‬ ‫يمكن‬ ‫بأكملها‬ ‫الصفحات‬. ‫إدراج‬ ‫يمكن‬ CSS ‫مستند‬ ‫في‬ HTML ‫مختلفة‬ ‫بطرق‬:
  • 15. 3.7 ‫في‬ ‫جيدة‬ ‫ممارسات‬ CSS ‫ملفات‬ ‫استخدم‬ :‫األنماط‬ ‫تنظيم‬ CSS ‫الكود‬ ‫لتنظيم‬ ‫خارجية‬. ‫الفصول‬ ‫استخدم‬ :‫االستخدام‬ ‫إعادة‬ (classes) ‫االستخدام‬ ‫إلعادة‬ ‫قابلة‬ ‫األنماط‬ ‫لجعل‬. ‫ا‬ً ‫ن‬‫ممك‬ ‫ذلك‬ ‫يكون‬ ‫عندما‬ ‫الداخلية‬ ‫واألنماط‬ ‫المدمجة‬ ‫األنماط‬ ‫استخدام‬ ‫من‬ ‫قلل‬ :‫األداء‬ ‫تحسين‬. ‫خالصة‬ CSS ‫تعزز‬ HTML ‫المواقع‬ ‫تجعل‬ ‫بطريقة‬ ‫المحتوى‬ ‫وتصميم‬ ‫لتنسيق‬ ‫وسيلة‬ ‫توفير‬ ‫خالل‬ ‫من‬ ‫استخدام‬ ‫لكيفية‬ ‫بفهمك‬ .‫وتفاعلية‬ ‫جاذبية‬ ‫أكثر‬ CSS ‫وتطبيق‬ ‫والعناصر‬ ‫النصوص‬ ‫لتنسيق‬ ‫إلى‬ ‫سننتقل‬ ،‫القادمة‬ ‫الفصول‬ ‫في‬ .‫كبير‬ ‫بشكل‬ ‫المستخدم‬ ‫تجربة‬ ‫تحسين‬ ‫يمكنك‬ ،‫المتقدمة‬ ‫األنماط‬ JavaScript ‫الويب‬ ‫صفحات‬ ‫إلى‬ ‫والديناميكية‬ ‫التفاعل‬ ‫إلضافة‬. 4. JavaScript ChatGPT 4. JavaScript JavaScript ‫بينما‬ .‫الويب‬ ‫صفحات‬ ‫إلى‬ ‫والديناميكية‬ ‫التفاعل‬ ‫إلضافة‬ ‫ستخدم‬ُ ‫ت‬ ‫برمجة‬ ‫لغة‬ ‫هي‬ ‫توفر‬ HTML ‫و‬ ‫الهيكل‬CSS ‫فإن‬ ،‫التجميل‬ JavaScript ‫الصفحة‬ ‫سلوك‬ ‫برمجة‬ ‫لك‬ ‫يتيح‬ ‫الرسوم‬ ‫إنشاء‬ ‫إلى‬ ‫النماذج‬ ‫صحة‬ ‫من‬ ‫التحقق‬ ‫من‬ .‫المستخدمين‬ ‫مع‬ ً ‫ال‬‫تفاع‬ ‫أكثر‬ ‫وجعلها‬ ‫توفر‬ ،‫المتحركة‬ JavaScript ‫غنية‬ ‫مستخدم‬ ‫تجربة‬ ‫لتطوير‬ ‫واسعة‬ ‫إمكانيات‬.
  • 16. 4.1 ‫في‬ ‫مقدمة‬ JavaScript JavaScript ‫العميل‬ ‫جانب‬ ‫على‬ ‫الغالب‬ ‫في‬ ‫تستخدم‬ ‫برمجة‬ ‫لغة‬ ‫هي‬ (Client-Side) ‫لكن‬ ‫الخادم‬ ‫جانب‬ ‫على‬ ‫استخدامها‬ ‫ا‬ ً ‫أيض‬ ‫يمكن‬ (Server-Side) ‫مثل‬ ‫بيئات‬ ‫باستخدام‬ Node.js. ‫تتميز‬ JavaScript ‫عناصر‬ ‫مع‬ ‫التفاعل‬ ‫على‬ ‫بقدرتها‬ HTML ‫و‬CSS ‫مما‬ ،‫ديناميكي‬ ‫بشكل‬ ‫الحديث‬ ‫الويب‬ ‫لتطوير‬ ‫ضرورية‬ ‫يجعلها‬. ‫إدراج‬ ‫يمكن‬ JavaScript ‫في‬ HTML ‫مختلفة‬ ‫بطرق‬:
  • 18. 4.4 ‫مع‬ ‫العمل‬ DOM DOM (Document Object Model) ‫ستخدم‬ُ ‫ت‬ ‫التي‬ ‫التطبيقات‬ ‫برمجة‬ ‫واجهة‬ ‫هو‬ ‫عناصر‬ ‫مع‬ ‫للتفاعل‬ HTML ‫و‬CSS.
  • 19. 4.5 ‫األحداث‬ (Events) ‫مكنك‬ُ ‫ت‬ JavaScript ‫والتمرير‬ ‫النقر‬ ‫مثل‬ ‫المستخدم‬ ‫لتفاعالت‬ ‫االستجابة‬ ‫من‬.
  • 21. 4.8 ‫في‬ ‫جيدة‬ ‫ممارسات‬ JavaScript ‫الكود‬ ‫لتنظيم‬ ‫وكائنات‬ ‫دوال‬ ‫استخدم‬ :‫الكود‬ ‫تنظيم‬. ‫استخدم‬ :‫األخطاء‬ ‫مع‬ ‫التعامل‬ try...catch ‫المحتملة‬ ‫األخطاء‬ ‫مع‬ ‫للتعامل‬. ‫التكرار‬ ‫لتقليل‬ ‫االستخدام‬ ‫إلعادة‬ ‫اًل‬‫ب‬‫قا‬ ‫الكود‬ ‫اجعل‬ :‫التكرار‬ ‫تجنب‬. ‫مع‬ ‫التعامل‬ ‫عند‬ ‫ا‬ً ‫حذر‬ ‫كن‬ :‫األداء‬ ‫تحسين‬ DOM ‫األداء‬ ‫على‬ ‫تؤثر‬ ‫التي‬ ‫الثقيلة‬ ‫العمليات‬ ‫لتجنب‬. ‫خالصة‬ JavaScript ‫أكثر‬ ‫المستخدم‬ ‫تجربة‬ ‫يجعل‬ ‫مما‬ ،‫والتفاعل‬ ‫الديناميكية‬ ‫الويب‬ ‫صفحات‬ ‫تمنح‬ ‫أساسيات‬ ‫فهم‬ ‫خالل‬ ‫من‬ .‫وغنى‬ ً ‫ال‬‫تفاع‬ JavaScript ‫مع‬ ‫والتعامل‬ DOM ‫يمكنك‬ ،‫واألحداث‬ ،‫التالية‬ ‫الفصول‬ ‫في‬ .‫قوة‬ ‫أكثر‬ ‫بك‬ ‫الخاصة‬ ‫الويب‬ ‫صفحات‬ ‫وجعل‬ ‫مخصصة‬ ‫تفاعالت‬ ‫إضافة‬ ‫دمج‬ ‫كيفية‬ ‫سنستعرض‬ HTML ‫و‬ CSS ‫و‬ JavaScript ‫الويب‬ ‫تطوير‬ ‫أهداف‬ ‫لتحقيق‬ ‫ا‬ً ‫ع‬‫م‬ ‫المتقدمة‬. 5. ‫عملية‬ ‫مشاريع‬ ‫من‬ ‫تعلمناه‬ ‫ما‬ ‫لتطبيق‬ ‫عملية‬ ‫مشاريع‬ ‫ثالثة‬ ‫بتنفيذ‬ ‫سنقوم‬ ،‫الفقرة‬ ‫هذه‬ ‫في‬ HTML ‫و‬ CSS ‫و‬
  • 22. JavaScript. ‫إلنشاء‬ ‫ا‬ً ‫ع‬‫م‬ ‫التقنيات‬ ‫هذه‬ ‫استخدام‬ ‫لكيفية‬ ‫فهمك‬ ‫تعزيز‬ ‫إلى‬ ‫تهدف‬ ‫المشاريع‬ ‫هذه‬ ‫ومفيدة‬ ‫تفاعلية‬ ‫ويب‬ ‫صفحات‬. 5.1 ‫مشروع‬ 1 ‫بسيطة‬ ‫ويب‬ ‫صفحة‬ : ‫وصورة‬ ،‫وصف‬ ،‫عنوان‬ ‫على‬ ‫تحتوي‬ ‫بسيطة‬ ‫شخصية‬ ‫ويب‬ ‫صفحة‬ ‫بناء‬ :‫الهدف‬. ‫الخطوات‬ ‫ملف‬ ‫إنشاء‬ HTML
  • 26. 5.3 ‫مشروع‬ 3 ‫تفاعلية‬ ‫قائمة‬ : ‫عليها‬ ‫النقر‬ ‫عند‬ ‫عناصر‬ ‫وتخفي‬ ‫ظهر‬ُ ‫ت‬ ‫تفاعلية‬ ‫قائمة‬ ‫إنشاء‬ :‫الهدف‬. ‫الخطوات‬
  • 29. ‫في‬ ‫تعلمته‬ ‫ما‬ ‫لتطبيق‬ ‫وسيلة‬ ‫أفضل‬ ‫هو‬ ‫عملية‬ ‫مشاريع‬ ‫تطبيق‬ HTML ‫و‬ CSS ‫و‬ JavaScript. ‫ويب‬ ‫صفحات‬ ‫إنشاء‬ ‫لتجربة‬ ‫فرصة‬ ‫لك‬ ‫تتيح‬ ‫هنا‬ ‫المذكورة‬ ‫الثالثة‬ ‫المشاريع‬ .‫قيمة‬ ‫عملية‬ ‫تجربة‬ ‫ويعطيك‬ ‫مهاراتك‬ ‫يعزز‬ ‫مما‬ ،‫ديناميكية‬ ‫وقوائم‬ ،‫تفاعلية‬ ‫نماذج‬ ،‫بسيطة‬ ‫وتطلعاتك‬ ‫الحتياجاتك‬ ‫ا‬ً ‫ق‬‫وف‬ ‫الميزات‬ ‫من‬ ‫المزيد‬ ‫وإضافة‬ ‫المشاريع‬ ‫هذه‬ ‫توسيع‬ ‫يمكنك‬. ### 6. ‫إضافية‬ ‫وموارد‬ ‫مراجع‬ ‫في‬ ‫مهاراتك‬ ‫لتحسين‬ HTML ‫و‬ CSS ‫و‬ JavaScript، ‫وصول‬ ‫لديك‬ ‫يكون‬ ‫أن‬ ‫المهم‬ ‫من‬ ‫وتعزيز‬ ‫التعلم‬ ‫في‬ ‫تساعدك‬ ‫أن‬ ‫يمكن‬ ‫التي‬ ‫بالموارد‬ ‫قائمة‬ ‫هنا‬ .‫موثوقة‬ ‫وموارد‬ ‫مراجع‬ ‫إلى‬ ‫معرفتك‬: #### 6.1 HTML 1. **[‫مستندات‬ MDN - HTML](https://developer.mozilla.org/ar/docs/Web/HTML)**: - ‫تعتبر‬ MDN (Mozilla Developer Network) ‫لتعلم‬ ‫المصادر‬ ‫أفضل‬ ‫من‬ HTML، ‫عملية‬ ‫وأمثلة‬ ً ‫ال‬‫شام‬ ‫ا‬ً ‫ق‬‫توثي‬ ‫وتوفر‬. 2. **[W3Schools - HTML Tutorial](https://www.w3schools.com/html/)**: - ‫موقع‬ W3Schools ‫لتعلم‬ ‫الفهم‬ ‫سهلة‬ ‫وأمثلة‬ ‫تفاعلية‬ ‫ا‬ ً ‫دروس‬ ‫يقدم‬ HTML. 3. **[HTML.com](https://html.com/)**: - ‫موقع‬ ‫يقدم‬ HTML.com ‫أساسيات‬ ‫حول‬ ‫ا‬ً ‫ومباشر‬ ‫ا‬ ً ‫بسيط‬ ‫اًل‬‫ي‬‫دل‬ HTML.
  • 30. #### 6.2 CSS 1. **[‫مستندات‬ MDN - CSS](https://developer.mozilla.org/ar/docs/Web/CSS)**: - ‫خصائص‬ ‫جميع‬ ‫حول‬ ‫شامل‬ ‫توثيق‬ CSS ‫مفصلة‬ ‫وتفسيرات‬. 2. **[CSS-Tricks](https://css-tricks.com/)**: - ‫تقنيات‬ ‫حول‬ ‫عملية‬ ‫وأمثلة‬ ،‫دروس‬ ،‫مقاالت‬ ‫على‬ ‫يحتوي‬ ‫موقع‬ CSS. 3. **[W3Schools - CSS Tutorial](https://www.w3schools.com/css/)**: - ‫لتعلم‬ ‫تفاعلي‬ ‫تعليمي‬ ‫مصدر‬ CSS ‫المتقدمة‬ ‫التقنيات‬ ‫إلى‬ ‫األساسيات‬ ‫من‬. #### 6.3 JavaScript 1. **[‫مستندات‬ MDN - JavaScript](https://developer.mozilla.org/ar/docs/Web/JavaScript) **: - ‫للغة‬ ‫وشامل‬ ‫غني‬ ‫توثيق‬ JavaScript، ‫والطرق‬ ‫للوظائف‬ ‫وشرح‬ ‫أمثلة‬ ‫على‬ ‫يحتوي‬ ‫المختلفة‬. 2. **[Eloquent JavaScript](https://eloquentjavascript.net/)**: - ‫يتناول‬ ‫اإلنترنت‬ ‫عبر‬ ‫مجاني‬ ‫كتاب‬ JavaScript ‫تطبيقية‬ ‫تمارين‬ ‫مع‬ ‫بعمق‬.
  • 31. 3. **[W3Schools - JavaScript Tutorial](https://www.w3schools.com/js/)**: - ‫حول‬ ‫تفاعلية‬ ‫دروس‬ JavaScript، ‫العملية‬ ‫والتمارين‬ ‫السريع‬ ‫للتعلم‬ ‫مفيدة‬. 4. **[JavaScript.info](https://javascript.info/)**: - ‫في‬ ‫شاملة‬ ‫دورات‬ ‫على‬ ‫يحتوي‬ ‫موقع‬ JavaScript ‫وتدريبات‬ ‫مفصل‬ ‫شرح‬ ‫مع‬. #### 6.4 ‫عامة‬ ‫موارد‬ 1. **[FreeCodeCamp](https://www.freecodecamp.org/)**: - ‫في‬ ‫وشهادات‬ ‫ا‬ ً ‫دروس‬ ‫تقدم‬ ‫تعليمية‬ ‫منصة‬ HTML، CSS، ‫و‬JavaScript ‫باإلضافة‬ ‫عملية‬ ‫مشاريع‬ ‫إلى‬. 2. **[Codecademy](https://www.codecademy.com/)**: - ‫في‬ ‫تفاعلية‬ ‫ا‬ ً ‫دروس‬ ‫تقدم‬ HTML، CSS، ‫و‬JavaScript ‫عملية‬ ‫تطبيقات‬ ‫مع‬. 3. **[Coursera](https://www.coursera.org/)**: - ‫في‬ ‫مرموقة‬ ‫جامعات‬ ‫من‬ ‫تعليمية‬ ‫دورات‬ ‫تقدم‬ ‫منصة‬ HTML، CSS، ‫و‬JavaScript. 4. **[edX](https://www.edx.org/)**: - ‫تطوير‬ ‫في‬ ‫مرموقة‬ ‫تعليمية‬ ‫ومؤسسات‬ ‫جامعات‬ ‫من‬ ‫متقدمة‬ ‫دورات‬ ‫تقدم‬ ‫تعليمية‬ ‫منصة‬
  • 32. ‫الويب‬. 5. **[Udemy](https://www.udemy.com/)**: - ‫في‬ ‫الدورات‬ ‫من‬ ‫واسعة‬ ‫مجموعة‬ ‫على‬ ‫تحتوي‬ ‫منصة‬ HTML، CSS، ‫و‬JavaScript، ‫والمتقدمين‬ ‫للمبتدئين‬ ‫خيارات‬ ‫مع‬. 6. **[Stack Overflow](https://stackoverflow.com/)**: - ‫حول‬ ‫المجتمع‬ ‫من‬ ‫إجابات‬ ‫على‬ ‫والحصول‬ ‫األسئلة‬ ‫طرح‬ ‫يمكنك‬ ‫حيث‬ ‫للمبرمجين‬ ‫منتدى‬ ‫الويب‬ ‫تطوير‬ ‫مشكالت‬. 7. **[GitHub](https://github.com/)**: - ‫المصدر‬ ‫مفتوحة‬ ‫مشاريع‬ ‫استكشاف‬ ‫يمكنك‬ ‫حيث‬ ‫المصدرية‬ ‫الشيفرة‬ ‫لمشاركة‬ ‫منصة‬ ‫حقيقية‬ ‫أمثلة‬ ‫من‬ ‫وتعلم‬ ‫أكواد‬ ‫وتحميل‬. #### 6.5 ‫مفيدة‬ ‫كتب‬ 1. **"HTML and CSS: Design and Build Websites"** by Jon Duckett - ‫حول‬ ‫واضحة‬ ‫بصرية‬ ‫مقدمة‬ ‫على‬ ‫يحتوي‬ ‫للمبتدئين‬ ‫رائع‬ ‫كتاب‬ HTML ‫و‬CSS. 2. **"JavaScript and JQuery: Interactive Front-End Web Development"** by Jon Duckett - ‫على‬ ‫يركز‬ ‫شامل‬ ‫كتاب‬ JavaScript ‫و‬jQuery ‫توضيحية‬ ‫أمثلة‬ ‫مع‬.
  • 33. 3. **"You Don’t Know JS"** Series by Kyle Simpson - ‫في‬ ‫متعمقة‬ ‫كتب‬ ‫سلسلة‬ JavaScript ً ‫ال‬‫تفصي‬ ‫أكثر‬ ‫معرفة‬ ‫يريدون‬ ‫الذين‬ ‫للمطورين‬ ‫اللغة‬ ‫حول‬. ### ‫خالصة‬ ‫في‬ ‫مهاراتك‬ ‫وتطوير‬ ‫لتعلم‬ ‫هامة‬ ‫أدوات‬ ‫أعاله‬ ‫المذكورة‬ ‫والمراجع‬ ‫الموارد‬ ‫تعد‬ HTML ‫و‬CSS ‫و‬JavaScript. ‫من‬ ‫سيعزز‬ ‫خاللها‬ ‫من‬ ‫تعلمته‬ ‫ما‬ ‫وممارسة‬ ‫الموارد‬ ‫هذه‬ ‫استكشاف‬ ‫وكفاءة‬ ‫ا‬ً ‫تطور‬ ‫أكثر‬ ‫ويب‬ ‫تطبيقات‬ ‫بناء‬ ‫على‬ ‫قدرتك‬.