كتابة HTML

يبدو كرابط، لكن Tab يتخطاه

• المستطيل المنسق الذي يقول “انضم” ليس تلقائياً رابطاً عاملاً. الرابطة الحقيقية مع وجه لها سلوك متصفح لا يوفره التنسيق وحده.
• HTML يعطي هيكل المحتوى ومعناه. CSS يتحكم في العرض؛ اختيار HTML ذي معنى يدعم أيضاً استخدام لوحة المفاتيح والأدوات المساعدة.

اقرأ الوسم وخصائصه

• العنصر له غالباً وسم بداية ومحتوى ووسم نهاية: <p>Meet on Thursday.</p>. الخاصية توفر معلومات في وسم البداية: <a href="join.html">Join</a>.
• عنصر HTML فارغ مثل img ليس له وسم نهاية أو محتوى فرعي. إنه لا “يغلق نفسه”؛ الشريط المائل في النهاية غير ضروري في HTML. شُغّل الوسوم المتزامنة بدون تقاطع.

عيّن مناطق الصفحة حسب الغرض

• العناصر الدلالية تشمل nav للتنقل الرئيسي وmain لمحتوى الصفحة الرئيسي. استخدم العناوين لوصف الأقسام وdiv للتجميع العام عندما لا يوجد عنصر أكثر تحديداً مناسب.
• عارضة a مع href تتنقل؛ عارضة button تقوم بإجراء عمل. تساعد العلامات الدلالية، لكن لا يزال يجب اختبار التسميات والسلوك والتركيز.

إنشاء صفحة كاملة صغيرة

• احفظ هذا المثال باسم index.html بجانب ملف join.html حقيقي. افتحه في متصفح واتبع الرابط باستخدام Tab و Enter.
• lang يحدد لغة الصفحة؛ title يُسمي تب المتصفح. تتيح إعدادات viewport لـ CSS المتجاوبة استخدام عرض الجهاز.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Robotics club</title>
</head>
<body>
  <nav aria-label="Main"><a href="join.html">How to join</a></nav>
  <main>
    <h1>Robotics club</h1>
    <p>Meet Thursday at 4 pm in room 12.</p>
  </main>
</body>
</html>

اختر البدائل بناءً على غرض الصورة

• تحتاج الصورة المعلوماتية إلى بديل ينقل معناها ذي الصلة. تُستخدم صورة زينة خالصة عادةً alt="" حتى تتمكن التقنيات المساعدة من تخطيها.
• بالنسبة للصورة المستخدمة كرابط، وصف وظيفة الرابط عندما لا تكون هذه المعلومات متوفرة بطرق أخرى. يتطلب المخطط المعقد أيضًا شرح بياناته المهمة نصيًا.

تحقق من البنية والسلوك

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

المصادر: Syntax HTML و W3C للصور الزينة.