سلام پی وی لرنی های عزیز!
به دوره آموزش تگ های HTML خوش آمدید!
HTML یا Hypertext Markup Language یک نوع زبان نشانهگذاری استاندارد برای ایجاد صفحات اینترنت و وب محسوب می شود.
می توان ادعا کرد که HTML دروازه ورود و پیشرفت برای یادگیری سایر زبان های برنامه نویسی هم چون CSS و جاوا اسکریپت است.
HTML ساختار و اسکلت صفحات وب را تشکیل می دهد و بدون آن نمی توان هیچ صفحه وبی را ساخت.
دوست دارید طراح وب شوید؟
خب باید HTML را بیاموزید!
نگران نشوید! یادگیری HTML کار دشواری نیست و با کمی تلاش خیلی زود در آن استاد می شوید.
در جلسه گذشته به کار با تگ td پرداختیم؛ تگ td یک سلول استاندارد را در یک جدول HTML تعریف می کند.
در ادامه این دوره، به سراغ آموزش کار با تگ template در HTML می رویم.
به مثال زیر توجه نمایید.
در این مثال از تگ template استفاده شده و این تگ کد HTML را بدون نمایش آن نگه می دارد.
1 2 3 4 | <template> <h2>Flower</h2> <img src="img_white_flower.jpg"> </template> |
تگ template تگی است که محتوای خود را از دید کاربر پنهان می کند.
محتوای ارائه شده در تگ template رندر rendere نمی شود بنابرین برای آشکار سازی آن از JavaScript استفاده می گردد.
اگر می خواهید بارها و بارها از کد HTML استفاده نمایید؛ لذا از تگ template استفاده نمایید؛ برای انجام این کار بدون تگ template باید کد HTML را JavaScript بسازید تا از رندر شدن کد توسط مرورگر؛ جلوگیری کنید.
عنصر | |||||
<template> | بله | بله | بله | بله | بله |
تگ template در HTML5 تگ جدیدی محسوب می شود.
تگ <template> از خصیصه های سراسری در HTML پشتیبانی می کند.
تگ <template> از خصیصه رویداد در HTML پشتیبانی می کند.
استفاده از JavaScript برای دسترسی به محتوای یک template و افزودن آن به صفحه:
1 2 3 4 5 | function showContent() { var temp = document.getElementsByTagName("template")[0]; var clon = temp.content.cloneNode(true); document.body.appendChild(clon); } |
استفاده از محتوای موجود درون یک template برای هر یک از آیتم های درون یک آرایه:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <template> <div class="myClass">I like: </div> </template> <script> var myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"]; function showContent() { var temp, item, a, i; // Get the template element: temp = document.getElementsByTagName("template")[0]; // Get the DIV element from the template: item = temp.content.querySelector("div"); // For each item in the array: for (i = 0; i < myArr.length; i++) { // Create a new node, based on the template: a = document.importNode(item, true); // Add data from the array: a.textContent += myArr[i]; // Append the new node wherever you like: document.body.appendChild(a); } } </script> |
تست پشتیبانی مرورگر برای عنصر template :
1 2 3 4 5 | if (document.createElement("template").content) { /*Code for browsers that supports the TEMPLATE element*/ } else { /*Alternative code for browsers that do not support the TEMPLATE element*/ } |
در این جلسه به آموزش کار با تگ template در HTML پرداختیم؛ به طور کلی تگ template تگی است که محتوای خود را از دید کاربر پنهان می کند.
در جلسه بعدی به کار با تگ textarea می پردازیم.
با پی وی لرن همراه باشید.