«

»

আসুন ওয়েবসাইট তৈরি করি HTML,CSS,JAVA এর সাহায্যে A to Z (৪র্থ পর্ব)

আসসালামুয়ালাইকুম। সবাই কেমন আছেন ? নিশ্চয়ই ভাল। বৃষ্টিতে ভেজা আর মামার বাড়ির আম কুড়াতে কুড়াতে আমিও অনেক ভাল । আশা করি আপনারাও আম কুরাচ্ছেন। যদি আম কুড়ানোর জায়গা খুজে না পান তাহলে আমার বাড়িতে সবাইকে আম কুড়ানোর নিমন্ত্রণ থাকলো ।

অনেক কথা হল, আর কথা না বাড়িয়ে চলুন চলে যাই আজকের পর্বে । যারা আমার গত পর্ব গুলো পড়েন নি তারা নিচের লিঙ্ক থেকে পড়ে নিতে পারেন নিচের লিঙ্ক গুলো থেকেঃ

আজকে আমরা html দিয়ে টেবিল তৈরি করা শিখব ।

আপনি আপনার সাইটের বিভিন্ন উপাদান গুলি টেবিলের সাহায্যে সুন্দরভাবে সাজাতে পারবেন। প্রথমে টেবিলের কিছু কাজ করবো ।

<html>

<body>

<table border="1" width="50%">

<tr>

<td>zahid</td>

<td>arif</td>

<td>sorif</td>

</tr>

<tr>

<td>samim</td>

<td>hassan</td>

<td>karim</td>

</tr>

<tr>

<td>sujon</td>

<td>sumon</td>

<td>hasina</td>

</tr>

</table>

 

 

</body>

</html>

ইহার output হবে নিচের মতঃ

এখানে ক্লিক করে বড় করে দেখুন।

এটি সিম্পল একটা টেবিল । এর চেয়ে বড় টেবিলের কাজ করবো। প্রথমে এই টেবিল কিভাবে তৈরি করলাম তা বুজে নিইঃ

<table>(এই ট্যাগ টি দ্বারা বুজায় যে ওয়েবপেজএ টেবিল তৈরি করা হয়েছে)

<tr>( এই ট্যাগ টি দ্বারা টেবিলে রো তৈরি করা হয়।এটি টেবিল রো )

<td>( এই ট্যাগ টি দ্বারা একটি রো তে ডাটা কয়টি শ্রেণিতে ভাগ থাকবে তা তৈরি করা হয় )

Table tag এর ভিতরে width=”50%”. এটি দ্বারা বুজায় যে টেবিল টি প্রস্থে ৫০% বড় হবে ।

যেহেতু আমরা প্রফেশনালদের মত করে ওয়েবসাইট তৈরি করবো তাই বড় টেবিলের কাজ করবো । বড় টেবিল টি হবে নিচের মত:

<body>

<table height="20%">

<table border="5" width="100%" bgcolor="#FFFF00">

<tr align="center">

<td colspan="2">Logo</td>

<td colspan="2">company slogan</td>

</tr>

<tr align="center">

<td>Home</td>

<td>About us</td>

<td>contracts</td>

<td>login</td>

</tr>

</table>

<table border="5" width="100%" bgcolor="#FF6600">

<tr align="center">

<td>Menu 1</td>

<td>menu 2</td>

<td>Menu 3</td>

</tr>

</table>

<table width="100%" border="5" bgcolor="#99FF00">

<tr>

<td>

<table width="100%" border="5">

<tr align="center">

<td>link 1</td>

</tr>

<tr align="center">

<td>link 2</td>

</tr><tr align="center">

<td>link 3</td>

</tr>

</table>

</td>

<td align="center" width="50%">body</td>

<td>

<table width="100%" border="5">

<tr align="center">

<td>link 4</td>

</tr>

<tr align="center">

<td>link 5</td>

</tr><tr align="center">

<td>link 6</td>

</tr>

</table>

</td>

</tr>

</table>

<table width="100%" border="5" height="10%" bgcolor="#FF99CC">

<tr><td align="right">Designed by&copy;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;zahid hassan</td>

</tr>

</table>

</table>

এটির output হবে নিচের মতঃ

এখানে ক্লিক করে বড় করে দেখুন।

কোড গুলো দেখে টেবিলটি practice করতে থাকেন । কোন সমস্যা হলে জানাবেন।

এখন আমরা শিখবো কোন টেক্সটকে কিভাবে শিরোনাম হিসেবে এদিক অদিক নেয়া যায়।

ইহার জন্য মারকিও ট্যাগ ব্যবহার করা হয়ঃ

<marquee>latest News: Sirajgonj Polytechnic Institute has been opened second Shift.</marquee>

এটি আমারা টেবিলে ব্যবহার করবো । টেবিলে ব্যবহার করলে output নিচের মত হবেঃ

এখানে ক্লিক করে বড় করে দেখুন।

আজ আর লিখতে ইচ্ছে করসে না । সবাই ভাল থাকবেন।

 


এ সম্পর্কিত আরো কিছু টুইট:

শিখুন PHP । (পর্ব : পাঁচ ) (The Switch statement in php )
একটি ওয়েব সাইট তৈরির গাইড লাইন (নতুনদের জন্য)
২৫ টি ফ্রি সাব-ডোমেইন এর তালিকা
এবার আমাদের WordPress group থেকে প্রকাশিত হল HTML এর উপর ইবুক।(সম্পূর্ণ বাংলা ভাষায়)।
ওয়েব ডেভেলোপারদের কাজের সহযোগিতার জন্য কিছু অসাধারণ টুলস ।
Outsourcing শিখে ইনকাম করার বাংলা ভিডিও টিউটোরিয়াল
আপনি কেন একটি ফ্রী ক্লাসিফাইড ওয়েবসাইট বানাবেন?

মন্তব্য দিনঃ

comments

About the author

zahid hassan

ভাল লাগে বৃষ্টিতে ভিজতে, আর সাথে যদি পাশের বাড়ির মেয়েটি থাকে তাহলে তো অনন্দএর সীমা থাকে না । আর এগুলোর চেয়ে বেশি ভাল লাগে কম্পিউটারের সাথে গল্প করতে ।

Permanent link to this article: http://techtweets.com.bd/web-developing/zahid-hassan/4135

17 comments

Skip to comment form

  1. asad

    Vai softwer tar English version download link dilen na. amar khub dorkar ta na hole apner kas theke sikhte parsi na plz plz……………………………….plz

    1. zahid hassan

      সরি ভাই । যত কষ্টই হোক আজ দিয়ে দিব।

  2. রাসেল

    হুম ভালো হচ্ছে………..

    1. zahid hassan

      থাঙ্কু।

  3. Rubel Orion

    অনেক ভালো হচ্ছে ভাইজান! চালিয়ে যান। চালাতে সমস্যা হলে চাক্কা লাগিয়ে ফেলুন!! 😉

    1. zahid hassan

      ধন্যবাদ । আমিতো ভাই আপনাকে আমার একটা চাকা বানাতে চাই, তা আপনি কি বলেন? 😀

  4. আউয়াল

    সামনে অগ্রসর হোন। আমার কাজে আসতাছে।ধন্যবাদ।

    1. zahid hassan

      আপনার কাজে আসলেই আমার সফলতা ।ধন্যবাদ।

  5. masud rana

    জাহিদ ভাই খুব কষ্ট করেসেন মনে হয়। আমার অনেক ভাল লাগসে। আমি সিখতে পারতেসি।

    1. zahid hassan

      মাসুদ ভাই techtweets এ আপনাকে স্বাগতম । দোয়া করেন যেন আপনাদের জন্য আরও কষ্ট করতে পারি।

  6. MNUWORLD

    ধন্যবাদ চালিয়ে যান……

    1. zahid hassan

      আপনাকেও ধন্যবাদ

  7. asad

    Vai softwer tar English version download link dilen na. amar khub dorkar ta na hole apner kas theke sikhte parsi na plz plz……………………………….plz

    1. ঐ ছেলেটি
      jakir

      http://www.mediafire.com/?miejlxonjm2 এখান থেকে নামিয়ে নিন।

    2. zahid hassan

      ধন্যবাদ জাকির ভাই। লিঙ্কটা দেয়ার জন্য। আসাদ ভাই আশা করি ডাউনলড করে নিবেন।

  8. MNUWORLD

    জাকির ভাই Dreamweaver দিয়ে কি ওয়ার্ডপ্রেস সাইট কন্টোল বা ম্যানেজমেন্ট করা যাবে একটু জানাবেন কষ্ট করে…….

    1. ঐ ছেলেটি
      jakir

      Dreamweaver দিয়ে ওয়ার্ডপ্রেসের কোড গুলো এডিট করা যাবে।
      আর কন্ট্রোল করার জন্য তো এডমিন প্যানেলই রয়েছে।

মন্তব্য করুন