আসসালামু আলাইকুম। কেমন আছেন প্রিয় টেকটিউনস এর বন্ধুরা। আলহামদুলিল্লাহ আমিও ভালো আছি। ওবে ডিজাইন এর বাংলা সিরিজ টিউটোরিয়ালের আজকের ১৪ তম পর্বে আমি আপনাদেরকে স্বাগত জানাচ্চি ইন্জিনিয়ার মোঃ মারুফ সিদ্দিকী। আজকের এই ক্লাসে আমরা আলোচানা করবো How to use HTML5 iframe tag, iframe tag in bangla, how to style iframe using css, what is html image path. এই বিষয়গুলো নিয়ে। HTML5 এ আমরা iframe মূলত ব্যাবহার করে থাকি একটি ওয়েবসাইটের ভিতরে আরেকটি ওয়েবসাইটকে দেখানোর জন্য। নিচের কোডটি খেয়াল করুন।
<h1>This is a dummy website</h1>
<div class=”left_bar”>
</div>
আমরা এখানে একটি heading ট্যাগ ব্যাবহার করেছি, heading tag এর মাধ্যমে আমি এখানে একটি হেডিং দিয়েছি। এবারে আমি একটি <div> নিয়েছি, এবং তার জন্য একটি class define করে দিয়েছি। এবার আমি CSS এর মাধ্যমে এই <div> ট্যাগটিকে ডিজাইন করবো। CSS এখন যদি আপনি না বুঝেন তাহলে কোন সমস্যা নাই। আমি HTML এর পূর্ণাঙ্গ সিরিজ শেষ করার পরে CSS এরও ধারাবাহিক টিউটোরিয়ল এর আর্টিকেল আপনাদের জন্য দিব। এখন শুধু নিচের কোডগুলো যেভাবে আছে সেভাবে দিন।
.left_bar{
float: left;
height: 300px;
width: 45%;
background-color: red;
margin-right: 10%;
}
এবারে আমি আরওে একটি <div> ট্যাগ নিয়েছি।
<h1>This is a dummy website</h1>
<div class=”left_bar”>
</div>
<div class=”right_bar”>
</div>
দ্বিতীয় <div> এও আমি একটি class ব্যাবহার করেছি। এবারে আগের class এর মতো এটিকেও আমি ডিজাইন করবো।
.right_bar{
float: left;
height: 300px;
width: 45%;
background-color: red;
}
এবারে আউটপুটটি দেখুন নিচের স্ক্রিন শর্টে।
এবার আমি <iframe> এর মাধ্যমে solutionpuzzle.xyz এই সাইটটিকে উনপুট দিবো। যার জন কোড হলো।
<h1>This is a dummy website</h1>
<div class=”left_bar”>
<iframe src=”http://solutionpuzzle.xyz”></iframe>
</div>
<div class=”right_bar”>
</div>
<iframe> এর সর্বাধিক ব্যাবহার আমরা দেখে থাকি ম্যাপ ব্যাবহার এর ক্ষেত্রে। একই নিয়মে আপনারা <iframe> এর মাঝখানে google map এর লিংক দিবেন।
আমি এই আর্টিকেলটির বিস্তারিত নিচের ভিডিওটিতে practically দেখিয়েছি। যারা লেখাটি পরে পরির্পর্ণভাবে বুঝতে পারেননি, তারা নিচের ভিডিওটি দেখে নিবেন। তার পরও কোন প্রশ্ন থাকলে আমাকে কমেন্ট করে জানাবেন।
 এইসটিএমএল৫ পর্ব–১৪){kind=link}