এইচটিএমএল iframes

একটি ওয়েব পেজের মধ্যে আর একটি ওয়েব পেজ দেখানোর জন্য ব্যবহার হয় এইচটিএমএল iframes

HTML iframe Syntax

HTML <iframe> tag টি একটি ইনলাইন ফ্রেম তৈরি করে ।

একটি ইনলাইন ফ্রেম HTML Document এর মধ্যে আর একটি ডকুমেন্ট এমবেড করে ।

Syntax

<iframe src="url" title="description">

Tips: এটা ভালো অভ্যাস যে আপনি সবসময় <iframe> এর সাথে title attribute টি ব্যবহার করেন । এটি স্ক্রিন রেকোডার (বিভিন্য বোট যা সাইট ক্রাউল করে ইন্ডেক্স করার জন্য ) দের বলে দেয়ে যে <iframe>  এর কন্টেন্ট টি কি বিষয়ক ।

iframe এ হাইট ও ওয়াইড সেট করা

heightwidth 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>

নিজে চেষ্টা করুন

 

 

কমেন্ট করুন

Your email address will not be published. Required fields are marked *