এইচটিএমএল আইফ্রেম টিউটোরিয়াল (বাংলায়)

এইচটিএমএল-এ <iframe> ট্যাগ ব্যবহার করা হয় একটি ওয়েব পেজের মধ্যে আরেকটি ওয়েব পেজ বা কন্টেন্ট এমবেড করতে। এই টিউটোরিয়ালে আমরা শিখব কীভাবে <iframe> ব্যবহার করা যায় এবং এর সাথে সিএসএস স্টাইলিং করা যায়।

১. <iframe> ট্যাগ কী?

<iframe> (ইনলাইন ফ্রেম) হলো একটি এইচটিএমএল উপাদান যা:

• একটি ওয়েব পেজের মধ্যে অন্য ওয়েব পেজ বা কন্টেন্ট প্রদর্শন করে।
• ভিডিও, মানচিত্র, ফর্ম বা অন্যান্য ওয়েবসাইট এমবেড করতে ব্যবহৃত হয়।
• নির্দিষ্ট প্রস্থ এবং উচ্চতা সেট করা যায়।

সিনট্যাক্স: <iframe src="URL" width="width" height="height"></iframe>

২. গুরুত্বপূর্ণ <iframe> অ্যাট্রিবিউট

• src: এমবেড করা কন্টেন্টের URL।
• width এবং height: আইফ্রেমের প্রস্থ এবং উচ্চতা।
• frameborder: বর্ডার প্রদর্শন (0 বা 1)।
• title: অ্যাক্সেসিবিলিটির জন্য বর্ণনা।
• allow: নির্দিষ্ট ফিচারের অনুমতি (যেমন ফুলস্ক্রিন)।
• sandbox: নিরাপত্তার জন্য সীমাবদ্ধতা।

৩. আইফ্রেম ব্যবহারের উদাহরণ

<iframe src="https://www.example.com" width="100%" height="300" class="iframe-example" title="উদাহরণ ওয়েবসাইট"></iframe>
        

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="ইউটিউব ভিডিও" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="iframe-example"></iframe>
        

<iframe src="https://www.google.com/maps/embed?pb=..." width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" class="responsive-iframe" title="গুগল ম্যাপ"></iframe>
        

<style>
    .responsive-iframe {
        width: 100%;
        height: 300px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
</style>
<iframe src="https://www.example.com" class="responsive-iframe" title="রেস্পন্সিভ আইফ্রেম"></iframe>
        

৪. আইফ্রেম ব্যবহারের টিপস

• অ্যাক্সেসিবিলিটির জন্য title অ্যাট্রিবিউট ব্যবহার করুন।
• নিরাপত্তার জন্য sandbox অ্যাট্রিবিউট ব্যবহার করুন যদি বাহ্যিক কন্টেন্ট এমবেড করেন।
• রেস্পন্সিভ ডিজাইনের জন্য width="100%" বা সিএসএস মিডিয়া কোয়েরি ব্যবহার করুন।
• loading="lazy" ব্যবহার করে পেজ লোডিং দ্রুত করুন।
• অপ্রয়োজনীয় আইফ্রেম ব্যবহার এড়িয়ে চলুন, কারণ এটি পেজের পারফরম্যান্স কমাতে পারে।
• ইউটিউব বা গুগল ম্যাপের মতো প্ল্যাটফর্ম থেকে এমবেড কোড সঠিকভাবে কপি করুন।