একজন দক্ষ ফ্রিল্যান্সার গড়ার লক্ষে দেশে এই প্রথম জাগোরিক নিয়ে এসেছে বাংলা এইচটিএমএল টিউটোরিয়াল আর্টিকেল যার এই পর্বে থাকছে এইচটিএমএল সুপারস্ক্রিপ্ট সাবস্ক্রিপ্ট ও ফর্ম সম্পর্কে বিস্তারিত।
এটি হচ্ছে বাংলা এইচটিএমএল টিউটোরিয়াল Part-12 এরই ধারাবাহিকতায় আমরা HTML এর সম্পূর্ণ সিরিজ শেষ করার চেষ্টা করব। সকল পর্বের টিউটোরিয়াল এখানে ক্লিক করলে পেয়ে যাবেনঃ এইচটিএমএল টিউটোরিয়াল
এইচটিএমএল সুপারস্ক্রিপ্ট সাবস্ক্রিপ্ট ও ফর্ম (Part-12)
এইচটিএমএল সুপারস্ক্রিপ্ট,সাবস্ক্রিপ্ট,স্ট্রাইকথ্রো:
<p>This text is <sup>superscripted!</sup></p>প্রদর্শন: Superscript:
This text is superscripted!
HTML – Exponents
অংকে exponential ব্যবহার করা জন্য <sup> tag ব্যবহার করতে হয়।
1.2<sup>3</sup> = 82.14<sup>x</sup>প্রদর্শন: Exponents:
23 = 8
14x
HTML – ফুটনোট:
উপন্যাস বা প্রবন্ধে দেখা যায় কোন লেখার reference দেয়ার জন্য <sup> tag ব্যবহার হয় যা ফুটনোটকে নির্দেশ করে।
1.<p>"It was a lover's tryst<sup>1</sup>."2.<hr />3.1. Secret meeting between loversপ্রদর্শন: Footnote
“It was a lover’s tryst1.”
1. Secret meeting between lovers
HTML -Subscript
1.<p>This text is <sub>subscripted!</sub></p>প্রদর্শন:
This text is subscripted!
1.<p>H<sub>2</sub>0 - Water2.<p>O<sub>2</sub> - Oxygen3.<p>CO<sub>2</sub> - Carbon Dioxideপ্রদর্শন:
O2 – Oxygen
CO2 – Carbon Dioxide
HTML – Strikethrough
<del> tag এর মাধ্যমে কোন লেখাকে ক্রস দেওয়া যায়।
1.<p>This text is <del>scratched</del> out!</p>প্রদর্শন: Strikethrough
This text is scratched out!
HTML – Check Off Task:
1.<ol>2.<li>Clean my room</li>3.<li><del>Cook Dinner</del></li>4.<li><del>Wash Dishes</del></li>5.</ol>প্রদর্শন:
- Clean my room
Cook DinnerWash Dishes
- আরও পড়ুনঃ বাংলা এইচটিএমএল টিউটোরিয়াল (Introduction: Part-1)
- আরও পড়ুনঃ এইচটিএমএল ট্যাগ ও এট্রিবিউট (Tag & Attribute: Part-2)
- আরও পড়ুনঃ এইচটিএমএল প্যারাগ্রাফ ও হেডিং (P tag & Heading: Part-3)
- আরও পড়ুনঃ এইচটিএমএল লিস্ট ও ফন্ট (HTML List & Font: Part-4)
- আরও পড়ুনঃ এইচটিএমএল লিংক ও এনটাইটিজ (Link & Entities: Part-5)
এইচটিএমএল ফর্ম টিউটোরিয়াল ( HTML Form Tutorial ):
সাইটের ভিজিটরদের তথ্য নেয়ার জন্য ফর্ম ব্যবহার হয়। এজন্য এইচটিএমএল এ <form></form> এলিমেন্ট আছে এবং এর ভিতর নানান ধরনের ফর্ম সংক্রান্ত এলিমেন্ট ব্যবহার করে চমৎকার ফর্ম বানানো যায়।
তবে ফর্ম পুরন করে ইউজার যখন সাবমিট করবে তখন সার্ভার সাইড ল্যাংগুয়েজ যেমন পিএইচপি, পাইথন, এএসপি ইত্যাদি ব্যবহার করে প্রসেস করতে হয় এমনকি প্রসেসের পর ডেটাবেস ব্যবহার করে সেভ করেও রাখা যায়। যাইহোক এইচটিএমএল form এলিমেন্ট দিয়ে শুধু ফর্মটি তৈরী করা হয়। একটা সাধারন ফর্ম
1.<form action="processor.php" method="post">2.<input type="text" name="first_name" />3.<input type="text" name="last_name" />4.<input type="submit" name="submit" value="Submit" />5.</form>form এর একটা আবশ্যিক এট্রিবিউট হচ্ছে action. এখানে ফর্মটি সাবমিট করলে কোন ফাইলে ফর্মের ডেটাগুলি প্রসেস করতে নিয়ে যাবে সেই ফাইলটিতে নিয়ে যায়।
আর method এট্রিবিউট দিয়ে কোন পদ্ধতিতে ডেটা যাবে সেটা বলে দেয়া হয় যেমন আমি দিয়েছি post. post মেথডে ডেটা পাঠালে ডেটা লুকানো থাকে তবে যেখানে ডেটা লুকানোর দরকার নেই সেখানে get নামের অপর মেথডটি ব্যবহার করা হয় (method=”get”)।
যেমন Google search এ get method ব্যবহার করেছে কারন এখানে ডেটা লুকানোর পরিবর্তে দেখানোই উপকার। google এ কোন কিছু সার্চ দিলেই ব্রাউজারের address বারে দেখবেন যেটা লিখে সার্চ দিয়েছেন সেগুলি দেখাচ্ছে। যাইহোক এগুলি পিএইচপিতে বিস্তারিত আলোচনা আছে।
এইচটিএমএল সুপারস্ক্রিপ্ট সাবস্ক্রিপ্ট ও ফর্ম –
এরপর input এলিমেন্ট দিয়ে দুটি text ফিল্ড তৈরী করেছি যেখানে ইউজার তার নাম লিখতে পারবে। input ট্যাগের type এট্রিবিউটটি দিয়ে ঠিক করা যায় ফিল্ডটি কোন ধরনের ডেটা নিবে।
type=”text” দিলে টেক্সট ফিল্ড হবে এবং ব্রাউজারে টেক্সট লেখার মত একটি ফিল্ড দেখাবে। আবার type=”submit” দিয়ে উপরে দেখুন সাবমিট বাটন বানিয়েছি।
input এর name এট্রিবিউট দিয়ে ফিল্ডটির নাম দেয়া যায়। প্রত্যেকটি ফিল্ডের name এট্রিবিউটের মান ভিন্ন দিতে হয় কেননা এই মান ধরেই পিএইচপি ডেটা প্রসেস করে তাই একই নামের দুটি ফিল্ড এর ডেটা দুরকম ভাববে।
সাবমিট বাটনের জন্য value এট্রিবিউট দিয়ে যে মানটি দিবেন সেটা বাটনের উপর লেখা হিসেবে দেখাবে।
id, style, class ইত্যাদি যেকোন গ্লোবাল এট্রিবিউট form এলিমেন্টে ব্যবহার করতে পারেন।
চেকবক্স
ইউজারকে চেকবক্স এবং রেডিও বাটন দিয়ে টিকমার্ক সংক্রান্ত ফর্ম ফিল্ড তৈরী করে দিতে পারেন যেমন ইউজার কোন কোন বিষয় পড়েছে সেটার জন্য ফর্ম দিতে চাই তাহলে
1.<input type="checkbox" name="prob" value="1">probability2.<input type="checkbox" name="fotran" value="1">fortran3.<input type="checkbox" name="o_stat" value="1">order statisticsপ্রদর্শন
probability fortran order statistics
ফর্ম সংক্রান্ত যেকোন এলিমেন্ট সব <form></form> এর ভিতরে থাকতে হবে। উপরের উদাহরনের সময় বাচানোর জন্য যেভাবে দিয়েছি এভাবে ফর্ম তৈরী করলে ব্রাউজারে দেখাবে ঠিকই কিন্তু কাজ করবেনা।
উক্ত বিষয় সম্পর্কে কিছু জানার থাকলে কমেন্ট করতে পারেন।
আমাদের সাথে ইউটিউব চ্যানেলে যুক্ত হতে এখানে ক্লিক করুন এবং আমাদের সাথে ফেইজবুক পেইজে যুক্ত হতে এখানে ক্লিক করুন। গুরুত্বপূর্ণ আপডেট ও তথ্য পেতে আমাদের ওয়েবসাইটে ভিজিট করুন।
