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

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

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

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

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

এইচটিএমএল৫

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

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

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

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

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

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

রেফারেন্স- reference

 

এইচটিএমএল এলিমেন্ট


একটি এইচটিএমএল এলিমেন্ট সচরাচর একটি <ওপেনিং> ট্যাগ এবং একটি </ক্লোজিং> ট্যাগ নিয়ে গঠিত হয় এবং ট্যাগদ্বয়ের মাঝে কন্টেন্ট থাকে।
ওপেনিং ট্যাগ থেকে ক্লোজিং ট্যাগ পর্যন্ত সবকিছু নিয়েই এইচটিএমএল এলিমেন্ট গঠিত হয়ঃ

এইচটিএমএল এলিমেন্টের গঠন

CSS selector

ওপেনিং ট্যাগ 	|     কনটেন্ট    |  ক্লোজিং ট্যাগ
---------   | ------------ | ---------
  <h1>         ডকুমেন্ট হেডিং      </h1>
বিঃদ্রঃ কিছু কিছু এইচটিএমএল এলিমেন্ট যেমন- <br>, <hr> ইত্যাদির গঠন উপরোক্ত গঠন থেকে ভিন্ন হয়। এগুলোর ক্লোজিং ট্যাগ না থাকায় এগুলোকে empty ট্যাগ বলা হয়।

নেস্টেড এইচটিএমএল এলিমেন্ট

এইচটিএমএল এলিমেন্ট নেস্টেড হতে পারে। অর্থাৎ এলিমেন্টের মধ্যেও এলিমেন্ট থাকতে পারে।

সকল এইচটিএমএল ডকুমেন্টই নেস্টেড এইচটিএমএল এলিমেন্ট দিয়ে গঠিত হয়।

নিম্নের এইচটিএমএল ডকুমেন্টটি ৬টি এইচটিএমএল এলিমেন্ট নিয়ে গঠিত হয়েছেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>এইচটিএমএল এলিমেন্ট</title>
</head>
<body>
  <h3>ডকুমেন্ট হেডিং</h3>
  <p>এটি একটি প্যারাগ্রাফ।</p>
</body>
</html>

ফলাফল

উদাহরণের বর্ণনা

  • উপরের এইচটিএমএল ডকুমেন্টের প্রথম লাইন <!DOCTYPE html> দ্বারা এইচটিএমএল এর ভার্সন ৫ কে নির্দেশ করা হয়েছে।
  • এটি ওপেনিং <html> ট্যাগ দিয়ে শুরু হয়েছে এবং ক্লোজিং </html> ট্যাগ দিয়ে শেষ হয়েছে।
  • <head> এলিমেন্টটি ডকুমেন্ট সম্পর্কে অতিরিক্ত তথ্য ধারন করে। যেমনঃ ডকুমেন্টের টাইটেল, ডকুমেন্টের বর্ণনা ইত্যাদি। এটি <head> ট্যাগ দিয়ে শুরু হয়েছে এবং </head> ট্যাগ দিয়ে শেষ হয়েছে।
  • <title> এলিমেন্টটি ডকুমেন্টের টাইটেল বা নাম ধারন করে। এটি <title> ট্যাগ দিয়ে শুরু হয়েছে এবং </title> ট্যাগ দিয়ে শেষ হয়েছে।
  • এখানে <body> এলিমেন্টটি হলো কন্টেন্ট এলিমেন্ট। অর্থাৎ <body> হলো ডকুমেন্টের মূল অংশ।
    <body>
      <h3>ডকুমেন্ট হেডিং</h3>
      <p>এটি একটি প্যারাগ্রাফ</p>
    </body>
    

    body অংশের বর্ণনা:

    এটি <body> ট্যাগ দিয়ে শুরু হয়েছে এবং </body> ট্যাগ দিয়ে শেষ হয়েছে।

    <h3> এবং <p> এলিমেন্ট দুটি হলো কন্টেন্ট এলিমেন্ট।

    <h3> এলিমেন্ট দিয়ে একটি হেডিংকে বুঝায়।

    <h3>ডকুমেন্ট হেডিং</h3>
    

    এটি ওপেনিং ট্যাগ <h3> দিয়ে শুরু হয়েছে এবং ক্লোজিং ট্যাগ </h3> শেষ হয়েছে এবং এই এলিমেন্টের কন্টেন্ট হলোঃ ডকুমেন্ট হেডিং।

    <p> এলিমেন্ট দিয়ে একটি প্যারাগ্রাফকে বুঝানো হয়।

    <p>এটি একটি প্যারাগ্রাফ</p>

    এটি ওপেনিং ট্যাগ <p> দিয়ে শুরু হয়েছে এবং ক্লোজিং ট্যাগ </p> শেষ হয়েছে এবং এই এলিমেন্টের কন্টেন্ট হলোঃ এটি একটি প্যারাগ্রাফ।


সর্বদা ক্লোজিং ট্যাগ ব্যবহার করুন!

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
  <p>এটি একটি প্যারাগ্রাফ
  <p>এটি আরেকটি প্যারাগ্রাফ
</body>
</html>

ফলাফল


উপরের উদাহরণটি সকল ব্রাউজারেই কাজ করে, কারণ এইচটিএমএল ৫ এ ক্লোজিং ট্যাগকে ঐচ্ছিক হিসেবে বিবেচনা করা হয়।

বিঃদ্রঃ কখনোই এটির উপর নির্ভর করা উচিৎ হবে না। কেননা, ক্লোজিং ট্যাগ দিতে ভুলে গেলে এটি অপ্রত্যাশিত/ভুল ফলাফল দেখাতে পারে।

সর্বদা ছোটহাতের অক্ষর ব্যবহার করুন!

এইচটিএমএল ট্যাগগুলো কেস সেন্সিটিভ নয়। যেমন- <P> এবং <p> একই রকম অর্থ বহন করে।

এইচটিএমএল(৫) এ ছোটহাতের অক্ষর ব্যবহার করা বাধ্যতামূলক নয়। কিন্তু W3C ছোটহাতের অক্ষর ব্যবহারের পরামর্শ দেয় এবং XHTML-এর মত স্ট্রিক্ট ডকুমেন্টের জন্য ছোটহাতের অক্ষর ব্যবহার করতে হয়।