تعلم HTML للمبتدئين 2026 - بناء صفحة ويب خطوة بخطوة
HTML هي لغة ترميز تصف بنية صفحة الويب: ما العنوان، وما الفقرة، وأين توجد القائمة أو الصورة أو الرابط أو النموذج. المتصفح يقرأ العناصر ويرتبها في شجرة يمكن تنسيقها بواسطة CSS وتحريكها بواسطة JavaScript. أفضل طريقة للتعلم هي بناء صفحة صغيرة صحيحة دلاليًا ثم تحسينها، بدل حفظ عشرات الوسوم بلا استخدام.
الأداة التي تحتاجها
يكفي محرر نصوص ومتصفح حديث. أنشئ مجلدًا للمشروع وملفًا باسم index.html، ثم افتحه في المتصفح. استخدم أدوات المطور لفحص العناصر والأخطاء. احفظ الملف بترميز UTF-8 حتى تظهر العربية بصورة صحيحة، ونظّم الصور والملفات في مجلدات واضحة عندما يكبر المشروع.
الهيكل الأساسي لوثيقة HTML
<!doctype html>
<html lang="ar" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>صفحتي الأولى</title>
</head>
<body>
<h1>مرحبًا بالعالم</h1>
<p>هذه أول صفحة HTML أبنيها بنفسي.</p>
</body>
</html>يعرّف doctype نوع المستند، وتحدد lang اللغة، ويجعل dir اتجاه المحتوى عربيًا. يحتوي head بيانات عن الصفحة، بينما يحتوي body ما يراه المستخدم.
العناصر والوسوم والسمات
يتكون العنصر غالبًا من وسم فتح ومحتوى ووسم إغلاق، مثل فقرة. توجد عناصر فارغة مثل الصورة لا تلتف حول نص. السمات تضيف معلومات إلى العنصر، مثل href في الرابط وsrc وalt في الصورة. ضع القيم بين علامتي اقتباس، واحرص على تداخل صحيح: أغلق العنصر الداخلي قبل الخارجي.
العناوين والفقرات والقوائم
استخدم h1 للعنوان الرئيسي للصفحة، ثم h2 للأقسام وh3 للأقسام الفرعية. لا تختَر مستوى العنوان بسبب حجمه البصري؛ غيّر الشكل عبر CSS. استخدم p للفقرات، وul للقائمة غير المرتبة، وol للخطوات المرتبة، وli لكل عنصر. البنية الواضحة تفيد القارئ وتقنيات المساعدة ومحركات البحث.
الروابط والصور
<a href="https://example.com">زيارة الدليل</a>
<img src="images/desk.jpg" alt="مكتب عليه حاسوب ودفتر" width="800" height="533">اجعل نص الرابط يصف وجهته بدل كلمة اضغط هنا. اكتب نصًا بديلًا للصورة يوضح معناها عندما تكون جزءًا من المحتوى، واترك alt فارغًا للصورة الزخرفية البحتة. تحديد أبعاد الصورة يساعد المتصفح على حجز المساحة ويقلل حركة التخطيط أثناء التحميل.
العناصر الدلالية
استخدم header للمقدمة، وnav للتنقل، وmain للمحتوى الرئيسي، وarticle لمحتوى مستقل، وsection لقسم ذي عنوان، وaside للمحتوى الجانبي، وfooter للخاتمة. لا تمنح هذه العناصر شكلًا تلقائيًا مميزًا، لكنها تصف وظيفة الأجزاء وتسهّل القراءة الآلية وصيانة الكود.
نموذج بسيط
<form>
<label for="email">البريد الإلكتروني</label>
<input id="email" name="email" type="email" required>
<button type="submit">اشتراك</button>
</form>اربط label بالحقل باستخدام for وid، وحدد نوع الإدخال، ولا تعتمد على النص المؤقت placeholder بوصفه تسمية. HTML يتحقق من بعض القيود، لكن الخادم يجب أن يعيد التحقق من البيانات قبل حفظها أو استخدامها.
HTML وCSS وJavaScript
- HTML: البنية والمعنى.
- CSS: الألوان والمسافات والتخطيط والاستجابة للشاشات.
- JavaScript: السلوك والتفاعل وجلب البيانات.
ابدأ بصفحة تعمل وتُقرأ من دون CSS أو JavaScript، ثم أضف الشكل والسلوك تدريجيًا. هذا الفصل يجعل اكتشاف الأخطاء أسهل ويحسن الوصول والمرونة.
الوصول من البداية
استخدم لغة واتجاهًا صحيحين، وترتيب عناوين منطقيًا، وأزرارًا حقيقية للأفعال وروابط حقيقية للانتقال. تأكد من إمكانية التنقل بلوحة المفاتيح، ووجود تسمية لكل حقل، وتباين مناسب بعد إضافة CSS. لا تستخدم div قابلًا للنقر بدل button ما لم تكن مضطرًا وتفهم متطلبات لوحة المفاتيح والأدوار.
مشروعك الأول
- ابنِ صفحة تعريفية تحتوي رأسًا وتنقلًا ومحتوى رئيسيًا وتذييلًا.
- أضف قسم مهارات وقائمة مشاريع.
- أضف صورة محسنة ووصفًا بديلًا مناسبًا.
- أضف نموذج تواصل منظمًا من دون توصيله بخادم في البداية.
- افحص الصفحة على هاتف، واختبر الروابط والعناوين بلوحة المفاتيح.
أخطاء شائعة
من الأخطاء نسيان إغلاق العناصر، وتكرار id، ووضع أزرار داخل روابط، واستخدام العناوين لتكبير النص فقط، وكتابة مسارات صور غير صحيحة، وحذف alt، والاعتماد على المتصفح لإصلاح بنية غير سليمة. افحص وحدة التحكم واستعمل أداة تحقق من HTML عندما تتصرف الصفحة بصورة غير متوقعة.
مصادر موثوقة للتوسع
الخلاصة
أنشئ ملف index.html واكتب الهيكل بيدك، ثم أضف كل يوم عنصرًا جديدًا داخل مشروع حقيقي. عندما تستطيع بناء صفحة دلالية بروابط وصور وقائمة ونموذج، انتقل إلى CSS، وبعدها تعلم JavaScript لإضافة التفاعل.
تعليقات
إرسال تعليق