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

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

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

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

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

এইচটিএমএল৫

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

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

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

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

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

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

রেফারেন্স- reference

 

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


HTML

এইচটিএমএল

এইচটিএমএল -HTML এর পূর্নরূপঃ হাইপার টেক্সট মার্কআপ ল্যাংগুয়েজ(Hypertext Markup Language)।

বর্তমানে একজন অতি সাধারণ মানুষেরও একটি নিজস্ব ওয়েব সাইট থাকে।

এইচটিএমএল এর মাধ্যমে আপনি আপনার এই নিজস্ব ওয়েবসাইট ডিজাইন তথা তৈরি করতে পারবেন।

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

এইচটিএমএল শেখা খুবই সহজ এবং আশা করি আপনি আমাদের এই টিউটোরিয়ালটি উপভোগ করবেন।


এইচটিএমএল টিউটোরিয়ালটির প্রতিটি পরিচ্ছেদে আছে অসংখ্য উদাহরণ সেকশন। আপনি উদাহরণ সেকশনে মাউস নিয়ে গেলে উপরের কোণায় কোড copy করার একটি অপশন দেখতে পাবেন। copy অপশনে মাউস ক্লিক করলে ক্লিপবোর্ডে কোড কপি হবে।

আপনি আপনার এডিটর ওপেন করে copy করা কোড paste করতে পারবেন। এছাড়া উদাহরণ সেকশনের নিচে উদাহরণের ফলাফলও দেখানো হয়েছে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>এইচটিএমএল উদাহরণ</title>
</head>
<body>

  <h1>এটি একটি হেডিং</h1>
  <p>এটি একটি প্যারাগ্রাফ।</p>

</body>
</html>

ফলাফল




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

ভার্সন সন
এইচটিএমএল ১৯৯১
এইচটিএমএল(২.০) ১৯৯৫
এইচটিএমএল(৩.২) ১৯৯৭
এইচটিএমএল(৪.০১) ১৯৯৯
এক্সএইচটিএমএল ২০০০
এইচটিএমএল(৫) ২০১৪

এইচটিএমএল কি?

ওয়েব ডকুমেন্টকে বর্ণনা করার জন্য এইচটিএমএল হলো একটি মার্কআপ ল্যাঙ্গুয়েজ।

  1. HTML এর পূর্নরূপঃ Hyper Text Markup Language।
  2. মার্কআপ ল্যাঙ্গুয়েজ বলতে একগুচ্ছ মার্কআপ ট্যাগকে বুঝায়।
  3. এইচটিএমএল ট্যাগ দিয়ে এইচটিএমএল ডকুমেন্ট তৈরি করা হয়।

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

নিচে একটি এইচটিএমএল পেজের গঠন দেখানো হলোঃ

<html>
<head>
<title>পেজ টাইটেল</title>
</head>
<body>
<h3>ডকুমেন্ট হেডিং</h3>
<p>এইচটিএমএল প্যারাগ্রাফ।</p>
<img src="URL" alt="Some_text" style="width:100px; height:1000px;">
</body>
</html>

শুধুমাত্র <body> সেকশনের কন্টেন্ট ব্রাউজারে প্রদর্শিত হয়।


একেবারেই সাধারণ একটি এইচটিএমএল ডকুমেন্ট

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>পেজ টাইটেল</title>
</head>
<body>

  <h3>স্যাট একাডেমী</h3>
  <img src="../images/satt.png" alt="SATT Academy" height="142" width="142">

</body>
</html>

ফলাফল

উপরের উদাহরণের বিস্তারিত বর্ণনাঃ

  1. ডকুমেন্টের টাইপ সেট করতে <!DOCTYPE html> ডিক্লেয়ার করা হয়। এটি এইচটিএমএল এর সর্বশেষ ভার্সন HTML5 কে নির্দেশ করে।
  2. <html> এবং </html> ট্যাগের মাঝের কন্টেন্টগুলো এইচটিএমএল ডকুমেন্টকে বর্ণনা করে।
  3. <head> এবং </head> ট্যাগের মাঝের কন্টেন্টগুলো এইচটিএমএল ডকুমেন্টের জন্য অতিরিক্ত তথ্য সরবরাহ করে।
  4. <title> এবং </title> ট্যাগের মাঝের টেক্সট ডকুমেন্টের টাইটেল/নাম সেট করে।
  5. <body> এবং </body> ট্যাগের মাঝের কন্টেন্টগুলো ওয়েব পেজে প্রদর্শিত হয়।
  6. <h3> এবং </h3> ট্যাগ ডকুমেন্টের একটি হেডিং/শিরোনাম তৈরি করে। হেডিং ট্যাগ কন্টেন্ট এর গুরুত্ব আরোপ করে।
  7. <img> ট্যাগ এর মাধ্যমে ব্রাউজারে বিভিন্ন টাইপের ইমেজ/চিত্র প্রদর্শিত হয়।

এইচটিএমএল ট্যাগ


<!DOCTYPE> ডিক্লেয়ারেশন

  1. <!DOCTYPE> ডিক্লেয়ারেশন ডকুমেন্টের টাইপ সেট করে এবং একটি ওয়েব পেজকে সঠিকভাবে ব্রাউজারে দেখাতে সাহায্য করে।
  2. যেকোনো ওয়েব ডকুমেন্টের এটাই প্রথম ট্যাগ অর্থাৎ সকল এইচটিএমএল ট্যাগের পূর্বে এই ট্যাগটি শুধুমাত্র একবারই লিখতে হয়।
  3. বিভিন্ন ধরনের ডকুমেন্ট টাইপ ও ভার্সন রয়েছে। তাই ওয়েব পেজকে সঠিকভাবে দেখানোর জন্য ব্রাউজারকে টাইপ ও ভার্সন দুটিই জানাতে হয়।
  4. DOCTYPE ডিক্লেয়ারেশন কেস-সেন্সিটিভ নয়। এতে ছোট এবং বড় উভয় ধরনের অক্ষরই গ্রহনযোগ্য।
<!DOCTYPE html>
<!doctype HTML>

এইচটিএমএলের বিভিন্ন ভার্সনে <!DOCTYPE> ডিক্লেয়ারেশনঃ

এইচটিএমএল(৫)

<!DOCTYPE html>

এইচটিএমএল(৪.০১)

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

এক্সএইচটিএমএল(১.০)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

  1. এইচটিএমএলের সকল ভার্সন সম্পর্কে জেনেছি
  2. এইচটিএমএল পেজের গঠনপ্রণালী সম্পর্কে জেনেছি
  3. এইচটিএমএলের বিভিন্ন ভার্সনে <!DOCTYPE> ডিক্লেয়ারেশনের ভিন্নতা সম্পর্কে জেনেছি

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

স্যাট একাডেমীর এইচটিএমএল রেফারেন্সে আপনি ট্যাগ(tag), এট্রিবিউট(attribute), ইভেন্ট(event), কালারের নাম(color name), এন্টিটি(entity), অক্ষরসেট(character-sets), ইউআরএল এনকোডিং(URL encoding), ভাষা কোড(language codes), এইচটিটিপি মেসেজ(HTTP message) ইত্যাদির সম্পূর্ণ রেফেরেন্স পাবেন।

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


এইচটিএমএল বেসিক টিউটোরিয়াল

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

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

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

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

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

এইচটিএমএল গ্রাফিক্স টিউটোরিয়াল

ক্যানভাস-Canvas এসভিজি-SVG

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

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

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

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

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

রেফারেন্স- reference কিবোর্ড শর্টকাট-KeyboardShortcut ভার্সন-Version এট্রিবিউট-Attribute ইভেন্ট-Event কালার-Color ক্যানভাস-Canvas অডিও/ভিডিও-Audio/Video এইচটিটিপি ম্যাসেজ-HTTPMessege এইচটিটিপি মেথড-HTTPMethod PX থেকে EM কনভার্টার অক্ষর সেট-CharacterSet URL এনকোড-Encode ল্যাঙ্গুয়েজ কোড-LanguageCode