آموزش تگ pre در HTML

آموزش تگ pre در HTML
دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html css قراره که با آموزش تگ pre در HTML به صورت کامل آشنا بشید.
تگ Pre در HTML
تگ pre
که از کلمه بلند ( PreFormatted ) گرفته شده است، معنای لغوی آن ( پیش فرمت ) است، تگی ست که با استفاده از آن میتوان یک متن سفارشی با سلیقه ی خودمان یا مثلا یک متن با فرمت دلخواه را داخل یک صفحه وب ایجاد کرد.
همونطور که میدونید در زبان HTML در حالت عادی و بدون تگ ما نمیتونیم متنی را بصورت دلخواه با فرمت دلخواه ایجاد کنیم، به عنوان مثال ما نمیتونیم در یک پاراگراف هرچقدر که بخوایم بین کلمات فاصله بندازیم یا مثلا نمیتونیم اینتر بزنیم و سطر رو بشکنیم بریم سطر بعد و یا نمیتونیم جملات نامنظم ایجاد کنیم و …
حال ما با استفاده از تگ pre
به راحتی و سهولت میتونیم هرمتنی را با هرنوع فرمتی و هر شکلی که بخوایم در یک صفحه وب ایجاد نماییم. (این یعنی در کل هرچی داخل این تگ بنویسید در خروجی هم دقیقا و عینا همونجوری نشونش میده )
مثال از تگ pre در HTML
در ادامه آموزش html و css میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال اول : استفاده از تگ pre ( بدون استایل )
<body> <pre> سایت آموزشی وردپرس پوش سلام خوبی؟ ----- هرچی دلم بخواد اینجا تایپ میکم </pre> </body>
مثال دوم : ایجاد باکس کد ( یه باکسی که بشه کد توش گذاشت ) مثه همین باکس هایی که بالا و پایین دارید میبینید
<body> <pre class="mycode"> <a href="#"> <img src="logo.png"> </a> </pre> </body>
راستی اگر دنبال آموزش html css پروژه محور هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید.
پشتیبانی مرورگرها
در جدولی که در پایین مشاهده می کنید به این نتیجه می رسید که آیا مرورگرهای اینترنتی از تگ pre
در HTML پشتیبانی میکنند یا خیر.
پشتیبانی از صفات و رویدادهای عمومی
تگ pre
از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
نکات و توضیحات
- بصورت از پیش تعیین شده و پیش فرض این تگ هیچ استایل خاصی نداره ولی خب ما با استفاده از CSS میتونیم به آسانی بهش استایل بدیم. ( همانند مثال شماره ۲ )
دستورات CSS پیش فرض
در اکثر مواقع مرورگرها تگ pre
را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
pre { display: block; font-family: monospace; white-space: pre; margin: 1em 0; }
شما میتوانید با دوره ی آموزشی html css در این موارد بسیار مهارت پیدا کنید.
در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید
دیدگاهتان را بنویسید