ডেভেলপার হতে হলে
আপনি যে কোনো ল্যাঙ্গুয়েজ শিখতে পারেন। তো এর জন্য প্রথমে আপনাকে ওয়েব ডিজাইন শিখতে
হবে ।
এইচ টি এম এল ও
সি এস এস এবং জাভাস্ক্রিপ্ট / জেকয়ারি শিখতে হবে প্রথমে।
তো আজকে আমরা এইচ
টি এম এল ফাইল কিভাবে ব্যবহার করবো তা শিখবো।
আপনারা যে কোনো
একটি ট্রেক্সট ইডিটর ব্যবহার করতে পারেন এই কোড করার জন্য। অনলাইনে অনেক ওপেন সোর্স
টেক্সট ইডিটর রয়েছে। তার ভিতর আমি মনে করি এই ২০২১ সালে এসে সবচেয়ে মজার একটি টেক্সট
ইডিটর হচ্ছে ভিজুয়্যাল স্টুডিও কোড । এছাড়া আরো কিছু টেক্সট ইডিটর রয়েছে যেমন: ১. ব্রাকেট,
২. নোটপ্যাড + + , ৩. সাবলাইম টেক্সট ৩ ইত্যাদি অনেক টেক্সট ইডিটর রয়েছে।
এখন আপনাদের প্রশ্ন
হতে পারে, ভাই টেক্সট ইডিটর কি?
সহজ ভাষায় বলতে
গেলে টেক্সট ইডিটর হলো এমন একটি সফটওয়্যার যা দিয়ে আমরা টেক্সট বা লেখাকে বিভিন্ন ল্যাঙ্গুয়েজে
লিখতে পারি। (বুঝলে বুঝ পাতা, না বুঝলে তেজ পাতা)
যাক তো আশা করছি
আপনারা ভিএস স্টুডিও ইনস্টল করেছেন। এবার আমরা একটি এক্সেটেনশন এড করবো আমাদের এই ইডিটর
এ। Live Server নামে একটি Extension রয়েছে। এই Extension এর কারণে আমরা খুব সহজে আমাদের
ব্রাউজারে আমাদের কোডগুলোর আউটপুট দেখতে পারবো।
আচ্ছা এইবার আমরা
যা করবো তা হলো আমরা একটি ড্রাইভ এ একটি ফোল্ডার করবো web design নামে এবং সেখানে আমরা
আমাদের ফাইলগুলো রাখবো। এখানে বলে রাখি আপনারা web design এর পরিবর্তে যেকোনো নামেই
ফোল্ডার খুলতে পারেন।
এবার আসি আরো একটি
গুরুত্বপূর্ণ টপিকস এ । আর তা হচ্ছে file name extension। যারা জানেন তারা তো জানেন
ই। আর যারা জানেন না তাদের জন্য বলে রাখি আপনাদের File থেকে view অপশনে যাবেন এবং সেখানে
দেখবেন একটি অপশন রয়েছে file name extension নামে (উইন্ডজ ১০ এ) / Hide file name
extension (উইন্ডজ ৭ এ) । সো উইন্ডজ ১০ এ চেক মার্ক অন করে দিবেন আর উইন্ডজ ৭ এ চেক
মার্ক অফ করে দিবেন তাহলেই আপনাদের file name extension টি চালু হয়ে যাবে। না বুঝতে
পারলে নিচের ভিডিওটি দেখে নেন বুঝে যাবেন।
এবার আমরা আমাদের
ফোল্ডারে একটি নতুন টেক্সট ফাইল নিবো এবং তার নাম এমন থাকবে “New Text Document.txt” এবার আমরা এই ফাইলের নামটিকে ”index.html” করে নিবো। কারণ আমরা ওয়েবসাইটে
যা কিছু দেখে থাকি সবকিছু এই html (Hyper Text Markup Language) এর হয়ে থাকে। আর যেহেতু
আমরা ওয়েবসাইট ডিজাইন শিখবো তাই আমরা এই ল্যাঙ্গুয়েজ শিখবো।
আমরা যেহেতু index.html
নামে ফাইল খুলে ফেলেছি এবার এ ফাইলটিকে আমরা open with visual studio code দিয়ে ওপেন
করবো। তারপর আমরা কোড করবো।
যেহেতু আমরা html
এ কোড করবো তাই আমাদের প্রথমে এবং শেষে এই html ট্যাগ ব্যবহার করতে হবে। এখন জিজ্ঞাস
করবেন যে ভাই ট্যাগ কি জিনিস! আচ্ছা আমরা তো মানুষ আমরা না হয় বুঝে নেই যে কোনটা কি
জিনিস কিন্তু কম্পিউটার তো আর মানুষ না আর, এ আই সিস্টেম এ ও এমন কিছু নাই যা সে দেইখা
বুইঝা ফেলবে আমরা কি করছি তাই না। আর তাই আমরা ইন্টারনেটকে বলে দেই আমরা কি কি করছি।
আমরা যখন আমাদের টেক্সট ইডিটর এ html ট্যাগ ব্যবহার করবো তখন ইন্টারনেট বুঝে নিবে এটি
একটি html ফাইল যার ভিতর অনেক কিছুই আছে এবং সবকিছুই ট্যাগ ব্যবহার করে লেখা। আর আমরা
এই ট্যাগগুলোই শিখবো।
তো আমরা আমাদের
প্রথম কোড টি লেখিঃ
বর্তমানে এইচটিএমএল
ভার্সন ৫ চলছে আর তাই আমরা প্রথমে <!DOCTYPE html> কোডটি
লিখবো এবং তারপর <html> ট্যাগ লিখবো। আর যেহেতু আমরা ভিজুয়াল স্টুডিও কোড ব্যবহার
করবো তাই আমরা এখানে শর্টকার্ট ব্যবহার করতে পারি । শুধু ! এই চিহ্নটি দিয়ে Enter প্রেস
করলেই দেখবেন সম্পূর্ণ ফাস্ট ট্যাগগুলো চলে আসবে। আর সকল ট্যাগ শেষ হবে / (ব্যাকস্ল্যাশ)
দিয়ে। যেমন আমরা <html>ট্যাগ এভাবে লিখলাম এবং এটি শেষ করতে হবে </html>
এভাবে। আর আমাদের সকল ট্যাগ এই ট্যাগের ভিতর লিখতে হবে।
<!DOCTYPE html>
<html>
এই ট্যাগের পর
আসবে <head> ট্যাগ আর <head> মানে হচ্ছে মাথা আমরা জানি। আর এখানে আমরা
এই <head> ট্যাগ এর ভিতর <title> ট্যাগ নিবো আর এই <title>
ট্যাগ এর ভিতর আমরা যা লিখবো তা আমাদের ট্যাব এ দেখাবে । যেমন আপনারা এই পোস্ট এর উপরে
দেখেন লেখা আছে “চলুন শিখি HTML বাংলায়” আর এইটাই হচ্ছে আমাদের <head> ট্যাগ
এর ভিতর <title> ট্যাগ এ লেখা । সো এই লিখটি লিখতে আমাদের কোড করতে হবে এভাবেঃ
<!DOCTYPE html>
<html>
<head>
<title>
চলুন শিখি HTML বাংলায়</title>
</head>
<body>
</body>
</html>
যদি কোন
কিছু না বুঝে থাকেন তাহলে নিচের ভিডিওটি দেখে নিতে পারেন। তারপর ও না বুঝলে নিচে কমেন্ট
বক্স আছে আর ইউটিউবের কমেন্ট সেকশন ও রয়েছে, চেষ্টা করবো যদি কিছু না বুঝে থাকেন তাহলে
বুঝাবার জন্য।
ধন্যবাদ
চলবে…………..
ছবি দিয়ে বুঝালে সহজে শিখা যায়। যেমন, "Live Server নামে একটি Extension রয়েছে" বা " File থেকে view অপশনে যাবেন এবং সেখানে দেখবেন একটি অপশন রয়েছে file name extension নামে (উইন্ডজ ১০ এ) / Hide file name extension (উইন্ডজ ৭ এ) । উইন্ডজ ১০ এ চেক মার্ক অন করে দিবেন আর উইন্ডজ ৭ এ চেক মার্ক অফ করে দিবেন তাহলেই আপনাদের file name extension টি চালু হয়ে যাবে। " ওঃ হ্যাঁ, আপনার ভিডিও unavailable.