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

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> في حال أردت عرض نص تريده أن يظهر كما هو.

إعلان
دورة قواعد بيانات MySQL في هذه الدورة ستتعلم أساسيات قواعد البيانات و أوامر SQL، العلاقات (Join) بين الجداول، Normalization مع تطبيق مشروع متكامل. سعر الدورة الآن هو 20 ريال سعودي فقط بدلاً من 600 ريال
سعر الدورة الآن هو 20 ريال سعودي فقط بدلاً من 600 ريال
تعلم الآن

الدورات

أدوات مساعدة

أقسام الموقع

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