এইচটিএমএল সিএসএস জাভাস্ক্রিপ্ট পিএইচপি এসকিউএল জেকুয়েরি বুটস্ট্রাপ সি প্রোগ্রামিং
ফোরাম
×

এইচটিএমএল টিউটোরিয়াল

এইচটিএমএল হোম পেজ এইচটিএমএল পরিচিতি এবং গঠন এইচটিএমএল কোড এটিটর এইচটিএমএলের মৌলিক ধারণা এইচটিএমএল এলিমেন্ট এইচটিএমএল emty এলিমেন্ট এইচটিএমএল এট্রিবিউট এইচটিএমএল class এট্রিবিউট এইচটিএমএল style এট্রিবিউট এইচটিএমএল কমেন্ট এইচটিএমএল হেডিং এইচটিএমএল প্যারাগ্রাফ এইচটিএমএল টেক্সট ফরম্যাট এইচটিএমএল টেক্সট কোটেশন এইচটিএমএল কম্পিউটারকোড এইচটিএমএল টেবিল এইচটিএমএল লিস্ট এইচটিএমএল কালার এইচটিএমএল সিএসএস এইচটিএমএল লিংক এইচটিএমএল ইমেজ এইচটিএমএল ব্লক-ইনলাইন এলিমেন্ট এইচটিএমএল হেড এইচটিএমএল লেআউট এইচটিএমএল আইফ্রেম এইচটিএমএল জাভাস্ক্রিপ্ট এইচটিএমএল রেস্পন্সিভ এইচটিএমএল এনটিটি এইচটিএমএল অক্ষরসেট এইচটিএমএল সিম্বল এইচটিএমএল URL এনকোড এইচটিএমএল-XHTML px - em কনভার্শন

এইচটিএমএল ফর্ম

এইচটিএমএল ফর্ম এইচটিএমএল ফর্ম এলিমেন্ট এইচটিএমএল ইনপুট টাইপ এইচটিএমএল(৫) ইনপুট টাইপ এইচটিএমএল ইনপুট এট্রিবিউট

এইচটিএমএল৫

এইচটিএমএল৫ পরিচিতি ব্রাউজার সাপোর্ট এইচটিএমএল৫ এলিমেন্ট এইচটিএমএল৫ সিম্যান্টিক এলিমেন্ট এইচটিএমএল৫ মাইগ্রেশন এইচটিএমএল৫ স্টাইল গাইড

এইচটিএমএল মিডিয়া

মিডিয়া-Media ভিডিও-Video অডিও-Audio প্লাগ-ইন-PlugIn ইউটিউব-Youtube

এইচটিএমএল এপিআই

জিওলোকেশন-Geolocation ড্রাগ/ড্রপ-Drag/Drop লোকাল স্টোরেজ-LocalStorage অ্যাপ ক্যাশ-AppCache ওয়েব ওয়ার্কার-WebWorker এসএসই-SSE

এইচটিএমএল রেফারেন্স

রেফারেন্স- reference

 

এইচটিএমএল সিএসএস


এক নজরে এইচটিএমএল স্টাইল ট্যাগসমূহ

ট্যাগ বিবরণ
<style> এইচটিএমএল ডকুমেন্টে ইন্টার্নাল স্টাইল করার জন্য সিএসএস কোডসমূহ <style>ট্যাগের মধ্যে লেখা হয়।
<link> এইচটিএমএল ডকুমেন্টে এক্সটার্নাল সিএসএস ফাইল সংযুক্ত করার জন্য <link> ট্যাগ ব্যবহার করা হয়।

এইচটিএমএলকে স্টাইল করা

এইচটিএমএল এলিমেন্টকে ৩ ভাবে স্টাইল করা হয়ঃ

  • ইনলাইন - style এট্রিবিউট ব্যবহার করে ইনলাইন স্টাইল করা হয়।
  • ইন্টার্নাল - এইচটিএমএল <head> এলিমেন্টে <style> এলিমেন্ট ব্যবহার করে ইন্টার্নাল স্টাইল করা হয়।
  • এক্সটার্নাল - এক্সটার্নাল সিএসএস ফাইল ব্যবহার করে স্টাইল করা হয়।

এইচটিএমএল এলিমেন্টে সিএসএস ব্যবহার করার সবচেয়ে সহজ এবং উত্তম পদ্ধতি হলো এক্সটার্নাল(external) সিএসএস ফাইল ব্যবহার করা।

কিন্তু আমাদের এই টিউটোরিয়ালের মধ্যে বেশীরভাগ ক্ষেত্রেই আমরা ইনলাইন এবং ইন্টার্নাল স্টাইল ব্যবহার করেছি। কারণ এগুলো আপনাকে আমাদের উদাহরণগুলো অনুশীলন করেতে এবং বুঝতে সহায়তা করবে।

Note সিএসএস সম্পর্কে আরও জানতে আমাদের সিএসএস টিউটোরিয়াল ভিজিট করুন।

ইনলাইন স্টাইল

একটি নির্দিষ্ট এইচটিএমএল এলিমেন্টকে স্টাইল করার জন্য ইনলাইন স্টাইল ব্যবহার করা হয়।

কোন একটি এলিমেন্টকে ইনলাইন স্টাইল করার জন্য style এট্রিবিউট ব্যবহার করা হয়।

নিচের উদাহরণটি রান করলে <p> এলিমেন্টের টেক্সটের কালার নীল দেখতে পাবেনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>এইচটিএমএল ইনলাইন স্টাইল</title>
</head>
<body>
  <p style="color:blue;">স্যাট একাডেমী</p>
</body>
</html>

ফলাফল



ইন্টার্নাল স্টাইল

ইন্টার্নাল স্টাইল করার জন্য ডকুমেন্টের <head> সেকশনের মধ্যে <style> ট্যাগ ব্যবহার করা হয় এবং স্টাইল কোডগুলো এই <style> ট্যাগের মধ্যে লিখতে হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>এইচটিএমএল ইন্টার্নাল স্টাইল</title>
  <style>
    body{background-color: teal;}
    p{color: white;}
    span{color: powderblue;}
  </style>
</head>
<body>
  <p>এটি একটি <span>প্যারাগ্রাফ</span></p>
</body>
</html>

ফলাফল




এক্সটার্নাল স্টাইল

এক সাথে অনেকগুলো পেজ অর্থাৎ সম্পূর্ণ ওয়েবসাইটকে স্টাইল করার জন্য এক্সটার্নাল সিএসএস ব্যবহার করা হয়।

একটি এক্সটারনাল সিএসএস ফাইল তৈরি করে তার মধ্যে প্রয়োজনীয় স্টাইল কোড অন্তর্ভুক্ত করা হয়। তারপর ফাইলটিকে ডকুমেন্টের <head> এলিমেন্টের মধ্যে <link> ট্যাগের মাধ্যমে লিংক করে দেওয়া হয়। এতে করে খুব সহজেই একই স্টাইল শীট ওয়েবসাইটের সবকটি পেজে অন্তর্ভুক্ত করে সমগ্র ওয়েবসাইটের স্টাইল করা যায়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>এইচটিএমএল এক্সট্রার্নাল স্টাইল</title>
  <link rel="stylesheet" href="../style.css">
</head>
<body>
  <p>এটি একটি <span>প্যারাগ্রাফ</span></p>
</body>
</html>

ফলাফল



একটি এক্সটার্নাল স্টাইল শীট(CSS) যেকোনো টেক্সট এডিটরে লেখা যেতে পারে। কোড লেখা শেষে .css এক্সটেনশন দিয়ে ফাইলটি সংরক্ষণ(save) করুন।

নিম্নে "style.css" ফাইলের কোড তুলে ধরা হলোঃ

body{
  background-color: teal;
}
p{
  color: white;
}
span{
  color: powderblue;
}

সিএসএস ফন্ট স্টাইল

এইচটিএমএল এলিমেন্টে কি ধরণের ফন্ট ব্যবহার করা হবে তা সিএসএস font-family প্রোপার্টির মাধ্যমে নির্ধারণ করা হয়।

এইচটিএমএল এলিমেন্টের ফন্ট সাইজ নির্ধারণ করার জন্য সিএসএস font-size প্রোপার্টি ব্যবহার করা হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>এইচটিএমএল ফন্ট স্টাইল</title>
  <style>
    p {
      color: blue;
      font-family: verdana;
      font-size: 130%;
    }
    span {
      color: red;
      font-family: courier;
      font-size: 200%;
    }
  </style>
</head>
<body>
  <p>This is a <span>paragraph</span>.</p>
</body>
</html>

ফলাফল


এইচটিএমএল id এবং class সিলেক্টর

একটি মাত্র এলিমেন্টকে স্টাইল করার জন্য সিএসএস id সিলেক্টর ব্যবহার করা হয়। এইচটিএমএল এলিমেন্টের আইডি সর্বদাই ইউনিক হতে হয়।

পক্ষান্তরে একাধিক বা সমজাতীয় এলিমেন্টকে স্টাইল করার জন্য সিএসএস class সিলেক্টর ব্যবহার করা হয়।


id এট্রিবিউটকে সিলেক্ট করে স্টাইল নির্ধারণ

কোনো নির্দিষ্ট এলিমেন্টকে বিশেষভাবে স্টাইল করার জন্য এলিমিন্টের মধ্যে id এট্রিবিউট যুক্ত করা হয়।

<p id="myIntro">আমি শাইকাতুল জান্নাত(স্মরণীকা)।</p>

তারপরে ঐ id এট্রিবিউট যুক্ত এলিমেন্টকে স্টাইল করার জন্য id কে কল/সিলেক্ট করে স্টাইল নির্ধারণ করা হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>এইচটিএমএল id সিলেক্টর</title>
  <style>
  #myIntro {
    color: blue;
  }
  </style>
</head>
<body>
  <p>এটি একটি প্যারাগ্রাফ।</p>
  <p id="myIntro">আমি শাইকাতুল জান্নাত(স্মরণীকা)।</p>
</body>
</html>

ফলাফল




class এট্রিবিউটকে সিলেক্ট করে স্টাইল নির্ধারণ

অনেকগুলো এলিমেন্টকে একত্রে একই ধরনের স্টাইল করার জন্য class এট্রিবিউট যুক্ত করা হয়।

<p class="error">এটি কিছুটা ভিন্ন!!</p>

তারপরে ঐ class এট্রিবিউট যুক্ত এলিমেন্টগুলোকে স্টাইল করার জন্য class কে কল/সিলেক্ট করে স্টাইল নির্ধারণ করা হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>এইচটিএমএল class এট্রিবিউট</title>
  <style>
  .error {
    color: red;
  }
  </style>
</head>
<body>
  <p>এটি একটি অনুচ্ছেদ।</p>
  <p class="error">এটি ভিন্ন একটি অনুচ্ছেদ।</p>
  <p>এটি একটি অনুচ্ছেদ।</p>
  <p class="error">এটি ভিন্ন একটি অনুচ্ছেদ।</p>
</body>
</html>

ফলাফল



অধ্যায়ের সারাংশ

  1. ইনলাইন স্টাইল করার জন্য এইচটিএমএল style এট্রিবিউট ব্যবহার করা হয়।
  2. ইন্টার্নাল স্টাইল করার জন্য <style> ট্যাগ ব্যবহার করা হয়।
  3. এক্সটারনাল সিএসএস ফাইলকে এইচটিএমএলে অন্তর্ভুক্ত করার জন্য <link> ট্যাগ ব্যবহার করা হয়।
  4. <style> এবং <link> ট্যাগ <head> সেকশনের মধ্যে লিখতে হয়।
  5. টেক্সটের কালার পরিবর্তনের জন্য সিএসএস color প্রোপার্টি ব্যবহার করা হয়।
  6. টেক্সটের ফন্ট পরিবর্তনের জন্য সিএসএস font-family প্রোপার্টি ব্যবহার করা হয়।
  7. টেক্সটের আকার পরিবর্তনের জন্য সিএসএস font-size প্রোপার্টি ব্যবহার করা হয়।