এইচটিএমএল বাংলা টিউটোরিয়াল পর্ব ১৬ – ফ্রেম টিউটোরিয়াল (HTML Frame Tutorial in Bangla)

এইচটিএমএল ফ্রেম দিয়ে একটা ওয়েব পেজকে দুই বা ততোধিক ভাগে ভাগ করা যায়। ডিভের ব্যাপারটা চিন্তা করুন, প্রতিটি ডিভে যেমন আলাদা আলাদা কনটেন্ট দেয়া যায় তেমনি  প্রত্যেকটি ফ্রেমে আলাদা আলাদা পেজ লোড করানো যায়।

এইচটিএমএল বাংলা টিউটোরিয়াল পর্ব ১৬ - ফ্রেম টিউটোরিয়াল (HTML Frame Tutorial in Bangla)

ধরুন আপনার একটি পেজে ৩টি ফ্রেম আছে, আপনি চাইলে যেকোন একটিকে রিলোড করাতে পারেন (পুরো পেজ লোড করানো ছাড়াই)। একটা পেজে কয়েকটি ফ্রেম থাকলে সেটাকে বলে ফ্রেমসেট। <frameset></frameset> এর ভিতরে <frame></frame> রাখতে হয়। যেমন নিচের উদাহরনের কোডটুকু frame_example.html নামে সেভ করুন এবং ৯, ১০ ও ১১ নং লাইনে দেখুন প্রতিটি এক একটি ফ্রেম। প্রথম ফ্রেমে top.html নামে আরেকটি পূর্নাঙ্গ এইচটিএমএল পেজ তৈরী করে ঢুকিয়ে দিয়েছি। এভাবে পরের দুটিতেও middle.html এবং bottom.html নামে দুটি পেজ দিয়েছি। এখন যখনি frame_example.html খুলবেন তখন এই পেজটির ভিতর top.html, middle.html এবং bottom.html এর কনটেন্ট দেখাবে। অর্থ্যাৎ একটা পেজের ভিতর ৩টি পেজ দেখাবে।

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title> CareerSourceBD Frame Tutorial </title>
</head>
<frameset rows="200,100,*">
<frame src="/top.html"/>
<frame src="/middle.html"/>
<frame src="/bottom.html"/>
<noframes>
<body>
This site uses a technology called frames. Unfortunately, your
browser does not support this technology. Please upgrade
your browser and visit us again!
</body>
</noframes>
</frameset>
</html>

কোডটি কেমন হবে তা দেখার জন্য এখানে ক্লিক করুন

==> <noframes></noframes>  দেয়া হয়েছে যদি আপনার ব্রাউজার ফ্রেম সাপোর্ট না করে তাহলে এর ভিতরের মেসেজটি দেখাবে।

==> <frame src=”/top.html”/> এখানে src তে পেজের লিংক ঠিকভাবে দিতে হবে।

==> < frameset rows=”200,100, * > এটা দিয়ে বোঝানো হয়েছে প্রথম ফ্রেমটি (top.html) টি ২০০ পিক্সেল উচু হবে পরেরটি ১০০ এবং শেষেরটি বাকি অংশ নিয়ে নেবে (* চিহ্ন)।

** HTML 5 এ ফ্রেম সাপোর্ট করেনা তাই ফ্রেম নিয়ে বেশি আলোচনা করবনা। ধীরে ধীরে এর ব্যবহার উঠে যাচ্ছে।

** উপরের উদাহরনে তাই দেখুন XHTML DOC type ব্যবহার করেছি HTML 5 এর পরিবর্তে।

** HTML 5 এ ফ্রেম সরিয়ে ফেলার কারনে এইসমস্ত কাজের জন্য iframe নামে একটা ট্যাগ ব্যবহার করা হয়।

iframe বা inline frame দিয়ে এইচটিএমএল ডকুমেন্টে সম্পূর্ন ভিন্ন একটি অংশ ঢুকিয়ে দেয়া যায় যেখানে ভিন্ন কোন ওয়েব পেজ প্রদর্শিত হবে।

<!DOCTYPE html>
<html>
<head>
<title> Webcoachbd Frame Tutorial </title>
</head>
<body>
<iframe width="100%" src="http://www.webcoachbd.com">
Your browser does not support iframe tag
</iframe>
</body>
</html>

কোডটি কেমন হবে তা দেখার জন্য এখানে ক্লিক করুন

src এট্রিবিউটে কোন লোকাল ফাইলও দিতে পারেন, আমি একটা URL দিয়েছি। এছাড়া আরো অনেক এট্রিবিউট ব্যবহার করা যায় তবে বেশিরভাগই HTML 5 এ সাপোর্টেড নয়। HTML 5 এ উপরে ব্যবহৃত দুটি (src এবং width) সাপোর্ট করে সাথে সাথে নিচেরগুলি

name : iframe এর নাম দেয়া যায়। যেমন

<iframe name="wchbd" width="100%" src="http://www.webcoachbd.com">
Your browser does not support iframe tag
</iframe>

seamless=”seamless” দিলে iframe এমন দেখাবে যেন এটা এই পেজেরই অংশ

<iframe name="wchbd" width="100%" src="http://www.webcoachbd.com" seamless="seamless">
Your browser does not support iframe tag
</iframe>

srcdoc=”html content” এই এট্রিবিউটের মান এইচটিএমল এলিমেন্ট দিতে পারেন ফলে সেটা iframe এর ভিতর দেখাবে।

Leave a Reply