تعلم HTML

مقدمة

• HTML (HyperText Markup Language)
  • لغة لبناء هيكل الموقع
  • ليست لغة برمجة
  • مثل بناء هيكل المبنى قبل إضافة الألوان والأثاث

الأدوات المستخدمة في HTML

• محرر الأكواد
  • يمكن أن يكون أي نوع (Notepad, Atom, VSCode)
  • في الشرح، يتم استخدام VSCode
• تحميل وتثبيت VSCode
  • زيارة الموقع الرسمي
  • تحميل النسخة المناسبة لنظام التشغيل
  • تثبيت البرنامج

بناء الموقع باستخدام HTML

• إنشاء ملفات الموقع
  • ملفات HTML, CSS, JavaScript, صور، فيديوهات، إلخ
• فتح المجلد في VSCode
  • إعداد الملفات والمجلدات

كتابة كود HTML

• إنشاء ملف جديد (index.html)
  • كتابة الكود داخل الملف
• طريقة عرض النتيجة في المتصفح
  • فتح الملف في المتصفح
  • تحديث الصفحة لرؤية التغييرات

قواعد وقوانين HTML

• Tags
  • علامات تستخدم لتحديد مكونات الموقع
• Syntax
  • قواعد كتابة الأكواد في HTML

عناصر HTML الأساسية

• Headings
  • h1, h2, h3, h4, h5, h6
  • h1 أكبر حجمًا، h6 أصغر حجمًا
• Horizontal Rule (hr)
  • خط أفقي لفصل المحتوى
• Block Elements vs Inline Elements
  • block elements تأخذ سطر كامل (مثل h1 والبراجراف)
  • inline elements تأتي في نفس السطر (مثل الأسبان)

مكونات الصفحة الأساسية

• DOCTYPE
  • تحديد إصدار HTML5
• HTML tag
  • كل الكود يكتب بين بداية ونهاية وسم HTML
• Head و Body
• Title و Meta tags
  • وصف الموقع، اللغة، الترميز (UTF-8)

التعامل مع الروابط (Links)

• وسم (a)
  • تحديد الرابط باستخدام href
  • استخدام target لفتح الرابط في نفس التاب أو في تاب جديد
• رفسير لصفحات وملفات أخرى
  • الروابط المطلقة والمطلقة النسبية
  • الدلائل المختلفة ومستويات الملفات

استخدام الصور في HTML

• وسم (img)
  • src لتحديد مسار الصورة
  • alt لوصف الصورة
  • width و height لتحديد الأبعاد
  • إمكانية تضمين الصور خارجية وداخلية

التعامل مع الصوت والفيديو في HTML

• Audio و Video tags
  • مواقع الصوت والفيديو
  • استخدام multiple sources لدعم الأنواع المختلفة من المتصفحات -ميزات مثل controls و autoplay و loop

التعامل مع الجداول (Tables)

• هيكل الجدول باستخدام (table), (tr), (td), (th)
• استخدام (thead), (tbody), (tfoot) لتنظيم الجدول
• Colspan و Rowspan لدمج الأعمدة والصفوف

القوائم (Lists)

• Unordered lists (ul)
  • نقاط غير مرتبة
• Ordered lists (ol)
  • نقاط مرتبة
• Description lists (dl)
• Nested lists

الحقول والنماذج (Forms)

• استخدام عناصر النماذج (input, textarea, select)
• Input types
• Validation
  • required, minlength, maxlength

الإطارات التوضيحية مع أمثلة

• Iframe, Object, Embed
  • تضمين المواقع، الصور، الفيديوهات، الملفات PDF

تحميل الملفات باستخدام HTML

• استخدام وسم (a) مع download attribute
• تشغيل الملفات عبر Live Server لمعاينة التحميل

استخدام Live Server في VSCode

• تنفيذ التغييرات مباشرة بدون إعادة تحميل الصفحة
• خاصية مهمة لتسهيل العمل ومعاينة التغييرات فوريا على المتصفح