HTML

HTML Text Formatting
تنسيق النصوص بلغة HTML

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

التاريخ

30 يناير 2020

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

10206

المواضيع

12
الشروحات chevron_left HTML Text Formatting chevron_left HTML

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

</> HTML bold element
عنصر bold في لغة HTML

  • يستخدم عنصر <b> لتغيير أو تحويل النصوص من نصوص بخط عادي إلى نصوص بخط عريض في لغة HTML، وعنصر <b> هو اختصار لكلمة bold.
  • عنصر <b> هو من نوع العناصر المُتداخلة "nested elements"، له علامة بداية "open tag" وعلامة إغلاق "close tag".
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
   <h1> Make text bold </h1>
   <p> closetag is a platform to teach you <b>programing </b> language </p>
  </body>
</html>

</> HTML strong element
عنصر strong في لغة HTML

يستخدم عنصر <strong> لتغيير الخط من خط عادي إلى خط هام، وهو هام أيضًا لمحركات البحث، ويجعل الخط عريض مثل bold.

عنصر <strong> من نوع العناصر المُتداخلة "nested elements"، له علامة بداية "open tag" وعلامة إغلاق "close tag".

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
   <h1> Make text strong </h1>
   <p> closetag is a platform to teach you <strong> programing </strong> language </p>
  </body>
</html>

</> HTML Italic Element
عنصر italic في لغة HTML

  • يستخدم عنصر <i> لتغيير الخط من خط عادي إلى خط مائل، ويشير إلى كلمة italic.
  • عنصر <i> من نوع العناصر المُتداخلة "nested elements"، له علامة بداية "open tag" وعلامة إغلاق "close tag".
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
   <h1> Make text italic </h1>
   <p> closetag is a platform to teach you <i> programing </i> language <p>
  </body>
</html>

يُستخدم العنصر <i> في لغة HTML بغرض العرض ولا يضيف أي معنى دلالي إلى المحتوى.

</> HTML em element
عنصر em في لغة HTML

  • HTML <em> element اختصار لـ emphasized، يستخدم عنصر <em> في إمالة النص، ويتشابه مع العنصر < i > من حيث طريقة العرض.
  • عنصر <em> من نوع العناصر المُتداخلة "nested elements"، له علامة بداية "open tag" وعلامة إغلاق "close tag".
<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><em>This text is emphasized.</em></p>

</body>
</html>

نستخدم HTML <em> element عادةً في نقل الضغط "stress" أو الأهمية للقارئ، مثل الطريقة التي قد يستخدم بها المرء التركيز في اللغة المنطوقة من خلال رفع صوته أو تغيير نغمته في كلمات معينة.

</> HTML small element
عنصر small في لغة HTML

يستخدم HTML <small> element لعمل نصوص صغيرة "small".
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
</head>
<body>

<p>نص عادي .</p>
<small>نص صغير  </small> 

</body>
</html>

</> HTML mark element
عنصر mark في لغة HTML

يستخدم HTML <mark> element لتلوين النصوص بعلامة صفراء وبارزة أو لتسليط الضوء على هذا النص.

<!DOCTYPE html>
<html>
<body>

<p>Do not forget to buy <mark>milk</mark> today.</p>

</body>
</html>

</> HTML del element
عنصر del في لغة HTML

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


<!DOCTYPE html>
<html>
<body>

<p>My favorite color is <del>blue</del> red.</p>

</body>
</html>

</> HTML ins element
عنصر ins في لغة HTML

يستخدم HTML <ins> element لجعل النص مدرج في الجملة أو متباعد عن السطر، كما يقوم المتصفح بجعله أسفل الجملة، ويقوم بوضع خط أسفل المحتوى الموجود بداخله.

<!DOCTYPE html>
<html>
<body>

<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

</body>
</html>

</> HTML sub element
عنصر sub في لغة HTML

  • عنصر HTML <sub> element اختصارًا لـ Subscript.
  • يستخدم HTML <sub> element من أجل عمل نصوص منخفضة بمقدار نصف حرف أسفل السطر الطبيعي، كما يعرض النص المنخفض بخط أصغر من الطبيعي، وعادةً ما يستخدم في الرموز الكيمائية، مثل: رموز المكونات الكيمائية H2.
<!DOCTYPE html>
<html>
<body>

<p>This is <sub>subscripted</sub> text.</p>

</body>
</html>

</> HTML sup element
عنصر sup في لغة HTML

يستخدم HTML <sup> element من أجل عمل نصوص مرتفعة بمقدار نصف حرف أعلى السطر الطبيعي، كما يعرض النص المرفوع بخط أصغر من الطبيعي، وعادةً ما يستخدم في العمليات الحسابية.

<!DOCTYPE html>
<html>
<body>

<p>This is <sup>superscripted</sup> text.</p>

</body>
</html>

</> HTML larger text
عنصر big في لغة HTML

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

Example
<p>نص عادي</p>   
<big> نص كبير </big>
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات