এইচটিএমএল (html) কী? কেন html শিখবেন?
ইচটিএমএল (HTML) হচ্ছে একটি মার্কআপ ল্যাংগুয়েজ। ওয়েবপেইজ তৈরীর জন্য এ ল্যাঙ্গুয়েজ ব্যবহৃত হয়। HTML কে কঠিন ভেবে অনেকেই ইচ্ছে করে দূরে থাকে। এইচটিএমএল থেকে দূরে থাকার কারণগুলো খুবই অদ্ভুত।
যেমন – অনেকে মনে করেন আমি ওয়েব ডিজাইনার না বা ওয়েব ডিজাইনার হতে চায় না তাহলে আমি কেন এইচটিএমএল শিখব। আবার অনেকে এ প্রোগ্রামিং ল্যাঙ্গুয়েজ অনেক কঠিন মনে করে শিখেন না । এসব ভুল ধারণা দূর করতে আমার এ আর্টিকেল লেখা।তো চলুন প্রথমেই দেখে নেই html কী?
এইচটিএমএল (html) কী?
এইচটিএমএল (html) ওয়েব পেইজ তৈরীর জন্য বহুল ব্যবহৃত একটি ল্যাঙ্গুয়েজ। এটি মূলত টেক্সট ভিত্তিক প্রোগ্রাম ভাষা। ওয়েব ডেভেলপার হতে হলে এ ভাষাটি সবার আগে শিখতে হয়।
এইচটিএমএল (html) এর পূর্ণ রূপ হলো – হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজ (Hypertext Markup Language)। টিম বার্নার্স লি (Tim Berners Lee) ১৯৮০ সালের দিকে এ ভাষার প্রাথমিক রূপ প্রদান করেন।
HTML ব্যবহার করে খুব সহজেই ওয়েবপেইজ ডিজাইন করা যায়। HTML ফাইলে লেখা (Text), অডিও, ভিডিও, গ্রাফিক্স, এনিমেশন ইত্যাদি লিঙ্ক করা যায়। এইচটিএমএল কতগুলো Markup ট্যাগের সমষ্টি যা ওয়েবপেইজে বিভিন্ন এলিমেন্ট কীভাবে প্রদর্শন করবে তা নির্দেশ করে।
প্রথমে এইচটিএমএল তৈরির উদ্দেশ্য ছিল বৈজ্ঞানিক গবেষণার তথ্য-উপাত্ত দ্রুত পৃথিবীর বিভিন্ন স্থানে আদান প্রদান করা। NCSA দ্বারা ডেভেলপকৃত মোজাইক ব্রাউজারের মাধ্যমে ১৯৯০ সালের দিকে html পরিচিত লাভ করে।
জানুয়ারি, ১৯৯৭ WC3 কর্তৃক প্রথম ডেভেলপকৃত HTML3.2 প্রকাশিত হয় এবং ডিসেম্বরেই WC3 HTML এর নতুন সংস্করণ HTML4.2 প্রকাশ করে। বর্তমানে html এর সর্বশেষ ভার্সন হচ্ছে HTML5। স্মার্টফোন ও ট্যাবলেটের মত ডিভাইস বিবেচনায় রেখে HTML5 এর অনেক ফিচার নির্মিত হয়েছে।
এইচটিএমএল (html) এর সুবিধা (Advantage of HTML)
ওয়েবপেইজ লিখার জন্য সবচেয়ে বেশি ব্যবহৃত ল্যাঙ্গুয়েজ হলো HTML. এটি ব্যবহার করা সহজ। নিচে এর কিছু সুবিধা উল্লেখ করা হলো –
- এইচটিএমএল ভাষা শেখা ও ফরমেটিং করা সহজ।
- প্লেইন টেক্সট বিধায় এডিট করা সহজ।
- অতি দ্রুত ও দক্ষতার সাথে কনটেন্ট সরবরাহ করা যায়।
- HTML ব্যবহার করে ওয়েবপেইজ টেমপ্লেট গঠন করা যায়।
- প্রতিটি ওয়েব ব্রাউজারই html কোড সমর্থন করে।
- সহজেই ওয়েব সাইটের লে-আউট পরিবর্তন করা যায়।
- কোন পেইজের তথ্যকে যেকোনো স্থানে সরানো যায়।
- XML সিনট্যাক্সের সাথে অনেক মিল রয়েছে যা ডাটা সংরক্ষণের জন্য ব্যবহৃত হয়।
- উইন্ডোজ এর সাথে ফ্রি এডিটর।
- ওয়েব ফর্ম ডিজাইন করা যায়।
- থার্ড পার্টি অ্যাপ্লিকেশন ছাড়াই ওয়েব পেইজে সহজে অডিও, ভিডিও এবং এনিমেশন যুক্ত করা যায়।
- এটি ইউজার ফ্রেন্ডলি।
- প্রোগ্রামিং সম্পর্কে ধারনা নেই এমন ব্যবহারকারীরাও সহজে শিখতে পারে।
- এটি সিএসএস (ক্যাসকেডিং স্টাইল শিট) এবং জাভাস্ক্রিপ্ট এবং কিছু অ্যাপলেটের সাথে মিথস্ক্রিয়।
- এটি একটি ওপেন টেকনোলজি।
- HTML এ তৈরি করা যেকোনো সাইটকে রক্ষণাবেক্ষণ এবং আপডেট করা সহজ।
- এইচটিএমএল এ তৈরি করা ওয়েব পেইজকে লোড করতে কম সময় লাগে।
- HTML validator এর সাহায্যে html এ তৈরি করা পেইজের সিনট্যাক্স এরর বের করা যায়।
- সার্চ ইঞ্জিন অপটিমাইজ ফ্রেন্ডলি সাইট তৈরি করা যায়।
- পেইজের সাইজ কম হওয়াতে হোস্টিং স্পেস কম লাগে। তাই এটি মূল্য সাশ্রয়ী ইত্যাদি।
এইচটিএমএল এর অসুবিধা (Disadvantage of HTML)
- একটি সাধারণ ওয়েব পেইজ তৈরি করার জন্য অনেক কোড লিখতে হয়।
- শুধুমাত্র স্ট্যাটিক এবং প্লেইন পেইজ তৈরি করা যায়।
- ডায়নামিক পেজ তৈরিতে ব্যবহৃত হয় না
- HTML এর নিরাপত্তা ব্যবস্থা খুবই দুর্বল।
- ওয়েবসাইটের আকার বৃদ্ধি পেলে কনটেন্ট গুলো সহজে নিয়ন্ত্রণ করা যায় না অর্থাৎ বড় করে লেখা পেইজ চালানো জটিলতার সৃষ্টি হয়।
- মানসম্মত ওয়েব পেইজ ডিজাইনিং যেমন ই-কমার্স সাইট কিংবা গান, ভিডিও ডাউনলোড সাইট অত্যন্ত কষ্টসাধ্য এবং সময় সাপেক্ষ ইত্যাদি।
এইচটিএমএল শিখতে যে শব্দগুলি ভালভাবে জানা দরকার-
- এইচটিএমএল এলিমেন্ট (HTML Element)
- html ট্যাগ (HTML Tag)
- এইচটিএমএল অ্যাট্রিবিউট (HTML Attribute)
এইচটিএমএল এলিমেন্ট (HTML Element)
HTML ডকুমেন্টগুলো HTML এলিমেন্ট দ্বারা নির্ধারিত হয়। HTML এলিমেন্ট বলতে স্টার্ট ট্যাগ এবং ইন্ড ট্যাগের ভেতরের সবকিছু বুঝায়। এদেরকে ওপেনিং ট্যাগ এবং ক্লোজিং ট্যাগও বলে। যেমন –
| স্টার্ট ট্যাগ /ওপেনিং ট্যাগ | এলিমেন্ট কনটেন্ট | ইন্ড ট্যাগ/ক্লোজিং ট্যাগ |
| <p> | noproblebd.com | </p> |
| <a href=”default.htm”> | This is a link | </a> |
| <br/> |
এইচটিএমএল এলিমেন্ট সিনটেক্স(HTML Element Syntax)
- এইচটিএমএল শুরু হয় ওপেনিং ট্যাগ দিয়ে আর শেষ হয় ইন্ড ক্লোজিং ট্যাগ দিয়ে।
- স্টার্ট ও ইন্ড ট্যাগের মধ্যবর্তী সবকিছুই হল এলিমেন্ট কনটেন্ট।
- কিছু কিছু এইচটিএমএল এলিমেন্টের কোন কনটেন্ট থাকেনা।এগুলোকে এম্পটি কনটেন্ট বলে।
- এম্পটি বা খালি এলিমেন্টগুলো স্টার্ট ট্যাগের মধ্যেই শেষ হয়ে যায়।
- অধিকাংশ এইচটিএমএল এলিমেন্টের অ্যাট্রিবিউট থাকতে পারে।
এইচটিএমএল ট্যাগ (HTML Tag)
html ট্যাগ হলো এইচটিএমএল ডকুমেন্টের সাথে এমবেডেড কোডিং নির্দেশাবলী। ওয়েব ব্রাউজার এইচটিএমএল ট্যাগের লেখা প্রদর্শন করে থাকে। ট্যাগ হলো কিওয়ার্ড যা জোড়া অ্যাঙ্গেল ব্র্যাকেটের মধ্যে লিখতে হয়। প্রথম অ্যাঙ্গেল ব্র্যাকেট < > কে ওপেনিং ট্যাগ এবং স্ল্যাশসহ শেষ অ্যাঙ্গেল ব্যাকেট </ > কে ক্লোজিং ট্যাগ বলা হয়।
HTML Tags সিনটেক্স
ট্যাগগুলো সাধারণত জোড়ায় জোড়ায় আসে।যেমন- <br></br>। জোড়ার প্রথমটি হলো শুরুর ট্যাগ আর দ্বিতীয়টি হলো শেষ করার ট্যাগ। এগুলোকে ওপেনিং ট্যাগ এবং ক্লোজিং ট্যাগ নামেও ডাকা হয়। বিশেষভাবে লক্ষণীয় যে, কোন ট্যাগ শুরু করলে অবশ্যই সেটি শেষ করার জন্য দ্বিতীয় অংশটুকু ব্যবহার করতে হবে যেমন-
|
1
2
|
<p> noproblembd.com</p> |
ট্যাগ এর গঠন
- অপেক্ষাকৃত ক্ষুদ্রতর চিহ্ন (A less-than sign “<“
- একটি অক্ষর বা শব্দ (A word or character)
- অপশনাল স্পেস এর পর html এট্রিবিউট যার গঠন হলো : এট্রিবিউট নাম= “ভ্যালু”
- অপেক্ষাকৃত বৃহত্তর চিহ্ন (A greater-than sign “>”
- শেষ ট্যাগে ফ্রন্ট স্ল্যাশ চিহ্ন “/” ব্যবহৃত হয়।
এইচটিএমএল অ্যাট্রিবিউট (HTML Attribute)
এইচটিএমএল ডকুমেন্ট এর জন্য অ্যাট্রিবিউট খুব প্রয়োজনীয়।অ্যাট্রিবিউট ছাড়া ওয়েব পেইজে কোন ছবি,হাইপারলিঙ্ক, এ্যাংকর নাম ইত্যাদি যুক্ত করা যায় না।
ট্যাগের নির্দেশকে সুনির্দিষ্টভাবে নির্ধারণ করে একটি এট্রিবিউট।অ্যাট্রিবিউট হিসেবে নির্দিষ্ট ফরমেট অনুসরণ করা হয়। HTML tag এর সাথে এট্রিবিউট যুক্ত করার জন্য ট্যাগ নামের পর স্পেস দিয়ে এট্রিবিউট নাম, সমান চিহ্ন (=),এবং কোটেশন চিহ্নের মধ্যে এট্রিবিউট ভ্যালু দিতে হবে।যেমন –
|
1
2
|
<p style="color:red;"> noproblembd.com</p> |
এখানে <p হচ্ছে ট্যাগ নাম, style হচ্ছে এট্রিবিউট নাম এবং “color:red;” হচ্ছে এট্রিবিউট ভ্যালু।
এইচটিএমএল (html) এর মৌলিক কাঠামো
|
1
2
3
4
5
6
7
|
<html > <head> <title> Basic structure of an HTML </title></head> <body> Content of the page. </body> </html> |
এখানে, <html > ট্যাগ নির্দেশ করে যে এই ওয়েব পেইজটি html দিয়ে লেখা হয়েছে।
<title> এই ট্যাগ ওয়েব পেইজের শিরোনাম (টাইটেল) ধারণ করে।
<head> ট্যাগ ওয়েব পেইজ সম্পর্কিত তথ্য ধারণ করে।
<body> এই ট্যাগ ওয়েবপেইজের উপাদান (কনটেন্ট) ধারণ করে।
</html> ট্যাগ ওয়েবপেইজটি শেষ হয়েছে নির্দেশ করে।
কেন html শিখবেন?
ওয়েবের মূল/প্রধান ভিত্তি হচ্ছে এইচটিএমএল (html)। আপনি এফিলিয়েট মার্কেটার, ই-মেইল মার্কেটার, সিপিএ মার্কোটার বা ভার্চুয়াল অ্যাসিস্ট্যান্ট যেটায় হন না কেন আপনি আপনার অজান্তে হলেও html নিয়ে কাজ করছেন।
আপনি যখন ওয়ার্ডপ্রেসে কিছু পোস্ট করেন তা মূলত ওয়েব ব্রাউজারে এইচটিএমএল (html) আকারেই প্রদর্শিত হয়। আপনি যখন অন্যের কোন ওয়েবসাইট ব্রাউজ করেন তখনও তা এইচটিএমএল (html) আকারেই দেখেন। মূলত ব্রাউজার html ডাটাকেই আপনার সামনে ভিজুয়ালি প্রদর্শিত করে।
আপনি যদি আপনার সাইটের ভালো ডিজাইন করতে চান তাহলে আপনি হয়তো বা কোন থিম কিনবেন বা ফ্রিতে ব্যবহার করবেন। কিন্তু এগুলো হয়তোবা আরও অনেকেই ব্যবহার করছে।এক্ষেত্রে আপনার ওয়েবসাইটটি ইউনিক ডিজাইনের হল না।এবার আপনি যদি কোন ওয়েব ডিজাইনার ভাড়া করে একটা কাস্টম থিম ডিজাইন করে নিতে চান তাহলে এতে অনেক খরচ পড়বে।
কিন্তু আপনি যদি একটা ফ্রি ডিজাইনকে আপনার ইচ্ছে অনুযায়ী নিজের মত করে ডিজাইন করে ইউনিক করতে পারেন তাহলে কেমন হয়? সামান্য html এবং সিএসএস (css) জানলেই এই কাজটা আপনি খুব সহজে করতে পারবেন। এতে করে আপনার খরচ বাঁচলো আবার আপনার ওয়েবসাইটের ডিজাইনটিও ইউনিক হলো। তাই এইচটিএমএল (html) শিখা খুব জরুরি।
HTML শিখতে হলে ইন্টারনেট থাকা লাগবে কী?
HTML শেখার জন্য ইন্টারনেট থাকা লাগবে না। কারণ কিছু ফাইল এক্সিকিউট করে এইচটিএমএল (html) আউটপুট ব্রাউজার এর কাছে পাঠিয়ে দেওয়ায় হচ্ছে ওয়েব সার্ভারের কাজ। এইচটিএমএলকে(html) ভিজুয়ালি প্রদর্শন করে ব্রাউজার নিজেই।এখানে ওয়েব সার্ভারের কোন অবদান নেই।
মোটকথা হচ্ছে এইচটিএমএল (html) এ ওয়েব ডিজাইন এর সম্পূর্ণ কাজই আপনি ব্রাউজার ব্যাবহার করে করতে পারবেন। এর জন্য ইন্টারনেটের প্রয়োজন হয় না ।তবে ওয়ার্ডপ্রেস কাস্টমাইজেশন সহ এ ধরনের অন্যান্য কাজে ওয়েব সার্ভারের দরকার হয়। এক্ষেত্রে আপনি Xampp বা Wamp ব্যবহার করে খুব সহজেই একটি লোকাল সার্ভার বানিয়ে নিতে পারবেন।যেটা লাইভ ওয়েব সার্ভার এর মতই কাজ করবে।
HTML কী শুধু ওয়েব ডিজাইনারদের জন্য?
এইচটিএমএল শুধু ওয়েব ডিজাইনারদের জন্য এই ধারণা সম্পূর্ণ ভুল। এইচটিএমএল (html) এর পরিধি অনেক বিস্তৃত। আপনি কী জানেন? HTML দিয়ে যেকোনো ডিভাইসের জন্য অ্যাপ, গেইম ইত্যাদি ডেভেলপ করা যায়। HTML দিয়ে তৈরি Google Play Store , Apple App Store, Amazon Kindle Store এ অনেক জনপ্রিয় অ্যাপ আছে। এমনকি নতুন বাজারে আসা ফায়ারফক্স (Firefox) , ওএস (OS) এর প্রধান ডেভেলপমেন্ট ল্যাঙ্গুয়েজ হচ্ছে এইচটিএমএল (html)।
এছাড়াও আপনি যদি সিপিএ(CPA) করেন তাহলে ল্যান্ডিং পেইজ ডিজাইন তৈরির জন্য, এফিলিয়েট করলে লিঙ্ক দিয়ে বাটন তৈরির জন্য, এসইও (SEO) করলে এসইও (SEO) ফ্রেন্ডলি করে ওয়েব সাইটের মার্কআপের জন্য HTML প্রয়োজন। অর্থাৎ যেই দিকেই যান না কেন এইচটিএমএল(html) এর গুরুত্ব অতুলনীয়।