جلسه 12 آموزش HTML: کار با آی فریم و تگ iframe

سلام رفیق برنامه نویس خودم، چطوری؟! 🤘
به جلسه دوازدهم آموزش HTML خوش اومدی! امروز قراره وارد دنیای جذاب آی فریم بشیم. 😊

توی این جلسه می‌خوام بهت نشون بدم که چطور با استفاده از تگ <iframe> می‌تونی محتوای خارجی رو توی سایتت نمایش بدی؛ مثل نقشه‌های گوگل 🗺️، ویدیوهای یوتیوب 🎥 یا حتی کل یه صفحه وب دیگه! این تگ بهت این امکان رو میده که بدون ترک سایتت، محتواهای جذاب و کاربردی رو به کاربرانت ارائه بدی.

پس بیا با هم قدم به قدم یاد بگیریم چطوری از آی فریم‌ها استفاده کنیم و از امکانات بی‌نظیرش نهایت بهره رو ببریم. 🚀

آی فریم چیست؟ 🤔

آی فریم (iframe) مخفف Inline Frame هست. با استفاده از این تگ می‌تونی یک صفحه وب دیگه رو داخل صفحه خودت قرار بدی. مثل اینکه یک پنجره کوچک داخل صفحه‌ات باز کردی که محتوای سایت دیگه‌ای رو نشون میده!

×

جلسه 2 آموزش HTML :HTML چیست؟ آنچه باید بدانید

مطالعه

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

این قابلیت خیلی کاربردی هست، چون می‌تونی بدون اینکه کاربر از سایتت خارج بشه، محتوای خارجی مثل نقشه‌ها، ویدیوهای یوتیوب، پست‌های شبکه‌های اجتماعی و محتواهای مشابه رو به سایتت اضافه کنی.

نحوه استفاده از تگ iframe 📝

ساختار کلی تگ <iframe> به این شکل هست:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

مثال من سایت رایا وردپرس رو میخام به صورت آی فریم درون همین پست نشون بدم طبق فرمت بالا کد من میشه:

×

جلسه 8 آموزش HTML: کار با تصاویر در html

مطالعه

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

با این کد، صفحه rayawp.ir داخل یک کادر با عرض 100 درصد و ارتفاع 400 پیکسل توی صفحه تو نمایش داده میشه.

توجه! 🤔 همه سایت‌ها رو نمی‌تونی به راحتی داخل آی فریم قرار بدی. مثلاً سایت‌هایی مثل گوگل با فعال کردن تنظیمات امنیتی مثل X-Frame-Options 🔒 جلوی لود شدن در آی فریم رو می‌گیرن.

اگه برات سواله X-Frame-Options چیه؟! بهت خلاصه بگم یه هدر امنیتیه که به مرورگر می‌گه آیا اجازه میده صفحه رو داخل فریم یا آی فریم نمایش بدن یا نه. این کار باعث جلوگیری از حملات کلیک‌ جک می‌شه.

ویژگی‌ها (صفات) مهم تگ iframe ⚙️

تگ iframe کلی ویژگی داره که بهت کمک میکنن ظاهر و رفتارش رو کنترل کنی. مهمترینشون:

×

جلسه 6 آموزش HTML: آشنایی با تگ های ایجاد کننده لیست

مطالعه

1. src

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

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

2. width و height

با این صفات می‌تونی اندازه آی فریم (طول و عرض) رو تعیین کنی:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

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

می‌تونی مقادیر رو به پیکسل (مثل “500”) یا به صورت درصدی (مثل “100%”) تعیین کنی.

×

جلسه 11 آموزش HTML: ساخت فرم و کار با تگ form

مطالعه

3. title

برای بهبود دسترسی و ارتقای تجربه کاربری، همیشه به آی فریم یه عنوان (title) مناسب اضافه کن:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

4. name

ویژگی name به آی فریم یه نام می‌ده که می‌تونی ازش به عنوان مقصد لینک‌ها استفاده کنی. به عنوان مثال، فرض کن آی فریم با نام “myFrame” رو تعریف کردی:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

حالا وقتی لینکی رو اینطوری بنویسی:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

وقتی روی این لینک کلیک کنی، محتوای سایت نمونه (تستی) داخل همون آی فریم بارگذاری می‌شه، بدون اینکه صفحه اصلی رفرش یشه. 🚀 این ویژگی کمک می‌کنه تا تجربه کاربری بهتری رو فراهم کنی و محتوا رو به صورت هدفمند در بخش‌های مختلف صفحه نمایش بدی. 😎

×

جلسه 11 آموزش HTML: ساخت فرم و کار با تگ form

مطالعه

6. loading

ویژگی loading بهت این امکان رو میده که کنترل کنی آی فریم چطور و چه زمانی بارگذاری بشه. مثلاً:

• lazy: آی فریم فقط وقتی بارگذاری میشه که کاربر به اون نزدیک بشه. این روش باعث بهبود سرعت لود صفحه و صرفه‌جویی در منابع میشه. 🚀
• eager: آی فریم بلافاصله با بارگذاری صفحه محتوا رو دانلود می‌کنه، بدون توجه به موقعیت کاربر.

با انتخاب درست این ویژگی می‌تونی تجربه کاربری بهتری رو فراهم کنی. 😊

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

7. sandbox

ویژگی sandbox بهت این امکان رو می‌ده که دسترسی‌ها و عملکردهای آی فریم رو محدود کنی، 🚧 این کار باعث می‌شه اسکریپت‌های مخرب اجرا نشن و امنیت سایتت بالاتر بره. 🔒

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

ویژگی sandbox چندین مقدار مختلف داره که می‌تونی باهاش سطح دسترسی آی فریم رو کنترل کنی. 🚧 این مقادیر عبارتند از:

×

جلسه 6 آموزش HTML: آشنایی با تگ های ایجاد کننده لیست

مطالعه

• allow-scripts → اجازه اجرای اسکریپت‌ها رو می‌ده، اما اسکریپت‌ها نمی‌تونن پنجره جدید باز کنن.
• allow-same-origin → آی فریم می‌تونه مثل یه صفحه عادی رفتار کنه و به کوکی‌ها و اطلاعات دامنه خودش دسترسی داشته باشه.
• allow-forms → اجازه ارسال فرم‌ها رو می‌ده.
• allow-popups → آی فریم می‌تونه پنجره جدید باز کنه (مثل لینک‌هایی که توی تب جدید باز می‌شن).
• allow-modals → امکان نمایش دیالوگ‌های مودال مثل alert() رو می‌ده.
• allow-presentation → اجازه می‌ده آی فریم به حالت نمایش اسلاید (Presentation) بره.
• allow-downloads → امکان دانلود فایل از داخل آی فریم رو فعال می‌کنه.
• allow-pointer-lock → اجازه استفاده از API قفل نشانگر موس (Pointer Lock API) رو می‌ده (مثلاً برای بازی‌های تحت وب).
• allow-orientation-lock → اجازه قفل کردن چرخش صفحه در موبایل و تبلت رو می‌ده.
• allow-top-navigation-by-user-activation → فقط وقتی که کاربر تعامل (مثل کلیک) داشته باشه، اجازه هدایت صفحه والد رو می‌ده.

کاربردهای عملی آی فریم 🛠️

1. نمایش نقشه های گوگل در سایت با آی فریم

یکی از رایج‌ ترین استفاده‌های آی فریم، نمایش نقشه‌های گوگل در سایت هست:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

2. نمایش ویدیوهای یوتیوب با آی فریم

می‌تونی ویدیوهای یویتیوب رو به راحتی توی سایتت نمایش بدی. برای این کار، فقط کافیه از تگ <iframe> استفاده کنی:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

فقط کافیه VIDEO_ID رو با شناسه ویدیوی موردنظر جایگزین کنی. 🎥 همونطور که میدونی چون یوتیوب در ایران فیلتره؛ آی فریم اون بدون تغییر آی‌پی به یه کشور خارجی نمایش داده نمی‌شه. ❌ اگه کاربران سایتت داخل ایران هستن، بهتره از سرویس‌های داخلی مثل آپارات استفاده کنی

3. قرار دادن فرم‌های گوگل در صفحه وب با استفاده از آی فریم

اگه می‌خوای یه فرم نظرسنجی، ثبت‌نام یا هر نوع فرم آنلاین رو توی سایتت نمایش بدی، می‌تونی از Google Forms استفاده کنی و اون رو داخل آی فریم جاسازی کنی. این روش باعث می‌شه کاربر بدون نیاز به خروج از سایتت، فرم رو پر کنه. 😊

×

جلسه 20 آموزش HTML: آموزش رمزگذاری یا انکود کاراکترها

مطالعه

برای این کار، کافیه لینک آی فریم فرم گوگل رو از بخش “اشتراک‌گذاری” بگیری و در کد زیر جایگذاری کنی:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

🔹 YOUR_FORM_ID رو با شناسه فرم خودت جایگزین کن.
🔹 عرض (width) و ارتفاع (height) رو متناسب با طراحی سایتت تنظیم کن.

این روش برای جمع‌آوری اطلاعات کاربران خیلی مفیده و فرم‌ها کاملاً واکنش‌گرا هستن، یعنی روی موبایل و دسکتاپ به‌خوبی نمایش داده می‌شن! 🚀

4. نمایش پست‌های اینستاگرام با آی فریم

می‌دونی که حتی می‌تونی پست‌های اینستاگرام رو هم مستقیماً توی سایتت نمایش بدی؟ 🤩 این کار باعث می‌شه محتوای اینستاگرامت رو بدون نیاز به خروج از سایت، به کاربر نشون بدی.

×

جلسه 17 آموزش HTML: کار با id و کلاس (class و id)

مطالعه

برای این کار، اینستاگرام خودش یه کد جاسازی (Embed Code) بهت می‌ده. فقط کافیه:

1️⃣ روی سه‌نقطه بالای پست اینستاگرام کلیک کنی.
2️⃣ گزینه Embed رو انتخاب کن.
3️⃣ کدی که بهت داده رو توی سایتت قرار بدی.

به این شکل:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

از اونجایی که متأسفانه اینستاگرام هم مثل یوتیوب فیلتره 🚫، اگه کد آی فریم رو داخل صفحه قرار بدی، محتوا نمایش داده نمیشه. ❌ برای دیدن پست‌های اینستاگرام، کاربر باید آی‌پی خودش رو تغییر بده تا آی فریم به درستی بارگذاری بشه. 🌍

×

جلسه 13 آموزش HTML: آشنایی با تگ‌ های معنایی (Semantic Elements)

مطالعه

🔹 نکته مهم! استفاده بیش از حد از آی فریم‌ها باعث کاهش سرعت لود صفحه 🚀 می‌شه، چون هر آی فریم یه صفحه جداگانه رو بارگذاری می‌کنه. بنابراین، سعی کن فقط در موارد ضروری ازش استفاده کنی تا سرعت و عملکرد سایتت افت نکنه. ⚡😊

جمع بندی: آی فریم، پنجره ای به دنیای بیرون! 🚀

تگ iframe یه ابزار فوق العادس برای نمایش محتوای خارجی در سایت. چه بخوای نقشه نشون بدی، چه ویدیو یا حتی یه فرم پرداخت، آی فریم کارتو راه میندازه! اما همیشه مراقب مسائل امنیتی باش و از سایتهای معتبر استفاده کن.

حالا برو تمرین کن و یه صفحه وب بساز که توش از آی فریم برای نمایش محتوای جذاب استفاده کرده باشی! 😉

×

جلسه 16 آموزش HTML: عناصر Block و Inline در html

مطالعه