এই ব্লগে HTML এর important ট্যাগ iframe Tag নিয়ে বিস্তারিত আলোচনা করা হয়েছে, যা ওয়েবপেজের ভেতরে অন্য ওয়েবসাইট বা ভিডিও এম্বেড করতে ব্যবহৃত হয়। এখানে src, width, height, name এবং frameborder এর মতো গুরুত্বপূর্ণ Attribute ব্যাখ্যা সহ উদাহরণ দেওয়া হয়েছে। এছাড়া, iframe ট্যাগ ব্যবহার করে কিভাবে ওয়েবসাইট YouTube ভিডিও embedded করা যায় সেটাও step by step দেখানো হয়েছে।
Table of Contents
What is tag in HTML ?
HTML এ ট্যাগ হলো একটি structural element যা ওয়েবপেজের বিষয়বস্তু (content) কিভাবে প্রদর্শিত হবে তা নির্ধারণ করে। প্রতিটি HTML ট্যাগের একটি ওপেনিং ট্যাগ এবং ক্লোজিং ট্যাগ থাকে (যেমন: <p>...</p>), যদিও কিছু ট্যাগ self-closing হয় (যেমন: <img />)। ট্যাগগুলির মাধ্যমে টেক্সট, ছবি, ভিডিও, লিংক, এবং ফ্রেমের মতো বিভিন্ন উপাদান ওয়েবপেজে যুক্ত করা যায়।
HTML Tag সম্পর্কিত বিস্তারিত জানতে এই পোস্ট টি পড়ুন।
What is iframe tag ?
<iframe> ট্যাগ ব্যবহার করে অন্য কোনো ওয়েবপেজকে একটি ফ্রেমের মধ্যে এম্বেড করা হয়। এটি একটি ওয়েবপেজের ভিতরে দ্বিতীয় একটি ওয়েবপেজ দেখানোর জন্য ব্যবহৃত হয়। উদাহরণস্বরূপ, আপনি একটি ইউটিউব ভিডিও বা গুগল ম্যাপ আপনার পৃষ্ঠায় এম্বেড করতে পারবেন।
Purpose of iframe tag
- একই পেজে একাধিক ওয়েবপেজ দেখানোর জন্য ব্যবহৃত হয়।
- Embedded কনটেন্ট প্রদর্শনের জন্য ব্যবহৃত হয় (যেমন: ভিডিও, ম্যাপ)।
Example
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<iframe src="https://www.example.com" width="600" height="400"></iframe>
</body>
</html>এখানে আমরা https://www.example.com বদলে আমাদের কম্পিউটারে থাকা কোনো ওয়েবপেজ কেও অ্যাড করতে পারি।
Output
Attributes of iframe tag
1. width এবং height
এই attribute এর মাধ্যমে আমরা ফ্রেমের width এবং height সেট করতে পারি।যদিও iframe এর default width হলো 300px (pixel) এবং height হলো 150px (pixel)।
Example
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<iframe width="100" height="100"></iframe>
</body>
</html>Output
2. title
এই attribute এর মাধ্যমে আমরা iframe এর একটি title সেট করতে পারি , যা অ্যাক্সেসিবিলিটির জন্য গুরুত্বপূর্ণ।
Example
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<iframe width="100" height="100" title="my iframe"></iframe>
</body>
</html>Output
3. src
এই attribute এর মাধ্যমে আমরা iframe এ একটি URL সেট করতে পারি , উদাহরণস্বরূপ, আপনি যদি একটি ওয়েবসাইট এম্বেড করতে চান, তবে সেই সাইটের URL src attribute এ লিখতে হবে।
Example
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<iframe src="https://www.example.com" width="200" height="200" title="my iframe"></iframe>
</body>
</html>Output
4. frameborder
এই attribute এর মাধ্যমে আমরা ফ্রেমের চারপাশে বর্ডার সেট করতে পারি । এখানে frameborder এর ভ্যালু 0 অর্থাৎ no border এবং 1 মানে চারপাশে বর্ডার।
Example
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<iframe src="https://www.example.com" width="500" height="300" frameborder="0">
</iframe>
</iframe>
</body>
</html>Output
with frame
without frame
5. name
এই attribute এর মাধ্যমে আমরা ফ্রেমের name সেট করতে পারি । যাতে লিংকের মাধ্যমে নির্দিষ্ট webpage এ এই ফ্রেমে কনটেন্ট লোড করা যায়।
Syntax
<iframe name="my_frame" > </iframe>কিভাবে একটি লিংকে ক্লিক করে আলাদা ওয়েবসাইট একটি নির্দিষ্ট iframe এ খোলা যায় ?
সবার প্রথমে আমি দুটো html ফাইল তৈরী করবো। website1.html এবং website2.html নামে|
প্রথমে website1.html তৈরী করে নেবো।
<!DOCTYPE html>
<html>
<head>
<title>website 1</title>
</head>
<body>
<h2 style="color:red;"> website 1 </h2>
<p> this is simple paragraph. </p>
</body>
</html>আমি এখানে একটি h2 tag নিয়েছি ও p tag একটি নিয়েছি।এবং h2 tag এ style attribute ব্যবহার করে লাল কালার করেছি।
HTML style attribute সম্পর্কিত বিস্তারিত জানতে এই পোস্ট টি পড়ুন।
then website2.html তৈরী করে নেবো।
<!DOCTYPE html>
<html>
<head>
<title>website 2</title>
</head>
<body>
<h2 style="color:green;"> website 2 </h2>
<p> this is simple paragraph. </p>
</body>
</html>আমি এখানে একটি h2 tag নিয়েছি ও p tag একটি নিয়েছি।এবং h2 tag এ style attribute ব্যবহার করে সবুজ কালার করেছি।
HTML style attribute সম্পর্কিত বিস্তারিত জানতে এই পোস্ট টি পড়ুন।
এরপর main.html তৈরী করে নেবো।
<!DOCTYPE html>
<html>
<head>
<title>website 2</title>
</head>
<body>
<iframe name="myFrame" width="600" height="400"></iframe><br>
<a href="website1.html" target="myFrame">website 1</a>
<a href="website2.html" target="myFrame">website 2</a><br>
</body>
</html>How to embedded youtube video in our website
- YouTube এ যান এবং যেকোনো ভিডিওতে ক্লিক করুন।
- ভিডিওর নিচে থাকা “Share” বাটনে ক্লিক করুন।
- “Embed” অপশন সিলেক্ট করুন।
- এম্বেড কোড কপি করুন।
- HTML ফাইলে এই কোড পেস্ট করুন।
Example
<!DOCTYPE html>
<html>
<head>
<title>website 2</title>
</head>
<body>
<iframe width="400"
height="200"
src="https://www.youtube.com/embed/a6HkyturBDM?si=Tv2fEw_clFqKnYyZ"
title="YouTube video player" frameborder="0"
allowfullscreen></iframe>
</body>
</html>Output
iframe tag সম্পর্কে আরো জানতে নিচের ভিডিওটি দেখুন |
F.A.Q
HTML iframe ট্যাগ কী ?
এটি একটি ইনলাইন ফ্রেম যা একটি ওয়েবপেজের ভিতরে অন্য একটি ওয়েবপেজে এম্বেড করতে ব্যবহৃত হয়। উদাহরণ: ইউটিউব ভিডিও বা গুগল ম্যাপ এম্বেড করা।
src অ্যাট্রিবিউট কীভাবে কাজ করে ?
src URL সেট করতে ব্যবহৃত হয়, যেখান থেকে কনটেন্ট লোড হবে। যেমন: <iframe src="https://example.com"></iframe>।
width এবং height অ্যাট্রিবিউট কী ?
এই attribute এর মাধ্যমে আমরা ফ্রেমের width এবং height সেট করতে পারি।যদিও iframe এর default width হলো 300px (pixel) এবং height হলো 150px (pixel)।
কিভাবে name অ্যাট্রিবিউট দিয়ে একটি iframe টার্গেট করা যায় ?
<a> ট্যাগের target অ্যাট্রিবিউট ব্যবহার করে নির্দিষ্ট iframe-এ কনটেন্ট লোড করা যায়। উদাহরণ: <a href="https://example.com" target="myFrame">Open in Frame</a>।
frameborder অ্যাট্রিবিউট কী ?
এই attribute বর্ডার দেখাবে কি না তা নিয়ন্ত্রণ করে (0 = কোনো বর্ডার নয়, 1 = বর্ডার থাকবে)।
কিভাবে একটি ইউটিউব ভিডিও iframe-এ Embed করবেন ?
YouTube-এর “Share” অপশন থেকে “Embed” কোড কপি করে HTML ফাইলে পেস্ট করতে হবে।
allowfullscreen অ্যাট্রিবিউট কীভাবে কাজ করে ?
এই অ্যাট্রিবিউট দিয়ে ভিডিও বা কনটেন্টকে fullscreen মোডে দেখানোর অনুমতি দেওয়া যায়।
iframe এর বিকল্প কী ?
CSS Grid বা Flexbox দিয়ে ভিন্ন লেআউট তৈরি করা যেতে পারে, যেখানে আলাদা ফ্রেমের প্রয়োজন নেই।
কিভাবে Google Maps iframe-এ Embed করবেন ?
Google Maps-এর “Share” > “Embed” অপশন থেকে কোড কপি করে HTML ফাইলে যোগ করতে হবে।
কেন কিছু ব্রাউজারে iframe লোড হয় না ?
এটি cross-origin policy সমস্যার কারণে হতে পারে, যেখানে একটি ডোমেইন থেকে অন্য ডোমেইনের কনটেন্ট লোড করা নিষিদ্ধ।
