الوسوم الخاصة في تنسيق العناصر في HTML

0 76

في هذا المقال سوف نشرح الوسوم الخاصة في تنسيق العناصر في HTML  التي يمكنك من خلالها بتنسيق العنصر من حيث التحكم في شكل العنصر مثل جعل العنصر صغير الحجم او كبير او ذو خط سميك او خط مائل .الخ

وبسبب كثرة الوسوم الخاصة بتنسيق العنصر فسوف أقوم بتقسيم الوسوم الى جزئين:

  • الوسوم الخاصة بتنسيق العنصر مع الشرح بأمثلة.
  • اهم الوسوم الخاصة بتنسيق العنصر

html sub tag

<sub> </sub>

Sub هي اختصار ل subscript وتعنى نص منخفض
وأكثر استخداماتها عند كتابة الصيغ الكيمائية مثل ho2
مثال :

<p> ho<sub>2</sub> </p>

html sup tag

<sup> </sup>

Sub هي اختصار ل superscript وتعنى نص مُرتفع
واكثر استخداماتها عند كتابة الاس في الرياضيات مثل 43
مثال :

<p> 4<sup>3</sup> </p>

html address tag

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

<address>
  Written by coder <br>
  Visit us at:tech.coder24 <br>
  <br>
 UAS
</address>

html bdi tag

<bdi> </bdi>

Bi اختصار ل Bi-Directional Isolation ومعناها انها تقوم ب تغيير اتجاه المحتوى الذى بداخلها
وتستخدم كثيرا عند كتابة اللغة العربية والإنجليزية في نفس الصفحة لان اللغة العربية تُكتب من اليمين لليسار ولكن اللغة الإنجليزية تُكتب من اليسار الى اليمين
مثال:


<p> على : 90 % </p>
<p> <bdi>على</bdi>: 90 % </p>

الافضل تجربها لتفهمها اكثر

html bdo tag

<bdo> </bdo>

Bdo اختصار ل Bi-Directional Override و معناها انها تقوم ب عكس اتجاه النص وذلك باستخدام attribute يُسمى dir وهو اختصار ل direction وله قيمتان هما:

  • ltr : وهى اختصار ل left to right وتعنى عكس النص من اليسار الى اليمين
  • rtl : وهى اختصار ل right to left وتعنى عكس النص من اليمين الى اليسار

مثال:

<p>
  <bdo dir="rtl">tech</bdo> VS coder
</p>

html cite tag

<cite> </cite>

cite ترجمتها: يستشهد بقول شخص
والمُحتوى بداخل هذا العنصر يكون عبارة عن عمل قام به شخص مثل اسم كتاب او اغنية او فيلم او لوحة فنية او نحت
مثال:

<p>
  <cite>Rich Dad Poor Dad </cite>
  is a 2000 book written by Robert Kiyosaki and Sharon Lechter. 
</p>

html pre tag

<pre> </pre>

Pre هي اختصار ل preformatted وتعنى ان العنصر تم تنسيقة مسبقا.
ويُستخدم كثيرا مع وسم <code> لأننا عندما نقوم بعرض كود على الموقع ك كود نقوم بتنسيقة مسبقا
مثال :

<!-- python code -->
<pre>
  <code> 
  if b > a:
    print("b is greater than a")
  else:
    print("a is greater than b")
  </code>
</pre>

html Kbd tag

<Kbd> </Kbd>

Kbd اختصار ل Keyboard
ونستخدمها عندما نريد كتابة امر من اومر الكيبورد keyboard input يحتاج الى شرح او توضيح مثل ctrl+s وبالتالي ctrl+Z يتم وضعها داخل هذا العنصر.
مثال:

<p>
  Most applications let you press <kbd>Ctrl+Z</kbd> to save the current document
</p>

html samp tag

<samp> </samp>

Samp هي اختصار ل sample وترجمتها عينه او نموذج.
وتُستخدم لعرض عينه من مُخرجات برنامج كمبيوتر Sample output from a computer program
مثال على ذلك أحيانا نواجه مشكله عند فتح الكمبيوتر فتظهر هذه الرسالة Press F1 to continue؛ هذا المُحتوى يتم وضعة داخل هذا العنصر
مثال:

<p>
  The <samp> press F1 to continue </samp> error is 
  commonly caused by a device being added to the server and not enabled
</p>

html s tag

<s> </s>

s اختصار ل strikethrough وترجمتها يتوسطه خط
والمُحتوى بداخل هذا العنصر كان صحيحا ولكن في الماضي؛ والان هذه المعلومات بداخل هذا العنصر لم تعد صحيحه.
ويتم وضع خط في منتصف المُحتوى الذي بداخله.
مثال على ذلك:

<p>
  my car's color is <s> white</s> gray
</p>

html b tag

<b> </b>

b هي اختصار ل bold وتعنى سَميك وبالتالي المُحتوى داخل هذا العنصر يكون بخط سميك عن بقية النص .

html strong tag

<strong> </strong>

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

html i tag

<i> </i>


i هي اختصار ل italic وتعنى مائل وبالتالي المُحتوى داخل هذا العنصر يكون بخط مائل عن بقية النص

html em tag

<em> </em>

أيضا المُحتوى بداخل هذا العنصر يكون ذو خط مائل بالإضافة الى ان المُحتوى داخل هذا العنصر يُعتبر محتوى مهم عن باقي النص

html mark tag

<mark> </mark>

المُحتوى داخل هذا العنصر يكون ذو خلفية مُميزة وغالبا تكون صفراء ويُمكن تغيير لونها ب اكواد لغة CSS

هذه هي اكثر الوسوم استخدما في تنسيق العناصر في HTML

اذا كنت تهتم في برمجة الويب يمكنك الانضمام الى قناتنا في التلكرام

اترك رد

لن يتم نشر عنوان بريدك الإلكتروني.

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