تعلم كورس html 5 في 9 محاضرات للمبتدئين مجانا
html ( إتش تي إم إل ) و هي اختصارة HyperText Markup Language هي لغة ترميز تستخدم في إنشاء وتصميم صفحات ومواقع الويب websitesحيث تستخدم في هيكل صفحة الويب فهي تعطي متصفح الإنترنت وصفا لكيفية عرض محتوي الصفحة والتي تتألف عادةً من وسوم تاجات tags .
مميزات إصدار html 5
من أهم مميزات اصدار html5 عن الاصدارات السابقة :
دعم SVG و Canvas و الرسومات حيث سابقا كان ممكناً فقط استخدامه مع تقنيات مختلفة مثلا الفلاش flash .
دعم كامل لـ JavaScript (لغة برمجة تساعد علي المزيد من التفاعل مع صفحات الويب)
دعم انواع جديدة من عناصر تحكم النموذج form مثل : التواريخ و الأوقات و البريد الإلكتروني و غيرها .
استخدام عناصر أكثر منطقية و دلالة في بناء صفحات الويب مثل القسم section والمقالة article والقائمة nav والرأس header
مميزات كورس html 5 :
كورس و دورة html هي الخطوة الاساسية للدخول الي عالم تصميم المواقع و هذا الكورس يعد أحد أفضل كورسات تعلم اساسيات بناء هيكلة صفحات الويب بإستخدام html وفيما يلي أهم المميزات
تعلم html من الصفر حتى الاحتراف
تحميل كورس html 5 سهل حيث متاح علي منصة اليوتويب
يمتاز الكورس بأنه باللغة العربية
طريق الشرح سهلة و بسيطة و خطوة بخطة (دورة تدريبة كاملة)
تعلم html هو الخطوة الاساسية للدخول الي مجال تصميم المواقع ، و فيما يلي عرض محتوي الكورس :
تعلم تصميم المواقع web design - محتوي الكورس
تعلم تصميم المواقع web design هو عبارة كورس شامل عن تصميم المواقع باسلوب جديد في تعلم تصميم مواقع الويب بحيث يجمع بين العديد من ادوات التصميم و هي : html 5 – css 3 – bootstrap 4.5 – JavaScript – JQuery 3.5 مع بعض بدون الفصل بين كل جزء بهدف انشاء جزء / مكون مفيد يمكن استخدامه في الموقع في هذا الفيديو تم استعراض محتوي الكورس و برنامج تحرير و كتابة الاكواد و طريقة تثبيته علي جهاز الكمبيوتر visual studio code
طريقة انشاء مشروع تصميم موقع ويب - هيكل بناء صفحة الويب
ماذا سوف تتعلم في هذا الفيديو : • مفهوم Html5 – css3 – bootstrap 4.5 – JavaScript – JQuery 3.5 • تنظيم ملفات المشروع • التعامل مع برنامج محرر الاكواد visual studio code • انشاء مشروع ويب متجاوب مع جميع الاجهزة مثل الكمبيوتر و اللاب توب و التابليت و الموبايل • طريقة ربط ملف الـ css بصفحة الـ html • طريقة ربط ملف الـ js بصفحة الـ html • طريقة اضافة مكتبة الايقونات font awesome الي صفحة الـ html • طريقة اضافة مكتبة JQuery Ajax الي صفحة الـ html
وسوم النصوص text tags
تتكون صفحة الـ html من وسوم وخصائص tags & attributes : في الفيديو السابق تم شرح الوسوم الاساسية لبناء الصفحة في هذا الفيديو : استكمال شرح وسوم الـميتا meta tag شرح طريقة اضافة ايقونة / لوجو لصفحة الويب بجوار عنوان الصفحة / الموقع favicon جميع الوسوم الخاصة بالنصوص Text tags
وسوم القائمة و الروابط a tag - list tag
نستكمل الوسوم الخاصة بالـ HTML5 : و نستعرض بالتفصيل html a tag وسم الارتباط التشعبي حيث له العديد من الاستخدمات : عمل ارتباط تشعبي لموقع اخر عمل ارتباط لعنصر في نفس صفحة الـ html عرض / تنزيل ملف pdf او صوت او فيديو او صورة تم تحميله من قبل في الموقع عمل اتصال مباشر برقم هاتف من خلال الموبايل / الجوال استخدام برنامج ارسال الايميلات لارسال ايميل مباشرة الي عنوان بريد الكتروني في صفحة الـ html
وسوم الصور image tag
نستكمل الوسوم الخاصة بالـ HTML5 ونعرض وسوم الصور html img tag: img map area picture source وتم شرح طريقة عمل خريطة للصورة image map لوصف اجزاء الصورة و ذلك بمساعدة موقع : https://www.image-map.net/ و ايضا طريقة تغير الصور مع تغيير حجم الشاشة مثل شاشة اللاب توب و الكمبيوتر و الموبايل و التابليت
وسوم انشاء الجداول table tag
نستكمل عرض الوسوم الخاصة بالـ HTML5 و نشرح بالتفصيل الوسوم الخاصة بانشاء الجدول table html
وسوم حقول الادخال و الفورم form inputs
نستكمل الوسوم الخاصة بالـ HTML5 و نعرض الوسوم الخاصة بحقول الادخال و مكونات الفورم html form & html inputs : الفورم – النماذج تستخدم لاضافة بيانات الي قاعدة البيانات تتكون من العديد من العناص
audio & video & iframe & figure & figcaption
نستكمل الوسوم الخاصة بالـ HTML5 و نعرض الوسوم الخاصة بالفيديو و الصوت و تضمين المحتوي و وسم انشاء التوضيحات : html5 audio tag : لاضافة و ادراج ملف صوت الي صفحة الـ html html5 video tag : لاضافة و ادراج ملف فيديو الي صفحة الـ html html5 iframe tag : لتضمين محتوي من موقع الي صفحة الـ html html5 figure tag : لاضافة توضيحات للصور و الرسوم البيانية و غيرها
header & nav & section & aside & main & footer tags
نستكمل الوسوم الخاصة بالـ HTML5 و نعرض وسوم اقسام الموقع و التي تمثل HTML5 semantic elements : HTML5 header tag : لانشاء قسم الموقع العلوي في صفحة الـ html HTML5 nav tag : لانشاء شريط قوائم و روابط في صفحة الـ html HTML5 section tag : لانشاء قسم في صفحة الـ html HTML5 aside tag : لانشاء قسم جانبي في صفحة الـ html HTML5 main tag : لانشاء جزء رئيسي في صفحة الـ html HTML5 footer tag : لانشاء الجزء الخاص بنهاية الموقع في صفحة الـ html