এইচটিএমএল পরিচিতি (HTML Introduction)

এইচটিএমএল পরিচিতি (HTML Introduction)

এইচটিএমএল পরিচিতি (HTML Introduction)

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

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

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

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

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

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

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

 

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


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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>পেজ টাইটেল</title>
  5. </head>
  6. <body>
  7.   <h3>স্যাট একাডেমী</h3>
  8.   <img src="../images/satt.png" alt="SATT Academy" height="142" width="142">
  9. </body>
  10. </html>

ফলাফল

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

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

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

  • এইচটিএমএল ট্যাগ সচরাচর জোড়ায়-জোড়ায় থাকে। যেমন <p> এবং </p>
  • জোড়ার প্রথম ট্যাগকে ওপেনিং ট্যাগ এবং দ্বিতীয় ট্যাগকে ক্লোজিং ট্যাগ বলা হয়।
  • ক্লোজিং ট্যাগকে ওপেনিং ট্যাগের মতই লেখা হয়, ক্লোজিং ট্যাগের ক্ষেত্রে ট্যাগের নামের আগে শুধুমাত্র একটি ফরওয়ার্ড স্ল্যাশ(/) দিতে হয়।

<!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> ডিক্লেয়ারেশনের ভিন্নতা সম্পর্কে জেনেছি