HTML এবং CSS দিয়ে ওয়েবসাইট তৈরি: বিগিনারদের জন্য কমপ্লিট গাইডলাইন
VS Code দিয়ে সহজে ওয়েবসাইট বানাতে চান? HTML এবং CSS এর বেসিক ধারণা ও রেডিমেড কোডসহ বিগিনারদের জন্য একটি সম্পূর্ণ গাইডলাইন।
আজকের ডিজিটাল যুগে নিজের একটা ওয়েবসাইট থাকা কতটা গুরুত্বপূর্ণ, তা আমরা সবাই জানি। আপনি যদি একজন ওয়েব ডেভেলপার হতে চান, তবে আপনার যাত্রার প্রথম দুটি ধাপ হলো HTML এবং CSS। এই গাইডে আমরা খুব সহজ ভাষায় জানবো কীভাবে এই দুটি প্রযুক্তি ব্যবহার করে একটি ওয়েবসাইট তৈরি করা যায়।
১. HTML কী এবং এটি কেন প্রয়োজন?
HTML এর পূর্ণরূপ হলো HyperText Markup Language। এটিকে একটি ওয়েবসাইটের কঙ্কাল বা স্ট্রাকচারের সাথে তুলনা করা যেতে পারে। একটা বিল্ডিং তৈরি করার সময় যেমন প্রথমে রড-সিমেন্টের কাঠামো তৈরি করা হয়, HTML ঠিক সেই কাজটিই করে।
HTML মূলত বিভিন্ন Tags (যেমন: <h1>, <p>, <div>) ব্যবহার করে ওয়েবসাইটের টেক্সট, ছবি এবং লিংকগুলোকে সাজায়।
২. CSS কী এবং এটি কীভাবে কাজ করে?
CSS এর পূর্ণরূপ হলো Cascading Style Sheets। HTML দিয়ে তৈরি করা কঙ্কালটিতে প্রাণ দেয় CSS। বিল্ডিংয়ের কাঠামোর ওপর চমৎকার রঙ করা, প্লাস্টার করা কিংবা ডিজাইন করার কাজটাই হলো CSS এর কাজ।
CSS দিয়ে আপনি ওয়েবসাইটের ফন্ট সাইজ, ব্যাকগ্রাউন্ড কালার, লেআউট (যেমন: Flexbox বা Grid) এবং রেসপন্সিভ ডিজাইন নিয়ন্ত্রণ করতে পারবেন।
একটি সহজ উদাহরণ (Boilerplate Code):
নিচে একটি সিম্পল কোড দেওয়া হলো যা দিয়ে আপনি আপনার যাত্রা শুরু করতে পারেন:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>স্বাগতম কোড শিখি-তে!</h1>
<p>এটি আমার তৈরি প্রথম ওয়েবসাইট।</p>
</body>
</html>
৩. সহজে ওয়েবসাইট বানানোর ট্রিক (Bootstrap)
একেবারে স্ক্র্যাচ থেকে অনেক বড় CSS কোড লেখা বিগিনারদের জন্য কঠিন হতে পারে। এই সমস্যা সমাধানের জন্যই রয়েছে Bootstrap 5। আমাদের ওয়েবসাইট Code Shikhi-তে আপনি এইরকম অসংখ্য রেডিমেড বুটস্ট্র্যাপ কম্পোনেন্ট পাবেন, যা শুধু কপি-পেস্ট করে আপনি মুহূর্তে প্রজেক্ট বানিয়ে ফেলতে পারবেন!