কেমন আছেন আপনারা? আশা করি আপনারা ভালই আছেন। আপনারা কি HTML শিখতে আগ্রহী? তাহলে আমার এই ব্লগ আপনাকে শিখতে সাহায্য করবে। আমি মানুষকে শেখাতে ভালবাসি, আর আমার এই টিউটোরিয়াল আপনাদের সঠিক ভাবে শেখাতে সাহায্য করলে আমারও ভাল লাগে। আজকে আমরা একটি HTML ফাইল তৈরি করে আপনাদের HTML, CSS এবং Javascript এর একটা স্বচ্ছ ধারনা দেওয়ার চেষ্টা করব। আমার এই টিউটোরিয়ায়ল থেকে শিখতে পারবেন কিভাবে আপনারা HTML এর মূল গঠন তৈরি করতে পারবেন। আপনাদের পরিচয় করিয়ে দেব নতুন দুটি ল্যাংগোয়েজের সঙ্গে, একটি হল CSS এবং অন্যটি হল Javascript. তাহলে চলুন আরম্ভ করি আমাদের টিউটোরিয়াল?
আমাদের এই টিউটোরিয়ালে আমরা একটা HTML এর প্রাথমিক গঠন তৈরি করব, যেখানে আমরা একটি প্রাথমিক শিরনাম(heading level one) একটি অনুচ্ছেদ(paragraph) এবং একটি button এলিমেন্ট তৈরি করব। তারপর আমরা CSS এর মাধ্যমে পেজটাকে কিছুটা স্টাইল চেঞ্জ করার চেষ্টা করব। তাছারা Javascript দিয়ে আমরা এমন একটা কোডিং করব যাতে ওই button এলিমেন্টে ক্লিক করলেই paragraph অংশটি আমাদের ওয়েব পেজটি থেকে ভিসুয়ালি হাইড হয়ে যাবে।
আমাদের যা করতে হবে
২. প্রথম শ্রেণির হেডিং(h1) তৈরী করা,
৩. একটা প্যারাগ্রাফ(p) এলিমেন্ট তৈরি করা,
৪. একটা button এলিমেন্ট তৈরী করা,
৫. ওয়েবপেজের এলিমেন্ট গুলোতে কাস্টম স্টাইল যোগ করা,
৬. জাভাস্ক্রিপ্টের মাধ্যমে একটি ফাংশন তৈরি করা যার ফলে ঐ বাটন-এ ক্লিক করলে আমাদের প্যারাগ্রাফ এলিমেন্ট ভিসুয়ালি হাইড হয়ে যাবে
শুরু করবার আগে বলে রাখি এখনকার প্রত্যেকটা আপডেটেড ব্রাউজার HTML5 সাপোর্ট করে। তাই আমি আপনাকে আমি HTML5 এর বেসিক পার্টটা শেখাব।
টেক্সট এডিটর
আপনি আগে ফাইলটাকে সেভ করে নিন আপনার ডেসটিনেশন ফোল্ডারে যেকোনো একটা নাম দিয়ে, কিন্তু মনে রাখবেন ঐ ফাইলটার নামের শেষে অবশ্যই .html এক্সটেনশন দিতে ভুলবেননা, কারন তাহলে উন্ডোজ বুঝতে পারবেনা আপনার ফাইলটা কি টাইপের ফাইল। যদিও নোটপ্যাড অলরেডি যেকোনো ফাইলের জন্যি .txt এক্সটেনশন যোগ করে।
HTML শিখুন
<!DOCTYPE html>এখানে একটি ব্যাপার লক্ষ্য করুন আমি প্রথমে লেফট অ্যাঙ্গেল ব্র্যাকেট দিয়ে তারপর এক্সক্লেমেশন(!) মার্ক তারপর DOCTYPE html এবং শেষে রাইট অ্যাঙ্গেল ব্র্যাকেট দিয়েছি, এটা করার কারন হচ্ছে আমরা ব্রাউজারকে নির্দেশ দিচ্ছি যে আমরা HTML5 ভার্সন ব্যবহার করছি।
এরপর লিখুন নিচের কোডটি,
<html> </html>আপনি দেখুন, প্রত্যেক্টি এলিমেন্ট <> দিয়ে শুরু এবং </> দিয়ে শেষ হয়। তারমানে আপনি যদি উপরের html ট্যাগটি লেখেন তাহলে < html > হবে Start tag এবং </ html > হবে End tag. এই html ট্যাগটিকে বলা হয় এর রুট ট্যাগ।
এরপর আপনি এই রুট এলিমেন্টের মাঝে একটা এন্টার প্রেস করে দুটি এলিমেন্ট তৈরি করুন একটি হচ্ছে হেড ট্যাগ অন্যটি হল বডি ট্যাগ।
.......... <html> <head> </head> <body> </body> </html>আপনি জেনে রাখুন হেড এলিমেন্টের যে সমস্ত ট্যাগ আমরা ব্যাবহার করি সেগুলো কিন্তু ওয়েব ব্রাউজারের ডকুমেন্ট এ দেখতে পাইনা, কারন হেড ট্যাগ ব্যবহার করা হয় ব্রাউজারকে এবং সারচ-ইঞ্জিনকে নির্দেশ দেবার জন্য। এই হেড এলিমেন্ট-এ যে সমস্ত ট্যাগ ব্যবহার করা হয় সেগুলো হল title, বিভিন্ন রকমের মেটা ট্যাগ (যেমনcharset, keywords, description, author etc.), এক্সটারনাল CSS ফাইল, favicon, RSS এবং জাভাস্ক্রিপ্ট ফাইল অ্যাড করবার জন্য link এবং script tag ইত্যাদি।
আর আমরা ব্রাউজারে যে সমস্ত ডকুমেন্ট দেখতে পাই সেসব কিছুই এই body এলিমেন্ট এ অ্যাড করা হয়ে থাকে যেমন হেডিং, প্যারাগ্রাফ, কোন লিংক, বাটন, লিস্ট আইটেম ইত্যাদি।
আপনি যদি এখন ফাইলটাকে সেভ করে মেনু ট্যাব থেকে Run এ ক্লিক করে Launch in firefox অথবা Launch in chrome এ ক্লিক করেন তাহলে আপনি দেখতে পাবেন আপনার ওয়েব পেজটি পুরোপুরি সাদা দেখাচ্ছে। কারন এখনও আমরা কোন এলিমেন্ট বডিতে অ্যাড করিনি। তাছারা আপনি যদি ব্রাউজারের টাইটেল বারের দিকে লক্ষ্য রাখেন আপনি দেখবেন, শুধু ফাইলটার নাম ওই টাইটেল ট্যাব-এ দেখাচ্ছে।
এখন আপনি নিচের ট্যাগটি লিখুন head এলিমেন্টের ভেতরে,
<title>HTML – 1st tutorial </title>উপরের ট্যাগটি লেখার পরে ফাইলটিকে সেভ করে দিন এবং ব্রাউজারের রিলোড button এ ক্লিক করুন, আপনি দেখতে পাবেন যে ব্রাউজারের টাইটেল বারে HTML – 1st tutorial লেখাটা চলে এসেছে।
এরপর আমরা একটা প্রথম শ্রেণির হেডিং এলিমেন্ট যোগ করব,
<h1>This is first level heading</h1>হেডিং এলিমেন্ট লেখা হয়ে গেলে আমরা প্যারাগ্রাফ এবং একটি button এলিমেন্ট অ্যাড করব,
<p>This is a paragraph and it will hide from this webpage by javascript when usere click on the button element</p>
<button id="hideBtn">Hide</button>এখানে লক্ষ্য করুন যে আমি button এলিমেন্টে id অ্যাট্রিবিউট দিয়েছি hideBtn. এই id কোন এলিমেন্টকে ইউনিক selector যোগ করে, আর এই id কেই পরে css এবং javascript এ ব্যবহার করা হয় নিজের পছন্দ অনুযায়ী কাজ করবার জন্য।
এবার আপনি যদি ফাইলটাকে সেভ করে ব্রাউজারটিকে রিলোড দেন তাহলে আপনি তিনটি এলিমেন্ট দেখতে পাবেন নিচের চিত্রের মত করে,
আপনি যে সমস্ত ডেটাগুলোকে ব্রাউজারে দেখতে পাচ্ছেন প্রত্যেকটাতে ব্রাউজার নিজস্ব ডিফল্ট স্টাইল অ্যাপ্লাই করেছে যেহেতু আমরা কোন কাস্টম স্টাইল অ্যাড করিনি। আমরা এর পরবর্তী টিউটোরিয়ালে শিখব কিভাবে আপনি HTML এলিমেন্টগুলিকে আপনার নিজস্ব স্টাইল অ্যাপ্লাই করবেন এবং জাভাস্ক্রিপ্ট ব্যবহার করবেন।
No comments:
Post a Comment