در این جلسه از دوره آموزش html وب سایت همراه آی سی تی به معرفی تگ iframe در html خواهیم پرداخت.
frame (قابها) در Html :
- تگ frame (قابها) در Html برای نمایش بیش ازیک فایل html در پنجره مرورگر به طور همزمان استفاده می شود.
- هرپنجره html که در صفحه نمایش داده می شود یک قاب نام دارد.وهرقاب محتوایی مستقل دارد.
- امروزه از تگ frame به دلایل سئو کمتر استفاده می شود.
تگ (FRAMESET):
- برای تقسیم بندی پنجره مرورگر بین قابها از این تگ استفاده می کنیم.
- مشخصه col قابهای html را به صورت عمودی قرار می دهد.
- مشخصه row قابهای html را به صورت افقی قرار می دهد.
- مشخصه noresize قابها را بدون حاشیه نمایش می دهد.
تگ iframe در html :
عبارت iframe مخفف inline frame بوده و توسط این تگ می توانیدیک فایل html راداخل یک قاب هرکجای متن که می خواهیدقراردهید.
<iframe src="URL"></iframe>تفاوت IFRAME با FRAME :
ازتگ frame برای قاب بندی صفحه مرورگراستفاده می شود(نمایش بیش ازیک فایل html در پنجره مرورگر )اماازiframe برای قراردادن فایل html داخل قاب های صفحه ویا داخل متن به صورت خطی استفاده می شود.
مشخصه عرض و ارتفاع (HEIGHT و WIDTH) در IFRAME:
- برای مشخص کردن سایز iframe از صفات ارتفاع و عرض استفاده کنید.
- اندازه iframe به طور پیش فرض با پیکسل مشخص می شود، اما می تواند درصدی هم باشد.
نکته : از تگ FRAMESET و مشخصه های COL و ROW برای سایزدهی به FRAME ها استفاده کنید.
<!DOCTYPE html> <html> <body> <h2>HTML Iframes</h2> <p>You can use the height and width attributes to specify the size of the iframe:</p> <iframe src="demo_iframe.htm" height="200" width="300"></iframe> </body> </html>
ویرایشگر html چیست؟ – آشنایی بادریم ویوور – جلسه هفتم(ویدیو)
حذف کردن border در iframe :
- به طور پیش فرض، iframe حاوی یک border در اطراف آن است.
- برای حذف border ، ویژگی style را اضافه کنید.
<!DOCTYPE html> <html> <body> <h2>Remove the Iframe Border</h2> <p>To remove the default border of the iframe, use CSS:</p> <iframe src="demo_iframe.htm" style="border:none;"></iframe> </body> </html>
با CSS، شما همچنین می توانید اندازه،استایل و رنگ border در iframe را تغییر دهید.
<!DOCTYPE html> <html> <body> <h2>Custom Iframe Border</h2> <p>With CSS, you can also change the size, style and color of the iframe's border:</p> <iframe src="demo_iframe.htm" style="border:2px solid red;"></iframe> </body> </html>
قراردادن IFRAME به عنوان هدف لینک :
تگ iframe می تواند به عنوان قاب هدف برای یک لینک استفاده شود.یعنی با کلیک برروی لینک قاب هدف باز شود.
روش کار به صورت زیر است :
<!DOCTYPE html> <html> <body> <h2>Iframe - Target for a Link</h2> <iframe height="300px" width="100%" src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p> <p>When the target of a link matches the name of an iframe, the link will open in the iframe.</p> </body> </html>
بیشتر بخوانید : تگ h در html نقد و بررسی (h1 تا h6) – جلسه یازدهم (ویدیو)
