একজন দক্ষ ফ্রিল্যান্সার গড়ার লক্ষে দেশে এই প্রথম জাগোরিক নিয়ে এসেছে বাংলা এইচটিএমএল টিউটোরিয়াল আর্টিকেল যার এই পর্বে থাকছে এইচটিএমএল ছবি ও টেবিল সম্পর্কে বিস্তারিত।
এটি হচ্ছে বাংলা এইচটিএমএল টিউটোরিয়াল Part-6 এরই ধারাবাহিকতায় আমরা HTML এর সম্পূর্ণ সিরিজ শেষ করার চেষ্টা করব।
সকল পর্বের টিউটোরিয়াল এখানে ক্লিক করলে পেয়ে যাবেনঃ এইচটিএমএল টিউটোরিয়াল
এইচটিএমএল ছবি ও টেবিল (HTML Image & Tables: Part-6)
এইচটিএমএল ছবি (HTML Image): এইচটিএমএল ছবি ও টেবিল
<img /> ট্যাগ ব্যবহার করে ওয়েব পেজে যেকোন ছবি প্রদর্শন করতে পারবেন। যেমন
1.<imgsrc="/sunset.gif"alt="Sunset"/>
প্রদর্শন
এখানে src এবং alt হচ্ছে img ট্যাগের দুটি এট্রিবিউট। src দিয়ে ছবিটির অবস্থান দেখিয়ে দিতে হবে এবং alt এর মধ্যে ছবিটির কোন বর্ননা দিতে পারবেন। ছবি লোড হতে দেরি হলে ততক্ষন alt এর ভিতর লেখাটি দেখায়।
src এর ভিতর ছবিটির উৎস দুভাবে দিতে পারেন। absolute path অথবা relative path যেমন আমরা রিলেটিভ পাথ দিয়েছি।
আপনি চাইলে absolute path (পুরো ঠিকানা) দিতে পারেন। https://www.jagorik.com/images/stories/imagel.jpg
এছাড়া আছে height এবং width নামে দুটি এট্রিবিউট। নাম দেখেই আন্দাজ হচ্ছে যে এদুটি দিয়ে কি করা যাবে। ছবির দৈর্ঘ্য এবং প্রস্থ নির্ধারন করে দিতে পারেন।
width=”100″ বা height=”200″ এভাবে দিলেই হবে। 100px এভাবে দিতে হবেনা।
** যেকোন একটি দিলে একটা সুবিধা হচ্ছে ব্রাউজার অপরটি অটোমেটিক খাপ খাইয়ে নেয় ফলে ছবির আনুপাতিক আকার ঠিক থাকে। এত করে ছবিটি দেখতে সামন্জস্যপূর্ন হয়।
আরো এট্রিবিউট আছে যেমন align, valign এগুলি দিয়ে ছবির এলাইনমেন্ট ইচ্ছে মত দেয়া যায়
align এর মান হতে পারে right, center, left
আর valign এর মান হতে পারে top, bottom, center
1.<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>2.<imgalign="right"src="/images/stories/imagel.jpg"alt="sunset"/>3.<p> Ut wisi enim </p>
তবে এই এট্রিবিউট দুটি এখন আর বেশি ব্যবহার হয়না
আরও পড়ুনঃ বাংলা এইচটিএমএল টিউটোরিয়াল (Introduction: Part-1)
এইচটিএমএল টেবিল: এইচটিএমএল ছবি ও টেবিল
বিভিন্ন ওয়েব সাইটে টেবিল ভিত্তিক ডেটা দেখেছেন নিশ্চয়ই। বিশেষ করে খেলাধুলার সাইটের খেলোয়ারদের স্কোর, প্রোফাইল, সময়সূচি, শেয়ার বাজারের হিসাব ইত্যাদি কাজে টেবিল লাগে। টেবিলভিত্তিক ডেটা দেখানোর জন্য এইচটিএমএল এর বেশকিছু ট্যাগ আছে যেগুলি দিয়ে নানন ধরনের টেবিল তৈরী করা যায়। একটা টেবিল তৈরীতে প্রাথমিকভাবে ৩টি ট্যাগ লাগে
১. <table></table>
২. <tr></tr> (tr তে table row)
৩. <td></td> (td তে table data)
এই ৩টি ট্যাগ দিয়ে একটা টেবিল বানাতে পারবেন। পুরো grid সিস্টেম বানানো যাবে। row এবং column দিয়ে
tr দিয়ে row বা সারি এবং td দিয়ে column বা স্তম্ভ বানানো হয়। একটা সাধারন টেবিল
01.<table>02.<tr>03.<td>HTML</td>04.<td>JS</td>05.<td>SQL</td>06.</tr>07.<tr>08.<td>CSS</td>09.<td>PHP</td>10.<td>MySQL</td>11.12.</tr>13.</table>
প্রদর্শন:
| HTML | JS | SQL |
| CSS | PHP | MySQL |
আমি দুটি row এবং ৩টি করে কলাম ব্যবহার করেছি আপনি ইচ্ছে মত row ব্যবহার করতে পারবেন।
টেবিল শিরোনাম
<th> নামে একটা ট্যাগ আছে এটা দেয়া টেবিলের হেডার বানানো যায় যেমন
01.<table>02.<tr>03.<th>Markup</th>04.<th>Programming</th>05.<th>Database</th>06.</tr>07.<tr>08.<td>HTML</td>09.<td>JS</td>10.<td>SQL</td>11.</tr>12.<tr>13.<td>CSS</td>14.<td>PHP</td>15.<td>MySQL</td>16.</tr>17.18.</table>
প্রদর্শন
| Markup | Programming | Database |
|---|---|---|
| HTML | JS | SQL |
| CSS | PHP | MySQL |
দেখুন th এলিমেন্টের লেখাগুলি হেডিং আকারে দেখাচ্ছে।
তবে টেবিল দেয়ার উপযুক্ত নিয়ম হচ্ছে টেবিলের হেডার, বডি এবং ফুটার সহ দেয়া। এজন্য কিছু ট্যাগ আছে এগুলি ব্যবহার করলে গ্রামাটিকালি টেবিলটি সঠিক হয় এরুপ একটি উদাহরন
01.<table>02.<thead>03.04.<tr>05.<th>Markup</th>06.<th>Programming</th>07.<th>Database</th>08.</tr>09.</thead>10.<tfoot>11.<tr>12.<td>Easy</td>13.<td>Tough</td>14.<td>Tough</td>15.</tr>16.17.</tfoot>18.<tbody>19.20.<tr>21.<td>HTML</td>22.<td>JS</td>23.<td>SQL</td>24.</tr>25.<tr>26.<td>CSS</td>27.<td>PHP</td>28.<td>MySQL</td>29.</tr>30.</tbody>31.32.</table>
| Markup | Programming | Database |
|---|---|---|
| Easy | Tough | Tough |
| HTML | JS | SQL |
| CSS | PHP | MySQL |
<tfoot> ট্যাগ <tbody> এর আগে দেয়া হয়েছে, আর এভাবেই ব্রাউজার সঠিকভাবে দেখাতে পারে।(দেখুন tfoot এর ডেটা নিচেই দেখাচ্ছে)
উপরের টেবিলগুলিতে বর্ডার না দেয়াতে ভাল দেখাচ্ছে না এজন্য <table> এলিমেন্টে বেশ কয়েকটি এট্রিবিউট আছে যেগলি দিয়ে টেবিল সুন্দর সাজানো যায়। যেমন টেবিলে বর্ডার দিতে চাইলে <table border=”1″> এভাবে দিবেন ফলে টেবিলটি কিছুটা সুন্দর লাগবে আবার আছে cellpadding এবং cellspacing এদুটি দিয়ে cell বা অংশগুলির মধ্যে যথাক্রমে প্যাডিং (কনটেন্ট থেকে বর্ডারের দুরত্ব) এবং দুরত্ব বাড়ানো যায় যেমন উপরের টেবিলে <table border=”1″ cellpadding=”10″> এটা যোগ করে.
rowspan এবং colspan
td, th এ rowspan এবং colspan এট্রিবিউট দুটি ব্যবহার করে জটিল ধরনের টেবিল বানানো যায়্। rowspan এর সংখ্যাত্নক মান দিয়ে ঠিক করা যায় cell টি কতটি row এর সমান হবে যেমন
01.<tableborder="1">02.<tr>03.<throwspan="2">Web Language</th>04.<td>HTML</td>05.<td>CSS</td>06.</tr>07.<tr>08.<td>PHP</td>09.<td>JS</td>10.</tr>11.<tr>12.<th>Framework</th>13.<td>CI</td>14.<td>Bootstrap</td>15.</tr>16.</table>
প্রদর্শন:
| Web Language | HTML | CSS |
|---|---|---|
| PHP | JS | |
| Framework | CI | Bootstrap |
কোথায় th, td ইত্যাদি দিয়েছি ভালভাবে লক্ষ্য করুন নাহলে কিছুই বুঝবেননা। দেখুন দুটি row এর জায়গা কিভাবে একটি cell th(Web Language) দিয়ে দখল করা হয়েছে, rowspan দিয়ে।
colspan দিয়ে কলাম দখল করা যায় যেমন উপরের টেবিল C দেখুন সেখানে Tough দুটি কলামে রাখা হয়েছে যেটা অপ্রয়োজনীয়, ইচ্ছে করলে colspan ব্যবহার করে একটি কলামকেই দুটির সমান করে দিতে পারি। যেমন ঐ উদাহরনটির ১৩ এবং ১৪ নম্বর লাইনদুটি বাদদিয়ে নিচের লাইনটি দিন
1.<tdcolspan="2"></td>
ব্যাস এবার রান করিয়ে দেখুন একটি কলামেই কাজ হয়ে গেছে।
** একটা cell এর ভিতর (td এর ভিতর) যেকোন এইচটিএমএল এলিমেন্ট রাখতে পারেন। img, p বা যেকোন কিছু।
** গুরত্বপূর্ন এট্রিবিউটগুলিই শুধু আলোচনা করা হচ্ছে, এগুলি ছাড়াও align, bgcolor ইত্যাদি কমন এট্রিবিউটগুলি ব্যবহার করা যাবে।
উক্ত বিষয় সম্পর্কে কিছু জানার থাকলে কমেন্ট করতে পারেন।
আমাদের সাথে ইউটিউব চ্যানেলে যুক্ত হতে এখানে ক্লিক করুন এবং আমাদের সাথে ফেইজবুক পেইজে যুক্ত হতে এখানে ক্লিক করুন।
গুরুত্বপূর্ণ আপডেট ও তথ্য পেতে আমাদের ওয়েবসাইটে ভিজিট করুন।
