HTML বাংলা টিউটোরিয়াল পর্ব-০৪
বডিতে ব্যবহার করা বিভিন্ন ট্যাগসমুহ

আসসালামু-আলাইকুম ।
আশা করি আপনারা সবাই ভাল আছেন। আজকে আমি আপনাদের মাঝে হাজির হলাম HTML বাংলা টিউটোরিয়াল পর্ব-০৪ নিয়ে । এই সাইটের ফেসবুক পেইজে লাইক দিতে ভুলবেন না।

বাংলা টিউটোরিয়াল ফেসবুক পেজ

যারা আগের পর্ব দেখেন নাই তারা এখান থেকে দেখে নিতে পারেন।
HTML বাংলা টিউটোরিয়াল পর্ব-০১
HTML বাংলা টিউটোরিয়াল পর্ব-০২
HTML বাংলা টিউটোরিয়াল পর্ব-০৩
পর্ব-০৪ এ যা যা থাকবেঃ
হেডিং (Heading) ট্যাগের ব্যবহার
ডিভ(DIV) ট্যাগের ব্যবহার
বোল্ড (Bold) ট্যাগের ব্যবহার
স্ট্রং (Strong) ট্যাগের ব্যবহার
বিগ (Big) ট্যাগের ব্যবহার
স্মল (Small) ট্যাগের ব্যবহার
ইটালিক( Italic) ট্যাগের ব্যবহার

হেডিং (Heading) ট্যাগের ব্যবহার :

হেডিং নাম শুনেই হয়তো কিছুটা বুঝতে পারছেন যে এটি একটি শিরোনাম। হ্যা, আপনি ঠিকই ধরেছেন। কোন লেখার শিরনাম দিতেই হেডিং ব্যবহার করা হয়।
এইচটিএমএল-এ মোট ছয়টি হেডিং আছে।<h1>….</h1>, <h2>…</h2>, <h3>…</h3>, <h4>…</h4>, <h5>….</h5> ও <h6>...</h6> । এখানে <h1>….</h1> এর লেখার সাইজ সবথেকে বড় হবে, তারপর <h2>…</h2> এর সাইজ, তারপর <h3>…</h3> এর সাইজ এভাবে চলতে চলতে <h6>...</h6> এর লেখার সাইজ সবথেকে ছোট হবে। আগেই আমরা এর ব্যবহার কিছুটা দেখেছি। এখন সবগুলো হেডিং দিয়ে একটি উদাহরণ দিচ্ছি।
উদাহরণঃ
<html>
<head>
<title>Heading</title>
</head>
<body>
    <h1>Bangladesh is my motherland.</h1>
          <h2>Bangladesh is my motherland.</h2>
          <h3>Bangladesh is my motherland.</h3>
          <h4>Bangladesh is my motherland.</h4>
          <h5>Bangladesh is my motherland.</h5>
          <h6>Bangladesh is my motherland.</h6>
</body>
</html>
কোডটুকু লিখে heading.html নামে করে রান করান।
আউটপুটঃ
html

হেডিং-এ Align Tag এর ব্যবহারঃ

এলাইজন(align) ট্যাগ ব্যবহার করা হয় হেডিং এর অবস্থান নির্দিষ্ট করে দেওয়ার জন্য। অর্থাৎ হেডিং এর লেখা ডানে থাকবে না বামে থাকবে না পেইজের মাঝখানে থাকবে এটাই নির্দেশ করে এলাইজন ট্যাগ ।
উদাহরণঃ
<html>
<head>
<title>Align</title>
</head>
<body>
    <h1 align="left">Bangladesh is my motherland.</h1>
          <h1 align="center">Bangladesh is my motherland.</h1>
          <h1 align="right">Bangladesh is my motherland.</h1>
</body>
</html>
কোডটুকু লিখে align.html নামে Save করে রান করান।
লেখা দেখেই বুঝতে পারছেন যে left অর্থ বামে অর্থাৎ লেখা বামে দেখাবে। center অর্থ মধ্যে অর্থাৎ লেখা মাঝখানে দেখাবে। right অর্থ ডানে অর্থাৎ লেখা ডানে দেখাবে।
আউটপুটঃ
html

ডিভ(DIV) ট্যাগের ব্যবহার

ডিভ ওয়েবপেইজের মধ্যে কোন বক্স বানানোর কাজ করে থাকে ।প্রত্যেকটি পেইজকে আমরা তিনটি ভাগে ভাগ করতে পারি। প্রথম অংশ হেডার যেখানে সাইটের লগো রাখা হয়। দ্বিতীয় ভাগকে কনটেইনার বলতে পারি যেখানে পেইজের সব কনটেন্ট থাকবে এবং ৩য় ভাগকে ফুটার বলতে পারি যেখানে ইমেইল, এড্রেস ইত্যাদি থাকবে।
এই তিনটি ভাগের জন্য আমরা তিনটি ডিভ নিবো। একটি পেইজকে আমরা যত অংশে ভাগ করব ঠিক ততটি ডিভ ব্যবহার করতে হবে। এই ট্যাগটি দিয়ে শুরু এবং দিয়ে শেষ করতে হয়।
উদাহরণঃ
<html>
<head>
</head>
<body>
    <div align="center">
                I am Bangladeshi.
                </div>

                <div>
                I love my country.
                </div>
</body>
</html>
কোডটুকু italic.html নামে লিখে সেভ করে ব্রাউজারে রান করুন । ডিভ সম্পর্কের আরো বিস্তারিত আলোচনা করব সি এস এস এর টিউটোরিয়ালে।
আউটপুটঃ
html

বোল্ড (Bold) ট্যাগের ব্যবহার :

কোন লেখাকে বোল্ড করে বা মোটা করে দেখানোর জন্যই এই ট্যাগটি ব্যবহার করা হয়। এই ট্যাগটি <b> দিয়ে শুরু এবং </b> দিয়ে শেষ করতে হয়।
উদাহরণঃ
<html>
<head>
<title>Bold</title>
</head>
<body>
We are <b>Bangladeshi</b>
</body>
</html>
কোডটুকু bold.html নামে লিখে সেভ করে ব্রাউজারে রান করুন ।
আউটপুটঃ
html

স্ট্রং (Strong) ট্যাগের ব্যবহার

কোন লেখাকে বোল্ড করে বা মোটা করে দেখানোর জন্যই এই ট্যাগটি ব্যবহার করা হয়। এই ট্যাগটি <strong>দিয়ে শুরু এবং </strong> দিয়ে শেষ করতে হয়।
উদাহরণঃ
<html>
<head>
<title>Strong</title>
</head>
<body>
We are <strong>Bangladeshi</strong>

</body>
</html>
কোডটুকু strong.html নামে লিখে সেভ করে ব্রাউজারে রান করুন ।
আউটপুটঃ

html

বিগ (Big) ট্যাগের ব্যবহার :

কোন লেখাকে স্বাভাবিকের চেয়ে বড় দেখানোর জন্য বিগ ট্যাগটি ব্যবহার করা হয়। এই ট্যাগটি <big> দিয়ে শুরু এবং </big> দিয়ে শেষ করতে হয়।
উদাহরণঃ
<html>
<head>
<title>Big</title>
</head>
<body>
We are <big>Bangladeshi</big>
</body>
</html>
কোডটুকু big.html নামে লিখে সেভ করে ব্রাউজারে রান করুন ।
আউটপুটঃ
html

স্মল (Small) ট্যাগের ব্যবহার :

কোন লেখাকে স্বাভাবিকের চেয়ে ছোট করে দেখানোর জন্য স্মল ট্যাগটি ব্যবহার করা হয়। এই ট্যাগটি <small> দিয়ে শুরু এবং </small> দিয়ে শেষ করতে হয়।
উদাহরণঃ
<html>
<head>
<title>Small</title>
</head>
<body>
<small>We are Bangladeshi</small>
</body>
</html>
কোডটুকু small.html নামে লিখে সেভ করে ব্রাউজারে রান করুন ।
আউটপুটঃ
html

ইটালিক( Italic) ট্যাগের ব্যবহার

কন লেখাকে ইটালিক আকারে লেখার জন্য এটি ব্যবহার করা হয়। এই ট্যাগটি <i> দিয়ে শুরু এবং </i> দিয়ে শেষ করতে হয় বা ট্যাগটি <em> দিয়ে শুরু এবং </em> দিয়ে শেষ করতে হয় ।
উদাহরণঃ
<html>
<head>
<title>Italic</title>
</head>
<body>
<i>We are Bangladeshi</i>
</body>
</html>
কোডটুকু italic.html নামে লিখে সেভ করে ব্রাউজারে রান করুন ।
আউটপুটঃ
html

আপনি যতটুকু শিখবেন তা সবার মাঝে ছড়িয়ে দেওয়ার চেষ্টা করুন। এই পর্বে কোন বিষয়ে বুঝতে সমস্যা হলে কমেন্ট করুন। আমার পক্ষে যতটুকু সম্ভব সমাধান করার চেষ্টা করব। পেইজটি শেয়ার করতে ভুলবেন না। নিজে জানুন এবং অন্যকে জানাতে সাহায্য করুন। নিচে শেয়ার করার জন্য বিভিন্ন অপশন আছে যেমন ফেসবুক, টুইটার, গুগল প্লাস ইত্যাদি।
আজ আর নয়। পরের পর্বের আমন্ত্রণ জানিয়ে আজকের মত বিদায় বন্দুরা।
ধন্যবাদ সবাইকে।
HTML বাংলা টিউটোরিয়াল পর্ব-০৪
HTML বাংলা টিউটোরিয়াল পর্ব-০৫
HTML বাংলা টিউটোরিয়াল পর্ব-০৬
HTML বাংলা টিউটোরিয়াল পর্ব-০৭
HTML বাংলা টিউটোরিয়াল পর্ব-০৮
HTML বাংলা টিউটোরিয়াল পর্ব-০৯
HTML বাংলা টিউটোরিয়াল পর্ব-১০
HTML বাংলা টিউটোরিয়াল পর্ব-১১
HTML বাংলা টিউটোরিয়াল পর্ব-১২
HTML বাংলা টিউটোরিয়াল পর্ব-১৩

Bangla Tutorial

Pages

Monday, April 4, 2016