تگ های سفارشی در HTML — به زبان ساده

۶۷۶ بازدید

آخرین به‌روزرسانی: ۱۲ شهریور ۱۴۰۲

زمان مطالعه: ۶ دقیقه

در این راهنما یک روش ساده برای بسط زبان HTML با استفاده از تگ‌های سفارشی خواهیم آموخت. این تگ‌های سفارشی برای پیاده‌سازی رفتارهای مختلف قابل استفاده هستند و از این رو روشی راحت برای نوشتن کد کمتر و ساده‌سازی ساختار اسناد HTML به حساب می‌آیند.

فهرست مطالب این نوشته

تگ سفارشی HTML چیست؟

مثال 1: ایجاد تگ HTML سفارشی گراواتار

مثال 2: تگ HTML سفارشی پیشرفته برای ترسیم نمودار دایره‌ای

سخن پایانی

تگ سفارشی HTML چیست؟

ما در HTML در اغلب موارد با تگ‌ها سر و کار داریم. برای نمونه از تگ <b> برای نمایش متن در حالت bold استفاده می‌کنیم اگر به یک لیست نیاز داشته باشیم از تگ <ul> به همراه تگ فرزند <li> برای هر یک از آیتم‌های لیست استفاده می‌کنیم. تگ‌ها از سوی مرورگرها تفسیر می‌شوند و همراه با CSS، شیوه نمایش محتوای صفحه وب و همچنین طرز رفتار بخش‌های مختلف محتوا را تعیین می‌کنند.

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

برخی اوقات استفاده صرف از تگ‌های HTML برای ارائه کارکردهای مورد نیاز اپلیکیشن‌های مختلف کافی نیست. به طور معمول این نقص از طریق استفاده از چندین تگ HTML همراه با کد جاوا اسکریپت و CSS رفع می‌شود، اما این راه‌حل چندان هوشمندانه نیست.

راه‌حل هوشمندانه‌تر استفاده از یک تگ سفارشی است. تگ سفارشی شناسه‌ای است که درون <> قرار می‌گیرد و از سوی مرورگر برای اجرای کارکرد مورد نظر رندر می‌شود. از تگ‌های سفارشی نیز می‌توان همانند تگ‌های معمول HTML چندین بار در یک صفحه وب استفاده کرد. همچنین می‌توانیم از خصوصیاتی برای تگ تعریف کنیم یا تگ‌های فرعی برای کمک به کارکردهای تگ سفارشی تعیین نماییم. در ادامه همه این موارد را به کمک مثالی بررسی می‌کنیم.

مثال 1: ایجاد تگ HTML سفارشی گراواتار

برای مثال در این بخش یک تگ سفارشی ایجاد می‌کنیم که تصویر گراواتار یک ایمیل خاص را نشان می‌دهد. ما این تگ را <codingdude-gravatar> می‌نامیم و آدرس ایمیل را به صورت یک خصوصیت به نام email به آن ارسال می‌کنیم.

شما می‌توانید تگ‌های سفارشی را هر چیزی که دوست دارید بنامید؛ اما نکته مهم این است که نام تگ سفارشی در این مثال با codingdude- آغاز می‌شود. استفاده از چنین پیشوندهایی برای تگ‌های سفارشی، رویه‌ای مناسب برای تداخل نام‌ها با تگ‌های سفارشی دیگر محسوب می‌شود. همچنین به منظور عدم استفاده از نام‌های قبلاً تعریف شده برای تگ‌های HTML نیز ایده خوبی محسوب می‌شود.

برای پیاده‌سازی و تست تگ باید چند چیز را ایجاد کنیم:

یک پوشه برای نگهداری فایل‌های پروژه که آن را gravatar-custom-tag می‌نامیم.
یک فایل HTML به نام index.html در درون پوشه ravatar-custom-tag که شامل کد HTML ما خواهد بود.
یک فایل JS به نام codingdude-gravatar.js درون پوشه gravatar-custom-tag که شامل کد جاوا اسکریپت برای پیاده‌سازی تگ سفارشی است.

در ادامه فایل index.html را ویرایش کرده و محتوای آن را به صورت زیر در می‌آوریم:

<html>
    <head>
        <script type="text/javascript" src="codingdude-gravatar.js"></script>
    </head>
<body>
    This is my Gravatar picture: 
    <codingdude-gravatar email="admin@coding-dude.com"></codingdude-gravatar>
</body>
</html>

اینک اگر index.html را در مرورگر بارگذاری کنیم، نتیجه چندانی مشاهده نخواهیم کرد، زیرا هنوز باید تگ سفارشی را پیاده‌سازی کنیم:

نکته‌ای که باید در نظر داشت این است که مرورگرها در این موارد کاملاً باز عمل می‌کنند و از این رو شما می‌توانید تگ‌های ناشناخته‌ای در یک سند داشته باشید، چون مرورگر آن‌ها را نادیده خواهد گرفت. برای این که تگ سفارشی ما واقعاً تصویر گراواتار ایمیل ارائه شده را نمایش دهد باید ابتدا درک کنیم که طرز کار گراواتار چگونه است.

گراواتار با برگردان آدرس ایمیل به URL یک تصویر PNG که کاربر انتخاب کرده است عمل می‌کند. این بازگردان از طریق محاسبه هَش MD5 آدرس ایمیل میسر می‌شود. تصویر گراواتار چیزی مانند http://www.gravatar.com/avatar/EMAIL_MD5_HASH.png است. بنابراین ابتدا باید یک تابع برای محاسبه هش MD5 از یک رشته داشته باشیم. بدین منظور از یک کتابخانه متن-باز استفاده می‌کنیم و به ترتیب زیر آن را به فایل index.heml اضافه می‌کنیم:

<html>
    <head>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.7.0/js/md5.min.js"></script>
        <script type="text/javascript" src="codingdude-gravatar.js"></script>
    </head>
<body>
    This is my Gravatar picture: <codingdude-gravatar email="admin@coding-dude.com" />
</body>
</html>

اینک اقدام به پیاده‌سازی تگ سفارشی می‌کنیم. ما باید کدی را پیاده‌سازی کنیم که ابتدا تگ سفارشی ما را در سند شناسایی می‌کند و سپس باید کارکرد آن را پیاده‌سازی بکنیم. این کار در فایل codingdude-gravatar.js صورت می‌گیرد و روش آن شبیه زیر است:

function customTag(tagName,fn){
  document.createElement(tagName);
  //find all the tags occurrences (instances) in the document
  var tagInstances = document.getElementsByTagName(tagName);
        //for each occurrence run the associated function
        for ( var i = 0; i < tagInstances.length; i++) {
            fn(tagInstances[i]);
        }
}
 
function codingdudeGravatar(element){
        //code for rendering the element goes here
        if (element.attributes.email){
            //get the email address from the element's email attribute
            var email = element.attributes.email.value;
            var gravatar = "http://www.gravatar.com/avatar/"+md5(email)+".png";
            element.innerHTML = "<img src='"+gravatar+"'>";
        }
}   
 
customTag("codingdude-gravatar",codingdudeGravatar);

با بررسی کد فوق می‌بینیم که تابع ()customTag اقدام به یافتن موارد استفاده از تگ سفارشی با استفاده از نام تگ (پارامتر tagname) کرده و کارکرد متناظر با آن را (از طریق پارامتر fn) اجرا می‌کند.

فراخوانی (document.createElement(tagName در برخی مرورگرها (به طور خاص IE) برای اطلاع‌رسانی به مرورگر در مورد استفاده از تگ سفارشی با نام tagName ضروری است، چون در غیر این صورت ممکن است تگ کار نکند.

پارامتر fn تابعی است که آنچه قرار است تگ سفارشی انجام دهد را پیاده‌سازی می‌کند. در این مورد fn همان تابع ()codingdudeGravatar است. این تابع به عنوان پارامتر یک ارجاع به عنصر تگ سفارشی می‌گیرد. اگر تگ سفارشی خصوصیتی به نام email داشته باشد، در این صوت تابع آن مقدار را به تابع ()md5 در کتابخانه متن-باز ارسال می‌کند. سپس نتیجه برای تشکیل URL تصویر گراواتار مورد استفاده قرار می‌گیرد که از طریق یک عنصر <img> درون عنصر تگ سفارشی جای می‌گیرد.

خط آخر این اسکریپت تابع ()customTag را با نام تگ سفارشی و تابع پیاده‌سازی مربوطه فراخوانی می‌کند. تابع تگ سفارشی را می‌توان برای هر نوع تگ سفارشی مورد استفاده مجدد قرار داد. تنها کافی است تابعی را که کارکرد مورد نظر شما را اجرا می‌کند پیاده‌سازی نمایید.

اینک اگر فایل index.html را در مرورگر بارگذاری کنیم، تصویر گراواتار ایمیل را مشاهده می‌کنیم:

مثال 2: تگ HTML سفارشی پیشرفته برای ترسیم نمودار دایره‌ای

در مثال قبلی یک پیاده‌سازی بسیار ساده از تگ HTML سفارشی را دیدیم. از همین رویکرد می‌توانید برای پیاده‌سازی هر تگ سفارشی که می‌خواهید استفاده کنید.

فیلم آموزش طراحی وب با HTML اچ تی ام ال – تکمیلی در فرادرس

کلیک کنید

در ادامه پیاده‌سازی یک تگ سفارشی پیشرفته‌تر را که می‌توان برای ترسیم نمودار دایره‌ای مورد استفاده قرار داد، بررسی می‌کنیم. ابتدا فایل‌های ضروری برای این تگ سفارشی را ایجاد می‌کنیم:

یک پوشه ایجاد کنید و آن را piechart-custom-tag بنامید. این همان پوشه پروژه ما خواهد بود.
درون پوشه piechart-custom-tag یک فایل HTML ایجاد کنید و آن را index.html بنامید. این فایل شامل کد HTML خواهد بود.
همچنین یک فایل جاوا اسکریپت به نام codingdude-piechart.js ایجاد کنید که شامل پیاده‌سازی تگ سفارشی ما خواهد بود.

تگ‌های سفارشی در اغلب موارد به عنوان پوششی برای ارائه کارکردهای گوناگون مورد استفاده قرار می‌گیرند. در مورد مثال حاضر، ما از تگ <codingdude-piechart> به عنوان پوششی برای ترسیم یک نمودار دایره‌ای استفاده می‌کنیم. ما کد پیاده‌سازی نمودار دایره‌ای را قبلاً آماده کرده‌ایم و کارکرد آن را در این تگ سفارشی پوشش می‌دهیم.

بدین منظور باید فایل codingdude-piechart.js را ویرایش کرده و تابع‌های زیر را به آن اضافه کنیم:

()drawLine
()drawArc
()drawPieSlice
()Piechart

سپس فایل index.html را ویرایش کرده و تگ سفارشی برای ترسیم نمودار دایره‌ای را به صورت زیر طراحی می‌کنیم:

<html>
    <head>
        <script type="text/javascript" src="codingdude-piechart.js"></script>
    </head>
<body>
    <codingdude-piechart width="200" height="200" colors="#fde23e,#f16e23, #57d9ff,#937e88">
      <codingdude-data category="Classical music">10</codingdude-data>
      <codingdude-data category="Alternative rock">14</codingdude-data>
      <codingdude-data category="Pop">2</codingdude-data>
      <codingdude-data category="Jazz">12</codingdude-data>
    </codingdude-piechart>
</body>
</html>

مقصود ما در این کد آن است که طول و عرض نمودار دایره‌ای را با استفاده از خصوصیات width و height تعیین کنیم. خصوصیت colors نیز رنگ‌های مورد استفاده در بخش‌های مختلف نمودار دایره‌ای را تنظیم می‌کند.

همان طور که قبلاً اشاره کردیم این تگ سفارشی تا حدودی پیچیده‌تر است و باید از تگ‌های فرعی (sub-tags) در مورد آن کمک بگیریم. از تگ فرعی <codingdude-data> برای تعیین داده‌های نمودار استفاده می‌کنیم. اینک نگاهی به روش پیاده‌سازی کد این تگ سفارشی خواهیم داشت.

فایل codingdude-piechart.js را ویرایش کنید و کد زیر را پس از تابعی که نمودار دایره‌ای را ترسیم می‌کند قرار دهید:

//here you should add the function from the tutorial
//How to Draw Charts Using JavaScript and HTML5 Canvas
//...
function customTag(tagName,fn){
  document.createElement(tagName);
        //find all the tags occurrences (instances) in the document
        var tagInstances = document.getElementsByTagName(tagName);
        //for each occurrence run the associated function
        for ( var i = 0; i < tagInstances.length; i++) {
            fn(tagInstances[i]);
        }
}
 
function PiechartTag(element){
    //add the canvas where to draw the piechart
    var canvas = document.createElement("canvas"); 
    //get the width and height from the custom tag attributes
    canvas.width = element.attributes.width.value;
    canvas.height = element.attributes.height.value;
    element.appendChild(canvas);
     
    //get the colors for the slices from the custom tag attribute
    var colors = element.attributes.colors.value.split(",");
     
    //load the chart data from the <codingdude-data> sub-tags
    var chartData = {};
    var chartDataElements = element.querySelectorAll("codingdude-data");
    for (var i=0;i<chartDataElements.length;i++){
        chartData[chartDataElements[i].attributes.category.value] = parseFloat(chartDataElements[i].textContent);
        //remove the data sub-tags
        chartDataElements[i].parentNode.removeChild(chartDataElements[i]);
    }
   
    //call the draw() function
    new Piechart(
        {
        canvas:canvas,
        data:chartData,
        colors:colors
        }
    ).draw();
}
 
customTag("codingdude-piechart",PiechartTag);

تابع ()customTag همان تابعی است که در مثال 1 مورد استفاده قرار دادیم. پیاده‌سازی تگ سفارشی <codingdude-piechart> c در تابع ()PiechartTag صورت گرفته است. این تابع وظایف زیر را بر عهده دارد:

این تابع عنصر <canvas> را که نمودار روی آن ترسیم خواهد شد ایجاد می‌کند و آن را درون تگ سفارشی اضافه می‌کند. عرض و ارتفاع این بوم از خصوصیات تگ گرفته می‌شود.
این تابع خصوصیت colors عنصر را بررسی کرده و آن را به یک آرایه از رنگ‌ها تبدیل می‌کند که برای بخش‌های مختلف نمودار دایره‌ای استفاده می‌شود.
این تابع عنصرهای <codingdude-data> را یک به یک در ساختمان داده‌ای که به نمودار دایره‌ای ارسال می‌شود بارگذاری می‌کند. از آنجا که این عناصر محتوای متنی دارند، مرورگر آن‌ها را رندر می‌کند و به صورت محتوای متنی نمایش خواهند یافت. اما این چیزی نیست که ما می‌خواهیم و بنابراین می‌توانیم این عناصر را پس از دریافت داده‌ها حذف کنیم.
در نهایت سازنده ()Piechart را با گزینه‌های الزامی فراخوانی می‌کنیم و سپس تابع ()draw را برای ترسیم نمودار دایره‌ای می‌خوانیم.

اگر فایل index.html را بارگذاری کنید، می‌توانید ببینید که تگ سفارشی به صورت یک نمودار دایره‌ای بارگذاری می‌شود و مانند زیر است:

و یک نمودار دایره‌ای زیبا وجود دارد. تغییر خصوصیت <codingdude-data> باعث می‌شود که نمودار دایره‌ای نیز متناسب با آن عوض شود.

سخن پایانی

در این راهنما دو نمونه از روش‌های ایجاد تگ‌های HTML سفارشی را برای دو کارکرد متفاوت مشاهده کردیم. با استفاده از تابع ()customTag می‌توان به سادگی تگ‌های سفارشی ایجاد کرد.

فیلم مجموعه آموزش طراحی سایت با HTML و CSS – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

اگر این مطلب برایتان مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

بر اساس رای ۲ نفر

آیا این مطلب برای شما مفید بود؟

اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.

ثبت نظر

منابع:

tutsplus

میثم لطفی (+)

«میثم لطفی» در رشته‌های ریاضیات کاربردی و مهندسی کامپیوتر به تحصیل پرداخته و شیفته فناوری است. وی در حال حاضر علاوه بر پیگیری علاقه‌مندی‌هایش در رشته‌های برنامه‌نویسی، کپی‌رایتینگ و محتوای چندرسانه‌ای، در زمینه نگارش مقالاتی با محوریت نرم‌افزار با مجله فرادرس همکاری دارد.