HTML Tutorial in Bangla- Web Design-এইচটিএমএল- ওয়েব ডিজাইন শিখুন

HTML Tutorial in Bangla-Web Design-এইচটিএমএল-ওয়েব ডিজাইন শিখুন

ইতিহাস

১৯৮০ সালে ব্রিটিশ কম্পিউটার বিজ্ঞানী টিম বার্নার্স-লি, যিনি সার্ন এ একজন ঠিকাদার ছিলেন, সর্বপ্রথম সার্ন গবেষকদের মাঝে দস্তাবেজ শেয়ার করার জন্য ENQUIRE prototyped নামে একটি ‍System এর প্রস্তাব দেন। ১৯৮৯ সালে, বার্নার্স-লি একটি ইন্টারনেট ভিত্তিক হাইপারটেক্সট সিস্টেম প্রস্তাবে একটি মেমো লিখেন। ১৯৯০ সালে বার্নার্স-লি ব্রাউজার এবং সার্ভারের সফ্টওয়্যারে এইচটিএমএল (HTML) এর উল্লেখ করেন ।এ বছরেই, বার্নার্স-লি এবং সার্ন এর তথ্য সিস্টেম ইঞ্জিনিয়ার Robert Cailliau যৌথভাবে সার্নকে এ প্রকল্পের জন্য অর্থায়নে অনুরোধ করেন, কিন্তু প্রকল্পটি আনুষ্ঠানিকভাবে সার্ন দ্বারা গৃহীত হয়নি।

এইচটিএমএল

এইচটিএমএল -HTML এর পূর্নরূপঃ হাইপার টেক্সট মার্কআপ ল্যাংগুয়েজ (Hypertext Markup Language)।

বর্তমানে একজন অতি সাধারণ মানুষেরও একটি নিজস্ব ওয়েব সাইট থাকে।

এইচটিএমএল এর মাধ্যমে আপনি আপনার এই নিজস্ব ওয়েবসাইট ডিজাইন তথা তৈরি করতে পারবেন।

আমাদের এই এইচটিএমএল টিউটোরিয়ালটি আমরা খুবই সহজভাবে উপস্থাপন করেছি যেন আপনিও খুব সহজেই পুরো এইচটিএমএল শিখতে পারেন এবং নিজের ওয়েবসাইটটি ডিজাইন করতে কোন ডেভেলপার ভাড়া না করে নিজেই করতে পারেন।

এইচটিএমএল শেখা খুবই সহজ এবং আশা করি আপনি আমাদের এই টিউটোরিয়ালটি উপভোগ করবেন।

এইচটিএমএল ভূমিকা (HTML Introduction)

HTML (এইচটিএমএল) হচ্ছে Hyper Text Markup Language. অর্থাৎ এইচটিএমএল হল ওয়েব পেজ তৈরির জন্য স্ট্যান্ডার্ড মার্কআপ ভাষা। এইচটিএমএল মার্কআপ ব্যবহার করে একটি ওয়েব পেজের মূল কাঠামো তৈরী করা হয়। এইচটিএমএল এটি কোন প্রোগ্রামীং ভাষা নয় তবে, জাভাস্ক্রীপ্ট, পিএইচপি সহ ওয়েব ডেভেলপমেন্টের জন্য ব্যবহার হয় এমন সকল প্রোগ্রামিং ভাষাগুলি এইচটিএমএল নিয়েই অধিকতর ব্যবহার হয়ে থাকে৷ তাই প্রোগ্রামীং শিখার আগে এইচটিএমএল এর সকল ট্যাগ, এলিমেন্ট, এবং এট্রিবিউট গুলি ভাল করে শিখে নেওয়া আবশ্যক৷
এইচটিএমএল দিয়ে আপনি সব ধরনের ওয়েবসাইট তৈরি করতে পারেন। এই টিউটোরিয়াল গুলিতে আমরা এইচটিএমএল এর সব কিছু ভাল ভাবে বুঝাবার চেষ্টা করেছি।

এইচটিএমএল শেখা সহজ এবং মজার। প্রথম প্রথম বুঝতে একটু কঠিন মনে হলেও আসলে কিন্তু অনেক সহজ। আমরা কম্পিউটার কিংবা মোবাইলে বিভিন্ন গেইম খেলে থাকি৷ এইচটিএমএল দিয়ে আপনি যখন দু'একটি ডেমু বানাবেন তখন এসবের মাঝে গেইম খেলার চেয়েও বেশি মজা পাবেন। আপনি এটি উপভোগ করুন এবং আত্ববিশ্বাস নিয়ে এগিয়ে যান।

শুরুতে যা যা লাগবে-

1. Desktop এ একটি New Folder তৈরী করে সেটার নাম Webdesign দেই।

2. এখন এই ফোল্ডারের ভিতরে একটি New Text Document তৈরী করি।

3. New Text Document টির নাম Index দিতে পারি ।

4. এখন একটি কোড এডিটর অনলাইন থেকে ডাউনলোড করি এবং ইনষ্টল করি।

অনেকগুলো কোড এডিটর সফট্ওয়্যার আছে। আপাতত এখন আমরা Notepad++ সফটওয়্যারটি ডাউনলোড করি।

5. Index নামে সেভ করা New Text Document টির উপরে মাউসের বামদিকে ক্লিক করে

Edit With Notepad++ লেখাটার উপরে মাউস দিয়ে ডকুমেন্টটি কোড এডিটর সফটও্য়্যার Notepad++ দিয়ে ওপেন করি।

6. এখন সফটওয়্যারটি ওপেন হয়ে গেল । এবার উপরের বামদিকের File থেকে Save As এ ক্লিক করে Html type ( Hyper Markup Language ) ফরমাটে সেভ করি।

7. এখন Webdesign Folder এ গিয়ে দেখা যাবে আগের সেই New Text Document টি যেটা এখন আমাদের কম্পিউটারে থাকা ব্রাউজার এর মত দেখাচ্ছে। এখন এটাকে ব্রাউজারে ওপেন করি।

8. এবং ইতিমধ্যে এই Index.html ফাইলটি আমাদের Notepad++ এ ওপেন আছে আর না থাকলে কোড এডিটরে ওপেন করে নেব।

9. এবার আমরা এইচটিএমএল এর ব্যাসিক ট্যাগটি লেখা আরম্ভ করবো এবং লেখা শেষে সেভ করবো Ctrl+S দিয়ে এবং ব্রাউজারে গিয়ে ব্রাউজার রিলোড করলেই আমাদের লেখা কোডের আউটপুট ব্রাউজারে শো করবে।

তো এখন চলো এইচটিএমএল এর বেসিক ট্যাগ গুলো লেখা শিখিঃ

নোটপ্যাডে নিচের কোড বা লেখাগুলো লিখি, সেভ করি এবং ব্রাউজারে ওপেন করি।

`<html>`

`<head>`

`<title> webdesign start </title>`

`</head>`

`<body>`

`<h1>` `My First Heading</h1>`

`<p> My First Paragraph </p>`

`</body>`

`</html>`

Output:

এইচটিএমএল ট্যাগ

HTML ট্যাগ কি?

HTML এ প্রোগ্রাম লেখার জন্য <> এবং দুইটা চিহ্ন এবং এর মধ্যে কিছু Pre-defined Word যেমন html, head, title, body ইত্যাদি Keyword ব্যবহার করা হয়। <> বা চিহ্ন এবং এর মাঝে লেখা এক একটি Keyword কে একত্রে ট্যাগ বলা হয়। যেমন এবং । হল body শুরু ট্যাগ এবং হল body শেষ ট্যাগ।
এইচটিএমএল ট্যাগ সচরাচর জোড়ায়-জোড়ায় থাকে। যেমন <p> এবং </p>।
জোড়ার প্রথম ট্যাগকে ওপেনিং ট্যাগ এবং দ্বিতীয় ট্যাগকে ক্লোজিং ট্যাগ বলা হয়।
ক্লোজিং ট্যাগকে ওপেনিং ট্যাগের মতই লেখা হয়, ক্লোজিং ট্যাগের ক্ষেত্রে ট্যাগের নামের আগে শুধুমাত্র একটি ফরওয়ার্ড স্ল্যাশ(/) দিতে হয়।

চিত্রঃ এটা এইচটিএমএল লেখার বেসিক স্ট্রাকচার

বহুল ব্যবহ্নত ট্যাগ সমুহ

ট্যাগ সমুহ	বর্ণনা
<!--Comment-->	এটা দ্বারা কমেন্ট বুঝায়। অর্থাৎ এই ট্যাগ দিয়ে কোড এডিটরে কমেন্ট করা হয়।
<!DOCTYPE html>	ডকুমেন্ট এর টাইপ বুঝায়। এটি ওয়েব ব্রাউজারের জন্য একটি নির্দেশনা এইচটিএমএল এর 5.0 ভারসনকে বুঝাতে এটা ব্যবহার করা হয়।
<html> ....</html>	একটি এইচটিএমএল ডকুমেন্টের মূল ট্যাগ এর জন্য ব্যবহার করা হয়। এটি অন্যান্য সকল এইচটিএমএল এলিমেন্টের ধারক।
<head> .....</head>	একটি ডকুমেন্টের Head সেকশনকে বুঝানো হয়। এটি সাইটের টাইটেল, স্টাইলশীট লিঙ্ক, মেটাডাটা ইত্যাদী তথ্যকে ধারণ করে।
<title> .....<title>	কোন একটি ডকুমেন্টের Title নাম দেয়ার জন্য <title> ট্যাগ ব্যবহার করা হয়।
<body>......<body>	ডকুমেন্টের Body সেকশনকে বুঝায়। একটি এইচটিএমএল ডকুমেন্টের সব কন্টেন্টগুলোই <body>ট্যাগের মধ্যে থাকে।
<H1>.....</H1> <H2>.....</H2> <H3>.....</H3> <H4>.....</H4> <H5>.....</H5> <H6>.......</H6>	এটি দ্বারা কোনো কিছুর হেডিং বা শিরোনাম দেয়া হয়। H1 হচ্ছে সবথেকে বড় হেডিং মানে আকারে সবার থেকে বড় আর H6 হচ্ছে সব থেকে ছোট আকারের হেডিং ট্যাগ।
<p>....</p>	ওয়েব সাইটে বিস্তারিত বা বড় আকারের লেখা প্রকাশ করতে এই প্যারাগ্রাফ ট্যাগ ব্যবহার করা হয়।
<div>.....</div>	ডকুমেন্টের মধ্যে একটি Division বা একটি Section নির্দেশ করে করে।
<a>........</a>	এই ট্যাগ দ্বারা হাইপারলিংক বুঝায়, এক পেজ থেকে অন্য পেজে লিংক করতে ব্যবহ্নত হয়।
<br>	এই ট্যাগের মাধ্যমে একটি লাইন ব্রেক নেওয়া হয়।
<hr>	দুটো সেকশনের মাঝখানে হরিজন্টাল রেখা টানার জন্য এই ট্যাগ ব্যবহার করা হয়।
<span>......</span>	লেখার বা ডকুমেন্টের নির্দিষ্ট অংশে আলাদা স্টাইল দেয়ার জন্য ব্যবহার করা হয়।
<img>	ইমেজ অন্তর্ভুক্ত করার জন্য ব্যবহার করা হয়।

HTML Element কি?

HTML এ যেকোন শুরু ও শেষ tag এবং মাঝের অংশকে সংশ্লিষ্ট tag এর Element বলা হয়। যেমন <h1> This is an example of element.</h1> । এখানে <h1> হেডার 1 শুরু এবং </h1> হেডার1 শেষ ট্যাগের মাঝে This is an example of element. লেখা হয়েছে, তাই This is an example of element.হচ্ছে h1 tag এর element । কিছু কিছু ট্যাগের কোন Element থাকে না যেমন <br /> <img /> ইত্যাদি।

সাধারণতঃ যে সকল ট্যাগের শেষ ট্যাগ থাকে না তাদের ইলিমেন্টও থাকে না। এ ধরণের শুরু ট্যাগের মধ্যেই / চিহ্নটি অন্তর্ভূক্ত থাকে, এবং এর আগে একটা স্পেস দিতে হয়। আর এগুলোকে বলা হয় HTML empty Element

HTML Attributes কি?

HTML এ ট্যাগের কার্যক্ষমতাকে বর্ধিত করার জন্য শুরু tag এর মধ্যে কিছু pre-defined কথাকে HTML Attribute বলে। মূলত HTML এ ট্যাগের কার্যক্ষমতাকে বর্ধিত করার জন্য Attributes ব্যবহার করা হয়। যেমন < h1 style=”color: red”> Hello এখানে color=”red” অংশটি হল h1 ট্যাগের একটি এট্রিবিউট, যা প্রকাশ করছে ইলিমেন্ট অর্থাৎ This is a paragraph. লেখাটির color কেমন হবে।

এট্রিবিউট	বিবরণ
alt= “......”	এটি ছবির জন্য ব্যবহৃত হয়। ছবি প্রদর্শিত না হলে বিকল্প হিসাবে এই এট্রিবিউট এর ভেলু বা টেক্সটি ব্রাউজারে প্রদর্শিত হয়।
charset= “......”	এটি মেটা ট্যাগে ব্যবহৃত হয়। অর্থাৎ অক্ষর বা ক্যারেক্টার এনকোডিং নির্ধারণ করার জন্য এটি ব্যবহার করা হয়।
class= “......”	এটি ষ্টাইল শিটের জন্য বা এলিমেন্টকে ষ্টাইল করার জন্য ব্যবহার হয়ে থাকে।
href= “......”	এটি একটি লিঙ্কের URL সেট করতে ব্যবহার করা হয়।
id= “......”	একটি এলিমেন্টের জন্য ইউনিক নাম সেট করে। যা ষ্টাইল অথবা স্ক্রিপ্ট এর জন্য ব্যবহৃত হয়
src= “......”	একটি ইমেজ বা স্ক্রিপ্ট এর সোর্স সেট করতে ব্যবহার হয়।
style= “......”	যে কোন এলিমেন্টকে ইনলাইন স্টাইল করার জন্য এটি ব্যবহার করা হয়।
title= “......”	একটি এলিমেন্ট সম্পর্কে অতিরিক্ত তথ্য সংযুক্ত করতে এটি ব্যবহার করা হয়।

HTML DOCTYPE Tag কি?

HTML এ <!DOCTYPE> Tag হচ্ছে আপনার লেখা HTML ডকুমেন্টটি কি ধরনের তা ব্রাউজারকে বোঝানোর জন্য ব্যবহৃত হয়। এইচটিএমএল এর কোন ভার্সন ব্যবহার করবেন সেটার উপর ভিত্তি করেই এই ডিক্লেয়ারেশন টি দেয়া হয়। যেমন উপরের ডকুমেন্ট টি এইচটিএমএল ৫ এর একটি ডকুমেন্ট, তাই এটাকে আমরা এভাবে

<!DOCTYPE html> লিখি ।

মেটা অক্ষর এনকোডিং

এটি ব্রাউজারকে ওয়েব পেজে ব্যবহৃত অক্ষর এনকোডিং সম্পর্কে তথ্য প্রদান করে।

অর্থাৎ ওয়েব পেজে বাংলা লেখা সাপোর্ট করার জন্য এটা ব্যবহার করা যেতে পারে।

এটি এভাবে লিখতে হয় হেড সেকশন ট্যাগের নিচে টাইটেল ট্যাগের উপরেঃ

`<meta charset="UTF-8">`

এইচটিএমএল বিন্যাস (HTML Formatting)

Formatting শব্দের বাংলা অর্থ বিন্যাস বা সজ্জা। এইচটিএমএল ফর্মেটিং বলতে সাধারণত টেক্সট ফর্মেটিং বুঝানো হয়। আমরা সবাই কম বেশি Microsoft Word এর সাথে পরিচিত। জীবনে কোন না কোন সময় আমরা Microsoft Word নিয়ে কাজ করেছি বা মাইক্রোসপ্টের এই সফটওয়্যার নিয়েই আমরা আমাদের কম্পিউটার কীবোর্ড চালাতে শিখেছি। এই Microsoft Word এ টেক্সট নিয়ে আমরা অনেক কিছু করেছি। যেমনঃ- কোন একটি টেক্সটকে মোটা করা, একটু বাঁকা করা, টেক্সটের নিচে আন্ডার লাইন দেওয়া, টেক্সটকে মনের মত করে ডিজাইন করা, ছোট করা, বড় করা, অথবা বিশেষ কোন টেক্সটকে হাল্কা রঙ দিয়ে চিহ্নিত করা, খেলার ছলে এরকম অনেক কিছুই আমরা করেছি। সেখানে যা করেছি এইচটিএমএলে কোডের মাধ্যমে সেই একই কাজ করার নাম HTML Text Formatting.
যেহেতু ফর্মেটিং বলতে সাজ সজ্জাকে বুঝানো হয়, সেহেতু সিএসএস দিয়েও এমন ফর্মেটিং করা যায়। তবে, এই কাজ গুলি খুব ছোট কিন্তু বহুল ব্যবহৃত। এগুলিকে সিএসএস দিয়ে করতে গেলে হয়তো ইনলাইন ষ্টাইল করতে হবে অথবা ক্লাস বা আইডি বানিয়ে ষ্টাইলশিটে কোড করে ডিজাইন করতে হবে। এতে করে কোড এবং সময় দুটো'ই বেশি হয়ে যায়। কিন্তু এইচটিএমএলে মাত্র ছোট্ট একটি ট্য্যাগের মাধ্যমে এটা অতি সহজে হয়ে যায় বলেই এই ট্যাগ গুলোকে ফর্মেটিং ট্যাগ বলা হয়। এসব ট্যাগের মাধ্যমে শুধুমাত্র টেক্সটকেই ফর্মেটিং করা হয়। তাই এর নাম টেক্সট ফর্মেটিং। নিচে এইচটিএমএল ফর্মেটিং ট্যাগ ও ব্যবহার টেবিল আকারে দেখালাম-

ট্যাগ সমুহ	বর্ণনা
<b>....</b>	এটা দ্বারা টেক্সটকে মোটা বা গাঢ় করা হয় এটি বোল্ড ট্যাগ।
<del>....</del>	টেক্সটকে মুচে দেওয়া বা কেটে দেওয়া হয়েছে বুঝানোর জন্য ব্যবহৃত হয়।
<em>....</em>	Emphasized বা গুরুত্বপূর্ণ টেক্সট বুঝায়। যা দেখতে বাকা দেখায়
<i>....</i>	হাল্কা বাঁকা ইটালিক টেক্সট এর জন্য ব্যবহার করা হয়।
<mark>....</mark>	কোন টেক্সটকে বিশেষ ভাবে চিহ্নিত করার জন্য হাইলাইট করে রাখার জন্য এই ট্যাগ ব্যবহার করা হয়।
<strong>....</strong>	বিশেষ বা গুরুত্বপূর্ণ টেক্সট বুঝানোর জন্য ব্যবহার করা হয়। এটিও বোল্ড ট্যাগ।
<sub>....</sub>	Subscript বা নিম্নে লিখনযুক্ত টেক্সট বুঝানো হয়। Example: H₂O
<sup>....</sup>	Superscript বা শীর্ষে লিখনযুক্ত টেক্সট বুঝানো হয়। যেমনঃ a²

HTML Tutorial in Bangla- Web Design-এইচটিএমএল- ওয়েব ডিজাইন শিখুন

ইতিহাস