تعلّم HTML من الصفرالدرس 1 من 8
ما هي HTML وكيف تعمل صفحة الويب؟
أول درس في تعلم HTML بالعربية: ما هي لغة HTML، وما الوسم والعنصر والخاصية، وكيف يحول المتصفح الكود إلى صفحة، مع أول صفحة تكتبها بيدك.
محتويات الدرس
كل صفحة تفتحها في المتصفح، من جوجل إلى هذا الموقع، مبنية بلغة HTML. هي اختصار HyperText Markup Language أي «لغة ترميز النص التشعبي». ليست لغة برمجة بالمعنى الدقيق: لا تحسب ولا تتخذ قرارات، بل تصف بنية الصفحة: هذا عنوان، وهذه فقرة، وهذا رابط، وهذه صورة.
كيف تعمل صفحة الويب؟
- تكتب عنوان موقع في المتصفح.
- يطلب المتصفح ملف HTML من الخادم.
- يقرأ المتصفح الملف من أعلى لأسفل، ويرسم كل عنصر على الشاشة.
- ملفات CSS تحدد الشكل، وملفات JavaScript تضيف التفاعل. سنتعلمها في دورتي CSS وJavaScript.
الوسم والعنصر والخاصية
- الوسم (Tag): كلمة بين علامتي
<و>، مثل<p>. أغلب الوسوم لها وسم فتح ووسم إغلاق فيه شرطة مائلة:</p>. - العنصر (Element): الوسم مع محتواه:
<p>مرحبًا</p>. - الخاصية (Attribute): معلومة إضافية داخل وسم الفتح، مثل
hrefفي الرابط:<a href="https://itarabs.com">آي تي العرب</a>.
أول صفحة لك
عدّل النص في المحرر التالي ثم اضغط تشغيل لترى النتيجة:
جرّب بنفسكعدّل الكود ثم اضغط تشغيل
ماذا تحتاج لتبدأ على جهازك؟
- محرر نصوص: يكفي Notepad، لكن VS Code المجاني أفضل بكثير لأنه يلوّن الكود ويكمله.
- متصفح: كروم أو فايرفوكس أو إيدج.
- أنشئ ملفًا باسم
index.html، والصق فيه الكود السابق، واحفظه بترميز UTF-8، ثم افتحه بالمتصفح بالنقر المزدوج.
أخطاء المبتدئين الشائعة
- نسيان وسم الإغلاق:
<p>نصدون</p>. المتصفح يتسامح أحيانًا، لكن النتيجة قد تكون غريبة. - حفظ الملف بامتداد .txt: تأكد أن الامتداد
.html. - الحروف العربية تظهر رموزًا: احفظ الملف بترميز UTF-8، وسنضيف وسم
meta charsetفي الدرس التالي.
الأسئلة الشائعة
هل HTML لغة برمجة؟
لا، هي لغة ترميز تصف البنية. البرمجة الحقيقية في الويب تبدأ مع JavaScript.
هل أحتاج حفظ كل الوسوم؟
لا. ستستخدم نحو 20 وسمًا في أغلب الصفحات، وتحفظها بالممارسة. وأي وسم آخر تبحث عنه عند الحاجة.
الخلاصة
- HTML تصف بنية الصفحة بالوسوم والعناصر والخصائص.
- المتصفح يقرأ الملف ويرسم الصفحة، وCSS للشكل وJavaScript للتفاعل.
- في الدرس التالي نبني الهيكل الكامل لأي صفحة HTML.