آموزش کار با آی فریم ها یا Iframes در HTML

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با آی فریم ها یا Iframes در HTML با من همراه باشید.

آموزش کار با آی فریم ها یا Iframes در HTML

Free-Learn

آی فریم ها یا Iframes در HTML

آی فریم یا Iframe به یک پنجره یا قاب که بتوان در آن محتویاتی همچون تصویر،ویدئو و.. را به نمایش گذاشت گفته می شود. آی فریم ها در نوبه ی خودشون میتونن استفاده های زیادی داشته باشند.

برای مثال الان من سایت خودمو در قالب یک آی فریم در اینجا قرار دادم :

یک نمونه از استفاده آی فریم همین ویدئوهای سایت آپارات است که از طریق همین آی فریم است که ما میتوانیم ویدئوها را در وبسایت مان و یا هرمکانی در وب قرار دهیم و مشاهده نماییم.

پس بطور کلی ما با استفاده از آی فریم یا به انگلیسی Iframe میتونیم به راحتی یک سایت یا یک فایل یا یک تصویر و یا بطور کلی میتوان یک صفحه وب را درون یک صفحه ی وب دیگر قرار داد.

Free-Learn

نحوه استفاده از آی فریم در HTML

برای ایجاد یا استفاده از آی فریم ها یا Iframes در HTML ما باید از تگ <iframe> استفاده نماییم، شکل کلی برای استفاده از این تگ در HTML بصورت زیر می باشد.

که میتوانیم با وارد کردن آدرس فایل/سایت و.. مورد نظرمان در قسمت src آن را در یک قاب یا آی فریم به نمایش دربیاوریم.

حال برای اینکه بطور کامل با این تگ آشنا شوید لطفا به دستورات زیر توجه و همچنین برای مشاهده آنلاین دستورات بروی دکمه (امتحان کنید) کلیک نمایید.

امتحان کنید

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

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

Free-Learn

نحوه تنظیم عرض و ارتفاع آی فریم

ما با استفاده از صفات width و height به ترتیب میتونیم اندازه عرض و ارتفاع یک آی فریم را مشخص نماییم که البته ما با استفاده از صفت Style یا بطور کلی با استفاده از CSS نیز میتوانیم این اندازه را تنظیم نماییم.

عددی که به عنوان مقدار برای هر یک از صفات width و height مشخص می شود بصورت پیش فرض با واحد پیکسل یا px تنظیم می شود.


امتحان کنید

Free-Learn

نحوه حذف حاشیه ( بوردِر ) دور آی فریم

اگر در مثال های قبلی به آی فریم توجه کرده باشید، بصورت پیش فرض یک حاشیه یا بوردِر یا یک خط به دور لبه ی آی فریم قرار گرفته است، در صورتی که بخواهیم این حاشیه را حذف کنیم باید از ویژگی Border موجود در دستورات CSS استفاده نماییم.

امتحان کنید

Free-Learn

نحوه باز شدن لینک های یک صفحه در آی فریم

فرض کنید یک یا چند لینک در صفحه داریم و میخواهیم وقتی کاربر بروی لینک ها کلیک کرد مقصد لینک ها درون آی فریم باز شود، برای اینکار ما باید ۲ کار زیر را انجام دهیم :

  1. تنظیم یک نام برای آی فریم توسط صفت name
  2. قرار دادن نام آی فریم در صفت Target لینک ها

برای مثال لطفا به دستورات زیر توجه نمایید :

امتحان کنید

همانطور که خروجی را مشاهده مینمایید ما با استفاده از صفت name یک نام برای آی فریم مشخص کردیم سپس در صفت target موجود در تگ لینک نامی را که برای آی فریم تنظیم کرده بودیم را قرار دادیم، حال با کلیک بروی لینک (کلیک کنید) مقصد لینک درون آی فریم باز خواهد شد.

Free-Learn

مثال های بیشتر از آی فریم ها در HTML

مثال شماره ۱ : (نمایش یک تصویر در آی فریم)

امتحان کنید

مثال شماره ۲ : (نمایش یک فایل HTML در آی فریم)

امتحان کنید

مثال شماره ۳ : (نمایش چندین وبسایت بصورت همزمان در آی فریم)

امتحان کنید

Free-Learn

  • خلاصه ی این بخش
  • به یک پنجره یا فریم یا قاب که بتوان در آن یک تصویر،فایل و یا یک صفحه ی وب را قرار داد، آی فریم یا IFrame گفته می شود.
  • با استفاده از IFrame میتوان یک صفحه ی وب یا یک سایت را در یک صفحه ی وب دیگر به نمایش درآورد.
  • با استفاده از صفات width و height به ترتیب میتونیم اندازه عرض و ارتفاع یک آی فریم را مشخص نماییم.
  • دانلود PDF این آموزش
  • برای دانلود فایل PDF این آموزش کلیک نمایید