مشروع التيراريوم الجزء الأول: مقدمة إلى HTML

HTML، أو لغة ترميز النص التشعبي، هي الأساس لكل موقع ويب قمت بزيارته. فكر في HTML كهيكل عظمي يمنح الصفحات الإلكترونية بنيتها – فهو يحدد مكان المحتوى، وكيف يتم تنظيمه، وما الذي يمثله كل جزء. بينما ستقوم CSS لاحقًا "بتزيين" HTML بالألوان والتصميمات، وستجعل JavaScript الصفحات تفاعلية، فإن HTML يوفر الهيكل الأساسي الذي يجعل كل شيء ممكنًا. في هذا الدرس، ستقوم بإنشاء هيكل HTML لواجهة تيراريوم افتراضية. هذا المشروع العملي سيعلمك مفاهيم HTML الأساسية أثناء بناء شيء جذاب بصريًا. ستتعلم كيفية تنظيم المحتوى باستخدام العناصر الدلالية، والعمل مع الصور، وإنشاء الأساس لتطبيق ويب تفاعلي. بنهاية هذا الدرس، سيكون لديك صفحة HTML تعمل وتعرض صور النباتات في أعمدة منظمة، جاهزة للتصميم في الدرس التالي. لا تقلق إذا بدا الأمر بسيطًا في البداية – هذا بالضبط ما يجب أن يكون عليه HTML قبل أن تضيف CSS اللمسات الجمالية. ## اختبار ما قبل المحاضرة اختبار ما قبل المحاضرة ## إعداد مشروعك قبل أن نبدأ في كتابة كود HTML، دعنا نُعد مساحة عمل مناسبة لمشروع التيراريوم الخاص بك. إنشاء هيكل ملفات منظم منذ البداية هو عادة مهمة ستفيدك طوال رحلتك في تطوير الويب. ### المهمة: إنشاء هيكل مشروعك ستقوم بإنشاء مجلد مخصص لمشروع التيراريوم الخاص بك وإضافة أول ملف HTML. إليك طريقتان يمكنك استخدامهما: الخيار الأول: باستخدام Visual Studio Code 1. افتح Visual Studio Code 2. انقر على "File" → "Open Folder" أو استخدم Ctrl+K, Ctrl+O (Windows/Linux) أو Cmd+K, Cmd+O (Mac) 3. قم بإنشاء مجلد جديد باسم terrarium واختره 4. في لوحة Explorer، انقر على أيقونة "New File" 5. قم بتسمية ملفك index.html الخيار الثاني: باستخدام أوامر الطرفية ما الذي تقوم به هذه الأوامر: - إنشاء مجلد جديد باسم terrarium لمشروعك - التنقل داخل مجلد التيراريوم - إنشاء ملف فارغ باسم index.html - فتح الملف في Visual Studio Code للتعديل ## فهم هيكل مستند HTML يتبع كل مستند HTML هيكلًا محددًا تحتاجه المتصفحات لفهمه وعرضه بشكل صحيح. فكر في هذا الهيكل كرسالة رسمية – تحتوي على عناصر مطلوبة بترتيب معين تساعد المتصفح (المستلم في هذه الحالة) على معالجة المحتوى بشكل صحيح. لنبدأ بإضافة الأساس الضروري الذي يحتاجه كل مستند HTML. ### إعلان DOCTYPE والعنصر الجذر أول سطرين في أي ملف HTML يعملان كـ "مقدمة" للمستند للمتصفح: فهم ما يفعله هذا الكود: - يعلن نوع المستند كـ HTML5 باستخدام - ينشئ العنصر الجذر الذي سيحتوي على كل محتوى الصفحة - يحدد معايير الويب الحديثة لعرض المتصفح بشكل صحيح - يضمن عرضًا متسقًا عبر المتصفحات والأجهزة المختلفة ### 🔄 توقف تربوي توقف وتأمل: قبل المتابعة، تأكد من أنك تفهم: - ✅ لماذا يحتاج كل مستند HTML إلى إعلان DOCTYPE - ✅ ما الذي يحتويه العنصر الجذر - ✅ كيف يساعد هذا الهيكل المتصفحات على عرض الصفحات بشكل صحيح اختبار ذاتي سريع: هل يمكنك شرح ما يعنيه "عرض متوافق مع المعايير" بكلماتك الخاصة؟ ## إضافة بيانات وصفية أساسية للمستند قسم في مستند HTML يحتوي على معلومات مهمة تحتاجها المتصفحات ومحركات البحث، ولكن لا يراها الزوار مباشرة على الصفحة. فكر فيه كـ "معلومات خلف الكواليس" التي تساعد صفحتك على العمل بشكل صحيح والظهور بشكل صحيح عبر الأجهزة والمنصات المختلفة. تخبر هذه البيانات الوصفية المتصفحات كيفية عرض صفحتك، وما هي ترميز الأحرف التي يجب استخدامها، وكيفية التعامل مع أحجام الشاشات المختلفة – كل ذلك ضروري لإنشاء صفحات ويب احترافية وسهلة الوصول. ### المهمة: إضافة رأس المستند أضف قسم هذا بين علامات الفتح والإغلاق : تفصيل ما يحققه كل عنصر: - يحدد عنوان الصفحة الذي يظهر في علامات تبويب المتصفح ونتائج البحث - يحدد ترميز الأحرف UTF-8 لعرض النص بشكل صحيح عالميًا - يضمن التوافق مع الإصدارات الحديثة من Internet Explorer - يُعد التصميم المتجاوب من خلال ضبط نافذة العرض لتتناسب مع عرض الجهاز - يتحكم في مستوى التكبير الأولي لعرض المحتوى بالحجم الطبيعي ## بناء جسم المستند عنصر يحتوي على كل المحتوى المرئي لصفحتك – كل ما سيراه المستخدمون ويتفاعلون معه. بينما قدم قسم تعليمات للمتصفح، يحتوي قسم على المحتوى الفعلي: النصوص، الصور، الأزرار، والعناصر الأخرى التي تشكل واجهة المستخدم الخاصة بك. دعنا نضيف هيكل الجسم ونفهم كيف تعمل علامات HTML معًا لإنشاء محتوى ذو معنى. ### فهم هيكل علامات HTML تستخدم HTML علامات مزدوجة لتعريف العناصر. تحتوي معظم العلامات على علامة فتح مثل وعلامة إغلاق مثل ، مع محتوى بينهما: مرحبًا، العالم!. هذا ينشئ عنصر فقرة يحتوي على النص "مرحبًا، العالم!". ### المهمة: إضافة عنصر الجسم قم بتحديث ملف HTML الخاص بك ليشمل عنصر : ما الذي يوفره هذا الهيكل الكامل: - يُنشئ إطار عمل مستند HTML5 الأساسي - يتضمن بيانات وصفية أساسية لعرض المتصفح بشكل صحيح - يُنشئ جسمًا فارغًا جاهزًا لمحتواك المرئي - يتبع أفضل الممارسات الحديثة لتطوير الويب الآن أنت جاهز لإضافة العناصر المرئية للتيراريوم الخاص بك. سنستخدم عناصر كحاويات لتنظيم أقسام المحتوى المختلفة، وعناصر لعرض صور النباتات. ### العمل مع الصور وحاويات التخطيط الصور لها خصوصية في HTML لأنها تستخدم علامات "مغلقة ذاتيًا". على عكس العناصر مثل التي تحيط بالمحتوى، تحتوي علامة على كل المعلومات التي تحتاجها داخل العلامة نفسها باستخدام سمات مثل src لمسار ملف الصورة وalt لإمكانية الوصول. قبل إضافة الصور إلى HTML الخاص بك، ستحتاج إلى تنظيم ملفات مشروعك بشكل صحيح عن طريق إنشاء مجلد للصور وإضافة الرسومات النباتية. أولاً، قم بإعداد الصور: 1. قم بإنشاء مجلد باسم images داخل مجلد مشروع التيراريوم الخاص بك 2. قم بتنزيل صور النباتات من مجلد الحل (14 صورة نباتية إجمالاً) 3. انسخ جميع صور النباتات إلى مجلد images الجديد الخاص بك ### المهمة: إنشاء تخطيط عرض النباتات الآن أضف صور النباتات منظمة في عمودين بين علامات : خطوة بخطوة، ما الذي يحدث في هذا الكود: - يُنشئ حاوية الصفحة الرئيسية بـ id="page" لاحتواء كل المحتوى - يُنشئ حاويتين للعمودين: left-container وright-container - ينظم 7 نباتات في العمود الأيسر و7 نباتات في العمود الأيمن - يُغلف كل صورة نباتية في div باسم plant-holder لتحديد موضعها الفردي - يُطبق أسماء فئات متسقة لتصميم CSS في الدرس التالي - يُعين معرفات فريدة لكل صورة نباتية لتفاعل JavaScript لاحقًا - يتضمن مسارات ملفات صحيحة تشير إلى مجلد الصور ### 🔄 توقف تربوي فهم الهيكل: خذ لحظة لمراجعة هيكل HTML الخاص بك: - ✅ هل يمكنك تحديد الحاويات الرئيسية في تخطيطك؟ - ✅ هل تفهم لماذا تحتوي كل صورة على معرف فريد؟ - ✅ كيف تصف الغرض من divs plant-holder؟ فحص بصري: افتح ملف HTML الخاص بك في المتصفح. يجب أن ترى: - قائمة أساسية لصور النباتات - صور منظمة في عمودين - تخطيط بسيط وغير مصمم تذكر: هذا المظهر البسيط هو بالضبط ما يجب أن يبدو عليه HTML قبل تصميم CSS! مع إضافة هذا الترميز، ستظهر النباتات على الشاشة، على الرغم من أنها لن تبدو مصقولة بعد – هذا ما ستفعله CSS في الدرس التالي! في الوقت الحالي، لديك أساس HTML قوي ينظم المحتوى بشكل صحيح ويتبع أفضل ممارسات إمكانية الوصول. ## استخدام HTML الدلالي لإمكانية الوصول HTML الدلالي يعني اختيار عناصر HTML بناءً على معناها وغرضها، وليس فقط مظهرها. عندما تستخدم الترميز الدلالي، فإنك توصل هيكل ومعنى المحتوى الخاص بك إلى المتصفحات ومحركات البحث والتقنيات المساعدة مثل قارئات الشاشة. هذا النهج يجعل مواقع الويب الخاصة بك أكثر سهولة للمستخدمين ذوي الإعاقات ويساعد محركات البحث على فهم المحتوى الخاص بك بشكل أفضل. إنه مبدأ أساسي لتطوير الويب الحديث الذي يخلق تجارب أفضل للجميع. ### إضافة عنوان صفحة دلالي دعنا نضيف عنوانًا مناسبًا لصفحة التيراريوم الخاصة بك. قم بإدراج هذا السطر مباشرة بعد علامة الفتح : لماذا يهم الترميز الدلالي: - يساعد قارئات الشاشة على التنقل وفهم هيكل الصفحة - يحسن تحسين محركات البحث (SEO) من خلال توضيح تسلسل المحتوى - يعزز إمكانية الوصول للمستخدمين ذوي الإعاقات البصرية أو الاختلافات الإدراكية - يخلق تجارب مستخدم أفضل عبر جميع الأجهزة والمنصات - يتبع معايير الويب وأفضل الممارسات للتطوير الاحترافي أمثلة على الخيارات الدلالية مقابل غير الدلالية: ## إنشاء حاوية التيراريوم الآن دعنا نضيف هيكل HTML للتيراريوم نفسه – الحاوية الزجاجية حيث سيتم وضع النباتات في النهاية. هذا القسم يوضح مفهومًا مهمًا: يوفر HTML الهيكل، ولكن بدون تصميم CSS، لن تكون هذه العناصر مرئية بعد. يستخدم ترميز التيراريوم أسماء فئات وصفية ستجعل تصميم CSS بديهيًا وسهل الصيانة في الدرس التالي. ### المهمة: إضافة هيكل التيراريوم قم بإدراج هذا الترميز فوق علامة الأخيرة (قبل علامة الإغلاق لحاوية الصفحة): فهم هيكل التيراريوم هذا: - يُنشئ حاوية تيراريوم رئيسية بمعرف فريد للتصميم - تعريف عناصر منفصلة لكل مكون بصري (الأعلى، الجدران، التراب، الأسفل) - يتضمن عناصر متداخلة لتأثيرات انعكاس الزجاج (العناصر اللامعة) - يستخدم أسماء فئات وصفية تشير بوضوح إلى وظيفة كل عنصر - يُجهز الهيكل لتنسيق CSS الذي سيُظهر مظهر التيراريوم الزجاجي ### 🔄 مراجعة تعليمية إتقان هيكل HTML: قبل المضي قدمًا، تأكد من أنك تستطيع: - ✅ شرح الفرق بين هيكل HTML والمظهر البصري - ✅ التمييز بين عناصر HTML الدلالية وغير الدلالية - ✅ وصف كيف يمكن أن يفيد الترميز الصحيح إمكانية الوصول - ✅ التعرف على هيكل شجرة المستند بالكامل اختبار فهمك: حاول فتح ملف HTML الخاص بك في متصفح مع تعطيل JavaScript وإزالة CSS. هذا يظهر لك الهيكل الدلالي النقي الذي أنشأته! --- ## تحدي وكيل GitHub Copilot استخدم وضع الوكيل لإكمال التحدي التالي: الوصف: قم بإنشاء هيكل HTML دلالي لقسم دليل العناية بالنباتات يمكن إضافته إلى مشروع التيراريوم. المهمة: قم بإنشاء قسم HTML دلالي يتضمن عنوانًا رئيسيًا "دليل العناية بالنباتات"، وثلاثة أقسام فرعية مع عناوين "الري"، "متطلبات الضوء"، و"العناية بالتربة"، يحتوي كل منها على فقرة من معلومات العناية بالنباتات. استخدم علامات HTML الدلالية المناسبة مثل ، ، ، و لتنظيم المحتوى بشكل مناسب. تعرف على المزيد حول وضع الوكيل هنا. ## تحدي استكشاف تاريخ HTML التعرف على تطور الويب لقد تطور HTML بشكل كبير منذ أن أنشأ تيم بيرنرز لي أول متصفح ويب في CERN عام 1990. بعض العلامات القديمة مثل أصبحت الآن مهملة لأنها لا تعمل بشكل جيد مع معايير الوصول الحديثة ومبادئ التصميم المتجاوب. جرب هذا التمرين: 1. قم مؤقتًا بتغليف عنوان الخاص بك داخل علامة : تيراريومي 2. افتح صفحتك في متصفح ولاحظ تأثير التمرير 3. فكر في سبب إهمال هذه العلامة (تلميح: فكر في تجربة المستخدم وإمكانية الوصول) 4. قم بإزالة علامة وارجع إلى الترميز الدلالي أسئلة للتفكير: - كيف يمكن أن يؤثر عنوان متحرك على المستخدمين ذوي الإعاقات البصرية أو حساسية الحركة؟ - ما هي تقنيات CSS الحديثة التي يمكن أن تحقق تأثيرات بصرية مشابهة بشكل أكثر سهولة؟ - لماذا من المهم استخدام معايير الويب الحالية بدلاً من العناصر المهملة؟ استكشف المزيد حول عناصر HTML المهملة والقديمة لفهم كيف تتطور معايير الويب لتحسين تجربة المستخدم. ## اختبار ما بعد المحاضرة اختبار ما بعد المحاضرة ## المراجعة والدراسة الذاتية تعميق معرفتك بـ HTML HTML كان أساس الويب لأكثر من 30 عامًا، تطور من لغة ترميز بسيطة للمستندات إلى منصة متطورة لبناء التطبيقات التفاعلية. فهم هذا التطور يساعدك على تقدير معايير الويب الحديثة واتخاذ قرارات تطوير أفضل. مسارات التعلم الموصى بها: 1. تاريخ وتطور HTML - ابحث في الجدول الزمني من HTML 1.0 إلى HTML5 - استكشف سبب إهمال بعض العلامات (إمكانية الوصول، ملاءمة الأجهزة المحمولة، سهولة الصيانة) - تحقق من ميزات HTML الناشئة والمقترحات 2. الغوص العميق في HTML الدلالي - ادرس القائمة الكاملة لعناصر HTML5 الدلالية - تدرب على تحديد متى تستخدم ، ، ، و - تعلم عن سمات ARIA لتحسين إمكانية الوصول 3. تطوير الويب الحديث - استكشف بناء مواقع ويب متجاوبة على Microsoft Learn - فهم كيفية دمج HTML مع CSS وJavaScript - تعلم عن أفضل ممارسات أداء الويب وتحسين محركات البحث أسئلة للتفكير: - ما هي علامات HTML المهملة التي اكتشفتها، ولماذا تم إزالتها؟ - ما هي ميزات HTML الجديدة التي يتم اقتراحها للإصدارات المستقبلية؟ - كيف يساهم HTML الدلالي في إمكانية الوصول وتحسين محركات البحث؟ ### ⚡ ما يمكنك القيام به في الدقائق الخمس القادمة - [ ] افتح أدوات المطور (F12) وتحقق من هيكل HTML لموقعك المفضل - [ ] أنشئ ملف HTML بسيطًا يحتوي على علامات أساسية: ، ، و - [ ] تحقق من صحة HTML الخاص بك باستخدام أداة التحقق من HTML عبر الإنترنت من W3C - [ ] حاول إضافة تعليق إلى HTML الخاص بك باستخدام ### 🎯 ما يمكنك إنجازه خلال الساعة - [ ] أكمل اختبار ما بعد الدرس وراجع مفاهيم HTML الدلالية - [ ] قم ببناء صفحة ويب بسيطة عن نفسك باستخدام هيكل HTML صحيح - [ ] جرب مستويات العناوين المختلفة وعلامات تنسيق النص - [ ] أضف صور وروابط لممارسة دمج الوسائط المتعددة - [ ] ابحث عن ميزات HTML5 التي لم تجربها بعد ### 📅 رحلتك الأسبوعية مع HTML - [ ] أكمل مهمة مشروع التيراريوم باستخدام الترميز الدلالي - [ ] أنشئ صفحة ويب قابلة للوصول باستخدام تسميات وأدوار ARIA - [ ] تدرب على إنشاء النماذج باستخدام أنواع الإدخال المختلفة - [ ] استكشف واجهات برمجة تطبيقات HTML5 مثل localStorage أو geolocation - [ ] ادرس أنماط HTML المتجاوبة وتصميم الأولوية للجوال - [ ] راجع أكواد HTML الخاصة بالمطورين الآخرين للحصول على أفضل الممارسات ### 🌟 رحلتك الشهرية لإتقان أساسيات الويب - [ ] قم ببناء موقع ويب للملف الشخصي يعرض إتقانك لـ HTML - [ ] تعلم قوالب HTML باستخدام إطار عمل مثل Handlebars - [ ] ساهم في مشاريع مفتوحة المصدر من خلال تحسين وثائق HTML - [ ] أتقن مفاهيم HTML المتقدمة مثل العناصر المخصصة - [ ] دمج HTML مع أطر CSS ومكتبات JavaScript - [ ] قم بتوجيه الآخرين الذين يتعلمون أساسيات HTML ## 🎯 جدول زمني لإتقان HTML ### 🛠️ ملخص أدوات HTML الخاصة بك بعد إكمال هذا الدرس، لديك الآن: - هيكل المستند: أساس HTML5 كامل مع DOCTYPE صحيح - الترميز الدلالي: علامات ذات معنى تعزز إمكانية الوصول وتحسين محركات البحث - دمج الصور: ممارسات تنظيم الملفات والنص البديل بشكل صحيح - حاويات التخطيط: استخدام استراتيجي للعناصر div مع أسماء فئات وصفية - وعي إمكانية الوصول: فهم التنقل باستخدام قارئات الشاشة - المعايير الحديثة: ممارسات HTML5 الحالية ومعرفة العلامات المهملة - أساس المشروع: قاعدة صلبة لتنسيق CSS وتفاعل JavaScript الخطوات التالية: هيكل HTML الخاص بك جاهز لتنسيق CSS! الأساس الدلالي الذي بنيته سيجعل الدرس التالي أسهل بكثير للفهم. ## المهمة تمرن على HTML: قم ببناء نموذج مدونة --- إخلاء المسؤولية: تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي Co-op Translator. بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسير خاطئ ينشأ عن استخدام هذه الترجمة.