تگ iframe در زبان نشانه گذاری HTML

تگ iframe در زبان نشانه گذاری HTML

زمان مطالعه

5 دقیقه

تعداد بازدید

39

تعداد پرسش ها

0

افزودن به لیست علاقه مندی ها


برچسب ها :


اشتراک گذاری این مطلب
سامان محمدپور
در مورد نویسنده : موفقیت بستگی به تلاش هر شخص داره، هممون ب همون اندازه که تلاش کردیم موفق شدیم.

تگ iframe در زبان نشانه گذاری HTML

تگ iframe در زبان نشانه گذاری HTML

زمان مطالعه

5 دقیقه

تعداد بازدید

39

تعداد پرسش ها

0

افزودن به لیست علاقه مندی ها


برچسب ها :


اشتراک گذاری این مطلب

گاهی اوقات نیاز پیدا می کنید که محتوای یک سایت دیگر را درون سایت خودتان نشان بدهید، ویدئویی را از سایت هایی مثل آپارات و youtube را در سایت خودتون نمایش بدید بدون اینکه خودتان پلیر آن را طراحی کنید یا در کل یک سند را درون سند HTML دیگر نمایش بدهید، در این مواقع تگ iframe به کمک شما می آید و این کار را به راحتی تمام برای شما انجام می دهد.

 

تگ iframe در HTML

 

قواعد نوشتن iframe در HTML

 

قواعد نوشتن تگ iframe در HTML

 

تگ iframe یک frame درون خطی را ایجاد می کند.

از inline frame برای جاسازی سند دیگری درون سند HTML فعلی استفاده می شود.

نحوه نوشتن آن در مثال زیر آمده است:

 

<iframe src="url" title="description"></iframe>

 

بهتر است که همیشه Attribute (ویژگی) title را برای تگ iframe استفاده کنید، این امر باعث می شود که screen reader ها (خوانندگان صفحه) با خواندن آن متوجه بشوند که محتوای این تگ شامل چه چیزی است.

تنظیم عرض و ارتفاع تگ iframe

برای مشخص کردن اندازه یک تگ iframe در صفحه، از ویژگی های width (عرض) و height (ارتفاع) آن استفاده می کنیم.

width (عرض) و height (ارتفاع) به طور پیش فرض با pixel (پیکسل) مشخص می شوند.

مثال: در زیر یک تگ iframe با عرض 300 پیکسل و ارتفاع 200 پیکسل ایجاد کرده ایم.

 

<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>

 

تنظیم عرض و ارتفاع تگ iframe در HTML

 

یا می توانید ویژگی style را به تگ iframe اضافه کنید و از خصوصیات width و height در CSS بهره ببرید. مانند مثال زیر:

 

<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>

 

تنظیم عرض و ارتفاع تگ iframe در HTML

 

حذف border (حاشیه) در تگ iframe

به طور پیش فرض تگ iframe دارای یک border (حاشیه) نازک است.

برای حذف یا تغییر اندازه و رنگ border می توانید از ویژگی style و از خصوصیت border استفاده کنید.

مثال: در زیر border تگ iframe را با ویژگی style و خصوصت border حذف کرده ایم.

 

<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>

 

حذف border (حاشیه) در تگ iframe در HTML

 

مثال: در زیر border تگ iframe را با ویژگی style و خصوصیت border تغییر رنگ و اندازه داده ایم.

 

<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe>

 

حذف border (حاشیه) در تگ iframe در HTML

 

تگ iframe به عنوان target frame

از تگ iframe می توان به عنوان target frame استفاده کرد، یعنی این که زمانی که شما بر روی لینک کلیک کنید محتوای لینک در تگ iframe نمایش داده شود.

ویژگی target در تگ a (لینک)، باید به ویژگی name تگ iframe اشاره کند. به مثال زیر دقت کنید.

 

<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>

<p><a href=" https://jobteam.ir/" target="iframe_a">jobteam.ir</a></p>

 

به ویژگی target در تگ a و به ویژگی name در تگ iframe دقت کنید، هر دو از عنوان یکسانی استفاده می کنند و همین باعث می شود که زمانی که بر روی لینک کلیک شود، محتوای آن درون تگ iframe نمایش داده شود.

تصویر خروجی قبل از کلیک بر روی لینک:

 

تگ iframe به عنوان target frame

 

تصویر خروجی بعد از کلیک بر روی لینک:

 

تگ iframe به عنوان target frame

 

تگ های HTML

در زیر جدولی از تگ های استفاده شده در این مقاله و کارکرد آن ها را برای شما تهیه کرده ایم:

 

تگ های HTML
تگ توضیحات
Iframe تعریف یک فریم درون خطی

 

خلاصه مقاله

تگ iframe در زبان نشانه گذاری HTML یک inline frame را مشخص می کند.

همیشه ویژگی title را مشخص کنید. (برای screen reader ها)

ویژگی های width و height مشخص می کنند که اندازه تگ iframe چقدر باشد.

برای حذف و تغییر border (حاشیه) یک تگ iframe از ویژگی border استفاده می کنیم.

نکته : استفاده از تگ iframe در استاندارهای سئو اصلا توصیه نمی شود

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

در مقاله بعدی به سراغ مبحث بسیار کاربردی استفاده از جاوااسکریپت (JavaScript) در HTML می پردازیم.

سامان محمدپور
در مورد نویسنده : موفقیت بستگی به تلاش هر شخص داره، هممون ب همون اندازه که تلاش کردیم موفق شدیم.


پرسش و پاسخ
0
دوره پیشنهادی
دوره پیشنهادی