4 الفصل الأول: أساسيات HTML التعامل مع النصوص في HTML

Byahmed nabel Ahmed Nabel - Html

الفصل الأول: أساسيات HTML

4. التعامل مع النصوص في HTML

النصوص هي جزء أساسي من أي صفحة ويب، وفي HTML نستخدم مجموعة من الوسوم (Tags) لتنظيم وتنسيق النصوص بطريقة معينة. هنشوف مع بعض كيف نتعامل مع العناوين، الفقرات، والنصوص.

1. وسوم العناوين <h1> إلى <h6>

العناوين في HTML تُستخدم لتحديد النصوص المهمة في الصفحة، وتساعد في تنظيم المحتوى، كما تسهل القراءة للمستخدمين ومحركات البحث (SEO).

  • <h1>: هو أكبر عنوان في HTML ويُستخدم للعناوين الرئيسية في الصفحة.
  • <h2> إلى <h6>: كل وسوم من هذه تُستخدم لتحديد عناوين أقل أهمية بتدرج من حيث الحجم (أصغر من <h1>).

مثال:

html
<h1>هذا هو العنوان الرئيسي (h1)</h1>
<h2>العنوان الفرعي 1 (h2)</h2>
<h3>العنوان الفرعي 2 (h3)</h3>
<h4>العنوان الفرعي 3 (h4)</h4>
<h5>العنوان الفرعي 4 (h5)</h5>
<h6>العنوان الفرعي 5 (h6)</h6>
  • <h1>: يعتبر العنوان الأكثر أهمية على الصفحة، وغالبًا بيكون عنوان الصفحة أو الموضوع الرئيسي.
  • <h2>: بيستخدم لتقسيم المحتوى إلى أقسام فرعية.
  • العناوين الأخرى <h3> و <h4> و <h5> و <h6> بتستخدم لتقسيم المحتوى بشكل أكثر تفصيلًا حسب الحاجة.

ملاحظة: ترتيب العناوين مهم من ناحية SEO، حيث يُفضل استخدام العنوان الرئيسي أولًا ( <h1> ) وتدرج العناوين بعدها.

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

الفقرة تُستخدم في HTML لكتابة نصوص فقرية. عند استخدام وسم <p>، سيتم عرض النص داخل فقرة منفصلة عن باقي النصوص، مع إضافة مسافة بين الفقرات.

مثال:

html
<p>هذه فقرة من النصوص. الفقرات في HTML تُستخدم لتقسيم النصوص بشكل منطقي.</p>
<p>يمكنك إضافة فقرات أخرى بنفس الطريقة.</p>
  • <p>: كل نص بين وسم البداية <p> ووسم النهاية </p> سيتم اعتباره فقرة منفصلة.
  • يتم إضافة مسافة تلقائيًا بين الفقرات لجعل الصفحة أكثر وضوحًا وقابلية للقراءة.

3. النصوص العريضة <b> والمائلة <i>

  • النص العريض <b>: يُستخدم لعرض النص بشكل عريض، ولكن دون التركيز على المعنى الدلالي (أي أنه لا يُستخدم للإشارة إلى أن النص مهم).
  • النص المائل <i>: يُستخدم لعرض النص بشكل مائل، مثلًا لاستخدامه للإشارة إلى اسم كتاب أو شيء مميز في النص.

مثال:

html
<p>هذا نص <b>عريض</b> وهذا نص <i>مائل</i>.</p>
  • <b>: بيجعل النص عريضًا.
  • <i>: بيجعل النص مائلًا.

ملاحظة: لو عايز تعمل النصوص عريضة أو مائلة لأسباب دلالية (مش بس شكلية)، يفضل استخدام الوسوم مثل <strong> (للدلالة على الأهمية) و<em> (للدلالة على التوكيد أو التأكيد).

مثال كامل يجمع كل الوسوم:

html
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تعلم التعامل مع النصوص في HTML</title>
</head>
<body>
<h1>مرحبًا بك في تعلم HTML!</h1>
<h2>هذا هو العنوان الفرعي الأول (h2)</h2>
<p>هذه هي أول فقرة من النصوص في الصفحة. يمكنك كتابة أي محتوى هنا.</p>
<p>وفي الفقرة التالية سنعرض نصوص عريضة ومائلة:</p>
<p>هذا نص <b>عريض</b> وهذا نص <i>مائل</i>.</p>
</body>
</html>

في هذا المثال:

  • <h1>: هو العنوان الرئيسي.
  • <h2>: هو العنوان الفرعي.
  • <p>: هي الفقرات.
  • <b> و <i>: يتم استخدامهم لجعل النصوص عريضة ومائلة.

ملخص الفصل الأول – الجزء الرابع: التعامل مع النصوص في HTML

  • وسوم العناوين: يتم استخدام <h1> إلى <h6> لترتيب العناوين حسب الأهمية.
  • الفقرة: تُستخدم وسم <p> لتقسيم النصوص إلى فقرات.
  • النصوص العريضة والمائلة: يتم استخدام <b> لجعل النص عريضًا و <i> لجعل النص مائلًا.

    Similar Posts

    اترك تعليقاً

    لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *