کار بافریم ها در HTML قسمت دوم
کار بافریم ها در HTML
تگ iframe در HTML
تگ iframe چیست؟ برای ایجاد یک فریم در HTML5 باید از چه تگی استفاده کنیم؟ برای اشتراک گذاری صفحات خارجی در وب سایتمان می‌بایست از چه تگی استفاده کنیم؟ آیا استفاده از iframe در سئو جدید تاثیر منفی دارد؟ چگونه ویدیو های آپارات و یوتیوب را در صفحات وب سایتمان نمایش دهیم؟
1 تگ iframe
- 1.1 معایب استفاده از فریم ها
- 1.2 خواص تگ Iframe
- 1.3 تاثیرات تگ <iframe> در سئو
- 1.4 نمونه کد iframe
کار بافریم ها در HTML
تگ iframe
در مقاله قبلی با تگ frame و frameset آشنا شدیم و گفتیم که در HTML5 نمی‌توانیم از این تگ‌ها استفاده کنیم. حالا برای ساخت فریم در HTML5 می‌بایست از تگ iframe استفاده کنیم که در این مقاله با این تگ و خصوصیاتش آشنا می‌شویم.
از iframe برای تقسیم صفحه وب به چندین بخش جدا استفاده می‌شود. هر بخش می تواند یک سند html جداگانه را نمایش دهد. یک مجموعه iframe در یک صفحه به عنوان فریم ست(frameset) شناخته می‌شود. در این حالت معمولا صفحه به چندین فریم تقسیم شده است که مانند یک جدول براساس ردیف ها و ستون ها سازماندهی شده‌اند.
همچنین شما می‌توانید با استفاده از تگ iframe از سایت های اشتراک فیلم و ویدیو نیز استفاده و فیلم ها و ویدیو ها را در وب سایت خود به اشتراک بزارید. اصطلاحا به این کار Embed نیز می‌گویند.
معایب استفاده از فریم ها
در استفاده از فریم ها معایبی وجود دارد که در این حالت ها توصیه می شود از آن استفاده نکنید.
- بعضی از دستگاه های کوچک نمی توانند فریم ها را تفکیک کنند زیرا صفحه نمایش آن ها بسیار کوچک است.
- بعضی مواقع به دلیل تفاوت resolution صفحه نمایش های بزرگ، اندازه فریم ها تغییر می کنند و در اندازه تعیین شده نمایش داده نمی‌شوند.
- گاهی دکمه بازگشت در مرورگر کار نخواهد کرد.
- مرورگر هایی وجود دارند که همچنان استفاده از فریم ها را پشتیبانی نمی‌کنند.
کار بافریم ها در HTML
خواص تگ Iframe
| خاصیت | مقدار | توضیح |
| align | left right top middle bottom |
این خاصیت در HTML5 پشتیبانی نمی‌شود.
این خاصیت برای تعیین موقعیت مکانی تگ <iframe> در صفحه می‌باشد. |
| frameborder | 1
0 |
این خاصیت در HTML5 پشتیبانی نمی‌شود.
مشخص می‌کند حاشیه دور فریم ایجاد شده قرار گیرد یا خیر. |
| height | پیکسل | این خاصیت ارتفاع فریم را مشخص می‌کند. |
| longdesc | URL – لینک | این خاصیت در HTML5 پشتیبانی نمی‌شود.
یک صفحه که توضیحات کاملی در رابطه با فریم ایجاد می‌کند. |
| marginheight | پیکسل | این خاصیت در HTML5 پشتیبانی نمی‌شود.
این خاصیت مشخص می‌کند که از بالا و پایین چه فاصله ای برای فریم باید ایجاد کنیم. |
| marginwidth | پیکسل | این خاصیت در HTML5 پشتیبانی نمی‌شود.
این خاصیت مشخص می‌کند که از چپ و راست چه فاصله ای را باید برای فریم ایجاد کنیم. |
| name | متن | نامی برای فریم مشخص می‌کند. |
| sandbox | allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation |
این خاصیت محدودیت‌های اضافه‌ای را برای فریم ما مشخص می‌کند. |
| scrolling | yes no auto |
این خاصیت در HTML5 پشتیبانی نمی‌شود.
این تگ مشخص می‌کند که آیا امکان اسکرول در فریم باشد یا خیر. |
| src | URL – لینک | این خاصیت می‌تونیم بگیم مهمترین خاصیت تگ iframe هست چون در این خاصیت لینک صفحه مربوط به فریم را قرار می‌دهیم. |
| srcdoc | کد‌های HTML | کد‌های HTML که در فریم ما می‌توانند اجرا شوند. |
| width | پیکسل | این خاصیت عرض فریم را مشخص می‌کند. |
همانطور که مشاهده می‌کنید بیشتر خاصیت‌هایی که مربوط به استایل‌دهی می‌باشد از خاصیت های پشتیبانی شده HTML5 تگ <iframe> حذف شده‌اند؛ این خاصیت ها به عنوان ویژگی درcss موجود است که با آن‌ها در آموزش css آشنا می‌شوید.
کار بافریم ها در HTML
تاثیرات تگ <iframe> در سئو
تا همین چند سال پیش استفاده از iframe در صفحات برای نمایش ویدیو های سایت های اشتراک ویدیو و صفحات خارجی به عنوان امتیاز منفی در سئو شناخته می‌شد و استفاده از آن توصیه نمی‌شد.
با تغییر الگوریتم ها و متد های گوگل از این پس دیگر iframe هیچ تاثیری در سئو صفحات شما ندارد. به این صورت که در پیمایش ربات های گوگل از خواندن تگ iframe چشم پوشی می‌شود و ملاک ارزش گذاری وب سایت شما نخواهد بود.
کار بافریم ها در HTML
نمونه کد iframe
نمونه ای از کد iframe که یک صفحه را نمایش می‌دهد و همچنین از خاصیت‌های فعال نیز سعی شده استفاده شود. اگر توجه کنید عرض این iframe به صورت 100% تنظیم شده که این باعث می‌شود که در صفحه نمایش های مختلف به صورت خودکار عرض فریم تنظیم شود.
<!DOCTYPE html> <html> <body> <h2>Iframe - Target for a Link</h2> <iframe height="300px" width="100%" src="demo_iframe.htm" name="iframe_a"></iframe> </body> </html>
نتیجه گیری
- این تگ دارای معایبی است که عدم تسلط به css می‌تواند باعث باگ‌های mobile friendly شود.
- خاصیت های خاص خودش را دارد.
- تاثیری در سئو وب سایت ندارد.
امیدوارم از این مقاله استفاده کافی را برده باشید. تا فصل بعدی…
جهت مشاهده دوره های آموزشی بر روی این لینک کلیک نمایید.
جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.
نویسنده:راحله تبریزی
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.