আবারো এসেছি HTML নিয়ে। এর আগে HTML নিয়ে আরেকটি লেখা দিয়েছি । আপনি যদি না দেখে থাকেন তাহলে দেখে আসতে পারেনঃ
এর আগের পোস্টে HTML কি তা জানলেন। এবার আমি ধরে নিতে পারি আপনি HTML শিখতে আগ্রহী। এখন তো আপনার মনে প্রশ্ন জাগতে পারে, আমি HTML শিখব কিন্তু কি দিয়ে শিখব বা আমর কি কি লাগবে?? তাহলে আমি বলব আপনার কিছুই লাগবে না। কারন যা লাগবে তা আপনার পিসিতে অলরেডি আছেই। কারন HTML শিখতে আপনার একটি নোট প্যাড ও একটি ওয়েব ব্রাউজার লাগবে। নোট প্যাড লাগবে HTML কোড লিখতে। আর ওয়েব ব্রাউজার লাগবে আপনার কোডের ফলাফল দেখতে। কি দুটি আপনার পিসিতে নাই?? অবশ্যই আছে, তাহলে এবার চলুন কি ভবে প্রথম পেজ তৈরি করবেন তা জেনে নি।
প্রথমে নোট প্যাড খুলে নিচের কোড গুলো লিখুন।
1
2
3
4
5
6
| <html><body><h1>Hi! Welcome to Our site (Heading)</h1><p>It’s TechTweets, A new Technology Bangla Blogging platform. (Paragraph) </p></body></html> |
নোট প্যাড খোলার জন্য Start>>Programs >> Accessories>> Notepad যান। অথবা Start>>run>>notepad লিখলেই Notepad চলে আসবে। নোটপ্যাডের ভেতর উপরের কোড গুলো লেখুন। এবার নোটপ্যাডের File মেনু থেকে Save As সিলেক্ট করুন। তারপর ফাইলের একটি নাম দিন। যেমন firstweb.html
খেয়াল রাখতে হবে যেন এক্সটেনশন .html থাকে। আপনি যেখানে ফাইলটি সেভ করেছেন, সেখানে গিয়ে এখন দেখতে পাবেন firstweb.html নামে একটি ফাইল রয়েছে। ঐ ফাইলটী যে কোন ওয়েব ব্রাউজার দিয়ে খুলুন। তাহলে নিছের মত ফলাফল দেখতে পারবেন।
Yahooooo……..
আপনি একটি ওয়েব পেজ তৈরি করতে পেরেছেন।
Congratulation!
এখানের অনেক কিছুই না বুঝে করছেন তাই না? তাহলে একটু বুঝে নি। তার জন্য নোট প্যাডে আমরা কি লিখছি তা এবার একটু ব্যাখ্যা করে নি।
এখানে প্রথমে লিখছি। <html>, আমরা এর আগে জেনেছি যে < এবং> (বাকা ব্র্যাকেট) এর মধ্যে HTML Element গুলো লিখতে হয় । ব্র্যাকেট এর মধ্যে যা থাকে সেগুলোই হল HTML Element, আর এগুলোই হচ্ছে HTML এর প্রাণ। এ সকল Element ব্যবহার করে HTML পেজ বা একটি ওয়েব পেজ তৈরি করা হয়। সকল HTML Element এর দুটি অংশ থাকে। যাদের বলে HTML tag বা সংক্ষেপে tag। প্রথম টিকে বলে Start tag ও শেষের টিকে বলে End Tag।
প্রথমে Start tag, এটি বাকা ব্রেকেট <এবং > বা less than ও greater than ( < >) চিহ্ন দিতে এটা লিখতে হয়। এতক্ষনে আমর বুঝে গেছি যে HTML Tag জোড়ায় জোড়ায় থাকে। <html> টি হচ্ছে Start tag । সুতরাং এর একটি End Tag ও থাকবে। একেবারে শেষে দেখুন </html> । এটি হচ্ছে End Tag । End Tag একটি /(স্ল্যাস) থাকে। এ জন্য <html> tag এর শেষের tag হবে </html> ।
এখন বলি <html> ও </html> কেন লিখলাম, আমদের ওয়েব ব্রাউজারে তো <html> ও </html> দেখায় নি? হ্যাঁ <html> ও </html> একটি ওয়েব পেজ প্রকাশ করে। অর্থাৎ একটি .html বা .html Extension যুক্ত ফাইলে <html> ও </html> থাকলে আমাদের ব্রাউজার বুঝবে এটি একটি ওয়েব পেজ। এবার <html> ও </html> এ দুটি ট্যাগ এর মধ্যে যা থাকবে তাই ব্রাউজারে প্রকাশ করবে বা দেখাবে। আমারা যে কোড গুলো লিখবো তা এ HTML Tag এর মধ্যে লিখতে হবে।
এরপর HTML Tag এর মধ্যে আরেকটি ট্যাগ লিখছি।এবার লিখছি। <body> Element। এর ও রয়েছে দুটি অংশ। Start tag ও End Tag।
এটি ও একটি HTML ট্যাগ। সুতরাং এর ও একটি End Tag থাকবে। একটু নিচে দেখুন </body> tag টি রয়েছে।
web page এর প্রদর্শিত সকল বিষয় <body> element এর মধ্যে লিখতে হয়। এটি webpage এর প্রদর্শিত সকল বিষয় গুলো ধারণ করে। যে সব বিষয় গুলো আমরা web page এ দেখাতে চাই তা body element এর মধ্যে রাখতে হবে। আমরা সাধারনত সকল সাইটের এ অংশটা ই দেখি।
এবার লিখছি
1
| <h1>Hi! Welcome to Our site (Heading)</h1></span> |
এটি হচ্ছে Heading Element. এটি হচ্ছে আপনার ওয়েব পেজের হেডলাইন। কোন প্রথম Heading লিখতে <h1> Element ব্যবহার করা হয়। আমরা যদি আবোল তাবল কিছু শব্দ লিখে দি তাহলে তো ব্রাউজার বুঝবে না আমারা কি লিখছি তাকে বুঝিয়ে দিতে হবে কোনটা কি। অর্থাৎ <h1> Element দ্বারা আমরা কোনটা হেডলাইন তা প্রকাশ করতে পারি। আপনারা তো দেখলেন <h1> Element মধ্যের গুলো বড় করে ব্রাউজারে দেখাচ্ছে। যা নিউজ পেপারের হেডলাইনের মতই।
Tag এর ভিতরের অংশ কে বলে element content । মানে হচ্ছে start এবং end tag এর মধ্যের সব কিছুকে বলা হয় element content । এটা সকল HTML tag এর ক্ষেত্রে প্রযোজ্য।
তারপর লিখছি
1
| <p>It’s TechTweets, A new Technology Bangla Blogging platform. (Paragraph) </p> |
এটি লিখছি Paragraph Element এর মধ্যে । <p> হচ্ছে Paragraph Element। এটি হচ্ছে সাইটের প্যারগ্রাফ। কোন Paragraph লিখতে <p> Element ব্যবহার করা হয়। এর মধ্যে যা থকবে তা প্যারগ্রাফ এর মত দেখাবে, যা নিউজ পেপারের হেডলাইনের নিছের কন্টেইন নিউজ এর মত মত।
আমরা আমাদের প্রথম ওয়েব পেজ এ আপাতত এগুলোই তো লিখছি তাই না?? এবার আপনি কয়েক বার প্র্যক্টিস করুন। আপনার ইচ্ছে মত সবকিছু পরিবর্তন করে। দেখুন কোনটা না লিখলে কি হয়। তাহলেই আপনি ভালো ভাবে শিখতে পারবেন। আমি যে ব্যাখ্যা দিলাম তা সম্পর্কে কোন সমস্যা বা বুঝতে কোন সমস্যা হলে অবশ্যই যানাবেন। আমি সর্বোচ্ছ চেষ্টা করব আপনাকে সাহায্য করার জন্য।
আমরা HTML কোডিং করা শিখে গিয়েছি। কোডিং করার জন্য আমাদের দরকার একটা কোড এডিটর। এখন থেকে আমরা এইচটিএমএল কোড গুলো লেখার জন্য একটি কোড এডিটর ব্যবহার করব। অনেক গুলো কোড এডিটর রয়েছে। সহজ একটা কোড এডিট হচ্ছে notepad-plus-plus। লিঙ্কে ক্লিক করে ডাউনলোড করে নিতে পারেন।
আরেকটি সুন্দর কোড এডিটর হচ্ছে Sublime Text 3 যে কোন একটা ডাউনলোড করে নিলেই হবে। এরপর কোড এডিটরটি ওপেন করে আপনার এইচটিএমএল কোড গুলো লিখুন। তারপর File মেনু থেকে Save As এ ক্লিক করে ফাইলের নাম দিন। এবং শেষে .html লিখুন। যেমন: myfile.html এবার আপনি ঐ ফাইলটি ব্রাউজারে ওপেন করে দেখতে পারবেন।
