شفرات قنوات ART على النايلسات

تعلم البرمجة يعتبر الطلب الأساسي في الوقت الحالي، حيث بدأت أهميتها تتزايد، سواءً على صعيد الرواتب المرتفعة أو لأنها واحدة من المجالات المطلوبة بشدة في المستقبل. ومع ذلك، يواجه العديد من الأشخاص ترددًا في الانتقال نحو تعلمها بسبب الصورة النمطية السائدة التي تصف هذا المجال بأنه صعب ومعقد، ويتطلب مستوى عالٍ من الذكاء والمهارة التقنية.

ولحسن الحظ، هذا التصوّر يعتبر خاطئا تماماً؛ فتعلم البرمجة مثل أي مجال آخر. في بدايتها قد تشعر بالضياع في عالم الرموز والتعليمات، لكن بمرور الوقت، ستجد أن كل شيء يصبح واضحًا كالنهار. وبالإضافة إلى ذلك، فإن بداية تعلم البرمجة ليست بالأمر الصعب على الإطلاق، ولا سيما عندما يتعلق الأمر بتعلم لغة HTML.

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

تُعتبر HTML واحدة من أقدم اللغات المستخدمة في عالم البرمجة اليوم، وقد صُممت من قبل الفيزيائي تيم بيرنرز بهدف تسهيل ربط النصوص وتشعبها، مما يُمكن المستخدم من التنقل بسهولة بين النصوص عبر الصفحة. تطورت هذه اللغة مع مرور الوقت، بمساعدة مؤسسات مثل اتحاد الشبكة العالمية (W3C)، لتتناسب مع متطلبات تصميم المواقع الحالية.

تتألف لغة HTML من مجموعة من العناصر والوسوم (Tags)، التي تشكل الأساس لتصميم المحتوى على الصفحات، مثل الفقرات والعناوين والصور. تُوضح هذه الوسوم التعليمات والنصوص بين علامات البداية والنهاية، حيث تفتح برمز > وتغلق برمز <، وعند الانتهاء يتم إغلاق الوسم بإضافة / قبل الاسم كما في <\......>.

لماذا يجب تعلم لغة  HTML؟

• تُعتبر تعلم HTML أساسيًا في أي مرحلة من مراحل تعلم البرمجة، حيث تشكل قاعدة الأساس لبناء هيكل الصفحة.
• يُستخدم HTML في أكثر من 95% من مواقع الويب.
• يُفتح تعلم HTML الباب أمام خيارات وظيفية مهنية واسعة.
• يمكن تعلم HTML بسهولة ومجانًا من خلال العديد من الدورات المتاحة عبر الإنترنت.
• لا يتطلب تعلم HTML الكثير من الوقت أو الجهد، وبمجرد فهم الأساسيات يصبح الأمر سهلاً.
• تُدعم لغة HTML من قِبل جميع المتصفحات، مما يضمن عرض الصفحات بشكل صحيح على أي متصفح.
• يُسهل فهم HTML تعلم لغات برمجة أخرى، لأنها تشترك في بعض النقاط في هيكل التصميم.
• يُمكنك فهم HTML حتى إذا لم تكن مبرمجًا، مما يُمكنك من التواصل بشكل أفضل مع المبرمجين وشرح مشكلاتك بسهولة.
• يُسهل فهم HTML عملية التسويق عبر الإنترنت (SEO) ويساعد في تحسين أداء المواقع.
• يُجعل HTML محتوى الموقع سهل الاستخدام ومنظماً للمستخدمين.
• يمكنك من إنشاء صفحات الويب بسهولة، ومن ثم تطويرها بمزيد من اللغات البرمجية.
• يُمكنك كسب المال عن طريق مساعدة المبرمجين أو العمل في تطوير الصفحات.
• يُمكنك من التعامل مع مشاكل بسيطة في الصفحات دون الحاجة لاستدعاء فريق البرمجة.

الوسوم والسمات:

الوسوم (Tags): هي عناصر HTML الأساسية التي تحدد بداية ونهاية عنصر معين في الصفحة. على سبيل المثال: <p> تعني بداية فقرة، و </p> تعني نهاية الفقرة. يجب أن تكون كل وسم مقفلاً بعلامة نهاية.

السمات (Attributes): هي البيانات التي تضاف إلى وسم HTML لتعديل سلوك أو مظهر العنصر. على سبيل المثال: في وسم <img> الذي يُستخدم لعرض الصور، يمكن إضافة سمة "src" لتحديد موقع ملف الصورة، وسمة "alt" لتوفير نص بديل يُعرض عندما لا يتم تحميل الصورة.

على سبيل المثال، إليك كيفية استخدام وسم الصورة <img> مع بعض السمات:

<"img src="example.jpg" alt="صورة مثالية" width="500" height="300>

في هذا المثال، تم استخدام السمة "src" لتحديد مسار ملف الصورة، والسمة "alt" لتوفير نص بديل للصورة، والسمات "width" و "height" لتحديد عرض وارتفاع الصورة على التوالي.

وهناك العديد من الوسوم والسمات الأخرى في HTML التي تُستخدم لتنسيق وتنظيم المحتوى على الصفحات. من بين هذه الوسوم: <a> لإنشاء روابط، <ul> و <ol> لإنشاء قوائم، <table> لإنشاء جداول، والعديد من الوسوم الأخرى التي تُستخدم لأغراض مختلفة. وباستخدام السمات المناسبة، يمكن تخصيص سلوك هذه الوسوم لتلبية احتياجات التصميم والتفاعل في صفحة الويب.

وهناك العديد من الوسوم والسمات الأخرى في HTML التي تُستخدم لتنسيق وتنظيم المحتوى على الصفحات. من بين هذه الوسوم:

1. <a>: تستخدم لإنشاء روابط. يتم تحديد عنوان الويب المطلوب في السمة "href".
2. <ul>: تُستخدم لإنشاء قوائم غير مرتبة (قائمة نقطية).
3. <ol>: تُستخدم لإنشاء قوائم مرتبة (قائمة مرقمة).
4. <li>: تُستخدم داخل وسوم <ul> و <ol> لتحديد كل عنصر في القائمة.
5. <table>: تُستخدم لإنشاء جداول. تتضمن وسومًا فرعية مثل <tr> للصفوف و <td> للخلايا داخل الصفوف.
6. <img>: تُستخدم لعرض الصور. يُحدد موقع الصورة في السمة "src"، ويمكن إضافة سمات إضافية مثل "alt" لنص بديل و "width" و "height" لتحديد أبعاد الصورة.
7. <div>: تُستخدم لتقسيم المستند إلى أقسام قابلة للتحكم، ويمكن تخصيصها بواسطة CSS.
8. <span>: تُستخدم لتحديد جزء صغير من النص لتطبيق التنسيق عليه بواسطة CSS.
9. <form>: تُستخدم لإنشاء نماذج، مع تحديد الإجراءات المطلوبة في السمة "action".
10. <input>: تُستخدم داخل وسم <form> لإنشاء حقول إدخال مختلفة مثل النص والكلمة السرية والزر.

سمات:

1. href: تُستخدم في وسم <a> لتحديد عنوان الويب المطلوب للرابط.
2. src: تُستخدم في وسم <img> لتحديد مسار ملف الصورة.
3. alt: تُستخدم في وسم <img> لتوفير نص بديل يُعرض عندما لا يتم تحميل الصورة.
4. width و height: يُستخدمان في وسم <img> لتحديد عرض وارتفاع الصورة على التوالي.
5. action: تُستخدم في وسم <form> لتحديد الإجراء المطلوب عند تقديم النموذج.
6. type: تُستخدم في وسم <input> لتحديد نوع حقل الإدخال مثل النص أو الكلمة السرية أو الزر.
7. value: تُستخدم في وسم <input> لتحديد قيمة افتراضية لحقل الإدخال.
8. name: تُستخدم في وسم <input> لتحديد اسم الحقل.
9. colspan و rowspan: تُستخدمان في وسم <td> لتحديد عدد الأعمدة أو الصفوف التي يمتد عليها خلية الجدول.
10. class و id: تُستخدمان لتحديد التنسيق والتعريفات لتطبيق CSS أو JavaScript.

المهم ، سوف اترككم مع الشرح و الذي ذكرنا فيه باقي الوسوم الخاصة بال HTML 

 

المواقع و الأدوات المستعملة في الشرح :

تحميل برنامج Visual Studio : من هنا

موقع مفيد للمبرمجين ( تجد فيه كل ما تحتاجه حول تطوير مواقع الويب ) : من هنا