علامات متعلقة بالنص

تشرح هذه المقالة العلامات المتعلقة بالنص.۔

يتم تقسيم الشرح إلى علامات دلالية وغير دلالية.۔

YouTube Video

إنشاء CSS للمعاينة

  1body {
  2    font-family: Arial, sans-serif;
  3    line-height: 1.6;
  4    margin: 20px 20px 20px 20px;
  5    background-color: #f4f4f9;
  6    color: #333;
  7}
  8
  9header h1 {
 10    font-size: 24px;
 11    color: #333;
 12    text-align: center;
 13    margin-bottom: 20px;
 14}
 15
 16h2, h3 {
 17    color: #555;
 18}
 19
 20h2 {
 21    font-size: 20px;
 22    border-bottom: 2px solid #ccc;
 23    padding-bottom: 5px;
 24}
 25
 26h3 {
 27    font-size: 18px;
 28    margin-top: 20px;
 29}
 30
 31p, pre {
 32    margin: 10px 0;
 33    padding: 0;
 34}
 35
 36ul, ol, dl, menu {
 37    margin: 0;
 38}
 39
 40pre {
 41    background-color: #f0f0f0;
 42    border-left: 4px solid #ccc;
 43    padding: 10px;
 44    overflow-x: auto;
 45}
 46
 47p.sample, .sample {
 48    background-color: #e7f4e9;
 49    padding: 10px;
 50    border-left: 4px solid #7bbd82;
 51    color: #333;
 52}
 53
 54p.sample-error, .sample-error {
 55    background-color: #f4e7e7;
 56    padding: 10px;
 57    border-left: 4px solid #bd827b;
 58    color: #333;
 59}
 60
 61p.sample-warn, .sample-warn {
 62    background-color: #f4f1e7;
 63    padding: 10px;
 64    border-left: 4px solid #bda97b;
 65    color: #333;
 66}
 67
 68code {
 69    padding: 2px 4px;
 70    border-radius: 4px;
 71    font-family: monospace;
 72}
 73
 74span {
 75    font-weight: bold;
 76}
 77
 78main {
 79    padding-bottom: 100px;
 80}
 81
 82article {
 83    background-color: white;
 84    padding: 20px;
 85    margin-bottom: 10px;
 86    border-radius: 8px;
 87    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 88}
 89
 90section {
 91    margin-bottom: 20px;
 92}
 93
 94table {
 95    width: 100%;
 96    border-collapse: collapse;
 97}
 98
 99th, td {
100    border: 1px solid #ddd;
101}

علامات أساسية متعلقة بالنص

علامة <div>

1<div>This is a division of content.</div>

• علامة <div> هي عنصر على مستوى الكتلة يُستخدم لإنشاء تقسيمات داخل HTML.۔

• علامة <div> هي علامة غير دلالية.۔

  عند التركيز على HTML الدلالي، يمكن استخدام العلامات ذات المعنى (مثل <section>, <article>).۔ وهذا يساعد محركات البحث وقارئات الشاشة على فهم محتوى الصفحة بشكل أفضل.۔

• بدمجها مع CSS و JavaScript، يمكنك التحكم في مظهر وسلوك الصفحة.۔

  تُستخدم علامة <div> لتجميع المحتوى في الصفحة كعنصر على مستوى الكتلة.۔ يستخدم بشكل رئيسي بالاشتراك مع CSS وJavaScript لضبط تخطيط الصفحة، وتنسيقها، ومعالجة العناصر.۔

علامة <p>

1<p>This is a paragraph of text.</p>

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

علامة <a>

1<a href="https://codesparklab.com" title="Code Spark Lab">Go to codesparklab.com</a>

• تُستخدم علامة <a> لإنشاء الروابط.۔

  تُستخدم علامة <a> لإنشاء روابط إلى صفحات أخرى أو مواقع خارجية أو ملفات.۔ يُستخدم السمة href لتحديد وجهة الرابط.۔

• يمكن استخدامها لروابط النص أو الصور، واستخدام target="_blank" سيفتح الرابط في تبويب جديد.۔

• يُستخدم السمة target لتحديد كيفية عرض الوجهة المرتبطة.۔

  • _self (القيمة الافتراضية): يفتح الرابط في النافذة أو التبويب الحالي.۔
  • _blank: يفتح الرابط في نافذة أو تبويب جديد.۔
  • _parent: يفتح الرابط في الإطار الرئيسي.۔
  • _top: يفتح الرابط في النافذة الكاملة، متجاهلاً أي إطارات.۔

• تُستخدم السمة title لعرض تلميح على الرابط.۔ عندما يحوم المستخدم فوق الرابط، يتم عرض العنوان المحدد.۔

1<a href="#section1">Go to Section 1</a>
2
3<h2 id="section1">Section 1</h2>
4<p>This is Section 1 content.</p>

• يُستخدم أيضًا الوسم <a> للقفز إلى مواقع محددة داخل نفس الصفحة.۔ لتحقيق ذلك، تقوم بتعيين خاصية id على العنصر المستهدف وتستخدم هذا id في خاصية href للرابط.۔

علامة <span>

1Here is some <span style="color: red;">highlighted text

• علامة <span> هي عنصر مضمّن.

  الوسم <span> هو عنصر داخلي، لذلك لا يكسر السطر عند استخدامه بين النصوص أو الروابط أو الصور أو العناصر الداخلية الأخرى.۔ يندمج بشكل طبيعي في إطار الصفحة.۔

• يمكنك تطبيق أنماط محددة بشكل جزئي.

  عندما تريد تطبيق نمط على جزء فقط من المستند، يمكنك استخدام الوسم <span> لتعيين فئة CSS أو معرف وتطبيق الأنماط على نطاق محدد.۔

• علامة <span> هي عنصر غير دلالي.

  بما أن الوسم <span> ليس له معنى محدد أو دور هيكلي، فإنه يُستخدم فقط لأغراض التنسيق أو البرمجة.۔ عندما تكون هناك حاجة للتأكيد الدلالي، من الأنسب استخدام الوسوم الدلالية مثل <strong> أو <em>، والتي سيتم تقديمها لاحقًا.۔

علامة <br>

1Here is some text with a <br> line break.

• علامة <br> هي عنصر مضمّن.۔

  بما أن الوسم <br> هو عنصر داخلي، فإنه لا يشغل الكتلة بأكملها، ويُنشئ فاصل سطر في النص حيث يتم وضعه.۔ بينما يضيف الوسم <p> هامشًا أعلى وأسفل لفصل الفقرات، يخلق الوسم <br> فاصل سطر بدون إضافة أي هامش.۔

• إنها علامة تغلق من ذاتها، لذلك ليست هناك حاجة لعلامة إغلاق (</br>).

• من الأفضل تجنب استخدامه بشكل مفرط، واستخدام الوسوم <p> أو CSS للفواصل بين الفقرات أو لتعديلات التخطيط.۔

  عند تنظيم النص في فقرات، من الأكثر ملاءمة استخدام الوسم <p>.۔ يوصى أيضًا باستخدام CSS لتعديلات التخطيط.۔ على سبيل المثال، يمكن لخاصية white-space في CSS عرض فواصل الأسطر والمسافات في النص كما هي.۔

علامة <hr>

1This is some text.<hr>This is another section of text.

• الوسم <hr> هو عنصر على مستوى الكتلة.۔

  يُستخدم الوسم <hr> لإدراج خط أفقي لفصل أقسام المحتوى بصريًا.۔ يمكن أيضًا استخدامه للإشارة إلى فاصل موضعي، مما يعطيه معنى بناءً على السياق.۔

• إنه وسم مغلق ذاتيًا، لذا فإن الوسم الختامي (</hr>) غير ضروري.۔

• يمكنك تخصيص لونه وطوله وسماكته باستخدام CSS.۔

العلامات المتعلقة بالنص الدلالي

من علامة <h1> إلى علامة <h6>

1<h1>Main Heading</h1>
2<h2>Subheading</h2>
3<h3>Sub-subheading</h3>

• الوسوم <h1> إلى <h6> هي وسوم عناوين تُستخدم في HTML.۔

  يمثل الوسم <h1> العنوان الأكثر أهمية ويُستخدم عادةً كعنوان رئيسي للصفحة بأكملها.۔ من الشائع استخدام علامة <h1> واحدة فقط لكل مستند HTML.۔

  تمثل علامة <h2> العنوان الأكثر أهمية بعد <h1> وتُستخدم لعناوين الأقسام أو الفصول داخل الصفحة.۔

  تمثل علامة <h3> العناوين الفرعية أو الأقسام الأصغر تحت <h2>.۔

  تمثل علامات <h4>, <h5>, و <h6> العناوين ذات المستوى الأدنى، وتستخدم للعناصر الأكثر تفصيلاً أو عناوين الأقسام.۔

• تشير علامات العناوين إلى أهمية النص وتساعد في إنشاء الهيكل المنطقي للصفحة.۔ تستخدم محركات البحث أيضًا علامات العناوين لفهم محتوى الصفحة.۔

علامة <strong>

1<strong>Important text</strong> to emphasize significance.

• تُستخدم علامة <strong> في HTML للإشارة إلى أهمية أو تأكيد النص وعادة ما تُعرض بخط عريض.۔

• علامة <strong> هي علامة دلالية، وهدفها الأساسي هو إضافة معنى.۔

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

علامة <em>

1<em>Emphasized text</em> for italics and emphasis.

• تُستخدم علامة <em> في HTML للإشارة إلى الأهمية أو التأكيد في النص وعادة ما تُعرض بخط مائل.۔

• علامة <em> هي علامة دلالية، والغرض الرئيسي منها هو توفير معنى.۔

  مثل علامة <strong>, يمكنها الإشارة إلى أن النص ذو أهمية سياقية.۔ عادة ما تُعرض علامة <strong> بخط عريض، بينما تُعرض علامة <em> بخط مائل.۔ كلتاهما معروفة لدى القارئات الشاشة ومحركات البحث للتأكيد الدلالي، ولكن <strong> تشير إلى أهمية أقوى بينما <em> تعبر عن تأكيد عاطفي.۔ بالإضافة إلى ذلك، فإن علامة <i>, التي ستُقدَّم لاحقًا، تقوم فقط بجعل النص بخط مائل ولا توفر تأكيدًا دلاليًا.۔

علامة <mark>

1<mark>Highlighted text</mark> for attention.

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

علامة <del>

1<del>Deleted text</del> shows removed content.

• تُستخدم علامة <del> للإشارة إلى أن النص قد تم حذفه أو تعديله.۔ هذه العلامة مفيدة لإظهار تاريخ التغييرات أو التعديلات في النص.۔

• عادةً ما يتم عرض النص المحاط بعلامة <del> عبر خط يتوسطه.۔ يشير هذا بصريًا إلى المحتوى المحذوف.۔

  يتم التعرف على النص المحاط بعلامة <del> على أنه محذوف بواسطة برامج قراءة الشاشة.۔ يسمح هذا بفهم المحتوى الذي لا يظهر بصريًا.۔

علامة <ins>

1<ins>Inserted text</ins> shows added content.

• تُستخدم علامة <ins> للإشارة إلى النص المضاف حديثًا أو المعدل في الوثيقة.۔ تعتبر هذه العلامة مفيدة لعرض تاريخ الإضافات أو التعديلات النصية.۔

• في المتصفحات، يُعرض النص المحاط بعلامة <ins> عادةً بخط سفلي.۔ يشير هذا بصريًا إلى المحتوى المضاف.۔

  يتم التعرف على النص المحاط بعلامة <ins> بشكل جديد كإضافة بواسطة برامج قراءة الشاشة.۔ يسمح هذا بفهم المحتوى الذي لا يظهر بصريًا.۔

علامة <abbr>

1<abbr title="World Health Organization">WHO</abbr>

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

العلامات المتعلقة بزخرفة النص

علامة <b>

1<b>Bold text</b> without semantic emphasis.

• علامة <b> هي عنصر مضمن يُستخدم لتعريض النص.۔ مثل العلامات الأخرى التي سنتعرف عليها، تُستخدم للتأكيد البصري ولكن ليس للتأكيد الدلالي.۔

علامة <i>

1<i>Italic text</i> for style.

• علامة <i> هي عنصر مضمن يُستخدم لكتابة النص مائلاً.۔

علامة <u>

1<u>Underlined text</u> for decoration.

• علامة <u> هي عنصر مضمن يُستخدم لتسطير النص.۔

علامة <small>

1<small>This is small text.</small>

• علامة <small> هي عنصر داخلي يستخدم لعرض النص بحجم أصغر.۔ تُستخدم عادةً لتمثيل معلومات إضافية أو شروحات ثانوية بالنسبة للمحتوى الرئيسي.۔

علامة <s>

1<s>Strikethrough text</s>

• تعتبر علامة <s> عنصراً مضمناً يُستخدم لرسم خط شطب على النص.۔

علامة <sub>

1H<sub>2</sub>O

• علامة <sub> هي عنصر داخلي يستخدم لعرض النص بأسلوب النص السفلي.۔

علامة <sup>

1E = mc<sup>2</sup>

• علامة <sup> هي عنصر داخلي يستخدم لعرض النص بأسلوب النص المرتفع.۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video