আস-সালামু-আলাইকুম। কেমন আছেন সবাই? আজকে আমি ওয়েব ডেভেলপমেন্ট নিয়ে একদম বেসিক কিছু বিষয়ে আলোচনা করবো। এতে করে আপনাদের বুঝতে সুবিধা হবে এই সেক্টরটা কেমন এবং আপনি নিজে কতোটা উপযুক্ত এটার বিষয়ে।
প্রথমে আসি ওয়েব ডেভেলপমেন্ট কি?
সহজ করে বললে, আমরা সবাই ফেসবুক সম্পর্কে জানি। ফেসবুক হচ্ছে একটি ওয়েবসাইট। আর ফেসবুক তৈরি করার জন্য যেই পদ্ধতির অবলম্বন করা হয়েছে সেই পদ্ধতির নামই ওয়েব ডেভেলপমেন্ট। একটা ওয়েবসাইট তৈরির প্রোসেসটাই হচ্ছে ওয়েব ডেভেলপমেন্ট। আর যারা এই ডেভেলপমেন্টের কাজ করে তাদেরকে ওয়েব ডেভেলপার বলে। আবার একটা ওয়েবসাইট ডেভেলপ করার আগে সেটাকে ডিজাইন করে নিতে হয় যে কিভাবে ডেভেলপ করা হবে। যারা এই ডিজাইনের কাজ করে তাদেরকেই ওয়েব ডিজাইনার বলে। আশা করি বুঝতে পারছি ওয়েব ডেভেলপমেন্ট এবং ওয়েব ডিজাইন কি।
ওয়েব ডেভেলপমেন্ট করতে কি কি লাগে?
আমরা জানতে পারলাম যে, ওয়েবসাইট তৈরির জন্য প্রথমে একজন ওয়েব ডিজাইনারকে একটি ওয়েবসাইট ডিজাইন করতে হয়। সাধারণত, এই কাজটি ডিজাইনার ফটোশপ দিয়ে করে থাকে। ওয়েবসাইটগুলো প্রদর্শনের মাধ্যম হচ্ছে ব্রাউজার। বিভিন্ন ধরনের ব্রাউজার আছে, যেমন গুগোল ক্রম, ফায়ারফক্স, সাফারি ইত্যাদি। সমস্যা হচ্ছে, ডিজাইনার ফটোশপে যেসকল ফন্ট, কালার, ইমেজ ব্যবহার করে থাকে ব্রাউজার সেগুলো রিড করতে বা বুঝতে পারে না। ব্রাউজারকে এগুলো বোঝানোর জন্য ব্রাউজারের উপযোগী ভাষার ব্যবহার করতে হয়, যেমন HTML, CSS, JavaScript ইত্যাদি। আমি এখন এগুলোর উপরে আপনাদের কিছু বেসিক ধারনা দিবো।
স্ট্যাটিক এবং ডাইনামিক ওয়েবসাইট
ওয়েবসাইটকে আমরা মূলত দুটি ভাগে ভাগ করতে পারি:
- স্ট্যাটিক এবং
- ডাইনামিক
স্ট্যাটিক ওয়েবসাইট
স্ট্যাটিক ওয়েবসাইট হচ্ছে, এখানে একজন ডেভেলপার যেভাবে ওয়েবসাইট তৈরি করে দিবে ঠিক সেভাবেই দেখাবে। পরবর্তীতে এটাকে আর পরিবর্তন করা যাবে না। এটা হতে পারে আপনার কাজের কিছু ইনফরমেশন, ছবি বা ভিডিও নিয়ে একটি তথ্যবহুল ওয়েবসাইট। ডেভেলপারকে আপনি যেভাবে নির্দেশনা দিবেন সে ঠিক সেভাবে তৈরি করে দিবে। কিন্তু, আপনি পরবর্তীতে কোনকিছু ডিলিট করা বা এডিট করতে পারবেন না। এটা করতে গেলে আবার সেই ডেভেলপারের সরনাপন্ন হতে হবে। স্ট্যাটিক ওয়েবসাইট শুধুমাত্র HTML এবং CSS জানা থাকলেই তৈরি করা সম্ভব।
ডাইনামিক ওয়েবসাইট
ডাইনামিক ওয়েবসাইট হচ্ছে যেটা রিয়েল টাইমে আপডেট করা যায়। যেমন, ফেসবুকের কথায় বলা যায়। আপনি ইচ্ছামতো এখানে রিয়েল টাইমে আপনার স্ট্যাটাস আপডেট দিতে পারছেন। আপনার ছবি আপলোড করতে পারছেন, ডিলিট করতে পারছেন ইত্যাদি। ডাইনামিক ওয়েবসাইটে সবকিছুর জন্য ওয়েব ডেভেলপারের উপর নির্ভরশীল হয়ে থাকতে হয় না। এখানে ডেভেলপার এমনভাবে সাইট ডেভেলপ করে দেয় যে পরবর্তীতে সেটাকে আপডেট করা যায়, পুরোনো অদরকারি বিষয় ডিলিট করা যায়, আবার কোনকিছু এডিট করতে চাইলে সেটাও করা যায়। ডাইনামিক ওয়েবসাইট তৈরি করতে চাইলে শুধুমাত্র HTML, CSS যথেষ্ট না। এখানে আপনাকে সার্ভার রিলেটেড প্রোগ্রামিং ল্যাংগুয়েজ ইউজ করতে হবে, যেমন PHP. PHP হচ্ছে একটি সার্ভার রিলেটেড ল্যাংগুয়েজ, যেখানে ব্রাউজার প্রথমে সার্ভারে কোন একটা তথ্যের জন্য নক করবে, তারপরে সেটা আমাদের সামনে উপস্থাপন করবে। ডাইনামিক ওয়েবসাইটের জন্য আরও লাগে একটি ডাটাবেজ। PHP এর সাথে ডাটাবেজ হিসেবে জনপ্রিয় হচ্ছে MySQL. আমি এগুলোর বিস্তারিততে যাচ্ছি না, কারন HTML, CSS না জেনে আগেই এগুলো নিয়ে বললে কিছুই বুঝবেন না।
ওয়েবসাইটগুলোকে আকর্ষনীয় ও দৃষ্টি নন্দন করার জন্য জাভাস্ক্রিপ্ট ইউজ করা হয়। এছাড়া, ওয়েবসাইটে বিভিন্ন গ্রাফিক্সের কাজ থাকে বিধায় ফটোশপ, ইলাস্ট্রেটরের ব্যবহার সম্পর্কে জানাটাও জরুরী। কিছু না হলেও বেসিক ধারনা অবশ্যই থাকা উচিত।
এখন আপনি শুধুমাত্র স্ট্যাটিক ওয়েবসাইট দিয়েই ফ্রিল্যান্সিং করতে পারবেন, কিন্তু তার জন্য আপনাকে HTML, CSS এ অনেক দক্ষ হতে হবে। এর সাথে জাভাস্ক্রিপ্ট এবং ফটোশপের উপরেও দক্ষ করে নিজেকে তৈরি করতে হবে। আসলে দক্ষ হবার কোন বিকল্প নাই।
মার্কআপ ল্যাংগুয়েজ এবং প্রোগ্রামিং ল্যাংগুয়েজ কি?
HTML এবং CSS কে বলা হয় মার্কআপ ল্যাংগুয়েজ। এরকম আরো বেশকিছু মার্কআপ ল্যাংগুয়েজ আছে। HTML এবং CSS দিয়ে আপনি যতটুকু কোড লিখবেন সে ততটুকুরই ফলাফল প্রকাশ করবে। এর বাইরে সে কিছুই করতে পারবেনা। এগুলো দিয়ে আপনি রিয়েল টাইম কোন কাজ করতে পারবেন না। যেমন, আপনি যদি এই দুটি ল্যাংগুয়েজ কে প্রশ্ন করেন যে ৫ এবং ৫ যোগ করলে কত হবো? সে আপনাকে কে কোন ফলাফল দিতে পারবেনা। এজন্যই এটাকে শুধুমাত্র মার্কআপ ল্যাংগুয়েজ বলা হচ্ছে। কিন্তু আপনি যদি কোন প্রোগ্রামিং ল্যাংগুয়েজ, যেমন PHP এবং JavaScript কে প্রশ্ন করেন যে ৫ এবং ৫ যোগ করলে কত হবো? সে আপনাকে সাথে সাথে বলে দেবে ১০। অর্থাৎ, PHP এবং JavaScript দিয়ে রিয়েল টাইম আপডেট করা যাচ্ছে। এজন্য এগুলোকে বলা হচ্ছে প্রোগ্রামিং ল্যাংগুয়েজ। এরকম PHP এবং JavaScript ছাড়াও আরো অনেক প্রোগ্রামিং ল্যাংগুয়েজ আছে।
এবার আমি আপনাদের সাথে HTML এবং CSS নিয়ে কিছু বেসিক আলোচনা করবো।
HTML এবং CSS কোডিং
এইচটিএমএল (HTML) এর অর্থ হচ্ছে Hyper Text Markup Language. এটা কোন প্রোগ্রামিং ল্যাংগুয়েজ নয়, মার্কআপ ল্যাংগুয়েজ। ওয়েব ডেভেলপার হতে হলে এই ল্যাংগুয়েজটি সবার আগে ভালোভাবে শিখতে হবে এবং এটা শেখাও অনেক সহজ। এটা শিখলেই আপনি একদম বেসিক একটা ওয়েব পেজ তৈরি করতে পারবেন।
HTML কোড কোথায় লিখবেন?
- নোটপ্যাড
এইচটিএমএল শিখতে যে শব্দগুলি ভালভাবে জানা দরকার
1. HTML Element
<h1>This is a heading</h1>
এখানে <h1> হচ্ছে একটি এলিমেন্ট যেটাকে <h1> এভাবে শুরু করে </h1> এভাবে শেষ করতে হয়। কিছু এলিমেন্ট ছাড়া বাঁকি সবগুলোই এভাবে লিখতে হয়।
2. HTML Attribute
<a title="I'm a tooltip"></a>
এখানে title হচ্ছে একটি এট্ট্রিবিউট, যা HTML এলিমেন্টের মধ্যে লিখতে হয়। আমাদেরকে HTML Element এবং Attribute বিষয়ে পরিপূর্ণ জ্ঞান অর্জন করতে হবে, অর্থাৎ এগুলির উপরে পরিষ্কার ধারনা থাকতে হবে।
নিচের HTML ডকুমেন্টটি খেয়াল করুন। এটাই HTML কোড লেখার ফরম্যাট। আমি এখন এটার উপরেই আলোকপাত করবো।
<!DOCTYPE html> <html> <head> <!--- JS/CSS file is to be added here --> </head> <body> <h1>Content demo heading</h1> <p>Content details goes here.</p> </body> </html>
প্রথম লাইনটি <!DOCTYPE html> হচ্ছে ডকুমেন্টটি কি ধরনের তা বোঝানোর (ব্রাউজারকে) জন্য দেয়া হয়। HTML এর কোন ভার্সন ব্যবহার করবেন সেটার উপর ভিত্তি করেই এই ডিক্লেয়ারেশনটি দেয়া হয়। যেমন, উপরের ডকুমেন্টটি HTML5 এর একটি ডকুমেন্ট। এরুপ যদি এটা XHTML এর 1.0 ভার্সন হতো তাহলে ডিক্লেয়ারেশনটি দিতে হতো এভাবে:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <!--- JS/CSS file is to be added here --> </head> <body> <!--- Contents are to be added here --> </body> </html>
এটা হচ্ছে ট্রানজিশনাল অর্থ্যাৎ HTML এর সকল কিছু এই্ ডকুমেন্টে লেখা যাবে সাথে সাথে deprecated (যেগুলো HTML এ বাতিল হয়ে গেছে) এলিমেন্টগুলিও ব্যবহার করা যাবে যেমন, font. একিভাবে, “xhtml1-transitional.dtd” এর জায়গায় “xhtml1-strict.dtd” দিলে deprecated এলিমেন্টগুলি ব্যবহার করা যাবে না।
নিচে বেশকিছু HTML Element এর উদাহরণ দেওয়া হলো বোঝার সুবিধার্থে। আপনারা কম্পিউটারের নোডপ্যাড ওপেন করবেন এবং সেটাকে সেভ করবেন একটি নাম দিয়ে এবং নামের শেষে .html দিয়ে। নোডপ্যাডের এক্সটেনশন হয় .txt, আমাদেরকে এটাকে চেঞ্জ করে .html দিতে হবে। অর্থাৎ, ফাইলটির নাম হতে পারে, webclass.html. এবার ফাইলটি নোডপ্যাডে ওপেন করে নিচের কোডগুলো বসায়ে ব্রাউজারে চেক করলে অনেককিছু পরিস্কার হয়ে যাবে।
HTML Headings
<!DOCTYPE html> <html> <head> <!--- JS/CSS file is to be added here --> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> </body> </html>
HTML Paragraphs
<!DOCTYPE html> <html> <head> <!--- JS/CSS file is to be added here --> </head> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
HTML Links
<!DOCTYPE html> <html> <head> <!--- JS/CSS file is to be added here --> </head> <body> <a href="https://www.realwebcare.com">This is a link</a> </body> </html>
HTML Images
<!DOCTYPE html> <html> <head> <!--- JS/CSS file is to be added here --> </head> <body> <img src="https://www.tips4blog.com/wp-content/uploads/2016/12/realblog.jpg"> </body> </html>
The lang Attribute
<!DOCTYPE html> <html lang="en-US"> <head> <!--- JS/CSS file is to be added here --> </head> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
The href Attribute
<!DOCTYPE html> <html> <head> <!--- JS/CSS file is to be added here --> </head> <body> <a href="https://www.realwebcare.com">This is a link</a> </body> </html>
Size Attributes – width/height
<!DOCTYPE html> <html> <head> <!--- JS/CSS file is to be added here --> </head> <body> <img src="https://www.tips4blog.com/wp-content/uploads/2016/12/realblog.jpg" width="204" height="204"> </body> </html>
The alt Attribute
<!DOCTYPE html> <html> <head> <!--- JS/CSS file is to be added here --> </head> <body> <img src="https://www.tips4blog.com/wp-content/uploads/2016/12/realblog.jpg" alt="realblog"> </body> </html>
এবার আসি CSS প্রসঙ্গে। CSS দিয়ে ওয়েবসাইটের বিভিন্ন HTML এলিমেন্টগুলোকে স্টাইল করা হয়। যেমন, ব্যাকগ্রাউন্ড কালার কেমন হবে, ফন্ট কালার কেমন হবে, মার্জিন কেমন হবে, ইত্যাদি। নিচে আমি একদম বেসিক কিছু উদাহরণ দিয়ে আলোচনা করবো।
CSS কে HTML Element -এ তিনটি উপায়ে ব্যবহার করা যায়:
1. Inline CSS
CSS এট্ট্রিবিউটগুলোকে সরাসরি HTML element এর মধ্যে ব্যবহার করে, যেমন
<!DOCTYPE html> <html> <head> <!--- JS/CSS file is to be added here --> </head> <body> <h1 style="color: blue;">This is a Blue Heading</h1> </body> </html>
2. Internal CSS
<style> এলিমেন্টকে <head> সেকশনে ব্যবহারের মাধ্যমে, যেমন
<!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
3. External CSS
একটি বহিরাগত CSS ফাইল ব্যবহারের মাধ্যমে, যেমন
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
এখানে href এর মধ্যে CSS ফাইলের লোকেশন দিতে হবে। যেমন, যদি আপনার কম্পিউটারের ডেস্কটপে ফাইলটি থাকে তাহলে লোকেশন হবে:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="file:///C:/Users/YOUR_NAME/Desktop/styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
এটা আমার কম্পিউটারের লোকেশন অনুযায়ী দেওয়া। আপনাদেরকে আপনাদের কম্পিউটারের লোকেশন বের করে নিতে হবে। সহজ বুদ্ধি হলো, ফাইলটির উপরে রাইট ক্লিক করে Open with -এ গিয়ে সিলেক্ট করতে হবে আপনার ব্রাউজার। ব্রাউজারের অ্যাড্রেস বারে যেটা লিখা থাকবে সেটাই হবে লোকেশন।
আবার, কোন লাইভ সার্ভারে থাকলে সার্ভারের যেই লোকেশনে আছে সেটাই দিতে হবে। যেমন, যদি আলাদা কোন ফোল্ডারে না রাখা হয় তাহলে শুধুমাত্র styles.css লিখলেই হবে। আসলে, এটা লাইভ না দেখালে বুঝতে একটু সমস্যা হবে। আপনারা আপাতত কম্পিউটারেই ট্রাই করেন।
styles.css ফাইলের মধ্যে আপনাকে <head> সেকশনের <style> এলিমেন্টের মধ্যে লেখা কোডগুলো বসায়ে দিতে হবে, যেমন
body { background-color: powderblue; } h1 { color: blue; } p { color: red; }
CSS Class
HTML এলিমেন্টের মধ্যে class নামে একটি এট্ট্রিবিউট ব্যবহার করে স্টাইল করা যায় এবং এটাই প্রফেশনাল পদ্ধতি। যেমন,
<!DOCTYPE html> <html> <head> <style> .cities { background-color: black; color: white; margin: 20px 0 20px 0; padding: 20px; } </style> </head> <body> <div class="cities"> <h2>About Realwebcare</h2> <p>At Real Web Care, we make it our job to listen, to research, and to understand the requirements unique to your business. We deliver high quality web solutions and website services through our motivated, creative and qualified specialist teams.</p> </div> </body> </html>
এখানে <div> এর মধ্যে একটি ক্লাস নিয়ে সেই ক্লাসের নামকে CSS এর মাধ্যমে স্টাইল করা হয়েছে। লক্ষ্য করবেন ক্লাসের নামের শুরুতে একটি . চিহ্ন নেওয়া হয়েছে। এটাই নিয়ম ক্লাস ডিক্লেয়ারের ক্ষেত্রে।
উপরের উদাহরণটি ছিল ইন্টারনাল CSS ব্যবহার করে। আপনারা এক্সটারনাল CSS ফাইল ব্যবহার করেও করতে পারেন এবং এটাই প্রফেশনাল পদ্ধতি। নিজে নিজে চেষ্টা করুন, কোন সমস্যা হলে বা প্রশ্ন থাকলে নিচের কমেন্ট সেকশনে জানান। আমি চেষ্টা করবো আপনার যেকোনো সমস্যার সমাধান দিতে। আজকে এই পর্যন্তই। আশা করি আমি আপনাদেরকে ওয়েব ডেভেলপমেন্টের একদম বেসিক বিষয়ে কিছুটা হলেও ধারনা দিতে পেরেছি। আমার জন্য দোয়া করবেন যাতে সুস্থ থাকি এবং আপনাদের আরও বেশি বেশি টিপস দিয়ে সাহায্য করতে পারি, ধন্যবাদ।
Very nice post.
Helpful constant for beginner