HTML এ div ট্যাগ ও div ট্যাগের ব্যবহার

HTML এ একটি নির্দিষ্ট অংশকে আলাদাভাবে স্টাইল কিংবা ব্লক আকারে তৈরি করবার জন্য সাধারণত div ট্যাগ ব্যবহার করা হয়ে থাকে।  আমরা যখন একটি ওয়েবসাইট ভিজিট করি, তখন সেই ওয়েবসাইটে বিভিন্ন রকমের  ব্লক দেখা যায়, সেইগুলো মূলত div ট্যাগ ব্যবহার করে করা হয়। যেমন ধরুন মেনু, হেডার, সাইডবার, কনটেন্ট ইত্যাদি। division থেকে div ট্যাগ এসেছে।

 HTML div ট্যাগের উদাহরন

div ট্যাগের উধাহরণ স্বরূপ নিচের অংশে একটি কোড ব্লক দেখে নেয়া যাক।

<div>
   some text or other tag will be here
</div>

উপরের উদাহরনে আমরা ডিভ ট্যাগ ওপেন ও ক্লোজ করেছি । আসলে ডিভ ট্যাগ এর ভিতরে আবার ডিভ ট্যাগ নেয়া যায় এবং ওয়েব লে-আউট করার জন্য অনেক ব্যবহার হয়ে থাকে । চলুন div ট্যাগের ব্যবহার নিচে দেখে নেয়া যাক ।

HTML div ট্যাগ এর ব্যবহার

ধরুন আমরা একটি ওয়েব পেজ লেআউট করতে চাচ্ছি নিচের মতো করে যেখানে header area থাকবে header tag এর ভিতরে, Footer area থাকবে footer tag এর ভিতরে । আর মেইন যে এরিয়াটি আছে সেটিকে আমরা div tag এর ভিতরে রাখবো ।  এবং মেইন যে কন্টেইনার টি থাকবে তার ভিতরে থাকবে article area এবং side bar area. নিচের ছবিটি দেখুন ।

 

Page Layout

Page Layout

 

উপরের অংশের হেডার ও ফুটার ছাড়া বাকি অংশ নিয়ে কোড করলে অনেকটা নিচের মতো হতে পারে কোড গুলো

<div class="container">
  <div class="main">
    <article>
      <h2>Post title will be here</h2>
      <p>
        some text will be here 
      </p>
      <p>
        some other text will be here...
      </p>
    </article> 
  </div>
  <div class="sidebar">
    <aside>
      <h3>Sidebar title</h3>
      <p>
        some site bar text will be here...
      </p>
    </aside>
  </div>
</div>

উপরের কোডগুলো মূলত HTML কোড। কোডের প্রথম অংশে div ট্যাগ ব্যবহার করা হয়েছে। div এর মধ্যে class এট্রিবিউট এবং class এর ভেলু আকারে container ব্যবহার করা হয়েছে। আমরা আসলে একটি কন্টেইনার এর ভিতরে আটিকেল ও সাইডবার এরিয়াটি নিতে চাই । তাই আবার ডিভ এর ভিতরে নতুন আর একটি div নিয়েছি যার class দিয়েছি main.

এবার main class যুক্ত div এর ভিতরে নিয়েছি article tag এবং এর ভিতরে একটি হেডিং ট্যাগ ও কিছু পেরাগ্রাফ রেখেছি p ট্যাগ এর ভিতরে ।

এবার main class যুক্ত div এর closing div ( </div> ) এর বাইরে কিন্তু container class যুক্ত ডিভের ভিতরে নিয়েছি আর একটি ডিভ ট্যাগ যার ক্লাস দিয়েছি sidebar.  এবার sidebar এর ভিতরে নিয়েছি aside tag. এবার এর ভিতরে নিয়েছি কিছু টেক্সট। পুরো code টি রান করলে দেখাবে নিচের মতো ।

 

div ট্যাগ এর ব্যবহার

div ট্যাগ এর ব্যবহার

 

যেহেতু আমরা এখানে কোন রকম CSS ব্যবহার করিনি, তাই ইমেজের মতো লেআউট হবেনা ।

নোট: div ট্যাগ বাই ডিফল্ট একটি করে লাইন ব্রেক করে আসে । এটি আসলে ব্লক লেভেল এলিমেন্ট ।

আশা করি div tag এর প্রাথমিক ব্যবহারের ধারনা পেয়ে গেছেন । সামনে আমরা প্রজেস্ট বেইজড এইচটিএমএল সিএসএস নিয়ে আলোচনা করবো । তখন বিষয় গুলো আরো ক্লিয়ার হবে ।

ভালো থাকবেন সবায়, আর উপরের অংশ বুুঝতে সমস্যা হলে নিচে কমেন্টে জানাতে ভুলবেন না ।

Related Post

html ol ul tag ও li tag এর ব্যবহার... HTML এর মধ্যে দুই ধরনের লিস্ট তৈরি করা যায় প্রথমটি হচ্ছে অর্ডারড লিস্ট এবং দ্বিতীয়টি আনঅর্ডারড লিস্ট। আন অর্ডারড লিস্ট হচ্ছে ul ( Unordered list ) এবং...
HTML – এইচটিএমএল কি এবং HTML শিখবো কিভাবে... HTML কি এবং HTML শিখবো কিভাবে? HTML একটি web based programing language যা ওয়েব সাইত তৈরি করতে ব্যবহার করা হয় এবং আজকাল মোবাইল এর অনেক এপ্লিকেশন বানাতে...
HTML abbr ট্যাগ ও abbr ট্যাগের ব্যবহার... HTML ট্যাগটি কোন সংক্ষিপ্ত ওয়ার্ডের ক্ষেত্রে ব্যবহার করা হয়ে থাকে। ধরুন আপনি BCC কোথাও ব্যবহার করবেন যার পুর্ণ রুপ হচ্ছে Bangladesh Compu...
এইচটিএমএল ট্যাগ – html tag ও html attributes... আমাদের আজকের আলোচনার বিষয় এইচটিএমএল ট্যাগ ( html tag ) ও এট্রিবিউট নিয়ে।  এর আগের আর্টিকেল এ আমরা জেনেছিলাম কিভাবে এইচটিএমএল দিয়ে Hello World লিখা যায়...
HTML address ট্যাগ এর ব্যবহার... কোন তথ্য বা নথির যোগাযোগের ক্ষেত্রে address ট্যাগ ব্যবহার করা হয়। আবার ওয়েব পেজে কোন ঠিকান লেখবার জন্যও address ট্যাগ ব্যবহার করা হয়ে থাকে। ধরুন, আপনি...
html link বা a tag এর ব্যবহার... Link অর্থ যুক্ত করা। আর একটি ওয়েব পেজের সাথে আরও একটি পেজকে যুক্ত করাই হচ্ছে link এর মূল কাজ।  যেকোন ওয়েব পেজে link করার জন্য a tag, যাকে anchor ট্যাগ...
HTML এ বাংলা লিখবো কিভাবে... HTML এ বাংলা লিখলেই বাংলা আসেনা অনেক ওয়েব ব্রাউজারে কারন আমরা ওয়েব পেজে যে বাংলা লিখি সেটি ইউনিকোড ভিত্তিক । বাংলা লিখবার জন্য আসলে html এ character s...
aside ট্যাগ ও HTML aside ট্যাগের ব্যবহার... aside ট্যাগ কোন ডকুমেন্ট এর সাথে রিলেটেড বিষয় গুলকে আলাদা রাখবার জন্য ব্যবহার হয়। এক কথায় কোন প্রবন্ধ বা আটিকেল এর সাথে সম্পর্ক যুক্ত বিষয় গুল একটু সা...
HTML article ট্যাগের ব্যবহার – article ট্যাগ... article ট্যাগ হচ্ছে বহুল ব্যবহৃিত ট্যাগ কোন সংজ্ঞা বা প্রবন্ধ লেখার ক্ষেত্রে ।  article এর বাংলা হচ্ছে প্রবন্ধ এবং এটি আসলেই সে কাজেই ব্যবহার হয় HTML ...
Html দিয়ে কিভাবে Table তৈরি করবেন... HTML Table সাধারণত একটি ওয়েবপেজে ব্যাবহার করা হয়। Table ব্যাবহার করে আমরা অনেক ডাটা কলাম সারিবব্ধ ভাবে সাজাতে পারি। এইচটিএমএল টেবিল তৈরি করার আগে আপনা...

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

*