لغة ترميز النص الفائق (HTML) هي التعليمات التي تُستخدَم لهيكلة صفحة الويب ومحتواها. فعلى سبيل المثال، يمكن، باستخدام هذه اللغة، بناء صفحة تحوي مجموعة من النصوص، وقائمة نقطية، أو تحوي صور و بعض جداول البيانات. كما يشير العنوان، ستزودك هذه المقالة بالمفاهيم الأساسيّة حول هذه اللغة وخواصها.

ما هي لغة ترميز النص الفائق؟

لغة ترميز النص الفائق هي ليست لغة برمجيّة بل لغة وصفيّة (markup language) تعمل على وصف هيكلة محتويات صفحات الويب. تتألف لغة ترميز النص الفائق من مجموعة من العناصر (elements) تُستخدَم لاحتواء الأجزاء المختلفة من المحتوى لتجعله يظهر بطريقة معينة. فيمكن استخدام الوسوم المغلقة (enclosing tage)، مثلاً، لإضافة رابط تشعبي لكلمة أو لصورة يشير لموقع آخر، كما يمكن استخدامها لجعل الكلام مائل أو لتصغير الخط وتكبيره. لنأخذ  النص التالي كمثال:

قطتي شديدة الجمال

يمكننا وصف هذا النص على أنه فقرة (paragraph) عن طريق تضمينه باستخدام وسم الفقرة التالي:

<p>قطتي شديدة الجمال</p>

تشريح عنصر لغة ترميز النص الفائق

دعنا نستكشف عنصر الفقرة هذا قليلاً بعد:

الأجزاء الرئيسية من عنصرنا هي:

  1. وسم الفتح: يتألف من اسم العنصر (في حالتنا p)، محاطاً بقوس مفتوح وآخر مغلق. يحدد هذا المكوِّن بداية العنصر، أو بداية التأثير الذي يُضفيه (في حالتنا بداية الفقرة).
  2. وسم الإغلاق: مشابه لسابقه، ما عدا أنَّه يتضمن مائلة أماميّة (/) قبل اسم العنصر. يحدد هذا المكوِّن نهاية العنصر (في حالتنا نهاية الفقرة). يُعد نسيان وضع وسم الإغلاق أحد الأخطاء الشائعة التي يقع بها المبتدئون والتي تؤدي إلى مشاكل مزعجة.
  3. المحتوى: يُمثِّل هذا المكوِّن محتوى العنصر (في حالتنا نص الفقرة).
  4. العنصر: هو الكيان ككل المؤلَّف من وسم الفتح، ووسم الإغلاق، ويتوسطه محتواه.

قد يحتوي العنصر أيضاً على بعض السِمات (attributes)، والتي تبدو كشيء من هذا القبيل:

رسم توضيحي يُشرِّح الوسم عندما يمتلك خاصيّة

تحتوي السِمات على معلومات إضافية حول العنصر لا تظهر في المحتوى الفعلي. في حالتنا، يُعد class اسم السِمَة و editor-note قيمتها. السِمَة class تسمح لك بأن تعطي العنصر مُعرِّف يُمكِن استخدامه لاحقاً للإشارة للعنصر لإعطائه تنسيق معين وأشياء أخرى.

ينبغي أن تكون للسِمَة المكوِّنات التالية دوماً:

  1. مسافة بينها وبين اسم العنصر (أو السِمَة التي تسبقها في حال امتلاك العنصر أكثر من سِمَة).
  2. اسم السِمَة متبوعاً بإشارة يساوي.
  3. علامتي تنصيص تُحيط بقيمة السِمَة.

العناصر المتداخلة

يمكنك وضع عنصر بداخل عنصر آخر أيضاً، يدعى هذا النمط بالتداخل (nesting). إذا أردنا التأكيد على جمال قطتنا، مثلاً، يمكننا إحاطة الكلمة "شديدة" بالعنصر <strong>، كالتالي:

<p>قطتي <strong>شديدة</strong> الجمال.</p>

احرص على إنشاء تداخل صحيح بين عناصرك: في المثال أعلاه قمنا بفتح العنصر <p> أولاً، وبعدها العنصر <strong>، وبالتالي علينا إغلاق العنصر <strong> ويليه الآخر. فالشكل التالي ليس صحيحاً:

<p>My cat is <strong>very grumpy.</p></strong>

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

العناصر الفارغة

بعض العناصر لا يوجد فيها محتوىً. تُدعى تلك العناصر بالعناصر الفارغة. خذ العنصر <img> الموجود في شيفرة المقالة هذه التي تقرأها على سبيل المثال:

<img src="images/firefox-icon.png" alt="My test image">

يحتوي هذا العنصر على خاصيتيّن، ولكن، إن لاحظت، لا يوجد وسم الإغلاق <img/>، ولا يوجد محتوىً بداخل العنصر. هذا بسبب أنَّ عنصر الصورة لا يحيط بمحتوىً كي يؤثر عليه، فهدفه ببساطة تضمين صورة في الصفحة وحسب.

تشريح وثيقة لغة ترميز النص الفائق

لحد الآن قمنا بتغطية بعض العناصر الفردية الأساسية في هذه اللغة، ولكن تلك العناصر ليست بتلك الفائدة لوحدها. الآن سنأخذ نظرة حول كيف يمكن للعناصر الفردية أن تنمزج معاً لتشكل صفحة ويب متكاملة. دعنا نعاود رؤية الشفرة البرمجية التي وضعنها في مثالنا عن الملف index.html (الذي استخدمناه في مقالة التعامل مع الملفات):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

في هذا المثال لدينا:

  • التعليمة <!DOCTYPE html>. تحدد هذه التعليمة نوع الوثيقة. في فترة سابقة من الزمن، عندما كانت لغة ترميز النص السابق تقنية يافعة (في حوالي 1991/2)، كان المقصود من doctypes أن تكون بمثابة روابط لمجموعة من القواعد التي يجب على وثائق لغة ترميز النص الفائق أن تتبعها لتعتبر صالحة. ولكن مع مرور الزمن، وفي هذه الأيام تحديداً، لا أحد يهتم حقاً حيال هذه التعليمة بعد الآن، فهي مجرد تحفة أثرية كانت تُضمَّن في كل شيء ليعمل بشكل صحيح. هذا كل ما نريد منك أن تعرفه حالياً.
  • التعليمة <html></html>. يحيط هذا العنصر بجميع محتويات الصفحة، ويعرف باسم "العنصر الجذر".
  • التعليمة <head></head>. يعمل هذا العنصر كحاوي لجميع الأشياء التي تريد تضمينها في صفحتك والتي لا تعد محتوىً تريد إظهاره لزوار موقعك. هذا يتضمن الأشياء مثل الكلمات المفتاحية ووصف الصفحة الذي ترغب في إظهاره في نتائج البحث، وشيفرة صفحات الأنماط الانسايبية لتنسيق المحتوى، والإعلان عن نوع ترميز النص، والكثير من الأمور الأخرى.
  • التعليمة <body></body>. يحتوي هذا العنصر على محتوى الذي تريد إظهاره لزوارك، سواءً كان نصاً، أو صورة، أو فيديو، أو لعبة، أو ملف صوتي، أو أياً كان.
  • التعليمة <"meta charset="utf-8>. يحدد هذا العنصر الترميز الذي تستخدمه صفحتك، والذي هو في مثالنا الترميز UTF-8. يتضمن نوع الترميز هذا معظم المحارف والرموز من الغالبية العظمة من اللغات البشرية المكتوبة. الآن يمكن التعامل مع أي محتوى نصي تقوم بوضعه. عليك أن تلتزم دائماً بتعريف هذا العنصر، فهو يساعد على تجاوز العديد من المشكلات في وقت لاحق.
  • التعليمة <title></title>. يقوم هذا العنصر بتحديد عنوان صفحتك، والذي هو العنوان الذي يظهر في نافذة المتصفح التي يتم تحميل الصفحة فيها. كما يستخدم أيضاً لوصف الصفحة عندما تقوم بإضافتها للمفضلة.

الصور

دعنا نوجه إنتباهنا إلى العنصر <img> مجدداً:

<img src="images/firefox-icon.png" alt="My test image">

كما قلنا سابقاً، يقوم هذا العنصر بتضمين صورة في صفحتنا في موضع مُعين. يتم تحديد الصورة باستخدام السِمَة src، والتي تأخذ مسار الصورة كقيمة.

كما قمنا أيضاً بإضافة السِمَة alt. تقوم هذه السِمَة بإضافة وصف للصورة للمستخدمين الذين لايمكنهم رؤية الصورة، وقد يكون هذا بسبب:

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

النص البديل (alt text) هو "نص وصفي". النص البديل الذي عليك كتابته يجب أن يوفر للقارئ معلومات كافية ليصبح لديه فكرة جيدة عما تعنيه الصورة. في هذا المثال، النص البديل الذي استخدمناه "My test image" ليس جيداً على الإطلاق. يمكننا استخدام نص بديل أفضل منه بكثير يعبر عن شعار فايرفوكس خاصتنا وهو "The Firefox logo: a flamin fox surrounding the Earth" ("شعار فايرفوكس: ثعلب مُشتعِل يحيط بِكُرَة أرضيّة"، والذي هو، كما ترى، وصف دقيق للصورة).

حاول التفكير ببعض النصوص البديلة الأفضل لصورك.

ملاحظة: اعثر على المزيد حول الإتاحة في مقالة الإتاحة على شبكتنا.

التعامل مع النصوص

في هذا القسم سنغطي بعضاً من العناصر الأساسية في لغة ترميز النص الفائق التي نستخدمها للتعامل مع المحتويات النصيّة.

العناوين

تتيح لك عناصر العنونة (heading elements) القدرة على تحديد جزء معين من النص على أنَّه عنوان رئيسي - أو فرعي - من محتواك. فكما يملك الكتاب عنوان رئيسي، وعناوين رئيسية وفرعية للفصول، تملك وثيقة لغة ترميز النص الفائق هذه الخاصية أيضاً. تحتوي لغة ترميز النص الفائق على ست مستويات عنونة، تبدأ من <h1> إلى <h6>، على الرغم من أنك لن تستخدم عادةً أكثر من ثلاث أو أربع مستويات:

<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>

والآن حاول أن تضيف عنوان مناسب لصفتحك أعلى العنصر <img>.

الفقرات

كما شرحنا أعلاه، تقوم العناصر <p> باحتواء فقرات من النص. سنستخدم هذا العنصر بشكل متكرر عندما سنضيف محتويات نصيّة عاديّة:

<p>This is a single paragraph</p>

قم بإضافة بعض الفقرات أسفل العنصر <img> وشاهد ماذا سيحدث.

القوائم

تستخدم القوائم في الكثير من مواقع الويب، وتملك لغة ترميز النص الفائق عناصر خاصة لذلك. دائماً ما تحوي القوائم عنصرين على الأقل. أكثر أنواع القوائم شيوعاً هي القوائم المرتبة والغير مرتبة:

  1. تُستخدَم القوائم الغير مرتبة (unordered lists) مع القوائم التي لايكون فيها الترتيب أمراً مهماً، كقوائم التسوُّق مثلاً. تُحاط تلك القوائم بالعنصر <ul>.
  2. تُستخدَم القوائم المرتبة (ordered lists) مع القوائم التي يكون فيها الترتيب أمراً مهماً، كقوائم وصفات الطعام. تُحاط تلك القوائم بالعنصر <ol>.

كل عنصر من القائمة يوضع داخل العنصر <li> (والذي هو اختصار لـ list item).

على سبيل المثال، إذا أردنا تحويل جزء من هذه الفقرة إلى قائمة كالتالية:

<p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p>

يجب علينا تعديل الشفرة إلى الشكل الآتي:

<p>At Mozilla, we’re a global community of</p>
    
<ul> 
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>

<p>working together ... </p>

حاول إضافة قائمة مرتبة أو غير مرتبة إلى مثال صفحتك.

الروابط

تُعَد الروابط عناصر مهمة للغايّة، فهي ما تجعل من الويب ويب! يتم استخدام العنصر <a> لإضافة الروبط. الحرف "a" هو اختصار للكلمة الإنجليزيّة "anchor" (مرساة). لتحويل نص في فقرتك إلى رابط عليك اتباع الخطوات التالية:

  1. اختر نصاً ما. لقد اخترنا النص "Mozilla Manifesto" لمثالنا هذا.
  2. قم بإحاطة النص بالعنصر <a>، كما أدناه:
    <a>Mozilla Manifesto</a>
  3.  أضف السِمَة href للعنصر <a>، كما أدناه:
    <a href="">Mozilla Manifesto</a>
  4. قم بملء قيمة السِمَة href بعنوان الويب الذي تريد أن تفتحه من خلال الرابط، كما أدناه:
    <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>

قد تحصل على نتائج غير متوقعة إذا نسيت وضع https:// أو http://. يسمى هذا الجزء الموجود ببداية عنوان الويب بالبروتوكول. بعد الإنتهاء من صنع الرابط قم بالضغط عليه لتتأكد أنه يرسلك حيثما أردت.

الكلمة href قد تبدو خيار غريب لاسم السِمَة للوهلة الأولى. إذا كنت تواجه مشكلة في تذكر اسم السمة تلك، حاول أن تتذكر أنها إختصار لـ hypertext reference (مرجع نص تشعبي).

جرِّب إضافة رابط لصفحتك كما تعلمت.

الخاتمة

إذا كنت قد تابعت المقالة من البداية بحذافيرها ينبغي في النهاية على صفحة مماثلة للصورة أدناه (يمكنك رؤيتها أيضاً من هنا):

A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text

إذا واجهتك مشاكل يمكنك دائماً مقارنة عملك مع الشفرة المصدرية خاصتنا على جيتهاب.

في هذه المقالة لم نناقش سوى أمور سطحية في لغة ترميز النص الفائق. يمكنك مطالعة المزيد في قسم تعلم لغة ترميز النص الفائق على شبكتنا.

في هذه الوحدة أيضاً

Document Tags and Contributors

الوسوم: 
المساهمون في هذه الصفحة: ahmadnourallah, jwhitlock
آخر مَن حدّثها: ahmadnourallah,