آموزش تگ template در HTML

دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html css قراره که با نحوه ی قرار دادن تگ template در HTML به صورت کامل آشنا بشید.

تگ Template در HTML

تگ template تگی است که با استفاده از آن میتوانید محتوایی را درون یک صفحه بارگذاری کنید. ولی از نمایش و بارگذاری همزمان آن با بارگذاری صفحه وب جلوگیری کنید.

اینو همیشه در نظر داشته باشید که بصورت عادی وقتی یک صفحه درون مرورگر اجرا میشه، همه ی تگ های داخل صفحه هم در مرورگر بصورت خودکار اجرا ( رندر یا Render ) میشن.

حال تگ template و هرچیزی که داخلش قرار بدیم، دیگه بلا فاصله بعد از بالا اومدن صفحه اجرا نمیشه، بلکه صرفا باید خودمون بصورت دستی اونو اجرا ( نمایش ) بدیم، که اکثرا از جاوا اسکرپیت برای نمایش محتوای تگ template استفاده می کنند.

ساختار تگ <template>

تگ تمپلیت میتوانید هر جای صفحه، head , body یا حتی درون frameset قرار بدهید. با این حال:

۱- template به کاربر نمایش داده نمی شود.

۲- template بخشی از DOM در نظر گرفته نمی شود. برای مثال متد getElementById فرزندان template را در بر نمی گرداند.

۳- template یک تگ غیرفعال است. به عنوان مثال تصاویر درون آن دانلود نمی شود، اسکریپت های درون آن اجرا ( رندر یا Render ) نمی شوند و به همین شکل.

نحوه فعالسازی template به این شکل است که اول باید عناصر داخل template را مقداردهی کنید سپس از روی آن‌ها یکی بسازید ( clone کنید ) که اینکار از طریق متد importNode انجام می‌پذیرد، و سپس در جای دلخواه خود در DOM قرار بدهید.

مثال از تگ template در HTML

در ادامه دوره ی آموزشی html css میتوانید یک مثال از این تگ را مشاهده نمایید.

مثال شماره ۱ : استفاده از تگ template

همونطور که در بالا گفتیم بشکل عادی هرچیزی که داخل تگ template قرار داشته باشه در مرورگر نشون داده نمیشه و ما باید خودمون از طریق جاوااسکریپت اونو به نمایش دربیاریم.

<template id="MyTemplate">
 <h2>سایت آموزشی وردپرس پوش</h2>
 <img src="files/logo.png" width="90">
</template>

راستی اگر دنبال آموزش html css پروژه محور هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید.

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ template در HTML پشتیبانی میکنند یا خیر.

پشتیبانی از صفات و رویدادهای عمومی

تگ template تنها از صفات عمومی در HTML پشتیبانی می کند.

نکات و توضیحات

• اغلب از جاوااسکریپت یا جی کوئری برای نمایش دادن تگ template استفاده می کنند، و به محض نمایش این تگ ، همون لحظه هم در مرورگر اجرا میشه.

تفاوت بین HTML 4.01 و HTML5

تگ template در HTML5 تگ جدیدی بحساب می آید.

ویژگی های سراسری Global Attributes

تگ <template> از ویژگی های سراسری در HTML پشتیبانی می کند.

ویژگی رویداد Event Attributes

تگ <template> از ویژگی رویداد در HTML پشتیبانی می کند.

شما میتوانید با آموزش html و css در این موارد بسیار مهارت پیدا کنید.