What is html? Important html tag for beginner.

html এর প্রাথমিক ধারণা 

html হচ্ছে ওয়েব ডেভেলপমেন্ট করার জন্য যত গুলো ভাষা বা টেকনোলজি রয়েছে তাদের সবথেকে মৌলিক বিষয়। এর পুরো নাম হচ্ছে Hyper text markup language. এর নামই এর সম্পর্কে আপনাদের কিছু ধারণা দেয়। এটি কোনো প্রোগ্রামিং ভাষা নয়। এটি শ্রেফ একটি টেক্সট বেসড বর্নণামূলক ভাষা। তার মানে এটি আপনার সাইটের কনটেন্ট বা উপাদানগুলো বর্নণা বা নির্দিষ্টকরণ করবে বা শ্রেণীবিভক্ত করবে বা মার্ক করবে। যার উপর ভিত্তি করে ব্রাউজার সেগুলোকে প্রদর্শন করবে। যেহেতু আপনি ইতিমধ্যেই জেনে গেছেন এটি হচ্ছে হাইপার টেক্সট মার্ক আপ ভাষা তাই এটি প্লেইন টেক্সট থেকে সামান্য একটু আলাদা। এই টেক্সট এর মধ্যে যেমন সাধারণ টেক্সট থাকতে পারে তেমনি বিভিন্ন স্থিরচিত্র, ভিডিও, ফর্ম, অডিও থাকতে পারে। পুরো html ভাষাটা কিছু ইলেমেন্ট এর সমন্বয়ে গঠিত। এই ইলেমেন্ট গুলো <> এর ভিতর লিখলে সেগুলোকে ট্যাগ ও বলে। এই ট্যাগ বা ইলেমেন্টগুলোই আপনার সাইটের কনটেন্ট বর্নণা করে। 

What is html?

Html এর প্র‍্যাকটিকাল এক্সাম্পলের আগে আমরা একটা গুরুত্বপূর্ণ টার্ম এর সাথে পরিচিত হই।  ওয়েব এ একটা কথা বেশ প্রচলিত যে একটা ওয়েব পেইজ মূলত তিন স্তরবিশিষ্ট। এই স্তরগুলো হচ্ছে html,css, Javascript.  (যখন ভাল কোনো ফার্ম বা মার্কেটে কাজ করবেন তখন এই রুলসের মতো করে কাজ করতে হবে) এবার একটা উদাহরণ দিয়ে বিষয়টা ক্লিয়ার করা যাক। একটি ওয়েব পেজকে একটা বার্গার এর সাথে তুলনা করা যায়। এখন এই বার্গারে সাধারণত তিনটা পার্ট থাকে। একটা হলো রুটি, গোশত, বিভিন্ন সস, চিজ এসব। এখন আপনি যদি রুটি বাদ দিয়ে বার্গার বানাতে চান তাহলে কি হবে?? তাহলে গোশত এবং চিজ দেবেন কার উপর। আবার সস, চিজ ছাড়াও কিন্ত বার্গার হয়। তাহলে এখন ভাবুন বার্গারের রুটি হচ্ছে html, আর গোশত হচ্ছে css, আর সস চিজ হচ্ছে js. আর একটা উদাহরণ দেয়া যাক। ধরুন আপনি একটা চেয়ার বানাবেন তাহলে প্রথমে আপনার লাগবে কি?  নিশ্চয়ই কাঠ। হ্যা, কিন্ত কাঠের ও তো বিভিন্নতা রয়েছে।  চেয়ারের পা আর পাটাতন তো একধরণের কাঠ দিয়ে দিতে পারবেন না। কাঠগুলোকে  আপনার পছন্দসই চেয়ারে পরিণত করতে হলে এগুলোকে নির্দিষ্ট আকারে কাটতে হবে, পেরেক মারতে হবে, বার্নিশ করতে হবে। এরপর যদি আপনি চান আরো বেশি কিছু ফিচার অ্যাড করবেন তাহলে আপনি চাইলে এটাকে ফোল্ডেবল করতে পারেন(আরও  অনেক কিছু করতে পারেন)।  এবার এই উদাহরণের সাথে একটু ওয়েব পেজ কে মেলান। কি পাবেন,  বেসিক লেভেলে বিভিন্ন আকৃতির কাঠ(html),  কাঠ কাটা ও আকৃতি প্রদান এবং সংযুক্তি (css), অতিরিক্ত ফিচার (js).  এবার আসল কথায় ফিরে আসা যাক। Html এর ট্যাগ গুলোকে চাইলে বিভিন্ন ভাগে ভাগ করা যায় যেমন টেক্সট ফরম্যাটিং ট্যাগ, ফর্ম ট্যাগ, মাল্টিমিডিয়া ট্যাগ, বিবিধ ট্যাগ। (এগুলো নিয়ে পরে আরো বিশদ আলোচনা হবে)। এই ট্যাগ গুলো কিন্ত ব্রাউজারের জন্য একটা লিখিত নির্দেশ যেটা ব্রাউজারের কাছে টেক্সট আকারে প্রেরণ  করতে হয়। আগে থেকে কোন ট্যাগ কিরূপ ফলাফল প্রদান  করবে তা নির্দিষ্ট। ধরুন আপনি যেভাবে আপনার ওয়েবসাইটে একটি ছবি অ্যাড করবেন সেভাবে কিন্ত ফর্ম অ্যাড করতে পারবেন না। ফর্ম এর জন্য রয়েছে নির্দিষ্ট  ট্যাগ,  ছবির জন্য রয়েছে নির্দিষ্ট ট্যাগ।  এরকম প্রয়োজনভেদে আপনি শ'খানেক বা তার বেশি ট্যাগ আপনার ডকুমেন্ট এ ব্যবহার করতে  পারবেন। মনে রাখবেন পৃথিবীর কোন সাইট কিন্ত html ছাড়া তৈরী  হয়নি।  আজ এখানেই আমাদের html এর প্রাথমিক আলোচনা শেষ।  এরপর থেকে আলোচনা করা হবে কিভাবে html লিখবেন,  একটি পেজ বানাতে কি কি ট্যাগ জরুরি,  ট্যাগ সম্পর্কিত আলোচনা ইত্যাদি।  সে পর্যন্ত সাথে থাকবেন। 

Important html tag for beginner. 

একটি পূর্ণাঙ্গ ওয়েবসাইট  বানাতে কি কি html ট্যাগ সম্পর্কে জানতে হবে? 

এর  বৃহৎ কোন উত্তর দেয়ার দরকার নাই। নিচের কাজটা করুন।  আপনি নিজেই ভালোভাবে বুজে ফেলবেন যে অনেক ট্যাগের মধ্য থেকে আপনার কোনগুলো বেশি প্রয়োজন।  

1. যেকোন একটি পছন্দসই ওয়েবসাইট ব্রাইজারে ওপেন করুন।
2. পেজের ওপরে মাউসের রাইট বাটন ক্লিক করুন 
3. কতগুলো অপশন আসবে। এখান থেকে সেলেক্ট করুন view page source অপশনটা।  
4. এবার একটা পেজ আসবে যেটা html ইলেমেন্ট এ ভরপুর। ভয় পাবেন না। সব কিছু আপনার দরকার নাই। 
5. এখন ctrl+f চাপুন 
6. সার্চ দেয়ার অপশন আসবে। 
7.  এখানে <  টা লিখুন 

এভাবেই আপনি কোন ট্যাগগুলো প্রয়োজনীয় তা সহজে বুজতে পারবেন

Html কিছু ইলেমেন্ট এর সমন্বয়ে গঠিত।  এখন তাহলে ইলেমেন্ট কি? আপনার প্রয়োজনীয় কাজের জন্য যে নির্দিষ্ট কিওয়ার্ড বা শব্দ রয়েছে সেগুলোকে কিছু চিহ্নের সাহায্যে প্রকাশই হচ্ছে ইলেমেন্ট।  যদি আমরা একটা ইলেমেন্ট কে বিশ্লেষণ করি তাহলে মোট তিনটি অংশ পাই। ওপেনিং ট্যাগ/ স্টার্টিং ট্যাগ, কনটেন্ট,  ক্লোসিং ট্যাগ/ইন্ড ট্যাগ।  html এর ট্যাগগুলো জোড়ায় জোড়ায় ব্যবহৃত হয়। 

<h1>  আমি বাংলাদেশের নাগরিক </h1>

এখানে <h1> হচ্ছে ওপেনিং ট্যাগ,   </h1> হচ্ছে ক্লোজিং ট্যাগ আর আমি বাংলাদেশের নাগরিক হচ্ছে কনটেন্ট।  এই তিনটির সমন্বয়ে তৈরি হয় এক একটা ইলেমেন্ট।  প্রত্যেকটা ইলেমেন্ট এর কাজ নির্দিষ্ট।  ইলেমেন্ট এর কাজের সাথে ট্যাগগুলোর নাম হুবহু বা আংশিক মিলসম্পন্ন। যেমন পেজ এ একটি ফর্ম বা টেবিল যুক্ত করার ট্যাগ আপনি যেভাবে ভাবছেন ঠিক সেরকম ই।  যেমন <form>,  <table>.।  বিভিন্ন ইলেমেন্ট  বিবিন্ন বিষয়বস্তু  উপস্থাপন করলেও আপনাকে এগুলো সব একইভাবে লিখতে হবে।  সব html ট্যাগকেই একইভাবে লিখতে হয় যেমনঃ আপনি  হেডার,  প্যারাগ্রাফ  যাই যুক্ত করতে চান না কেন আপনাকে এর জন্য একটি সাধারণ নিয়ম অনুসরণ  করলেই হবে। যেমন এভাবে করতে পারেন।  যেহেতু প্রত্যেক ট্যাগ জোড়ার  জোড়ায় ব্যবহৃত হয় তাই আপনি প্রথমে  দুই জোড়া অ্যাংগেল  ব্রাকেট নিতে পারেন( দুটি অ্যাংগেল ব্রাকেট এর মধ্যে একটি ট্যাগ থাকে) এই দুই জোড়া অ্যাংগেল ব্রাকেট এর মধ্যে থাকবে দুটি ট্যাগ।  এখন মাঝখানে  আপনার যেরকম কন্টেন্ট দরকার বসিয়ে দিন। এখন সামান্য একটু কাজ করতে হবে তা হল প্রত্যেক জোড়া ট্যাগের শেষের ট্যাগের ট্যাগনেমের আগে একটি( /) ফরওয়ার্ড স্লাশ দিয়ে দিন। কাজ শেষ। এভাবে এখন আপনি যত খুশি তত ইলেমেন্ট  যুক্ত করুন আপনার পেজে।  এখন কোন ট্যাগ কি কাজে ব্যবহৃত হয় তা জানবেন কিভাবে। 

এর জন্য আপনি যেতে পারেন নিচের লিংকে 

https://www.w3schools.com/tags/default.asp

এখানে আপনি সব ট্যাগের একটা লিস্ট পাবেন। 

অথবা নিচের ট্যাগ গুলো প্রাকটিস করতে পারেন। 

প্রাথমিক আর্টিকেল  হওয়ার কারণে এখানে শুধু টেক্সট ফরম্যাটিং ট্যাগ গুলো দেয়া হল।

<h1> = পেজে একটি তুলনামূলক বড় হেডার যুক্ত করতে ব্যাবহার করা হয়। 

<p> = সাধারণ প্যারাগ্রাফ  যুক্ত করতে ব্যবহৃত হয়। 

<b> = লেখাকে বোল্ড করে 

<i> লেখাকে ইটালিক করে 

<small> তুলনামূলক  ছোট টেক্সট লেখার জন্য ব্যবহৃত হয়

<sup> = লেখার উপরে লেখার জন্য মানে  সূচকের মত লেখা লিখতে ব্যবহৃত হয়।

<sub> লেখার নিচে যেমন  রাসায়নিক  সংকেত লেখা হয়