By 
কেমন আছেন সবাই? এর আগের পর্বে আমরা আলোচনা করেছি কিভাবে HTML ফাইল কিভাবে বানাতে হয়। আজ আমরা আলোচনা করবো কিভাবে HTML ফাইলে কিভাবে লেখা যায়। অন্যান্য ফাইল এর মত এইচটিএমএল এ সরাসরি লিখা যায় না । এইচটিএমএল এ টেক্সট এডিটর ফাইল এর মাধ্যমে লিখতে হয়।
এইচটিএমএল ফাইল এর উপর ডাবল ক্লিক করলে ফাইল টি ব্রাউজারে ওপেন হবে কিন্তু সেটা ব্ল্যাংক থাকবে। এরপর এইচটিএমএল ফাইল এর উপর কারসার রেখে মাউসের ডান বাটন ক্লিক করবেন তারপর open with notepad++ এ ক্লিক করবেন। এতে করে ওপেন হয়ে যাবে নোট প্যাড++। এবার আমরা ব্রাউসার এ যা করতে বা লিখতে ছাই সেটা এখানে লিখব। তবে লেখার ক্ষেত্রে কিছু নিয়ম আছে সেটা এখন আমরা পর্যায়ক্রমে আলোচনা করবো।
২য় ছবিতে দেখা যাচ্ছে নোটপ্যাড ওপেন হয়েছে। কিন্তু স্ক্রীন এ একটা লেখা দেখা যাচ্ছে। <! DOCUMENT.html > আপনাদের মনে নিশ্চয় ই প্রশ্ন এসেছে এই এখার অরথ টা কি ? এই ডকুমেন্টটি কোন ধরনের তা ব্রাউজারকে বোঝানোর জন্য দেয়া হয়। এইচটিএমএল এর কোন ভার্সন ব্যবহার করবেন সেটার উপর ভিত্তি করেই এই ডিক্লেয়ারেশন টি দেয়া হয়।
এটা হচ্ছে ট্রানজিশনাল অর্থ্যাৎ এইচটিএমএল এর সকল কিছু এই্ ডকুমেন্টে লেখা যাবে সাথে সাথে deprecated এলিমেন্টগুলিও ব্যবহার করা যাবে যেমন font। ফ্রেমসেট ব্যবহার করা যাবেনা।
এখন HTML5 আসার পর HTML 5 এর ডিক্লেয়ারেশন দেয়া হয় <! DOCUMENT.html > এটা। অন্য ফরমেট গুলো আমরা এখানে আলোচনা করছি না , কেননা আমদের টিউটোরিয়াল টা HTML 5 এর। তাই আমরা এটা নিয়েই আলোচনা করবো।
এখন কথা হচ্ছে, আমরা তো জানি যে নোট প্যাড এ লিখলে টা ব্রাউজার এ দেখা যাবে । হ্যাঁ অবশ্যই দেখা যাবে তবে সেই eliment গুলো অবশ্যই লিখতে হবে tag এর ভেতর। তাহলেই লেখাগুলো ব্রাউজারে দেখা যাবে।
তবে তার আগে চলুন আমরা element এবংtag কি সেটা জেনে নেই;
Element: ইতিমধ্যে আমরা tag সম্পর্কে জেনেছি। এখন কথা হচ্ছে element কি জিনিষ? একটা start tag (যেমন <p>) এবং end tag (যেমন </p>) এর মাঝে যা থাকে তা সহ পুরোটি একটা এলিমেন্ট। একটা এলিমেন্টের ভিতর ট্যাগের মতই এক বা একাধিক এলিমেন্ট থাকতে পারে বা থাকে (এটাকে nested এলিমেন্ট বলে)। নিচের উদাহরনটি দেখুনএখানে <html> </html> এর ভিতর যত কিছু আছে সব নিয়ে এটা একটা html এলিমেন্ট এরুপ body একটা এলিমেন্ট। একইভাবে বাকিগুলিও এক একটি এলিমেন্ট।
ELEMENT আবার দুই ধরনের হয়।
১। ব্লক লেভেল ঃ সহজ ভাবে বলতে যে element গুলো ডানে বামে পুরো জায়গা দখল করে থাকে তাকে ব্লক লেভেল element বলে। যেমনঃ <div> , <p> ,<ul>, <li> , <a> ইত্যাদি।
২। ইনলাইন ঃ যে element গুলো শুধু লেখা জায়গা তেই থাকে অর্থাৎ ডানে বা বামে কোন অতিরিক্ত জায়গা নেয় না তাকে ইনলাইন element বলে।
Tag : আমরা যেকোন একটা এইচটিএমএল ডকুমেন্ট দেখি সেখানে অবশ্যই ট্যাগ থাকে। যেমন এখানে <html>, <head>, </head>, <body> , <p> </p>, <h1> </h1>, <tittle> </tittle> ইত্যাদি এক একটি ট্যাগ। অর্থাৎ less than (<) চিহ্ন এবং greater than (>) চিহ্ন দিয়ে মোড়ানো একটা শব্দকে (যেটা এইচটিএমএল অনুমোদিত) ট্যাগ বলে। যেমন html শব্দটি এই দুই চিহ্ন দিয়ে মুড়িয়ে যখন HTML ডকুমেন্টে লিখি তখন এটার নাম html ট্যাগ।
প্রায় প্রতিটা tag এই একটা staring tag ও একটা ending/ closing tag থাকে । যেমন <html> হল starting tag আর </html> হল ending tag । আবার <h1> হল starting tag আর </h1> হল ending tag . তবে কিছু কিছু tag এ একটি tag হয় ।
কিছু tag আছে যে গুলোর ending tag নাই । যেমন ইনপুট tag গুলো। <img/> এই tag গুলি । কোন tag কি কাজ করে সেটা আমরা পরবর্তীতে বিস্তারিত আলোচনা করবো।
তবে আজ আরও একটি বিষয় বলে রাখি সেটা হল parent tag. এখন নিশ্চয় ই মনে প্রশ্ন এসেছে এটা আবার কি । উপরের ছবিতে আমরা দেখতে পারছি যে <html></html> tag এর ভেতরে <head></head>, <body> </body> ইত্যাদি tag গুলো রয়েছে । এখানে html হল parent tag .
NOTE PAD++ এ tag এর ভেতরে বাংলা লেখার পদ্ধতিঃ এটা খুব ই একটা সহজ পদ্ধতি। তবে লেখার আগে নোট প্যাড এর “ Encoding ” এ গিয়ে ইউনিকোড সেটিং সিলেক্ট করে দিতে হবে। তাহলে ব্রাউজারে ঠিক ঠাক আউটপুট আসবে।
আজ এই পর্যন্তই। এই সিরিজের পরবর্তী আর্টিকেলটি নিয়ে আসছি খুব তাড়াতাড়ি। সে পর্যন্ত ভালো থাকুন আর প্র্যাক্টিস করতে থাকুন।
পর্ব ১ পড়ুনঃ এইখানে
Comments