8  لغة المحتوى

لغة HTML

لغة HTML: هي لغة بناء صفحات المواقع الإلكترونية؛ تصف عناصر الصفحة ومحتواها، وروابطها وتفاعلها، واسمها ومعلوماتٍ أخرى عنها.

العناصر

ومن أهم عناصر اللغة التي أعطت الشبكة اسمها؛ عنصر الرابط <a> وهو الذي به يتم الانتقال من صفحة إلى أخرى عن طريق الرابط الذي يعيَّن كقيمة للخاصية href على النحو التالي:

<p>
  يمكنك قراءة كتاب
  <a href="https://halgoz.quarto.pub/pythonia/">
    المقدمة البايثونية للبرمجة باللغة العربية
  </a>
  كمقدمة لهذه المادة
</p>

<p></p>

فإذا ما وضعت هذا النص في ملف وسميته -مثلاً- demo-a-tag.html ثم فتحته بواسطة المتصفِّح، فإنك سترى مثل هذا النص، وفيه رابط إذا ضغطت عليه يتم توجيهك إلى العنوان الذي حددنها:

ومن العناصر ما هو تنسيقي مثل عنصر الفقرة <p> من (Paragraph)، فتكون المسافة بين الفقرتين أكبر من المسافة بين سطور نفس الفقرة الواحدة.

ولاحظ أن العنصر مكوَّن من علامة ابتداء <p> ويعتبر ما بعدها ضمنها (Content) إلى أن تصل إلى علامة الانتهاء <p/> التي تختلف بوجود / سابقة لاسم العلامة.

أما ما يكون ضمن علامة الابتداء نحو href في عنصر الرابط <a> فهي الخصائص (Attributes).

وبهذا نتخيَّل الشبكة ملفات مربوطة ببعضها عن طريق العناوين الموحدة:

ومن العناصر ما له علامة واحدة لأنه لا يتضمَّن شيئًا داخله، مثل علامة الكسر <br> من (Break) الذي يدل على نهاية السطر في نحو المثال التالي:

<p>
  هذا السطر الأول <br />
  ثم يتبعه السطر الثاني
</p>

ومما يجدر بالذكر أن المسافات والفراغات في HTML لا اعتبار لها في الأغلب، وإنما العبرة بالعناصر.

العناصر الوسيطة

ومن خصائص هذه اللغة أنها وسيطة؛ بمعنى أنها تتضمَّنُ عناوين لمحتوىً إضافي: نحو الصُّوَر. فإن المتصفِّح حين ينزِّل نص HTML يمرُّ عليه عنصر الصورة <img> فيعرِفَ أنها يحتاج لتنزيل هذا المورد من ذلك العنوان وعرضه في نفس الصفحة:

<img
  src="https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Web_mechanics/What_are_hyperlinks/link-1.png"
/>`

جرب: انسخ هذا النص في ملف demo-img-tag.html -مثلاً- ثم افتح الملف بالمتصفح وسترى الصورة تظهر حيث وضعتها. وجرب أن تنسخ رابط صورة أخرى (Copy image address) من الشبكة وتضعه مكان هذا الرابط لترى النتيجة:

عناصر وسيطة أخرى

ومثلها من العناصر أيضًا: الصوت <audio> والفيديو <video> فإنه يترتب على مجرد وجودها في الصفحة أن يقوم المتصفِّحُ بطلبها ثم عرضُها ضمن الصفحة التي هي فيها دون انتقال لصفحة أخرى.

ومن العناصر ما يعرِض نافذةً لصفحة أخرى؛ وهو الإطار المضمَّن (Inline Frame) من صفحة أخرى، بحيث يتم سحبه وعرضه في نفس الصفحة هذه ولا نحتاج أن ننتقل إليها؛ وذلك بعلامة <iframe>، فمثلاً مقطع الفيديو من اليوتيوب يتم عرضه في نافذة تجعلك تنظر من خلال هذا الموقع إلى موقع يوتيوب مباشرة، على النحو التالي:

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/k0vnA1PEIbw?si=WW4p4qeN53qmEhLh"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen
>
</iframe>

وطريقة الوصول إلى مثل هذا النص في اليوتيوب مثلاً: الضغط على زر المشاركة ثم تجد الخيار Embed في الجهة اليسرى من هذه الصورة:

عناصر الإدخال

ومن أهم العناصر عنصر الاستمارة <form> ويتضمن عناصر إدخال <input> ليعبئها المستخدم، ثم يضغط على زر الإرسال <button>، فيجيب الخادم بصفحة الجواب ثم يُنقَل المستخدم إليها. وهو الذي به يتم إرسال بيانات (تسجيل الدخول) أو (تعبئة نموذج) أو (اختيار المدينة) أو أي نوع من أنواع الاختيار الذي يكون من طرف المستخدم.

وعنصر الإدخال <input> له نوع يحدد بتعيين خاصية type على النحو التالي:

• نص: <input type="text">
• رقم: <input type="number">
• تاريخ: <input type="date">
• ملف: <input type="file">

تقول مثلاً: هنا حقل إدخال لاسم المستخدم، وحقل إدخال آخر لكلمة المرور، ثم هنا زر إرسال. وهذا كله يتم إرساله إلى العنوان /login عبر الطريق post (وسيأتي بيانه):

<form action="/login" method="post">
  <div>
    <label for="username">اسم المستخدم:</label>
    <input type="text" id="username" name="user" />
  </div>
  <div>
    <label for="password">كلمة المرور:</label>
    <input type="password" id="password" name="password" />
  </div>
  <div>
    <button type="submit">إرسال</button>
  </div>
</form>

جرب أن تنسخ هذا النص وتضع -مثلا- في ملف demo-form-tag.html ثم تفتحه بالمتصفح لترى النتيجة:

ملخص عناصر الإدخال

وقد لخصنا عناصر الإدخال في هذا الجدول:

ملاحظة: أغلب العناصر من جنس العنصر input لكن هناك عنصران آخران هما: textarea و select.

إدخال النص

إدخال الأرقام

إدخال التواريخ

إدخال اختيارات

إدخال ملفات

إدخال مخفي عن المستخدم

راجع أنواع الإدخال في صفحة عنصر الإدخال.

صفحة كاملة

ينقسم النص في HTML إلى رأس وجسد:

1. الرأس <head> فيه معلومات عن الصفحة
2. الجسد <body> فيه المكونات الظاهرة في الصفحة

وفيما يلي نستعرض كيف تصف لغة HTML صفحة وتضع فيها العناصر. جرب انسخ النص التالي وضعه في ملف page.html وافتحه بالمتصفح:

<!doctype html>
<html lang="ar">
  <head>
    <meta charset="utf-8" />
    <title>ما هي الروابط؟</title>
  </head>
  <body dir="rtl">
    <h1>أنواع الروابط</h1>

    <h2>الرابط الداخلي</h2>
    <p>
      الرابط الذي يربط بين صفحتين إلكترونيتين تنتميان إلى نفس الموقع الإلكتروني
      يُسمى
      <b>رابطًا داخليًا</b>. بدون الروابط الداخلية، لا يوجد ما يُسمى بموقع
      إلكتروني (إلا إذا كان موقعًا من صفحة واحدة بالطبع).
    </p>

    <h2>الرابط الخارجي</h2>
    <p>
      هو رابط من صفحتك الإلكترونية إلى صفحة إلكترونية خاصة بشخص آخر. بدون
      الروابط الخارجية، لا وجود للويب، لأن الويب عبارة عن شبكة من الصفحات
      الإلكترونية. استخدم الروابط الخارجية لتوفير معلومات إضافية بخلاف المحتوى
      المتوفر عبر صفحتك الإلكترونية.
    </p>

    <h2>الروابط الواردة (الخلفية)</h2>
    <p>
      هو رابط من صفحة إلكترونية لشخص آخر إلى موقعك. إنه عكس الرابط الخارجي. لاحظ
      أنك لست مضطرًا لإنشاء رابط في المقابل عندما يقوم شخص ما بإنشاء رابط
      لموقعك.
    </p>
  </body>
</html>

وفيما يلي شرح هذه العناصر واحدًا تلو الآخر:

• أولاً: <!doctype html> وهي تعليمة (وليست بعنصر) تخبر المتصفِّح أن هذا مستند بلغة HTML المتفق عليها.
• ثانيًا: <html lang="ar"> الجذر الذي يحتوي على الرأس (<head>) و الجسد (<body>)
  • فأما السمة lang="ar" في العنصر الجذر (<html>) فهي تعرف اللغة المستخدمة في المستند؛ في هذه الحالة العربية. وهذا يفيد -مثلاً- محركات البحث في تصنيف الصفحة بحسب اللغة.
  • رابعًا: <head> وهو الرأس الذي يحتوي على العنوان (<title>) و المعلومات (<meta>)
    • وفيه: <title>: عنوان الصفحة على الشريط العلوي
    • ثم: <meta>: حيث تتضمن هذه العلامات معلومة عن المستند مثل: charset="utf-8" تعني أن الصفحة تستخدم ترميز الحروف utf-8 للحروف العربية وغيرها
  • خامسًا: <body> وهو الجسد الذي يحتوي على العناصر (<h1>, <h2>, <p>) وغيرها:
    • سمة الاتجاه dir="rtl" تعني أن النص يتم قراءته من اليمين إلى اليسار. والأصل هو dir="ltr" للنص من اليسار إلى اليمين.
    • وفيه: <h1>: عنوان من الدرجة الأولى (رئيسي)
    • ثم: <h2>: عنوان من الدرجة الثانية (فرع من الرئيسي)
    • ثم: <p>: فقرة (Paragraph)
    • ثم: <b>: ثخين؛ أي أن العنصر يظهر بارزًا للقارئ بخط عريض

وهذا مثال آخر، فيه عناصر أخرى:

<!doctype html>
<html lang="ar">
  <head>
    <meta charset="utf-8" />
    <title>ما هي الروابط؟</title>
  </head>
  <body dir="rtl">
    <h1>أعمدة الويب الثلاثة</h1>

    <p>
      في عام 1989، تحدث تيم بيرنرز-لي، مخترع الويب، عن
      <strong>الأعمدة الثلاثة التي يقوم عليها الويب</strong>:
    </p>

    <ol>
      <li>
        <a href="https://developer.mozilla.org/en-US/docs/Glossary/URL"
          >URL (نظام العنونة الموحد)</a
        >
        : وهو نظام عناوين يتتبع مستندات الويب.
      </li>
      <li>
        <a href="https://developer.mozilla.org/en-US/docs/Glossary/HTTP"
          >HTTP (بروتوكول نقل النص التشعبي)</a
        >
        : وهو بروتوكول نقل للعثور على المستندات عند إعطاء عناوين URL الخاصة بها.
      </li>
      <li>
        <a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML"
          >HTML (لغة ترميز النص التشعبي)</a
        >
        : وهو تنسيق مستند يسمح بوجود الارتباطات التشعبية المضمنة.
      </li>
    </ol>

    <ul>
      <li>تبرز الروابط عن النص المحيط بها بكونها مسطرة وباللون الأزرق.</li>
      <li>
        اضغط أو انقر على الرابط لتفعيله، أو إذا كنت تستخدم لوحة المفاتيح، اضغط
        على مفتاح Tab حتى يصبح الرابط في التركيز ثم اضغط على <kbd>Enter</kbd> أو
        <kbd>Spacebar</kbd>.
      </li>
    </ul>

    <img
      src="https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Web_mechanics/What_are_hyperlinks/link-1.png"
    />

    <p><b>تنبيه:</b> قد يكون الصوت عاليًا</p>

    <audio
      controls
      src="https://upload.wikimedia.org/wikipedia/commons/0/0c/Meow_domestic_cat.ogg"
    ></audio>
  </body>
</html>

وأما العناصر الأخرى في الصفحة فهي:

• فيه: <ol>: قائمة مرتبة (Ordered List)
• ثم: <ul>: قائمة غير مرتبة (Unordered List)
  • ثم: <li>: أحد عناصر القائمة (List Item)
• ثم: <kbd>: مفتاح (Keyboard)
• ثم: <b>: ثخين (Bold)

---

وإليك مرجع لكل العناصر ومعانيها على موقع شبكة موزيلا للمطورين.

وإذا أردت دروسًا أكثر في لغة HTML فإليك هذه الروابط:

• شبكة موزيلا للمطورين (MDN)، والتي تتضمن:
  • الدروس (Tutorials)
  • المرجع (Reference)
  • الأدلة (Guides)
• دروس W3Schools
• دروس Web.dev