আপনি যদি অনেক ভিন্ন টেকনোলজি খুঁজে পান আজ আমাদের সাইটগুলোকে পাওয়ার দিয়ে, তবে পুরো ইন্টারনেটের দুটি সবচেয়ে গুরুত্বপূর্ণ ফাইল হলো HTML এবং CSS। হ্যাঁ, আপনি যদি কিছু জটিল জিনিস চান, তবে আপনাকে আরও টেকনোলজির প্রয়োজন হবে তাদের সাথে। কিন্তু আপনি যদি শুধু একটি সিম্পল পারসোনাল ওয়েবপেজ তৈরি করতে চান, তবে HTML এবং CSS হলো আপনার যা দরকার।
বেসিকগুলোতে পরিচিতি
এটি HTML এবং CSS-র একটি শুরুর গাইড যা আপনাকে দেখাবে কীভাবে একটি সিম্পল সাইট যেন ممکن হয় তত দ্রুত তৈরি করতে হয়। ফলাফলগুলো必然 "স্ট্যান্ডার্ডস-কমপ্লায়েন্ট" নাও হতে পারে। এবং আপনাকে নিজে কিছু পড়তে হবে যদি আপনি আরও টুইক ও এক্সপ্যান্ড করতে চান। কিন্তু এটি একটি সাইট হবে এবং "যেমন হওয়া উচিত" সেভাবেই অধিকাংশ ব্রাউজারে কাজ করবে।
যেহেতু জায়গা সীমিত, আমরা ওয়েব ডেভেলপমেন্ট ও ডিজাইনের সব দিকে গভীরে যাবো না। বরং, আমরা আপনাকে শূন্য থেকে ফুল्ली ওয়ার্কিং ওয়েবপেজ পর্যন্ত নিব, প্রক্রিয়ায় প্রতিটি জিনিস কী করে সেটি ব্যাখ্যা করে।
দুটি অপরিহার্য ফাইল
একটি আধুনিক সাইট অনেক ফাইল নিয়ে গঠিত, কিন্তু দুটিই সবচেয়ে এসেনশিয়াল: একটি HTML এবং একটি CSS ফাইল। HTML ফাইল একটি পেজের এলিমেন্ট ও স্ট্রাকচার ডিফাইন করে। CSS ফাইল সেই এলিমেন্টগুলোর আপিয়েরেন্স ডিফাইন করে।
দুটোই মূলত সাধারণ টেক্সট ফাইল, যাতে স্পেসিফিক স্ট্রাকচারড টেক্সট থাকে। এগুলো তৈরি বা টুইক করার জন্য কোনো স্পেশাল প্রোগ্রাম দরকার নেই: যেকোনো "সিম্পল" টেক্সট এডিটর চলবে। "সিম্পল" বলতে আমি আপনার টিপিক্যাল নোটপ্যাড-স্টাইল অ্যাপ্লিকেশন বুঝাচ্ছি, LibreOffice-এর এডিটর বা Microsoft Word নয় যা টেক্সটকে যেকোনোভাবে "এনরিচ" করতে পারে।
প্রথম ধাপ: আপনার ডেস্কটপে একটি নতুন ফোল্ডার তৈরি করুন যেখানে দুটি খালি টেক্সট ফাইল থাকবে। একটি নাম দিন "index.html" এবং দ্বিতীয়টিকে "style.css"।
ওয়ার্কস্পেস সেট আপ করুন
আপনার প্রিয় ব্রাউজার চালু করুন এবং HTML ফাইলটি লোড করুন, হয় "File -> Open" সিলেক্ট করে অথবা ফাইলটি ড্র্যাগ-অ্যান্ড-ড্রপ করে এর উইন্ডোতে।
HTML এবং CSS ফাইল দুটি আপনার প্রিয় নোটপ্যাড-টাইপ টেক্সট এডিটরে খুলুন।
একই সাথে তিনটি উইন্ডো দেখতে পারা সবচেয়ে সুবিধাজনক পদ্ধতি। আপনার যদি দুটি স্ক্রিন না থাকে সেগুলো ছড়িয়ে রাখতে, আমরা রিকমেন্ড করি উইন্ডোগুলো আমাদের ছবির মত সাজাতে।
ব্রাউজার উইন্ডোটি স্ক্রিনের এক পাশে "স্টিক" করুন যাতে সেটি আধা অংশ घেরে (ভার্টিক্যালি) এবং দুটি নোটপ্যাড উইন্ডো অন্য পাশে, একে অপরের নিচে রাখুন।
বিল্ডিং ব্লকসমূহ
HTML ফাইলवाले নোটপ্যাডে কিছু লিখুন এবং চেঞ্জস সেভ করুন। এরপর ব্রাউজার উইন্ডো রিফ্রেশ করুন F5 চাপায়। আপনি অবিলম্বে আপনার লিখা টেক্সট ব্রাউজার উইন্ডোতে দেখতে পাবেন।
আপনার প্রথম সাইট সেট আপ করার জন্য অভিনন্দন! এবং আমরা মজাক করছি না, কারণ ইন্টারনেটের প্রথম সাইটগুলো আপনার এখন তৈরি করা জিনিস থেকে বেশি আলাদা নয় আপিয়েরেন্সে। তখন গুরুত্বপূর্ণ জিনিস ছিল কন্টেন্টই।
HTML আপনাকে "প্রতিটি কন্টেন্টের টুকরো কী সেটি মার্ক আপ" করতে দেয়, একটি স্পেসifik সেট "কোড" ব্যবহার করে। সবচেয়ে গুরুত্বপূর্ণ কিছু নিচে:
html: একটি HTML ডকুমেন্ট নির্দেশ করে। প্রতিটি HTML ফাইলের শুরুতে থাকা উচিত।body: ব্রাউজারে আপনি যা কিছু দেখেন সেটি এইbodyট্যাগের মধ্যে এনক্লোজড থাকে। এটি একটি HTML ডকুমেন্টের ভিজুয়াল দিককে রিপ্রেজেন্ট করে।p: টেক্সট প্যারাগ্রাফimg: ছবিa href: ওয়েব অ্যাড্রেসে লিংকdiv: যেকোনো কন্টেন্টের টুকরোর চারপাশে একটি "বক্স" সেট করে যেটি আপনি পরে CSS দিয়ে "স্টাইল" করতে পারেন।
একটি কন্টেন্ট টুকরো "ডিফাইন" করতে, সেটিকে সাধারণত একই কোড দিয়ে এনক্লোজ করতে হয় শুরু ও শেষে সামান্য পার্থক্য রেখে। উদাহরণস্বরূপ, একটি টেক্সট প্যারাগ্রাফ ডিফাইন করা হয়:
<p>Standard Text Paragraph</p>
"<p>" ইঙ্গিত দেয় যে "এরপর একটি প্যারাগ্রাফ আসছে" এবং "</p>" যে "প্যারাগ্রাফ এখানে শেষ"। "p"-কে "div"-র সাথে রিপ্লেস করলে দুটি কেসেই, আপনি কন্টেন্টকে এনক্লোজ করে একটি বক্স ডিফাইন করেন প্যারাগ্রাফ হিসেবে মার্ক করার বদলে।
লক্ষ্য করুন এক্সসেপশন আছে: ইমেজ (img) এবং ডিভাইডিং লাইন (hr) এর মতো এলিমেন্টগুলো "ক্লোজিং কোড" দরকার করে না।
পরিবর্তন করুন এবং রিফ্রেশ করুন
আপনার HTML ফাইলের সব কিছু নিচের কোড দিয়ে রিপ্লেস করুন:
<html> <body> <div id="header">HEADER</div> <div id="content">CONTENT</div> <div id="footer">FOOTER</div> </body> </html>
ব্রাউজার রিফ্রেশ করুন (F5), এবং আপনি HEADER, CONTENT, এবং FOOTER শব্দগুলো একে অপরের নিচে দেখতে পাবেন। আমরা এখন তিনটি অনদৃশ্য, স্বায়ত্তশাসিত "div" বক্স তৈরি করলাম। প্রতিটিতে একটি শব্দ রয়েছে।
CSS দিয়ে তাদের আপিয়েরেন্স ডিফাইন করতে পারার জন্য, আমরা প্রতিটিকে একটি কিওয়ার্ড অ্যাসাইন করলাম, একটি "আইডেন্টিটি" (কোডে "id=name"), তাদের কন্টেন্টের সাথে মিলিয়ে: header, content, এবং footer। একটি ওয়েবপেজের সব এলিমেন্টের এমন এলিয়াস থাকতে পারে, যেটি সেট আপ হয় হয় "class" অথবা "id" হিসেবে। Classes उन আইটেমগুলোর জন্য এলিয়াস ডিফাইন করে যা একই ওয়েবপেজে একাধিকবার আসে, যেন প্যারাগ্রাফ, লিংক, ইত্যাদি। IDs उन এলিমেন্টগুলোর জন্য এলিয়াস ডিফাইন করে যেগুলো প্রতিটি পেজে একবার আসে, যেন একটি সাইটের নাম বা লোগো।
রিয়েল কন্টেন্ট
div কোডগুলোর মাঝপথ থেকে "HEADER" শব্দটি ডিলিট করুন—স্ট্রাকচার বদলানো ছাড়া—এবং তার বদলে আপনার সাইটের জন্য যে নাম চান সেটি দিন।
"CONTENT"-এর জন্যও একই করুন, কিন্তু শুধু টেক্সট দিয়ে থাকবেন না, নিশ্চিত করুন প্রতিটি প্যারাগ্রাফের শুরু ও শেষ "মার্ক" করা হয়েছে যেমন আগে দেখিয়েছিলাম। "CONTENT"-কে দুটি বা তিনটি প্যারাগ্রাফ টেক্সট দিয়ে রিপ্লেস করুন।
এখন লিংক সম্পর্কে কথা বলার সময়। আপনার টেক্সটের যেকোনো फ्रেজকে লিংকে রূপান্তর করতে, স্ট্রাকচার করুন:
<a href="ADDRESS">TEXT</a>
আপনি এটি কপি-পেস্ট করে "ADDRESS"-কে "আপনি আপনার লিংক কোথায় পয়েন্ট করাতে চান" সেটি দিয়ে রিপ্লেস করুন এবং "TEXT"-কে সেই ফ্রেজ দিয়ে যেটি আপনার সাইটে দেখাবে। আমরা আমাদের ফুটারের একটি ফ্রেজকে আমাদের ওয়েবসাইটের সাথে লিঙ্ক করলাম:
<a href="https://www.maketecheasier.com">Make Tech Easier</a>
শেষে, "FOOTER" শব্দটি আপনার নাম, একটি ছোট বাক্য যা ডিজাইন বা মালিকানা বোঝাবে, বা আপনি যা ইচ্ছা সেটি দিয়ে রিপ্লেস করুন।
চেঞ্জস সেভ করুন এবং ব্রাউজার রিফ্রেশ করুন সেগুলো দেখতে।
আপনার স্টাইল পেয়ে গেলেন (.CSS)
যেকোনো ওয়েব পেজের প্রথম এলিমেন্ট হলো head। এতে আমরা সাধারণত সাইটের আইডেন্টিটি, নাম, ক্রিয়েটর, এবং ল্যাঙ্গুয়েজ ডিফাইন করার কোড পাই, সেই সাথে কোনো টেকনোলজি—HTML ছাড়া—যেটি এতে ব্যবহৃত হয়। এক্সটার্নাল জাভাস্ক্রিপ্ট ও CSS ফাইলের অধিকাংশ লিংক এখানে থাকে। আপনার সাইটে একটি যোগ করুন নিচের কোড আপনার HTML ফাইলের সবচেয়ে উপরে যোগ করে, html ট্যাগের ঠিক পরের দিকে:
<head> </head>
CSS দিয়ে একটি ওয়েবপেজের এলিমেন্ট স্টাইল করতে পারার জন্য, আপনাকে CSS ফাইল লোড করতে হবে HTML-এর ভেতর থেকে। এবং এর মানে এটিকে আপনার "head"-এ ইনক্লুড করা। নিচের কোডটি ইঙ্গিত দেয় যে HTML পেজটি একটি "স্টাইলশিট" ফাইলকে "লিংক" করবে, টাইপ "text/css", নাম "style.css":
<link rel="stylesheet" type="text/css" href="style.css">
আমাদের কোড কপি-পেস্ট করুন, ঠিক যেমন দেখাচ্ছি, "head"-এর "ভেতরে"—অর্থাৎ "<head>"-এর নিচে এবং "</head>"-এর উপরে। চেঞ্জস সেভ করুন এবং আপনার মনোযোগ CSS ফাইলে দিন। সেখানে, নিচের কোড লিখুন:
body { }
#header, #content, #footer { }
#header, #footer { }
#header { }
#content { }
#footer { }
img { }
রিয়েল সাইট
CSS, বা Cascading Style Sheets, হলো সিম্পলি ডিসপ্লে রুলসের সেট যা একটি ওয়েব পেজের স্পেসিফিক এলিমেন্টের সাথে মেলে। CSS দিয়ে আমরা "কোথায়" এবং "কীভাবে" সব কিছু একটি ওয়েবপেজে প্রদর্শিত হবে সেটি স্টাইল করতে পারি।
পূর্বের ধাপে আমরা আমাদের পেজের সব এলিমেন্টের জন্য একটি সেট ব্ল্যাঙ্ক রুল দিয়েছিলাম। এখন, দেখি কীভাবে আমরা সেগুলোর প্যারামিটার যোগ করতে পারি যেগুলো তাদের আপিয়েরেন্স ডিফাইন করবে।
body-র সাথে শুরু করুন, যেটি আপনার ওয়েবসাইটের সব কিছু ধারণ করে। এটিকে নিচের মত পরিবর্তন করুন:
body { width: 100%; position: relative; margin: 0; padding: 0; }
উপরের রুলগুলো বলে যে আমরা চাই আমাদের সাইট ব্রাউজার উইন্ডোর সম্পূর্ণ ওয়াইডথ chiếm করুক (width: 100%), আমরা চাই না এটি ব্রাউজার উইন্ডোর এজ থেকে যেকোনো দূরত্ব রেখে (margin: 0), এবং এর চারপাশে যেকোনো ব্ল্যাঙ্ক স্পেস চাই না (padding: 0)।
একটি এলিমেন্টের সব রুল ব্র্যাকেটের মাঝপথে এনক্লোজড থাকা উচিত, এবং প্রতিটি রুল সেমিকোলন দিয়ে শেষ হওয়া উচিত যেন:
#Element_ID { RULE 1; RULE 2; RULE 3; }
আপনার "#header, #content, #footer" CSS-কে নিচের মত আপডেট করুন:
#header, #content, #footer { float: left; position: relative; }
এতে, আপনি বলছেন যে তিনটি এলিমেন্টের পজিশন কিছু কমন রুল ফলো করুক: প্রতিটি "relative" হওয়া উচিত পূর্বেরটির সাথে এবং "ফলো" করুক (float: left)। তাদের আকার, আকৃতি, আপিয়েরেন্স, বা অন্য কোনো ফ্যাক্টর যাই হোক, প্রতিটি পরবর্তী এলিমেন্টকে "পুশ" করবে, এবং তারা কখনো ওভারল্যাপ করবে না।
#header, #footer আপডেট করুন নিচের মত করে আপনার ওয়েবপেজকে আরও আসল সাইটের মতো বানাতে:
#header, #footer { width: 100%; height: 100px; background: rgba(0,0,0,0.9); color: rgba(255,255,255,0.9); text-align: center; font-size: 12px; }
উপরের কোড বলে যে আমরা চাই হেডার ও ফুটার উভয়ই ১০০% ওয়াইড, ১০০ পিক্সেল হাইট, এবং সেখানে প্রদর্শিত টেক্সট ৩em সাইজ ও সেন্টার্ড।
background এবং color রুলগুলো নির্দেশ করে, যথাক্রমে, পুরো হেডার ও ফুটার "div box"-এর কালার কী হবে এবং সেগুলোতে থাকা যেকোনো টেক্সটের কালার। "RGBA" রেড-গ্রিন-ব্লু কালার মিক্সিং স্ট্যান্ডার্ড অনুযায়ী কালার সেট করে। প্রতিটি কালারের মান ০ থেকে ২৫৫ হতে পারে, এবং রেড, গ্রিন, ব্লুর ভিন্ন কম্বিনেশন যেকোনো কালার ডিসপ্লে করতে দেয়। শেষ সংখ্যা ট্রান্সপেরেন্সি নির্দেশ করে। তাই RGBA(255,0,0,0.5) আমাদের ট্রান্সলूसেন্ট রেড দেবে, আর RGBA(50,50,255,1) ব্রাইট এবং "স olid" ব্লু দেবে।
সাইটের বেসিক কন্টেন্টের ওপর ফোকাস করে এর আপিয়েরেন্স ডিফাইন করুন:
#content { width: 80%; background: rgba(255,255,255,0.9); color: rgba(0,0,0,0.9); margin: 0 10%; }
সব চেঞ্জস আবার সেভ করুন, এবং ব্রাউজার উইন্ডো রিফ্রেশ করুন সেগুলো দেখতে।
ইমেজ স্টাইলিং
আপনার সাইটে ইমেজ যোগ করতে, আপনাকে HTML ফাইলে ফিরে যেতে হবে। সেখানে, "content"-এর ভেতরে কিন্তু প্রথম প্যারাগ্রাফের আগে, নিচের কোড লিখুন:
<img src="/PATH/FILE.JPG" alt="TEXT">
যেখানে "PATH" এবং "FILE.JPG" হলো যেকোনো ইমেজের "লোকেশন" ও ফাইলনেম, যা অনলাইন বা লোকালি উপলব্ধ, এবং "TEXT" অ্যাক্সেসিবিলিটির জন্য সেটি কী রিপ্রেজেন্ট করে সেটির বর্ণনা।
আপনি যদি সেভ করে চেঞ্জস চেক করার চেষ্টা করেন এই অডিশনের পর, আপনি পাবেন আপনার সাইট ডিফর্মড হয়েছে। সমস্যাটি ফিক্স হয়ে যাবে একবার আপনি CSS রুল তৈরি করেন ইমেজগুলো আপনার ওয়েবসাইটে কীভাবে ডিসপ্লে হবে সেটি নিয়ে।
CSS ফাইলে ফিরে যান এবং ডিক্লেয়ার করুন আপনি চান সব ইমেজ (img) লেফ্ট-এ্যালাইনড থাকুক, অন্যান্য এলিমেন্টের ফ্লো ফলো করে (float: left এবং position: relative)।
পেজের বাউন্ডারি অতিক্রম না করার জন্য, নির্দিষ্ট করুন তাদের width পেজের সর্বোচ্চ হোক (width: 100%)। ইমেজগুলো আপনার টেক্সটকে স্পর্শ না করে সেটির জন্য কিছু ভার্টিক্যাল মার্জিন যোগ করুন টপ ও বটমে। ফলাফলটি এরকম দেখাবে:
img { float: left; position: relative; width: 100%; margin: 5px 0; padding: 0; }
এখন একটি আরেকটি ইমেজ যোগ করুন, এইবার লেফ্ট বা রাইট-এ্যালাইনড। যেমন আগে, আপনাকে প্রথম HTML কোডে ফিরে যেতে হবে এবং আপনার ইমেজের লিংক পেস্ট করতে হবে, যেমন আগে দেখিয়েছিলাম। পার্থক্য হলো আপনাকে একটি "class" যোগ করতে হবে, এলিমেন্টের একটি আইডেন্টিফায়ার। তারপর CSS দিয়ে ডিসপ্লে রুল স্পেসিফাই করবেন সেটির ওপর এবং যেকোনো এলিমেন্টের ওপর যেখানে একই class "অ্যাটাচড"।
আমরা আমাদের ক্লাসের নাম দিয়েছি "alignright" যেহেতু আমরা চাই যে যেকোনো অবজেক্ট, যেখানে এটি অ্যাটাচড, সেটি পেজের ডানে প্রদর্শিত হোক।
কোডটি নিজে তৈরি করার চেষ্টা করুন। আপনার "style.css"-এ একটি .alignright {} ক্লাস যোগ করুন, এবং তারপর রুল তৈরি করুন যা সেটি স্টাইল করবে। CSS কোডটি স্পেসিফাই করবে যে আমরা চাই এলিমেন্টগুলো পেজের ডানে ফ্লোট করুক এবং ৪৬% ওয়াইড হোক (width: 46%)। আমরা চাই না ইমেজগুলো টেক্সটকে স্পর্শ করুক, তাই সেগুলোর চারপাশে ২% গ্যাপ যোগ করবেন, ১% মার্জিন (অন্য এলিমেন্ট থেকে দূরত্ব) এবং ১% 패ডিং (এলিমেন্টের চারপাশে "এক্সট্রা ব্ল্যাঙ্ক স্পেস") হিসেবে ভাগ করে।
তাই, আমাদের রুলগুলো ডিফাইন করবে যে যেকোনো ইমেজ যার সাথে .alignright ক্লাস অ্যাটাচড থাকবে সেটি পেজের ওয়াইডথের ৪৬% কভার করবে, প্লাস প্রতিটি সাইডে ১% মার্জিন, প্লাস প্রতিটি সাইডে ১% প্যাডিং। সব মিলিয়ে ৫০%—ঠিক পেজের ওয়াইডথের অর্ধেক। ফলাফলটি এরকম দেখাবে:
img.alignright { float: right; width: 46%; margin: 1%; padding: 1%; }
পরবর্তী পেজ
আপনার প্রথম ওয়েবপেজ প্রস্তুত এবং ফুল्ली অপারেশনাল। HTML এবং CSS সম্পর্কে আরও শিখলে আপনি এর কন্টেন্ট সমৃদ্ধ করতে পারেন, নতুন এলিমেন্ট যোগ করতে পারেন, এবং আপিয়েরেন্স উন্নত করতে পারেন। পরবর্তী ধাপ হিসেবে, HTML ফাইল কপি ও রিনেম করুন, এর কন্টেন্ট মডিফাই করুন এবং প্রতিটি নতুন পেজকে অন্যদের সাথে লিংক করুন।
এটা শুনতে 그리 কঠিন নয়, ঠিক না? ওয়েব ডেভেলপমেন্টে স্বাগতম: কপি, মডিফাই, এবং লিংক দিয়ে ভিন্ন পেজগুলোকে जोড়া দিয়ে, আপনি আপনার প্রথম কমপ্লিট, "প্রপার", মাল্টি-পেজ সাইট তৈরি করলেন!
