X

X

X

HTML Iframes - Inserted Frame (অন্তর্ভুক্ত ফ্রেম)


একটি ওয়েব পেজের ভেতরে আরেকটি ওয়েবপেজ প্রদর্শণের জন্য iframe ব্যবহার করা হয়।

নিচে একটি iframe প্রদর্শণ করা হলো।


Iframe ব্যবহারের নিয়ম

HTML iframe কে  <iframe> tag এর মাধ্যমে উপস্থাপণ করা হয়।

<iframe src=”URL“></iframe>

src attribute এর মাধ্যমে কাংখিত ওয়েবপেজরে লিংক লিখা হয়। এই লিংকড ওয়েবপেজটিই মূলত iframe এর ওয়েবপেজ।


Iframe – Height এবং Width সেট করণ

height এবং width attribute ব্যবহার করে iframe এর দৈর্ঘ্য ও প্রস্থ নির্ধারণ করা যায়। এছাড়া CSS (সিএসএস) ব্যবহার করেও দৈর্ঘ্য ও প্রস্থ নির্ধারণ করা যায়। সাধারণত height এবং width attribute এ যে মান দেওয়া হয় সেগুলো পিক্সেল(px) এককে হিসেব করা হয়। তবে আমরা চাইলে সেগুলোকে শতকরা হিসেবেও উপস্থাপণ করতে পারি। যেমন, “80%” ।

Code Example

<iframe src="http://www.seicoder.com/resources/tutorials/html/html-iframes/demo_iframe.html" height="200" width="300"></iframe>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Iframe – থেকে বর্ডার দূরীকরণ

স্বাভাবিক অবস্থায় iframe এ বর্ডার আপনাআপনি উপস্থাপিত হয়। অনেক সময় আমাদের এই বর্ডারের প্রয়োজন নাও পড়তে পারে। সেক্ষেত্রে আমাদের CSS এর সাহায্য নিতে হবে। style attribute এ border property এর মান 0px সেট করলে iframe এর বর্ডার আর প্রদর্শিত হবে না।

Code Example

<iframe src="http://www.seicoder.com/resources/tutorials/html/html-iframes/demo_iframe.html" style="border:none;"></iframe>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


CSS এর মাধ্যমে iframe এর আকার, স্টাইল এবং রং ইত্যাদিও পরিবর্তন করতে পারবেন।

Code Example

<iframe src="http://www.seicoder.com/resources/tutorials/html/html-iframes/demo_iframe.html" style="border:2px solid grey;"></iframe>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Iframe – টার্গেট লিংক

বিভিন্ন ওয়েবসাইট ব্রাউজিং করার সময় হয়তো দেখেছেন বামদিকে মেনুতে ক্লিক করলে ডানদিকে একটি নির্দিষ্ট যায়গায় কাংখিত কন্টেন্ট উপস্থাপিত হয়। এটি সাধারণত Javascript Ajax ব্যবহার করে করা হয়। কিন্তু আমরা চাইলে জাভাস্কিপ্ট অ্যাজাক্স ব্যবহার না করেও iframe ব্যবহার করে একই রকম আউটপুট (Functionality) নিয়ে আসতে পারি।

এতক্ষণে নিশ্চয়ই জেনেছেন কিভাবে iframe ব্যবহার করতে হয়। এবার তাহলে একটি ওয়েব পেজ তৈরি করুন। উক্ত পেজে একটি iframe তৈরি করুন। এরপর iframe এ name attribute লিখুন। এর আপনার ইচ্ছানুযায়ী যেকোনো value লিখুন।

এখন একটি anchor link (a) তৈরি করুন। এটিতে যেকোনো একটি ওয়েবপেজের লিংক সেট করুন। তারপর এর target এট্রিবিউটে উক্ত iframe এর name attribute এর value লিখুন।

এখন পেজটি ওয়েব ব্রাউজারে লোড করে, লিংকটিতে ক্লিক করুন। যদি সবকিছু ঠিক থাকে তবে দেখবেন আপনার কাংখিত ওয়েবপেজ উক্ত iframe এ লোড হবে।

মনে রাখবেন কখনই একই পেজজের লিংক লিংকড করবেন না। অর্থাৎ, যে পেজ iframe আছে, ওই iframe এ তাকেই আবার লোড করবেন না। সেক্ষেত্রে ব্যাপরটি আত্মঘাতি হয়ে যাবে।

Code Example

<iframe height="300px" width="100%" src="http://www.seicoder.com/resources/tutorials/html/html-iframes/demo_iframe.html" name="iframe_a"></iframe>

<p><a href="http://www.seicoder.com/" target="iframe_a">seicoder.com</a></p>

<p>When the target of a link matches the name of an iframe, the link will open in the iframe.</p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML iframe ট্যাগ

ট্যাগ বর্ণনা
<iframe> iframe তৈরিতে ব্যবহৃত হয়।