• پاسخگویی سوالات در خصوص خرید هاست و ثبت دامنه
  • 013-32625682
اپ وباپ وباپ وباپ وب
  • صفحه اصلی
  • هاست (میزبانی وب)
    • هاست سی پنل ایران
    • هاست سی پنل آلمان
    • هاست وردپرس اختصاصی
    • هاست پایتون و Node js
    • هاست ارزان و اقتصادی
    • هاست نمایندگی
    • هاست ویندوز
  • هاست ابری
  • سرور مجازی
    • سرور مجازی ایران
    • سرور مجازی آلمان
    • سرور مجازی فنلاند
  • قالب رایگان وردپرس
    • فروشگاهی
    • شرکتی
    • همه گروه ها
  • دامنه
    • جستجو و ثبت دامنه
    • خرید دامنه
    • گواهینامه SSL
  • پشتیبانی
    • ارسال درخواست پشتیبانی
    • ارتباط با ما / درباره ما
    • آموزش هاستینگ
    • آموزش HTML
    • قوانین
    • کسب درآمد در آپ وب
ورود به سایت
✕

آموزش تگ iframe در HTML بصورت جامع

اموزش html

تگ iframe (آی فریم) در HTML

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

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

نحوه استفاده از تگ ifram در HTML

برای ایجاد یا استفاده از آی فریم ها یا Iframes در HTML ما باید از تگ <iframe> استفاده نماییم.

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

1
<iframe src="URL"></iframe>

 

مثال:

1
2
3
4
5
<body>
 
<iframe src="https://upweb.ir"></iframe>
 
</body>

نتیجه:

 

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

برای تعیین اندازه iframe از ویژگی های height و width استفاده کنید.

ارتفاع و عرض به صورت پیش فرض بر حسب پیکسل مشخص می شود:

( البته ما با استفاده از صفت Style یا بطور کلی با استفاده از CSS نیز میتوانیم این اندازه را تنظیم نماییم.)

مثال:

1
2
3
4
5
<body>
 
<iframe src="https://upweb.ir" width="500" height="250"></iframe>
 
</body>

نتیجه:

 


تنظیم اندازه iframe از طریق صفت Style

یا می توانید ویژگی style را اضافه کنید و از ویژگی های ارتفاع و عرض CSS استفاده کنید:

مثال:

1
2
3
4
5
<body>
 
<iframe src="https://upweb.ir" style="height:200px;width:300px" title="آموزش تگ آی فریم در HTML"></iframe>
 
</body>

 

حذف حاشیه در Iframe

Iframe – مرز را حذف کنید
همانطور که در مثال های قبل مشاهده کرده اید ،به طور پیش فرض، یک iframe یک حاشیه در اطراف خود دارد.
برای حذف حاشیه، ویژگی style را اضافه کنید و از ویژگی Border موجود در دستورات CSS استفاده نمایید.
1
2
3
4
5
<body>
 
<iframe src="https://upweb.ir" style="border:none;" title="آموزش HTML در آپ وب "></iframe>
 
</body>

 

با CSS، می توانید اندازه، استیل و رنگ حاشیه iframe را نیز تغییر دهید:

1
2
3
4
5
<body>
 
<iframe src="https://upweb.ir" style="border:2px solid red;" title="Iframe Example"></iframe>
 
</body>

نتیجه:

 

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

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

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

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

1
2
3
4
5
6
7
8
9
<body>
 
 
<iframe src="#" name="iframe_a" height="300px" width="100%" title="Iframe Example"></iframe>
 
<p><a href="https://upweb.ir" target="iframe_a">کلیک کنید</a></p>
 
 
</body>

نتیجه:

کلیک کنید

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

Related posts

اموزش html
28 آبان 1402

رمزگذاری در HTML-آموزش Charset در HTML به زبان ساده


Read more
اموزش html
26 مهر 1402

آموزش کار با نمادها (Symbols) در HTML


Read more
اموزش html
26 مهر 1402

آموزش موجودیت ها یا Entities در Html بصورت جامع


Read more
اموزش html
25 مهر 1402

عناصر معنایی یا Semantic Elements در HTML


Read more

آپ وب خانه امن رویاهای آنلاین شما


خرید هاست و ثبت دامنه پیش نیاز برای ایجاد سایت میباشد. سرعت بارگزاری سرورها و اپتایم نقش مهمی در سئو سایت دارد. آپ وب تلاش میکند بهترین کیفیت هاست را برای شما ایجاد کند.
آپ وب با بیش از 8 سال سابقه در کنار شماست.

نماد اعتماد الکترونیکی


مجوز وزارت صنعت و معدن

خرید هاست



ارسال تیکت

ارتباط با ما


شماره تماس: 32625682-013
[email protected]

نیاز به پشتیبانی دارید؟

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


ارتباط با ما

خرید هاست

هاست لینوکس

هاست سی پنل

هاست وردپرس

هاست اقتصادی

هاست نمایندگی

هاست ویندوز

سایر خدمات

ثبت دامنه ملی و بین المللی

سرور مجازی آلمان

سرور مجازی فنلاند

گواهینامه SSL

قالب آماده وردپرس رایگان

© تمام حقوق برای شرکت هاستینگ آپ وب محفوظ می باشد.
ورود به سایت