HTML iframe ট্যাগ একটি ওয়েব ডকুমেন্টকে একটি ওয়েব পেজে এম্বেড করে। একটি এমবেডেড নথি একটি PDF, একটি ওয়েব পৃষ্ঠা বা অন্য সম্পদ হতে পারে। src অ্যাট্রিবিউট এমবেড করা সম্পদের অবস্থান নির্ধারণ করে।
আপনি HTML ব্যবহার করে একটি ওয়েব ডকুমেন্টের বিষয়বস্তু যেমন একটি PDF বা Google Maps থেকে একটি মানচিত্র অন্য পৃষ্ঠায় এম্বেড করতে পারেন৷
সেখানেই HTML আসে৷ HTML ৷ ট্যাগ একটি একক ওয়েব পৃষ্ঠায় অন্যান্য ওয়েব পৃষ্ঠাগুলির মতো বাহ্যিক বস্তুগুলিকে এম্বেড করতে ব্যবহৃত হয়। এই টিউটোরিয়ালটি উদাহরণ সহ আলোচনা করবে কিভাবে HTML ব্যবহার করতে হয় একটি ওয়েব পৃষ্ঠায় ওয়েব সংস্থান এম্বেড করতে ট্যাগ করুন৷
HTML iframe
HTML iframes, বা ইনলাইন ফ্রেম, একটি পৃষ্ঠায় বহিরাগত ওয়েব নথি প্রদর্শন করে। আপনি
একটি ইনলাইন ফ্রেমের মধ্যে সংরক্ষিত কোডটি ওয়েব পেজের বাকি অংশ থেকে স্বাধীন। আপনার ওয়েব পৃষ্ঠায় প্রযোজ্য কোনো স্টাইল বা জাভাস্ক্রিপ্ট আইফ্রেমের মধ্যে প্রয়োগ করা হবে না।
এখানে HTML -এর সিনট্যাক্স রয়েছে ট্যাগ:
<iframe src="url"></iframe>
একটি আইফ্রেম তৈরি করতে ট্যাগ ব্যবহার করা হয়। আমরা একটি iframe src নির্দিষ্ট করেছি বৈশিষ্ট্য অ্যাট্রিবিউটটিতে HTML উপাদানগুলির অবস্থান রয়েছে যা আমরা আমাদের ওয়েব পৃষ্ঠায় এম্বেড করতে চাই। এটি একটি HTML URL হওয়া উচিত৷
৷iframe HTML কোড উদাহরণ
কিভাবে অন্বেষণ করতে একটি উদাহরণ দিয়ে হাঁটুন ট্যাগ কাজ করে।
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।
ধরুন আমরা একটি স্থানীয় ওয়াশিংটন, ডিসি ঐতিহাসিক সমাজের জন্য একটি ওয়েবসাইট তৈরি করছি। তারা চায় যে আমরা মার্কিন যুক্তরাষ্ট্রের সংবিধানের জন্মের উপর খান একাডেমি থেকে একটি এমবেডেড ভিডিও সহ একটি পৃষ্ঠা তৈরি করি। এই পৃষ্ঠাটি সমাজে যোগদান করতে আগ্রহী যে কেউ জন্য প্রস্তাবিত উপাদান. আমরা আমাদের ওয়েবসাইটে ভিডিও এম্বেড করতে নিম্নলিখিত কোড ব্যবহার করতে পারি:
<iframe src="https://www.youtube.com/embed/Rk8dCnKIfP4"></iframe>
আমাদের কোড ফিরে আসে:
আমরা একটি ব্যবহার করেছি আমাদের ওয়েব পৃষ্ঠায় একটি বহিরাগত ওয়েব রিসোর্স এম্বেড করার উপাদান। আমরা যে ওয়েব রিসোর্সটি এম্বেড করেছি সেটি হল "https://www.youtube.com/embed/Rk8dCnKIfP4" লিঙ্ক। এটি সেই ভিডিওটিকে নির্দেশ করে যা ঐতিহাসিক সমাজ তাদের ওয়েবসাইটে প্রদর্শন করতে চায়৷
৷HTML Iframe উচ্চতা এবং প্রস্থ
উচ্চতা বৈশিষ্ট্য এবং প্রস্থ বৈশিষ্ট্য একটি আইফ্রেমের আকার সেট করতে ব্যবহৃত হয়। ধরুন স্থানীয় ওয়াশিংটন ডি.সি. ঐতিহাসিক সমাজ চায় আমরা তাদের সাইটে ভিডিওটিকে আরও বড় করে তুলি৷
আমরা YouTube ভিডিওর প্রস্থ 500 পিক্সেল এবং উচ্চতা 300 পিক্সেল সেট করতে যাচ্ছি:
<iframe height="300" width="500" src="https://www.youtube.com/embed/Rk8dCnKIfP4"></iframe>
আমাদের কোড ফিরে আসে:
আমাদের এমবেড করা ভিডিও এখন আমাদের HTML নথিতে 500 পিক্সেল চওড়া এবং 300 পিক্সেল লম্বা৷ এটি লোকেদের ওয়েবসাইটে আমাদের ভিডিও দেখতে সহজ করে তোলে৷
৷বিকল্পভাবে, আমরা CSS ব্যবহার করে iframe ট্যাগের প্রস্থ এবং উচ্চতা সেট করতে পারি। কিন্তু, যেহেতু HTML একটি উচ্চতা এবং ওজন বৈশিষ্ট্য সমর্থন করে, এটি প্রয়োজনীয় নয়৷
HTML iframe বর্ডার সরান
আপনি যখন এর সাথে কাজ করছেন ট্যাগ, আপনি লক্ষ্য করবেন যে এর বিষয়বস্তু একটি সীমানা দ্বারা বেষ্টিত। আপনি যদি এই সীমানাটি সরাতে চান, আপনি বর্ডার:কোনও নয়; ব্যবহার করতে পারেন৷ CSS অ্যাট্রিবিউট।
ঐতিহাসিক সমাজ আমাদের তাদের সাইট থেকে YouTube ভিডিওর চারপাশের সীমানা সরাতে বলেছে। এই কোডটি আমরা সীমানা সরাতে ব্যবহার করব:
<iframe height="300" width="500" src="https://www.youtube.com/embed/Rk8dCnKIfP4" style="border:none;"></iframe>
আমাদের কোড ফিরে আসে:
আমাদের ভিডিওর এখন আর কোনো সীমানা নেই৷
৷HTML iframe লিঙ্ক টার্গেট
এছাড়াও, ট্যাগগুলি একটি লিঙ্কের লক্ষ্য ফ্রেম হিসাবে ব্যবহার করা যেতে পারে। আমরা একটি HTML লিঙ্কে টার্গেট অ্যাট্রিবিউট ব্যবহার করে একটি লিঙ্কের লক্ষ্য ফ্রেম হিসাবে একটি iframe সেট করতে পারি। টার্গেট HTML অ্যাট্রিবিউট অবশ্যই একটি -এর নামের অ্যাট্রিবিউটকে উল্লেখ করতে হবে .
ধরুন ঐতিহাসিক সমাজের কাছে অন্য একটি ভিডিও ছিল যা তারা আমাদের মার্কিন সংবিধানের অনুচ্ছেদ I-এ তাদের ওয়েবসাইটে দেখাতে চেয়েছিল। এই ভিডিওটি খান একাডেমিও প্রকাশ করেছে।
যখন পাঠ্য জন্ম ওয়েব পৃষ্ঠায় ক্লিক করা হয়, মার্কিন যুক্তরাষ্ট্রের সংবিধানের জন্ম ভিডিও আইফ্রেমে রেন্ডার করা উচিত। যখন পাঠ্য নিবন্ধ I ক্লিক করা হলে, সংবিধানের অনুচ্ছেদ 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>
আমাদের কোড ফিরে আসে:
ডিফল্টরূপে, মার্কিন সংবিধানের জন্মের ভিডিও আইফ্রেমে দেখানো হয়। আইফ্রেমের বিষয়বস্তু পরিবর্তন করে সংবিধানের অনুচ্ছেদ I-এর খান একাডেমীর ভিডিওতে নির্দেশ করে। এটি ঘটে যখন আমরা আর্টিকেল I এ ক্লিক করি URL৷
৷আমাদের আইফ্রেমটি সংবিধানের জন্মের ভিডিওতে পুনঃনির্দেশিত হয় যদি আমরা জন্ম এ ক্লিক করার সময় সেই ভিডিওটি ইতিমধ্যে বৈশিষ্ট্যযুক্ত না হয় .
উপসংহার
HTML ট্যাগ বহিরাগত ওয়েব রিসোর্স যেমন ওয়েব পৃষ্ঠাগুলিকে অন্য ওয়েব পৃষ্ঠায় এম্বেড করে। আপনি যদি আপনার সাইটে মানচিত্র, ফাইল, ভিডিও বা অন্যান্য ওয়েব পৃষ্ঠাগুলি যোগ করতে চান তবে এটি কার্যকর৷
এই টিউটোরিয়ালটি উদাহরণের সাথে আলোচনা করা হয়েছে, কিভাবে HTML ব্যবহার করতে হয় একটি ওয়েব পৃষ্ঠায় বহিরাগত ওয়েব সংস্থান রেন্ডার করতে ট্যাগ। এখন আপনার ব্যবহার শুরু করার জন্য প্রয়োজনীয় জ্ঞান আছে একজন পেশাদারের মত ট্যাগ করুন!
HTML এ কোডিং সম্পর্কে আরও জানতে, হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজ শেখার জন্য আমাদের গাইড পড়ুন।