গতপর্বে খুব অল্পের মধ্যেই শেষ করে দিয়ে ছিলাম , বলতে গেলে কেও কিছুই শিখতে পারেন নি । আজ থেকেই তবে শুরু হয়ে যাক।
শুরুতেই শিখে নিব একটি HTML ফাইল কিভাবে তৈরী করতে হয় , বেশ কয়েকটি নিয়মের মধ্যে সহজ নিয়মটি দেখাব ।
একটি ফাইলের নামের ২ টি অংশ থাকে একটি ফাইল নেম অন্যটি ফাইল এক্সটেনশন ।ফাইল এক্সটেনশন দিয়েই ফাইলের ধরন বুঝা যায়, শুদ্ধ বাংলায় বললে ফাইলের জাত চিনা যায় । মনে করুন আপনি একটি ডোরেমন নাম এর ওয়ালপেপার ডাউনলোড করেছেন ।নামটির দিকে খেয়াল করুন । নামটি হবে Doraemon.jpg এখানে ডট এর বাম দিকের অংশ অর্থাৎ Doraemon হচ্ছে ওয়ালপেপারটির নাম
এবং . (ডট) এর পরবর্তী অংশ হচ্ছে এর এক্সটেনশন যা দিয়ে আমরা বুঝতে পারছি এটি একটি ইমেজ ফাইল। ঠিক যেমন করে একটি ফাইলের শেষে mp3 দেখে আমরা অডিও এবং mp4 দেখে আমরা ভিডিও ফাইল বুঝতে পারি।
অনেকে হয়ত বুঝে গেছেন , অনেকে ফাইলের এক্সটেনশনই দেখতে পারছেন না । তারা এই পদ্ধতিটি ফলো করুন।
প্রথমেই স্টার্ট মেনু থেকে কন্ট্রোল প্যানেলে যান, ফোল্ডার অপশন নামে একটি আইকন দেখতে পাবেন উইন্ডোজ 10 ব্যাবহার কারীরা ফোল্ডার এক্সপ্লোরার অপশন নামের আইকন পাবেন , সেটিতে ক্লিক করুন।
ছবিটির মত একটি পপ আপ উইন্ডো আসবে । view ( ছবিতে লাল চিহ্ন দেয়া ) অপশনে ক্লিক করুন । নিচের দিকের Hide extensions for known file types এর পাশের টিক চিহ্ন টি উঠিয়ে দিন।
Apply দিয়ে Ok করুন । ব্যাস এর পর থেকে আবার আপনি ফাইলের এক্সটেনশন দেখতে পারবেন । আবার পূর্বের মত করতে চাইলে শুধু টিক চিহ্ন দিয়ে দিন এক্সটেনশন হাইড হয়ে যাবে ।
তো আসুন এবার একটি ওয়েব পেইজ তৈরী করি,
ওয়েবপেইজ তৈরী করতে গেলেই আমাদের একটি টেক্সট এডিটর লাগবে, জনপ্রিয় টেক্সট এডিটর নিয়ে একটি ছোট পোস্ট আছে , সেটি পড়ে নিতে পারেন এই লিংক থেকে , পরবর্তীতে পছন্দমত এডিটর ডাউনলোড করে নিবেন ।
আমরা শুরুতেই উইন্ডোজের বিল্ট ইন এডিটর নোটপ্যাড নিয়ে কাজ করব।
প্রথমে মাউসের রাইট বাটন ক্লিক করি , new এ গিয়ে Text Document এ সিলেক্ট করলে একটি টেক্সট ফাইল তৈরী হবে । নাম লেখার সময় সম্পূর্ন নাম মুছে দিয়ে নাম দেই Class1.html
এন্টার দেই। একটি পপআপ বক্স আসবে। ok দেই। তৈরী হয়ে গেল সুস্বাদু মজাদার ....ও সরি ভুল হয়ে গেল। তৈরী করে ফেললাম একটি html ফাইল। যারা এই পোস্ট দেখে আজকে প্রথম html ফাইল তৈরী করলেন তাদের জন্য আস্তে করে তালি বাজাই সবাই ......
এবার............ আমাদের বানানো ওয়েব পেইজ ওপেন করি। একটি খালি ওয়েব পেইজ দেখাবে । এখন ওয়েব পেইজ এ আমরা কন্টেন্ট এড করব।
আমাদের তৈরী html ফাইলের উপর মাউজের রাইট বাটনে ক্লিক করে open with এ গিয়ে notepad অপশন সিলেক্ট করি । নোট প্যাডে ফাইলটি চালু হয়ে গেল ।
নীচের কোডটি চুপচাপ কপি পেস্ট করুন
<html>
<head></head>
<body>
<p> ABC is a good Boy </p>
</body>
</html>
(ABC এর যায়গায় আপনার নাম দিন )
সেভ করে বেড়িয়ে যান এবার ওয়েব পেইজ ওপেন করুন দেখুন আপনার কম্পিউটার ও আপনাকে ভাল ছেলে বলছে ( মেয়েরা boy এর যায়গায় girl লেখবেন কিন্তু না হলে ...... :P )
এবার উপরের কোড এর তর্জমা সহ ব্যাক্ষা দেই । গত পর্বে ব্যাসিক স্ট্রাকচার তো দেখেছি। তো এটি ছাড়া আসলে Webpage হয় না । সেখানে আমরা Tag সম্পর্কে জেনেছি । এই কোডে অনেকগুলো ট্যাগ ব্যাবহার করলেও ট্যাগ কিন্তু আমাদের ওয়েব পেইজে শো করছে না। শো করছে Tag এর মাঝে লেখা একটি লাইন। তো নিশ্চই বুঝে গেছেন যে ওপেনিং ও ক্লোজিং ট্যাগের মাঝামাঝিতে আমরা যা দিব তাই হবে আমাদের ওয়েব পেইজের কন্টেন্ট।
সম্পূর্ন ওয়েব পেইজ হল <html> এবং </html> এর মাঝে বসবে ,
<head> ট্যাগ সম্পর্কে পরে জানব ,
<body> </body> বডি ট্যাগ এর ভিতরেই ওয়েব কন্টেন্ট এর সব কিছু বসে ।
আপনি যখন খালি ওয়েব পেইজ টি ওপেন করেছিলেন, মনে আছে সেখানে সাদা ছাড়া আর কিছুই দেখেন নি । এই সাদা অংশই হল <body> ট্যাগ এর অংশ, বডির ভিতরে যা কোড করবেন সবই এই সাদা অংশে উপস্থিত হবে ।
<p> একে বলে প্যারাগ্রাফ ট্যাগ । কোন কথা প্যারাগ্রাফ আকারে বলা অর্থাৎ শুধু কোন উক্তি উল্লেখ করতে প্যারাগ্রাফ ট্যাগ ব্যাবহার করা হয়।
তো শুরু তো বেশ ভাল মতই হল আশাকরি যদিও শিখা খুবই অল্প হয়েছে তবুও বলি অল্প অল্প প্র্যাক্টিস এর মাধ্যমে শিখলেই আয়ত্ব করতে সুবিধা হবে । এইরকম আরো অনেক ট্যাগ আছে আস্তে আস্তে কাজের মাধ্যমে যখন শিখব তখন বুঝতে পারব , তবুও যারা একটু বেশী এডভান্স , এতটুকুতে মন ভরেনি তারা ইন্টারনেট এ ঘাটাঘাটী করতে থাকুন । আর যাদের মন ভরেছে তারা এগুলো প্র্যাক্টিস করে আবার নতুন পোস্টের অপেক্ষা করুন ,
ধন্যবাদ
যারা প্রথম পর্বটি মিস করেছেন তারা পড়ে আসুন এই লিঙ্ক থেকে