এইচটিএমএল (HTML) সম্পর্কে প্রাথমিক ধারণা

ট্যাগ বা এলিমেন্ট (Tags/Elements):

একটি ওয়েব সাইটের যেকোনো বিষয় (Content) প্রাথমিকভাবে Tag দ্বারা নির্দিষ্ট করা হয়। এদেরকে Element-ও বলা হয়। যেমন, কোনো প্যারাগ্রাফ বুঝাতে <p> ট্যাগ ব্যবহৃত হয়।

<p> This is a paragraph. </p>

ট্যাগ লিখার নিয়ম:

1. ট্যাগের নাম Smaller Letter কিংবা Capital Letter হতে পারে। তবে সচরাচর Smaller Letter-এ ট্যাগের নাম লেখা হয়।
2. সাধারণত ট্যাগ-গুলোর শুরু এবং শেষ – এ দু’টি অংশ রয়েছে। কোনো ট্যাগের শুরু বুঝাতে Smaller Than চিহ্ন (<), তারপর ট্যাগের নাম, এবং সবশেষে Greater Than চিহ্ন (>) ব্যবহৃত হয়। আর ট্যাগ শেষ বুঝাতে Smaller Than চিহ্ন (<)-এর পর / লিখে বাকি অংশ শুরুর মতোই লিখা হয়। যেমন, কোনো প্যারাগ্রাফের শুরু বুঝাতে <p> ব্যবহৃত হয় এবং শেষ বুঝাতে </p> ব্যবহৃত হয়।
3. আবার কিছু কিছু ট্যাগ রয়েছে যেগুলোর শুরু এবং শেষ একটি মাত্র কোড দ্বারা প্রকাশ করা হয়। এদেরকে Self Closing Tag বলে। যেমন, লাইন ব্রেক বুঝাতে <br> ট্যাগ ব্যবহৃত হয়। যেহেতু একটি মাত্র ট্যাগেই শুরু ও শেষ, সেজন্য আরো সঠিকভাবে বুঝাতে <br/> – এভাবে লিখা হয়। অর্থাৎ Greater Than চিহ্নের আগে / ব্যবহৃত হয়।

এট্রিবিউট ও প্রোপার্টি (Attributes and Properties):

শুধু ট্যাগের মাধ্যমে অনেক সময় সব তথ্য ডিফাইন করা সম্ভব হয় না। সেক্ষেত্রে Attributes ব্যবহার করে ট্যাগের সক্ষমতা আরো বাড়ানো যায়। একটি ট্যাগের অধীনে এক বা একধিক attribute থাকতে পারে। প্রতিটি Attribute-এর অধীনে আবার Property থাকে। যেমন, Anchor <a> ট্যাগের মাধ্যমে লিংক তৈরি করা হয়। শুধু <a> দ্বারা লিংক সম্পূর্ণ হয় না। কোন্ পেজের সাথে লিংক তা বুঝাতে href attribute টি ব্যবহৃত হয়।

<a>Go to Google</a>
<a href="https://google.com">Go to Google</a>

প্রথম লাইন দ্বারা লিংকটি সম্পূর্ণ হয়নি। কেননা কোন্ পেজের সাথে লিংক করা হয়েছে তা দেয়া হয়নি। দ্বিতীয় লাইনে আমাদের লিংকটি সম্পূর্ণ হয়েছে। এখানে href কে বলা হয় Attribute, আর https://google.com হলো তার Property.

href এর ক্ষেত্রে যেকোনো লিংক-ই property হিসেবে ব্যবহৃত হতে পারে। আবার কিছু কিছু attribute-এর ক্ষেত্রে নির্দিষ্ট সংখ্যক property রয়েছে। ইচ্ছে করলেই এর বাইরে কোনো কিছু ব্যবহার করা যায় না।

যেমন, উপরের লিংকটি কি নতুন ট্যাবে খুলবে, নাকি বর্তমান ট্যাবেই খুলবে তা বুঝাতে target ব্যবহৃত হয়। target-এর property হিসেবে কেবল চারটি ভ্যালু (Value) ব্যবহার করা যায়।

Attribute ও Property লিখার নিয়ম:

Attribute ও Property একসাথে লিখার কিছু নিয়ম রয়েছে।

১। শুরুর ট্যাগে Attribute-Prpoerty লিখা হয়। ট্যাগের নামের পর একটি স্পেস দিয়ে তা লিখতে হয়। Attribute-এর নামের পর সমান চিহ্ন দিয়ে Property লিখতে হয়।

<tagname attribute="property" />
<input type=text />

২। Property-এর মধ্যে কোনো স্পেস বা স্পেশাল ক্যারেক্টার থাকলে সেটিকে সিঙ্গেল কিংবা ডাবল কোটেশনের মধ্যে রাখতে হয়। তবে সাধারণভাবে, যে কোনো property-কেই কোটেশনের মধ্যে রাখা হয়।

<input type="text" />
<img alt="Image Alternate Text" />

৩। যেসব attribute-এর একটিই মাত্র property হতে পারে, সেক্ষেত্রে propety না লিখলেও চলে। required attribute-এর property কেবল একটিই হতে পারে, আর তা হলো required। তাই নিচের দুটিই চলে।

<input required="required" />
<input required />

ট্যাগের ভিতরে ট্যাগ লিখা:

HTML ট্যাগগুলো একটির ভিতরে আরেকটি, তার ভিতরে আরেকটি — এভাবে একটি সম্পর্ক তৈরি করে। বাইরের ট্যাগটিকে বলা হয় প্যারেন্ট ট্যাগ (Parent Tag), আর ভিতরেরটিকে বলা হয় চাইল্ড ট্যাগ (Child Tag)। চাইল্ড ট্যাগটি অবশ্যই প্যারেন্ট ট্যগের ভিতরে শুরু ও শেষ করতে হয়। যেমন:-

<p> This is a <strong>paragraph</strong>. </p>

এখানে প্যারাগ্রাফের জন্য নির্ধারিত ট্যাগ <p> হলো প্যারেন্ট ট্যাগ এবং <strong> হলো চাইল্ড ট্যাগ। <strong> ট্যাগটি চাইল্ড ট্যাগ হওয়ায় সেটি <p> ট্যাগের ভিতরে শুরু (<strong>) ও শেষ (</strong>) হয়েছে। অর্থাৎ প্যারাগ্রাফ ট্যাগের শেষ চিহ্ন </p>-এর আগে অবশ্যই </strong> হবে।

Comment বা মন্তব্য লিখার নিয়ম:

অনেক সময় HTML কোডের সাথে নোট বা মন্তব্য লিখে রাখার প্রয়োজন হতে পারে। সেক্ষেত্রে মন্তব্যগুলো <!-- ও --> চিহ্নের মাঝে লিখা হয়। এ মন্তব্যগুলো ওয়েবপেজে প্রদর্শিত হয় না।

<!-- This is a comment. -->
<!-- This will not output any result. -->