إعلان
تعلم الآن

HTML الوسم <pre>

تعريفه

نستخدم الوسم <pre> على هذا النحو <pre>content</pre> لعرض نص بنفس الشكل الذي تم وضعه فيه.

مكان الكلمة content نقوم بوضع النص الذي سيتم عرضه كما تم وضعه فيه.

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسم <pre>.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
مدعوم 12 1 مدعوم مدعوم مدعوم مدعوم 4 مدعوم مدعوم مدعوم

خصائصه

لا يملك أي خصائص تم إعدادها خصيصاً له.

إستخدامه

في المثال التالي قمنا بوضع النص بداخل الوسم <pre> حتى يتم عرضه كما هو في الصفحة.

المثال الأول

<pre>
Name: Mhamad Harmush
Job:  Programmer
Age:  26
</pre>
		

جرب الكود



في المثال التالي قمنا بعرض كود بداخل الوسم <pre> حتى يتم عرضه كما هو في الصفحة.

المثال الثاني

<pre>
&lt;!DOCTYPE html>
&lt;html>
    &lt;body>
        &lt;p>HTML &amp; CSS are so easy to learn&lt;/p>
    &lt;/body>
&lt;/html>
</pre>
		

جرب الكود



في المثال التالي قمنا بوضع الرموز بداخل الوسم <pre> بشكل تظهر فيها و كأنها صورة.

المثال الثالث

<pre>
░░░░░░░░░░░▄▄▀▀▀▀▀▀▀▀▄▄
░░░░░░░░▄▀▀░░░░░░░░░░░░▀▄▄
░░░░░░▄▀░░░░░░░░░░░░░░░░░░▀▄
░░░░░▌░░░░░░░░░░░░░▀▄░░░░░░░▀▀▄
░░░░▌░░░░░░░░░░░░░░░░▀▌░░░░░░░░▌
░░░▐░░░░░░░░░░░░▒░░░░░▌░░░░░░░░▐
░░░▌▐░░░░▐░░░░▐▒▒░░░░░▌░░░░░░░░░▌
░░▐░▌░░░░▌░░▐░▌▒▒▒░░░▐░░░░░▒░▌▐░▐
░░▐░▌▒░░░▌▄▄▀▀▌▌▒▒░▒░▐▀▌▀▌▄▒░▐▒▌░▌
░░░▌▌░▒░░▐▀▄▌▌▐▐▒▒▒▒▐▐▐▒▐▒▌▌░▐▒▌▄▐
░▄▀▄▐▒▒▒░▌▌▄▀▄▐░▌▌▒▐░▌▄▀▄░▐▒░▐▒▌░▀▄
▀▄▀▒▒▌▒▒▄▀░▌█▐░░▐▐▀░░░▌█▐░▀▄▐▒▌▌░░░▀
░▀▀▄▄▐▒▀▄▀░▀▄▀░░░░░░░░▀▄▀▄▀▒▌░▐
░░░░▀▐▀▄▒▀▄░░░░░░░░▐░░░░░░▀▌▐
░░░░░░▌▒▌▐▒▀░░░░░░░░░░░░░░▐▒▐
░░░░░░▐░▐▒▌░░░░▄▄▀▀▀▀▄░░░░▌▒▐
░░░░░░░▌▐▒▐▄░░░▐▒▒▒▒▒▌░░▄▀▒░▐
░░░░░░▐░░▌▐▐▀▄░░▀▄▄▄▀░▄▀▐▒░░▐
░░░░░░▌▌░▌▐░▌▒▀▄▄░░░░▄▌▐░▌▒░▐
░░░░░▐▒▐░▐▐░▌▒▒▒▒▀▀▄▀▌▐░░▌▒░▌
░░░░░▌▒▒▌▐▒▌▒▒▒▒▒▒▒▒▐▀▄▌░▐▒▒
</pre>
		

جرب الكود

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

pre {
	display: block;
	font-family: monospace;
	white-space: pre;
	margin: 1em 0;
}
	

نصائح و ملاحظات

إستخدم الوسم <p> في حال أردت عرض فقرة عادية في الصفحة.
و إستخدم الوسم <pre> في حال أردت عرض نص تريده أن يظهر كما هو.

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة