যারা ওয়েব ডিজাইন শেখা শুরু করেছেন কিংবা ওয়েব ডিজাইন শেখার কথা ভাবছেন, তাদের প্রায় সবার মধ্যেই বুটস্ট্রেপের প্রতি অনেক আগ্রহ দেখা যায়। যদিও তারা বেশির ভাগই জানেন না, বুটস্ট্রেপ আসলেই কি! তাদের অনেকেই মনে করেন বুটস্ট্রেপ হলো html css এর মতোই কিছু একটা। তারা সিদ্ধান্তই নিয়ে ফেলে css না শিখে সরাসরি bootstrap শিখবে। ব্যাপারটা অনেকটা এমন যে, আপনি হাটা না শিখে পায়ে রোলার স্কেটিং শু লাগিয়ে রাস্তায় দৌড়ানোর চিন্তা ভাবনা করছেন।
বুটস্ট্রেপ নিয়ে খুব বেশি জানি না, যা জানি তা’ই আপনাদেরকে আজ জানানোর চেষ্টা করবো।
Bootstrap কি? কিভাবে তৈরি করছে?
প্রথমেই কিছুটা ইতিহাস বলি। কে, কবে, কিভাবে বুটস্ট্রেপ তৈরি করছে – এইসব আরকি!
মার্ক ওট্টো এবং জ্যাকব থর্টন নামে দুই দোস্ত কাজ করতো টুইটারে। আড়াই বছর কাজ করার পর তারা দুইজনে ঠিক করলো, তারা আর টুইটারে কাজ করবে না। নিজেরা কিছু করে খাবে। টুইটার থেকে তারা খালি হাতে বের হলো না, বের হওয়ার সময় সাথে নিয়ে এলো টুইটারে থাকাকালীন সময়ে কাজের সুবিধার্থে নিজেদের তৈরি করা একটি ফ্রেমওয়ার্ক। এরপর একদিন একটা ব্লগ পোস্টে তারা জানালো, তারা টুইটারে থাকাকালীন সময়ে তৈরি করা একটা ফ্রেমওয়ার্ক নিয়ে রাতদিন খাটতেছে এবং খুব শীঘ্রই সেই ফ্রেমওয়ার্ক জনসাধারণের জন্য উন্মুক্ত করে দেওয়া হবে। কপিরাইটের একটা ব্যাপার ফ্রেমওয়ার্কটার সাথে জড়িত থাকায়, তারা ফ্রেমওয়ার্কটার নাম দিলো – টুইটার বুটস্ট্রেপ।
খ্রিষ্ট পরবর্তী ২০১১ সালের অগাস্টের ১৯ তারিখ রোজ শুক্রবার বাদ জুম্মা, গিটহাবে বুটস্ট্রেপ রিলিজ হল। রিলিজের পর পাব্লিক বুঝে গেল ফ্রন্ট এন্ড ওয়েব ডেভেলপমেন্টের জন্য এই জিনিষের মতো সহজ এবং গুছানো ফ্রেমওয়ার্ক আর একটা নাই। সেই যে জনপ্রিয়তার শীর্ষে বুটস্ট্রেপ উঠলো, এখন পর্যন্ত সেখানেই থেকে গেল। মনে হয় নামতে ভুলে গেছে।
এবার আসি মূল কথায়, আসলে বুটস্ট্রেপটা কি? কিংবা আমি ফ্রেমওয়ার্ক ফ্রেমওয়ার্ক বলে যে মুখে ফেনা তুলছি, সেই ফ্রেমওয়ার্ক জিনিষটাই’বা কি?
Bootstrap ফ্রেমওয়ার্কটা কি!
চলুন আগে আমরা বুঝি ফ্রেমওয়ার্কটা কি! একটা সাধারণ উদাহরণ দিই, এখন অধিকাংশই বিল্ডিং’য়ে লিফট ব্যবহার করা হয় – আচ্ছা আমরা লিফটটা কেন ব্যবহার করি? আমরাতো সিড়ি বেয়েই উপরে উঠতে পারি! আমরা লিফট ব্যবহার করি যাতে সিড়ি দিয়ে উপরে উঠার মতো কাজেই আমাদের মূল্যবান সময় এবং শক্তি নষ্ট না করে ফেলি। এখানে লিফটটা হলো ফ্রেমওয়ার্ক। যদিও উদাহরণটা খুব বেশি পারফেক্ট নয় তবুও ফ্রেমওয়ার্ক ব্যাপারটা এমনই।
ফ্রেমওয়ার্কের কাজই হল, তুলনামূলক অপ্রয়োজনীয় কাজে সময় এবং শ্রম নষ্ট করা থেকে আমাদেরকে রক্ষা করা। একটা ফ্রেমওয়ার্কে আগে থেকে অনেকগুলো কাজ করে দেওয়া থাকে, আমরা শুধু ঐ কাজের নাম ধরে ডাকলেই কাজ হয়ে যাবে।
আশা করি, অনুভব করতে পারছেন ফ্রেমওয়ার্কটা আসলে কি।
বুটস্ট্রেপ হলো css এবং js এর একটা প্যাকেজ ফ্রেমওয়ার্ক। আমরা এই প্যাকেজ ফ্রেমওয়ার্কটা হাড্ডিওয়ালা html এর কংকাল মার্কা ওয়েবপেজের উপর প্রয়োগ করে সহজেই একটা কুল এইট প্যাকওয়ালা বডি বিল্ডার ওয়েবপেজ বানিয়ে ফেলতে পারি।
বুটস্ট্রেপের গ্রিড সিস্টেমঃ
বুটস্ট্রেপের আছে চমৎকার একটা গ্রিড সিস্টেম। যার মাধ্যমে একটা ওয়েবপেজকে ১২ ভাগে ভাগ করে ইচ্ছামতন কন্টেন্ট বসানো যায়। বুটস্ট্রেপ ছাড়াও আপনি নিজে স্টাইল লিখে ১২ ভাগে ভাগ করতে পারবেন, তবে যে কাজটা কোন প্রকার কষ্ট না করে ৩০-৪০ সেকেন্ডে করে ফেলতে পারছেন সেটা কেন ৮-১০ মিনিট সময় নষ্ট করে করবেন?
তাছাড়া বুটস্ট্রেপে অনেকগুলো ক্লাসের স্টাইল আগে থেকেই করে দেওয়া আছে। আমরা শুধু সময়-সুযোগমতো ক্লাসের নাম ধরে ডাকতে পারলেই আমাদের কাজ শেষ। ব্যাপারটা ধরতে পারছেন না? আমরা div কিংবা বিভিন্ন ট্যাগের মধ্যে যে class এর নাম লিখি, সেই class কে আমরা বিভিন্ন স্টাইল দিই। এরকম অনেক গুলো ক্লাসকে আগে থেকে বুটস্ট্রেপে চমৎকার সব স্টাইল দেওয়া আছে।
জাভাস্ক্রিপ্টের অনেক ফাংশন আগে থেকেই লিখা আছে। আমাদের কাজ শুধু কান চেপে ধরে প্রয়োজনীয় ফাংশনকে ডাক দেওয়া, সেই ফাংশন ‘জি হুজুর’ ‘ জি হুজুর’ করতে করতে হাজির হবে। (যদিও এইসব কান চাপাচাপির জন্য ajax’ই মূল বস )
এই লেখাটা আমি বুটস্ট্রেপ শেখানোর জন্য লিখছি না, বুটস্ট্রেপ শেখার জন্য হাজারটা বাংলা টিউটোরিয়াল ইউটিউবে পাওয়া যাবে। আমি বুঝানোর চেষ্টা করছি, বুটস্ট্রেপ আসলেই কি! আমি জানি না আমি কতটুকু সফল হয়েছি। আমার এই লেখার কোন কথা যদি বুঝতে কষ্ট হয় কিংবা কোন নির্দিষ্ট কথাতে যদি আপত্তি থাকে আমাকে জানাবেন।
লেখা শেষ করার আগে ভাই হিসেবে একটা কথা বলি, দয়া করে css না শিখে বুটস্ট্রেপে হাত দিবেন না।
Bootstrap কী?
বুটস্ট্রাপ এর কাজ কি?
Bootstrap tutorial bangla
web design Bangla full course
বুটস্ট্রাপ বাংলা বই
এসকিউএল কি
ওয়েব ডিজাইন কি
বুটস্ট্রাপ টিউটোরিয়াল
বুটস্ট্রাপ মানে কি?
কেন হাত দিবেন না জানেন?
কারণ, দিনশেষে বুটস্ট্রেপ কয়েকটা সাধারণ নিরীহ এক্সটারনাল স্টাইল শীট এবং হতভাগা এক্সটারনাল স্ক্রিপ্ট ফাইল ছাড়া আর কিছুই না।
HTML List – তথ্যাবলী কে ওয়েব পেজে সুন্দর ভাবে তালিকা বা লিস্ট আকারে প্রদর্শন করার জন্য লিস্ট ট্যাগ ব্যবহার করা হয়। নিচে কিছু ফুলের নাম দেখুন, যেগুলো একটি লিস্ট আকারে প্রদর্শিত হয়েছে।
সূর্যমুখী,
দোলনচাঁপা,
হাসনাহেনা,
কাঠগোলাপ।
সর্বাধিক জনপ্রিয় লিস্ট ২ প্রকার। যথা –
১) অর্ডারড লিস্ট বা নাম্বারড লিস্ট,
২) আনঅর্ডারড লিস্ট বা বুলেটেড লিস্ট,
এছাড়াও আরও এক প্রকার লিস্ট আছে, তা হল –
৩) ডেফিনেশন লিস্ট বা বর্ণনামূলক লিস্ট।
এইচটিএমএল লিস্ট – HTML List :অর্ডারড লিস্ট বা নাম্বারড লিস্ট
তথ্যাবলীকে ক্রমিক নং বা সিরিয়াল নাম্বার অনুসারে উপস্থাপনের জন্য যে পদ্ধতির লিস্ট ব্যবহার করা হয় তাকে অর্ডারড লিস্ট বা নাম্বারড লিস্ট বলে। এটি একটি ব্লক লেভেল এলিমেনট।
অর্ডারড লিস্ট বা নাম্বারড লিস্ট উপস্থাপন করা হয় <ol>…</ol> ট্যাগ দিয়ে এবং প্রতিটি লিস্ট আইটেম উপস্থাপন করা হয়<li>…</li> ট্যাগ দিয়ে যেগুলো <ol> ও </ol> ট্যাগ এর মাঝে অবস্থান করে।
উদাহরণ
<ol>
<li> This is a list. </li>
<li> This is a list. </li>
<li> This is a list. </li>
</ol>
নোট – এখানে ডিফল্ট স্টাইল টাইপ রুপে 1, 2, 3 ইত্যাদি প্রদর্শিত হয়।
অর্ডার লিস্টের বাবহ্রিত চিহ্ন
<ol> ট্যাগের সাথে সিএসএস type এট্রিবিউট ব্যবহার করে লিস্ট আইটেম গুলো চিহ্নিত করার ধরণসমূহ নির্ধারণ করা যায়।
লিস্ট আইটেম গুলো সংখ্যা দিয়ে প্রদর্শন করতে হলে type এট্রিবিউটের মান নির্ধারণ করতে হবে “1”, নিচে একটি উদাহরণ দেখুন।
উদাহরণ
<ol type=”1″>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
লিস্ট আইটেম গুলো ছোট হাতের ইংরেজি অক্ষর দিয়ে প্রদর্শন করতে হলে type এট্রিবিউটের মান নির্ধারণ করতে হবে “A”, নিচে একটি উদাহরণ দেখুন।
উদাহরণ
<ol type=”A”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
লিস্ট আইটেম গুলো ছোট হাতের ইংরেজি অক্ষর দিয়ে প্রদর্শন করতে হলে type এট্রিবিউটের মান নির্ধারণ করতে হবে “a”, নিচে একটি উদাহরণ দেখুন।
উদাহরণ
<ol type=”a”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
লিস্ট আইটেম গুলো বড় হাতের রোমান সংখ্যা দিয়ে প্রদর্শন করতে হলে type এট্রিবিউটের মান নির্ধারণ করতে হবে “I”, নিচে একটি উদাহরণ দেখুন।
বড় হাতের রোমান সংখ্যা
<ol type=”I”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
লিস্ট আইটেম গুলো ছোট হাতের রোমান সংখ্যা দিয়ে প্রদর্শন করতে হলে type এট্রিবিউটের মান নির্ধারণ করতে হবে “i”, নিচে একটি উদাহরণ দেখুন।
ছোট হাতের রোমান সংখ্যা
<ol type=”i”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
এইচটিএমএল লিস্ট কি? – What is HTML List : আনঅর্ডারড লিস্ট বা বুলেটেড লিস্ট কাকে বলে?
তথ্যাবলীকে বিভিন্ন সিম্বল বা বুলেট ব্যবহার করে উপস্থাপনের জন্য যে পদ্ধতির লিস্ট তৈরি করা হয় তাকে আনঅর্ডারড লিস্ট বা বুলেটেড লিস্ট বলে। এটি একটি ব্লক লেভেল এলিমেনট।
আনঅর্ডারড লিস্ট বা বুলেটেড লিস্ট উপস্থাপন করা হয় <ul> … </ul> ট্যাগ দিয়ে এবং প্রতিটি লিস্ট আইটেম উপস্থাপন করা হয় <li> … </li> ট্যাগ দিয়ে যেগুলো <ul> ও </ul> ট্যাগ এর মাঝে অবস্থান করে।
সিএসএস list-style-type প্রোপার্টি ব্যবহার করে আন-অর্ডার লিস্টে বিভিন্ন ধরনের চিহ্ন প্রদর্শন করা যায়।
সিএসএস list-style-type প্রোপার্টি ব্যবহার করে আন-অর্ডার লিস্টের বিভিন্ন মান বা value এর জন্য কিরকম চিহ্ন প্রদর্শিত হবে তা নিছে দেখুন –
circle – এই মানের জন্য লিস্টের আইটেম গুলো চক্র বা circle আকারে প্রদর্শিত হয়।
disc – এই মানের জন্য লিস্টের আইটেম গুলো বুলেট অর্থাৎ বৃত্ত আকারে প্রদর্শিত হয়। এই টা সিএসএস list-style-type প্রোপার্টির default মান।
square – এই মানের জন্য লিস্টের আইটেম গুলো বর্গাকার হয়ে প্রদর্শিত হয়।
none – এই মানের জন্য কোন ছিনহ প্রদর্শিত হয় না।
লিস্ট আইটেম গুলো Disc ছিনহ দিয়ে প্রদর্শন করতে হলে list-style-type এট্রিবিউটের মান নির্ধারণ করতে হবে “disc”, নিচে একটি উদাহরণ দেখুন।
উদাহরণ
<ul style=”list-style-type:disc”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
লিস্ট আইটেম গুলো Circle ছিনহ দিয়ে প্রদর্শন করতে হলে list-style-type এট্রিবিউটের মান নির্ধারণ করতে হবে “circle”, নিচে একটি উদাহরণ দেখুন।
এইচটিএমএল লিস্ট কি?
উদাহরণ
<ul style=”list-style-type:circle”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
লিস্ট আইটেম গুলো Square ছিনহ দিয়ে প্রদর্শন করতে হলে list-style-type এট্রিবিউটের মান নির্ধারণ করতে হবে “square”, নিচে একটি উদাহরণ দেখুন।
উদাহরণ
<ul style=”list-style-type:square”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
লিস্ট আইটেম গুলো যদি কোন ছিনহ ছাড়া প্রদর্শন করতে চান, তবে list-style-type এট্রিবিউটের মান নির্ধারণ করতে হবে “none”, নিচে একটি উদাহরণ দেখুন।
উদাহরণ
<ul style=”list-style-type:none”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
ডেফিনেশন লিস্ট বা বর্ণনামূলক লিস্ট – What is HTML List
ডেফিনেশন বা বর্ণনামূলক লিস্ট হল এমন এক প্রকার লিস্ট যার প্রতিটি লিস্ট আইটেম এর সাথে একটি করে সংক্ষিপ্ত বিবরণ বা ডেফিনেশন থাকে। এটি একটি ব্লক লেভেল এলিমেনট।
ওয়েব পেজে ডেফিনেশন লিস্ট বা বর্ণনামূলক লিস্ট উপস্থাপন করা হয় <dl>…</dl> ট্যাগ দিয়ে। প্রতিটি লিস্ট আইটেম উপস্থাপন করা হয়<dt>…</dt> ট্যাগ দিয়ে যেগুলো <dl> ও </dl> ট্যাগ এর মাঝে অবস্থান করে। প্রতিটি লিস্ট আইটেম এর সংক্ষিপ্ত বিবরণ বা ডেফিনেশন ঐ লিস্ট আইটেম টির পরে <dd> ও </dd> ট্যাগ এর মাধ্যমে লেখা হয়।
উদাহরণ
<dl>
<dt>Coffee</dt>
<dd> – black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
নেস্টেড বা Nested লিস্ট
এইচটিএমএল লিস্টের মধ্যে পূনরায় লিস্ট তৈরি করা যায়, মানে কোন একটি লিস্ট আইটেমের জায়গায় আমরা আবার একটি লিস্ট তৈরি করতে পারি। অর্থাৎ কোন লিস্টের ভেতরে আবার লিস্ট তৈরি করতে পারি। নিচে একটি উদাহরণের মাদ্ধমে বিষয়টি দেখুন।
উদাহরণ
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
নোট – কোন এইচটিএমএল লিস্টের মধ্যে যেকোন এইচটিএমএল এলিমেন্ট, যেমন – কোন নতুন লিস্ট, ছবি, প্যারাগ্রাফ, লিংক ইত্যাদি। রাখা যেতে পারে।
আনুভূমিক বা Horizontal লিস্ট
সিএসএস স্টাইল কোড ব্যবহার করে, লিস্ট এলিমেন্তকে বিভিন্ন স্থানে ব্যবহার করা যায়। ওয়েব পেজের মেনুবার তৈরি তার অন্যতম একটি উদাহরণ। লিস্টকে ব্যবহার করে খুব সহজেই কোন আনুভূমিক বা Horizontal এবং উলম্ব বা Vertical মেনুবার তৈরি করা যায়। নিচে একটি উদাহরণ দেখুন, যেখানে সিএসএস ব্যবহার করে একটি মেনু বার তৈরি করা হয়েছে।
কি ভাবে html comment section তৈরী করতে হয়? আমরা যারা Facebook ব্যবহার করি সবারই Comment সম্পর্কে ভাল জানেন। তবে Facebook Comment আর এইচটিএমএল Comment এক জিনিস নয়। Facebook Comment ব্রাউজারে দেখা যায়। কিন্তু এইচটিএমএল কমেন্ট ব্রাউজারে দেখা যায় না। এইচটিএমএল কমেন্ট বলতে মুলত কোড এডিটরের কমেন্টকে বুঝানো হয়। পূর্ণাঙ্গ পেজ বানাতে গিয়ে আমাদেরকে হাজার হাজার লাইন কোড করতে হয়। কোথায় কি বিষয়ে বা কোন্ সেকশনের কোড করা হয়েছে তা সনাক্ত করার জন্য আমরা কিছু কমেন্ট করে রাখি। পরবর্তিতে যখনই কোন বিশেষ একটি সেকশনের কোড সম্পাদন করার প্রয়োজন হয়, তখন আমাদেরকে সেই সেকশনের কোড খুঁজতে গিয়ে বিড়ম্বনায় পড়তে হয় না। অতি সহজে অল্প সময়ে কমেন্ট দেখে আমরা সেই সেকশন খুঁজে নিতে পারি। তাছাড়া অনেক সময় আমাদেকে গ্রুপ করে ওয়েবসাইট বানাতে হয়। কেউ ডিজানের কাজ করলে অন্য কেউ হয়তো ডেভেলপমেন্টের কাজ করে। তখন ডিজাইনার যে কোড করেছে তা ডেভেলপার এই কমেন্টের সাহায্যে কোড গুলোর সেকশন সহজে খুঁজে নিতে পারে। কমেন্ট ব্রাউজারে দেখা যায় না। কমেন্ট শুধুমাত্র ডিজাইনার আর ডেভেলপার এর সুবিধার জন্য করা হয়।
কমেন্ট করার নিয়ম ভিন্ন ভিন্ন ভাষায় ভিন্ন ভিন্ন হতে হতে পারে। এইচটিএলে এক নিয়ম তো সিএসএসে অন্য নিয়ম। নিয়ম যেটাই হোক এটা ছোট্ট একটি সিনট্যাক্স মাত্র। এইচটিএমএল এর কমেন্ট সিনট্যাক্স নিয়ম হচ্ছে শুধু এইটুকু <!– Comments –> এর ভিতরে আপনি যাই লিখেন তার সবই হচ্ছে কমেন্টস। এখানে একটা বিষয় খিয়াল করে দেখুন। এখানে ওপেনিং ট্যাগ এর ভিতরে বিস্ময়বোধক চিহ্ন (!) একাধিক বিয়োগ চিহ্ন এর পরে “আপনার কমেন্টস” এর পরে আবার একাধিক বিয়োগ চিহ্ন। কিন্তু এর কোন ক্লোজিং ট্যাগ নেই। হ্যাঁ, কমেন্টের জন্য ক্লোজিং ট্যাগের প্রয়োজন নেই। তবে কিছু কিছু সময় আমাদেরকে এমন পরিস্থিতির সম্মুখীন হতে হয় যখন আমরা কোন একটা সেকশনের কোড লিখে সম্পূর্ণ করে ফেলি কিন্তু যে কোন কারণে আপাতত সেই কোডের ফলাফল ব্রাউজারে দেখাতে চাই না। পরে হয়তো দেখাতে হবে। এমন পরিস্থিতিতে সম্পূর্ণ কোডকে কমেন্ট করে রাখতে হয়। তো এমন অবস্থায় অনেক লাইনের কমেন্ট কিভাবে করা যায় তার নিয়ম উদাহরণে দেখিয়েছি।
HTML Comments কোড শেখার উপায় উদাহরণ
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title> HTML Comments </title>
</head>
<body>
<h2>This Headline Is Out Of Comment.</h2>
<!– This Is a Comment –>
<!–
<h3>This Headline Is Inside Of Comment.</h3>
<section>
<p>
এখানে একটা বিষয় খিয়াল করে দেখুন। এখানে ওপেনিং ট্যাগ এর ভিতরে বিস্ময়বোধক চিহ্ন (!) একাধিক বিয়োগ চিহ্ন এর পরে “আপনার কমেন্টস” এর পরে আবার একাধিক বিয়োগ চিহ্ন। কিন্তু এর কোন ক্লোজিং ট্যাগ নেই। হ্যাঁ, কমেন্টের জন্য ক্লোজিং ট্যাগের প্রয়োজন নেই। তবে কিছু কিছু সময় আমাদেরকে এমন পরিস্থিতির সম্মুখীন হতে হয় যখন আমরা কোন একটা সেকশনের কোড লিখে সম্পূর্ণ করে ফেলি কিন্তু যে কোন কারণে আপাতত সেই কোডের ফলাফল ব্রাউজারে দেখাতে চাই না। পরে হয়তো দেখাতে হবে। এমন পরিস্থিতিতে সম্পূর্ণ কোডকে কমেন্ট করে রাখতে হয়। তো এমন অবস্থায় অনেক লাইনের কমেন্ট কিভাবে করা যায় তার নিয়ম উদাহরণে দেখিয়েছি।
</p>
</section>
–>
<p> ইহা যেহেতু কমেন্টের বাইরে আছে সেহেতু ব্রাউজারে ইহা প্রদর্শিত হবে। </p>
</body>
</html>
ব্রাউজারে রান করলে দেখা যায় এইচটিএমএল কমেন্টস (HTML Comments) কৃত অংশ ব্রাউজারে দেখা যায় না।
যখন আপনি সাবমিট বাটনে ক্লিক করবেন, তখন সার্ভার আপনার ইনপুট গুলোকে “action_page.php” ফাইলের মাধ্যমে প্রক্রিয়াজাত করে এবং ফলাফল ফেরত দেয়।
ফলাফল
বিঃদ্রঃ এই টিউটোরিয়ালটি আপনাকে শিখাবে না কিভাবে সার্ভার ফাইল প্রক্রিয়া করে। তা শিখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।
এইচটিএমএল ফর্ম HTML Form এইচটিএমএল <form> এলিমেন্ট
ব্যবহারকারীর তথ্য সংগ্রহ করার জন্য এইচটিএমএল ফর্ম ব্যবহৃত হয়।
একটি এইচটিএমএল ফর্মকে <form> এলিমেন্ট দিয়ে ডিফাইন করা হয়।
উদাহরণ
<form>
…
ফর্ম এলিমেন্ট
…
</form>
ফর্ম এলিমেন্ট বিভিন্ন ধরনের হয়ে থাকে। যেমনঃ ইনপুট এলিমেন্ট, চেকবক্স, রেডিও বাটন, সাবমিট বাটন ইত্যাদি।
ফর্ম <input> এলিমেন্ট
ফর্ম এলিমেন্টের মধ্যে সবচেয়ে গুরুত্বপূর্ণ এবং বহুল ব্যবহৃত হচ্ছে <input> এলিমেন্ট। আমরা <input> এলিমেন্টে type এট্রিবিউট ব্যবহারের মাধ্যমে <input> এলিমেন্টকে বিভিন্ন প্রয়োজনে ব্যবহার করতে পারি।
এই টিউটোরিয়ালে আমরা type এট্রিবিউটে নিম্নের তিনটি ভ্যালুর ব্যবহার দেখবোঃ
টাইপ
বর্ণনা
text
সাধারণ টেক্সট ইনপুট ডিফাইন করে
radio
রেডিও বাটন ইনপুট ডিফাইন করে
submit
ফর্ম সার্ভারে প্রেরনের জন্য ডিফাইন করা হয়
ফর্ম text টাইপ ইনপুট
এক লাইনের একটি বক্সের মাধ্যমে তথ্য সংগ্রহের জন্য <input type=”text”> ডিফাইন করতে হয়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>টেক্সট টাইপ ইনপুট</title>
</head>
<body>
<form>
প্রথম নামঃ <input type=”text” name=”firstname”><br>
যখন আপনি সাবমিট বাটনে ক্লিক করবেন, তখন সার্ভার আপনার ইনপুট গুলোকে “action_page.php” ফাইলের মাধ্যমে প্রক্রিয়াজাত করে এবং ফলাফল ফেরত দেয়।
ফলাফল
বিঃদ্রঃ এই টিউটোরিয়ালটি আপনাকে শিখাবে না কিভাবে সার্ভার ফাইল প্রক্রিয়া করে। তা শিখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।
ফর্ম action এট্রিবিউট
সাবমিট বাটনে ক্লিক করার পর action এট্রিবিউটটি তার কার্য সম্পাদন করে। সাবমিট বাটনে ক্লিকের মাধ্যমে ওয়েব পেজ থেকে ফর্মের তথ্য সার্ভারে সাবমিট করা হয়।
নিম্নে একটি ব্যবহার দেখানো হলোঃ
<form action=”action_page.php”>
ফর্ম method এট্রিবিউট
ফর্ম সাবমিটের জন্য এইচটিটিপি(HTTP) মেথড GET অথবা POST ব্যবহার হয়। নিম্নে ফর্মে মেথড এট্রিবিউট ডিফাইন করা হলঃ
<form action=”action_page.php” method=”get”>
অথবাঃ
<form action=”action_page.php” method=”post”>
কখন get ব্যবহার করবো?
ডিফল্টভাবে আপনি get মেথড ব্যবহার করতে পারেন। তবে ফর্মের তথ্য যদি সেন্সিটিভ(ইউজারের নাম অথবা পাসওয়ার্ড) হয় সেক্ষেত্রে get মেথড ব্যবহার করা উচিত না। কারণ আপনি যখন get মেথোড ব্যবহার করে ফর্মের তথ্য সার্ভারে পাঠান সেক্ষেত্রে আপনার প্রেরিত তথ্যটি নিম্নের মত পেজের এড্রেসের সাথে দেখা যাবেঃ
আপনার ফর্মের তথ্য যদি সেন্সিটিভ হয় সেক্ষেত্রে অবশ্যই আপনার post মেথড ব্যবহার করা উচিত। কারণ আপনি যখন get মেথোড ব্যবহার করে ফর্মের তথ্য সার্ভারে পাঠান সেক্ষেত্রে আপনার প্রেরিত তথ্যটি নিম্নের মত পেজের এড্রেসের সাথে দেখা যাবে নাঃ
http://action_page.php
ফর্ম name এট্রিবিউট
প্রতিটি ইনপুট ফিল্ডের ভ্যালু সার্ভারে সঠিক ভাবে সাবমিট করার জন্য অবশ্যই name এট্রিবিউটটি সঠিক ভাবে ব্যবহার করতে হবে। কারণ name এট্রিবিউট ব্যাতিত সার্ভার আপনার প্রেরিত তথ্য গ্রহন করতে পারবে না।
নিম্নের উদাহরণে ফর্ম সাবমিট করার পর “প্রথম নাম” ইনপুট ফিল্ডের তথ্য সার্ভার গ্রহন করবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>ফর্ম name এট্রিবিউট</title>
</head>
<body>
<form action=”action_page.php”>
প্রথম নামঃ
<input type=”text” name=”firstname” value=”শরীফ”>
<br>
শেষের নামঃ
<input type=”text” value=”গাজী”>
<br><br>
<input type=”submit” value=”সাবমিট”>
</form>
</body>
</html>
লক্ষ্য করুনঃ “শেষের নাম” এই ইনপুট এলিমেন্টের ভ্যালু সার্ভারে সাবমিট হবে না, কারণ ইনপুট এলিমেন্টে কোনো name এট্রিবিউট নেই।
ফলাফল
বিঃদ্রঃ এই টিউটোরিয়ালটি আপনাকে শিখাবে না কিভাবে সার্ভার ফাইল প্রক্রিয়া করে। তা শিখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।
ফর্ম <fieldset> এর মাধ্যমে ফর্মের তথ্য বিন্যাস
ফর্মের তথ্যকে বিভিন্ন ভাগে বিভক্ত করার জন্য <fieldset> এলিমেন্ট ব্যবহার করা হয় এবং <fieldset> এলিমেন্টের মধ্যে <legend> এলিমেন্ট ব্যবহারের মাধ্যমে একটি ক্যাপশন বা শিরোনাম নির্ধারণ করা যায়
CSS কি? Cascading Style Sheet এর সংক্ষিপ্ত রূপ হচ্ছে CSS (আমরা CSS কিভাবে কাজ করে? বা তার সি.এস.এস তা বিস্তারিত জানবো)। সহজ ভাষায় ওয়েব পেজের বিভিন্ন উপাদানের গঠন, আকার, আকৃতি, অবস্থান, রং, গতিশীলতা ইত্যাদি নির্ধারণের সহজ কৌশল হচ্ছে CSS । ওয়েব ডিজাইন করতে গেলে Css সম্পর্কে সঠিক ধারনা থাকা জরুরি। CSS কী? CSS এর কাজ কি? Css এমন একটি ভাষা যা এইচটিএমএল ডকুমেন্টের স্টাইল বর্ণনা করে। কারণ HTML হলো ওয়েব পেজের গঠন। ওয়েব পেজকে সুন্দর ও আকর্ষনীয় করার জন্য Css ব্যবহার করা হয়। যেমন একটি বিল্ডিং তৈরি করার পর রং করতে হয় তেমনি ওয়েব পেজ ডিজাইন করার পর বিভিন্ন ডিজাইন দিতে হয়। আর এই ডিজাইন দেওয়ার জন্য ব্যবহার করা হয় Css (cascading style sheets)। সিএসএস বর্ণনা করে যে কীভাবে এইচটিএমএল উপাদানগুলি স্ক্রিন, বা অন্য মিডিয়ায় প্রদর্শিত হবে। Html এবং সিএসএস css সবসময় একসাথে ব্যবহৃত হয়।
কেন CSS ব্যবহার করবো? Web design CSS কেন? এত গুরুপ্ত দিতে হয়। HTML, CSS, JavaScript এবং React সম্পর্কে জানি। এগুলিকে কাজে লাগানোর সহজ উপায় কী?
আসলে সিএসএস ও একটি ল্যাঙ্গুয়েজে Html এর মতোই Html এ অনেকরকমের ট্যাগ ব্যবহার করা হয়, যেমন <h1> header tag ,<p> paragraph tag, <img> image tag এই সমস্ত ট্যাগ গুলিকে আমাদের ব্রাউজারে আরো সুন্দর ভাবে দেখানোর জন্য সি এস এস ব্যবহার করা হয়। সংক্ষেপে, এটি ওয়েবসাইটের এইচটিএমএল উপাদানগুলিকে (Element) নিয়ন্ত্রণ করে।
সিএসএস এর কাজ হলো ওয়েব পেজটিকে আকর্ষিত করা বা ডিজাইন বা Layout তৈরী করা। HTML এবং CSS এই দুটি দিয়েই আপনি পুরো ওয়েবসাইট এর ডিসাইন করতে পারবেন। এক কথায় একটি সুন্দর ওয়েবসাইট ডিসাইন করতে হলে আপনাকে এই CSS Language খুব ভালো করে শিখতে হবে।
CSS এর কাজ কি?
সিএসএস এর সাহায্যে আপনি HTML পেজ এর টেক্সট গুলিকে নতুন নতুন রং দিতে পারবেন। এছাড়াও যেমন কোনো টেক্সট এর ব্যাকগ্রাউন্ড কালার চেঞ্জ করা পুরো ওয়েবপেজ এর কালার চেঞ্জ করতে পারবেন টেক্সট সাইজ বড় ছোট করা ও আকার বদলাতে এবং আপনার ওয়েব পেজ এর কোথায় কি আপনি রাখতে চান কোন জায়গায় সেটি আপনি ফিক্স করতে পারবেন এই সিএসএস এর সাহায্যে।আপনি অ্যানিমেশন তৈরী করতে পারবেন। আপনি যদি একজন ওয়েব ডিসাইনার হতে চান তাহলে আপনাকে সিএসএস খুব ভালোভাবে শিখতেই হবে।
আমি WEB Development এর জন্য PHP শিখতে চাই। এর পরিবর্তে অন্য কিছু কি শেখা ভালো হবে?
CSS এর সুবিধা
সকল ব্রাউজার এ ভাষাটি বুঝতে পারে তাই এটি ব্যবহার করলে ওয়েব পেজটি লোড করতে কোনো জামেলা হয় না। ওয়েব পেজকে খুব সহজেই ব্যবহার কারির কাছে প্রদর্শন করে।
Note: আপনারা W3Schools গিয়ে CSS কী? CSS এর কাজ কি?কোডিং শিখতে পারেন।
HTML Contact Form UI Design. একটি ওয়েব সাইটের জন্য Contact Form খুবই জরুরি। HTML ব্যবহার করে Contact Form UI তৈরি করা যায়। HTML Contact Form তৈরি করার জন্যি HTML এর কিছু ট্যাগ আছে। ট্যাগ গুলো ব্যবহার করে খুব সহজেই HTML Contact Form তৈরি করার যায়। How to create HTML Contact Form নিয়মিত ওয়েব ডিজাইন এন্ড ডেভেলপমেন্ট টিপস পেতে Kazi IT Zone সঙ্গেই থাকুন।
Contact Form UI তৈরি করার জন্য HTML এর যে ট্যাগ গুলো ব্যবহার করা হয় তা নিম্নে দেওয়া হলোঃ
