এটি 18 পর্বের HTML বেসিক ট্রেনিং ফ্রি বিষয়ক টিউনের 10 পর্ব

আসালামু আলাইকুম /নমস্কার । কেমন আছেন সবাই। আশা করি সবাই ভাল আছেন। আমি ভাল ।
গত পর্বে আমরা লিঙ্ক নিয়ে
আলোচনা করেছি । আজকে আমরা ২ টি বিষয় নিয়ে আলোচনা করব ।

HTML Table
HTML Entilies

চলুন আমারা কাজ শুরু করি ।

প্রথমে আমারা Html Table নিয়ে আলোচনা করি ।

প্রথমেই আমাদের মনে যে প্রশ্নগুলো আসতে পারে তা নিম্নরূপ:

Html Table কি ?

সারি ও কলামের মাধ্যমের যেকোন ডাটা বা তথ্য বা উপাত্তকে ওয়েব পেজে উপস্থাপন বা প্রকাশ আমরা যার মাধ্যমে করে থাকি তাই HTML Table । Table Tag-টি <tr> Tag-এর মাধ্যমে ছকের মধ্যে সারি(row) এবং <td> Tag-এর মাধ্যমে ছকের মধ্যে স্তম্ভ(Column or Cell) তৈরি করে । টেবিল ট্যাগটিতে কতগুলি বিশেষ Attributes-ও ব্যবহার করা যায় ।Attributes গুলি হল border,cellspacing,cellpadding ইত্যাদি ।

তা হলে চলুন আমারা এইচটিএমএল Table নিয়ে একটা code লিখি ।

<html>
<head>
<title>Html Table</title>
</head>
<table border=”3″>
<caption>মাসিক খরচের একটি লিস্ট </caption>
<tr>
<th>নং</th>
<th>তারিখ </th>
<th>বই কেনা</th>
<th>কলম কেনা </th>
<th>খাতা কেনা</th>
</tr>
<tr>
<td>01</td>
<td>1/12/12</td>
<td>500</td>
<td>100</td>
<td>200</td>
</tr> <tr>
<td>02</td>
<td>6/12/12</td>
<td>300</td>
<td>50</td>
<td>100</td>
</tr> <tr>
<td>03</td>
<td>11/12/12</td>
<td>500</td>
<td>100</td>
<td>300</td>
</tr>
</table>
</body>
</html>

এবার এটাকে a1.html দিয়ে সেভ করে open করুন । দেখুন একটি টেবিলের মত হইছে ।

যেমন :-

নোটপ্যাড এ input

ব্রাউজারে output

উপরের এইচটিএমএল কোডটি নোটপ্যাড এ লিখে a1.html নাম দিয়ে ডেক্সটপ এ সেভ করুন । তারপর এটা ওপেন করুন । ওপেন করলে পাশের Output এর মত আসবে ।

মাসিক খরচের একটি লিস্ট
নং	তারিখ	বই কেনা	কলম কেনা	খাতা কেনা
01	1/12/12	500	100	200
02	6/12/12	300	50	100
03	11/12/12	500	100	300

আপনাদের বুঝার জন্য আমি কাজগুলোর ব্যাখ্যা লিখে দিলাম :-

1. <table border=”3″> এখানে border=”3″ এর মাধ্যমে টেবিলের জন্য তিনটি বর্ডার ব্যবহার করা হয়েছে , প্রয়োজন অনুসারে 1 এর স্থানে 2,3,4,5 ইত্যাদি ব্যবহার করা যাবে ।

2. <caption> এখানে <caption>এর মাধ্যমে যে কোন caption দিতে পারবেন যা দিবেন তা সব সময় টেবিলের উপর থাকবে ।

3. টেবিলের প্রতিটা সারি তৈরির জন্য <tr></tr> ব্যবহার করা হয়, এবং প্রতিটা সেল তৈরির জন্য <td></td>ব্যবহার করা হয় ।

4. <th></th> এর মাধ্যমে টেবিল হেডার তৈরি করা হয়েছে।<th>Book</th> এর মধ্যের “বই কেনা ” লেখাটি একটু মোটা দেখাবে।

5. টেবিলের মধ্যে কোন সেল খালি রাখার জন্য <td></td> এর মাঝে কিছু না লেখলেই হবে। শুধুমাত্র <td></td> ব্যবহার করতে হবে।

আপনি চাইলে Image দিয়েও এইচটিএমএল টেবিল তৈরি করতে পারেন । নিচে আমি একটা image দিয়ে তৈরি একটি টেবিল দিয়ে দিলাম । যে Image এ ক্লিক করবেন সেই সাইট এ চলে যাবে । নিজে একটু চেষ্টা করুন পারবেন ।

এবারে চলুন আমারা Html Entilies নিয়ে আলোচনা করি ।

HTML এ কিছু সংরক্ষিত character রয়েছে, এগুলো HTML Entities নামে পরিচিত। একটা উদাহরণ দিলে ব্যাপারটা পরিষ্কার হয়ে যাবে । মনে করুন আপনি (<) লেসদেন অথবা গ্রেটারদেন(>) চিহ্ন ব্যবহার করতে চাচ্ছেন। কিন্তু আপনি যদি সরাসরি কোডিং এ সিম্বলটি দেন তাহলে ব্রাউজার এগুলোকে ট্যাগ মনে করে। তাই এগুলো আর ব্রাউজারে প্রদর্শিত হয় না। আর এজন্য এগুলো প্রদর্শনের জন্য কিছু সংরক্ষিত character ব্যবহার করা হয়।

আজ আর লিখছি না । এ পর্যন্ত । পরের পর্বে আবার দেখা হবে । ধন্যবাদান্তে