বর্তমানে দৈনন্দিন জীবনের প্রয়োজনীয় প্রায় কাজই হয় অনলাইনে। আর এই অনলাইন দুনিয়ার মেরুদণ্ড হলো ওয়েবসাইট। আমরা প্রতিদিনই অসংখ্য ওয়েবসাইট দেখি। কিন্তু কখনো কি আমাদের মনে এই চিন্তা এসেছে যে, এই ওয়েবসাইটগুলো তৈরি হয় কীভাবে?
এর পেছনে মূলত থাকে কোড, আর সেই কোডের প্রথম ধাপ হলো HTML। এই লেখায় আমরা শিখবো, নিজের কম্পিউটারে, আলাদা কোনো সফটওয়্যার ছাড়াই, শুধুমাত্র নোটপ্যাড আর ব্রাউজার দিয়ে কীভাবে একটি সাধারণ ওয়েবপেজ বানানো যায়।
HTML
HTML এর পূর্ণরূপ হলো HyperText Markup Language। অর্থাৎ, এটি একটি “চিহ্নভিত্তিক ভাষা”। Markup মানে হচ্ছে, আমরা ট্যাগ দিয়ে কোন অংশটি কেমন হবে তা “চিহ্নিত” করে দিই। যেমন, যদি <p> লেখা হয়, ব্রাউজার বুঝবে এটা একটি প্যারাগ্রাফ। <h1> লিখলে বুঝবে এটা একটি শিরোনাম (heading)। HTML দিয়ে আমরা বলে দিই কোনটা শিরোনাম, কোনটা প্যারাগ্রাফ, কোনটা ছবি বা লিংক ইত্যাদি। HTML শেখার জন্য প্রথমেই আমাদের কিছু শব্দের সাথে পরিচিত হতে হবে, যেমন, ট্যাগ, Content, Attribute.
HTML ট্যাগ (Tag)
HTML এর মূল গঠন তৈরি হয় ট্যাগ দিয়ে। প্রতিটি ট্যাগ থাকে < > এই কোণাকৃতির বন্ধনীর (angle brackets) মধ্যে।
উদাহরণ: <h1>Welcome To Blog</h1>
এখানে <h1> বলছে শুরু, আর </h1> বলছে শেষ। প্রথমটা হলো opening tag আর দ্বিতীয়টা হলো closing tag (যেখানে / চিহ্ন থাকে)। এই h মানে হলো heading। যা ব্রাউজারকে নির্দেশ করে: “এই লেখাটা শিরোনাম হিসেবে দেখাও”।
আমরা opening tag আর closing tag এর মধ্যে যা লিখবো সেটাই হলো Content. এখানে “Welcome To Blog” হলো Content. Content লেখার ক্ষেত্রে কোনো বাধ্যবাধকতা নেই, যা লিখতে ইচ্ছে হয়, তাই লিখবো।
Attribute
HTML ট্যাগের ভিতরে কখনো কখনো আমরা বাড়তি কিছু তথ্য যোগ করি, যেগুলোকে বলে attribute। উদাহরণ: <img src=”image.jpg”>
এখানে <img> বলছে “ছবি দেখান”। src বলছে “ছবির ঠিকানা”। Attribute গুলো সাধারণত এমনভাবে লেখা হয়: নাম=”মান” এগুলো < > এর ভিতরেই বসানো হয়, এবং একাধিক অ্যাট্রিবিউট দেওয়া যায়।
কিছু দরকারি HTML এর ট্যাগ ও তাদের ব্যবহার
চলুন কিছু দরকারি HTML শিখে আসিঃ
- <html> : ট্যাগটি পুরো HTML ডকুমেন্টকে ঘিরে রাখে। এর মধ্যে ওয়েবসাইটের সবকিছু লেখা হয়।
- <head>: ট্যাগের ভেতরে থাকে শিরোনাম, মেটা-তথ্য, স্ক্রিপ্ট, স্টাইলশিট ইত্যাদি, যা ওয়েবপেজে সরাসরি দেখা যায় না কিন্তু প্রয়োজনীয়।
- <title>: ট্যাগের মাধ্যমে ব্রাউজারের ট্যাবে যে নামটি দেখাবে, তা নির্ধারণ করা হয়।
- <body>: ট্যাগের মধ্যে ওয়েবসাইটের মূল কনটেন্ট বা যেগুলো স্ক্রিনে দেখা যায়, সেগুলো রাখা হয়।
- <h1> থেকে <h6> পর্যন্ত ট্যাগগুলো শিরোনাম দেখানোর জন্য ব্যবহৃত হয়। এখানে <h1> সবচেয়ে বড়, আর <h6> সবচেয়ে ছোট শিরোনাম।
- <p> ট্যাগ ব্যবহার করে প্যারাগ্রাফ লেখা হয়।
- <a href=””> ট্যাগ লিংক তৈরি করতে ব্যবহৃত হয়, যার মাধ্যমে এক পেজ থেকে অন্য পেজে যাওয়া যায়।
- <img src=””> ট্যাগ দিয়ে ওয়েবপেজে ছবি দেখানো হয়। src-এ ছবির লিংক বা ঠিকানা দেওয়া হয়।
- <br> ট্যাগ একটি নতুন লাইন তৈরি করতে ব্যবহৃত হয়, ঠিক যেন টাইপ করার সময় লাইন ব্রেক দেওয়া হলো।
- <ul>, <ol> এবং <li> ট্যাগগুলো ব্যবহার করে আনঅর্ডার্ড (bullet) ও অর্ডার্ড (numbered) তালিকা তৈরি করা যায়।
- <table>, <tr> এবং <td> ট্যাগ ব্যবহার করে ওয়েবপেজে টেবিল তৈরি করা হয়। <tr> দিয়ে সারি (row) আর <td> দিয়ে কলাম (cell) বোঝানো হয়।
- <form> ও <input> ট্যাগ ব্যবহার করে ইউজার ইনপুট নেওয়ার জন্য ফর্ম তৈরি করা যায়, যেমন নাম, ইমেইল, বাটন ইত্যাদি।
নিজের ওয়েবসাইট
অবশেষে সেই কাঙ্ক্ষিত কাজ, আমরা এখন হাতে কলমে ওয়েবসাইট বানাবো। চলুন ধাপে ধাপে শিখি,
ধাপ ১: নোটপ্যাড (Windows) বা TextEdit (Mac) খুলুন।
ধাপ ২: File > Save As…
নাম দিন: index.html
(ফাইলের নাম যেইমাত্র আপনি .html দিলেন তখনই এটি html ফাইলে রুপান্তর হয়ে গেছে!)
ধাপ ৩: ডাবল ক্লিক করলেই খুলে যাবে আমাদের নিজের ওয়েবপেজ!
কী দেখতে পেলেন? সাদা পেইজ? হ্যাঁ, কারণ, আমরা এখনো কিছু লিখি নাই। চলুন, তাহলে কোড লেখা শুরু করি।
ধাপ ৪:
আবার নোটপ্যাডে যেয়ে লিখি,
<html>
<head>
</head>
<body>
</body>
</html>
এটি হলো বেসিক HTML কাঠামো। অর্থাৎ, আমাদের প্রয়োজনীয় ট্যাগ লেখা শেষ। এখন, আমরা Element যোগ করবো।
<html>
<head> Try_1
</head>
<body>
<p>Hello World! </p>
</body>
</html>
Ctrl+s দিয়ে সেভ করে, ফাইলের উপর আবার ডাবল ক্লিক করলেই খুলে যাবে আমাদের নিজের ওয়েবপেজ! এইভাবেই বিভিন্ন ট্যাগ ব্যবহার করে আমরা আরো উন্নত বৈশিষ্ট্য-এর ওয়েবপেজ বানাবো সম্ভব। কতগুলি এমন সুন্দর সুন্দর, ব্যবহারকারী বান্ধব ওয়েবপেজ নিয়েই ওয়েবসাইট বানানো সম্ভব!
চলুন আরও কিছু উদাহরণ দেখা যাক,
তালিকা (List):
<body>
<ul>
<li>Read Books</li>
<li>Learn Code</li>
</ul>
</body>
টেবিল (Table):
<body>
<table border=”1″>
<tr>
<th>Name</th>
<th>Occupation </th>
</tr>
<tr>
<td>Fabiha</td>
<td>Developer</td>
</tr>
</table>
</body>
ফর্ম (Form):
<body>
<form>
Name: <input type=”text” name=”name”><br>
<input type=”submit” value=”submit”>
</form>
</body>
HTML দিয়ে আপনি ওয়েবপেজের কাঠামো (skeleton) তৈরি করেন। তবে রঙ-ছাঁট, ডিজাইন আনতে চাইলে শিখতে হবে CSS, আর ওয়েবসাইটে কার্যকারিতা আনতে চাইলে শিখতে হবে JavaScript। তবে শুরু সবসময় HTML দিয়েই। আপনি যদি এখনই নোটপ্যাড খুলে এই লেখায় দেখানো কোডগুলো কপি করে .html ফাইলে সেভ করেন, তাহলে এক মিনিটের মধ্যেই আপনি আপনার প্রথম ওয়েবসাইট বানিয়ে ফেলতে পারেন! তাই একদম নিজে করে দেখুন, কারণ ওয়েব ডেভেলপমেন্ট শেখার সবচেয়ে ভালো উপায় হলো নিজে কোড করা।
এই রকম আরো ব্লগ পড়তে, ক্লিক করুন
লেখিকা,
উম্মে ফারহানা সুমাইয়া,
ইন্টার্ন, কন্টেন্ট রাইটিং ডিপার্টমেন্ট,
YSSE.