تعلم HTML من الصفر: صفحة مفهومة بعناوين وروابط صحيحة

أول صفحة HTML المفروض تعمل إيه؟

هذا الدليل يركز على بنية المستند. CSS تهتم بالشكل، وقد تحتاج الوظائف المتقدمة تقنيات أخرى. جمال تك توفر HTML وCSS كموضوعين تستطيع استخدامهما معًا.

ابدأ بمستند صغير كامل

<!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>
  <main>
    <h1>خطة مذاكرتي</h1>
    <p>أتدرب اليوم على مسألة برمجية صغيرة.</p>
    <h2>الخطوات التالية</h2>
    <ol>
      <li>أكتب النتيجة المتوقعة.</li>
      <li>أبني الحل وأختبره.</li>
    </ol>
    <a href="https://new.gammal.tech/courses">استكشف كورسات جمال تك</a>
  </main>
</body>
</html>

احفظ المثال كملف HTML وافتحه في المتصفح. title هو عنوان الصفحة في المتصفح، أما h1 فهو العنوان الرئيسي المرئي. تحديد اللغة والاتجاه يساعد المتصفح على التعامل المناسب مع النص.

المثال صفحة خطة دراسة افتراضية، ولا يحتاج حسابًا أو قاعدة بيانات أو JavaScript لعرض المحتوى.

اختار العنصر حسب معناه

لا تختار العنوان لمجرد حجمه الافتراضي. عدّل المظهر باستخدام CSS واترك ترتيب المعاني واضحًا.

اللغة غير الاتجاه

في الصفحة العربية حدد اللغة العربية واتجاه اليمين إلى اليسار. اللغة تصف النص، والاتجاه يؤثر في ترتيب العرض. قد تحتاج عزل كود أو مصطلح لاتيني باتجاهه داخل الفقرة.

افتح الصفحة وراجع علامات الترقيم والأرقام بدل افتراض أن كل خليط لغوي سيظهر كما تتوقع.

الروابط والصور

سمِّ الرابط بما يشرح وجهته، مثل «استعرض كورسات البرمجة»، بدل تكرار «اضغط هنا». الصورة التي تنقل معلومة تحتاج بديلًا نصيًا مناسبًا، بينما الزخرفة فقط يمكن أن يكون بديلها فارغًا.

الرابط للانتقال، والزر لتنفيذ فعل. لا تضع رابطًا لا يقود إلى شيء لمجرد أنه يشبه الزر.

راجع دون الاعتماد على الشكل

اقرأ العناوين بالترتيب، وتنقل بين الروابط بلوحة المفاتيح، وتأكد من ظهور موضع التركيز. جرّب عرضًا ضيقًا وتكبير النص.

تمرينك صفحة لخطة مذاكرة فيها h1 واحد وقسمان h2 وقائمة خطوات. اجعل المعلومات مفيدة، ثم انتقل إلى CSS لتنسيق نفس البنية. فهم وظيفة العناصر أقوى من حفظ عدد كبير منها بلا استخدام واضح.