تعلم HTML

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

تطوير الويب4.8(63)9 ساعات و51 دقيقة41 درسا12 قسما

ماذا ستتعلم؟

  • تعلم أساسيات HTML والـ Tags والـ Attributes
  • إنشاء اللينكات وتنسيق النصوص
  • كتابة CSS بطرقها الثلاث
  • إضافة الصور والجداول والقوائم
  • تخطيط الصفحات باستخدام DIV وiframe
  • تصميم الفورم وأنواع Input
  • تشغيل الفيديو والصوت داخل الصفحة
  • استخدام Bootstrap
  • نشر المواقع على الإنترنت

عن الدورة

يشرح هذا الكورس تعلم HTML لتصميم صفحات الويب وإنشاء المواقع من الصفر. يبدأ بمقدمة الإنترنت وأدوات كتابة HTML وإعداد NetBeans، ثم أساسيات الـ Tags والـ Attributes، واللينكات، وتنسيق النصوص، وطرق كتابة CSS، وإضافة الصور، والجداول والقوائم. بعد ذلك يشرح تخطيط الصفحة Layout وتنسيقها باستخدام DIV وiframe، ثم الفورم والـ Input وربطه بالبرمجة، وSVG والـ Canvas، وتشغيل الفيديو والصوت داخل الصفحة. ثم يتناول CSS الجاهزة، وBootstrap، ومقدمة JavaScript وjQuery، وقوالب HTML، وينتهي بنشر المواقع على الإنترنت. ينفع الكورس المبتدئين وكل من يريد تصميم موقع بنفسه، ولا يحتاج إلى خبرة سابقة. وبعد الانتهاء ستكون قادرا على بناء صفحة ويب كاملة بـ HTML وCSS، وتصميم نماذج التسجيل، وإضافة الصور والفيديو، واستخدام Bootstrap، ونشر موقعك على الإنترنت. ويعرض الكورس كل موضوع بالتطبيق العملي، فتبني صفحاتك بنفسك أثناء المتابعة وتراجع نتيجة كل خطوة.

نتائج متوقعة من الدورة

  • فهم شامل لأساسيات تصميم وتطوير المواقع باستخدام HTML وCSS.
  • القدرة على تصميم صفحات ويب تفاعلية وجذابة.
  • التعامل مع الوسائط المتعددة والقوالب الجاهزة بفعالية.
  • تنسيق الصفحات باستخدام أدوات متقدمة مثل Bootstrap.
  • نشر المواقع الإلكترونية وإدارتها على الإنترنت.

تقييمات المتدربين

التقييمات هنا من المتدربين الذين اشتروا الدورة وأكملوا 50٪ من المحتوى على الأقل — لا توجد تقييمات من شخص لم يطلع على المحتوى.
4.8
★★★★★
63 تقييم
5★
54
4★
8
3★
1
2★
0
1★
0
  • ★★★★★حنان ت.·منذ 3 أسبوعشاهد 90٪
  • ★★★★★رضا ع.·منذ 2 شهرشاهد 100٪
  • ★★★★★Baraa E.·منذ 3 شهرشاهد 51٪

    perfection.

  • ★★★★★Abdulgader A.·منذ 5 شهرشاهد 88٪

    من اجمل الدورات وذات شرح مميز وسهل

تم عرض كل التقييمات (4)

محتوى الدورة

1

أدوات وخصائص كتابة الأكواد

6 درس
  1. مقتطفات من الكورسعرض لمحتويات كورس HTML: الصفحات والروابط وتحميل الملفات، وإطار iframe، وخصائص المستند، والنماذج، والرسم والفيديو والصوت، وتخطيط الصفحة، والقوالب الجاهزة، ونشر الموقع على الإنترنت.11:29
  2. المقدمةمقدمة كورس HTML ومحتوياته: أساسيات المستند والفقرات والعناوين والخصائص، والروابط وإطار iframe، والنماذج، والرسم والفيديو والصوت، وتخطيط الصفحة، والقوالب الجاهزة، ونشر الموقع.12:42
  3. مقدمة الإنترنت وHTMLيمهد لـ HTML بالحديث عن الإنترنت وتطبيقاته وأهميته، ويشرح أن HTML هو الشكل الأساسي لصفحات الإنترنت، ويعرض أدوار CSS وBootstrap وjQuery في تصميم الصفحات.20:34
  4. أدوات كتابة HTML وإنشاء ملفيشرح أن ملف HTML ملف نصي يحتوي علامات خاصة، وأن الكتابة تكون بمحرر نصوص بسيط مبدئيا، وضرورة الامتداد html وإغلاق كل وسم، ثم فتح الملف في المتصفح.10:09
  5. إعداد NetBeans وبيئة العمليشرح تحميل برنامج NetBeans وتثبيته وتشغيله، ثم إنشاء ملف HTML جديد وبنيته الأساسية من html وhead وbody، وإظهار اقتراحات البرنامج للوسوم مثل h1.7:33
  6. أساسيات Tags وAttributesيشرح أساسيات الوسوم Tags وخصائصها Attributes في HTML، وأن الوسم يفتح ويغلق، وأن الوسوم تتداخل، وأن الأسطر في الملف لا تظهر في الصفحة إلا بوسم، مع كتابة التعليقات.9:54
2

أساسيات اللغة Links/Download Links/Anchor/Formatting/Image Style

7 درس
  1. أساسيات HTML والـ Attributes والتاجات المهمةيتابع أساسيات HTML: الخصائص Attributes مثل id وname وstyle، وتاجات العناوين من h1 إلى h6 واختلاف أحجامها، وتاج الخط الأفقي hr، مع تشجيع التجربة العملية.16:47
  2. اللينكات (Links) وأنواعها في HTMLيشرح الروابط Links في HTML: إنشاء صفحة فرعية والربط بها من الصفحة الرئيسية، والربط بموقع خارجي، والتحكم في فتح الرابط، والروابط الداخلية anchors داخل الصفحة نفسها.14:09
  3. الـ Anchors والـ Download Linksيشرح الروابط التي تنتقل إلى أجزاء داخل نفس الصفحة باستخدام href مع id لعمل موقع في صفحة واحدة، وكيفية الربط بملف، وتحديد target، وعمل رابط تحميل Download.21:27
  4. تنسيق النصوص (HTML Formatting) والـ Styles الأساسيةيشرح تنسيق النصوص في HTML بوسوم جاهزة مثل mark للتظليل، ثم تطبيق الألوان والخطوط بخاصية style، وتطبيق التنسيق على الصفحة كلها مع الإشارة إلى عيوب هذه الطريقة.11:24
  5. طرق كتابة CSS (Inline – Internal – External)يشرح ثلاث طرق لكتابة CSS وهي Inline داخل الوسم نفسه، وInternal داخل وسم style في الصفحة، وExternal في ملف منفصل يربط بوسم link.23:08
  6. إضافة الصور في HTML والتحكم في حجمهايشرح إضافة صورة إلى صفحة HTML بوسم img مع خاصية src ومسار الصورة، ووضعها في مجلد صور، والتحكم في عرضها وارتفاعها.8:32
  7. الجداول (Tables) والقوائم (Lists) في HTMLيشرح إنشاء الجداول في HTML بالصفوف والأعمدة وتنسيقها بإطار، ثم القوائم المرتبة وغير المرتبة وأنواع الترقيم المختلفة للقائمة المرتبة.19:10
3

تنسيق الصفحات

5 درس
  1. مقدمة Layout وتخطيط الصفحةيشرح تخطيط الصفحة Layout في HTML باستخدام جدول table، بتقسيم الصفحة إلى خلايا للشعار والقوائم والمحتوى، وضبط العرض والحدود والصور والألوان بالستايل.16:46
  2. تطبيق عملي للـ Layout وبناء صفحة كاملةتطبيق عملي لتخطيط الصفحة: تعديل نصوص القائمة وروابط الصفحات، وتوحيد الألوان بين الصفحات، واستبدال الصورة بفقرة نصية داخل الخلية، وتمهيد لأسلوب آخر في التصميم.10:41
  3. تنسيق الصفحات باستخدام DIVيشرح تقسيم الصفحة وتخطيطها باستخدام وسم div كبديل للجداول، مع تلوين الأقسام ووضع بعضها بجانب بعض وتطبيق الستايل عبر الكلاسات.18:32
  4. تنسيق الصفحات باستخدام iframeيشرح وسم iframe كطريقة لتخطيط الصفحة، فيعرض صفحة داخل إطار بخاصية src مع تحديد العرض والارتفاع، ثم يجعل الروابط تفتح داخل الإطار بإعطائه name وضبط target.9:54
  5. ضبط خصائص الصفحاتيستكمل تخطيط الموقع بضبط خصائص الصفحات، ومنها تحديد رابط أساسي للروابط حتى يكفي كتابة اسم الصفحة، وعرض رسالة بديلة عند تعطيل JavaScript، ويمهد للفورم.20:42
4

استخدام النماذج

5 درس
  1. مقدمة HTML Formsمقدمة عن نماذج HTML Forms التي يدخل فيها المستخدم بياناته، وسبب أهمية وسم form لإرسال مكوناتها إلى لغة البرمجة، ومكونات النموذج مثل الحقول والأزرار وخيارات radio.8:59
  2. تصميم فورم وأنواع Input الأساسيةيشرح تصميم نموذج HTML Form داخل جدول لتنسيق الحقول، وإضافة أنواع input أساسية مثل النص وزر الإرسال واختيار اللون والتاريخ، وأهمية وسم الإرسال وخاصية name.12:09
  3. أنواع Input المتقدمةيستكمل أنواع input في الفورم مثل البحث والألوان والتاريخ، وتنسيق الفورم نفسها، وربط الزر بدالة JavaScript، ويشرح دور HTML وCSS وBootstrap والبرمجة في الموقع.16:05
  4. Submit و Action وربط الفورم بالبرمجةيشرح ربط الفورم بالبرمجة عبر خاصية action، فعند الضغط على زر Submit يستدعي الفورم ملف برمجة يستقبل بياناتها، ويمر على بعض خصائص عناصر الإدخال.19:01
  5. النماذج المتقدمة Post/Get/Actionيشرح الفرق بين طريقتي إرسال بيانات الفورم Get وPost عبر خاصية method، وكيف تظهر البيانات في الرابط مع Get، مع خاصيتي name وlabel وتجميع العناصر.9:04
5

خصائص الرسم HTML Graphics

2 درس
  1. مقدمة SVG والرسم في HTMLمقدمة عن الرسم في HTML باستخدام SVG لرسم أشكال هندسية مثل الدائرة والمستطيل، بتحديد العرض والارتفاع والإحداثيات ونصف القطر ولون الحد والتعبئة، مع الإشارة إلى canvas.14:59
  2. الفرق بين SVG و Canvas والتعامل بالـ JavaScriptيقارن بين SVG وcanvas للرسم في HTML، ويشرح التعامل مع canvas بـ JavaScript: تحديد العنصر بالمعرف، ورسم خط بإحداثيات، وتغيير الرسم عند النقر على زر، ولماذا تُستخدم مكتبات جاهزة.15:14
6

الوسائط المتعددة HTML Multimedia

4 درس
  1. تشغيل الفيديو في HTMLيشرح عرض الوسائط المتعددة في HTML، وتشغيل ملف فيديو بتاج video مع تحديد الحجم وأزرار التحكم ومصدر الملف، والتشغيل التلقائي autoplay، ثم التمهيد لتشغيل الصوت.10:54
  2. تشغيل الصوت واستخدام Objectيشرح تشغيل ملف صوت داخل صفحة HTML بنفس طريقة الفيديو مع خصائص التحكم وتحديد مسار الملف، ثم يقدم عنصر Object الذي يعرض أنواعا مختلفة من المحتوى داخل الصفحة.5:10
  3. استخدام Object لعرض ملفات مختلفةيشرح استخدام وسم Object لعرض ملفات مختلفة داخل الصفحة مثل PDF والصور، مع تحديد عرض وارتفاع المساحة والإشارة إلى مسار الملف، وأن اليوتيوب سيأتي لاحقا.17:14
  4. تشغيل فيديو يوتيوب داخل HTML (iFrame)يشرح تشغيل فيديو يوتيوب داخل صفحة HTML بوسم iframe، باستخدام رابط embed ومعرف الفيديو، مع إضافة autoplay وإخفاء أزرار التحكم.10:53
7

ملف التنسيق CSS

4 درس
  1. مقدمة CSS وأهمية الـ Style Sheetsمقدمة عن CSS وأهمية ملفات الأنماط Style Sheets: عيب كتابة الستايل داخل كل صفحة وتكراره، وحل ملف أنماط خارجي واحد يُربط بصفحات الموقع، مع استخدام الأصناف classes.34:22
  2. استخدام CSS جاهزة من الإنترنتيوضح كيف تستفيد من تنسيقات CSS جاهزة من مواقع الإنترنت بدل تصميم كل شيء من الصفر، فتنسخ الكلاسات وتضعها في ملف الستايل وتربطها بعناصر الصفحة مثل الأزرار والفورم.9:15
  3. استكمال استخدام CSS الجاهزة وتنسيق الفورميستكمل استخدام CSS جاهزة وتنسيق الفورم، فيطبق التنسيق على عناصر input حسب نوعها وعلى كل الجداول بدل كلاس لكل عنصر، ثم يشير إلى مولدات CSS.5:20
  4. CSS Generators وإنشاء أكواد جاهزةيعرض مواقع CSS Generators التي تصمم الزر أو الفورم بصريا وتعطي كود CSS جاهزا، ثم تنسخ الكود إلى ملف الستايل المربوط بالصفحة وتطبقه على العناصر.17:01
8

ملف التنسيق Bootstrap

2 درس
  1. مقدمة Bootstrapمقدمة عن Bootstrap، ومراجعة طرق التنسيق في CSS: الستايل داخل العنصر أو داخل الصفحة أو في ملف خارجي مع classes لإعادة الاستخدام، ثم خطوات استخدام Bootstrap في المشروع.9:47
  2. تحميل وربط Bootstrap بالمشروعيشرح تحميل Bootstrap وفك الملف المضغوط ووضعه في المشروع، ثم ربط ملف الستايل الخاص به بصفحة HTML لاستخدام تنسيقاته الجاهزة للأزرار والفورم.30:08
9

HTML & Javascript

3 درس
  1. استخدام مكونات Bootstrap عمليًامراجعة لتطوير صفحات الإنترنت بين Web Design وWeb Programming، وتعريف JavaScript كلغة خفيفة تنفذ عند المستخدم وتتعامل مع المتصفح، وأماكن كتابتها، ومثال رسالة ترحيب.11:17
  2. مقدمة JavaScript وإعداد البيئةيقدم أوامر JavaScript البسيطة المستخدمة في أمثلة الكورس، وهي إظهار رسالة بأمر alert وطباعة النص في الصفحة بأمر document.write وكتابة التعليقات.6:26
  3. أساسيات JavaScript (المتغيرات والأوامر الأساسية)يبدأ بأساسيات JavaScript كلغة برمجة، فيشرح تعريف المتغيرات وأخذ قيمتها من المستخدم، ومشكلة جمع النصوص بدل الأرقام وتحويل القيمة إلى رقم قبل إجراء العمليات.14:05
10

HTML & jQuery

1 درس
  1. HTML & jQueryيشرح مكتبة jQuery وفكرتها، وتحميل ملفها وربطه بالصفحة، وكتابة الكود داخل دالة جاهزة، وتحديد العناصر والاستجابة لحدث النقر على عنصر بدل الكتابة الطويلة بـ JavaScript.13:34
11

القوالب الجاهزة HTML Templates

1 درس
  1. HTML Templatesيشرح قوالب HTML Templates الجاهزة: تحميل قالب نموذج أو صفحة أو موقع كامل جاهز، وفك ضغطه وفتحه وتعديل محتواه وألوانه والتعلم منه، بدل البناء من الصفر.22:23
12

نشر المواقع Web Site Publishing

1 درس
  1. نشر المواقع Web Site Publishingيشرح نشر الموقع على الإنترنت بعد تصميمه: حجز اسم نطاق domain ومساحة استضافة، والحصول على حساب وكلمة مرور، ثم رفع الملفات إلى الخادم ببرنامج رفع، والتمهيد لبرمجة جانب الخادم.14:58

المحاضر

م/عزب محمد عزب

م/عزب محمد عزب

محاضر بالأكاديمية العربية للعلوم والتكنولوجيا والعلوم البحرية، ووزارة الداخلية المصرية، ومركز تكنولوجيا معلومات رئاسة الوزراء، ومعهد إعداد القادة الحكومي.
68.8K مشاهدة28 دورة

هذه الدورة ضمن دبلومة

دورات ذات صلة