HTML Text Formatting
تنسيق النصوص بلغة HTML
في هذا الدرس، ستتعلم كيفية استخدام عناصر HTML لتنسيق النصوص بطرق مختلفة، بما في ذلك جعلها عريضة أو مائلة أو تحت خط، وإبراز النصوص المضافة أو المحذوفة، وكيفية ضبط حجم النص ووضعه في مواضع سفلية أو علوية.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
HTML Text Formatting
تنسيق النصوص بلغة HTML
</>
HTML Text Formatting
تنسيق النصوص بلغة HTML
تُستخدم العناصر التالية لتنسيق النصوص في لغة HTML:
- <bold <b: لإنشاء خط عريض.
- <strong <strong: لإنشاء خط هام.
- <italic <i: لإنشاء خط مائل.
- <emphasize <em: لإنشاء خط مؤكد.
- <small <small: لإنشاء خط صغير.
- <mark <mark: لإنشاء خط مظلل.
سنشرح كيفية استخدام هذه العناصر بالتفصيل لاحقًا.
- <deleted <del: لإنشاء خط محذوف.
- <inserted <ins: لإنشاء خط مضاف حديثًا.
- <subscript <sub: لإنشاء نص أسفل السطر.
- <superscript <sup: لإنشاء نص أعلى السطر.
- <big <big: لإنشاء نص بحجم خط أكبر.
- <underline <u: لإنشاء خط تحت النص.
Effect of HTML Text Formatting Elements on Various Text Styles
شكل تأثير عناصر تنسيق النصوص في HTML على أنماط النصوص المختلفة مثل [bold, italic, mark] وغيرها لعرض شكلها المتنوع.
</>
HTML Bold Element
عنصر Bold في لغة HTML
- يُستخدم عنصر <b> لتغيير أو تحويل النصوص إلى خط عريض bold في لغة HTML. وعنصر <b> هو اختصار للكلمة الإنجليزية [bold].
- عنصر <b> من نوع العناصر المُتداخلة [nested elements]، له علامة فتح <b> وعلامة إغلاق <b/>.
Effect of the b Element in HTML on Making Text Bold
شكل تأثير عنصر <b> في HTML لجعل كلمة [programming] عريضة لتمييز النص.
Example of Using the b Element to Bold Text in an HTML Paragraph
مثال يوضح كيفية استخدام عنصر <b> لجعل النص داخل فقرة HTML يظهر بخط عريض.
<!DOCTYPE html> <html> <head> </head> <body> <h1> Make text bold </h1> <p> closetag is a platform to teach you <b>programming</b> language </p> </body> </html>
</>
HTML Strong Element
عنصر Strong في لغة HTML
- يُستخدم عنصر <strong> لإبراز أهمية النص، مما يجعله يظهر بخط عريض وذي أهمية لمحركات البحث، ويجعل الخط عريض مثل عنصر <b>.
- عنصر <strong> من نوع العناصر المُتداخلة [nested elements]، له علامة فتح <strong> وعلامة إغلاق <strong/>.
Effect of the strong Element in HTML on Emphasizing Text
شكل تأثير عنصر <strong> في HTML لإبراز كلمة [programming] لتأكيد أهمية النص.
Example of Using the strong Element in HTML to Emphasize Text
مثال يوضح كيفية استخدام عنصر <strong> في HTML لتأكيد أهمية كلمة [programming] في صفحة ويب بسيطة.
<!DOCTYPE html> <html> <head> </head> <body> <h1> Make text strong </h1> <p> closetag is a platform to teach you <strong> programming </strong> language </p> </body> </html>
هام
عنصر <strong> في HTML يُستخدم لإبراز أهمية النص دلالياً، وهو ليس اختصارًا لكلمة إنجليزية. على عكس ذلك، فإن <b> هو اختصار لكلمة [bold] ويُستخدم لجعل النص يظهر بخط عريض دون دلالة على الأهمية.
</>
HTML Italic Element
عنصر Italic في لغة HTML
- يُستخدم عنصر <i> لتغيير تنسيق الخط من خط عادي إلى خط مائل، وهو اختصارًا لكلمة [italic] وتعني مائل.
- عنصر <i> من نوع العناصر المُتداخلة [nested elements]، له علامة فتح <i> وعلامة إغلاق <i/>.
Effect of the i Element in HTML on Italicizing Text
شكل تأثير عنصر <i> في HTML لجعل كلمة [programming] مائلة لتحسين شكل النص.
Example of Using the i Element in HTML to Italicize Text
مثال يوضح كيفية استخدام عنصر <i> في HTML لجعل كلمة [programming] مائلة في صفحة ويب بسيطة.
<!DOCTYPE html> <html> <head> </head> <body> <h1> Make text italic </h1> <p> closetag is a platform to teach you <i> programming </i> language <p> </body> </html>
ملاحظة
يُستخدم العنصر <i> في لغة HTML لأغراض العرض البصري ولا يُضيف أي معنى دلالي إلى المحتوى.
</>
HTML Em Element
عنصر Em في لغة HTML
- يُستخدم عنصر <em> في HTML لجعل النص مائلًا، مما يبرز أهمية النص. ويتشابه مع العنصر <i> في طريقة العرض، وهو اختصارًا لكلمة [emphasized] وتعني مؤكَّد.
- عنصر <em> من نوع العناصر المتداخلة [nested elements]، له علامة فتح <em> وعلامة إغلاق <em/>.
Effect of the em Element in HTML on Emphasizing Text
شكل تأثير عنصر <em> في HTML لجعل النص مائلًا.
Example of Using the em Element in HTML to Emphasize and Italicize Text
مثال يوضح كيفية استخدام عنصر <em> في HTML لعرض نص عادي وآخر مائل، حيث يُبرز النص المائل باستخدام هذا العنصر.
<!DOCTYPE html> <html> <body> <p>This text is normal.</p> <p><em>This text is emphasized.</em></p> </body> </html>
معلومة تهمك
يُستخدم عنصر <em> في HTML عادةً لنقل الضغط أو الأهمية إلى القارئ، مشابهاً للطريقة التي يستخدم بها المرء التركيز في اللغة المنطوقة من خلال رفع الصوت أو تغيير النغمة عند نطق كلمات معينة.
</>
HTML Small Element
عنصر Small في لغة HTML
- يُستخدم عنصر <small> في HTML لتصغير حجم النصوص.
- عنصر <small> من نوع العناصر المتداخلة [nested elements]، له علامة فتح <small> وعلامة إغلاق <small/>.
Effect of the Small Element in HTML on Text Size
شكل تأثير عنصر <small> في HTML على تصغير حجم النص.
Using the small Element in HTML to Format Smaller Text
مثال يوضح كيفية استخدام عنصر <small> في HTML لعرض نص عادي ونص بحجم أصغر.
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> </head> <body> <p>نص عادي .</p> <small>نص صغير </small> </body> </html>
توضيح
عنصر <small> في HTML لا يمتلك اختصارًا رمزيًا، بل يعتمد استخدامه على وضع النص المراد تصغيره بين علامتي <small> و <small/>.
</>
HTML Mark Element
عنصر Mark في لغة HTML
- يُستخدم عنصر <mark> في HTML لتلوين النصوص بعلامة صفراء وبارزة أو لتسليط الضوء عليها.
- عنصر <mark> من نوع العناصر المتداخلة [nested elements]، له علامة فتح <mark> وعلامة إغلاق <mark/>.
Effect of the Mark Element in HTML on Highlighting the Word Milk
شكل تأثير عنصر <mark> في HTML على تظليل كلمة [milk] بخلفية صفراء.
Using the Mark Element in HTML to Highlight Text
مثال يوضح كيفية استخدام عنصر <mark> في HTML لتسليط الضوء على كلمة [milk].
<!DOCTYPE html> <html> <body> <p>Do not forget to buy <mark>milk</mark> today.</p> </body> </html>
توضيح
عنصر <mark> في HTML لا يمتلك رمزًا اختصاريًّا. ويتم استخدامه بوضع النص المراد تمييزه بين علامة فتح <mark> وعلامة إغلاق <mark/> لتسليط الضوء عليه.
</>
HTML Del Element
عنصر Del في لغة HTML
- يُستخدم عنصر <del> في HTML لوضع علامة حذف أو شطب على النص، مما يشير إلى أن النص ملغى في صفحة الويب. عندما يقوم المتصفح بعرض هذا النوع من النص، فإن النص يظهر مع خط أفقي يمر من خلاله.
- عنصر <del> من نوع العناصر المتداخلة [nested elements]، له علامة فتح <del> وعلامة إغلاق <del/>.
Effect of the del Element in HTML on Indicating Deleted Text
تأثيرعنصر <del> لتمييز نص محذوف، حيث يظهر أن اللون المفضل كان أزرق وتم استبداله بالأحمر.
Using the del Tag in HTML to Indicate a Change in Color Preference
مثال يوضح كيفية استخدام عنصر <del> لشطب كلمة [blue]، للإشارة إلى أن اللون المفضل قد تغير من الأزرق إلى الأحمر.
<!DOCTYPE html> <html> <body> <p>My favorite color is <del>blue</del> red.</p> </body> </html>
</>
HTML Ins Element
عنصر Ins في لغة HTML
- يُستخدم عنصر <ins> في HTML لتحديد النص المضاف حديثًا في الفقرة، ويعرضه المتصفح بخط سفلي لإظهار أنه تم إدراجه في المحتوى مؤخرًا.
- عنصر <ins> من نوع العناصر المتداخلة [nested elements]، له علامة فتح <ins> وعلامة إغلاق <ins/>.
Effect of the ins Element in HTML on Highlighting Added Text
شكل تأثير عنصر <ins> في HTML على تمييز النص المضاف، حيث يظهر أن اللون المفضل أصبح [red] بإضافة خط تحته.
Using the ins Element in HTML to Indicate Edited Text
مثال يوضح كيفية استخدام عنصر <ins> في HTML، لإظهار أن اللون المفضل قد تم تغييره من الأزرق إلى الأحمر.
<!DOCTYPE html> <html> <body> <p>My favorite color is <del>blue</del> <ins>red</ins>.</p> </body> </html>
</>
HTML Sub Element
عنصر Sub في لغة HTML
- عنصر <sub> هو اختصارًا لـ Subscript.
- يُستخدم عنصر <sub> في HTML لكتابة النصوص التي تظهر بمقدار نصف حرف أسفل السطر الأساسي، ويظهر النص بحجم خط أصغر من المعتاد، وعادةً ما يستخدم هذا العنصر بشكل شائع في الرموز الكيميائية لتوضيح العناصر الكيميائية مثل H₂O.
- عنصر <sub> من نوع العناصر المتداخلة [nested elements]، له علامة فتح <sub> وعلامة إغلاق <sub/>.
Effect of The sub Element in HTML on Subscript Text
شكل تأثير عنصر <sub> في HTML على إنشاء النص السفلي، حيث يظهر النص [subscripted] بتنسيق منخفض.
Using The sub Element in HTML to Indicate Subscript Text
مثال يوضح كيفية استخدام عنصر <sub> في HTML لإنشاء نص أصغر وأسفل من السطر الأساسي.
<!DOCTYPE html> <html> <body> <p>This is <sub>subscripted</sub> text.</p> </body> </html>
</>
HTML Sup Element
عنصر Sup في لغة HTML
- يُستخدم عنصر <sup> في HTML لكتابة نصوص مرتفعة بمقدار نصف حرف فوق السطر الأساسي، ويظهر النص بحجم خط أصغر من المعتاد. ويُستخدم هذا العنصر عادةً في الرياضيات لكتابة الأسس أو الأرقام الفوقية.
- عنصر <sup> من نوع العناصر المتداخلة [nested elements]، له علامة فتح <sup> وعلامة إغلاق <sup/>.
Effect of The sup Element in HTML on Superscript Text
شكل تأثير عنصر <sup> في HTML على إنشاء النص العلوي، حيث يظهر النص [superscripted] بتنسيق مرتفع.
Using The sup Element in HTML to Indicate Superscript Text
مثال يوضح كيفية استخدام عنصر <sup> في HTML لإنشاء نص أصغر وأعلى من السطر الأساسي.
<!DOCTYPE html> <html> <body> <p>This is <sup>superscripted</sup> text.</p> </body> </html>
</>
HTML Big Element
عنصر Big في لغة HTML
- يُستخدم عنصر <big> في HTML لزيادة حجم النص بالنسبة للنص المحيط به. إذا كنت تريد جعل حجم الخط أكبر من باقي النص، ضع المحتوى داخل عنصر <big>...<big/> ليعرضه المتصفح بحجم أكبر من الحجم الافتراضي.
- عنصر <big> من نوع العناصر المتداخلة [nested elements]، له علامة فتح <big> وعلامة إغلاق <big/>.
Effect of the big Element in HTML on Enlarging Text
شكل تأثير عنصر <big> في HTML على تكبير كلمة [big text] ليظهر بحجم أكبر.
Using the big Element in HTML to Enlarge Text
مثال يوضح كيفية استخدام عنصر <big> في HTML لجعل النص أكبر من الحجم العادي.
<p>Plain text</p> <big> big text </big>
</>
HTML underline Element
عنصر u في لغة HTML
- يُستخدم عنصر <u> في HTML، لوضع خط سفلي تحت النص لتأكيده أو لأغراض زخرفية، ويُستخدم غالبًا لإبراز جزء من النص بخط سفلي، وهو اختصارًا لكلمة [underline] وتعني تسطير.
- عنصر <u> من نوع العناصر المتداخلة [nested elements]، له علامة فتح <u> وعلامة إغلاق <u/>.
Effect of the u Element in HTML on Underlining Text
شكل تأثير عنصر <u> في HTML على وضع خط تحت النص لإبراز كلمة [underlined text].
Regular text
underlined text
Using the u Element in HTML to Underline Text
مثال يوضح كيفية استخدام عنصر <u> في HTML لوضع خط سفلي تحت كلمة [underlined text].
<!DOCTYPE html> <html> <body> <p>Make sure to review the <u>underlined text</u> carefully.</p> </body> </html>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
