HTML Paragraphs
الفقرات النصية في لغة HTML
في هذا الدرس، سنتعلم كيفية إضافة وصف للمواضيع [الفقرات] داخل صفحة HTML باستخدام عنصر <p>. كما سنتعرف على كيفية تنسيق المسافات بين الكلمات داخل الفقرات، بالإضافة إلى كيفية إدراج سطر فاصل بين كل فقرة وأخرى.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
HTML Paragraphs
الفقرات النصية في لغة HTML
</>
HTML Paragraphs
الفقرات النصية في لغة HTML
تحتوي صفحات الويب عادةً على فقرات نصية ووصفية تصف محتوى الصفحة أو أحد المواضيع الفرعية داخلها.
ويمكن استخدام عنصر الفقرة <p> مرات متعددة في صفحة واحدة لكتابة أي وصف نصي تريده.
أما بالنسبة للفقرات النصية [paragraphs] في HTML:
- يُعتبر عنصر <p> من نوع العناصر المُتداخلة [nested elements].
- يُمكن استخدام عنصر <p> بعدد لا نهائي من المرات داخل نفس صفحة HTML.
ملاحظات هامة
- تتجاهل المتصفحات جميع المسافات الزائدة بين الكلمات داخل الفقرات النصية، مع الإبقاء على مسافة واحدة فقط. لذلك، إذا كنت بحاجة إلى إضافة عدة مسافات، يمكنك استخدام عناصر تنسيق النص مثل عنصر <pre>.
- تتجاهل المتصفحات الأسطر الفارغة الإضافية بين الفقرات النصية، حيث يُظهر المتصفح سطرًا واحدًا فقط كافتراضي بين كل عنصر <p>. فإذا كنت بحاجة إلى إضافة أسطر إضافية، يمكنك استخدام عنصر <br> لإضافة سطر جديد.
</>
HTML Paragraphs Syntax
كتابة عناصر الفقرات النصية في لغة HTML
عنصر <p> هو عبارة عن فقرة نصية داخل صفحة الويب، يُستخدم لشرح المحتوى المكتوب المرتبط بالعناوين.
أين يُكتب عنصر الفقرات النصية <p> في لغة HTML:
- يُكتب دائماً داخل عنصر <body> لشرح ووصف الصفحة أو المواضيع المختلفة.
- يمكن لعنصر <p> أن يوضع في أي مكان داخل <body>, سواء كان أسفل العناوين headings الرئيسية أو الفرعية أو فوقها.
وظيفة عنصر الفقرات النصية <p> في لغة HTML:
- وصف محتوى صفحة الويب.
- شرح وتوضيح العناوين الموجودة داخل صفحة الويب.
- يُمكن استخدام الفقرات النصية paragraphs كما تشاء داخل صفحة الويب، وفي أي مكان داخل عنصر <body>.
- يُفضل أن تكون الفقرات النصية 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>
مهم
- يُستخدم عنصر الفقرة النصية في لغة HTML لوصف الصفحات والموضوعات الرئيسية أو الفرعية داخل صفحات HTML وصفحات الويب.
- يقوم المتصفح تلقائيًا بإنشاء فاصل بين كل فقرة، مما يعني أنه يقوم بوضع كل فقرة على سطر جديد.
</>
Break Line With Paragraph In HTML
الأسطر الفارغة مع الفقرات النصية في HTML
يُمكن عمل سطور إضافية فارغة بين الفقرات النصية في لغة HTML، عن طريق عنصر [br] الذي يُمكّنك من وضع عدّة سطور بين الفقرات للترتيب والتنظيم.
Break Line Element Syntax
طريقة كتابة عنصر break line في لغة HTML.
<br>
Browsers Ignore Lines
في هذا المثال تتجاهل المتصفحات السطور التي تقوم بوضعها عن طريق enter key.
<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>
هام
لا يُستخدم عنصر <br> لإضافة هوامش أو محاذاة margin بين الفقرات النصية، المحاذاة وإضافة الهوامش تتم باستخدام CSS، والتي سنتعلمها بعد الانتهاء من دراسة HTML.
</>
Auto break lines with paragraph in HTML
أسطر فارغة بشكل تلقائي مع الفقرات النصية في لغة HTML
يمكن للمتصفح عرض جميع المسافات والأسطر الفارغة كما هي في النص عن طريق استخدام عنصر <pre>. هذا العنصر يُحافظ على التنسيق الأصلي للنص، بما في ذلك المسافات والأسطر كما وُجدت في كود HTML.
Auto Break Lines With Paragraph
يُمكننا استخدام عنصر <pre> داخل عنصر <p> لعمل مسافات وأسطر فارغة بشكل تلقائي.
<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>
</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> هو اختصار لـ [horizontal rule]، وتعني خطًا أو قاعدة أو فاصلة أفقية. ويعتبر من نوع العناصر الفارغة [empty element].
ويُستخدم لإنشاء فواصل أفقية بين الفقرات والمواضيع داخل الصفحة، مما يساعد في الانتقال البصري، كما يحدث في القصص لتحويل القارئ من مشهد إلى آخر.
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>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
