تعلم HTML: دورة برمجة
تعلم HTML: دورة برمجة — دورة HTML مع محرر للمعاينة المباشرة في جيبك
تعلم HTML: دورة برمجة هي دورة HTML لأجهزة iPhone وAndroid، تضع محرر HTML مع معاينة مباشرة على بُعد نقرة واحدة من كل درس. اكتب وسمًا، وشاهد الصفحة أثناء عرضها، ثم انتقل من أول عنوان إلى النماذج والجداول وHTML5 الدلالي وإمكانية الوصول ومكوّنات الويب عبر 40 دورة قصيرة.
- السعر
- مجانًا، مع ترقية Pro
- المنصات
- iOS وAndroid
- اللغات
- 22
- التصنيف العمري
- 4+
- يتطلب
- iOS 15.1 أو أحدث
- App Store
- 3.0 ★ (1)
يكتسب الوسم معنى أكبر بعد أن تراه يرسم شيئًا.
HTML هي لغة ترميز، لذا فإن أسرع طريقة لفهم عنصر جديد هي كتابته والنظر إلى النتيجة. ينتهي كل درس في هذا التطبيق والمحرر مفتوح فيه مسبقًا، مع ظهور المعاينة بجانب الترميز، ولا تضيف ملفات CSS أو JavaScript إلا عندما تكون مستعدًا لذلك.
ما هو
تعلم HTML: دورة برمجة هي دورة HTML مجانية للبدء على iOS وAndroid، وتعلّم ترميز صفحات الويب عبر 40 دورة و159 درسًا قصيرًا، مرتبة من المبتدئ (A1) إلى المتقدم (C1). وتقرن كل موضوع بمحرر HTML مضمّن للشفرة ومعاينة فورية، و20 مشروعًا إرشاديًا مثل نموذج اتصال وجدول أسعار سهل الوصول، و20 مهمة لتصحيح الأخطاء ومرشد AI، كي يتمكن المبتدئ تمامًا من الانتقال من مستند فارغ إلى صفحات دلالية سهلة الوصول ومنظمة جيدًا.
داخل التطبيق
كيف يبدو
الدورة
ما الذي تغطيه دورة HTML
40 دورة و159 درسًا من قائمة دورات التطبيق نفسها، بالترتيب الذي يدرّسه المسار.
بنية المستند، والنصوص، والروابط، والصور، والقوائم
هيكل كل صفحة: بنية المستند، والعناوين والفقرات، والروابط والتنقل، والصور والأشكال التوضيحية، والقوائم المرتبة وغير المرتبة.
الجداول والسمات والسمات العامة
تنسيق البيانات في الجداول، ثم السمات التي تضبط العنصر، بما في ذلك السمات العامة التي تعمل مع كل وسم.
النماذج: الأساسيات وعناصر التحكم المتقدمة والتحقق
تبدأ بمدخلات أساسية، ثم عناصر تحكم أكثر تنوعًا، ثم سمات التحقق التي تتيح للمتصفح فحص الحقل قبل إرساله.
HTML5 الدلالي، وHead والبيانات الوصفية، والصوت والفيديو
العناصر الدلالية، وHead في المستند وبياناته الوصفية، وعنصرا الصوت والفيديو.
إمكانية الوصول وأدوار ARIA وأنماط ARIA المتقدمة
أساسيات إمكانية الوصول، وأدوار وسمات ARIA، والأنماط المتقدمة المستخدمة في عناصر الواجهة المخصصة.
سمات البيانات والقوالب وCanvas وSVG وiframes
سمات البيانات المخصصة، وقوالب HTML، وعنصر Canvas، وSVG داخل HTML، والمحتوى المضمّن في iframes.
Web Storage والسحب والإفلات وتحسين محركات البحث وقوالب البريد الإلكتروني
Web Storage وواجهة السحب والإفلات API، وتحسين محركات البحث ووسوم meta الاجتماعية، والقواعد الخاصة بقوالب البريد الإلكتروني المكتوبة بـHTML.
Web Components والأداء وHTML على نطاق واسع
العناصر المخصصة، وShadow DOM، وخرائط الاستيراد والتحسين التدريجي، إلى جانب الأداء والأمان وPWAs والاختبار، وصولًا إلى HTML على نطاق واسع.
كيف يعمل
كيف تتعلم وسمًا، من القراءة إلى العرض
الدرس قصير، والمحرر يجلس بجانبه، لذا تحدث قراءة المفهوم وتجربته في الجلسة نفسها.
اقرأ درسًا قصيرًا واحدًا
تابع مسار التعلم من حيث توقفت. يغطي كل درس فكرة واحدة، مثل قائمة غير مرتبة أو صورة بنص بديل، ويستغرق بضع دقائق.
اكتبه في المحرر وشاهد المعاينة
افتح المحرر واكتب الترميز. تعيد المعاينة رسم صفحتك، وتكون علامتا تبويب CSS وJavaScript متاحتين عندما تريد تنسيق الصفحة أو جعلها تستجيب.
تحقق منه، وأصلحه، وابنِ به
يختتم كل موضوع باختبار وتحدٍّ برمجي. عندما يكون وسم أو خطأ ما غير واضح، يشرحه مرشد AI، وتمنحك مهمة لتصحيح الأخطاء صفحة معطّلة لإصلاحها، بينما يبني المشروع الإرشادي شيئًا يمكنك عرضه.
ماذا يتضمن
ما الذي يتضمنه Learn HTML
40
دورات من A1 إلى C1
تمتد الدروس الـ159 من بنية المستند والنصوص والروابط والصور والقوائم، مرورًا بالجداول والنماذج وHTML5 الدلالية، وصولًا إلى إمكانية الوصول ومكوّنات الويب والأمان وواجهة History and Navigation API.
مباشر
محرر HTML مع معاينة
اكتب الترميز وشاهد الصفحة المعروضة تتحدّث. يمكنك إضافة ملفات CSS وJavaScript إلى المشروع نفسه، فتحوّل مستندًا عاديًا إلى موقع ويب صغير يعمل.
20
مشاريع إرشادية
مشاريع تُبنى خطوة بخطوة، وتشمل صفحة صندوق وصفات، ونموذج اتصال، ومعرض صور، وشريط تنقّل، وجدول أسعار سهل الوصول.
20
مهام لتصحيح الأخطاء
أخطاء حقيقية لتعقّبها: نموذج تسجيل لا يرسل شيئًا، وتسمية لا يستطيع أحد النقر عليها، وصفحة تُحمّل مصغّرة على الهاتف.
80
ورقة غش للوسوم
قائمة مرجعية تضم 80 وسمًا وعنصرًا وسمة من HTML، للحظات التي تعرف فيها ما تريد لكنك لا تعرف اسمه.
50
أسئلة المقابلات
خمسون سؤالًا لمقابلات مطوري الويب مع إجابات واضحة، بالإضافة إلى مكتبة شفرة تضم أمثلة قصيرة يمكنك فتحها وتحريرها، ومساحة لحفظ شفرتك وملاحظاتك.
خلفية
ما هي HTML، وهل يمكنك تعلّمها بالكتابة على الهاتف؟
HTML (لغة ترميز النص التشعبي) هي اللغة التي تصف بنية صفحة الويب: أي نص هو عنوان، وأي نص هو فقرة، وإلى أين يشير الرابط، وما الذي يطلبه النموذج. وهي ليست لغة برمجة، لذلك لا توجد حلقات أو متغيرات عليك التعامل معها، ولهذا تُعد الخطوة الأولى المعتادة إلى تطوير الويب. وبما أن النتيجة تظهر لحظة كتابتها، تناسب HTML الجلسات القصيرة على الهاتف جيدًا: فالوسم صغير بما يكفي لكتابته بإبهامك، وتُظهر المعاينة فورًا ما إذا كان قد عمل.
العناصر والوسوم والسماتالكلمات الثلاث التي يستخدمها كل درس
العنصر جزء من المحتوى يحمل معنى، ويُكتب بين وسم فتح ووسم إغلاق، مثل فقرة أو عنصر في قائمة. توجد السمات داخل وسم الفتح وتعدّله، مثل العنوان الذي يشير إليه الرابط أو النص الذي يصف صورة. معظم أخطاء المبتدئين تقريبًا ناتجة عن نسيان وسم الإغلاق أو وضع سمة في غير موضعها.
HTML الدلاليةالعناوين والتنقّل والمحتوى الرئيسي والتذييل
توضح العناصر الدلالية ماهية جزء من الصفحة بدلًا من شكل ظهوره. فلشريط التنقّل والمقالة والتذييل عنصر خاص بكل منها، ما يساعد قارئات الشاشة ومحركات البحث وكل من سيضطر لاحقًا إلى تعديل الصفحة. إنها العادة التي تميّز الصفحة المرتبة عن كومة من الحاويات العامة.
HTML وCSS وJavaScriptمَن يفعل ماذا
تحتفظ HTML بالبنية والمحتوى، وتتحكم CSS في مظهر ذلك المحتوى، بينما تضيف JavaScript سلوكًا مثل الاستجابة للنقر. يمنح تعلّم HTML أولًا اللغتين الأخريين ما تتصلان به. ويوفر المحرر في التطبيق علامات تبويب منفصلة لـHTML وCSS وJavaScript، كي تفصل بين المهام الثلاث منذ البداية.
النماذج وإمكانية الوصولحيث تكتسب الصفحات البسيطة أهمية حقيقية
النماذج هي الطريقة التي تطلب بها الصفحة أي شيء من الزائر، وهي أيضًا المكان الذي تبدأ فيه معظم مشكلات إمكانية الوصول: تسمية لا يستطيع أحد النقر عليها، أو حقل لا يستطيع قارئ الشاشة تسميته. فالسمات الخاصة بالتسميات والتحقق وأدوار ARIA أجزاء صغيرة من الترميز تحدد ما إذا كانت الصفحة تعمل للجميع.
الملاءمة
لمن يناسب — ولمن لا يناسب
يناسبك إذا كنت
- هل تكتب أول صفحة ويب لك وتريد شرح كل وسم قبل استخدامه؟
- تتعلّم بأفضل طريقة عندما ترى نتيجة كل سطر فورًا
- هل تدير مدونة أو صفحة متجر أو معرض أعمال وتريد تعديل الترميز الذي يقف وراءها؟
- هل تخطط للانتقال إلى CSS أو JavaScript أو العمل في الواجهة الأمامية وتريد تأسيسًا متينًا أولًا؟
- هل تستعد لمقابلة لوظيفة مطوّر ويب وتريد أسئلة تتدرّب عليها؟
ليس الأداة المناسبة لك إذا كنت
- تحتاج إلى سير عمل كامل على سطح المكتب يتضمن الملفات والمجلدات وخادمًا محليًا
- تتوقع أن تكون كل الدورات مجانية؛ الدورة الأولى والمشروع الإرشادي الأول ومهمتان متاحة مجانًا، بينما يفتح Pro بقية المحتوى
- تكتب HTML مخصصًا لبيئات الإنتاج يوميًا وتريد مرجعًا بدلًا من دورة
- تريد تعلّم أداة تصميم؛ فهذا التطبيق يتناول الترميز والكود الذي يقف وراء الصفحات
الأسئلة
الأسئلة الشائعة
ما هو تعلم HTML: دورة برمجة؟
تعلم HTML: دورة برمجة هو تطبيق لأجهزة iPhone وAndroid يعلّم HTML بدءًا من أول وسم وصولًا إلى الموضوعات المتقدمة. يجمع التطبيق بين 40 دورة قصيرة ومحرر HTML مدمج مع معاينة مباشرة، و20 مشروعًا إرشاديًا، و20 مهمة لتصحيح الأخطاء، ومرشد AI. يمكنك البدء مجانًا، وهو متاح بـ22 لغة.
هل يمكنني حقًا كتابة HTML ومعاينته على الهاتف؟
نعم. يضم المحرر في تعلم HTML: دورة برمجة علامات تبويب لـHTML وCSS وJavaScript، وتعرض المعاينة الصفحة التي ينتجها ترميزك. الهاتف مناسب للتدريب المركّز الذي يتطلبه HTML، لأن الوسوم قصيرة. ولا تصبح الشاشة الأكبر مفيدة إلا عندما تتعامل مع ملفات عديدة في الوقت نفسه.
هل أحتاج إلى خبرة سابقة في البرمجة قبل البدء؟
لا. يبدأ المسار بشرح كيفية تكوين مستند HTML، ويوضح كل مصطلح بلغة بسيطة قبل استخدامه. لا يتضمن HTML حلقات أو متغيرات تحتاج إلى تعلّمها أولًا، لذلك يتعامل تعلم HTML: دورة برمجة مع المبتدئ تمامًا بوصفه الحالة الطبيعية لا الاستثناء.
ما الفرق بين HTML وCSS؟
يحدد HTML ما يوجد على الصفحة ومعنى كل جزء فيها، مثل العنوان أو الرابط أو حقل النموذج. أما CSS فيحدد مظهرها، بما في ذلك الألوان والمسافات والتخطيط. يعلّم التطبيق HTML أولًا، ويتيح لك إضافة ملفات CSS في المحرر، لتتمكن من رؤية عملهما معًا من دون الخلط بين وظيفتيهما.
كم من الوقت يستغرق تعلّم أساسيات HTML؟
يستطيع معظم الأشخاص كتابة صفحة بسيطة وصحيحة بعد بضع جلسات قصيرة، لأن العناصر الأساسية قليلة: العناوين والفقرات والروابط والصور والقوائم والنماذج الأساسية. أما المواد الأعمق، مثل إمكانية الوصول والبنية الدلالية وWeb Components، فتحتاج إلى وقت أطول. صُممت الدروس هنا لتُنجز في دقائق، لذا فإن اتباع عادة يومية أمر واقعي.
ما أنواع المشاريع التي يمكنني إنشاؤها في التطبيق؟
تتضمن المشاريع الإرشادية العشرون صفحة لصندوق وصفات، ونموذج اتصال، ومعرض صور، وشريط تنقل، وجدول أسعار يسهل الوصول إليه. يُبنى كل مشروع خطوة بخطوة. وهي صغيرة عن قصد، لتتمكن من إكمالها والاحتفاظ بالكود في مقتطفاتك المحفوظة.
هل يغطي Learn HTML موضوعَي إمكانية الوصول والنماذج؟
نعم، وبقدر كبير من التفصيل. تتضمن النماذج ثلاث دورات تغطي الأساسيات وعناصر التحكم المتقدمة وسمات التحقق. كما تتضمن إمكانية الوصول دورات خاصة بالأساسيات وأدوار ARIA وأنماط ARIA المتقدمة. وتشمل مهام تصحيح الأخطاء أيضًا مشكلات مثل وجود تسمية لا يستطيع أحد النقر عليها، ما يجعل هذه الموضوعات عملية لا مجرد مفاهيم نظرية.
هل التطبيق مجاني، وماذا يضيف Pro؟
يمكنك تنزيله مجانًا والبدء فورًا: فالدورة الأولى والمشروع الإرشادي الأول ومهمتان والمحرر المباشر مشمولة، إلى جانب حصة يومية من مرشد AI. يفتح Pro جميع الدورات والمشاريع والمهام، وامتحان الشهادة، وأسئلة غير محدودة لمرشد AI، كما يزيل الإعلانات.
ابدأ الآن
اكتب وسمك الأول وشاهده يظهر
البدء مجاني على iOS وAndroid، وبـ22 لغة.
المزيد من CoddyKit
متاح على iOS و Android.