গণপ্রজাতন্তী বাংলাদেশ সরকার স্কুল, কলেজ এবং মাদ্রাসায় পড়ুয়া শিক্ষার্থীদের উপবৃত্তি প্রদান করে থাকেন, যারা আর্থিক…
এইচটিএমএল এর মাধ্যমে সাধারণত ওয়েব ডেভলপাররা ওয়েবসাইটে কাজ করে থাকে।
আপনি যে সমস্ত ওয়েবপেজ গুলো ইন্টারনেটে খুঁজেপান সেগুলো তৈরি করতে ব্যবহার করা হয় এইচটিএমএল। এইচটিএমএল হলো একটি মার্কআপ ভাষা। আজকের আর্টিকেলে আমরা এইচটিএমএল সম্পর্কে জানানোর চেষ্টা করব।
এইচটিএমএল মানে হল হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ।এটি “<”এর থেকে কম এবং “>” চিহ্নের চেয়ে বড় বন্ধনীর ভিতরে বিন্যাস করা “ট্যাগ” ব্যবহার করে একটি ওয়েব পেজের বিন্যাস এবং কাঠামো সংঙ্গায়িত করা।প্রতিটি ওয়েব পেজের উপাদান একটি নির্দিষ্ট লেবেল অন্তরর্ভুক্ত করে।ব্রাউজারের পেজের বিষয়গুলো কীভাবে ফরমেট বা গঠন করতে হয় তা সম্পূর্ণ ওয়েব পেজের সেই উপাদানগুলির সিরিজের উপরে নির্ভর করে।
চলুন দেখে নিই এইচটিএমএল করতে কী কী ট্যাগ ব্যবহার করে হয়।এইচটিএমএল এর এসব মৌলিক বিষয়গুলো ওয়েব পেজে কাজ করতে ব্যবহার করা হয়।
আপনি ব্যবহার করতে পারেন এমন আরও অনেক এইচটিএমএল ট্যাগ আছে, কীন্তু উপরের ট্যাগগুলি ইন্টারনেট জুড়ে বেশিরভাগ ওয়েব পেজে এগুলো বেশি ব্যবহার হয়ে থাকে।
কম্পিউটার বেশিরভাগ পেজই সংরক্ষন করতে পারে না।এতকরে পেজগুলো ইন্টরনেট ওয়েব সার্ভারে সংরক্ষন করতে হয়।সুতরং আপনি যখন কোন ওয়েবসাইটে কোন নিবন্ধন বা অন্যান বিষয়বস্তু পরিদর্শন করেন, সার্ভার আপনার ব্রাউজারটিকে .html ফাইল পাঠায় যেখানে পেজটি সংরক্ষিত রয়েছে।
আপনি ক্রোম ব্রাউজারের যেকোন ওয়েব পেজের জন্য এইচটিএমএল কোড দেখতে পারেন পেজের যেকোন জায়গায় ডান-ক্রিক করে।এইচটিএমএল আপনাকে ওয়েব পেজের পিছনের কোড দেখাবে এবং ফাইলের শীর্ষে প্রথম ট্যাগ দ্বারা একটি এইচটিএমএল ফাইল দেখতে পাবেন।
আপনি আর একটা বিষয় লক্ষ্য রাখবেন যে সার্চ কোডে আরো অনেক ধরণের ট্যাগ রয়েছে যা মোটেও এইচটিএমএল ট্যাগ নয়।
আপনি যদি নিজের এইচটিএমএল ফাইল তৈরি করা শুরু করতে চান, তাহলে আপনাকে জানতে হবে কীভাবে উপরের বর্নিত মৌলিকগুলোর বাইরে সবচেয় সাধারণ এইচটিএমএল এর ব্যবহার করতে হয়।
আপনি আপনার নিজের ওয়েব পেজে কোড করার সময় ব্যবহার করতে পারেন এমন আরও কিছু এইচটিএমএল ট্যাগের কয়েকটি উদাহরণ নিচে দেওয়া হল৷
আপনার ওয়েব পৃষ্ঠার ভিতরে একটি লিঙ্ক এম্বেড করতে, একটি href ব্যবহার করুন।
<ahref=”https://www.groovypost.com/tips/lifehack-find-your-iphone-using-hey-siri/”>Find Your iPhone Using Hey Siri</a>এটি "He Siri ব্যবহার করে আপনার আইফোন খুঁজুন" পাঠ্যটিকে লিঙ্ক করবে যে URL লিঙ্কটি আপনি "href=" এর পরে ডবল-উদ্ধৃতিতে অন্তর্ভুক্ত করেছেন।
আপনি img src ব্যবহার করে একটি ওয়েব পেজে ছবি সন্নিবেশ করতে পারেন।
<img src="my-picture.jpg" alt="আমার প্রোফাইল ফটো" style="wifth:150px; height:120px">এটি ওয়েব সার্ভার থেকে my-picture.jpg ছবিটি টেনে আনবে এবং 150 পিক্সেল প্রশস্ত এবং 120 পিক্সেল উচ্চতা সহ আপনি এই ট্যাগটি যে পেজেরেখেছেন সেখানে এটি প্রদর্শন করবে৷
Alt প্যারামিটার ব্রাউজারগুলিতে "আমার প্রোফাইল ফটো" পাঠ্যটি প্রদর্শন করে, যা চিত্রটি প্রদর্শন করতে পারে না। আপনি যদি "স্টাইল" প্যারামিটারটি অন্তর্ভুক্ত না করেন, তাহলে ছবিটি তার আসল রেজোলিউশনে প্রদর্শিত হবে, যা আপনি যে পৃষ্ঠাটি এম্বেড করছেন সেই পৃষ্ঠার ক্ষেত্রের জন্য খুব বড় বা খুব ছোট হতে পারে।
UL এবং OL তালিকা তৈরি করতে
আপনি যদি আপনার পেজের বুলেট বা সংখ্যাযুক্ত তালিকা ব্যবহার করতে চান তবে দুটি ট্যাগ রয়েছে যা আপনাকে এটি করার অনুমতি দেয়।
নিম্নলিখিত কোড একটি অসংক্ষ্যায়িত তালিকা (বুলেট) সন্নিবেশ করাবে:
<ul>
<li>আইটেম 1</li>
<li>আইটেম 2</li>
<li>আইটেম 3</li>
</ul>ফলাফলঃ
তালিকার শুরুতে <ul> এবং তালিকার নীচে </ul> ব্যবহার করুন। প্রতিটি আইটেমকে <li> এবং </li> ট্যাগের মধ্যে আবদ্ধ করুন।
আপনি <ol> ব্যবহার করে একটি সংখ্যাযুক্ত তালিকার জন্য একই পদ্ধতি ব্যবহার করতে পারেন যার অর্থ "অর্ডার করা তালিকা"।
<ol>
<li>আইটেম 1</li>
<li>আইটেম 2</li>
<li>আইটেম 3</li>
</ol>ওয়েব ডিজাইনাররা ওয়েব পেজ ফরম্যাট করার জন্য বড় টেবিল ব্যবহার করতেন। কীন্তু ক্যাসকেডিং স্টাইল শীট (সিএসএস) এর আবির্ভাবের সাথে, এটি আর প্রয়োজনীয় নয়। পরিবর্তে, CSS ফাইলগুলি ওয়েব সার্ভারে সংরক্ষণ করা হয়, এবং এইচটিএমএল পেজগুলি সেই ফাইলগুলিকে কল করে কীভাবে মার্জিন, ফন্টের আকার, রঙ এবং আরও অনেক কিছু ফর্ম্যাট করতে হয়।
যাইহোক, টেবিলগুলি ডেটার মতো জিনিসগুলি প্রদর্শন করতে এখনও কার্যকর। একটি টেবিল সন্নিবেশ করতে, বিষয়বস্তুর শুরুতে <TABLE> দিয়ে আবদ্ধ করুন এবং </TABLE> দিয়ে শেষ করুন।
প্রতিটি সারি <TR> এবং </TR>, এবং প্রতিটি পৃথক কলাম শিরোনাম <TH> এবং </TH> দিয়ে আবদ্ধ করুন। প্রতিটি নিয়মিত কক্ষ, <TD> এবং </TD> দিয়ে আবদ্ধ করুন।
<table border=1>
<tr> <!--Table Row--!>
<th>নাম</th> <!--Table Heading--!>
<th>ঠিকানা</th>
<th>ফোন নম্বর</th>
</tr>
<tr>
<td>রায়হান মিয়া</td>
<td>উত্তরা, ঢাকা-১২৩০ </td>
<td>০১৭xx-xxx-xxx</td>
</tr>
</ table>শুধুমাত্র এই মৌলিক উপাদানগুলির সাহায্যে, আপনি ইন্টারনেটে আপনার বিষয়বস্তু প্রদর্শনের জন্য দরকারী স্ট্যাটিক ওয়েব পেজের তৈরি করতে পারেন৷আপনি যদি এটিকে সর্বজনীন এবং বিশ্ব দ্বারা দর্শনযোগ্য করতে চান তবে আপনার যা দরকার তা হল একটি ওয়েব হোস্টিং অ্যাকাউন্টের জন্য সাইন আপ করা এবং আপনার ফাইলগুলিকে আপনার অ্যাকাউন্টের মধ্যে সর্বজনীন ফোল্ডারে সংরক্ষণ করা৷
আসলে, আপনার নিজস্ব ওয়েবসাইট চালু করা আশ্চর্যজনকভাবে সহজ, বিশেষ করে যদি আপনি ওয়ার্ডপ্রেসের মতো একটি বিষয়বস্তুর ব্যবস্থাপনা প্ল্যাটফর্ম ব্যবহার করতে চান।
HTML ফাইলের উদাহরণ
আপনার নিজস্ব ওয়েব পেজ তৈরি করতে কোনো প্রোগ্রামিং ব্যাকগ্রাউন্ড লাগে না। আসলে, আপনি এখনই নোটপ্যাড খুলতে পারেন, কিছু সাধারণ টেক্সট টাইপ করতে পারেন এবং এটিকে .html বা .htm ফাইল হিসাবে সংরক্ষণ করতে পারেন।এটি আপনার তৈরি করা প্রথম ওয়েব পৃষ্ঠা হতে পারে এবং আপনার যা দরকার তা হল আপনার নিজের কম্পিউটার৷
নীচে একটি খুব সাধারণ HTML ফাইলের উদাহরণ।
<!DOCTYPE html>
<html lang="en">
<head>
<title>ওয়েব পেজের শিরোনাম</title>
</head>
<body>
<h1>এটি প্রথম শিরোনাম</h1>
<p>এটি আমার প্রথম অনুচ্ছেদ।<br>
<p>এটি দ্বিতীয় লাইন</p>
<p>এটি আরেকটি অনুচ্ছেদ।</p>
</body>
</html>প্রথম দুটি লাইন ব্রাউজার বলে যে নথিটি HTML বিন্যাসে এবং ভাষাটি ইংরেজি।
এখানে উপরের ওয়েব পেজ ফাইলটি আপনি যখন আপনার ব্রাউজার দিয়ে খুলবেন।
এইচটিএমএল হলো একটি নেটওয়ার্ক ভিত্তিক কাজ।ওয়েবপেজ সুন্দর ভাবে গঠন করতে এইচটিএমএল এর গুরুত্ব অনেক।আশাকরি আজকের আর্টিকেলে এইচটিএমএল সম্পর্কে কিছুটা হলেও ধারণা দিতে পেরেছি।সাথে থাকর জন্য ধন্যবাদ।
