HTML iframe ট্যাগ ও iframe ট্যাগের ব্যবহার

সাধারণত iframe ট্যাগ ব্যবহার করে একটি ওয়েবসাইটের মধ্যে অন্য একটি ওয়েবসাইট কিংবা ওয়েবপেজ ভিউ করানো হয়ে থাকে। ধরুন, আপনি কোন একটি ওয়েবসাইট অন্য কোন ওয়েবসাইটের মধ্যে সম্পুর্ন আকারে ভিউ করাবেন। তাহলে আমরা HTML iframe ট্যাগ ব্যবহার করে খুব সহজে কাজটি করে নিতে পারি। যেমনঃ Youtube, google map iframe ট্যাগ ব্যবহার করে নিজের ওয়েবপেজে ব্যবহার করা যায়। চলুন কথা না বাড়িয়ে নিচের অংশে দেখে নেয়া যাক।

iframe ট্যাগ এর কোডঃ

<iframe src="http://kivabe.com"></iframe>

উপরের লাইনটি আপনার যে কোন html page এ এড করে নিন। সেখানে এট্রিবিউট আকারে src দেয়া আছে এবং তার মধ্যে ভেলু হিসাবে ওয়েব এড্রেস দেয়া হয়েছে http://kivabe.com  । এবার যেকোন ব্রাউজারে আপনার html page টি রান করলে নিচের ছবিটির মতো দেখা যাবে।

 

 

iframe tag

iframe tag

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

<iframe src="http://kivabe.com" width="750" height="400"></iframe>

উপরের কোডে iframe ট্যাগের সাথে  width, height ব্যবহার করা হয়েছে যেখানে width এর ভ্যালু দেখা আছে 750 আর height এর ভ্যালু দেয়া আছে 400. এবার আগের পেজটি ব্রাউজারে রিলোড দিলে কিংবা নতুন করে ব্রাউজারে ওপেন করলে নিচের ছবিটির মতো দেখা যাবে। আপনি আপনার প্রয়োজন মতো width, height বাড়াতে পারেন।

 

iframe

iframe

উপরের ছবিটিতে ভালো ভাবে লক্ষ করলে বোর্ডার দেখা যাবে এবং ওয়েবসাইটিকে সম্পর্ন ভাবে দেখার জন্য scroll বার আছে।

iframe ট্যাগ ব্যবহার করে লোকাল ফাইল দেখানো:

ধরুন আপনার মেশিনে ইন্টারনেট নেই কিংবা আপনি চাচ্ছেন আপনার আগের তৈরি করা অন্য একটি ওপেব পেজ নতুন একটি html page এ দেখাবেন। এবং ধরে নিলাম তারা একই ফোল্ডারে আছে । ধরে নিলাম আপনি যে পেজটি এড করবেন তার নাম work.html , নিচের কোডটি দেখুন …

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"> 
 <title>ifamre use</title> 
</head>
<body>
 <h3>Following is a website/web page loaded using iframe</h3>
 <iframe src="work.html" width="600" height="400" frameborder="0"></iframe>
</body>
</html>

এবার নতুন পেজ টি ব্রাউজারে রান করে দেখুন , দেখবেন যে আপনার নতুন পেজে আগের ওয়েব পেজটি দেখাচ্ছে । উপরের কোডে আমরা আরও একটু নতুন attribute ব্যবহার করেছি যার নাম framebordre, এটি আইফ্রেমের বডার থাকলে সেটিকে বন্ধ করে দেয় ।

ভালো থাকবেন সবায় আর আমাদের পোস্টগুলো ভালো লাগলে অন্যদের সাথে শেয়ার করতে ভুলবেন না 🙂

Related Post

HTML meta ট্যাগ ও meta ট্যাগের ব্যবহার... সাধারণত meta ট্যাগ ব্যবহার করে ব্রাউজারকে অতিরিক্ত তথ্য প্রধান করা হয়ে থাকে।  meta ট্যাগের কোন ক্লোজিং ট্যাগ নেই।  আপনি একটি ওয়েব পেজ তৈরি করার সময় এক...
HTML base ট্যাগ ও base ট্যাগের ব্যবহার... সাধারণত একটি ডকুমেন্টের সমস্ত ইউআরএল বা ঠিকানা গুলির জন্য এ্কটি ডিফল্ট URL ও এর টার্গেট ঠিক করা হয়ে থাকে base ট্যাগ দিয়ে  । base ট্যাগ ব্যবহার করা হয় ...
HTML br ট্যাগ এবং br ট্যাগের ব্যবহার... আমরা ওয়েবে সাধারনত বিভিন্য Paragraph গুলো p tag এর মধ্যে রাখি । আর লিখাগুলো এক লাইন শেষ হলে অটো পরের লাইনে চলে আসে । কিন্তু এমন যদি হয় যে আপনি চাচ্ছেন...
area ট্যাগ ও map ট্যাগের ব্যবহার উদাহরন সহ... map ট্যাগ এবং area ট্যাগ এই দুটো আসলে একে অপরের সাথে কানেক্টটেড। অনেকটা ul li এবং ol li এই দুইটো ট্যাগের সাথে সর্ম্পকের মতো। যেমন এর আগে আমরা দেখিয়েছি...
HTML title ট্যাগ ও title ট্যাগের ব্যবহার... একটি ওয়েবপেজ তৈরি করার সময় HTML Page এ title বা শিরোনাম  দেয়ার প্রয়োজন হয় এবং এটি থাকে সবার উপরে ট্যাব এর নাম আকারে এর সঠিক ব্যবহারে আপনার কন্টেন্ট গ...
এইচটিএমএল ট্যাগ – html tag ও html attributes... আমাদের আজকের আলোচনার বিষয় এইচটিএমএল ট্যাগ ( html tag ) ও এট্রিবিউট নিয়ে।  এর আগের আর্টিকেল এ আমরা জেনেছিলাম কিভাবে এইচটিএমএল দিয়ে Hello World লিখা যায়...

You may also like...

Leave a Reply

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