كورس برمجة HTML

في الحلقة الأولى من كورس برمجة Html على منصة تعلم يصطحبنا المبرمج أحمد نعيم في رحلة للتعرف على لغة البرمجة html أو لغة الوصف وتعد اللغة الأساسية في برمجة وتصميم صفحات الويب وهي الهيكل الأساسي لبناء صفحة الويب.
وhtml اختصار لكلمة hyper text markup language، ويجيب أحمد نعيم عن سؤال هام وهو ما الفائدة من تعلم HTML؟ وذلك لأن كلاً من مساري تطوير الويب front ,backend يعتمدان على لغة html.
ويجيب أحمد نعيم عن سؤال آخر وهو ماذا تحتاج لتعلم لغة HTML؟
ويجيب أنه في بداية تعلم لغة html تحتاج إلى:
1) تنزيل برنامج text editor محرر الأكواد الذي سوف تقوم بكتابة الأكواد عليه و صياغتها وتنسيقها.
2) تحتاج أيضاً إلى متصفح إنترنت ويمكنك أن تختار من بين google chrome أو firefox أو أي متصفح إنترنت آخر.
3) يجب أن يكون لديك معلومات سابقة عن اختصارات الويندوز و أساسيات الإنترنت.
يستكمل المبرمج أحمد نعيم الحديث عن أنواع برامج text editor التي يمكنك تحرير النصوص عليها والتي من أهمها برنامج visual studio code ويعد أكثر البرامج استخداماً في تحرير النصوص البرمجية.
ينتقل أحمد نعيم إلى طريقة تنزيل وتثبيت برنامج visual studio code على جهاز الكمبيوتر.

في الحلقة الثانية من كورس برمجة Html على منصة تعلم يستكمل المبرمج أحمد نعيم حديثه عن كيفية إنشاء أول صفحة ويب وكيفية التعامل مع برنامج visual studio code.
خطوات إنشاء أول صفحة ويب :
1) إنشاء ملف جديد أو مجلد جديد.
2) انتقل إلى visual studio code والضغط على open folder
3) نقوم بإنشاء ملف جديد داخل visual studio code
ويكون امتداد الملف الذي قمنا بإنشائه html
يشرح المبرمج أحمد نعيم الأكواد البرمجية التي تسمى tags في لغة html ، ثم ينتقل إلى مكونات صفحة الويب :
- جزء Body والذي يحتوي على جميع عناصر الصفحة.
- جزء head والذي يحتوي على عنوان الصفحة.
ثم ينتقل إلى طريقة تنفيذ الكود البرمجي الخاص بكتابة الـ head والـ body والـ meta والذي يستخدم لتحديد خصائص الصفحة مثل الترميز والكلمات المفتاحية وغيرها.

في الحلقة الثالثة من كورس برمجة Html على منصة تعلم يستكمل المبرمج أحمد نعيم حديثه عن الفرق بين رأس الصفحة ومحتواها وهما HEAD والـ BODY.
تحتوي العناصر الخاصة بالـ heading على وسم الـ meta والذي يحتوي على معلومات عن الصفحة ولا تظهر هذة المعلومات في الصفحة ويوجد الكثير من الأنواع للـ Meta منها Meta الخاصة بفيس بوك وينتقل إلى طريقة كتابة الكود البرمجي الخاص بها.
ثم ينتقل إلى عنصر أو وسم style والمسئول عن تنسيقات الصفحة والعناصر وإعطائها ألوان مختلفة، ويشرح الوسوم التي توجد في الـ heading واستخدام كل وسم من هذة الوسوم وطريقة كتابته وينتقل إلى طريقة كتابة التعليق أو الـ comment والذي يظهر فقط لأي شخص يقوم بعرض الكود المصدري للصفحة.

في الحلقة الرابعة من كورس برمجة Html على منصة تعلم يستكمل المبرمج أحمد نعيم حديثه عن طريقة كتابة أكواد العناوين الـ heading التي توجد في صفحة الويب ثم ينتقل إلى بنية الكود البرمجي وطريقة عرض المتصفح لكل كود برمجي وكيف يستجيب المتصفح للأكواد التي يتم كتابتها.
ويستكمل أحمد نعيم حديثه عن جزء مهم في العناوين أو الـ heading وهو جزء ال syntax والتي تعرف أنها بنية الكود والترتيب الذي تبدأ به العناصر وهي تشبه قواعد النحو في اللغة العربية لذا فهي قواعد تحكم الأكواد البرمجية.

في الحلقة الخامسة من كورس برمجة Html على منصة تعلم يستكمل المبرمج أحمد نعيم حديثه عن عنصر هام في صفحة الويب وهو عنصر الـ paragraph ويشمل الفقرة النصية في الصفحة.
ثم يشرح طريقة كتابة الوسم الخاص بكتابة النصوص وهو وسم

وذلك بمثال عملي.
ويعد عنصر paragraph من العناصر block element وهي عناصر تأخذ الحيز كامل في الصفحة ولا يتم كتابة عناصر أخرى أسفل ذلك العنصر ويعد من أهم العناصر التي يتم استخدامها بشكل كبير في تصميم صفحة الويب والتي ستستمر معنا في الحلقات القادمة من الكورس.

في الحلقة السادسة من كورس برمجة Html على منصة تعلم يستكمل المبرمج أحمد نعيم حديثه عن الـ attributes أو الخصائص والتي تستخدم لتنسيق شكل أو لون العناصر أو حجمها وتنقسم لنوعين :
- النوع الأول global attributes والتي يتم وضعها لأكثر من عنصر.
- النوع الثاني element attributes والتي تكون لعنصر واحد فقط.
يشرح المبرمج أحمد نعيم طريقة كتابة الكود البرمجي لـattribute كل عنصر على حدى، يوضع الـ global attributes لكل العناصر وأيضا تستخدم السمة "class" لتحديد مجموعة من العناصر تشترك في نفس الصفات ولكن السمة "id" تستخدم لعنصر محدد فقط.
ومن السمات التي تكون لعنصر واحد فقط هي سمة "audio" وسمة "video" وأيضاً سمة "img".

في الحلقة السابعة من كورس برمجة Html على منصة تعلم يصطحبنا المبرمج أحمد نعيم لنتعرف على تنسيق النصوص أو الفقرة النصية التي توجد في صفحة الويب من حيث شكل وحجم الخط.
وينفذ ذلك بشكل عملي على برنامج visual studio code من خلال الوسم والوسم و اللذان يعرضان النص الذي يوجد بداخلهما بخط عريض.
وننتقل للوسم الذي يعرض الخط الذي يوجد بداخله بخط مائل ويمكن أيضا استخدام الوسم لعرض الخط مائل أيضاً في صفحة الويب.
ثم ننتقل إلى وسم الذي يستخدم لتظليل خلفية النصوص باللون الأصفر بهدف لفت نظر المستخدم إليه.

في الحلقة الثامنة من كورس برمجة html على منصة تعلم يستكمل المبرمج أحمد نعيم حديثه عن تنسيقات الفقرة النصية في صفحة الويب.
يُستخدم الوسم في وضع خط أسفل النص الذي يوضع بداخله وينفذ المدرب أحمد نعيم ذلك بشكل عملي على برنامج visual studio code.
وننتقل إلى العنصر أو الوسم الذي يستخدم لتصغير النصوص وهو وسم والذي يُظهر النصوص بحجم أقل درجة واحدة.
ثم ننتقل إلى وسم وكلمة del اختصاراً لـ delete ويستخدم الوسم في تحديد نص معين كمحذوف من خلال وضع خط على النص.
ننتقل إلى الوسم وهو اختصار لـ Insert ويستخدم لعرض خط أسفل النص الجديد الذي تم إضافته لصفحة الويب وذلك للفت نظر المستخدم إلى النص الجديد الذي تم إضافته للفقرة.

في الحلقة التاسعة من كورس برمجة html على منصة تعلم يصطحبنا المبرمج أحمد نعيم للحديث عن الروابط links وطريقة إضافتها لصفحة الويب.
وتُستخدم الروابط للانتقال إلى صفحة أخرى من خلال النقر عليها، ويمكن أن تشير الروابط إلى مستند آخر يتم تحميله من خلال المتصفح.
وينفذ المدرب أحمد نعيم ذلك بشكل عملي من خلال الوسم .
وننتقل للسمة target والتي تستخدم لفتح الرابط في علامة تبويب جديدة عند النقر عليه، والسمة title والتي تعرض معلومات عندما نحرك الفأرة فوق العنصر .
يشرح المبرمج أحمد نعيم في نهاية الحلقة طرق أخرى لاستخدام الوسم ومنها إرسال بريد إلكتروني عند الضغط على الرابط.

في الحلقة العاشرة من كورس برمجة html على منصة تعلم يصطحبنا المبرمج أحمد نعيم للحديث عن القوائمlists في صفحة الويب وأنواعها والوسوم الخاصة بكتابتها.
أنواع القوائم في لغة html :
Ordered list
Unordered list
Description list
أولا : القائمة المرتبة Ordered list ويتم كتابتها بالوسم

1. وتستخدم لإنشاء قائمة مرقمة ويكون بجوار كل عنصر رقم بداية من الرقم 1 أو حرف.
   ثانياً : القائمة الغير مرتبة Unordered list ويتم كتابتها بالوسم

• حيث يكون بجوار كل عنصر رمز أو علامة.
  وننتقل إلى النوع الثالث من القوائم وهو description list وهي قائمة المصطلحات مع وصف كل مصطلح ويتم كتابتها بالوسم

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

في الحلقة الثانية عشر من كورس برمجة html يصطحبنا المحاضر والمدرب أحمد نعيم لنتعرف من خلال الحلقة على الوسم الخاص بالصور وهو والذي يستخدم لعرض صورة في صفحة الويب.
وننتقل لشرح الكود البرمجي للوسم الخاص بالصور وطريقة التعامل مع مسار الصور من خلال الكود.
ثم ننتقل إلى السمات التي توجد في وسم الصور والتي من أهمها "alt text" وتُعرف بأنها النص البديل للصورة والتي تظهر في صفحة الويب عند حدوث مشكلة في تحميل الصورة أو سرعة الإنترنت.

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

في الحلقة الرابعة عشر من كورس برمجة html يصطحبنا المبرمج أحمد نعيم لنتعرف من خلال الحلقة على عنصر هام في لغة html وهو عنصر

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

في الحلقة السادسة عشر من كورس برمجة html يصطحبنا المبرمج أحمد نعيم لنتعرف من خلال الحلقة على التعامل مع الملفات الصوتية وكيفية إضافتها على موقع الويب والعناصر أو الوسوم التي تستخدم في عرض الملفات الصوتية.
يُستخدم العنصر في عرض المحتوى الصوتي بامتداداته المختلفة سواء mp3 أو mp4، وننتقل إلى طريقة كتابته والتعرف على السمات الخاصة به.
من السمات الخاصة بالعنصر
- السمة "controls" والتي تستخدم لإظهار عناصر التحكم الخاصة بالملف الصوتي.
-السمة "autoplay" والتي تستخدم لتشغيل الملف الصوتي بشكل تلقائي.
- السمة "loop" والتي تستخدم لتشغيل الملف الصوتي من جديد عند انتهاء تشغيله.
-السمة "muted" والتي تستخدم لإسكات الصوت بشكل تلقائي عند تحميل الصفحة.

في الحلقة السابعة عشر من كورس برمجة html يصطحبنا المبرمج أحمد نعيم ليجيب على سؤال كيف أضيف فيديو في html وكيف نتعامل مع المسار الخاص بالفيديو وسنتعرف خلال الحلقة أيضاً على الخصائص التي يمكن وضعها للفيديوهات.
يُستخدم العنصر لعرض فيديو في صفحة الويب، وننتقل إلى طريقة كتابته والتعرف على السمات الخاصة به.
من سمات العنصر
- السمة "controls" تستخدم في إظهار عناصر التحكم الخاصة بالفيديو.
- السمة "width" التي تستخدم في تحديد عرض الفيديو.
- السمة "height" التي تستخدم في تحديد ارتفاع الفيديو.
- السمة "poster" التي تستخدم في إضافة صورة تظهر أثناء تحميل الفيديو.
- السمة "muted" تستخدم لإسكات صوت الفيديو بشكل تلقائية عند تحميل الفيديو.

في الحلقة الثامنة عشر من كورس برمجة html يصطحبنا المبرمج أحمد نعيم لنتعرف على حقل الإدخال "form" والذي يستخدم لجمع بيانات المستخدم وإدخال البيانات في نموذج form ، أو عند إنشاء صفحة تسجيل دخول بإدخال بيانات مثل اسم المستخدم وكلمة المرور.
يُستخدم العنصر أو الوسم لتجميع البيانات التي يقوم بإدخالها المستخدم واستقبالها من الخادم وحفظها داخل قواعد البيانات.
ثم ننتقل إلى طريقة كتابة عنصر في لغة html.
يوجد وسم الإدخال داخل الوسم وهو المسئول عن تجميع البيانات.
والخاصية "type" الخاصة بالوسم هي التي تحدد نوع الحقل من خلال قيمة هذة الخاصية، في حالة إن كانت البيانات التي يتم إدخالها نص مكتوب تكون القيمة "text" أما إن كانت البيانات التي يتم إدخالها هي كلمة المرور تكون القيمة"password".
يُستخدم الوسم في إنشاء تسمية لعنصر الإدخال على الصفحة.

في الحلقة التاسعة عشر من كورس برمجة html يستكمل المبرمج أحمد نعيم حديثه عن خصائص نموذج "form"، وسنتعرف خلال الحلقة على باقي العناصر المستخدمة مع نموذج "form" مع شرح خصائص كل منها.
من خصائص العنصر
- الخاصية "required" والتي يستخدم لتنبيه المستخدم بضرورة ملء الحقل قبل إرسال النموذج.
- الخاصية "placeholder" والتي تستخدم في إظهار وصف للحقل ويوجد داخل "input" لمساعدة المستخدم في فهم البيانات المطلوب إدخالها داخل هذا الحقل.
- الخاصية "value" والتي تحتوي على القيمة التي يقوم المتصفح بعرضها للمستخدم والذي يمكن للمستخدم التعديل أو تجاهل هذة القيمة.
ثم ننتقل إلى خاصية من خواص العنصر وهي الخاصية "action" والتي تستخدم في تحديد صفحة الويب على الخادم التي يتم إرسال البيانات إليها.

في الحلقة العشرون من كورس برمجة html يصطحبنا المبرمج أحمد نعيم لنتعرف على عناصر وخصائص متقدمة في نموذج "form" واستخدامات كل منها.
من الخصائص المتقدمة للعنصر "input"
- خاصية "readonly" والتي تظهر للمستخدم أن حقل الإدخال للقراءة فقط ولا يمكن تعديله.
- خاصية "disabled" والتي تجعل حقل الإدخال معطل أو غير فعال.
- خاصية "autofox" والتي تستخدم لتحديد حقل معين مباشرة عند تحميل الصفحة وتستخدم في حقل واحد فقط ولا يمكن استخدامها في أكثر من حقل.
- خاصية "minlength" والتي تستخدم لتحديد الحد الأدني من الحروف التي يقوم بإدخالها المستخدم.
- خاصية "maxlength" والتي تستخدم لتحديد أقصى عدد من الحروف داخل الحقل.
ثم ننتقل إلى العنصر والذي يستخدم في كتابة نص مقتبس من مصدر آخر.
وبذلك نكون انتهينا من كورس برمجة html وانتظرونا في كورس css مع المبرمج أحمد نعيم على منصة تعلم.