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

ওয়েবসাইটে গুগল ম্যাপ যোগ করবো কিভাবে... অনেক সময় কিছু কিছু ওয়েবসাইটে ভিজিট করার সময় আমরা Google Map দেখে থাকি। আমরা অনেকেই জানি Google Map ব্যবহার করে রোড়ম্যাপ, লোকেশন ট্র্যাক সহ অনেক ধরনের ...
এইচ টি এম এল কি একটি ওয়েব পেজের মূল গঠন তৈরি করতে HTML ব্যবহার করা হয়ে থাকে। এইচ টি এম এল হচ্ছে মার্কআপ ল্যাঙ্গুয়েজ, HTML প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়। HTML এর ফুল ফ...
HTML – এইচটিএমএল কি এবং HTML শিখবো কিভাবে... HTML কি এবং HTML শিখবো কিভাবে? HTML একটি web based programing language যা ওয়েব সাইত তৈরি করতে ব্যবহার করা হয় এবং আজকাল মোবাইল এর অনেক এপ্লিকেশন বানাতে...
b এবং strong ট্যাগ – HTML এ টেক্সট বোল্ড বা... আজকের আলোচনায় জেনে নিবো কিভাবে  HTML এ টেক্সট বোল্ড বা মোটা করে ।  HTML এ টেক্সট বোল্ড বা মোটা  করার জন্য b  কিংবা strong ট্যাগ ব্যবহার করা হয় । তো নি...
HTML p ট্যাগ ও p ট্যাগের ব্যবহার... সাধারণত HTML p ট্যাগ কোন সাইটে লেখা প্রকাশ করার ক্ষেত্রে ব্যবহার করা হয়ে থাকে। p tag আসলে paragraph represent করে ।  যেমন অনেক সাইটে কন্টেন কিংবা আর্ট...
html ol ul tag ও li tag এর ব্যবহার... HTML এর মধ্যে দুই ধরনের লিস্ট তৈরি করা যায় প্রথমটি হচ্ছে অর্ডারড লিস্ট এবং দ্বিতীয়টি আনঅর্ডারড লিস্ট। আন অর্ডারড লিস্ট হচ্ছে ul ( Unordered list ) এবং...
HTML এ বাংলা লিখবো কিভাবে... HTML এ বাংলা লিখলেই বাংলা আসেনা অনেক ওয়েব ব্রাউজারে কারন আমরা ওয়েব পেজে যে বাংলা লিখি সেটি ইউনিকোড ভিত্তিক । বাংলা লিখবার জন্য আসলে html এ character s...
aside ট্যাগ ও HTML aside ট্যাগের ব্যবহার... aside ট্যাগ কোন ডকুমেন্ট এর সাথে রিলেটেড বিষয় গুলকে আলাদা রাখবার জন্য ব্যবহার হয়। এক কথায় কোন প্রবন্ধ বা আটিকেল এর সাথে সম্পর্ক যুক্ত বিষয় গুল একটু সা...
এইচটিএমএল ট্যাগ – html tag ও html attributes... আমাদের আজকের আলোচনার বিষয় এইচটিএমএল ট্যাগ ( html tag ) ও এট্রিবিউট নিয়ে।  এর আগের আর্টিকেল এ আমরা জেনেছিলাম কিভাবে এইচটিএমএল দিয়ে Hello World লিখা যায়...
html link বা a tag এর ব্যবহার... Link অর্থ যুক্ত করা। আর একটি ওয়েব পেজের সাথে আরও একটি পেজকে যুক্ত করাই হচ্ছে link এর মূল কাজ।  যেকোন ওয়েব পেজে link করার জন্য a tag, যাকে anchor ট্যাগ...

You may also like...

মন্তব্য করুন

আপনার ই-মেইল এ্যাড্রেস প্রকাশিত হবে না। * চিহ্নিত বিষয়গুলো আবশ্যক।