رموز HTML الأساسية التي يحتاج معرفتها كل مستخدم ووردبريس

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

ما هي لغة HTML؟

يَرمز HTML إلى اختصار لغة ترميز النص الفائق، وهذا يعني أنها لا تنتمي إلى لغات البرمجة. لا تنفِّذ HTML أوامر برمجية في الحاسوب باستخدام برنامجٍ نصي، بل تضع علامات على النص الموجود في صفحة الإنترنت، مثل: مائل، غامق، المحاذاة، الحجم، وغير ذلك. تمنحك HTML أيضًا القدرة على تضمين الصور والروابط. ومع آخر إصدار HTML5، بات عرض النص والوسائط يتمّ بطرائق جديدة ومثيرة.

تُضمّن رموز HTML داخل وسوم، ومن السهل جدًا قراءتها. قد تبدو صفحة HTML البسيطة كما يلي:

<html dir="rtl" lang="ar">
  <head>
    <title>يكتب عنوان الصفحة هنا.</title>
  </head>
  <body>
    <h1>هذا عنوان الصفحة الذي يراه المستخدمون</h1>
      <p>محتوى الصفحة</p>
      <p>المزيد من المحتوى</p>
      <p>المزيد من المحتوى </p>
    <h2>عنوان فرعي</h2>
      <p><img src="https://bit.ly/3OhDvUC"></p>
      <p><a href="https://academy.hsoub.com/">رابط أكاديمية حسوب</a></p>
  </body>
</html>

عند معالجة هذه الرموز داخل المتصفح، ستظهر الصفحة كما يلي:

كما ترون، HTML ليست صعبة. في الواقع، حتى لو لم ترَ أيّ رمز HTML سابقًا، فأراهنك أنك تستطيع معرفة ما تعنيه كل من هذه الوسوم من خلال السياق فقط. والآن، لنطلع على أهم رموز HTML الأكثر شيوعًا التي ستستخدمها طوال حياتك المهنية على الويب.

العريض

عندما تضع وسم <strong> حول النص، فأنت تطلب من المتصفح أن يجعل النص عريضًا. يمكنك أيضًا استخدام وسم <b> ببساطة، لكنّ استخدام وسم <strong> أكثر أمانًا؛ بسبب تفضيل جوجل ومحركات البحث الأخرى للعناصر الدلالية المشابهة له.

يمكنك جعل هذا <strong> النص عريضًا </strong> باستخدام هذا الوسم.

المائل

يُستخدم وسم <Em> للتوكيد، ويمثل أيضًا الطريقة الدلالية في HTML لاستخدام الخط المائل. كما يمكنك استخدام <i> بدلًا من ذلك.

يمكنك وضع النص <em> بخط مائل <em> باستخدام هذا الوسم.

التسطير

يُستخدم وسم <u> لتسطير النص. عامةً، لا يُستخدم التسطير بكثرة، وذلك لأن الروابط تكون مسطّرة افتراضيًا؛ مما جعل استخدام النص المسطّر العادي مرتبطًا بتجربة المستخدم السيئة، بسبب عدم قدرة المستخدمين على النقر على النص المسطّر العادي.

يمكنك <u> تسطير النص </u> باستخدام هذا الوسم.

العناوين

ربما تكون وسوم العناوين هي الوسوم الأكثر استخدامًا من بين جميع رموز HTML الأساسية. تُستخدم وسوم <h1> و<h2> و<h3> و<h4> و<h5> و<h6> لتقسيم المحتوى إلى أقسام.

احرص فقط على استخدام العناوين بترتيبٍ هرمي. تُوجِّهكَ جوجل إلى إدراج العناوين أسفل بعضها، لذا، تأكد من استخدام <h2> فقط أسفل <h1>، وليس أسفل <h3>.

على الرغم من أن معظم الصفحات ستحتوي على <h1> واحد فقط، إلا أن جوجل لن تعاقبك على وجود المزيد. فقط ضع في حسبانك أن استخدام <h1> مرةً أخرى سيعيد تعيين التداخل في الصفحة (أو على الأقل في قسمٍ معيّن من الصفحة).

<h2> إن عنوان H2 هو العنوان الأكثر استخدامًا </h2>

لاحظ أن أغلب العناوين الواردة في هذا المقال هي H2.

الصور

يُعَد إدراج الصور أحد أكثر الأشياء المفيدة التي يمكنك فعلها باستخدام لغة HTML الترميزية، فقد أَخرجت هذه الميزة الإنترنت من أساليب عرض المحتوى النمطية إلى أخرى أكثر حيوية، كالتي نراها اليوم؛ وكل ما عليك فعله هو الحصول على عنوان URL للصورة التي تريدها، واستخدام وسم <img src> (الذي يشير اختصارًا إلى عبارة مصدر الصورة Image Source) مرةً واحدةً فقط، كما يلي:

<img src="https://bit.ly/3OhDvUC" alt="صورة شعار أكاديمية حسوب">

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

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

الروابط

وصلنا إلى الروابط التي تحمل الكثير من الخاصيّات. أبسط صور استخدام الروابط هي من خلال الوسم <a href>. يشير <a> إلى أن هذا النص رابط، ويعني <href> حرفيًا إشارة النص التشعبي (العنوان الإلكتروني URL) إلى الموقع الذي يربط معه.

<a href="https://academy.hsoub.com/">رابط أكاديمية حسوب، وهذا هو النص الذي سيكون قابلًا للنقر عليه</a>

يُغلق وسم الرابط ببساطة باستخدام وسم </a>، ويمكنك استخدام أي نص تريده بينهما. سيكون هذا هو نفسه الرابط القابل للنقر، ويسمى نص الرابط Anchor Text.

يمكنك أيضًا إدراج وسم الصورة داخل وسم الرابط؛ لجعل الصورة قابلة للنقر عليها، وفتح رابط موقع من خلال ذلك.

<a href="https://academy.hsoub.com/"><img src="https://bit.ly/3OhDvUC" alt="صورة شعار أكاديمية حسوب">

نص يتوسطه خط

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

يمكنك استخدام وسم <del> من أجل كتابة نص يتوسط خط. وبالنسبة لبعض الأشخاص، يُعد هذا الوسم معروفًا وكثير الاستخدام، بينما قد لا يستخدمه البعض الآخر أبدًا. بغض النظر عن ذلك، من الجيد معرفته بما أنه سهل التذكر.

تستطيع استخدام هذا الوسم من أجل إنشاء <del> نص يتوسطه خط </del> في لغة HTML.

القوائم

القوائم هي جزء رئيسي آخر من المحتوى على الويب هذه الأيام، فهي لا تمنحك بعض المساحة الفارغة من النص، وتقسّمه إلى أجزاءٍ صغيرة وحسب، بل تتيح لك أيضًا تنظيم أفكارك إلى أجزاء قابلة للفهم.

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

لإنشاء القوائم، ضع حولها وسم <ul>، أو وسم <ol> للقوائم غير المرتبة أو المرتبة على التوالي، وحول كل عنصر في القائمة وسم <li>.

<ul>
<li> عنصر من قائمة غير مرتبة  </li>
<li> عنصر آخر  </li>
</ul>

<ol>
<li> عنصر من قائمة مرتبة مرقمة   </li>
<li><a href="https://academy.hsoub.com/">رابط داخل عنصر بقائمة</a></li>
<li><strong> هذا النص غامق </strong> وهذا لا </li>
</ol>

يمكنك إدخال أيّة وسوم أخرى في القوائم كما فعلنا في المثال أعلاه عند إدراج رابط ونص غامق وما إلى ذلك.

الاقتباس

ستحتاج في مرحلة ما من حياتك المهنية في الووردبريس إلى اقتباس شيءٍ ما ضمن محتواك، ولهذا الأمر يمكنك استخدام وسم <blockquote>. الصق النص الذي نسخته بين وسمي فتح وإغلاق من وسم الاقتباس، وستحصل على نصٍ مقتبس بين علامتي تنصيص.

<blockquote>سيظهر هذا النص بتصميمٍ مختلف لتمييزه على أنه نص مقتبس</blockquote>

الفقرات

يملك الووردبريس ميزةً تتعلق بالفقرات في لغة HTML الترميزية، وهي إنشاء فقرة جديدة تلقائيًا مع كل نزولٍ إلى سطرٍ جديد، مع العلم أن أنظمة إدارة المحتوى ومنشئي الصفحات لا تفعل جميعها ذلك. لذا إن كنت بحاجة إلى جعل فقرات المحتوى منفصلة عن بعضها من دون أن تظهر كمُعلّقةٍ متراصّة، فضع حول بداية ونهاية كل فقرة وسم <p>. سيعرض المتصفح كل كتلة من النص كفقرة منفصلة، بدلًا من كتلة واحدة متتابعة. وافتراضيًا، تتجاهل المتصفحات فواصل الأسطر ما لم تخبرها بخلاف ذلك.

<p>هذه فقرة أولى</p>
<p>هذه فقرة ثانية</p>

الخطوط الفاصلة والسطر الجديد

قد تحتاج إلى فواصل أخرى بين الفقرات والأقسام، ومن أجل ذلك، يمكنك استخدام وسم <hr> لفصل الفقرات عن بعضها بسطر، ووسم <br/> لنزول سطر جديد.

<hr> يُستخدم هذا الوسم لرسم خط على طول السطر الفاصل بين الفقرة والتي تليها.

أما وسم <br/>، فهو مخصصٌ لنزول سطرٍ جديد، حيث يمكنك استخدامه في منتصف فقرة <p> لنزول سطر دون الخوض في فقرة جديدة، والحفاظ على التصميم والتنظيم. إن وسم <br/> ذاتي الإغلاق، أي لا يمكن أن يحوي أيّ نصٍ داخله، ويُعرف ذلك بالشرطة المائلة في نهاية الوسم.

بالرغم من أن هدف وسمي <hr> و<br/> هو فصل النص عن بعضه، إلا أنه لا يُنصح باستخدامهما، فعندما تصبح أكثر خبرة في استخدام HTML وCSS وJavaScript، ستلاحظ أن استخدام وسم <p> أسهل في استخدام عناصر التصميم معه.

الخاتمة

إن لغة HTML الترميزية مهمة جدًا في شبكة الإنترنت، ويستخدمها الجميع بنفس الطريقة، سواء كانوا مبتدئين في تطوير الويب والتصميم، أم مخضرمين، فما زالت رموز HTML الأساسية مستخدمة في جميع المواقع. مهما كان موقعك رائعًا وذا ميزات متطورة، ستحتاج إلى معرفة كل من <href> و<strong> لحل أيّة مشكلة في الروابط، أو جعل النص غامقًا عند موضعٍ معين بسهولة.

ترجمة -وبتصرّف- للمقال How to Create a Custom WordPress User Registration Page لصاحبه B.J. Keeton.