 |
| বেসিক HTML কোডিং এবং ওয়েব ডিজাইন গাইড |
ওয়েব ডিজাইন শিখতে চান? নতুনদের জন্য বেসিক HTML কোডিং এবং ওয়েবসাইট স্ট্রাকচার গাইড
ওয়েব ডিজাইন বর্তমান সময়ের অন্যতম জনপ্রিয় এবং চাহিদাসম্পন্ন একটি পেশা। প্রতিদিন ইন্টারনেটে হাজার হাজার নতুন ওয়েবসাইট তৈরি হচ্ছে, আর এই ওয়েবসাইটগুলো তৈরি করার পেছনে কাজ করছে ওয়েব ডিজাইনাররা। আপনি যদি ক্যারিয়ার হিসেবে প্রযুক্তি খাতকে বেছে নিতে চান, তবে ওয়েব ডিজাইন হতে পারে একটি চমৎকার শুরু। কিন্তু নতুনদের মনে প্রায়ই একটি প্রশ্ন আসে—কোথা থেকে শুরু করব? উত্তরটি খুব সহজ: HTML (এইচটিএমএল)।
যেকোনো ওয়েবসাইট তৈরির মূল ভিত্তি হলো HTML। আপনি ইন্টারনেটে যত সুন্দর সুন্দর ওয়েবসাইট দেখেন না কেন, সেগুলোর পেছনের কঙ্কাল বা মূল কাঠামো তৈরি হয় এই HTML দিয়ে। আজকের এই গাইডে আমরা ওয়েব ডিজাইনের একদম প্রাথমিক বিষয়গুলো নিয়ে আলোচনা করব। আপনি যদি আগে কখনো কোডিং না-ও করে থাকেন, তবুও এই আর্টিকেলটি পড়ার পর আপনি নিজেই একটি বেসিক ওয়েবসাইট স্ট্রাকচার তৈরি করতে পারবেন।
ওয়েব ডিজাইন আসলে কী?
সহজ কথায়, ওয়েব ডিজাইন হলো একটি ওয়েবসাইটের বাহ্যিক রূপ তৈরি করার প্রক্রিয়া। একটি ওয়েবসাইটে ঢুকলে আপনি যে রং, ছবি, লেখার ফন্ট, মেনু বার এবং বাটনগুলো দেখতে পান, তার সবকিছুই ওয়েব ডিজাইনের অংশ। একজন ওয়েব ডিজাইনারের মূল লক্ষ্য থাকে ওয়েবসাইটটিকে ব্যবহারকারীদের জন্য সুন্দর, আকর্ষণীয় এবং সহজে ব্যবহারযোগ্য (User-friendly) করে তোলা।
ওয়েব ডিজাইন মূলত দুটি প্রধান ভাগে বিভক্ত:
- ইউজার ইন্টারফেস (UI): ওয়েবসাইটটি দেখতে কেমন হবে তা নির্ধারণ করা।
- ইউজার এক্সপেরিয়েন্স (UX): ভিজিটররা কত সহজে ওয়েবসাইটটি ব্যবহার করতে পারবেন তা নিশ্চিত করা।
HTML কী এবং কেন এটি ওয়েব ডিজাইনের মূল ভিত্তি?
HTML-এর পূর্ণরূপ হলো HyperText Markup Language। অনেকেই একে প্রোগ্রামিং ল্যাঙ্গুয়েজ ভেবে ভুল করেন, কিন্তু এটি মূলত একটি মার্কআপ ল্যাঙ্গুয়েজ। এর কাজ হলো ওয়েব ব্রাউজারকে (যেমন: Google Chrome, Mozilla Firefox) বুঝিয়ে দেওয়া যে, ওয়েবসাইটের কোন লেখাটি হেডলাইন, কোনটি প্যারাগ্রাফ, কোথায় ছবি বসবে এবং কোথায় লিংক থাকবে।
ওয়েবসাইট স্ট্রাকচার: একটি বাড়ি তৈরির সহজ উদাহরণ
ওয়েব ডিজাইনের পুরো বিষয়টি সহজে বোঝার জন্য আমরা একটি বাড়ি তৈরির উদাহরণ দিতে পারি। নতুনদের জন্য এটি সবচেয়ে কার্যকরী উপায়:
- HTML (কাঠামো): একটি বাড়ি তৈরি করার সময় প্রথমে যেমন ইট, রড ও সিমেন্ট দিয়ে দেয়াল বা কঙ্কাল তৈরি করা হয়, ওয়েবসাইটের ক্ষেত্রে HTML ঠিক সেই কাজটিই করে। এটি ওয়েবসাইটের মূল ভিত্তি।
- CSS (সাজসজ্জা): বাড়ির কাঠামো দাঁড় করানোর পর আমরা রং করি, টাইলস বসাই এবং সুন্দর করে সাজাই। ওয়েবসাইটের রং, ডিজাইন এবং স্টাইল নির্ধারণ করে CSS।
- JavaScript (কার্যকারিতা): বাড়িতে ফ্যানের সুইচ দিলে ফ্যান ঘোরে, কল ছাড়লে পানি পড়ে—এই ফাংশনালিটিগুলো ওয়েবসাইটে যুক্ত করে JavaScript। এটি ওয়েবসাইটকে ইন্টারেক্টিভ করে তোলে।
HTML কোডিং শুরু করার জন্য কী কী প্রয়োজন?
নতুনদের জন্য সবচেয়ে বড় সুবিধা হলো, HTML শেখার জন্য দামি কোনো সফটওয়্যার বা কম্পিউটারের প্রয়োজন হয় না। আপনার কাছে সাধারণ কনফিগারেশনের একটি ল্যাপটপ বা ডেস্কটপ থাকলেই আপনি কাজ শুরু করতে পারবেন। মূলত তিনটি জিনিসের প্রয়োজন হবে:
- একটি কম্পিউটার বা ল্যাপটপ: যেকোনো অপারেটিং সিস্টেম (Windows, Mac, বা Linux) হলেই চলবে।
- কোড এডিটর (Code Editor): যেখানে আপনি HTML কোডগুলো লিখবেন। নতুন হিসেবে আপনি কম্পিউটারের ডিফল্ট Notepad ব্যবহার করতে পারেন। তবে প্রফেশনাল কাজের জন্য VS Code (Visual Studio Code), Sublime Text অথবা Notepad++ ব্যবহার করা সবচেয়ে ভালো। এগুলো সম্পূর্ণ ফ্রি।
- ওয়েব ব্রাউজার (Web Browser): আপনার লেখা কোডগুলো ওয়েবসাইটে কেমন দেখাবে, তা দেখার জন্য একটি ব্রাউজার লাগবে। Google Chrome বা Microsoft Edge এর জন্য দারুণ কাজ করে।
একটি বেসিক HTML ওয়েবসাইটের স্ট্রাকচার
প্রতিটি HTML ডকুমেন্টের একটি নির্দিষ্ট নিয়ম বা স্ট্রাকচার থাকে। নিচে একটি বেসিক HTML স্ট্রাকচারের কোড দেওয়া হলো। কোডটি দেখে ভয় পাওয়ার কিছু নেই, আমরা এর প্রতিটি অংশ নিচে ব্যাখ্যা করছি:
<!DOCTYPE html>
<html>
<head>
<title>আমার প্রথম ওয়েবসাইট</title>
</head>
<body>
<h1>ওয়েব ডিজাইনের দুনিয়ায় স্বাগতম!</h1>
<p>এটি আমার তৈরি করা জীবনের প্রথম ওয়েব পেজ।</p>
</body>
</html>
স্ট্রাকচারটির বিস্তারিত ব্যাখ্যা:
- <!DOCTYPE html> : এটি ব্রাউজারকে জানিয়ে দেয় যে, আপনি HTML5 (HTML-এর সর্বশেষ ভার্সন) ব্যবহার করছেন।
- <html> : এটি ওয়েবসাইটের মূল বা রুট (Root) এলিমেন্ট। পুরো ওয়েবসাইটের সব কোড এই ট্যাগের ভেতরেই থাকে।
- <head> : এই অংশের ভেতরে ওয়েবসাইটের মেটা ডেটা থাকে। যেমন: ওয়েবসাইটের টাইটেল, এসইও (SEO) এর জন্য প্রয়োজনীয় কিওয়ার্ড ইত্যাদি। এই অংশের কোডগুলো ওয়েবসাইটের মূল পেজে সরাসরি দেখা যায় না।
- <title> : ব্রাউজারের একদম উপরের ট্যাবে ওয়েবসাইটের যে নাম দেখা যায়, তা এই ট্যাগের মাধ্যমে নির্ধারণ করা হয়।
- <body> : এটি সবচেয়ে গুরুত্বপূর্ণ অংশ। ওয়েবসাইটে ঢোকার পর আমরা স্ক্রিনে যা কিছু দেখি (টেক্সট, ছবি, ভিডিও, লিংক), তার সবকিছুই এই ট্যাগের ভেতরে লিখতে হয়।
নতুনদের জন্য সবচেয়ে বেশি ব্যবহৃত HTML ট্যাগ
HTML মূলত বিভিন্ন ট্যাগের সমন্বয়ে কাজ করে। ট্যাগগুলো সাধারণত জোড়ায় জোড়ায় থাকে। একটি শুরুর ট্যাগ (Opening Tag) এবং একটি শেষের ট্যাগ (Closing Tag) থাকে। নিচে নতুনদের জন্য প্রয়োজনীয় কিছু বেসিক ট্যাগ একটি ছকের (Table) মাধ্যমে তুলে ধরা হলো:
| ট্যাগের নাম | কী কাজে ব্যবহৃত হয়? | উদাহরণ |
|---|---|---|
| <h1> থেকে <h6> | ওয়েবসাইটের হেডিং বা শিরোনাম দেওয়ার জন্য। h1 সবচেয়ে বড় এবং h6 সবচেয়ে ছোট। | <h1>প্রধান শিরোনাম</h1> |
| <p> | যেকোনো সাধারণ টেক্সট বা প্যারাগ্রাফ লেখার জন্য ব্যবহৃত হয়। | <p>এটি একটি প্যারাগ্রাফ।</p> |
| <a> | এক পেজ থেকে অন্য পেজে যাওয়ার জন্য লিংক বা অ্যাংকর (Anchor) তৈরি করতে। | <a href="link">ক্লিক করুন</a> |
| <img> | ওয়েবসাইটে ছবি যুক্ত করার জন্য। এর কোনো Closing Tag নেই। | <img src="image.jpg" alt="ছবি"> |
| <ul> এবং <li> | আনঅর্ডারড লিস্ট বা বুলেট পয়েন্ট তৈরি করার জন্য ব্যবহৃত হয়। | <ul><li>আইটেম ১</li></ul> |
| <strong> | কোনো লেখাকে বোল্ড (Bold) বা মোটা করে গুরুত্বপূর্ণ বোঝাতে। | <strong>গুরুত্বপূর্ণ লেখা</strong> |
| <br> | নতুন লাইন শুরু করতে বা লাইন ব্রেক (Line Break) দিতে। | লাইন ১ <br> লাইন ২ |
কীভাবে আপনার প্রথম HTML ফাইল তৈরি করবেন? (ধাপে ধাপে গাইড)
এখন আমরা শিখব কীভাবে প্র্যাকটিক্যালি একটি HTML ফাইল তৈরি করে ব্রাউজারে রান করতে হয়। নিচের ধাপগুলো অনুসরণ করুন:
- প্রথমে আপনার কম্পিউটারে একটি নতুন ফোল্ডার তৈরি করুন। ফোল্ডারটির নাম দিতে পারেন "My First Website"।
- এবার ফোল্ডারটি ওপেন করে মাউসের Right-button ক্লিক করুন এবং New > Text Document নির্বাচন করুন।
- ফাইলটির একটি নাম দিন। যেমন: index.html। খেয়াল রাখবেন, নামের শেষে যেন অবশ্যই .html এক্সটেনশনটি থাকে। (.txt থাকলে সেটি মুছে .html লিখবেন)।
- এবার index.html ফাইলটির ওপর Right-click করে Open with > Notepad বা আপনার পছন্দের কোড এডিটরে ওপেন করুন।
- উপরে "একটি বেসিক HTML ওয়েবসাইটের স্ট্রাকচার" অংশে যে কোডটি দেওয়া আছে, সেটি হুবহু টাইপ করুন (কপি-পেস্ট না করে নিজে টাইপ করার চেষ্টা করুন, এতে দ্রুত শেখা যায়)।
- কোড লেখা শেষে Ctrl + S চেপে ফাইলটি Save করুন।
- সবশেষে, ফাইলটির ওপর ডাবল ক্লিক করুন। দেখবেন সেটি আপনার ডিফল্ট ব্রাউজারে (যেমন Google Chrome) ওপেন হয়েছে এবং আপনার লেখা ওয়েব পেজটি দেখা যাচ্ছে!
ওয়েব ডিজাইন পেশার সুবিধা ও চ্যালেঞ্জ
যেকোনো পেশার মতোই ওয়েব ডিজাইনেরও কিছু সুবিধা এবং অসুবিধা বা চ্যালেঞ্জ রয়েছে। ক্যারিয়ার শুরু করার আগে এগুলো জেনে রাখা ভালো।
ওয়েব ডিজাইনের সুবিধা:
- উচ্চ চাহিদা: প্রতিটি ব্যবসার জন্য এখন ওয়েবসাইট প্রয়োজন। তাই ওয়েব ডিজাইনারদের চাহিদা বিশ্বজুড়ে বাড়ছে।
- ফ্রিল্যান্সিং সুযোগ: Upwork, Fiverr-এর মতো মার্কেটপ্লেসগুলোতে ওয়েব ডিজাইনার হিসেবে ঘরে বসেই বিদেশি ক্লায়েন্টদের কাজ করা যায়।
- সৃজনশীলতা প্রকাশের সুযোগ: নিজের আইডিয়াগুলো কোডিংয়ের মাধ্যমে স্ক্রিনে বাস্তবে রূপ দেওয়ার দারুণ স্বাধীনতা রয়েছে।
- সহজ শিখন প্রক্রিয়া: অন্যান্য হার্ডকোর প্রোগ্রামিংয়ের তুলনায় HTML ও CSS শেখা অনেক সহজ এবং আনন্দদায়ক।
ওয়েব ডিজাইনের চ্যালেঞ্জ:
- নিয়মিত আপডেট থাকা: প্রযুক্তির পরিবর্তন খুব দ্রুত হয়। তাই প্রতিনিয়ত নতুন নতুন টুলস ও ফ্রেমওয়ার্ক শিখতে হয়।
- প্রচুর প্রতিযোগিতা: সহজ হওয়ার কারণে অনেকেই এই পেশায় আসছেন, তাই নিজেকে দক্ষ না করলে টিকে থাকা কঠিন।
- শারীরিক পরিশ্রম: ঘণ্টার পর ঘণ্টা কম্পিউটারের সামনে বসে কোডিং করার ফলে চোখ ও পিঠের সমস্যা হতে পারে। তাই কাজের মাঝে বিরতি নেওয়া জরুরি।
নতুনদের করা কিছু সাধারণ ভুল এবং সতর্কতা
HTML কোডিং শেখার শুরুতে অনেকেই কিছু সাধারণ ভুল করে থাকেন। নিচে কিছু সতর্কতা উল্লেখ করা হলো, যা আপনাকে দ্রুত একজন দক্ষ ডিজাইনার হতে সাহায্য করবে:
- ট্যাগ ক্লোজ না করা: HTML-এ প্রায় প্রতিটি শুরুর ট্যাগ (Opening tag) এর একটি শেষ ট্যাগ (Closing tag) থাকে। অনেকেই
<p>লিখে কাজ শেষ করেন, কিন্তু</p>দিতে ভুলে যান। এতে ওয়েবসাইটের ডিজাইন ভেঙে যেতে পারে। - সঠিক ইন্ডেন্টেশন (Indentation) ব্যবহার না করা: কোড দেখতে যেন পরিচ্ছন্ন হয়, সেজন্য ভেতরের ট্যাগগুলোকে কিছুটা ডানদিকে সরিয়ে লেখা উচিত। এতে পরবর্তীতে কোড বুঝতে সুবিধা হয়।
- প্র্যাকটিস না করা: শুধু ভিডিও দেখে বা আর্টিকেল পড়ে কোডিং শেখা যায় না। প্রতিদিন অন্তত ১-২ ঘণ্টা নিজে কোড লিখে প্র্যাকটিস করা বাধ্যতামূলক।
HTML শেখার পর পরবর্তী পদক্ষেপ কী?
HTML দিয়ে আপনি একটি ওয়েবসাইটের কাঠামো তৈরি করতে পারবেন, কিন্তু ওয়েবসাইটটিকে সুন্দর ও রঙিন করতে হলে আপনাকে CSS (Cascading Style Sheets) শিখতে হবে। CSS শেখার পর ওয়েবসাইটকে রেস্পন্সিভ (যেন মোবাইল ও কম্পিউটারে ঠিকঠাক দেখা যায়) করার কাজ শিখবেন।
এরপর আপনি JavaScript শিখতে পারেন, যা আপনার ওয়েবসাইটকে আরও প্রাণবন্ত ও স্বয়ংক্রিয় করবে। এই তিনটি বিষয় (HTML, CSS, JavaScript) ভালোভাবে আয়ত্ত করতে পারলে আপনি একজন সফল ফ্রন্ট-এন্ড ওয়েব ডেভেলপার (Front-end Web Developer) হিসেবে ক্যারিয়ার গড়তে পারবেন।
ওয়েব ডিজাইন এবং HTML সম্পর্কিত সাধারণ প্রশ্নোত্তর (FAQ)
১. HTML শিখতে কতদিন সময় লাগতে পারে?
এটি সম্পূর্ণ আপনার চেষ্টার ওপর নির্ভর করে। তবে প্রতিদিন ২ ঘণ্টা সময় দিলে, বেসিক HTML খুব ভালোভাবে শিখতে মাত্র ৭ থেকে ১৫ দিন সময় লাগতে পারে।
২. মোবাইল দিয়ে কি HTML কোডিং শেখা সম্ভব?
হ্যাঁ, একেবারে সম্ভব! মোবাইলের জন্য Google Play Store-এ TrebEdit বা Acode এর মতো চমৎকার কিছু অ্যাপ রয়েছে। এগুলো দিয়ে আপনি সহজেই মোবাইলে HTML কোড লিখতে এবং রান করে দেখতে পারবেন। তবে প্রফেশনাল কাজের জন্য পরবর্তীতে একটি ল্যাপটপ বা ডেস্কটপ নেওয়া জরুরি।
৩. শুধুমাত্র HTML শিখে কি অনলাইন থেকে ইনকাম করা যাবে?
বাস্তবতা হলো, বর্তমান সময়ে শুধুমাত্র HTML দিয়ে ইনকাম করা বেশ কঠিন। কারণ ক্লায়েন্টরা সম্পূর্ণ একটি ডিজাইনের কাজ চায়। ইনকাম শুরু করার জন্য HTML-এর পাশাপাশি আপনাকে অন্তত CSS এবং একটি ফ্রেমওয়ার্ক (যেমন: Bootstrap) শিখতে হবে।
উপসংহার
ওয়েব ডিজাইনের জগতে পা রাখার জন্য HTML হলো আপনার প্রথম এবং সবচেয়ে গুরুত্বপূর্ণ সিঁড়ি। শুরুতে কোডিং কিছুটা কঠিন বা নতুন মনে হতে পারে, তবে নিয়মিত প্র্যাকটিস করলে এটি আপনার কাছে পানির মতো সহজ হয়ে যাবে। একটি সুন্দর ওয়েবসাইট তৈরি করার আনন্দ আপনাকে নতুন কিছু শিখতে আরও বেশি আগ্রহী করে তুলবে। আজই আপনার কম্পিউটারে একটি নোটপ্যাড ওপেন করে প্রথম কোডটি লিখে ফেলুন। ওয়েব ডিজাইনের এই রোমাঞ্চকর যাত্রায় আপনার জন্য অনেক শুভকামনা! আরও নতুন কিছু শিখতে Priyo Tips এর সাথেই থাকুন।
