إظهار وإخفاء النص، تمييزه، تطبيق خط تحت النص أو خط يتوسطه، وتغيير حجم النص باستخدام HTML

هذا الدرس من الدورة التدريبية: كورس تعلم HTML من الصفر لبناء صفحات ويب

الدرس: إظهار وإخفاء النص، تمييزه، تطبيق خط تحت النص أو خط يتوسطه، وتغيير حجم النص باستخدام HTML

المدة: 5 دقائق

وصف مختصر:

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

وصف الدرس

الطباعة في HTML: تعزيز تقديم النصوص


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

1. العناوين: <h1>, <h2>


تُستخدم العناوين لتعريف العناوين الرئيسية والعناوين الفرعية على صفحة الويب. تتراوح العناوين من <h1> إلى <h6>, حيث يعتبر <h1> هو الأكثر أهمية والأكبر حجمًا، بينما <h6> هو الأقل أهمية والأصغر حجمًا.

مثال:



html


<h1>العنوان الرئيسي هنا</h1>
<h2>عنوان فرعي هنا</h2>



  • <h1>: يمثل العنوان الرئيسي في الصفحة. يكون النص بخط عريض وحجمه 32 بكسل. لمزيد من المعلومات حول العناوين، يمكنك الاطلاع على.


2. الفقرات: <p>


تُستخدم العلامة <p> لكتابة نصوص عادية. يمكن أن تحتوي الفقرة على عناصر أخرى مثل <b> لتنسيق النص بالخط العريض و<i> لتنسيق النص بالخط المائل.

مثال:



html


<p>
النص هنا في الفقرة، يمكن أن يكون <i> *مائل* </i>
أو يمكن أن يكون <b> **عريض** </b>
</p>



  • <b>: يجعل النص يظهر بخط عريض.

  • <i>: يجعل النص يظهر بخط مائل.


3. إظهار وإخفاء النصوص: <details>, <summary>


تُستخدم العلامة <details> لتخزين محتوى قابل للتوسع والإخفاء، بينما تُستخدم العلامة <summary> لعرض عنوان القابل للتوسيع الذي يظهر عند النقر عليه.

مثال:



html


<details>
<summary>تبديل هذا الفقرة</summary>
<p>محتوى الفقرة....</p>
</details>



  • <details>: يحتوي على عنصر <summary> الذي عند النقر عليه يُظهر أو يُخفي محتوى الفقرة الموجودة داخله.


4. تمييز النصوص: <mark>


تُستخدم العلامة <mark> لتمييز النص، مما يجعله بارزًا بلون خلفية أصفر عادةً.

شاهد مثال عملي حقيقي لتمميز النص

مثال:



html


<p>
يمكن أن يكون النص <mark> مميزًا </mark> باستخدام علامة التمييز
أو <mark> أيضًا نصوص متعددة، لا تنسَ إجراء اختباراتك </mark>
</p>


5. خط النصوص: <del>, <s>


تُستخدم العلامتان <del> و <s> لعرض النصوص مع خط يتوسطها، مما يشير إلى أن النص قد تم حذفه أو تغييره.

مثال:



html


<p>
يمكنك ببساطة <del> ~~إضافة هذا السطر باستخدام هذه العلامة~~ </del>
أو <s> ~~نفس نمط النص~~ </s>
</p>



  • <del>: يعرض النص مع خط يتوسطه.

  • <s>: يعرض النص بنفس النمط الذي يتوسطه خط.


6. النصوص الم underline: <ins>


تُستخدم العلامة <ins> لتحتية النص، مما يبرز النص بتنسيق سطر تحت النص.

مثال:



html


<p>
يبدو مثل <ins> هذا النص تحت خط باستخدام هذه العلامة </ins>
</p>


7. تصغير حجم النصوص: <small>


تُستخدم العلامة <small> لجعل النص أصغر حجمًا مقارنة بالنص الأصلي للعنصر الأب.

مثال:



html


<h1>
في عنصرك، فقط اكتب النص في
<small> علامة صغيرة لجعل النص أصغر من العنصر الأب </small>
</h1>






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

الفيديوهات

سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و الفيديوهات

فيديو الدرس التعليمي إظهار وإخفاء النص، تمييزه، تطبيق خط تحت النص أو خط يتوسطه، وتغيير حجم النص باستخدام HTML

المصادر

سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و المصادر

الأوامر البرمجية الأكواد والملفات المستخدمة

شاهد مثال عملي لتمييز النص

ملحقات ال PDF

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

الملف المرجعي للشرح إضافة وتغيير النصوص HTML Typography Views Listing Navigation

الدروس والاختبارات لتعلم هذه الدورة التدريبية : كورس تعلم HTML من الصفر لبناء صفحات ويب

has been added to the cart. View Cart