مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش html را دنبال می کنند. گاهی اوقات ممکن است نیاز داشته باشید که یک وب سایت و یا یک صفحه وب را در بخشی از وب سایت خود نمایش داده و به کاربر اجازه دهید تا به یک وب سایت یا بخشی از یک وب سایت دسترسی داشته باشد. برای این منظور باید با طرز کار با تگ Iframe در html آشنایی داشته باشید. از این رو در این آموزش به مباحث آشنایی با تگ Iframe در html پرداخته ایم.
آشنایی با تگ Iframe در html
در ادامه ی این آموزش شما را با ساختار کلی و کاربرد تگ Iframe در html آشنا خواهیم کرد.
برای نمایش یک صفحه وب در یک صفحه وب دیگر، از تگ iframe استفاده می شود:
ساختار تگ iframe
یک عنصر iframe nv در html با استفاده از تگ <iframe > تعریف می شود:
مثال :
| <iframe src="URL"></iframe> |
در ساختار فوق صفت src آدرس صفحه وبی را که در قالب تگ iframe نمایش داده می شود را توصیف می کند.
تنظیم width و height در تگ iframe
از صفات height و width برای تنظیم ارتفاع و عرض عنصر iframe استفاده کنید.
مقدار این ویژگی به طور پیش فرض در پیکسل مشخص می شود، اما همچنین می تواند در درصد (مانند “۸۰٪”) باشد.
مثال : تنظیم عرض و ارتفاع iframe
| <iframe src="https://pvlearn.com/product/full-html-and-html5-tutorial/" height="200" width="300"></iframe> |
همچنین شما می توانید از css برای تنظیم طول و ارتفاع عناصر iframe استفاده کنید.
مثال : استفاده از style
| <iframe src="https://pvlearn.com/product/full-html-and-html5-tutorial/" style="height:200px;width:300px;"></iframe> |
frame
در حالت عادی عنصر iframe با یک border مشخص در اطراف عنصر نمایش داده می شود.
برای حذف border باید style مربوط به حذف border از عنصر iframe را به آن اضافه کنید.
مثال : حذف border
| <iframe src="https://pvlearn.com/product/full-html-and-html5-tutorial/" style="border:none;"></iframe> |
همچنین شما می توانید از css برای حذف border از iframe استفاده کنید.
مثال : استایل border اطراف عنصر
| <iframe src="https://pvlearn.com/product/full-html-and-html5-tutorial/" style="border:2px solid red;"></iframe> |
لینک در iframe
یک iframe را می توان به عنوان یک target frame برای لینک استفاده کرد.
صفت target از یک لینک باید به صفت name از یک عنصر iframe اشاره کند.
مثال : صفت target
| <iframe src="https://pvlearn.com/product/full-html-and-html5-tutorial/" name="iframe_a"></iframe> <p><a href="https://www.pvlearn.com" target="iframe_a">W3Schools.com</a></p> |
کلام آخر
گاهی اوقات نیاز است که یک وب سایت دیگر یا یک صفحه وب را در قسمتی از وب سایت خود نمایش داده و در دسترس کاربران قرار دهید برای اینگونه موارد تگ Iframe در html گزینه ی بسیار مناسبی است.
در جلسه بعد شما را با جاوا اسکریپت در html آشنا خواهیم کرد.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
