تنسيق النص Text Formatting

تنسيق النص في لغة HTML

توفر لغة HTML العديد من الوسوم التي يمكنك استخدامها لجعل بعض النصوص على صفحات الويب تظهر بشكل مختلف عن النص العادي ، على سبيل المثال ، يمكنك استخدام الوسم <b> لجعل النص غامقًا ، الوسم <i> لجعل النص مائلًا ، الوسم <mark> لتظليل النص (highlight the text) ، والوسم <code> لعرض النص على شكل كود ، ,والوسم <ins> لتوضيح النص المدخل إلى صفحة الويب والوسم <del> لتوضيح ان النص قد تم حذفه من صفحة الويب.

يوضح المثال التالي وسوم التنسيق الأكثر استخدامًا :

مثال
تشغيل
  1. <p>This is <b>bold text</b>.</p>
  2. <p>This is <strong>strongly important text</strong>.</p>
  3. <p>This is <i>italic text</i>.</p>
  4. <p>This is <em>emphasized text</em>.</p>
  5. <p>This is <mark>highlighted text</mark>.</p>
  6. <p>This is <code>computer code</code>.</p>
  7. <p>This is <small>smaller text</small>.</p>
  8. <p>This is <sub>subscript</sub> and <sup>superscript</sup> text.</p>
  9. <p>This is <del>deleted text</del>.</p>
  10. <p>This is <ins>inserted text</ins>.</p>

بشكل افتراضي ، يظهر تأثير الوسم <strong> في المتصفح عادةً كما الوسم <b> ، بينما يظهر تأثير الوسم <em> كـما الوسم <i>. ومع ذلك ، هناك اختلاف في معنى هذه الوسوم.

الفرق بين الوسم <strong> والوسم <b>

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

مثال
تشغيل
  1. <p><strong>WARNING!</strong> Please proceed with caution.</p>
  2. <p>The concert will be held at <b>Hyde Park</b> in London.</p>

الفرق بين الوسم <em> والوسم <i>

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

مثال
تشغيل
  1. <p>Cats are <em>cute</em> animals.</p>
  2. <p>The <i>Royal Cruise</i> sailed last night.</p>
ملاحظة:

استخدم الوسمان <em> و <strong> عندما يتطلب محتوى صفحتك أن يكون لبعض الكلمات أو العبارات تأكيد أو أهمية قوية.

تنسيق الاقتباسات (Quotations)

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

مثال
تشغيل
  1. <blockquote>
  2. <p>Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.</p>
  3. <cite>— Albert Einstein</cite>
  4. </blockquote>
نصيحة:

يستخدم الوسم <cite> لوصف مرجع إلى عمل إبداعي. يجب أن يتضمن عنوان ذلك العمل أو اسم المؤلف (الأشخاص أو المنظمة) أو مرجع URL.

بالنسبة إلى الإقتباسات القصيرة المضمنة داخل النص ، يمكننا استخدام الوسم <q>. تعرض معظم متصفحات الويب محتوى العنصر <q> محاط بعلامات اقتباس زوجية كما في المثال التالي :

مثال
تشغيل
  1. <p>According to the World Health Organization (WHO):<q>Health is a state of complete physical, mental, and social well-being.</q></p>

عرض الاختصارات (Abbreviations)

الاختصار (Abbreviatio) هو مختصر لكلمة أو عبارة أو اسم.
يمكنك استخدام الوسم <abbr> للإشارة إلى اختصار. يتم استخدام السمة title داخل هذا الوسم لتوفير المصطلح الكامل قبل الإختصار ، الذي يتم عرضه بواسطة متصفحات الويب على شكل تلميح عند تمرير مؤشر الماوس فوق العنصر. لنجرب مثالاً:

مثال
تشغيل
  1. <p>The<abbr title="World Wide Web Consortium">W3C</abbr>is the main international standards organization for the<abbr title="World Wide Web">WWW or W3</abbr>. It was was founded by Tim Berners-Lee.</p>

عناوين الاتصال (Contact Addresses)

تتضمن بعض صفحات الويب عناوين شوارع أو عناوين بريدية. يتم انشاءها عن طريق الوسم <address> لتمثيل معلومات الاتصال (المادية أو الرقمية) للأشخاص أو المؤسسات.
يجب استخدام هذا الوسم بشكل مثالي لعرض معلومات الاتصال.
تعرض معظم متصفحات الويب العنوان بخط مائل. إليك مثال:

مثال
تشغيل
  1. <address>
  2. Mozilla Foundation<br>
  3. 331 E. Evelyn Avenue<br>
  4. Mountain View, CA 94041, USA
  5. </address>
« التالي السابق »