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