আসসালামুআলাইকুম বন্ধুরা কেমন আছেন সবাই আশা করি সবাই ভাল আছেন আল্লার রহমতে আমি অনেক ভালো আছি আজকে আপনাদের সামনে হাজির হলাম এইচটিএমএল বেসিক টিউটোরিয়াল সিরিজ পার্ট 2 নিয়ে।
নিচে একটা সাধারন এইচটিএমএল ডকুমেন্ট দেয়া হল এবং এর প্রতিটি অংশের বিস্তারিত বর্ননা করা হয়েছে ।
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>ekhane title thakbe</title>
5. </head>
6. <body>
7. <h1>Webcoachbd demo heading</h1>
8. <p>demo content goes here.</p>
9. </body>
10. </html>
প্রথম লাইনটি <!DOCTYPE html> হচ্ছে ডকুমেন্টটি কি ধরনের তা(ব্রাউজারকে) বোঝানোর জন্য দেয়া হয়। এইচটিএমএল এর কোন ভার্সন ব্যবহার করবেন সেটার উপর ভিত্তি করেই এই ডিক্লেয়ারেশন টি দেয়া হয়। html এর অনেকগুলো ভার্সন আছে যেহেতু আমরা html5 ব্যবহার করতেছি তাই আমরা<!DOCTYPE html> ব্যবহার করব। যেমন উপরের ডকুমেন্ট টি এইচটিএমএল ৫ এর একটি ডকুমেন্ট ।
html এর অনেক গুল ভার্সন আছে এখন HTML5 আসার পর এগুলি আর সাধারনত ব্যবহার করেনা। HTML 5 বেশি ব্যবহৃত হচ্ছে। যাইহোক এটা খুব গুরত্বপূর্ন কিছু নয় যাই হোক ।
আমরা যেকোন একটা এইচটিএমএল ডকুমেন্ট দেখি সেখানে অবশ্যই ট্যাগ থাকে। যেমন নিচের ডকুমেন্ট টি দেখুন এখানে <html>, <head>, <body> ইত্যাদি এক একটি ট্যাগ।
সোজা কথায় less than (<) চিহ্ন এবং greater than (>) চিহ্ন দিয়ে মোড়ানো একটা শব্দকে (যেটা এইচটিএমএল অনুমোদিত) ট্যাগ বলে। যেমন html শব্দটি এই দুই চিহ্ন দিয়ে মুড়িয়ে যখন HTML ডকুমেন্টে লিখি তখন এটার নাম html ট্যাগ। এরুপ শত শত ট্যাগ আছে এইচটিএমএল এ।
যেমন:প্যারাগ্রাফ ট্যাগ <p></p>
হেডিং <h1></h1> ট্যাগ ইত্যাদি।
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>ekhane title thakbe</title>
5. </head>
6. <body>
7. <h1>Webcoachbd demo heading</h1>
8. <p>demo content goes here.</p>
9. </body>
10. </html>
প্রায় সব ট্যাগেরই একটা সমাপ্তি ট্যাগ থাকে।
যেমন উপরে <html> ট্যাগটির সমাপ্তি ট্যাগ (closing tag ) হচ্ছে </html> আবার <h1> এর ক্লজিং ট্যাগ হল </h1> এভাবে বাকি সবগুলি।
শুরুর ট্যাগটিকে বলে opening tag বা start tag আর শেষের ট্যাগটিকে বলে closing tag বা end tag. দুটোই একই শুধু ক্লজিং ট্যাগে একটা ব্যাকস্লাস (/) চিহ্ন বেশি থাকে।
এই ওপেনিং এবং ক্লজিং ট্যাগের ভিতর কনটেন্ট দিতে হয়। যেমন উপরে দিয়েছি।
এই ট্যাগই হচ্ছে এইচটিএমএল এর মুল জিনিস। শত শত ট্যাগ আছে, যত বেশি মনে রাখতে পারবেন ততই দ্রুত কাজ করতে পারবেন। তবে অনেকদিন ধরে কাজ করলে বেশিরভাগ প্রয়োজনীয় ট্যাগগুলি মুখস্থই থাকে।
কিছু কিছু ট্যাগ আছে এগুলির ক্লজিং ট্যাগ নেই যেমন input ট্যাগ, image ট্যাগ ইত্যাদি। এই ট্যাগগুলি সামান্য একটু ভিন্ন। এগুলি সম্পর্কে আমরা পরবর্তী টিউটোরিয়ালে শিখব।
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>ekhane title thakbe</title>
5. </head>
6. <body>
7. <h1>Webcoachbd demo heading</h1>
8. <p>demo content goes here.</p>
9. </body>
10. </html>
উপরে যে ডকুমেন্টটি দিয়েছি সেখানে <html></html> কে বলে প্যারেন্ট ট্যাগ। এবং এর ভিতরে যে ট্যাগ গুলো থাকে তাকে বলা হয় চাইল্ড ট্যাগ।
সোজা কথায় যার ভেতরে যে থাকবে তাকে বলা হয় চাইল্ড এক রং যার ভেতরে থাকবে তাকে বলা হয় প্যারেন্ট ট্যাগ। এখানে এইচটিএমএল ট্যাগ কে যদি প্যারেন্ট ট্যাগ ধরি তাহলে এর ভিতরের ব্যবহৃত ট্যাগগুলি হল এর চাইল্ড ট্যাগ। একইভাবে head ট্যাগের চাইল্ড ট্যাগ হল title ট্যাগ কিন্তু title ট্যাগের কোন চাইল্ড ট্যাগ নেই। আবার দেখুন body হল প্যারেন্ট ট্যাগ এবং এর চাইল্ড ট্যাগ এখানে p এবং h1 আশা করি সবাই বুঝতে পারছেন।
তো যাদের কাছে ডেক্সটপ বা ল্যাপটপ নাই তারা কিভাবে শিখবেন তাদের জন্য এর আগে আমি একটি পোস্ট করেছি আপনারা চাইলে সে পোস্টে পড়ে আসতে পারেন এখান থেকেhttps://grathor.com/মোবাইল-দিয়ে-
তো আজকের টিউটরিয়াল এই পর্যন্তই পরবর্তী টিউটোরিয়ালে আমন্ত্রণ জানিয়ে এখানেই শেষ করছি সে পর্যন্ত সবাই ভাল থাকবেন সুস্থ থাকবেন আল্লাহ হাফেজ।
