HTML

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

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

التاريخ

30 يناير 2020

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

7884

المواضيع

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>
مصطلحات الدرس
HTML Formatting
HTML Formatting

تنسيقات HTML

Formatting
Formatting

تنسيق

Style
Style

نمط أو شكل

Open Tag
Open Tag

علامة الفتح

CLose Tag
CLose Tag

علامة الإغلاق

Strong
Strong

قوي

Element
Element

عنصر

Italic
Italic

مائل

Nested
Nested

متداخلة

Small
Small

صغير

Mark
Mark

علامة

اختصارات الدرس
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
del
del

Delete

حذف
Insert
Insert

Insert

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

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.