Linux Host Lab Ads

আসুন HTML শিখি (পর্ব-১০)

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

  • HTML Table
  • HTML Entilies

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

 

Ads by পিসি হেল্প সেন্টার (বাংলাদেশ)

Linux Host Lab Offer

 

প্রথমে আমারা 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 এ ক্লিক করবেন সেই সাইট এ চলে যাবে । নিজে একটু  চেষ্টা করুন পারবেন ।

 


facebook logo square webtreatsetc html শেখার সহজ উপায় : অধ্যায় ৭

google logo html শেখার সহজ উপায় : অধ্যায় ৭

yahoo logo2 html শেখার সহজ উপায় : অধ্যায় ৭

bing logo html শেখার সহজ উপায় : অধ্যায় ৭

 

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

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


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

Series Navigation<< আসুন HTML শিখি (পর্ব-৯)আসুন HTML শিখি (পর্ব-১১) >>

Ads by পিসি হেল্প সেন্টার (বাংলাদেশ)

Software Ads

৫ thoughts on “আসুন HTML শিখি (পর্ব-১০)”

    1. রাজীব সাহা says:

      ধন্যবাদ ভাই

  1. অনেক সুন্দর হইছে, চালিয়ে যান, ধন্যবাদ আমাদের সাথে শেয়ার করার জন্য। 😛 😀

    1. রাজীব সাহা says:

      থাঙ্কস ভাই http://www.pchelpcenterbd.com/wp-content/plugins/wp-monalisa/icons/wpml_good.gifhttp://www.pchelpcenterbd.com/wp-content/plugins/wp-monalisa/icons/wpml_good.gifhttp://www.pchelpcenterbd.com/wp-content/plugins/wp-monalisa/icons/wpml_good.gifhttp://www.pchelpcenterbd.com/wp-content/plugins/wp-monalisa/icons/wpml_good.gif

Leave a Reply