9.9 KiB

Raw Blame History Unescape Escape

مهمة ممارسة HTML: إنشاء نموذج مدونة

أهداف التعلم

قم بتطبيق معرفتك بـ HTML من خلال تصميم وترميز هيكل كامل لصفحة رئيسية لمدونة. ستعزز هذه المهمة العملية مفاهيم HTML الدلالية، وأفضل ممارسات الوصول، ومهارات تنظيم الكود الاحترافية التي ستستخدمها طوال رحلتك في تطوير الويب.

عند إكمال هذه المهمة، ستتمكن من:

ممارسة تخطيط تصميم المواقع قبل البدء في الترميز
استخدام عناصر HTML الدلالية بشكل مناسب
إنشاء ترميز منظم وسهل الوصول
تطوير عادات ترميز احترافية باستخدام التعليقات والتنظيم

متطلبات المشروع

الجزء الأول: تخطيط التصميم (نموذج مرئي)

قم بإنشاء نموذج مرئي للصفحة الرئيسية لمدونتك يتضمن:

رأس الصفحة يحتوي على عنوان الموقع والتنقل
منطقة المحتوى الرئيسية مع معاينات لـ 2-3 منشورات مدونة على الأقل
شريط جانبي يحتوي على معلومات إضافية (قسم "حول"، المنشورات الأخيرة، الفئات)
تذييل يحتوي على معلومات الاتصال أو الروابط

خيارات إنشاء النموذج:

رسم يدوي: استخدم الورق والقلم، ثم قم بتصوير أو مسح تصميمك
أدوات رقمية: Figma، Adobe XD، Canva، PowerPoint، أو أي تطبيق رسم
أدوات تخطيط: Balsamiq، MockFlow، أو برامج تخطيط مشابهة

قم بتسمية أقسام النموذج باستخدام عناصر HTML التي تخطط لاستخدامها (مثل "الرأس - <header>"، "منشورات المدونة - <article>").

الجزء الثاني: تخطيط عناصر HTML

قم بإنشاء قائمة تربط كل قسم من النموذج بعناصر HTML محددة:

Example:
- Site Header → <header>
- Main Navigation → <nav> with <ul> and <li>
- Blog Post → <article> with <h2>, <p>, <time>
- Sidebar → <aside> with <section> elements
- Page Footer → <footer>

العناصر المطلوبة: يجب أن يحتوي HTML الخاص بك على 10 عناصر دلالية مختلفة على الأقل من هذه القائمة:

<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>
<h1>, <h2>, <h3>, <p>, <ul>, <li>, <a>
<img>, <time>, <blockquote>, <strong>, <em>

الجزء الثالث: تنفيذ HTML

قم بترميز الصفحة الرئيسية لمدونتك وفقًا لهذه المعايير:

هيكل الوثيقة: قم بتضمين العناصر المناسبة مثل DOCTYPE، html، head، وbody
الترميز الدلالي: استخدم عناصر HTML لغرضها المقصود
الوصول: قم بتضمين نصوص بديلة مناسبة للصور ونصوص روابط ذات معنى
جودة الكود: استخدم مسافات متناسقة وتعليقات ذات معنى
المحتوى: قم بتضمين محتوى مدونة واقعي (يمكنك استخدام نصوص مؤقتة)

هيكل HTML النموذجي:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Personal Blog</title>
</head>
<body>
    <!-- Main site header -->
    <header>
        <h1>My Blog Title</h1>
        <nav>
            <!-- Navigation menu -->
        </nav>
    </header>
    
    <!-- Main content area -->
    <main>
        <!-- Blog posts go here -->
    </main>
    
    <!-- Sidebar content -->
    <aside>
        <!-- Additional information -->
    </aside>
    
    <!-- Site footer -->
    <footer>
        <!-- Footer content -->
    </footer>
</body>
</html>

الجزء الرابع: التأمل

اكتب تأملًا موجزًا (3-5 جمل) يتناول:

ما هي عناصر HTML التي كنت واثقًا من استخدامها؟
ما التحديات التي واجهتها أثناء التخطيط أو الترميز؟
كيف ساعد HTML الدلالي في تنظيم المحتوى؟
ما الذي ستفعله بشكل مختلف في مشروع HTML القادم؟

قائمة التحقق للتقديم

قبل التقديم، تأكد من أنك:

نموذج مرئي مع عناصر HTML المسمّاة
ملف HTML مكتمل مع هيكل وثيقة صحيح
استخدام 10 عناصر HTML دلالية مختلفة على الأقل بشكل مناسب
تعليقات ذات معنى تشرح هيكل الكود الخاص بك
صياغة HTML صحيحة (اختبرها في المتصفح)
تأمل مكتوب يتناول أسئلة التأمل

جدول تقييم الأداء

المعايير	متميز (4)	جيد (3)	متوسط (2)	مبتدئ (1)
التخطيط والتصميم	نموذج مفصل ومسمى بشكل جيد يظهر فهمًا واضحًا للتخطيط وهيكل HTML الدلالي	نموذج واضح مع تسمية معظم الأقسام بشكل مناسب	نموذج أساسي مع بعض التسمية، يظهر فهمًا عامًا	نموذج غير واضح أو محدود، يفتقر إلى تحديد الأقسام بشكل صحيح
استخدام HTML الدلالي	استخدام 10+ عناصر دلالية بشكل مناسب، يظهر فهمًا عميقًا لهيكل HTML والوصول	استخدام 8-9 عناصر دلالية بشكل صحيح، يظهر فهمًا جيدًا للترميز الدلالي	استخدام 6-7 عناصر دلالية، بعض الالتباس حول الاستخدام المناسب	استخدام أقل من 6 عناصر أو سوء استخدام العناصر الدلالية
جودة الكود والتنظيم	كود منظم بشكل استثنائي، مسافات صحيحة، تعليقات شاملة وصياغة HTML مثالية	كود منظم بشكل جيد مع مسافات جيدة، تعليقات مفيدة وصياغة صحيحة	كود منظم بشكل عام مع بعض التعليقات، مشاكل صياغة بسيطة	تنظيم ضعيف، تعليقات قليلة، أخطاء صياغة متعددة
الوصول وأفضل الممارسات	اعتبارات وصول ممتازة، نصوص بديلة ذات معنى، هيكل عناوين صحيح، يتبع جميع أفضل ممارسات HTML الحديثة	ميزات وصول جيدة، استخدام مناسب للعناوين والنصوص البديلة، يتبع معظم أفضل الممارسات	بعض اعتبارات الوصول، نصوص بديلة وهيكل عناوين أساسي	ميزات وصول محدودة، هيكل عناوين ضعيف، لا يتبع أفضل الممارسات
التأمل والتعلم	تأمل عميق يظهر فهمًا عميقًا لمفاهيم HTML وتحليلًا مدروسًا لعملية التعلم	تأمل جيد يظهر فهمًا للمفاهيم الرئيسية وبعض الوعي الذاتي بالتعلم	تأمل أساسي مع فهم محدود لمفاهيم HTML أو عملية التعلم	تأمل محدود أو مفقود، يظهر فهمًا ضئيلًا للمفاهيم المكتسبة

موارد التعلم

مراجع أساسية:

MDN HTML Elements Reference - دليل كامل لجميع عناصر HTML
HTML5 Semantic Elements - فهم الترميز الدلالي
Web Accessibility Guidelines - إنشاء محتوى ويب يمكن الوصول إليه
HTML Validator - تحقق من صياغة HTML الخاصة بك

نصائح احترافية للنجاح:

ابدأ بالنموذج الخاص بك قبل كتابة أي كود
استخدم أدوات المطور في المتصفح لفحص هيكل HTML الخاص بك
اختبر صفحتك بأحجام شاشات مختلفة (حتى بدون CSS)
اقرأ HTML الخاص بك بصوت عالٍ للتحقق مما إذا كان الهيكل منطقيًا
فكر في كيفية تفسير قارئ الشاشة لهيكل صفحتك

💡 تذكر: تركز هذه المهمة على هيكل HTML والدلالات. لا تقلق بشأن التصميم البصري – هذا ما يختص به CSS! قد تبدو صفحتك بسيطة، لكنها يجب أن تكون منظمة وذات معنى.

إخلاء المسؤولية:
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي Co-op Translator. بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.

9.9 KiB Raw Blame History Unescape Escape