ধাপ
২
HTML ফাইল দেখতে কেমন?
নিচে একটি HTML পাতার উদাহরণ দেয়া হলঃ
<!DOCTYPE html>
<html>
<head>
<title>My website title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>নোটপ্যাড এ নিচের কোড গুলো সরাসরি কপি-পেস্ট করে HTML ডকুমেন্ট হিসেবে সংরক্ষন করে ব্রাউজারে চালু করে দেখুন। এই কোডের বিপরীতে প্রিভিউ হবে নিচের মতঃ
My website title
This is a paragraph.
নোটপ্যাড দিয়ে কিভাবে HTML ফাইল বানাতে হয় তার বিস্তারিত নির্দেশিকা এখান থেকে দেখে আসুন।
বিস্তারিত দেখা যাক নিচেঃ
<!DOCTYPE html><!DOCTYPE> এটিকে HTML ফাইলের সব শুরুতে লিখা (declare করা) হয়। এটি ডকুমেন্ট এর ধরন প্রকাশ করে। যেমনঃ উপরের <!DOCTYPE html> নির্দেশ করে যে এটি একটি HTML ডকুমেন্ট।
এর আরেকটি কাজ আছে! আপনারা জানেন HTML এর অনেকগুলো সংস্করণ আছে। সংস্করণ ভেদে HTML কোড এ পার্থক্য থাকে। <!DOCTYPE> দ্বারা আপনার HTML ফাইলটি কত সংস্করণকে ভিত্তি করে লিখা তা ব্রাউজারকে জানানো হয়। ফলে ব্রাউজার সহজে এবং সঠিকভাবে আপনার HTML ফাইলকে ব্রাউজারে দেখাতে পারে। উপরের উদাহরণের <!DOCTYPE> টি HTML5 কে নির্দেশ করে। অর্থাৎ আমাদের ফাইলটি HTML5 এর সকল নিয়ম মেনে তৈরি করা। অন্যান্য সংস্করণের জন্য <!DOCTYPE> কি হবে তা পাবেন এখানে।
<html>
...
</html>এ tag দুটির ভিতরই ওয়েবপেজের সকল কোড লিখতে হবে। Tag দুটি HTML ডকুমেন্ট এর শুরু শেষ নির্দেশ করে।
<head>
...
</head> এ দুটি tag এর ভিতর যা যা লিখা হবে তা ব্রাউজারে দেখাবে না। এ অংশে মূলত <title>, <meta>, <link> ইত্যাদি tag দ্বারা ডকুমেন্ট সম্পর্কিত বিষয়াবলী নির্দিষ্ট করা হয় এবং ওয়েবপেজ সম্পর্কে সব তথ্য দেয়া হয়।
<title>My website title</title>এ tag টি ব্যবহার করে ওয়েবপেজে শিরোনাম (যা ব্রাউজার এর টাইটেল বারে দেখায়) যুক্ত করা হয়।
<body>
...
</body> এ tag দুটির মাঝখানে যা যা লিখবেন সব ব্রাউজারে প্রদর্শিত হবে। দ্রষ্টব্যঃ tag শব্দ (যেমনঃ <p> ইত্যাদি) গুলো কিন্তু ব্রাউজারে দেখা যাবেনা।
<h1>This is a heading</h1>এ tag টি হেডিং লেখা নির্দেশ করে।
<p>This is a paragraph.</p>এ tag টি প্যারাগ্রাফ লেখা নির্দেশ করে।
উপরের ডকুমেন্টটিকে নিচের কাঠামোর সাথে তুলনা করা যায়।
অবশ্যই না। HTML case sensitive (বড় হাতের অক্ষর/ছোট হাতের অক্ষর সংবেদনশীল) না। অথ্যাৎ <TAG> এবং <tag> দুটোই HTML এ একই কথা। তবে আদর্শ হচ্ছে ছোট হাতের অক্ষর ব্যবহার করা। বড় হাতের অক্ষর ব্যবহার করলে কিছু ক্ষেত্রে সমস্যা হতে পারে। HTML এ tag, element, attribute, attributes value ইত্যাদি সব কিছুর ক্ষেত্রেই এটি প্রযোজ্য। W3C ছোট হাতের অক্ষর ব্যবহার করার পরামর্শ (recommend) দিয়েছে।
উপরের HTML কোডটিকে নিচের মত করেও লিখা যায়ঃ
<!DOCTYPE html>
<html>
<head>
<title>My website title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>এভাবে লিখলে কোড দেখতেও সুন্দর লাগে, সহজে বুঝাও যায়। HTML ডকুমেন্ট যখন ব্রাউজারে লোড করা হয় তখন সকল স্পেসসমূহ ব্রাউজার উপেক্ষা (ignore) করে, তাই এভাবে সাজালে ডকুমেন্টের কোনো ক্ষতি হয়না। এরকম না সাজালে সমস্যা নেই, তবে এভাবে সাজানো অভ্যাস করা উচিত। কিছু এডিটর নিজ দায়ীত্বেও এ কাজটি করে থাকে। যেমনঃ notepad++, brackets, dremeweaver ইত্যাদি।