مرحباً بكم في درس جديد من دروس تعلم لغة HTML ، شرح هذا الدرس عن كتابة المقالات وما يعرف بـ Paragraphs، من خلال عنصر <p> وهذا ما نشرحه بالتفصيل.
عنصر <p>
عنصر <p> مختص بالفقرات مثلاً او المقال، فلاحظ معي هذين الشكلين
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
طبعاً الشكلين، فيهم واحد مظبط بشكل جميل، و الآخر شكله غير مظبوط، ورغم ذلك يظهرو بنفس الشكل ولا يوجد اي مشكله نهائياً
This paragraph contains a lot of lines in the source code, but the browser ignores it.
This paragraph contains a lot of spaces in the source code, but the browser ignores it.
كما رأيت اخي، بنفس التنسيق، ولا يوجد مشكلة في ترتيب الكلمات.
علامة النهاية <br>
<p>This is<br>a paragraph<br>with line breaks.</p>
This paragraph contains a lot of lines in the source code, but the browser ignores it.
This paragraph contains a lot of spaces in the source code, but the browser ignores it.
كما رأيت اخي، بنفس التنسيق، ولا يوجد مشكلة في ترتيب الكلمات.
علامة النهاية <br>
<p>This is<br>a paragraph<br>with line breaks.</p>
ركز معي، ستجد ان كل جمله منهم في سطر منفصله عن اي جمله غيرها، شوف شكلهم.
This is
a paragraph
with line breaks.
a paragraph
with line breaks.
طبعاً في اول السطر مكتوب <p> واخر السطر مكتوب </p> ما بين الجُمل يوجد علامة النهاية وهي <br> ،، هذه العلامه تفصيل بين الكلام، وتجعل ما بعدها ينزل في سطر وحدها منفصل عن الكلام الذي قبلها كما في المثال الموجوده.
عنصر <pre>
هذا العنصر يجعل الفقره كما تضعها انت بنفس الشكل، انظر الى هذا الشكل.
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
فيظهر في الصفحه بنفس شكل المعاينه بالظبط، انظر ولاحظ الفرق.
كما رأيت، أن الشكل بنفس الشكل الموجود بالأعلى، بخلاف طبعاً ان الحروف اصبحت من كابتل الى اسمول (حروف كبيرة إلى حروف صغيرة) وطبعاً لا يظهر عنصر <pre>.
الخلاصة
عنصر <p> : يظهر الفقره كلها على سطر واحد، يعني لو كانت كل سطر منفصل تماماً عن سطر بعده، فهذا العنصر يجعلهم في سطر واحد وليس منفصلاً
علامة النهاية <br> : تفصل الكلام الذي بعدها، وتجعله في سطر منفصل عن اي كلام قبلها.
عنصر <pre> : يظهر الفقره كما تكتبها بالظبط، يعني لو كتبت سطر وتحت سطر فارغ ثم بعده سطر فيه كلام، فيجعل ما كتبته يظهر بنفس الشكل، وانا وضحت بمثال.
إلى هنا ننتهي من الدرس، واتمنى ان تفهم اي نقطه او شرح في الموضوع ان تكتب في تعليق استفسارك وسيتم الرد عليك في اقرب وقت.
المصدر w3schools
عنصر <pre>
هذا العنصر يجعل الفقره كما تضعها انت بنفس الشكل، انظر الى هذا الشكل.
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
فيظهر في الصفحه بنفس شكل المعاينه بالظبط، انظر ولاحظ الفرق.
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
كما رأيت، أن الشكل بنفس الشكل الموجود بالأعلى، بخلاف طبعاً ان الحروف اصبحت من كابتل الى اسمول (حروف كبيرة إلى حروف صغيرة) وطبعاً لا يظهر عنصر <pre>.
الخلاصة
عنصر <p> : يظهر الفقره كلها على سطر واحد، يعني لو كانت كل سطر منفصل تماماً عن سطر بعده، فهذا العنصر يجعلهم في سطر واحد وليس منفصلاً
علامة النهاية <br> : تفصل الكلام الذي بعدها، وتجعله في سطر منفصل عن اي كلام قبلها.
عنصر <pre> : يظهر الفقره كما تكتبها بالظبط، يعني لو كتبت سطر وتحت سطر فارغ ثم بعده سطر فيه كلام، فيجعل ما كتبته يظهر بنفس الشكل، وانا وضحت بمثال.
إلى هنا ننتهي من الدرس، واتمنى ان تفهم اي نقطه او شرح في الموضوع ان تكتب في تعليق استفسارك وسيتم الرد عليك في اقرب وقت.
المصدر w3schools