اذهب إلى المحتوى

السؤال

Recommended Posts

  • 0
نشر

بعد الانتهاء من تعلم HTML، يمكنك اتباعها لتطوير مهاراتك والتأكد من إتقانك للمسار. HTML هو الأساس في تطوير الويب، لكنه جزء من منظومة أكبر. إليك الخطوات التالية وكيفية التأكد من إتقانك:

تعلم CSS
   - CSS (Cascading Style Sheets) هي الخطوة الطبيعية التالية لأنها تتيح لك تصميم صفحات الـ HTML وجعلها جذابة بصريًا.

  • تنسيق العناصر (الألوان، الخطوط، الحدود).
  •  التصميم المتجاوب (Responsive Design) باستخدام Flexbox وGrid.
  • إنشاء تأثيرات بصرية مثل التحويم (hover) والانتقالات (transitions).
  • مصادر: W3Schools، FreeCodeCamp، أو دورات مثل تلك الموجودة على Coursera أو Udemy.

تعلم JavaScript
   - بعد إتقان التصميم باستخدام CSS، انتقل إلى JavaScript لإضافة التفاعلية لصفحاتك (مثل النماذج التفاعلية، الرسوم المتحركة، أو التواصل مع السيرفر).

  • أساسيات البرمجة (المتغيرات، الدوال، الحلقات).
  • التعامل مع DOM (Document Object Model) لتعديل صفحات HTML ديناميكيًا.
  • تعلم مكتبات مثل React أو Vue لاحقًا إذا أردت.

فهم أدوات تطوير الويب

  •  تعلم استخدام Git وGitHub لإدارة الإصدارات والتعاون.
  • استخدم أدوات مثل VS Code وتعرف على ملحقاته.
  • جرب أدوات فحص المتصفح (DevTools) لتصحيح الأخطاء.

بناء مشاريع عملية

  • صفحة شخصية (Portfolio).
  • موقع للتجارة الإلكترونية بسيط.
  • مدونة تفاعلية.
  • هذه المشاريع ستساعدك على تطبيق ما تعلمته وإثبات مهاراتك.
  • 0
نشر

يمكنك بعد الإنتهاء من هذا القسم الخاص ب HTML إختبار نفسك والبحق عن تمارين لحلها للتأكد من فهمك لكل شئ والتطبيق الجيد عليها .

يمكنك البحث في محرك البحث جوجل ع كويزات أو اختبارات على HTML وإليك بعض الكلمات المفتاحية التي يمكنك استخدامها للبحث عن اختبارات وتطبيقات في مجال HTML :

  • "اختبارات HTML"
  • "تدريب عملي HTML"
  • "تمارين تطبيقية لتعلم HTML باللغة العربية"

ولكن الإفضل الإنتهاء من CSS أيضا لتستطيع العثور على تطبيقات كاملة لكلا من HTML و CSS .

ويمكنك قراءة التالي: 

 

  • 0
نشر

عندما تستطيع النظر لأي موقع ويب وتتخيل بدقة كيف ستبني هيكله بـ HTML ومن ناحية التطبيق العملي جرب بناء بعض المشاريع بدون الرجوع للدورة مثلاً

  • صفحة شخصية كاملة بها header, navigation, main content, sidebar, footer
  • نموذج تسجيل بأنواع مختلفة من المدخلات

والأفضل هو ألا تتعجل. HTML قد تبدو بسيطاً، لكن إتقانه يشكل أساساً قوياً لكل ما ستتعلمه لاحقاً. كلما كان أساسك أقوى، كلما سهل عليك تعلم CSS و JavaScript.

  • 0
نشر

لغة HTML بسيطة فهي لغة وصفية، وعليك استيعاب المفاهيم التالية في البداية ثم استكمال باقي الدورة ولو واجهت أمر ما في مشروع تستطيع البحث عنه وتعلمه عند الحاجة، ويجب التطبيق علي ما يلي بشكل عملي وتجنب الاستيعاب بشكل نظري، وقم بالتغيير في الكود لتفهم آلية عمله:

1- يجب أن تفهم أن كل صفحة HTML لها هيكل ثابت:

  • <!DOCTYPE html>: يُخبر المتصفح أن تلك وثيقة HTML5.
  • <html>: العنصر الجذر الذي يلتف حول كل محتوى الصفحة.
  • <head>: يحتوي على معلومات حول الصفحة (غير مرئية للمستخدم)، مثل العنوان والترميز.
  • <body>: يحتوي على كل المحتوى المرئي في الصفحة (نصوص، صور، روابط، إلخ).

2- HTML تتكون من عناصر، ويتم تعريف كل عنصر باستخدام وسم للبداية ووسم للنهاية، وهناك بعض الوسوم التي لا تحتاج إلى وسم نهاية تُسمى Self-closing tags مثل <br> أو <img>.

3- السمات Attributes والتي بمثابة معلومات إضافية للعناصر، وتُكتب دائمًا في وسم البداية،  href في وسم الرابط <a>، أو src في وسم الصورة <img>.

4- العناوين من عنصر <h1> للعناوين الهامة إلى <h6> الأقل أهمية، والفقرات <p> لوضع النص في فقرات منفصلة.

5- الروابط لربط الصفحات ببعضها أو بمواقع خارجية، أي العنصر <a> مع السمة href لتحديد وجهة الرابط.

6- الصور من خلال العنصر <img> مع سمتين أساسيتين وهما src لتحديد مسار (مكان) الصورة، وalt لوصف الصورة وهو مهم جدًا لإمكانية الوصول ولحالات عدم ظهور الصورة:

<img src="images/my-photo.png" alt="صورة شخصية لي">

7- القوائم <ul> وol

8- عناصر التجميع <div> و <span> حيث <div>: عنصر كتلة Block يُستخدم كحاوية لتجميع عدة عناصر معًا مثل قسم كامل في الصفحة، بينما <span> عنصر "سطري Inline لتجميع جزء صغير من النص داخل عنصر آخر لتطبيق تنسيق معين عليه لاحقًا باستخدام CSS.

9- HTML الدلالي Semantic HTML وهي استخدام وسوم لها معنى واضح بدلاً من استخدام <div> لكل شيء، لتحسين بنية الصفحة ومساعدة محركات البحث.

  • <header>: للجزء العلوي من الصفحة (الشعار، القائمة).
  • <nav>: لتجميع روابط التنقل الرئيسية.
  • <main>: للمحتوى الرئيسي والفريد في الصفحة.
  • <footer>: للجزء السفلي من الصفحة (حقوق النشر، روابط التواصل).
  • <section>: لتقسيم الصفحة إلى أقسام منطقية.

10- Forms لجمع بيانات من المستخدم مثل نموذج تسجيل الدخول أو نموذج الاتصال:

  • <form>: الحاوية الرئيسية للنموذج.
  • <input>: العنصر الأساسي لإدخال البيانات (له أنواع مختلفة مثل text, password, email, submit).
  • <label>: لربط نص وصفي بحقل الإدخال (مهم لإمكانية الوصول).
  • <textarea>: لإدخال نصوص طويلة.
  • <button>: لإنشاء زر.

11- الجداول:

  • <table>: الحاوية الرئيسية للجدول.
  • <tr>: لإنشاء صف
  • <th>: لإنشاء خلية رأس الجدول 
  • <td>: لإنشاء خلية بيانات عادية 

 

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...