HTML Paragraphs
الفقرات النصية في لغة HTML
سنتعلم في هذا الدرس إضافة وصف للمواضيع داخل صفحة HTML _عن طريق عنصر <p>_، وسنتعلم أيضًا طريقة وضع المسافات بين الكلمات داخل الفقرات، وطريقة عمل سطر فاصل بين كل فقرة وأخرى.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
HTML Paragraphs
الفقرات النصية في لغة HTML
</>
HTML paragraphs
الفقرات النصية في لغة HTML
تحتوي كل صفحة ويب بداخلها على فقرات نصية وصفية، تصف صفحة الويب أو تصف أحد المواضيع الفرعية الموجودة داخل صفحة الويب، كما يمكن استخدام عنصر الفقرات النصية "paragraphs" عدّة مرات، أي يمكن تكراره في صفحة الويب واستخدامه كلما أردت كتابة أي وصف نصي.
الفقرات النصية "paragraphs" في لغة HTML:
- عنصر paragraph من نوع العناصر المُتداخلة "nested elements"، وتكون على الشكل <p>.
- تستطيع استخدام الـفقرات النصية "paragraphs" عدد لانهائي من المرات في نفس صفحة HTML.
ملاحظات هامة
- تتجاهل المتصفحات كل المسافات بين الكلمات بداخل الفقرات النصية إلا مسافة واحدة، أي أن المسافة الزائدة لا تظهر على المتصفح عند العرض، فإذا كنت بحاجة لكتابة عدّة مسافات استخدم عناصر formatting.
- تتجاهل المتصفحات كل السطور بين الفقرات النصية إلا سطر واحد وهو الافتراضي بين كل عنصر <p>، فإذا كنت بحاجة لعمل عدّة أسطر استخدم عناصر formatting.
</>
HTML paragraphs syntax
كتابة عناصر الفقرات النصية في لغة HTML
عنصر <p> هو عبارة عن فقرات نصية داخل صفحة الويب، وهو يشرح المحتوى المكتوب داخل العناوين.
أين يُكتب عنصر الفقرات النصية <p> في لغة HTML
- يُكتب دائمًا في عنصر الـ body element لشرح ووصف الصفحة أو المواضيع أو غير ذلك...
- لا يهم موقع عنصر <p> داخل عنصر <body> فقد قد يكون عنصر <p> أسفل العناوين الرئيسية أو الفرعية "headings"، وقد يكون أعلى منها.
وظيفة عنصر الفقرات النصية <p> في لغة HTML
- وصف محتوى صفحة الويب.
- وصف وشرح جميع العناوين الموجودة داخل صفحة الويب.
استخدام الفقرات النصية <p> في لغة HTML بطريقة صحيحة
هناك بعض الأمور التي يجب مراعاتها لاستخدام الفقرات النصية في لغة HTML بشكل صحيح:
- استخدم الفقرات النصية "paragraphs" كما تشاء داخل صفحة الويب داخل عنصر body.
- يُفضل أن يعتلي الفقرات النصية "paragraphs" عناوين رئيسية أو فرعية.
- الفقرات النصية "paragraphs" في لغة HTML من نوع العناصر المُتداخلة "nested elements".
- الفقرات النصية "paragraphs" في لغة HTML تكون tag name بعلامة <p>.
HTML paragraphs syntax
طريقة كتابة عنصر paragraph في لغة HTML.
<p>My first paragraph.</p>
Paragraphs syntax
طريقة إضافة نصوص داخل عنصر paragraph في لغة 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 أو صفحات الويب.
- يقوم المتصفح بشكل تلقائي بعمل فاصل بين كل فقرة وفقرة، أي أنه يقوم بوضع كل فقرة على سطر جديد في أي صفحة HTML.
</>
Break line with paragraph in HTML
السطور الفارغة مع الفقرات النصية في HTML
يُمكن عمل سطور إضافية فارغة بين الفقرات النصية في لغة HTML، عن طريق عنصر break الذي يُمكّنك من وضع عدّة سطور بين الفقرات للترتيب والتنظيم.
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> عنصر break لعمل margin محاذاة بين الفقرات النصية، وذلك لأن المحاذاة في صفحة الويب بين الفقرات تتم في لغة CSS، والتي سوف نتعلمها بعد الانتهاء من لغة HTML.
</>
Auto break lines with paragraph in HTML
أسطر فارغة بشكل تلقائي مع الفقرات النصية في لغة 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>
هام
يلغي عنصر <pre> أي تنسيقات داخل الفقرة كألوان النصوص، وهي نقطة من المهم أخذها بعين الاعتبار عند استخدام عنصر <pre>.
</>
hr element with paragraphs in HTML
استخدام عنصر hr مع عناصر الفقرات في لغة HTML
عنصر <hr> اختصار لكلمة [ Horizontal Rule ] بمعنى فاصلة أفقية أو خط أفقي أو قاعدة أفقية. وهو من نوع empty element العناصر الفارغة.
يُستخدم عنصر <hr> لعمل فواصل أفقية بين الفقرات وبين المواضيع داخل صفحة الويب، حيث تُستخدم الفواصل الأفقية لتحويل القُراء من مشهد إلى مشهد آخر، كما في القصص.
hr element syntax
يُكتب عنصر <hr> في لغة HTML على هيئة open tag فقط، لأنه من نوع empty elements العناصر الفارغة.
<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>
فقرات HTML
فقرات
متداخلة
عناوين
اسم العلامة
خط فاصل
تنسيق
فاصل
عنصر فارغ
علامة
مسافات
خط فاصل تلقائي
Hypertext Markup Language
لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
