HTML

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

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

التاريخ

11 يناير 2020

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

7052

المواضيع

12
الشروحات chevron_left HTML Paragraphs chevron_left HTML

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

يمكن جعل المتصفح يعرض جميع المسافات والأسطر الفارغة، أي عمل spaces مسافات تلقائية و break lines سطور تلقائية، وذلك من خلال استخدام عنصر <pre> من نوع nested elements العناصر المُتداخلة.
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 Paragraphs
HTML Paragraphs

فقرات HTML

Paragraphs
Paragraphs

فقرات

Nested
Nested

متداخلة

Heading
Heading

عناوين

Tag Name
Tag Name

اسم العلامة

Break Line
Break Line

خط فاصل

formatting
formatting

تنسيق

Break
Break

فاصل

Empty Element
Empty Element

عنصر فارغ

Tag
Tag

علامة

Spaces
Spaces

مسافات

Auto Break Lines
Auto Break Lines

خط فاصل تلقائي

اختصارات الدرس
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.