هنگامی که قصد داشته باشیم تا  یک صفحه اچ تی ام ال (HTML) دیگر را داخل صفحه اصلی خود به نمایش در آوریم باید از تگ هایی تحت عنوان <iframe> و <iframe/> استفاده کنیم.

نحوه ساختار عنصر iframe در html به شکل زیر می باشد که در آن ویژگی src تعیین کننده URL (آدرس وب) صفحه iframe است:

<iframe src=”URL”></iframe>

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

حال با استفاده از ویژگی ارتفاع و عرض اندازه آن را مشخص می کنیم تا یک کار زیباتری دقیقا مطابق میلمان ایجاد کنیم. مقدار این صفت ها به طور پیش فرض بر حسب پیکسل بیان می شود اما می توان آنها را بر حسب درصد (برای مثال ۸۰%) نیز بیان کنیم. به کد زیر دقت کنید:

<iframe src=”demo_iframe.html” width=”200px” height=”200px”></iframe>

حذف حاشیه در iframe

به طور پیش فرض iframe دارای حاشیه سیاه رنگ است.برای اینکه این حاشیه را در طراحی سایت حذف کنیم و اثری از حاشیه باقی نماند، می توانید صفت style را اضافه کنید و از ویژگی border (حاشیه) در CSS استفاده کنید. به کد زیر دقت کنید:

<iframe src=”demo_iframe.html” style=”border:none”></iframe>

همچنین شما می توانید با استفاده از CSS اندازه، سبک و رنگ حاشیه عنصر iframe ها را نیز تغییر دهید. به مثال زیر توجه کنید.

<iframe src=”demo_iframe.html” style=”border:5px solid red”></iframe>

از iframe به عنوان یک مقصد برای لینک استفاده می کنیم

در واقع در طراحی سایت می توانید از عنصر iframe به عنوان یک هدف برای یک لینک استفاده کنید. صفت target یک لینک، به صفت name در iframe برمی گردد:

شاید از این مقاله خوشتون بیاد:  آموزش گام به گام html_قسمت چهارم:قالب بندی صفحات در html

<iframe src=”demo_iframe.html” name=”iframe_a”></iframe>

<p><a href=”http://www.w3schools.com” target=”iframe_a”>w3schools.com</a></p>

اولین کاری که در تگ <iframe> انجام داده ایم این است که با استفاده از Attribute یی تحت عنوان name نامی همچون iframe_a را در نظر گرفتیم. سپس در تگ <a> مقدار target را برابر با نام تگ <iframe> یا همان iframe_a قرار می دهیم. اگر خاطرتان باشد در قسمت های قبل بیان کردیم که زمانیکه بخواهیم یک لینک در Tab جدید در مرورگر باز شود از دستور blank_ استفاده می کنیم. در این مثال به جای آنکه از دستور blank_ استفاده کنیم فقط کافی است تا نامی که برای <iframe> در نظر گرفتیم را مقابل target بنویسیم.

تجربیات، نظرات و پیشنهادات شما می تواند در ادامه آموزش ها به ما کمک بسیار بزرگی بکند. منتظر پیام های شما هستیم.

دسته‌ها: آموزش html

غلامرضا بهشتیان

من غلامرضا بهشتیان، عاشق نوشتن مقاله های مفید در حوزه ی وب هستم. امیدوارم مقالات نوشته شده نظر شما خوانندگان عزیز را جلب نماید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *