এর আগের পোস্টে HTML কি তা জানলেন। এবার আমি ধরে নিতে পারি আপনি HTML শিখতে আগ্রহী। এখন তো আপনার মনে প্রশ্ন জাগতে পারে, আমি HTML শিখব কিন্তু কি দিয়ে শিখব বা আমর কি কি লাগবে?? তাহলে আমি বলব আপনার কিছুই লাগবে না। কারন যা লাগবে তা আপনার পিসিতে অলরেডি আছেই। কারন HTML শিখতে আপনার একটি নোটপ্যাড ও একটি ওয়েব ব্রাউজার লাগবে। নোট প্যাড লাগবে HTML কোড লিখতে। আর ওয়েব ব্রাউজার লাগবে আপনার কোডের ফলাফল দেখতে। কি দুটি আপনার পিসিতে নাই?? অবশ্যই আছে, তাহলে এবার চলুন কি ভবে প্রথম পেজ তৈরি করবেন তা জেনে নি।
প্রথমে নোট প্যাড বা কোন টেক্সট এডিটর খুলে নিচের কোড গুলো লিখুনঃ
<h1>Hello Web!</h1>
নোট প্যাড খোলার জন্য Start>>Programs >> Accessories>> Notepad যান। অথবা Start>>run>>notepad লিখলেই Notepad চলে আসবে। নোটপ্যাডের ভেতর উপরের কোড গুলো লেখুন। এবার নোটপ্যাডের File মেনু থেকে Save As সিলেক্ট করুন। তারপর ফাইলের একটি নাম দিন। যেমন hello.html
খেয়াল রাখতে হবে যেন এক্সটেনশন .html থাকে। আপনি যেখানে ফাইলটি সেভ করেছেন, সেখানে গিয়ে এখন দেখতে পাবেন hello.html নামে একটি ফাইল রয়েছে। ঐ ফাইলটী যে কোন ওয়েব ব্রাউজার দিয়ে খুলুন। তাহলে নিছের মত ফলাফল দেখতে পারবেন। ওয়েব ব্রাউজারে দেখাবেঃ
Hello Web!
Congratulation! আপনি একটি ওয়েব পেজ তৈরি করতে পেরেছেন।
এইচটিএমএল কোড লেখার জন্য নোটপ্যাড খুব একটা ভালো জিনিস না। শুরু করার জন্য যথেষ্ট। তবে আমরা একটা কোড এডিটর ব্যবহার করতে পারি। অনেক গুলো কোড এডিটর রয়েছে। যেমন Atom, Notepad++, SublimeText, Bracktes ইত্যাদি ইত্যাদি। আমি সাজেস্ট করব Visual Studio Code ব্যবহার করতে। ম্যাক, উইন্ডোজ বা লিনাক্স যে কোন অপারেটিং সিস্টেমেই ব্যবহার করা যাবে। ডাউনলোড করে ইন্সটল করে নিব। এরপর ওপেন করলে নতুন একতা blank document তৈরি হবে। File > New file থেকেও নতুন ফাইল তৈরি করা যাবে। এই ফাইলটি যখন আমরা সেভ করব, তখন এর এক্সটেনশন সেট করে দিতে হবে। আমরা যেহেতু এইচটিএমএল এ কোড লিখছি, তাই ফাইলের নাম দেওয়ার পর .html ব্যবহার করতে হবে। যেমন আমরা দিলাম hello.html। এবার এর ভেতরে যে কোন HTML কোড লেখার জন্য প্রস্তুত। উপরের কোডটা এখানে লিখে সেভ করলে আমরা ব্রাউজারে আউটপুট দেখতে পাবো।
এখানের অনেক কিছুই না বুঝে করছেন তাই না? তাহলে একটু বুঝে নি। তার জন্য নোট প্যাডে আমরা কি লিখছি তা এবার একটু ব্যাখ্যা করে নি।
এখানে প্রথমে লিখছি। <h1>, আমরা এর আগে জেনেছি যে বাঁকা ব্র্যাকেট < এবং> এর মধ্যে HTML Element গুলো লিখতে হয় । ব্র্যাকেট এর মধ্যে যা থাকে সেগুলোই হল এইচটিএমএল ট্যাগ। এ সকল ট্যাগ ব্যবহার করে HTML পেজ বা একটি ওয়েব পেজ তৈরি করা হয়। সকল HTML ট্যাগের এর দুটি অংশ থাকে। প্রথমটিকে বলে Start tag ও শেষের টিকে বলে End Tag।
প্রথমে Start tag, এটি বাকা ব্রেকেট <এবং > বা less than ও greater than ( < >) চিহ্ন দিতে এটা লিখতে হয়। এতক্ষনে আমর বুঝে গেছি যে HTML Tag জোড়ায় জোড়ায় থাকে। <h1> টি হচ্ছে শুরুর ট্যাগ । সুতরাং এর একটি শেষ ট্যাগ ও থাকবে। একেবারে শেষে দেখুন </h1> । এটি হচ্ছে শেষ Tag । শেষ ট্যাগ শুরুর ট্যাগ থেকে একটু আলাধা। শেষ ট্যাগে একটি /(স্ল্যাস) থাকে। এ জন্য <h1> ট্যাগ এর শেষের ট্যাগ হবে </h1> ।
উপড়ের যে ছোট্ট এক লাইনের কোড লিখে ওয়েব পেইজ তৈরি করেছি, তা আমাদের আউটপুট দেখিয়েছে ঠিকই, কিন্তু সেখানে এইচটিএমএল ডকুমেন্ট লেখার নিয়ম মানা হয়নি। একটি পরিপূর্ণ এইচটিএমএল ডকুমেন্টে কিছু নিয়ম মেনে লিখতে হয়। যেমন নিচের উদাহরণটা দেখিঃ
<!DOCTYPE html> <html> <head> <title>First web page</title> </head> <body> <h1>Hello Web!</h1> </body> </html>
এখানে খেয়াল করলে দেখব অনেক গুলো ট্যাগ লিখেছি। কেন লিখেছি, কোনটার কাজ কি সে সম্পর্কে জানা যাক।
এইচটিএমএল এর লেটেস্ট ভার্সন হচ্ছে HTML5। তো আমরা যখন HTML5 এর মার্কআপ লিখে কোন ওয়েব পেইজ তৈরি করব, তখন এর শুরুতে লিখবঃ <!DOCTYPE html>। এটি দিয়ে বুঝানো হয় যে এই পেইজটি HTML5 ওয়েব পেইজ।
এরপর লিখেছি <html> ট্যাগ। এই html ট্যাগকে বলা হয় একটা এইচটিএমএল পেইজের রুট ইলিমেন্ট। এইচটিএমএল এর কোড গুলো সাধারণত এই কোডের ভেতর লিখতে হয়। <html> ও </html> এ দুটি ট্যাগ এর মধ্যে যা থাকবে তাই ব্রাউজারে দেখাবে। আমারা ওয়েব সাইটে যা কিছু দেখাতে চাই, তা এ ট্যাগের ভেতর লিখতে হবে।
<head> ট্যাগ এর মধ্যে সাধারণত ওয়েব সাইটের টাইটেল বা ওয়েব সাইট কি বিষয়ে, সেগুলো লেখা হয়। এছাড়া এখানে ওয়েব সাইটের মেটা, CSS, JavaScript কোড ইত্যাদি থাকে। পরবর্তিতে যে গুলো সম্পর্কে আমরা জানতে পারব।
<title> দিয়ে ওয়েব পেইজের নাম লেখা হয়। যেমন ফেসবুক ভিজিট করলে আমরা ব্রাউজারের একেবারে উপরে দেখি লেখা উঠে Facebook। গুগল ভিজিট করলে উপরে লেখা থাকে Google। ইত্যাদি। আমাদের ওয়েব পেইজের টাইটেল হচ্ছে First web page। আমরা যখন ব্রাউজারে দেখি এই পেইজটা, তখন টপ ন্যাভিগেশনে এই First web page লেখাটা দেখতে পাবো। <head> ট্যাগে আরো অনেক কিছুই থাকতে পারে। আস্তে আস্তে আমরা সেগুলো জানতে পারব।
এরপর আরেকটা ট্যাগ লিখেছি। <body> ট্যাগ। বডি ট্যাগের মধ্যে থাকে মূলত ওয়েব পেইজে আমরা যা দেখি, সে গুলো। যেমন আমাদের এই পেইজ ব্রাউজারে ওপেন করলে লেখা উঠবে Hello Web! যা লিখেছি <h1> ট্যাগের মধ্যে।
এইচটিএমএল এর প্রতিটি ট্যাগের শুরুর পাশাপাশি শেষ ট্যাগ রয়েছে। শুরু করার পর যদি আমরা এই শেষ ট্যাগ ব্যবহার না করি, তাহলে ওয়েব পেইজে অনেক সময় ভুল ভাবে তথ্য গুলো দেখা যেতে পারে। তাই খেয়াল রাখতে হবে যেন এই শেষ ট্যাগ গুলো যেন ঠিক মত দেওয়া হয়।
উপের কোড থেকে আমরা একটা কিছু বুঝতে পারার কথা। একটা ওয়েব পেইজের প্রধান দুইটা অংশ থাকে। একটা head অংশ, আরেকটা হচ্ছে body অংশ। head অংশে থাকে মূলত টাইটেল যা থেকে ওয়েব পেইজটি কি সম্পর্কে তা সম্পর্কে জানা যায়। body অংশে থাকে বিস্তারিত।
উপরের ওয়েব সাইটে body তে লেখার জন্য মাত্র একটা ট্যাগ ব্যবহার করেছি, h1 ট্যাগ। এছাড়া অনেক গুলো ট্যাগ আমরা ব্যবহার করতে পারি। সামনের লেখা গুলোতে সে সম্পর্কে বিস্তারিত জানব।
খুব ভাল লাগল ভাইয়া।
আমি ওয়েব ডিজাইন শিখতে চাই।
আমাকে শিখাবেন ভাইয়া।
অনেক কিছু জানলামা বস ♥
ভাই আপনার প্রসংসা করে আমি শেষ করতে পারব না।
এত ভালোভাবে বোঝানোর জন্য ধন্যবাদ। আরো টিউটোরিয়াল লিখুন