এই সুপার সিম্পল ওয়েবসাইট বানিয়ে HTML শিখুন

ওয়েবসাইট কিভাবে বানাতে হয় জানতে চান কিন্তু HTML কোড কী ব্যবহার করবেন জানেন না? এই টিউটোরিয়াল ফলো করে HTML-এ আপনার প্রথম বেসিক ওয়েবসাইট বানান, সোর্স কোড উদাহরণসহ!

আমরা ৩ বিষয় আলোচনা করব:

1. HTML কী
2. বেসিক HTML সিনট্যাক্স
3. কম্পিউটারে লোকাল ওয়েবসাইট কিভাবে বানাবেন

নোট: এই পোস্ট সম্পূর্ণ নতুনদের জন্য যারা কখনো HTML-এ কাজ করেননি। CSS বা জাভাস্ক্রিপ্ট ব্যবহার করা হয়নি, তাই এই পেজ তেমন সুন্দর হবে না। শুধু HTML এবং এর বেসিক ফাংশনালিটি দেখানো হলো লক্ষ্য।

HTML কী?

HTML মানে HyperText Markup Language। এটি ব্রাউজারে ওয়েব পেজে তথ্য প্রদর্শনের একটি পদ্ধতি। মনে রাখবেন, HTML নিজে একটি প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়। এটি একটি মার্কআপ ল্যাঙ্গুয়েজ। PHP বা Java-এর মতো প্রোগ্রামিং ল্যাঙ্গুয়েজ লজিক ও কন্ডিশন ব্যবহার করে কন্টেন্ট কন্ট্রোল করে। HTML সেটা করে না, কিন্তু এটি অত্যন্ত গুরুত্বপূর্ণ—অস্তিত্বে থাকা প্রতিটি ওয়েবসাইট HTML-এ বানানো!

ব্রাউজারে HTML ফাইল লোড করা

আপনি কম্পিউটারে HTML ফাইল তৈরি করে ব্রাউজারে লোড করতে পারেন। এটি ইন্টারনেটে নয়, শুধু আপনার লোকাল কম্পিউটার থেকে দেখা যাবে। রিয়াল ওয়েবসাইটের HTML ফাইল সার্ভারে সংরক্ষিত থাকে। কিন্তু বেসিক প্রসেস একই।

HTML ফাইল তৈরি করতে:

1. ডেস্কটপ বা যেকোনো জায়গায় যান।
2. রাইট-ক্লিক > "New" > "Text Document"। ফাইলনেম "index.html" রাখুন, ".txt" না। (এক্সটেনশন না দেখলে View ট্যাব থেকে "File name extensions" চেক করুন।)
3. ফাইলটি ব্রাউজারে খুলুন। ক্রোম আইকন থাকলে ডাবল-ক্লিক, নাহলে রাইট-ক্লিক > "Open with" > ব্রাউজার সিলেক্ট করুন।
4. ব্রাউজারে ব্ল্যাঙ্ক দেখাবে, কারণ ফাইলে কিছু নেই।

ফাইল এডিট করা

ফাইল সেটআপ হলে কোডিং শুরু করুন! HTML ফাইল এডিট করতে কোড এডিটরে খুলুন। রাইট-ক্লিক > "Open with" > এডিটর। আমি Visual Studio Code ব্যবহার করছি, অন্যদেরও ব্যবহার করতে পারেন: Notepad++, Sublime, Atom, Brackets।

ইন্ডেক্স ফাইল ব্রাউজার ও এডিটরে উভয়ে খোলা থাকলে কোড লিখা শুরু করুন!

HTML ট্যাগ

HTML ট্যাগها থেকে বানানো হয়। ট্যাগ হলো স্পেশাল টেক্সট যা আপনার ওয়েব পেজের অংশগুলাকে মার্ক আপ বা পৃথক করার জন্য ব্যবহার হয়। তাই নাম "markup" language। এই ট্যাগগুলো ব্রাউজারকে বলে ট্যাগের ভেতরের কন্টেন্ট নির্দিষ্টভাবে দেখান।

উদাহরণ:

This is my very first website and I'm <b>extremely excited!!!!!</b>

"extremely excited" শব্দগুলো <b> ট্যাগে আছে— "b" মানে বোল্ড। ফাইল সেভ করে ব্রাউজার রিলোড করলে টেক্সট বোল্ড দেখাবে।

আপনি-अপনি HTML লিখলেন! এক্সাইটেড লাগছে? 🙂

HTML ট্যাগের এনাটমি

ফ্রেজের আগের ট্যাগ হলো opening tag — <b>। ফ্রেজের পরের ট্যাগ হলো closing tag — </b>। ক্লোজিং ট্যাগে ফরোয়ার্ড স্ল্যাশ থাকে। এই দুটি ট্যাগ ব্রাউজারকে বলে তাদের মাঝপথের টেক্সট বোল্ড করুন। ব্রাউজার HTML লোড করলে ট্যাগগুলো অদৃশ্য থাকে।

HTML ডকুমেন্টের বেসিক স্ট্রাকচার

আমরা যে লাইন লিখলাম সেটি কাজ করলো কারণ আমরা ফাইলটি .html হিসেবে সেভ করলাম। কিন্তু রিয়াল ইন্টারনেট HTML-এ আরও ট্যাগ যোগ করতে হয়।

Doctype এবং HTML ট্যাগ

সর্বপ্রথম doctype ট্যাগ দরকার। এটি এক্সাক্টলি HTML ট্যাগ নয়, কিন্তু ব্রাউজারকে বলে এটি HTML5 ডকুমেন্ট। <!DOCTYPE html>। এটি ক্লোজিং ট্যাগ দরকার নেই। পুরনো doctype-ها HTML 4 বা XHTML ছিল, এখন HTML5 স্ট্যান্ডার্ড।

Doctype-র পর HTML ট্যাগ থাকে:

<!DOCTYPE html> <html> </html>

Head এবং Body সেকশন

মেন HTML ট্যাগের ভেতর কন্টেন্ট সাধারণত দুটি সেকশনে ভাগ: Head এবং Body।

<!DOCTYPE html> <html> <head> </head> <body> </body> </html>

<body> This is my very first website and I'm <b>extremely excited!!!!!!</b> </body>

বেসিক Head ট্যাগসমূহ

Meta ট্যাগ

Head-এ প্রথমে এই মেটা ট্যাগ থাকবে—ক্যারেক্টার এনকোডিং সেট করে।

<meta charset="utf-8">

পরবর্তী গুরুত্বপূর্ণ মেটা ট্যাগ হলো ভিউপোর্ট ট্যাগ:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Title ট্যাগ

মেটা ট্যাগের পাশাপাশি সবচেয়ে গুরুত্বপূর্ণ ট্যাগ হলো টাইটেল ট্যাগ:

<title>My First Website</title>

<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My First Website</title> </head>

বেসিক Body ট্যাগসমূহ

এখন ফান পর্ব—বডি ট্যাগগুলো কন্টেন্ট কন্ট্রোল করে যা আপনি দেখেন। মোলদার বডি ট্যাগগুলো ওয়ার্ড ডকুমেন্টের মতো—হেডলাইন, বোল্ড টেক্সট, লিস্ট, টেবিল বানানো যায়। CSS-এ আসার আগে এই ট্যাগগুলো কন্টেন্ট অর্গানাইজ ও স্টাইল করতে হেল্প করত। সব ট্যাগ এখন 그만큼 ব্যবহার হয় না, CSS দিয়ে স্টাইল করা যায়। কিন্তু বেসিক ট্যাগগুলো জানা উপকারী।

Header ট্যাগ

হেডলাইন বা হেডার ট্যাগ H লেটার দিয়ে ডেজিগনেটেড। H-র পর নাম্বর থাকে: <h1> থেকে <h6>। <h1> সর্বোচ্চ প্রায়োরিটি, সাধারণত পেজ টাইটেলে ব্যবহার হয়। আমরা <h1> যোগ করব "My First Website"। সাবটাইটেলে <h2> "An HTML Playground"। বাকি H ট্যাগও যোগ করি। বডি ট্যাগ এরকম হবে:

<body> <h1>My First Website</h1> <h2>An HTML Playground</h2> <h3>An HTML Playground</h3> <h4>An HTML Playground</h4> <h5>An HTML Playground</h5> <h6>An HTML Playground</h6> </body>

Paragraph

পैरাগ্রাফ বা <p> ট্যাগ দিয়ে কন্টেন্ট ব্লকে ভাগ করা যায়। <p> ট্যাগ দিয়ে প্যারাগ্রাফ বানান। প্লেসহোল্ডার টেক্সট পেতে "lorem ipsum" গুগল করুন। লরেম ইপসাম নানসেন্স ল্যাটিন ওয়ার্ড যা পাবলিশিং-ডিজাইনে লেআউটের কাজে লাগে। দুটি প্যারাগ্রাফ বানাই:

<p> Lorem ipsum dolor sit amet... </p> <p> Maecenas feugiat iaculis imperdiet... </p>

Line Break

প্যারাগ্রাফের স্পেস ছাড়া নতুন লাইনে যেতে <br> ট্যাগ ব্যবহার করুন। HTML-এ এন্টার বা স্পেসবার চাপলে ব্রাউজার শুধু এক স্পেস দেখায়। লাইন ব্রেকের জন্য <br> লাগবে। একাধিক <br> দিয়ে বেশি স্পেস যোগ করা যায়।

Fusce sit amet rutrum lacus.<br><br><br><br><br/> Sed efficitur laoreet nisl...

Void elements ক্লোজিং ট্যাগ দরকার নেই

<br> ক্লোজিং ট্যাগ নেই কারণ এটি টেক্সট ঘেরে নয়। এই ট্যাগগুলোকে void elements বলে। XHTML-এ <br/> লাগত, HTML5-এ স্ল্যাশ লাগে না। ব্রাউজার দুটোই পড়ে, কিন্তু স্ল্যাশ ছাড়াই লিখতে সুপারিশ করা হয়।

Style ট্যাগ

স্টাইল ট্যাগগুলো টেক্সটে স্টাইল যোগ করে: বোল্ড, ইট্যালিক, আন্ডারলাইন, এমফাসাইজড, স্ট্রং। CSS এসার আগে এই ট্যাগগুলো বেশি ব্যবহার হতো। এখন কম ব্যবহার হয়। প্রতিটি স্টাইল ট্যাগ:

• <b> — বোল্ড
• <i> — ইট্যালিক
• <u> — আন্ডারলাইন
• <em> — ইট্যালিক (ব্রাউজার ইট্যালিক হিসেবে দেখায়)
• <strong> — বোল্ড

<b>Sed efficitur laoreet nisl,</b><br> <i>ac faucibus velit hendrerit sit amet.</i><br> <u>Phasellus ac orci eget nisi porta accumsan a eget ex.</u><br> <em>Nam lacinia dolor at mi tristique rhoncus.</em><br> <strong>Maecenas nisl est, rhoncus id cursus non, tempor a neque.</strong>

Horizontal Rule

<hr> ট্যাগ হরিজন্টাল লাইন বানায় পেজে। void element, ক্লোজিং ট্যাগ লাগে না।

... <strong>Maecenas nisl est...</strong> <hr> Phasellus venenatis dapibus laoreet...

Anchor Link

লিংক ইন্টারনেটে ঘুরাফিরা প্রধান উপায়। লিংক ট্যাগ <a> — "anchor" শব্দ থেকে। লিংক তৈরি করতে <a> ট্যাগে ক্লিকযোগ্য টেক্সট রাখুন। <a> ট্যাগে href অ্যাট্রিবিউট লাগে (hypertext reference)। ভ্যালু হবে ডেস্টিনেশন URL। গুগল লিঙ্ক করতে <a href="https://www.google.com/" target="_blank">Sed in lacus a augue rutrum</a>। target অ্যাট্রিবিউট লিংক নতুন ট্যাবে খুলবে (_blank) নাকি সেম পেজে (ডিফল্ট)।

Images

ইমেজ ট্যাগ <img>। void element, ক্লোজিং ট্যাগ লাগে না। src অ্যাট্রিবিউটে ইমেজের URL দিন। প্লেসহোল্ডার ইমেজের জন্য https://placeholder.com/ ব্যবহার করুন।

<img src="https://via.placeholder.com/600x300.jpg">

<img src="600x300.jpg"> 

<img src="https://via.placeholder.com/600x300.jpg" border="10">

Lists

HTML-এ বুলেটেড বা নাম্বারড লিস্ট বানানো সহজ। বুলেটেড = unordered list (<ul>), নাম্বারড = ordered list (<ol>)। লিস্ট আইটেম <li> ট্যাগে। ফলের unordered list:

<ul> <li>apples</li> <li>oranges</li> <li>pineapples</li> <li>mangoes</li> <li>dragonfruit</li> </ul>

Nested Lists

লিস্টের ভেতর লিস্ট নেস্ট করা যায়। আপেলের টাইপগুলো আপেল আইটেমের নিচে নেস্ট করুন:

<ul> <li>apples <ul> <li>golden delicious</li> <li>granny smith</li> <li>gala</li> </ul> </li> <li>oranges</li> ... </ul>

Nesting এবং Indentation

এক ট্যাগ অন্য ট্যাগের ভেতর থাকাকে nesting বলে। ভেতরের এলিমেন্ট = child element, বাইরের = parent element। চাইল্ড এলিমেন্ট ইন্ডেন্ট করলে কোড রিডেবল হয়। ফলের লিস্টে মেইন আইটেমগুলো ইন্ডেন্ট করা হয়েছে, আপেল টাইপগুলো আরও বেশি ইন্ডেন্ট।

ইন্ডেন্টেশন কোড মানবের জন্য পাঠযোগ্য করে

এই প্র্যাকটিস HTML-এ মাত্র নয়, CSS, JavaScript, সব প্রোগ্রামিং ল্যাঙ্গুয়েজে 굿 প্র্যাকটিস। কম্পিউটারের জন্য লাগে না, কিন্তু মানুষ কোড পড়তে পারতে হয়। আমার প্রথম চাকরিতে ইন্ডেন্টেশনই প্রথম শিখানো হয়েছিল। অন্যের গুলো কোড পড়তে গেলে মেস হলে খুব কষ্ট হয়। তাই ইন্ডেন্টেশন সহজ উপায়।

Table

টেবিল ট্যাগ নেস্টিং ও ইন্ডেন্টেশন ব্যবহার করে। টেবিল ডেটা রো-কলামে অর্গানাইজ করার জন্য। উদাহরণস্বরূপ মাসিক বাজেট টেবিল বানাই।

টেবিল বিল্ডিং

<table> ট্যাগ দরকার। ভেতরে টেবিল রো (<tr>), টেবিল সেল (<td>), টেবিল হেডার (<th>)। প্রথম রো:

<table> <tr></tr> </table>

<table> <tr> <th>Month</th> <th>Rent</th> <th>Utilities</th> <th>Groceries</th> <th>Eating Out</th> <th>Entertainment</th> </tr> </table>

<table> <tr> <th>Month</th> <th>Rent</th> <th>Utilities</th> <th>Groceries</th> <th>Eating Out</th> <th>Entertainment</th> </tr> <tr> <td>August</td> <td>$1500</td> <td>$150</td> <td>$350</td> <td>$100</td> <td>$50</td> </tr> </table>

টেবিল স্টাইলিং

বিল্ট-ইন অ্যাট্রিবিউট দিয়ে স্টাইল: border="1" (১ পিক্সেল বর্ডার), cellpadding="10" (সেলের ভেতর স্পেস), cellspacing="0" (সেল মাঝপথে স্পেস নেই)।

<table border="1" cellpadding="10" cellspacing="0">

টেবিলের 베스트 প্র্যাকটিস

প্রতিটি রোয়ে একই সংখ্যক কলাম থাকতে হয়। অন্যথায় টেবিল ভেঙে যায়। Groceries সেল ডিলিট করলে হেডার শিফ্ট হয়ে যায়।

টেবিল সেল একাধিক কলাম/রো স্প্যান করতে পারে

colspan অ্যাট্রিবিউট দিয়ে এক সেল একাধিক কলাম ঘেরতে পারে। Utilities হেডার দুটি কলামে স্প্যান করাতে <th colspan="2">Utilities</th>।

টেবিল যুগে ওয়েবসাইট লেআউটে ব্যবহৃত হতো

টেবিল শুধু ডেটা নয়, পুরনো দিনে ওয়েবসাইট লেআউটে (হেডার, মেইন, ফুটার) বড় টেবিল ব্যবহার হতো। এখন টেবিল কম ব্যবহার হয়, HTML ইমেইল ছাড়া।

শেষ কথা

আপনি HTML-এ একটি বেসিক ওয়েবসাইট বানালেন। HTML ও ওয়েব ডেভেলপমেন্ট শিখতে চাইলে নিচের রিসোর্সগুলো দেখুন:

• freeCodeCamp — ফ্রি অনলাইন কোডিং বুটক্যাম্প, নন-প্রফিট। অনেক গ্র্যাজুয়েট ফুল-টাইম ওয়েব ডেভেলপার হয়েছে।
• The Web Developer Bootcamp by Colt Steele — Udemy-এ কমপ্লিট ফ্রন্ট-এন্ড ও ব্যাক-এন্ড বুটক্যাম্প।