في هذا الدرس 5تصفّح المواضيع
HTML Paragraphs
الفقرات النصية في لغة HTML
HTML Paragraphs الفقرات النصية في لغة HTML
تحتوي صفحات الويب عادةً على فقرات نصية ووصفية تصف محتوى الصفحة أو أحد المواضيع الفرعية داخلها.
ويمكن استخدام عنصر الفقرة <p> مرات متعددة في صفحة واحدة لكتابة أي وصف نصي تريده.
أما بالنسبة للفقرات النصية [paragraphs] في HTML:
- يُعتبر عنصر <p> من نوع العناصر المُتداخلة [nested elements].
- يُمكن استخدام عنصر <p> بعدد لا نهائي من المرات داخل نفس صفحة HTML.

HTML Paragraphs Syntax
كتابة عناصر الفقرات النصية في لغة HTML
HTML Paragraphs Syntax كتابة عناصر الفقرات النصية في لغة HTML
عنصر <p> هو عبارة عن فقرة نصية داخل صفحة الويب، يُستخدم لشرح المحتوى المكتوب المرتبط بالعناوين.
أين يُكتب عنصر الفقرات النصية <p> في لغة HTML:
- يُكتب دائماً داخل عنصر <body> لشرح ووصف الصفحة أو المواضيع المختلفة.
- يمكن وضع p حيث يسمح الأب بمحتوى flow، سواء كان أسفل العناوين headings الرئيسية أو الفرعية أو فوقها.
وظيفة عنصر الفقرات النصية <p> في لغة HTML:
- وصف محتوى صفحة الويب.
- شرح وتوضيح العناوين الموجودة داخل صفحة الويب.
بعض الأمور التي يجب مراعاتها لاستخدام الفقرات النصية في لغة HTML بشكل صحيح:
- يُمكن استخدام الفقرات النصية paragraphs كما تشاء داخل صفحة الويب، في المواضع التي يسمح فيها نموذج محتوى الأب بذلك، مثل body أو section؛ لا يوضع مباشرة داخل ul بدل li، ولا داخل p آخر.
- يُفضل أن تكون الفقرات النصية paragraphs مصحوبة بعناوين رئيسية أو فرعية لتحسين تنظيم المحتوى.
- الفقرات النصية paragraphs في لغة HTML يُشار إليها بعنصر <p>, والذي يُستخدم لتعريف الفقرة.
HTML Paragraphs Syntax
طريقة كتابة عنصر <p> في لغة HTML.
<p>My first paragraph.</p>
Paragraphs Syntax
طريقة إضافة نصوص داخل عنصر <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>
Break Line With Paragraph In HTML
الأسطر الفارغة مع الفقرات النصية في HTML
Break Line With Paragraph In HTML الأسطر الفارغة مع الفقرات النصية في HTML
br يكسر السطر داخل النص عند الحاجة الدلالية لذلك. لا نكرر br لضبط تباعد الفقرات؛ نستخدم margin أو padding في CSS كما يوضح التنبيه التالي.
Break Line Element Syntax
طريقة كتابة عنصر break line في لغة HTML.
<br>
How Browsers Handle Line Breaks from the Enter Key
في هذا المثال وبالتنسيق الافتراضي تُطوى فواصل الأسطر المكتوبة بزر Enter، ويتوزع النص حسب عرض المساحة.
<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 لوضع سطور فارغة مع الفقرات النصية.
<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
Auto break lines with paragraph in HTML أسطر فارغة بشكل تلقائي مع الفقرات النصية في لغة HTML
يمكن للمتصفح عرض جميع المسافات والأسطر الفارغة كما هي في النص عن طريق استخدام عنصر <pre>. هذا العنصر يُحافظ على التنسيق الأصلي للنص، بما في ذلك المسافات والأسطر كما وُجدت في كود HTML.
Preserve Whitespace in a Paragraph
لحفظ المسافات وفواصل الأسطر داخل p نستخدم CSS white-space: pre-wrap؛ يحفظها ويسمح بالتفاف السطر حسب العرض. لا يجوز إدخال pre داخل p.
<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> لعمل مسافات وأسطر فارغة.
<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 Element With Paragraphs In HTML استخدام عنصر hr مع عناصر الفقرات في لغة HTML
عنصر <hr> هو اختصار لـ [horizontal rule]، وتعني خطًا أو قاعدة أو فاصلة أفقية. ويعتبر من نوع العناصر الفارغة [empty element].
ويُستخدم لإنشاء فواصل أفقية بين الفقرات والمواضيع داخل الصفحة، مما يساعد في الانتقال البصري، كما يحدث في القصص لتحويل القارئ من مشهد إلى آخر.
دلالته في محتوى الصفحة فاصل موضوعي thematic break، مثل الانتقال إلى مشهد آخر؛ أما الخط الزخرفي فقط فيمكن رسمه بحدود CSS.
hr Element Syntax
يُكتب عنصر <hr> في لغة HTML على هيئة open tag فقط، لأنه من نوع العناصر الفارغة [empty element].
<hr>
hr Element With Paragraphs In HTML
استخدام عنصر <hr> لعمل فاصل أفقي بين فقرتين نصيتين أي بين عنصرين <p>.
<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
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 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 خط فاصل تلقائي
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.