انتقل إلى محتوى الدرس
الدرس 07
دورة لغة HTML

الفقرات النصية في لغة HTMLHTML Paragraphs

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

THE BUILDING BLOCKS OF THE WEBHTML
index.html
1<h1>Hello, web.</h1>
وسم الفتحالمحتوىوسم الإغلاق
النتيجة في المتصفح Hello, web.
كل صفحة رائعة تبدأ بعنصر.
أقسام الدرس
5
الأمثلة
9
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
15,333
محتوى الدرس
في هذا الدرس 5تصفّح المواضيع

HTML Paragraphs الفقرات النصية في لغة HTML

تحتوي صفحات الويب عادةً على فقرات نصية ووصفية تصف محتوى الصفحة أو أحد المواضيع الفرعية داخلها.
ويمكن استخدام عنصر الفقرة <p> مرات متعددة في صفحة واحدة لكتابة أي وصف نصي تريده.

أما بالنسبة للفقرات النصية [paragraphs] في HTML:

  • يُعتبر عنصر <p> من نوع العناصر المُتداخلة [nested elements].

  • يُمكن استخدام عنصر <p> بعدد لا نهائي من المرات داخل نفس صفحة HTML.
الفقرات النصية في لغة HTML

HTML Paragraphs Syntax كتابة عناصر الفقرات النصية في لغة HTML

عنصر <p> هو عبارة عن فقرة نصية داخل صفحة الويب، يُستخدم لشرح المحتوى المكتوب المرتبط بالعناوين.

أين يُكتب عنصر الفقرات النصية <p> في لغة HTML:

  • يُكتب دائماً داخل عنصر <body> لشرح ووصف الصفحة أو المواضيع المختلفة.

  • يمكن وضع p حيث يسمح الأب بمحتوى flow، سواء كان أسفل العناوين headings الرئيسية أو الفرعية أو فوقها.


وظيفة عنصر الفقرات النصية <p> في لغة HTML:

  • وصف محتوى صفحة الويب.

  • شرح وتوضيح العناوين الموجودة داخل صفحة الويب.
استخدام الفقرات النصية <p> في لغة HTML بطريقة صحيحة


بعض الأمور التي يجب مراعاتها لاستخدام الفقرات النصية في لغة HTML بشكل صحيح:


  •  يُمكن استخدام الفقرات النصية paragraphs كما تشاء داخل صفحة الويب، في المواضع التي يسمح فيها نموذج محتوى الأب بذلك، مثل body أو section؛ لا يوضع مباشرة داخل ul بدل li، ولا داخل p آخر.

  •  يُفضل أن تكون الفقرات النصية paragraphs مصحوبة بعناوين رئيسية أو فرعية لتحسين تنظيم المحتوى.

  • الفقرات النصية paragraphs في لغة HTML يُشار إليها بعنصر <p>, والذي يُستخدم لتعريف الفقرة.

HTML Paragraphs Syntax

طريقة كتابة عنصر <p> في لغة HTML.

HTML
<p>My first paragraph.</p>

Paragraphs Syntax

طريقة إضافة نصوص داخل عنصر <p> في لغة HTML.

HTML
<p>Cyber security is the application of technologies, processes and controls to protect systems, networks, programs, devices and data from cyber attacks. It aims to reduce the risk of cyber attacks and protect against the unauthorised exploitation of systems, networks and technologies..</p>

Break Line With Paragraph In HTML الأسطر الفارغة مع الفقرات النصية في HTML

br يكسر السطر داخل النص عند الحاجة الدلالية لذلك. لا نكرر br لضبط تباعد الفقرات؛ نستخدم margin أو padding في CSS كما يوضح التنبيه التالي.

Break Line Element Syntax

طريقة كتابة عنصر break line في لغة HTML.

HTML
<br>

How Browsers Handle Line Breaks from the Enter Key

في هذا المثال وبالتنسيق الافتراضي تُطوى فواصل الأسطر المكتوبة بزر Enter، ويتوزع النص حسب عرض المساحة.

HTML
<p>
    Cyber security is the application of technologies, processes and controls to protect systems, 
    networks, programs, devices and data from cyber attacks. It aims to reduce the risk of 
    cyber attacks and protect against the unauthorised exploitation of systems, networks and technologies..
</p>

Use Break Line Element

استخدام عنصر break line لوضع سطور فارغة مع الفقرات النصية.

HTML
<p>
    Cyber security is the application of technologies, processes and controls to protect systems, 
    <br> networks, programs, devices and data from cyber attacks. It aims to reduce the risk 
    <br> of cyber attacks and protect against the unauthorised exploitation of systems, networks and technologies..
</p>

Auto break lines with paragraph in HTML أسطر فارغة بشكل تلقائي مع الفقرات النصية في لغة HTML

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

Preserve Whitespace in a Paragraph

لحفظ المسافات وفواصل الأسطر داخل p نستخدم CSS white-space: pre-wrap؛ يحفظها ويسمح بالتفاف السطر حسب العرض. لا يجوز إدخال pre داخل p.

HTML
<p style="white-space: pre-wrap">
     Cyber security is the application of technologies,                                                    processes and controls to protect systems, 
     networks, programs, devices and data from cyber attacks. It aims to reduce the risk
     of cyber attacks and protect against the unauthorised exploitation of systems, networks and technologies..
</p>

Auto Break Lines Without Paragraph

يُمكننا استخدام عنصر <pre> بدون عنصر <p> لعمل مسافات وأسطر فارغة.

HTML
<pre>
     Cyber security is the application of technologies,                                                    processes and controls to protect systems, 
     networks, programs, devices and data from cyber attacks. It aims to reduce the risk
     of cyber attacks and protect against the unauthorised exploitation of systems, networks and technologies..
</pre>

hr Element With Paragraphs In HTML استخدام عنصر hr مع عناصر الفقرات في لغة HTML

عنصر <hr> هو اختصار لـ [horizontal rule]، وتعني خطًا أو قاعدة أو فاصلة أفقية. ويعتبر من نوع العناصر الفارغة [empty element].

ويُستخدم لإنشاء فواصل أفقية بين الفقرات والمواضيع داخل الصفحة، مما يساعد في الانتقال البصري، كما يحدث في القصص لتحويل القارئ من مشهد إلى آخر.

دلالته في محتوى الصفحة فاصل موضوعي thematic break، مثل الانتقال إلى مشهد آخر؛ أما الخط الزخرفي فقط فيمكن رسمه بحدود CSS.

hr Element Syntax

يُكتب عنصر <hr> في لغة HTML على هيئة open tag فقط، لأنه من نوع العناصر الفارغة [empty element].

HTML
<hr>

hr Element With Paragraphs In HTML

استخدام عنصر <hr> لعمل فاصل أفقي بين فقرتين نصيتين أي بين عنصرين <p>.

HTML
<p>  
     Cyber security is the application of technologies, processes and controls to protect systems, 
     networks, programs, devices and data from cyber attacks. It aims to reduce the risk
     of cyber attacks and protect against the unauthorised exploitation of systems, networks and technologies..
</p>
<hr>
<p>  
     Cyber security is the application of technologies, processes and controls to protect systems, 
     networks, programs, devices and data from cyber attacks. It aims to reduce the risk
     of cyber attacks and protect against the unauthorised exploitation of systems, networks and technologies..
</p>

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات12

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 12 مفهومةأول بطاقة، أول خطوة
01 HTML Paragraphs فقرات HTML
للمراجعة
02 Paragraphs فقرات
للمراجعة
03 Nested متداخلة
للمراجعة
04 Heading عناوين
للمراجعة
05 Tag Name اسم العلامة
للمراجعة
06 Break Line خط فاصل
للمراجعة
07 formatting تنسيق
للمراجعة
08 Break فاصل
للمراجعة
09 Empty Element عنصر فارغ
للمراجعة
10 Tag علامة
للمراجعة
11 Spaces مسافات
للمراجعة
12 Auto Break Lines خط فاصل تلقائي
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

5أسئلة 2أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي5 أسئلة تنتظرك
01

عنصر <p> هو من النوع Nested ؟

02

هل يتم تجاهل المسافات والأسطر الإضافية الموجودة بداخل نصوص عنصر <p> ؟

03

كم مره يمكن استخدام عنصر <p> بداخل صفحة الويب ؟

04

اي من العناصر التالية يستخدم في اضافة سطر فارغ ؟

05

هل يحفظ العنصر التالي <pre> المسافات والاسطر الفارغة ؟