এইচটিএমএল ফ্রেম টিউটোরিয়াল (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 এর কনটেন্ট দেখাবে। অর্থ্যাৎ একটা পেজের ভিতর ৩টি পেজ দেখাবে।

01.<?xml version="1.0" encoding="iso-8859-1"?>
02.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
03."http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
04.<html>
05.<head>
06.<title> CodesTrickz Frame Tutorial </title>
07.</head>
08.<frameset rows="200,100,*">
09.<frame src="/top.html"/>
10.<frame src="/middle.html"/>
11.<frame src="/bottom.html"/>
12.<noframes>
13.<body>
14.This site uses a technology called frames. Unfortunately, your
15.browser does not support this technology. Please upgrade
16.your browser and visit us again!
17.</body>
18.</noframes>
19.</frameset>
20.</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 দিয়ে এইচটিএমএল ডকুমেন্টে সম্পূর্ন ভিন্ন একটি অংশ ঢুকিয়ে দেয়া যায় যেখানে ভিন্ন কোন ওয়েব পেজ প্রদর্শিত হবে।

01.<!DOCTYPE html>
02.<html>
03.<head>
04.<title> CodesTrickz Frame Tutorial </title>
05.</head>
06.<body>
07.<iframe width="100%" src="http://www.codestrickz.xyz">
08.Your browser does not support iframe tag
09.</iframe>
10.</body>
11.</html>


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

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

1.<iframe name="wchbd" width="100%" src="http://www.codestrickz.xyz">
2.Your browser does not support iframe tag
3.</iframe>

 

 

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

 

1.<iframe name="wchbd" width="100%" src="http://www.codestrickz.xyz" seamless="seamless">
2.Your browser does not support iframe tag
3.</iframe>

 

 

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

Post a Comment

Cookie Consent
Little Blog serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the data/wifi internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.