Dev Web & SaaS

HTML الذكاء الاصطناعي: الخطوات التسع الرئيسية للانتقال من الصفر إلى التشغيل

HTML الذكاء الاصطناعي: الأساسيات في مقال — كود حقيقي، مخططات وخطوات ملموسة، مقتطفات من دورة مكونة من 46 درسًا.

REHOUMA Haythem

• 7 min read
HTML الذكاء الاصطناعي: الخطوات التسع الرئيسية للانتقال من الصفر إلى التشغيل

يمكن للجميع تعلم HTML Intelligence Artificielle — بشرط اتباع الخطوات بالترتيب الصحيح. لقد لخصنا دورة كاملة من 46 درسًا في مسار واضح، مع أكثر مقتطفات الكود فائدة.

tl;dr
  • مقدمة وإعداد
  • الهيكل الأساسي لصفحة HTML
  • النص والتنسيق
  • الروابط والتنقل
  • الصور والوسائط المتعددة
~$ cat ./parcours.md # HTML الذكاء الاصطناعي — 10 فصول
01
مقدمة والإعداد
→ ما هو الويب وHTML؟→ تثبيت VS Code وLive Server+ 1 دروس أخرى
02
هيكل صفحة HTML الأساسي
→ DOCTYPE، html، head وbody موضحة→ meta charset، viewport وtitle+ 2 دروس أخرى
03
النص والتنسيق
→ عناوين h1 إلى h6: التسلسل الهرمي وSEO→ فقرات، strong، em وspan+ 2 دروس أخرى
04
الروابط والتنقل
→ علامة <a> وhref الأساسي→ روابط خارجية: target="_blank" وrel="noopener"+ 2 دروس أخرى
05
الصور والوسائط المتعددة
→ علامة <img> وأهمية السمة alt→ صيغ الصور: JPG، PNG، SVG، WebP، AVIF+ 2 دروس أخرى
06
علامات HTML5 الدلالية
→ لماذا الدلالة مهمة→ header، nav، main، footer+ 2 دروس أخرى
07
نماذج HTML
→ تشريح نموذج: form، label، input→ أنواع input الحديثة (email، tel، date، color)+ 2 دروس أخرى
08
إمكانية الوصول a11y
→ لماذا إمكانية الوصول ليست اختيارية→ سمات ARIA: aria-label، aria-hidden، role+ 2 دروس أخرى
🏁
المشروع النهائي (+ 2 فصول في الطريق)
→ تنطلق بمشروع ملموس وقابل للعرض

select, textarea, fieldset et legend

NOTEالهدف — إكمال صندوق أدوات النماذج باستخدام القوائم المنسدلة (select)، ومناطق النص متعددة الأسطر (textarea)، والتجميع الدلالي للحقول (fieldset + legend).

الأهداف التعليمية

TIPعند إتمام هذه الوحدة
  • إنشاء قائمة منسدلة باستخدام select و option
  • إضافة منطقة نص باستخدام textarea
  • تجميع الحقول باستخدام fieldset
  • إضافة تسمية للمجموعة باستخدام legend
  • بناء نموذج كامل وسهل الوصول

select : القائمة المنسدلة

تقدم الوسمة <select> اختيارًا من قائمة خيارات. كل خيار هو وسمة <option>. السمة value هي البيانات المرسلة؛ والنص هو ما يراه المستخدم.

TIPنصيحة: اطلب من ChatGPT: « أنشئ نموذج تسجيل سهل الوصول يحتوي على select للبلدان، و textarea للعرض التقديمي، و fieldset للبيانات الشخصية. »

تشريح النموذج : form, label, input

NOTEالهدف — بناء أول نموذج HTML لديك. فهم الوسمات الثلاث الأساسية: form (الحاوية)، label (التسمية) و input (حقل الإدخال).

الأهداف التعليمية

TIPعند إتمام هذه الوحدة
  • إنشاء حاوية form
  • إضافة حقول input
  • ربط label بكل حقل
  • فهم السمة name
  • إضافة زر إرسال

الفكرة: النموذج يجمع البيانات

النموذج هو الوسيلة التي يستخدمها المستخدم لـإرسال معلومات: اسمه، بريده الإلكتروني، رسالة. هذا ما يجعل الصفحة تفاعلية. الوسمة <form> تحيط بجميع الحقول.

mailto, tel وروابط الملفات

NOTEالهدف — اكتشاف الروابط الخاصة: فتح عميل البريد بـ mailto:، إجراء مكالمة بـ tel:، واقتراح تنزيل ملف باستخدام السمة download.

الأهداف التعليمية

TIPعند إتمام هذه الوحدة
  • إنشاء رابط بريد إلكتروني بـ mailto:
  • ملء الموضوع ونص الرسالة مسبقًا
  • إنشاء رابط هاتف بـ tel:
  • اقتراح تنزيل بـ download
  • اختيار الرابط المناسب حسب الحاجة

رابط البريد الإلكتروني : mailto:

يفتح الرابط mailto: برنامج البريد الإلكتروني للمستخدم مع ملء العنوان مسبقًا.

va-plus-loin

يغطي هذا المقال المقتطفات الأكثر فائدة — الدورة الكاملة HTML Intelligence Artificielle (11 فصلاً، 46 درسًا، تمارين مصححة ومشروع نهائي) تأخذك إلى النهاية.

./acceder-au-cours-complet cours gratuit : Vibe Coding

الأسئلة الشائعة

كم من الوقت يستغرق تعلم HTML Intelligence Artificielle؟
مع تقدم منظم (11 فصلاً، 46 درسًا قصيرًا وعمليًا)، يمكن الوصول إلى مستوى تشغيلي في بضعة أسابيع بمعدل 30 إلى 60 دقيقة يوميًا. المهم هو تطبيق كل مفهوم فورًا.
هل هناك متطلبات سابقة؟
تكفي أساسيات الحاسوب. إذا كنت تعرف استخدام الطرفية وقراءة كود بسيط، فأنت جاهز.
من أين أبدأ عمليًا؟
طبّق الأوامر الواردة في هذا المقال، ثم تابع دورة HTML Intelligence Artificielle الكاملة: فهي تربط الـ46 درسًا بالترتيب مع تمارين ومشروع نهائي.
./a-lire-aussi
→ ابدأ بـ Portfolio IA SEO Vercel: خطوتك العملية الأولى اليوم→ IA Stripe GitHub SaaS عمليًا: الكود والأوامر التي تهم حقًا→ Python Requests APIs explained ببساطة (مع مخططات وكود حقيقي)

📬 هل تريد تلقي هذا النوع من الأدلة كل أسبوع؟ اشترك مجانًا — كود حقيقي، بدون كلام زائد.

Stay up to date

Enter your email
Subscribe