একটি ওয়েব পেজের মধ্যে আর একটি ওয়েব পেজ দেখানোর জন্য ব্যবহার হয় এইচটিএমএল iframes
HTML iframe Syntax
HTML <iframe> tag টি একটি ইনলাইন ফ্রেম তৈরি করে ।
একটি ইনলাইন ফ্রেম HTML Document এর মধ্যে আর একটি ডকুমেন্ট এমবেড করে ।
Syntax
<iframe src="url" title="description">
Tips: এটা ভালো অভ্যাস যে আপনি সবসময় <iframe> এর সাথে title attribute টি ব্যবহার করেন । এটি স্ক্রিন রেকোডার (বিভিন্য বোট যা সাইট ক্রাউল করে ইন্ডেক্স করার জন্য ) দের বলে দেয়ে যে <iframe> এর কন্টেন্ট টি কি বিষয়ক ।
iframe এ হাইট ও ওয়াইড সেট করা
height ও width attribute ব্যবহার করে iframe এর সাইজ ঠিক করে দেয়া হয় ।
ডিফল্ট ভাবে height ও width পিক্সেল এ প্রকাশ হয় ।
উদাহরণ
<iframe src="https://kivabe.com/codes/" height="250" width="350" title="Iframe Example"></iframe>
অথবা style attribute ব্যবহার করেও height ও width ঠিক করে দেয়া যায় ।
<iframe src="https://kivabe.com/codes/" style="width:400px; height:400px" title="Iframe Example"></iframe>
আইফ্রেম এর বর্ডার পরিবর্তন করা
উপারের উদাহরন গুলোতে দেখেছি যে আইফ্রেম ডিফল্ট ভাবে বর্ডার নেয় । তো সেটাকে style অ্যাট্রিবিউট ব্যবহার করে বদল করা সম্ভব।
উদাহরণ , বর্ডার মুছে ফেলা
<iframe src="https://kivabe.com/codes/" style="border:none" title="Iframe without border"></iframe>
আইফ্রেম এর বর্ডার এর কালার ও থিকনেস ও পরিবর্তন করা যায় style attribute এর মাধ্যমে
উদাহরণ
<iframe src="https://kivabe.com/codes/" style="border:3px solid green" title="Iframe without border"></iframe>
iframe এ বিভিন্ন লিংক লোড করা
একটি iframe একটি লিঙ্ক এর টারগেট ফ্রেম ও হতে পারে ।
লিংক এর target অ্যাট্রিবিউট টি অবশ্যই iframe এর name কে রেফার করবে ।
<iframe name='load_links' src="https://kivabe.com/demo_frame.htm" style="border:3px solid green; width:350px" title="Iframe without border"></iframe> <p> <a href="https://kivabe.com" target="load_links"> Main Site</a> <a href="https://kivabe.com/codes/" target="load_links">Kivabe Codes</a> <a href="https://wikipedia.com" target="load_links">WikiPedia</a> </p>