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>
Name: Mhamad Harmush
Job: Programmer
Age: 26
</pre>
في المثال التالي قمنا بعرض كود بداخل الوسم <pre> حتى يتم عرضه كما هو في الصفحة.
المثال الثاني
<pre>
<!DOCTYPE html>
<html>
<body>
<p>HTML & CSS are so easy to learn</p>
</body>
</html>
</pre>
<pre>
<!DOCTYPE html>
<html>
<body>
<p>HTML & CSS are so easy to learn</p>
</body>
</html>
</pre>
في المثال التالي قمنا بوضع الرموز بداخل الوسم <pre> بشكل تظهر فيها و كأنها صورة.
المثال الثالث
<pre>
░░░░░░░░░░░▄▄▀▀▀▀▀▀▀▀▄▄
░░░░░░░░▄▀▀░░░░░░░░░░░░▀▄▄
░░░░░░▄▀░░░░░░░░░░░░░░░░░░▀▄
░░░░░▌░░░░░░░░░░░░░▀▄░░░░░░░▀▀▄
░░░░▌░░░░░░░░░░░░░░░░▀▌░░░░░░░░▌
░░░▐░░░░░░░░░░░░▒░░░░░▌░░░░░░░░▐
░░░▌▐░░░░▐░░░░▐▒▒░░░░░▌░░░░░░░░░▌
░░▐░▌░░░░▌░░▐░▌▒▒▒░░░▐░░░░░▒░▌▐░▐
░░▐░▌▒░░░▌▄▄▀▀▌▌▒▒░▒░▐▀▌▀▌▄▒░▐▒▌░▌
░░░▌▌░▒░░▐▀▄▌▌▐▐▒▒▒▒▐▐▐▒▐▒▌▌░▐▒▌▄▐
░▄▀▄▐▒▒▒░▌▌▄▀▄▐░▌▌▒▐░▌▄▀▄░▐▒░▐▒▌░▀▄
▀▄▀▒▒▌▒▒▄▀░▌█▐░░▐▐▀░░░▌█▐░▀▄▐▒▌▌░░░▀
░▀▀▄▄▐▒▀▄▀░▀▄▀░░░░░░░░▀▄▀▄▀▒▌░▐
░░░░▀▐▀▄▒▀▄░░░░░░░░▐░░░░░░▀▌▐
░░░░░░▌▒▌▐▒▀░░░░░░░░░░░░░░▐▒▐
░░░░░░▐░▐▒▌░░░░▄▄▀▀▀▀▄░░░░▌▒▐
░░░░░░░▌▐▒▐▄░░░▐▒▒▒▒▒▌░░▄▀▒░▐
░░░░░░▐░░▌▐▐▀▄░░▀▄▄▄▀░▄▀▐▒░░▐
░░░░░░▌▌░▌▐░▌▒▀▄▄░░░░▄▌▐░▌▒░▐
░░░░░▐▒▐░▐▐░▌▒▒▒▒▀▀▄▀▌▐░░▌▒░▌
░░░░░▌▒▒▌▐▒▌▒▒▒▒▒▒▒▒▐▀▄▌░▐▒▒
</pre>
<pre>
░░░░░░░░░░░▄▄▀▀▀▀▀▀▀▀▄▄
░░░░░░░░▄▀▀░░░░░░░░░░░░▀▄▄
░░░░░░▄▀░░░░░░░░░░░░░░░░░░▀▄
░░░░░▌░░░░░░░░░░░░░▀▄░░░░░░░▀▀▄
░░░░▌░░░░░░░░░░░░░░░░▀▌░░░░░░░░▌
░░░▐░░░░░░░░░░░░▒░░░░░▌░░░░░░░░▐
░░░▌▐░░░░▐░░░░▐▒▒░░░░░▌░░░░░░░░░▌
░░▐░▌░░░░▌░░▐░▌▒▒▒░░░▐░░░░░▒░▌▐░▐
░░▐░▌▒░░░▌▄▄▀▀▌▌▒▒░▒░▐▀▌▀▌▄▒░▐▒▌░▌
░░░▌▌░▒░░▐▀▄▌▌▐▐▒▒▒▒▐▐▐▒▐▒▌▌░▐▒▌▄▐
░▄▀▄▐▒▒▒░▌▌▄▀▄▐░▌▌▒▐░▌▄▀▄░▐▒░▐▒▌░▀▄
▀▄▀▒▒▌▒▒▄▀░▌█▐░░▐▐▀░░░▌█▐░▀▄▐▒▌▌░░░▀
░▀▀▄▄▐▒▀▄▀░▀▄▀░░░░░░░░▀▄▀▄▀▒▌░▐
░░░░▀▐▀▄▒▀▄░░░░░░░░▐░░░░░░▀▌▐
░░░░░░▌▒▌▐▒▀░░░░░░░░░░░░░░▐▒▐
░░░░░░▐░▐▒▌░░░░▄▄▀▀▀▀▄░░░░▌▒▐
░░░░░░░▌▐▒▐▄░░░▐▒▒▒▒▒▌░░▄▀▒░▐
░░░░░░▐░░▌▐▐▀▄░░▀▄▄▄▀░▄▀▐▒░░▐
░░░░░░▌▌░▌▐░▌▒▀▄▄░░░░▄▌▐░▌▒░▐
░░░░░▐▒▐░▐▐░▌▒▒▒▒▀▀▄▀▌▐░░▌▒░▌
░░░░░▌▒▒▌▐▒▌▒▒▒▒▒▒▒▒▐▀▄▌░▐▒▒
</pre>
تصميمه الإفتراضي
بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.
pre {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0;
}
pre {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0;
}
نصائح و ملاحظات
إستخدم الوسم <p> في حال أردت عرض فقرة عادية في الصفحة.
و إستخدم الوسم <pre> في حال أردت عرض نص تريده أن يظهر كما هو.
