এইচটিএমএল সিনট্যাক্স এবং স্ট্রাকচার: ওয়েবপেজ তৈরির মৌলিক গঠন

ওয়েব ডেভেলপমেন্টের জগতে প্রবেশ করার প্রথম ধাপ হল HTML শেখা। HTML, বা HyperText Markup Language, ওয়েবপেজের মূল কাঠামো তৈরি করতে ব্যবহৃত হয়। এটি একটি মার্কআপ ভাষা যা ট্যাগ ব্যবহার করে ওয়েবপেজের প্রতিটি উপাদান (ইলিমেন্ট) নির্ধারণ করে, যেমন শিরোনাম, অনুচ্ছেদ, ছবি, লিংক ইত্যাদি।



সঠিক HTML সিনট্যাক্স এবং স্ট্রাকচার অনুসরণ করে একটি ওয়েবসাইটের গঠন আরও পরিষ্কার, সুসংহত এবং ব্যবহারযোগ্য হয়ে ওঠে। আসুন বিস্তারিতভাবে HTML সিনট্যাক্স এবং স্ট্রাকচার সম্পর্কে আলোচনা করি।

HTML কী?

HTML-এর পূর্ণরূপ হল HyperText Markup Language। এটি এমন একটি ভাষা যা ওয়েবপেজের বিষয়বস্তু গঠন করতে ব্যবহৃত হয়। HTML ব্রাউজারকে নির্দেশ দেয় কীভাবে একটি ওয়েবপৃষ্ঠাকে প্রদর্শন করতে হবে। ওয়েবের প্রতিটি ওয়েবপৃষ্ঠার পিছনে HTML কোড লুকিয়ে থাকে যা ওয়েবের কাঠামো তৈরি করে।

HTML ডকুমেন্টের মৌলিক গঠন

প্রতিটি HTML ডকুমেন্টের নির্দিষ্ট একটি গঠন রয়েছে। এটি সাধারণত নিম্নলিখিত ট্যাগগুলির সমন্বয়ে গঠিত:

<!DOCTYPE html>
<html>
  <head>
    <title>ওয়েবপেজের শিরোনাম</title>
  </head>
  <body>
    <h1>ওয়েবপেজের প্রধান শিরোনাম</h1>
    <p>এটি একটি প্যারাগ্রাফ।</p>
  </body>
</html>

১. ডকটাইপ ঘোষণা

HTML ডকুমেন্টের শুরুতে <!DOCTYPE html> দিয়ে ডকটাইপ ঘোষণা করা হয়। এটি ব্রাউজারকে বলে যে এটি একটি HTML5 ডকুমেন্ট।

২. <html> ট্যাগ

এই ট্যাগটি পুরো HTML ডকুমেন্টকে আবৃত করে। এর মধ্যে <head> এবং <body> ট্যাগ থাকে।

৩. <head> ট্যাগ

এই অংশে মেটা তথ্য, শিরোনাম এবং CSS ও জাভাস্ক্রিপ্ট লিঙ্ক থাকে। এটি মূল বিষয়বস্তু প্রদর্শন করে না, তবে ব্রাউজার এবং সার্চ ইঞ্জিনের জন্য গুরুত্বপূর্ণ তথ্য সরবরাহ করে।

৪. <body> ট্যাগ

এটি ডকুমেন্টের দৃশ্যমান অংশ ধারণ করে। এখানে শিরোনাম, প্যারাগ্রাফ, ছবি ইত্যাদি বিষয়বস্তু থাকে যা ব্যবহারকারীরা দেখতে পান।

HTML এলিমেন্টস: কীভাবে কাজ করে

HTML এলিমেন্টগুলো ওপেনিং এবং ক্লোজিং ট্যাগের মধ্যে থাকে, যেখানে ট্যাগের নাম < এবং > এর মধ্যে থাকে। ক্লোজিং ট্যাগের আগে / থাকে। উদাহরণস্বরূপ:

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

এইচটিএমএল এট্রিবিউটস: এলিমেন্টগুলির বিশেষ তথ্য

HTML এট্রিবিউটগুলি এলিমেন্টগুলিকে অতিরিক্ত তথ্য প্রদান করে। এগুলি সাধারণত ওপেনিং ট্যাগের মধ্যে উল্লেখ করা হয়। উদাহরণস্বরূপ:

 <a href="https://example.com">এটি একটি লিঙ্ক</a>

এখানে href এট্রিবিউটটি লিঙ্কের URL প্রদান করে।

মেটা ট্যাগ: ওয়েবপেজ সম্পর্কে তথ্য প্রদান করা

<meta> ট্যাগটি ওয়েবপেজ সম্পর্কে অতিরিক্ত তথ্য সরবরাহ করতে ব্যবহৃত হয়, যেমন কীওয়ার্ডস, বিবরণ, এবং ক্যারেক্টার সেট।

<meta name="description" content="এই ওয়েবপেজের বিবরণ">

টেক্সট ফরম্যাটিং ট্যাগস

HTML টেক্সটকে বিভিন্নভাবে ফরম্যাট করতে দেয়। কিছু গুরুত্বপূর্ণ ট্যাগ নিম্নরূপ:

  • শিরোনাম ট্যাগ: <h1> থেকে <h6> পর্যন্ত ট্যাগ ব্যবহার করে শিরোনামের গুরুত্ব নির্ধারণ করা যায়।
  • প্যারাগ্রাফ ট্যাগ: <p> ট্যাগ প্যারাগ্রাফ তৈরি করতে ব্যবহৃত হয়।
  • বোল্ড এবং ইটালিক ট্যাগ: <b>, <strong>, <i>, এবং <em> ট্যাগ টেক্সটকে বোল্ড বা ইটালিক করতে ব্যবহৃত হয়।

লিস্ট তৈরির ট্যাগ: অর্ডারড এবং আনঅর্ডারড লিস্ট

লিস্ট তৈরির জন্য দুটি প্রকারের ট্যাগ ব্যবহৃত হয়:

  • অর্ডারড লিস্ট: <ol> (Ordered List) ট্যাগ ব্যবহার করে ক্রমানুসারে লিস্ট তৈরি করা হয়।
  • আনঅর্ডারড লিস্ট: <ul> (Unordered List) ট্যাগ ব্যবহার করে পয়েন্টযুক্ত লিস্ট তৈরি করা হয়।

প্রত্যেকটি লিস্ট আইটেম <li> ট্যাগ দিয়ে উল্লেখ করা হয়।

লিংক এবং ইমেজ ট্যাগস

  • লিংক ট্যাগ: <a> ট্যাগ ব্যবহার করে ওয়েবপৃষ্ঠায় লিঙ্ক তৈরি করা হয়।

<a href="https://example.com">এটি একটি লিঙ্ক</a>

  • ইমেজ ট্যাগ: <img> ট্যাগ ব্যবহার করে ওয়েবপৃষ্ঠায় ছবি যোগ করা হয়।

<img src="image.jpg" alt="ছবির বিবরণ">

টেবিল তৈরি: তথ্য প্রদর্শনের কাঠামো

টেবিল তৈরির জন্য কয়েকটি প্রধান ট্যাগ ব্যবহৃত হয়:

  • <table>: টেবিল গঠনের জন্য।
  • <tr>: টেবিলের সারি।
  • <td>: টেবিলের তথ্য কোষ।
  • <th>: শিরোনাম কোষ।

ফর্ম এলিমেন্টস: ব্যবহারকারীর ইনপুট নেওয়া

ওয়েবপৃষ্ঠায় ব্যবহারকারীর ইনপুট নেওয়ার জন্য <form> ট্যাগ ব্যবহৃত হয়। এর মধ্যে বিভিন্ন ইনপুট ফিল্ড, যেমন <input>, <textarea>, এবং <select> অন্তর্ভুক্ত করা যায়।

উপসংহার

HTML একটি ওয়েবপেজের মৌলিক কাঠামো তৈরি করে। সঠিক সিনট্যাক্স এবং স্ট্রাকচার ব্যবহার করে ওয়েবপেজের কার্যকারিতা ও ব্যবহারকারীর অভিজ্ঞতা উন্নত হয়। HTML-এর বিভিন্ন এলিমেন্ট ও ট্যাগগুলির সঠিক প্রয়োগ নিশ্চিত করে একটি পরিচ্ছন্ন এবং সুসংহত ওয়েবপেজ তৈরি করা সম্ভব।

FAQs

  1. এইচটিএমএল এলিমেন্ট এবং ট্যাগের মধ্যে পার্থক্য কী? এলিমেন্ট হল সম্পূর্ণ HTML গঠন যা ওপেনিং এবং ক্লোজিং ট্যাগ এবং তার মধ্যে থাকা বিষয়বস্তু নিয়ে গঠিত। ট্যাগ শুধুমাত্র HTML সিনট্যাক্সের অংশ।
  2. ডকটাইপ ঘোষণা কেন গুরুত্বপূর্ণ? ডকটাইপ ব্রাউজারকে বলে কোন HTML সংস্করণ ব্যবহার করা হয়েছে এবং পৃষ্ঠার রেন্ডারিং কীভাবে হবে।
  3. HTML ট্যাগ কি কেস-সেনসিটিভ? না, HTML ট্যাগগুলি কেস-সেনসিটিভ নয়, তবে সাধারণত ছোট হাতের অক্ষরে লেখা হয়।
  4. HTML5 কি পুরোনো HTML এর সাথে সামঞ্জস্যপূর্ণ? হ্যাঁ, HTML5 পুরোনো HTML এর সাথে সামঞ্জস্যপূর্ণ।
  5. ব্লক এলিমেন্ট এবং ইনলাইন এলিমেন্টের মধ্যে কী পার্থক্য? ব্লক এলিমেন্ট পুরো প্রস্থ জুড়ে থাকে এবং নতুন লাইন শুরু করে, যেখানে ইনলাইন এলিমেন্ট এক লাইনের মধ্যে থাকে।

 

Post a Comment

إرسال تعليق

أحدث أقدم