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

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

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

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

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

 

 

iframe tag

iframe tag

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

<iframe src="https://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>

Try it yourself

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

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

Related Post

HTML u ট্যাগ ও u ট্যাগের ব্যবহার... সাধারণত HTML u ট্যাগ কোন ডকুমেন্টে ব্যবহার করা হলে সে ডকুমেন্টের নিচের দিকে আন্ডারলাইন যুক্ত হয়। আমরা anchor tag ব্যবহার করলে লিংক এর নিচে আন্ডার লাইন...
এইচ টি এম এল কি একটি ওয়েব পেজের মূল গঠন তৈরি করতে HTML ব্যবহার করা হয়ে থাকে। এইচ টি এম এল হচ্ছে মার্কআপ ল্যাঙ্গুয়েজ, HTML প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়। HTML এর ফুল ফ...
html img tag কিভাবে ব্যাবহার করবেন... Web Page এ ছবি নিয়ে আসবার জন্য আমাদের img tag টি ব্যবহার করতে হয় html code এ । html5 standard এ img tag এর দুটি attribute থাকতেই হবে, আর তারা হচ্ছে, s...
এইচটিএমএল ট্যাগ লিস্ট HTML5 tag list... HTML5 ট্যাগ লিস্টে আমরা তুলে ধরেছি সবগুলো HTML ট্যাগ  এর নাম ও এদের হালকা বিবরনি । ধিরে ধিরে আমরা তুলে ধরছি এদের বিস্তারিত ব্যবহার এই এইচটিএমএল ট্যাগ ...
ওয়েবসাইটে Youtube ভিডিও অ্যাড করবো কিভাবে... ইতি পূর্বে আমরা আলোচনা করেছি কিভাবে ওয়েবসাইটে গুগল ম্যাপ প্রর্দশন করা যায়। তারই ধারাবাহিকতায় আজকে আমরা আলোচনা করবো কিভাবে Youtube এর ভিডিও ওয়েবসাইটে প...
HTML এ সুপারস্ক্রিপ্ট ও সাবস্ক্রিপ্ট কিভাবে করে (s... একটি ওয়েবপেজে গানিতিক কিংবা রাসায়নিক সমিকরন অথবা সাংকেতিক চিহ্ন যোগ করার জন্য Subscript কিংবা Superscript এর প্রয়োজন হয়। গণিতের এর ক্ষেত্রে Superscrip...

You may also like...

Leave a Reply

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

error: Content is protected !!