الكورس

Advertisements

HTML Paragraphs | In Arabic


سوف نتعلم فى هذا الفصل “HTML Paragraphs” كل المعلومات والتفاصيل حول الفقرات فى HTML وكيفية إستخدامها بطريقة صحيحة.


 

الفقرات في HTML

 

يتم استخدام الفقرات لنشر النص على صفحات الويب، ويعد هذا العنصر من العناصر الأساسية فى صفحة الويب.

لإنشاء فقرة فى HTML نستخدم الوسم <p>. هذا العنصر من النوع block-level ويبدأ دائمًا في سطر جديد. قبل وبعد كل فقرة ، تضيف المتصفحات هامشًا (padding) تلقائيًا (يمكنك تعديل هذه الهوامش عن طريق CSS باستخدام خاصية الـ padding).

 

مثال للتوضيح:

<p>This is Paragraph.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.</p>

This is Paragraph.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.

يعد استخدام عناصر <p> فارغة لإضافة مسافة بين الفقرات مشكلة للأشخاص الذين يتنقلون باستخدام تقنية قراءة الشاشة. قد تعلن برامج قراءة الشاشة عن وجود الفقرة ، ولكن ليس أي محتوى بداخلها – لأنه لا يوجد أي محتوى. يمكن أن يؤدي ذلك إلى إرباك الشخص الذي يستخدم قارئ الشاشة وإحباطه.

يساعد تقسيم المحتوى إلى فقرات في تسهيل الوصول إلى الصفحة. توفر قارئات الشاشة والتقنيات المساعدة الأخرى اختصارات للسماح لمستخدميها بالتخطي إلى الفقرة التالية أو السابقة ، مما يسمح لهم بقراءة المحتوى مثل كيف تتيح المساحة البيضاء White space للمستخدمين المرئيين التنقل.


 

إغلاق الفقرة Closing a Paragraph

 

معظم المتصفحات تعرض كود HTML بشكل صحيح حتى إذا نسيت إغلاق الوسم، فمثلا إذا كتبت:

<p>This is Paragraph.
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.

سيعمل كود HTML في المثال السابق في معظم متصفحات الويب، ولكن لا تعتمد على ذلك؛ لأنه من الممكن أن تؤدي هذه الطريقة إلى نتائج او أخطاء غير متوقعة وخصوصًا فى المواقع الكبيرة.


 

إنشاء فواصل الخط Breaks

 

إذا كنت تريد نقل النص إلى سطر جديد او لإدراج فاصل أسطر في صفحة الويب، يمكنك استخدم العلامة وسم <br>. وهو عنصر فارغ (أى ليس له وسم إغلاق).

 

مثال للتوضيح:

<p>Vestibulum ante ipsum primis in faucibus orci luctus <br> et ultrices posuere cubilia.</p>

Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia.


Advertisements

 

إنشاء خطوط أفقية Horizontal Rules

 

لإنشاء خطوط أفقية لفصل أقسام المحتوى بصريًا على صفحة الويب يمكنك استخدام وسم <hr>. يعد وسم <hr> عنصرًا فارغًا أيضًا .

 

مثال للتوضيح:

<p>This is Paragraph.</p>
<hr>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.</p>

This is Paragraph.


Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.


 

المساحات البيضاء/الخالية White spaces

 

عادةً ما يعرض المستعرض المسافات البيضاء التي تم إنشاؤها داخل كود HTML بالضغط على مفتاح شريط المسافة على لوحة المفاتيح كمسافة واحدة.

عند ادراك مسافة بين النصوص فى HTML يتم تجاهلها تمامًا. فى المثال التالى سيتم عرض الفقرة في سطر واحد دون اي مسافة إضافية بين النص:

<p>Vestibulum     ante      ipsum primis    in 
faucibus orci    luctus et ultrices  
posuere cubilia.</p>

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.

لإدراج مسافة بين النص يمكنك استخدام ;nbsp&، كالتالى:

<p>Vestibulum&nbsp;&nbsp;&nbsp;ante&nbsp;ipsum primi&nbsp;in 
faucibus orci&nbsp;&nbsp;luctus.</p>

Vestibulum   ante ipsum primi in faucibus orci  luctus.

في بعض الأحيان استخدام ;nbsp&، وما إلى ذلك لإدارة المسافات ليس مناسبًا.


قَيم نفسك – Mini quiz


قُم بإجراء هذا الإختبار القصير على درس “HTML Paragraphs” لمعرفة مدى فهمك وإستيعابك للمعلومات السابقة، ولتثبيت المعلومات.




الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

[email protected]

شكرًا لك على مساعدتك لنا!

Advertisements