آموزش تگ pre در HTML

2 شهریور 1401
ارسال شده توسط
آموزش html css
آموزش تگ 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">
   &lt;a href="#"&gt;
   &lt;img src="logo.png"&gt;
   &lt;/a&gt;
 </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 در این موارد بسیار مهارت پیدا کنید.

 

برای امتیاز به این نوشته کلیک کنید!
[کل: 0 میانگین: 0]

در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید

فرم درخواست پشتیبانی (فرم زیر پست ها)

برچسب ها:

دیدگاهتان را بنویسید