آموزش Html؛ آموزش iframe در HTML

آموزش Html؛ آموزش iframe در HTML

در جلسه چهاردهم مقالات آموزش اچ تی ام ال در خدمت شماییم با آموزش Html؛ آموزش iframe در HTML از وب سایت آموزش برنامه نویسی سورس باران. در این مقاله به معرفی مسیر فایل (file path) جاوااسکریپت و iframe در HTML خواهیم پرداخت. با ما همراه باشید…

آموزش iframe در HTML

از iframe برای نمایش یک صفحه وب درون یک صفحه وب استفاده می‌شود، به مثال زیر توحه نمایید :

<iframe src="https://www.sourcebaran.com/"></iframe>

کد بالا خروجی زیر را خواهد داشت:

 

آموزش ساخت iframe

نگارش یا syntax عنصر iframe در HTML به این صورت است که با تگ <iframe> تعریف می‌شود

<iframe src="https://www.sourcebaran.com/"></iframe>

خصوصیت src آدرس وب یا URL صفحه درونی که در داخل صفحه اصلی باز می‌شود را مشخص می‌کند.

 

خصوصیات height و width در  iframe

از خصوصیات height و width برای مشخص کردن اندازه‌ی iframe استفاده کنید. مقدار این خصوصیات به صورت پیش‌فرض بر حسب پیکسل تعریف می‌شوند اما می‌توان آن‌ها را بر اساس درصد (مثلا ۸۰٪) هم تعریف کرد:

 <iframe src="demo_iframe.htm" height="200" width="300"></iframe>
پیشنمایش

 

حذف کادر iframe 

یک iframe به صورت پیش‌فرض دارای یک کادر اطراف خود است. برای حذف این کادر باید خصوصیت style را اضافه کرده و از ویژگی border در CSS استفاده کنید

 <iframe src="demo_iframe.htm" style="border:none;"></iframe>
پیشنمایش

 

با CSS می‌توانید اندازه، استایل و رنگ کادر iframe را هم تغییر دهید

 <iframe src="demo_iframe.htm" style="border:2px solid red;"></iframe>
پیشنمایش

 

هدف یک لینک در Iframe

از iframe در HTML می‌توان به عنوان قاب هدف برای یک لینک هم استفاده کرد. خصوصیت target برای لینک باید به خصوصیت name از iframe اشاره کند:

 <iframe src="demo_iframe.htm" name="iframe_a"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
پیشنمایش منبع

 

لیست جلسات قبل آموزش Html

  1. آموزش اصول اولیه و عناصر HTML
  2. آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
  3. آموزش کار با پاراگراف و استایل در Html
  4. آموزش کار با قالب بندی متن در Html
  5. آموزش کار با کامنت در HTML
  6. آموزش کار با کامنت در HTML
  7. آموزش کار با رنگ ها در HTML
  8. آموزش کار با تصاویر در HTML
  9. آموزش کار با لینک در HTML
  10. آموزش کار با جدول در HTML
  11. آموزش کار با لیست ها در HTML
  12. آموزش کار با عناصر Block و Inline در HTML
  13. آموزش کار با عنصر Class در HTML
  14. آموزش Html؛ آموزش iframe در HTML
  15. آموزش Html؛ آموزش جاوا اسکریپت در HTML
  16. آموزش کار با عنصر Head در HTML
  17. آموزش Layout در HTML
  18. آموزش طراحی سایت ریسپانسیو در HTML
  19. آموزش عناصر کد کامپیوتر در HTML
  20. آموزش موجودیت (Entities) در HTML
  21. آموزش نمادها (Symbols) در HTML
  22. آموزش کار با Character (کاراکترهای رزرو شده) در HTML
  23. آموزش رمزگذاری URL در HTML
  24. آموزش کامل کار با فرم ها در HTML
  25. آموزش انواع ورودی (Input) در HTML
  26. آموزش خصوصیات ورودی در HTML

حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

پکیج آموزش صفر تا صد فتوشاپ به زبان فارسی – حرفه ای شوید

دسته بندی موضوعات

آخرین محصولات فروشگاه

مشاهده همه

نظرات

بازخوردهای خود را برای ما ارسال کنید

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.