بطور کلی پلاگین یا افزونه یا به انگلیسی Plugin یک نرم افزار کمکی هست که به کمک یک نرم افزار دیگر میاید و خودش به تنهایی هیچ کاربردی ندارد.
برای مثال نرم افزاریی همچون فوتوشاپ و مرورگرها مثله فایرفاکس،کروم و.. نیز دارای یکسری پلاگین های مخصوص بخودشان می باشند که این پلاگین ها میتوانند یکسری ویژگی ها و امکاناتی رو به اون نرم افزار اصلی اضافه نمایند.
و یا مثلا سیستم مدیریت محتوای وردپرس نیز دارای هزاران پلاگین مخصوص بخودش می باشد، که هر یک از این پلاگین ها میتوانند امکانات خاص و بخصوصی رو به وردپرس اضافه نمایند.
کار با پلاگین ها یا Plugins در HTML
چیزی که در این جلسه میخوایم باهاش آشنا بشیم در معنای واقعی نمیشه گفت که پلاگین هستند، ولی خب تگ هایی هستد که با استفاده از اونا میتونیم فایل هارو وارد صفحه وبمون کنیم.
به راحتی میشه با استفاده از ۲ تگ <object> و <embed> میشه تقریبا هر فایلی رو داخل صفحه قرار داد، مثلا فایل تصویر ، فایل ویدئویی ، فایل های PDF و…
همونطور که بارها در آموزش زبان HTML اشاره کردم، زبان HTML هرتگی رو برای هدف و کاری ایجاد کرده و ماهم باید از هرتگ در مکان مناسب استفاده کنیم.
مثلا اگه خواستیم ویدئو داخل صفحه قرار بدیم باید از تگ video استفاده کنیم یا اگه خواستیم آهنگ در صفحه قرار بدیم باید از تگ audio استفاده کنیم.
حال ما با استفاده از تگ های <object> و <embed> هم میتونیم ویدئو و آهنگ داخل صفحه بزاریم ولی خب تا وقتی تگ های video و audio وجود دارند، استفاده از object و embed اصلا بهینه و منطقی نیست.
پس اگه میخوای :
ویدئو بزاری داخل صفحه ( از تگ video استفاده کن ) ( مثال )
آهنگ بزاری داخل صفحه ( از تگ audio استفاده کن ) ( مثال )
یک سایت بزاری داخل صفحه ( از تگ iframe استفاده کن ) ( مثال )
یک فایل pdf بزاری داخل صفحه ( بهترین گزینه استفاده از تگ iframe ) ( مثال )
عکس بزاری داخل صفحه ( از تگ img استفاده کن ) ( مثال )
تگ <object> در HTML
با استفاده از تگ <object> در HTML میتونیم اشیائی همچون تصاویر ، فایل های PDF و… رو در یک صفحه ی وب به نمایش دربیاوریم.
مثال شماره ۱ : نمایش یک فایل PDF
<body>
<object data="files/test-object.pdf" width="500" height="300"></object>
</body>
1
2
3
4
5
<body>
<object data="files/test-object.pdf" width="500" height="300"></object>
</body>
امتحان کنید
مثال شماره ۲ : نمایش یک فایل HTML
<body>
<object data="files/test-object.html" width="500" height="300"></object>
</body>
1
2
3
4
5
<body>
<object data="files/test-object.html" width="500" height="300"></object>
</body>
امتحان کنید