HTML Iframe: ধাপে ধাপে পূর্ণ নির্দেশিকা

HTML iframe ট্যাগ একটি ওয়েব ডকুমেন্টকে একটি ওয়েব পেজে এম্বেড করে। একটি এম্বেডেড ডকুমেন্ট হতে পারে একটি PDF, একটি ওয়েব পেজ, বা অন্য কোনো অ্যাসেট। src অ্যাট্রিবিউট এম্বেডেড রিসোর্সের লোকেশন নির্ধারণ করে।

আপনি একটি ওয়েব ডকুমেন্টের কন্টেন্ট, যেন একটি PDF বা Google Maps থেকে একটি ম্যাপ, অন্য একটি পেজে HTML ব্যবহার করে এম্বেড করতে পারেন।

সেটিই হলো HTML <iframe> আসে। HTML <iframe> ট্যাগ অন্য একটি ওয়েব পেজের মতো এক্সটার্নাল অবজেক্টগুলো একটি সিঙ্গল ওয়েব পেজে এম্বেড করতে ব্যবহৃত হয়। এই টিউটোরিয়াল উদাহরণসহ আলোচনা করবে কীভাবে HTML <iframe> ট্যাগ ব্যবহার করে ওয়েব রিসোর্সগুলো একটি ওয়েব পেজে এম্বেড করবেন।

HTML iframe

HTML iframes, বা ইনলাইন ফ্রেম, একটি পেজে এক্সটার্নাল ওয়েব ডকুমেন্ট প্রদর্শন করে। আপনি <iframe> HTML ট্যাগ ব্যবহার করে ম্যাপ, PDF, ভিডিও, বা অন্যান্য রিসোর্স এম্বেড করতে পারেন।

একটি ইনলাইন ফ্রেমের মধ্যে স্টোর করা কোড বাকি ওয়েব পেজ থেকে স্বতন্ত্র। আপনার ওয়েব পেজে প্রযোজ্য যেকোনো স্টাইল বা JavaScript iframe-এর ভেতরে প্রয়োগ হবena।

HTML <iframe> ট্যাগের সিনট্যাক্স:

<iframe src="url"></iframe>

<iframe> ট্যাগ একটি iframe তৈরি করতে ব্যবহৃত হয়। আমরা একটি iframe src অ্যাট্রিবিউট নির্দিষ্ট করেছি। অ্যাট্রিবিউটটি সেই HTML এলিমেন্টগুলোর লোকেশন ধারণ করে যেগুলো আমরা আমাদের ওয়েব পেজে এম্বেড করতে চাই। এটি একটি HTML URL হওয়া উচিত।

iframe HTML কোড উদাহরণ

চলুন একটি উদাহরণের মাধ্যমে <iframe> ট্যাগ কীভাবে কাজ করে সেটি এক্সপ্লোর করি।

৮১% অংশগ্রহণকারী বলেছেন বুটক্যাম্পে অংশ নেওয়ার পর তাদের টেক জব প্রস্পেক্টস সম্পর্কে অধিক আত্মবিশ্বাসী অনুভব করছেন। আজই একটি বুটক্যাম্পের সাথে ম্যাচ হোন।

গড় বুটক্যাম্প স্নাতক ক্যারিয়ার ট্রানজিশনে ছয় মাস কম ব্যয় করেছেন, বুটক্যাম্প শুরু থেকে প্রথম চাকরি পাওয়া পর্যন্ত।

মান লেন আমরা একটি স্থানীয় Washington, D.C. ইতিহাস সমিতির জন্য একটি ওয়েবসাইট বানাচ্ছি। সে আমাদের কে একটি পেজ তৈরি করতে বলেছে যেখানে Khan Academy-এর ইউএস কনস্টিটিউশনের জন্ম সম্পর্কে একটি এম্বেডেড ভিডিও থাকবে। এই পেজটি কেউ সমিতিতে যোগদান করতে আগ্রহী হলে রিকমেন্ডেড ম্যাটেরিয়াল। আমরা নিচের কোড ব্যবহার করে ভিডিওটি আমাদের ওয়েবসাইটে এম্বেড করতে পারি:

<iframe src="https://www.youtube.com/embed/Rk8dCnKIfP4"></iframe>

আমাদের কোড রিটার্ন করে:

আমরা একটি <iframe> এলিমেন্ট ব্যবহার করেছি একটি এক্সটার্নাল ওয়েব রিসোর্স আমাদের ওয়েব পেজে এম্বেড করতে। আমাদের এম্বেড করা ওয়েব রিসোর্সটি লিংক "https://www.youtube.com/embed/Rk8dCnKIfP4"। এটি ঐতিহাসিক সমিতি যা তাদের ওয়েবসাইটে দেখাতে চায় সে ভিডিওকে পয়েন্ট করে।

HTML Iframe Height এবং Width

height অ্যাট্রিবিউট এবং width অ্যাট্রিবিউট একটি iframe-এর সাইজ সেট করতে ব্যবহৃত হয়। মান লেন স্থানীয় Washington D.C. ইতিহাস সমিতি আমাদেরকে তাদের সাইটে ভিডিওটি বড় করতে বলে।

আমরা YouTube ভিডিওর প্রস্থ ৫০০ পিক্সেল এবং উচ্চতা ৩০০ পিক্সেল সেট করব:

<iframe height="300" width="500" src="https://www.youtube.com/embed/Rk8dCnKIfP4"></iframe>

আমাদের কোড রিটার্ন করে:

আমাদের এম্বেডেড ভিডিও এখন আমাদের HTML ডকুমেন্টে ৫০০ পিক্সেল প্রস্থ এবং ৩০০ পিক্সেল উচ্চতা। এটি মানুষদের ওয়েবসাইটে ভিডিওটি দেখতে সহজ করে।

বিকল্পভাবে, আমরা iframe ট্যাগের width এবং height CSS ব্যবহার করে সেট করতে পারি। কিন্তু, যেহেতু HTML height এবং weight অ্যাট্রিবিউট সাপোর্ট করে, এটি আবশ্যক নয়।

HTML iframe Border রিমুভ করা

আপনি <iframe> ট্যাগের সাথে কাজ করলে লক্ষ্য করবেন এর কন্টেন্ট একটি বর্ডার দ্বারা ঘেরা থাকে। আপনি যদি এই বর্ডারটি সরাতে চান, border:none; CSS অ্যাট্রিবিউট ব্যবহার করতে পারেন।

ঐতিহাসিক সমিতি আমাদেরকে তাদের সাইট থেকে YouTube ভিডিওর চারপাশের বর্ডার সরাতে বলেছে। বর্ডার সরাতে আমরা যে কোডটি ব্যবহার করব:

<iframe height="300" width="500" src="https://www.youtube.com/embed/Rk8dCnKIfP4" style="border:none;"></iframe>

আমাদের কোড রিটার্ন করে:

আমাদের ভিডিওর এখন কোনো বর্ডার নেই।

HTML iframe লিংক টার্গেটস

অতিরিক্তভাবে, <iframe> ট্যাগগুলো একটি লিংকের টার্গেট ফ্রেম হিসেবে ব্যবহার করা যায়। আমরা একটি iframe কে একটি লิงকের টার্গেট ফ্রেম হিসেবে সেট করতে পারি HTML লিংকে target অ্যাট্রিবিউট ব্যবহার করে। target HTML অ্যাট্রিবিউট অবশ্যই <iframe>-এর name অ্যাট্রিবিউটকে রেফার করবে।

মান লেন ঐতিহাসিক সমিতির অন্য একটি ভিডিও ছিল যা সে আমাদের তাদের ওয়েবসাইটে দেখাতে চায় US কনস্টিটিউশনের Article I-র ওপর। এই ভিডিওটিও Khan Academy দ্বারা পাবলিশ করা হয়েছিল।

যখন ওয়েব পেজে Birth টেক্সটে ক্লিক করা হবে, Birth of the U.S. Constitution ভিডিওটি iframe-এ রেন্ডার হবে। যখন Article I টেক্সটে ক্লিক করা হবে, কনস্টিটিউশনের Article I-র ওপর ভিডিওটি রেন্ডার হবে।

এই কাজটি সম্পন্ন করতে আমরা নিচের কোড ব্যবহার করতে পারি:

<iframe src="https://www.youtube.com/embed/Rk8dCnKIfP4" name="iframe1"></iframe><br /> <a href="https://www.youtube.com/embed/Rk8dCnKIfP" target="iframe1">Birth</a><br /> <a href="https://www.youtube.com/embed/CIFBjZU55so" target="iframe1">Article I</a>

আমাদের কোড রিটার্ন করে:

ডিফল্টভাবে, ইউএস কনস্টিটিউশনের জন্ম সম্পর্কে ভিডিওটি iframe-এ দেখায়। iframe-এর কন্টেন্ট কনস্টিটিউশনের Article I-র ওপর Khan Academy-এর ভিডিওকে পয়েন্ট করতে পরিবর্তন হয় যখন আমরা Article I URL-এ ক্লিক করি।

যদি কনস্টিটিউশনের জন্ম ভিডিওটি ইতিমধ্যে ফিচার করা না থাকে, Birth ক্লিক করলে আমাদের iframe সেটি রিডাইরেক্ট করবে।

উপসংহার

<iframe> HTML ট্যাগ এক্সটার্নাল ওয়েব রিসোর্স যেন ওয়েব পেজ, ফাইল, ভিডিও, বা অন্যান্য ওয়েব পেজ এম্বেড করে একটি অন্য ওয়েব পেজে। এটি উপকারী যদি আপনি আপনার সাইটে ম্যাপ, ফাইল, ভিডিও, বা অন্যান্য ওয়েব পেজ যোগ করতে চান।

এই টিউটোরিয়াল উদাহরণের রেফারেন্সে আলোচনা করেছে কীভাবে HTML <iframe> ট্যাগ ব্যবহার করে এক্সটার্নাল ওয়েব রিসোর্সগুলো একটি ওয়েব পেজে রেন্ডার করবেন। এখন আপনার কাছে <iframe> ট্যাগ একটি প্রোর মতো ব্যবহার শুরু করার জ্ঞান আছে!

HTML-এ কোডিং সম্পর্কে আরও জানতে, HyperText Markup Language শিখার আমাদের গাইড পড়ুন।