الفقرات HTML Paragraphs

فقرات HTML

يحدد عنصر<p> فقرة.
تبدأ الفقرة دائمًا بسطر جديد ، وتضيف النتصفحات تلقائيًا بعض المسافات البيضاء (هامش) قبل الفقرة وبعدها.
مثال

 <!DOCTYPE html>
<html>
<body>
   <p>هذه فقرة.</p>
   <p>هذه فقرة اخرى.</p>
</body>
</html>

عرض HTML

لا يمكنك التأكد من كيفية عرض HTML.

ستؤدي الشاشات الكبيرة أو الصغيرة والنوافذ التي تم تغيير حجمها إلى نتائج مختلفة.

باستخدام HTML ، لا يمكنك تغيير العرض عن طريق إضافة مسافات إضافية أو سطور إضافية في كود HTML الخاص بك.

سيقوم المتصفح تلقائيًا بإزالة أي مسافات وأسطر إضافية عند عرض الصفحة:

 <!DOCTYPE html>
<html>
<body>
<p>
هذه الفقرة
يحتوي على الكثير من الخطوط
في شفرة المصدر ،
لكن المتصفح
يتجاهله.
</p>
 
<p>
هذه الفقرة
يحتوي على الكثير       من الخطوط
في شفرة       المصدر ،
لكن      المتصفح
يتجاهله.
</p>
</body>
</html>

قواعد HTML الأفقية

تحدد العلامة <hr> فاصلًا موضوعيًا في صفحة HTML ، وغالبًا ما يتم عرضها كقاعدة أفقية.

يُستخدم العنصر <hr> لفصل المحتوى (أو تحديد تغيير) في صفحة HTML:

 <!DOCTYPE html>
<html>
<body>
   <h1>This is heading 1</h1>
   <p>This is some text.</p>
   <hr>
      <h2>This is heading 2</h2>
   <p>This is some other text.</p>
   <hr>
</body>
</html>

العلامة <hr> هي علامة فارغة ، مما يعني أنها لا تحتوي على علامة نهاية.

فواصل أسطر HTML

يحدد عنصر <br> HTML فاصل الأسطر.

استخدم <br> إذا كنت تريد فاصل أسطر (سطر جديد) بدون بدء فقرة جديدة:

 <!DOCTYPE html>
<html>
<body>
   <p>هذه<br />فقرة<br />تنزل الى سطر جديد.</p>
</body>
</html>

علامة <br> هي علامة فارغة ، مما يعني أنها لا تحتوي على علامة نهاية.

مشكلة في عرض قصيدة

ستعرض هذه القصيدة على سطر واحد:

 <!DOCTYPE html>
<html>
<body>
   <p>
تقع بوني فوق المحيط . 
 
   تقع بوني فوق البحر.
 
   تقع بوني فوق المحيط.
 
   أوه ، أعد بوني لي.
</p>
</body>
</html>

الحل - عنصر <pre>

يحدد عنصر <pre> النص المنسق مسبقًا.

يتم عرض النص الموجود داخل عنصر <pre> بخط ذو عرض ثابت (عادةً ما يكون Courier) ، ويحتفظ بالمسافات وفواصل الأسطر:

 <!DOCTYPE html>
<html>
<body>
   <div><pre>
تقع بوني فوق المحيط .
 
   تقع بوني فوق البحر.
 
   تقع بوني فوق المحيط.
 
   أوه ، أعد بوني لي.
</pre></div>
</body>
</html>

الدرس السابق الدرس التالي

	<!DOCTYPE html>
	<html>
	<body>
	<p>هذه فقرة.</p>
	<p>هذه فقرة اخرى.</p>
	</body>
	</html>