آموزش تگ pre در HTML
تگ <pre> یکی از تگ‌های مفید در HTML است که برای نمایش متن یا کد با فرمت‌های پیش‌فرض استفاده می‌شود. این تگ به ما امکان می‌دهد که متن را به صورت قالب‌بندی شده و با حفظ فضاها، خطوط خالی و دیگر نویسه‌ها نمایش دهیم. در این مقاله، به طور کامل توضیحات، حالت‌ها و attribute های تگ <pre> را بررسی خواهیم کرد و با مثال‌هایی این تگ را بیشتر بررسی می‌کنیم.
توضیحات مفهومی:
تگ <pre> در HTML برای نمایش متن با فرمت‌های خاص استفاده می‌شود. این تگ از تمام فاصله‌ها، خطوط خالی و دیگر نویسه‌ها بدون تغییر و با حفظ دقیق آنها نمایش می‌دهد. به عبارت دیگر، متن داخل این تگ به صورت دقیق همانطور که وارد شده است نمایش داده می‌شود و هیچگونه فرمت‌بندی اضافی به آن اعمال نمی‌شود.
تمامی حالت‌ها و Attribute ها:
۱. حالت نرمال:
در حالت نرمال، تگ <pre> به صورت زیر استفاده می‌شود:
<pre>
این یک متن نمونه است.
این یک خط جدید است.
</pre>۲. حالت با استفاده از Attribute class:
با استفاده از Attribute class می‌توانیم قالب‌بندی‌های سفارشی برای متن داخل تگ <pre> اعمال کنیم. به عنوان مثال:
<pre class="custom-code">
این یک متن نمونه است.
این یک خط جدید است.
</pre>مثال‌ها:
۱. مثال نرمال:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
</head>
<body>
<pre>
این یک متن نمونه است.
این یک خط جدید است.
</pre>
</body>
</html>۲. مثال با استفاده از Attribute class:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<style>
.custom-code {
color: blue;
background-color: lightgrey;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<pre class="custom-code">
این یک متن نمونه است.
این یک خط جدید است.
</pre>
</body>
</html>نتیجه‌گیری:
تگ <pre> در HTML یک ابزار قدرتمند برای نمایش متن با فرمت‌های خاص است. با استفاده از این تگ، می‌توانید متن را به صورت دقیق و با حفظ فضاها و خطوط خالی نمایش دهید. همچنین با استفاده از Attribute class می‌توانید قالب‌بندی‌های سفارشی برای متن اعمال کنید و ظاهر آن را به دلخواه تغییر دهید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام