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

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

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

My cat is very grumpy

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

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

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

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

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

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

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

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

السمة يجب أن تملك دائماً:

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

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

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

<p>My cat is <strong>very</strong> grumpy.</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> — عنصر <html>. هذا العنصر يحيط بجميع المحتويات في كامل الصفحة، ويعرف أحياناً بالعنصر الجذر.
  • التعليمة <head></head> العنصر <head>. هذا العنصر يعمل كحاوي لجميع الأشياء التي تريد تضمينها في صفحتك والتي لا تعد المحتوى الذي تريد إظهاره لزوار الصفحة. هذا يتضمن الأشياء مثل الكلمات المفتاحية ووصف الصفحة الذي ترغب في إظهاره في نتائج البحث، ومحتوى السي إس إس لتنسيق محتوى صفحتنا، والإعلان عن نوع الترميز، والكثير.
  • التعليمة <body></body> — العنصر <body>. هذا العنصر يحتوي المحتوى بكامله الذي تريد إظهاره لزوارك، سواءً كان نصاً، أو صورة، أو فيديو، أو لعبة، أو ملف صوتي، أو أياً كان.
  • التعليمة <meta charset="utf-8"> — هذا العنصر يحدد مجموعة الرموز التي يجب على وثيقتك أن تستخدمها، في مثالنا استخدمنا الترميز UTF-8، الذين يتضمن معظم الرموز من الغالبية العظمة من اللغات البشرية المكتوبة. الآن يمكن التعامل مع أي محتوى نصي تقوم بوضعه. لايوجد أي سبب يمنع من تعريف هذا العنصر، فهو يساعد على تجاوز بعض المشكلات في وقت لاحق.
  • التعليمة <title></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."

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

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

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

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

العناوين

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

<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. تكون القوائم الغير مرتبة للقوائم التي لايكون فيها الترتيب أمراً مهماً، كقوائم التسوق مثلاً. تحاط تلك القوائم بالعنصر <ul>.
  2. تكون القوائم المرتبة للقوائم التي يكون فيها الترتيب أمراً مهماً، كقوائم الوصفات. تحاط تلك القوائم بالعنصر <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

 Contributors to this page: ahmadnourallah
 Last updated by: ahmadnourallah,