![ব্লগিংয়ের জন্য এইচটিএমএল শেখার ক্লাস – কে কে হাজির? [টিউটোরিয়াল - পর্ব ২]](http://cdn.jinnatulhasan.com/wp-content/uploads/2010/02/htmlhead.jpg)
এইচটিএমএল নিয়ে প্রথম পোস্টটি দেবার পর অনুপ্রেরনার সাথে সাথে প্রচুর অভিযোগ/অভিমানও শুনতে হয়েছে যে আমি পোস্টের ধারাবাহিকতা রক্ষা করতে পারি না। কথা দেবার পরও অনেক পোস্ট বাকি রয়ে গেছে। সব অভিযোগ মাথা পেতে নিচ্ছি। আমি বারবারই বলি যে আমি লেখায় ধারাবাহিকতা রাখতে পারি না, যখন যা ভাল লাগে তাই নিয়েই লিখি।
যাহোক, আজকে এইচটিএমএলের table ট্যাগ নিয়ে আলোচনা করব। ট্যাগটি খুবই খুবই খুবই প্রয়োজনীয়, বিষয়টি জানলে ব্লগে প্রচুর উন্নতি সাধন করা যায়।
প্রথমেই দু’একটি কথা। আমরা মাইক্রোসফট ওয়ার্ডে প্রচুর টেবিল ব্যবহার কর, তেমনভাবে ব্লগেও টেবিল ব্যবহার করা যায়। এইচটিএমএলের টেবিলেও ROW(TR) এবং CELL(TD) আছে। মনে রাখবেন এইচটিএমএলের টেবিলের প্রতিটি ROWতে সমানসংখ্যক COLUMN থাকে। প্রয়োজনে একাধিক ROW(TR) মিলে একটি ROW(TR) এবং একাধিক CELL(TD) মিলে একটি CELL(TD) বানানো যায়। ROW ক্ষেত্রে ROWSPAN এবং CELL(TD) ক্ষেত্রে COLSPAN ব্যবহার করতে হয়।
চলুন উদাহরনগুলো দেখি:
উদাহরণ এক
<table border = 1> <tr> <td>Row 1 - Cell 1</td> <td>Row 1 - Cell 2</td> <td>Row 1 - Cell 3</td> </tr> <tr> <td>Row 2 - Cell 1</td> <td>Row 2 - Cell 2</td> <td>Row 2 - Cell 3</td> </tr> <tr> <td>Row 3 - Cell 1</td> <td>Row 3 - Cell 2</td> <td>Row 3 - Cell 3</td> </tr> </tr> <tr> <td>Row 4 - Cell 1</td> <td>Row 4 - Cell 2</td> <td>Row 4 - Cell 3</td> </tr> </table>
ফলাফল: border = 1 এর ফলে টেবিলের বর্ডার ১ পিক্সেল দেখা যাচ্ছে, 0 করে দিয়ে বর্ডার অদৃশ্য হয়ে যাবে।
| Row 1 – Cell 1 | Row 1 – Cell 2 | Row 1 – Cell 3 |
| Row 2 – Cell 1 | Row 2 – Cell 2 | Row 2 – Cell 3 |
| Row 3 – Cell 1 | Row 3 – Cell 2 | Row 3 – Cell 3 |
| Row 4 – Cell 1 | Row 4 – Cell 2 | Row 4 – Cell 3 |
উদাহরণ দুই
<table border = 1 width = "100%" > <tr> <td>Row 1 - Cell 1</td> <td>Row 1 - Cell 2</td> <td>Row 1 - Cell 3</td> </tr> <tr> <td>Row 2 - Cell 1</td> <td>Row 2 - Cell 2</td> <td>Row 2 - Cell 3</td> </tr> <tr> <td>Row 3 - Cell 1</td> <td>Row 3 - Cell 2</td> <td>Row 3 - Cell 3</td> </tr> </tr> <tr> <td>Row 4 - Cell 1</td> <td>Row 4 - Cell 2</td> <td>Row 4 - Cell 3</td> </tr> </table>
ফলাফল: width = 100% করার ফলে পুরো স্থান জুড়ে টেবিলটি ছড়িয়ে গেছে, প্রয়োজন অনুসারে প্রস্থ বড় ছোট করা যায়।
| Row 1 – Cell 1 | Row 1 – Cell 2 | Row 1 – Cell 3 |
| Row 2 – Cell 1 | Row 2 – Cell 2 | Row 2 – Cell 3 |
| Row 3 – Cell 1 | Row 3 – Cell 2 | Row 3 – Cell 3 |
| Row 4 – Cell 1 | Row 4 – Cell 2 | Row 4 – Cell 3 |
উদাহরণ তিন
<table border = 1 width = "100%" > <tr> <td align = center>Row 1 - Cell 1</td> <td align = center>Row 1 - Cell 2</td> <td align = center>Row 1 - Cell 3</td> </tr> <tr> <td>Row 2 - Cell 1</td> <td>Row 2 - Cell 2</td> <td>Row 2 - Cell 3</td> </tr> <tr> <td>Row 3 - Cell 1</td> <td>Row 3 - Cell 2</td> <td>Row 3 - Cell 3</td> </tr> </tr> <tr> <td align = right>Row 4 - Cell 1</td> <td align = right>Row 4 - Cell 2</td> <td align = right>Row 4 - Cell 3</td> </tr> </table>
ফলাফল: প্রথম row এর সব cell কে center aligned এবং চতুর্থ row এর সব cell কে right aligned করা হয়েছে।
| Row 1 – Cell 1 | Row 1 – Cell 2 | Row 1 – Cell 3 |
| Row 2 – Cell 1 | Row 2 – Cell 2 | Row 2 – Cell 3 |
| Row 3 – Cell 1 | Row 3 – Cell 2 | Row 3 – Cell 3 |
| Row 4 – Cell 1 | Row 4 – Cell 2 | Row 4 – Cell 3 |
উদাহরণ চতুর্থ
<table border = 1 width = "100%" > <tr> <td align = center colspan = 3>Row 1 - Cell 1</td> </tr> <tr> <td>Row 2 - Cell 1</td> <td>Row 2 - Cell 2</td> <td>Row 2 - Cell 3</td> </tr> <tr> <td rowspan = 2>Row 3 - Cell 1</td> <td>Row 3 - Cell 2</td> <td>Row 3 - Cell 3</td> </tr> </tr> <tr> <td align = right>Row 4 - Cell 2</td> <td align = right>Row 4 - Cell 3</td> </tr> </table>
ফলাফল: প্রথম Row 1 - Cell 1 এ তিনটি cell কে একটি cell এবং Row 3 – Cell 1 এ দুইটি row কে একটি row তে পরিবর্তন করা হয়েছে।
| Row 1 – Cell 1 | ||
| Row 2 – Cell 1 | Row 2 – Cell 2 | Row 2 – Cell 3 |
| Row 3 – Cell 1 | Row 3 – Cell 2 | Row 3 – Cell 3 |
| Row 4 – Cell 2 | Row 4 – Cell 3 | |
উদাহরণ পঞ্চম
<table border = 1 width = "100%" > <tr> <td align = center colspan = 3 style = "background-color:#999999; color:#ffffff; ">Row 1 - Cell 1</td> </tr> <tr> <td>Row 2 - Cell 1</td> <td>Row 2 - Cell 2</td> <td>Row 2 - Cell 3</td> </tr> <tr> <td rowspan = 2>Row 3 - Cell 1</td> <td>Row 3 - Cell 2</td> <td>Row 3 - Cell 3</td> </tr> </tr> <tr> <td align = right>Row 4 - Cell 2</td> <td align = right>Row 4 - Cell 3</td> </tr> </table>
ফলাফল: ব্যাকগ্রাউন্ডের রংয়ের জন্য background-color এবং ফন্টের রংয়ের জন্য color ব্যবহার করা হয়েছে (রংয়ের কোডের জন্য এই পোষ্টটি পড়ুন)।
| Row 1 – Cell 1 | ||
| Row 2 – Cell 1 | Row 2 – Cell 2 | Row 2 – Cell 3 |
| Row 3 – Cell 1 | Row 3 – Cell 2 | Row 3 – Cell 3 |
| Row 4 – Cell 2 | Row 4 – Cell 3 | |
আজকে আপাতত এতটুকুই আলোচনা করা হল। আগের পোস্টে আলোচিত বিষয়গুলোর প্রতিটিই টেবিলে ব্যবহার করা যায়, উদাহরনস্বরুপ ওয়ার্ডপ্রেস.কম এবং ওয়ার্ডপ্রেস.অর্গ – এর পার্থক্য কি পোস্টটি দেখতে পারেন। এখানে টেবিল ব্যবহার করা হয়েছে এবং টেবিলে বিভিন্ন পরিবর্তন আনা হয়েছে।
আগামী পোস্ট পযর্ন্ত সাথে থাকুন, ভাল থাকুন।
শুভ কামনা রইল সবার জন্য।
About the author
তিনি একজন ওয়েব ডেভেলপার, ব্লগার এবং সার্চ ইঞ্জিন কনসালটেন্ট হিসেবে FE Samuels Group এ কর্মরত আছেন।
তিনি অবসরে হাসান অনলাইন এ ইংরেজি ব্লগ লিখেন এবং সার্চ ইঞ্জিন ফোরামের এডমিনের দায়িত্ব পালন করছেন।
Google Profile
- More at
এই ধরনের আরোও কিছু পোস্ট:
- [অতিথি পোস্ট] ফ্রিল্যান্সিং পর্ব ২: কিভাবে প্রোফাইল তৈরী করবেন এবং প্রয়োজনীয় সম্পাদনা করবেন
- এখন জিমেইলেই যেকোনো দেশে ফোন করার সুবিধা… সামান্য কিছু পয়সার বিনিময়ে
- ব্লগিংয়ের জন্য এইচটিএমএল শেখার ক্লাস – কে কে হাজির? [টিউটোরিয়াল - পর্ব ১]
- More Related Post এর পাশে কিভাবে বিজ্ঞাপন/গুগল এডসেন্স বসাবেন [প্রোগ্রামিং জ্ঞান প্রয়োজন]
- জনপ্রিয়তায় গুগল ক্রোম ব্রাউজার চলে এল তৃতীয় স্থানে
- ডোমেইন এবং হোস্টিয়ের নতুন প্ল্যান
- ওয়ার্ডপ্রেস.কম এবং ওয়ার্ডপ্রেস.অর্গ – এর পার্থক্য কি?
- সার্চ ইঞ্জিনে আমার ব্লগের অবস্থান – ১৭ই মে, ২০০৯
{ 35 comments… read them below or add one }
হাসান ভাই, আপনার ব্লগ থেকে দুই দিনেই অনেক কিছু শিখে ফেলেছি। আপনার শেখানোর ধরন আমার খুব ভালো লাগে। আপনাকে অনেক ধন্যবাদ।
মন্তব্যের জন্য ধন্যবাদ। আশা করি টিউটোরিয়ালগুলো কাজে লাগবে।
Where is HTML3,4,5,6,7….?please write about html.more and more.
এইচটিএমএল-২ পর্ব লেখার পর তো একটা শ্লোগান দিলেন- ‘কে কে হাজির’ । তৃতীয় পর্বের কোনো খবর নাই। চতুর্থ তো গেছে নোয়ালিতে।
এডসেন্স নিয়ে লেখার পর ভিজিটর কিছু কম পাওয়ার পর গালাগালিটা বেশ মজার হয়েছে।
গালাগালি করলাম কই, শুধু তো মনের দু:খের কথা বলেছি।
আমার মনে হয় কিছু কিছু জায়গার কিছু কোড বেশি হয়ে গিয়েছে (মানে যা প্রিভিউ দেখিয়েছেন)। তারপরও এই ধরনের পোষ্টের জন্য অসংখ্য ধন্যবাদ।
বিঃদ্রঃ আমার এইচটিএমএল সম্পর্কে জ্ঞান কম হওয়ায়। ভুলগুলি ঠিকমত চিহ্নত করতে পারলাম না।
কোথায় কোথায় কোড বেশি হয়ে গেছে, সেটা জানালে খুশি হতাম নয়তো এধরনের মন্তব্য মূল্যহীন।
ধন্যবাদ।
আপনার প্রত্যেকটি উদাহরণের মাঝে শব্দটা মনেহয় বেশি ব্যবহৃত হয়েছে।
Row 3 – Cell 3
বিঃদ্রঃ মুল্যহীন শব্দটা আমার কাছে একটু কেমন যেন লেগেছে। মাইন্ড খাইছি।
খেয়াল করে দেখুন সব জায়গাতে Row 3 – Cell 3 বেশি… প্রতিটি ঘরে এর মান পরিবতর্ন করে কোন ঘরের মান (row / column) কত তা বোঝানোর চেষ্টা করেছি।
মাইন্ড খেলে দু:খিত।
ধরুন আমি আপনাকে বললাম আপনি একটা ফালতু লোক, তারপর বললাম আমি আপনাকে সঠিকভাবে চিনি না, তাই আপনি কেন ফালতু তা বলতে পারছি না।
আমার এধরনের কথার কি কোনো মূল্য আছে?
Row 3 – Cell 3
এখানে শব্দটি বেশি হয়েছে বলে মনে হচ্ছে।
আমার আগের মন্তব্যটিতে এভাবেই লিখেছিলাম কিন্তু শুধু Row 3 – Cell 3 আসলো কেন বুঝতে পারলাম না।
[IMG]http://i48.tinypic.com/ih6qgo.jpg[/IMG]
আমার সাইটা খুব ভাল লেগেছে/ আসাকরি নি্যমিত টিউটোরিয়াল গুলো আমি পড়ে মন্তব্য করতে পারি। আমি সর্বদা নিজেকে ব্লগিং জগৎ আকড়ে দরতে চাই/ধন্যবাদ হাসান ভাই/
কাজের পোস্ট।
কাজে লাগবে।।।
ইশশশ… কী হিজিবিজি সব কোডিং, মাথায় ঢুকতে কস্ট হয়।
হাসান ভাই আমার নিজস্ব প্রয়োজনে আপনার কিছু পোষ্ট আমার সংরক্ষনে রাখলে কোন অসুবিধা হবে। কারন অনেক সময় প্রয়োজনীয় পোষ্টের লিংকটি পেতে কুব বেগ পেতে হয়। আপনার উত্তরের আশায় থাকলাম।ধন্যবাদ…………………
আপনি যে লেখাটি বেশি প্রয়োজন মনে করেন সেই লেখাটি বুকমার্ক করে রাখেন। তাতে হাসান ভাইয়ের সমস্যা হবে না আপনার ও হবে না। আর যদে পেজ ডাউনলোড করে রাখতে চান তাহলে ব্যান্ডউইথ নিয়ে ঝামেলা বাধতে পারে। হাসান ভাইয়ের উত্তর আমার দেওয়ার অধিকার নেই। তবে হাসান ভাই মনে হয় এরকমই উত্তর দিতেন। ভুল হলে ক্ষমাসুন্দর দৃষ্টিতে দেখবেন।
হাসান ভাই Html কোডের ক্লাসের টিউটোরিয়ালের পর্ব শেষ করার পর ওয়ার্ডপ্রেসের মত ব্লগস্পটের ডিজাইনিং এবং ওয়াইডগেট নিয়ে পোষ্ট করলে খুব উপকৃত হব।
যদিো আমি টেকটিউস এর সদস্য, তার পরো হাসান ভাইয়ের ব্লটিতে আমি দিনে অন্তত্য ২.৩০-৩.০০ ঘন্টা সময় অতিবাহিত করি। এর ফলাফল তো সব সময়ই পাচ্ছি। তবে হাসান ভাই এর http://www.iseoforum.com/ ফোরামে এখনো সদস্য হতে পারলাম না। ভাই আপনাতে মেইল দিয়েছি এই ব্যপারে। ভাল থাকবেন।
Shaon ভাই হাসান ভাইয়ের এই ব্লগের কোন নীতিমালায় লিখা আছে নাকি টেকটিউনস এর কোন সদস্য এই ব্লগে আসতে পারবে না ! টেকটিউনস হয়তোবা হাসান ভাইকে সঠিক মূল্য দেয়নি কিন্তু হাসান ভাই কখনো টেকটিউনস পরিবারের কাউকে ছোট করে দেখেননি।
রাফিউরের সাথে একমত। কেননা হাসান ভাই বড় মনের মানুষ, টেকটিউনসের কিছু মানুষের মত মিথ্যাবাদী এবং সার্থপর নয়। ধন্যবাদ হাসান ভাই
রাফিউরের সাথে একমত। হাসিব এর সাথে দ্বিমত।
টেকটিউনসের মানুষরা মিথ্যাবাদী এবং সার্থপর নয়।
আসলে আমরা সবাই বংলা ব্লগিং জগতের ভাই ব্রাদার।
ধন্যবাদ হাসান ভাই।
রাফিউর এর সাথে ৫০% একমত ৫০% দ্বিমত।টেকটিউ্নস প্লাটফর্মটা সবার জন্য এটা কারো একার সম্পত্তি না।আমার জানামতে টেকটিউনস এ হাসান ভাইয়ের সাথে শুধুমাত্ত একজনের বিরোধ ছিল ।একটা ব্লগে অনেক ধরনের বিরোধ থাকতে পারে ঝগড়া থাকতেই পারে ।কিন্তু হাসান ভাই নিজেই টেকটিউনস থেকে চলে এসেছে ।আমরা বা টেকটিউনস এডমিন কখনো হাসান ভাইকে চলে আসতে বলেনি।সেজন্য আপনি টেকটিউনস কে দোষ দিতে পারেন না।আমি আরো যা দেখেছি সামুতেও মাঝে মাঝে হাসান ভাই একজন বিশেষ ব্যক্তিকতৃর্ক (হাসান ভাই জানে কে এই লোক)মাইনাস রেটিং খায় তাই বলে কি হাসান ভাই সামুতে লেখা বন্ধ করে দিবে ???হাসান ভাইকে এই লেখাগুলো টেকটিউনস এ দেবার জন্য আমি আবার ও বিশেষ ভাবে অনুরোধ করব কারন ব্যক্তি বিশেষের দ্বন্দের জন্যতো হাসান ভাই টেকটিউনস ছেড়ে আসতে পারেনা।
জীবন,
যদি কখনও মন চায়, ওখানে লিখবো। ওই ফোরামের প্রতি আমার কোনো রাগ নেই, করুনা হয়। এই বিষয়ে আর কথা বাড়াতে চাই না।
আমার এই ব্লগ সবার জন্য, নিয়মিত আসুন, আলোচনায় অংশ নিন।
শুভ কামনা রইল।
ফোরামটি আপাতত বন্ধ আছে, তাই সদস্য হতে পারছেন না।
আচ্ছা rowspan নামের এই এট্রিবিউট টার কাজ কি একটু বুঝিয়ে বলবেন।
এই ক্লাসটাতে অন্তত নিয়মিত হবার চেষ্টা করছি
হাসান ভাই ভালো লাগল পর পর পোষ্ট পেয়ে। এইটিএমএল এর সকল ট্যাগ গুলো নিয়ে এরকম পোষ্ট চলতেই থাকবে আশাকির।
আমরা সাথেই আছি। সেই সাথে আরো কিছু মানুষকে আপনার সাথে দিব আশা রাখছি।
হাসান ভাই, কেমন আছেন আশা করি ভাল আছেন। আপনার টিউটোরিয়াল ক্লাস আসলেই সুন্দর। আগের টিউটোরিয়াল টি আমি পড়েছিলাম কিন্তু মন্তব্য করতে পারিনাই। আমি সর্বদা নিজেকে ব্লগিং জগৎ নতুন কুড়ির সাথে তুলনা করি তাই কোন কথা লেখার আগে অনেকবার লিখব কি লিখব না এই নিয়ে বাধে সিদ্ধান্ত নেওয়ার গোলমাল। যা হোক আজকের ক্লাস ও আমার ভাল লেগেছে তবে উদাহরণ পঞ্চম
#
#
# Row 1 – Cell 1 style = “background-color:#999999; color:#ffffff; ”
# এই লেখাটি ভুল হয়েছে। সংসধন করবেন প্লিজ। এটা হবে
#
#
# Row 1 – Cell 1
#
জানি আপনার এই ভুলটি আপনার অজান্তে হয়েছে। তবে নতুনদের জন্য এটা সমস্যার। ধন্যবাদ
ভুল জায়গায় কোড বসিয়ে ছিলাম, ধরিয়ে দেবার জন্য ধন্যবাদ।
হাসান ভাই আমি যেটা লিখেছি সেটা কেউ না দেখতে পেলেও আপনি নিশ্চই দেখতে পাচ্ছেন। এই লেখাটা যেন সবাই দেখতে পারে তার ব্যবস্থা করবেন আশাকরি। ধন্যবাদ
কি বললেন বুঝলাম না?
আপনি কোড লিখেছেন কিন্তু কোড ই দেখা যাচ্ছে। কিন্তু আমি কোড লিখলাম সেটা দেখাচ্ছে না। কি ভাবে করলেন জানবেন? আর আমি বলেছিলাম মন্তব্যের কোড এর কথা এটা দেখা যাচ্ছে না। ধন্যবাদ।
.-= জাহিদ এর সর্বশেষ পোষ্ট >> বারবার উইন্ডোজ সেটাপ দেওয়ার হাত থেকে নিন চিরমুক্তি। =-.
যেকোনো কোডিং এর > পরিবর্তে বসান তাহলে মন্তব্যে কোডিং দেখাতে পারবেন।
হাসান ভাইয়ার এই মন্তব্যে দেখুন: কীভাবে মন্তব্যে কোডিং প্রকাশ করতে হয়