HTML কেন ব্যবহার করা হয় এর কোডিং কিভাবে করে

জেনে নিন HTML কেন ব্যবহার করা হয় এর কোডিং কিভাবে করে? আসুন এ বিষয়ে আলোচনা করে আজকে বিস্তারিত জেনে নেওয়া যাক।

HTML কি?

Html এর পুরো কথা হলো হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ (Hyper Text Markup Language) Html হলো এক ধরনের কম্পিউটার ল্যাঙ্গুয়েজ। যার সাহায্যে কোন ওয়েবসাইট বানানো হয়। এটি এমন একটি প্রোগ্রামিং ল্যাঙ্গুয়েজ যার মাধ্যমে একটি পুরো ওয়েবসাইট, শুধুমাত্র Coding এবং বিভিন্ন ধরনের Tag এর সাহায্যে বানানো হয়ে থাকে।

আরো পড়ুন: গ্রাফিক্স ডিজাইনে কোন সফটওয়্যার ব্যবহার করা হয়(এটুজেড)
আরো পড়ুন: ওয়েব ডেভেলপমেন্ট শিখতে কি কি প্রয়োজন
আরো পড়ুন: গুগল অ্যাডসেন্স ও ফেসবুক থেকে সহজে যেভাবে আয় করবেন

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

HTML কেন ব্যবহার করা হয় এর কোডিং কিভাবে করে

HTML এর full ফর্ম সম্পর্কে বিস্তারিত

আমরা আগেই জেনেছি এইচটিএমএল পুরো কথা হল হাইপারটেক্সট মার্কআপ ল্যাংগুয়েজ (Hypertext Markup Language)। এখন আমরা এই চারটি জিনিস সম্পর্কে বিস্তারিত জেনে নেব। যার মাধ্যমে html সম্পর্কে বুঝতে আমাদের খুব সহজ হবে।

Hypertext

এটি এমন এক ধরনের টেক্সট যার সাহায্যে, বিভিন্ন ওয়েবসাইটের ওয়েবপেজ গুলিকে explore করতে কাজে লাগে। হাইপারটেক্সট বিভিন্ন টেক্সট ফাইল গুলোকে একসাথে জুড়ে রাখতে সাহায্য করে।

যখন একটি ওয়েব পেজে অন্য ওয়েবপেজ গুলিকে লিঙ্ক করা হয় তখন হাইপারটেক্সট কাজে লাগে। এইজন্য হাইপারটেক্সট কে হাইপারলিংক (Hyperlink) বলা হয়। এবং বিভিন্ন ধরনের ছবি ভিডিও এগুলোর মধ্যে যখন লিঙ্ক দেয়া হয় তখন তাকে হাইপার মিডিয়া (Hypermedia) বলে।

এইচটিএমএল Anchor tag ( <a> ) এর সাহায্যে নির্দিষ্ট টেক্সটকে লিংক করা হয়।

Markup

নির্দিষ্ট ওয়েবসাইটের টেক্সট কে কিভাবে দেখানো হবে সেটি মার্কআপ ঠিক করে। নির্দিষ্ট টেক্সটটি বোল্ড, আন্ডার লাইন, ইটালিক করবার জন্য বিভিন্ন ধরনের html tag এর ব্যবহার করা হয়। এই এইচটিএমএল ট্যাগ ( <i>, <b>, <u> ) গুলোকেই Markup বলে।

Language

বিভিন্ন ধরনের কোডিং এবং ট্যাগ এর মাধ্যমে এইচটিএমএল ব্যবহৃত হয়। বিভিন্ন ধরনের ওয়েবপেজ বা ডকুমেন্টস বানানোর জন্য এইচটিএমএল ব্যবহার হওয়ার কারণে এটিও একধরনের ল্যাংগুয়েজ বা ভাষা।

HTML মানে কি বা HTML কাকে বলে?

সহজ ভাষায় বলতে গেলে, এইচটিএমএল হলো এক ধরনের কোডিং ল্যাঙ্গুয়েজ যার মাধ্যমে ওয়েবসাইট বানানো হয়। এর পুরো কথা হলো হাইপারটেক্সট মার্কআপ ল্যাংগুয়েজ। হাইপারটেক্সট এর সাহায্যে বিভিন্ন ধরনের ওয়েব পেজ লিঙ্ক করা হয় এবং মার্কআপ নির্দিষ্ট টেক্সট এর ধরন ঠিক করে (কিভাবে ইউজারের সামনে নির্দিষ্ট টেক্সট ডিসপ্লে হবে)। বিভিন্ন ধরনের বড় বড় ওয়েবসাইট html coding এবং html tag এর সাহায্যে বানানো হয়।

HTML এর উদাহরণ:

<html>
<header>
<title>আমার প্রথম এইচটিএমএল ডকুমেন্ট <title>
</header>
<body>
<h1>এখানে আপনার ডকুমেন্টস এর হেডিং দিতে হয়</h1>
<p>নির্দিষ্ট ডকুমেন্টের প্রথম প্যারাগ্রাফ</p>
<p>ডকুমেন্ট এর দ্বিতীয় প্যারাগ্রাফ। এভাবে আপনি যতগুলো প্যারাগ্রাফ দিতে চান, ততগুলো দিতে পারেন</p>
</body>
</html>

HTML এর আবিষ্কারক কে?

১৯৮০ সালে, Sir Tim Berners Lee এইচটিএমএল এর আবিষ্কার করেন। এবং Lee html খোঁজ করার, ৯ বছর পর, ১৯৮৯ সালে ওয়ার্ল্ড ওয়াইড ওয়েবের আবিষ্কার করেন।

আরো পড়ুন: ওয়েব ডিজাইন ক্যারিয়ার
আরো পড়ুন: ওয়েব ডিজাইনার হতে কি কি গুণ থাকা প্রয়োজন?
আরো পড়ুন: কি কি শিখলে ওয়েব ডিজাইনার হতে পারবেন?

HTML এর কাজ কি ও HTML এর ব্যাবহার

আশা করি আপনি জেনে গেছেন html মানে কি। আমরা যদি html এর কাজের সম্পর্কে বলি তাহলে এটির প্রধান কাজ হল কোন ওয়েবসাইটকে তৈরি করা।

তবে এইচটিএমএল এর সাহায্যে, ওয়েবসাইট তৈরি করা ছাড়াও বিভিন্ন ধরনের গেম ডেভেলপমেন্ট, নেভিগেশন, ওয়েবসাইট ডেভেলপমেন্ট, ফরমেটিং এই সমস্ত কিছু করা হয়।

HTML কিভাবে কাজ করে?

এইচটিএমএল বিভিন্ন ধরনের tag এবং code এর মাধ্যমে কাজ করে। বিভিন্ন ধরনের ট্যাগ এইচটিএমএল এ ব্যবহার করার ফলে নির্দিষ্ট ওয়েব পেজটি কিভাবে ওয়েব ব্রাউজার দেখানো হবে সেটি নির্দেশ দেয়।

বিভিন্ন ধরনের ট্যাগ এর সাহায্যে কোন ওয়েব পেজকে Colours, graphics, text, formating করা হয়। ট্যাগ এর মধ্যে থাকা বিভিন্ন ধরনের এলিমেন্ট নির্দিষ্ট ওয়েব পেজকে ইউজার এর সামনে attractive করতে সাহায্য করে।

প্রথমে কোন এইচটিএমএল কোডিং করে সেই ফাইলটিকে কম্পিউটারে .html ফরমেটে সেভ করা হয়। তারপর কোডিং এবং ট্যাগিং সম্পূর্ণ হলে, নির্দিষ্ট html file টি ওয়েব সার্ভারে আপলোড করে দেওয়া হয়। তারপর কোন ব্রাউজার এর সাহায্যে ওই ফাইলটিকে খোলার পর ব্রাউজার তার নির্দিষ্ট ভাষায় এইচটিএমএল ফাইলটি Read করে ইউজারের সামনে ওয়েবসাইটটি দেখায়।

কিভাবে HTML তৈরি করা যায়

এইচটিএমএল তৈরি করার জন্য আপনাকে কম্পিউটারের সাহায্য নিতে হবে। কম্পিউটারের নোটপ্যাড খুলে নিয়ে সেখানে এইচটিএমএল কোডিং করে, এইচটিএমএল ফাইল টিকে .html ফরম্যাটে, কম্পিউটারে সেভ করতে হবে। এরপর নির্দিষ্ট এইচটিএমএল ফাইলটি ঠিকমত কাজ করছে কিনা সেটি দেখার জন্য কম্পিউটারের কোন ব্রাউজার এর সাহায্যে, .html ফাইল টি খুলুন।

এইভাবে নোটপ্যাডে এইচটিএমএল কোডিং করার সাথে সাথে ব্রাউজারের সাহায্যে সেটিকে প্রিভিউ করে আপনি এইচটিএমএল তৈরি করতে পারেন।

এইচটিএমএল কোডিং করার জন্য, নিচে আমি বেসিক এইচটিএমএল কোডিং কিভাবে করে সেটি সম্পর্কে আলোচনা করেছি আপনি এটা দেখে নিন।

HTML এর মাধ্যমে ওয়েব পেজ কিভাবে বানাবেন

আশা করি আপনি html কি এবং html কিভাবে কাজ করে সেটি সম্পূর্ণ বুঝতে পেরেছেন। এবার আমরা এইচটিএমএল এর মাধ্যমে ওয়েব পেজ কিভাবে বানাতে হয় সেটা জানবো।

এইচটিএমএল এর সাহায্যে ওয়েবপেজ বানানোর জন্য আপনি প্রথমে কম্পিউটারের Notepad খুলে নিন।

<!DOCTYPE html>
<html>
<head>
<title> এইচটিএমএল কাকে বলে </title>
</Head>
<body>
<h1> এইচটিএমএল কিভাবে শিখবেন </h1>
<p> Hypertext markup language </p>
</body>
</html>

!DOCTYPE html এই command টির সাহায্যে কম্পিউটার কে বলা হচ্ছে এটি একটি এইচটিএমএল ল্যাঙ্গুয়েজ যার সাহায্যে একটি ওয়েবসাইট বানানো হচ্ছে।

<html> এটি হলো এইচটিএমএল কোডিং শুরু করার এবং </html> এটি শেষ করার ট্যাগ। কোন নতুন কোডিং শুরু এবং শেষ করার জন্য এই দুটি command আবশ্যক।

<head> command টি হলো Main Heading সেকশন। এর মধ্যে যে যে জিনিস গুলো যোগ করতে চান সেগুলি দেওয়ার পর এটিও </head> শেষ করতে হয়। ওয়েবসাইটে হেডলাইন দেওয়ার জন্য এই ট্যাগটি কাজে লাগে।

কোন টাইটেল দেওয়ার জন্য <title> এই command টি টাইটেল এর শুরুতে এবং </title> এটি টাইটেলের শেষে দিতে হয়।

টাইটেল দেওয়া হয়ে গেলে আপনাকে মেন ওয়েবসাইটে কি থাকবে সেটি দেয়ার জন্য <body> ট্যাগ এর সাহায্য নিতে হবে। এখানে আপনি বিভিন্ন ধরন আলাদা আলাদা এলিমেন্ট <h1>, <p>, <i> এর সাহায্যে নির্দিষ্ট টেক্সটকে হেডিং, সাব হেডিং, প্যারাগ্রাফ, ইটালিক, বোল্ড, আন্ডারলাইন করতে পারেন। ওয়েবসাইটের বডিতে সব কিছু যোগ করার পর </body> command টি close করে দিন।

এবার আপনি এই নির্দিষ্ট কোডিং টি কম্পিউটারে .html extension দিয়ে Save করে নিন। তারপর এটিকে কোন ব্রাউজার এর সাহায্যে ঘুরে দেখতে পারেন আপনার ওয়েব পেজটি কেমন তৈরি হয়েছে।

HTML কোথায় ও কিভাবে শিখবেন?

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

ওয়েব ডিজাইন কোর্স করে
অনলাইন থেকে
ইউটিউব ভিডিও দেখে
বিভিন্ন ধরনের বই পড়ে
ওয়েব ডিজাইন কোর্স করে

যদি আপনি অনলাইন মারফত এইচটিএমএল শিখতে চান তাহলে আপনি আপনার পার্শ্ববর্তী কোন ইনস্টিটিউটে এডমিশন নিন। আপনার আশেপাশে ওয়েব ডিজাইন কোর্স করায় এরকম কোন কলেজ নির্বাচন করে সেখানে যোগদান করতে পারেন।

অনলাইন থেকে HTML শিখুন

অনলাইন মারফত যদি আপনি এইচটিএমএল শিখতে চান তাহলে এই সমস্ত ওয়েবসাইট গুলো আপনার জন্য খুবই গুরুত্বপূর্ণ।

w3schools.com
Html.com
Htmldog.com
Javatpoint.com
Udemy.com

ইউটিউব ভিডিও দেখে HTML শিখুন

ইউটিউবে অনেক ধরনের পপুলার চ্যানেল আছে, যারা বিনামূল্যে এইচটিএমএল টিউটোরিয়াল প্রদান করে। আপনি চাইলে তাদের টিউটোরিয়াল দেখে এইচটিএমএল শিখতে পারেন।

আপনি এই জন্য সরাসরি ইউটিউবে গিয়ে ‘Html Tutorial‘ লিখে সার্চ দিন।সঙ্গে সঙ্গে আপনার সামনে অসংখ্য এইচটিএমএল সম্পর্কিত ভিডিও চলে আসবে আপনি তাদের মধ্যে যেকোনো একটি চ্যানেল নির্বাচন করে, সেই চ্যানেলের ভিডিওগুলো একের পর এক ফলো করতে পারেন।

আরো পড়ুন: এসইও কেন আমাদের ওয়েবসাইটে করা প্রয়োজন
আরো পড়ুন: লোকাল এসইও কি এবং কেন প্রতিষ্ঠানের জন্যে এত গুরুত্বপূর্ণ
আরো পড়ুন: এসইও কি এবং কিভাবে ওয়েবসাইটে এসইও করতে হয়?

বিভিন্ন ধরনের বই পড়ে

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

ট্যাগ (Tag) কাকে বলে?

নির্দিষ্ট টেক্সট কিভাবে দর্শকের সামনে দেখানো হবে সেটি এইচটিএমএল ট্যাগ নির্দেশ করে। Tag হলো html এর খুবই সাধারণ শব্দ বা অক্ষর। কিন্তু এর কাজ অনেক বড়। কোনো নির্দিষ্ট ট্যাগ Angular Backets (< >) এর মধ্যে থাকে। নির্দিষ্ট ওয়েবপেজের বিভিন্ন জিনিস একত্রে যুক্ত করার জন্য ট্যাগের ব্যবহার করা হয়।

উদাহরণ:

প্যারাগ্রাফ করবার জন্য <p> এবং </p> ট্যাগ ব্যবহার করা হয়।
বোল্ড করবার জন্য <b> এবং </b> ট্যাগ ব্যবহার করা হয়।
ইটালিক করবার জন্য <i> এবং </i> ট্যাগ ব্যবহার করা হয়।
এরকম অসংখ্য Tag আছে যেগুলি কোন ওয়েবসাইট বানানোর জন্য ব্যবহৃত হয়।

Doctype HTML কি?

কোন এইচটিএমএল কোডিং শুরু করার একদম উপরে এই কমান্ডটি দিতে হয়। এটি কোনো html ট্যাগ নয়। এটি শুধুমাত্র ওয়েব ব্রাউজার কে এটি দেখায় যে নির্দিষ্ট কোডিং টি কোন ধরনের এইচটিএমএল কোডিং।

<!DOCTYPE html>

এই command টি দেখেই কোন ব্রাউজার বুঝে যায় নির্দিষ্ট কোডিং টি এক ধরনের এইচটিএমএল ডকুমেন্ট। এই জন্য এই কমান্ডটি কোনো এইচটিএমএল কোডিং শুরুর একদম উপরে দেওয়া হয়। এবং এর নিচে থেকে <html> কোডিং শুরু করা হয়।

আরো পড়ুন: ব্লগ ভাইরাল করুন টাইটেল দিয়ে, জেনে নিন ৭ টি গোপনীয় কৌশল
আরো পড়ুন: এসইও কি? এসইও কিভাবে করতে হয়?
আরো পড়ুন: এসইও থেকে কিভাবে আয় করব

HTML এবং CSS এর মধ্যে পার্থক্য

১. Html কোনো ওয়েব পেজের গঠন বা স্ট্রাকচার দেয়ার জন্য ব্যবহৃত হয়। কোনো ওয়েবসাইটকে স্টাইলিশ করার জন্য সিএসএস এর ব্যবহার করা হয়। ওয়েবসাইটের রূপ-রং সমস্ত কিছু css এর মাধ্যমে করা হয়।

২. এইচটিএমএল প্রেজেন্টেশন বা ভিজুয়ালাইজেশন এর জন্য ব্যবহার করা হয় না কিন্তু সিএসএস এর সাহায্যে প্রেজেন্টেশন এবং ভিজুয়ালাইজেশন তৈরি করা হয়।

৩. এইচটিএমএল কোড এর মধ্যে সিএসএস যুক্ত করা যায় কিন্তু সিএসএস sheet এর মধ্যে html কোড দেয়া যায় না।

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