HTML পেইজ এর কাঠামো (Structure of html)

ইত্যিমধে আপনি জানেন একটি HTML এর বেসিক কাঠামো কেমন হয়। আজকে আমরা আরও বিস্তারিত দেখব। উদাহরন হিসাবে নিচের কোড টা চিন্তা করুনঃ

ফলাফল

এই কোডটি রান করলে আপনার ব্রাউজারে নিচের মত আউটপুট দেখতে পাবেনঃ

html এর আউটপুট

উপরের কোডে নতুন একটি ট্যাগ আসলঃ <title> ট্যাগ। এই ট্যাগের ভেতরে লেখা আছেঃ My First Web page. আপনি যখন আউটপুট দেখছেন তখন ‘I am Novice Web programmer‘ এই লেখাটা দেখতে পাচ্ছেন। কিন্তু  My First Web page এই লেখাটা কোথায় আছে? একটু মনোযোগ দিয়ে দেখলে আপনি দেখতে পাবেন, ব্রাউজারের ট্যাবে লেখাটি দেখাচ্ছে। আমি সেটি কে লাল বক্সে হাইলাইট করে দিয়েছি। লক্ষ্যকরুন, HTML ট্যাগের মাঝে কিছু সরাসরি চোখে পড়ে, যেমনঃ

<b> I am Novice Web programmer </b>

আবার কিছু আছে একটু মনোযোগ দিয়ে দেখলে চোখে পড়ে, যেমনঃ

<title> My First Web page </title>

এখন আমরা একটি HTML এর বেসিক কাঠামো এর বিভিন্ন অংশগুলো কে নিচের মত করে চিত্রায়িত করে ব্যাখ্যা করব।

HTML Structure
HTML এর কাঠামো বুঝার জন্য রূপক চিত্র।

এখানে, বাম পাশের চিত্রে দুটি অংশঃ উপরের অংশে একটি চমৎকার বাড়ী। নিচের অংশেঃ সেই বাড়ীটির ফাইন্ডেশন।

<body> </body>

 অংশটা কে আমরা বাড়ীটার সাথে, তুলনা করব। আর 

 <head> </head>

অংশ টা কে তুলনা করব, ফাউন্ডেশন বা ভিত্তি এর সাথে।

ফাউন্ডেশন বা ভিত্তি দেখা যায় না(বুঝানোর জন্য এভাবে চিত্রায়িত করেছি)। আমরা শুধু বাড়ীটা দেখি। বাড়ী যতই সুন্দর হোক ফাউডেশন মজবুত না হলে ঐ বাড়ী যেকোন সময় ভেঙ্গে যেতে পারে। ঠিক একই  ভাবে, HTML এর কিছু ট্যাগা আছে যেগুলো দেখা যায় না। কিন্তু ঐ ট্যাগ গুলো ই নির্ধারন করবে আপনার সাইট কত তারাতারি জনপ্রিয় হবে, কত সহজে সবাই খুজে পাবে। এই ট্যাগ গুলোর আলোচনা সাধারনত নতুনদের জন্য একটু জটিল, এই জটিল ট্যাগ গুলো কে সহজ ভাবে উপস্থাপন করার চেষ্টা করব। আমার কোর্সে সব গুলো ট্যাগ কে বিভিন্ন ক্যাটাগরিতে ভাগ করে সেগুলোর প্রয়োগ, কিভাবে লিখতে হয়- সব দেখাব। এর পরের পর্বে আমরা HTML এ বহুল ব্যবহৃত ট্যাগ গুলো নিয়ে আলোচনা করব বিস্তারিত। আশাকরি, আগামি পর্বের পর আপনি অনেক বেশি আত্মবিশ্বাসী হয়ে উঠবেন।